초보 개발자의 성장 일기

문제 설명 사진들을 보며 추억에 젖어 있던 루는 사진별로 추억 점수를 매길려고 합니다. 사진 속에 나오는 인물의 그리움 점수를 모두 합산한 값이 해당 사진의 추억 점수가 됩니다. 예를 들어 사진 속 인물의 이름이 ["may", "kein", "kain"]이고 각 인물의 그리움 점수가 [5점, 10점, 1점]일 때 해당 사진의 추억 점수는 16(5 + 10 + 1)점이 됩니다. 다른 사진 속 인물의 이름이 ["kali", "mari", "don", "tony"]이고 ["kali", "mari", "don"]의 그리움 점수가 각각 [11점, 1점, 55점]]이고, "tony"는 그리움 점수가 없을 때, 이 사진의 추억 점수는 3명의 그리움 점수를 합한 67(11 + 1 + 55)점입니다. 그리워하는 사람의 ..

문제 설명 얀에서는 매년 달리기 경주가 열립니다. 해설진들은 선수들이 자기 바로 앞의 선수를 추월할 때 추월한 선수의 이름을 부릅니다. 예를 들어 1등부터 3등까지 "mumu", "soe", "poe" 선수들이 순서대로 달리고 있을 때, 해설진이 "soe"선수를 불렀다면 2등인 "soe" 선수가 1등인 "mumu" 선수를 추월했다는 것입니다. 즉 "soe" 선수가 1등, "mumu" 선수가 2등으로 바뀝니다. 선수들의 이름이 1등부터 현재 등수 순서대로 담긴 문자열 배열 players와 해설진이 부른 이름을 담은 문자열 배열 callings가 매개변수로 주어질 때, 경주가 끝났을 때 선수들의 이름을 1등부터 등수 순서대로 배열에 담아 return 하는 solution 함수를 완성해주세요. 나의 문제 해결..

Hooks 컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기위해 사용한다. Hook의 이름은 반드시 ‘use’로 시작해야 한다. 최상위 Level에서만 Hook을 호출 할 수 있다. State Hook const App = () => { const [state이름, setState이름] = useState(초기값) } useState는 컴포넌트 내 동적인 데이터를 관리할 수 있다. 최초에 useState가 호출 될 때 초기값으로 설정되며 이후 재렌더링이 될 경우 무시된다. state는 읽기전용 이므로 직접 수정하면 안된다. state를 변경하기 위해서는 setState를 이용한다. state가 변경되면 자동으로 컴포넌트가 재렌더링된다. state를 변경하기 위해..

디스트럭처링 디스트럭처링(Destructuring)은 구조화된 배열 또는 객체를 Destructuring(비구조화, 파괴)하여 개별적인 변수에 할당하는 것이다. 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용하다. 디스트럭처링 구문은 함수 매개변수 목록에서도 사용할 수 있다. 함수가 객체를 포함하는 매개변수를 수락하는 경우, 객체 프로퍼티를 “꺼내어’” 로컬 범위 변수(즉, 함수 본문 내에서만 사용할 수 있는 변수)로 사용할 수 있도록 함수를 디스트럭처링할 수 있다. function storeOrder(order) { localStorage.setItem('id', order.id); localStorage.setItem('currency', order.currency..

매개변수 목록 괄호 생략하기 화살표 함수가정확히 하나의 매개변수만 사용하는 경우, 묶는 괄호를 생략할 수 있다. userName => { ... } 함수에 매개변수가 없는 경우에는, 괄호를 생략해서는 안된다. (userName, userAge) => { ... } 함수 본문 중괄호 생략하기 화살표 함수에 반환문 외에 다른 로직이 없는 경우, return키워드와 중괄호를 생략할 수 있다. number => number * 3; 특수한 경우: 객체만 반환하는 경우 자바스크립트는 중괄호를 JS 객체를 생성하는 코드가 아닌 함수 본문 래퍼로 취급한다. number => ({ age: number }); 객체와 중괄호를 추가 괄호로 감싸면, 자바스크립트는 중괄호가 함수 본문을 정의하는 것이 아니라 객체를 생성하..

Props Component에 원하는 값을 넘겨줄때 사용하며 넘겨줄 수 있는 값은 변수, 함수, 객체, 배열등 JavaScript의 요소라면 제한이없다. 주로Component의‘재사용’을 위해 사용한다. props는 읽기 전용으로 임의로 값을 변경해 사용해선 안되고 변경하고 싶다면 새로운 변수를 생성해야 한다. props를 활용해 component 만들기 const Greeting = (props) => { return { props.username } } export default Greeting; const Greeting = (props) => { const { username } = props; return { username } } export default Greeting; const Gree..

React란? 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 Component: React에서 서비스를 개발하는데 있어 독립적인 단위로 쪼개어 구현 Virtual DOM: 가상적인 표현을 메모리에 저장하고 ReactDOM과같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 JSX: JavaScript 내에서 UI를 작성하기 위해 개발자에게 익숙한 환경 제공 HTML과유사 npx 명령어 npm create-reaxt-app [디렉토리명]: 패키지를 1회성으로 내려받아 실행할 때 사용한다. cd [디렉토리명]: [디렉토리명]으로 이동한다. npm start: 현재 디렉토리의 프로젝트를 실행한다. npm build: 파일을 압축하고 번들링 하는 과정이다. 라이브러리 npm inst..

방향성 사실 처음엔 불가능이라고 생각했지만 지금은 어떻게서든 내가 맡은 로그인, 회원가입, 카테고리 부분은 완성했다. 코드만 봤을때는 부족해 보일 수 있지만 처음 배우는 리액트니까, 가독이나, 재사용성에 중점을 두지 않았다. 나처럼 코드를 직접 짜는 프로젝트는 처음이라면 우선 생각을 해본다. 어떻게 로직을 해야 이런 결과가 나올까? 머릿속으로 그리기 어렵다면 그림을 그리는것도 도움이 된다. 나같은 경우에는 아이패드로 그려서 이렇게 짜봐야겠다는 설계를 했다. 모든 작업을 할때 무작정 하는건 없다. 모든 결과물에는 설계가 이루어진다. 개발도 마찬가지이다. 처음엔 시간이 없으니 일단 뭐라도 써보자는 생각으로 코드를 짜내려갔던 과거의 나를 반성하게 된다. 그렇게 하다보면 빠르다고 느낄 수 있지만 원하는 값이 잘..

시간이 너무 아쉽다. 9팀 - 아침엔 날짜: 23-11-09 오늘 작업 내용 회원가입 구현 - API import axios from 'axios'; // 유저정보 목록 불러오기 (로그인, 회원가입 중복 확인) export const getUser = async ({ email, password }) => { try { const getItem = { id: email, password: password }; const response = await axios.post('/api/auth/login', getItem); return response.data; } catch (err) { if (err.message === 'Request failed with status code 504') { retur..

오류 해결은 쉽지 않다. 9팀 - 아침엔 날짜: 23-11-06 프론트엔드 회의 폴더 구조에 대한 논의 component: header, footer component: 페이지 이외 컴포넌트 API 활용한 카테고리 구현과정 공유 진행할 상황 이슈, 해결이 어려운 부분 진행 완료 상황 진행 중인 상황 공유 정확한 의사소통을 위해 서로 공유를 많이 하고 틈틈히 git push를 해서 다른 팀원과 겹치는 내용을 활용할 수 있도록 하였다. 오늘 작업 내용 오류 해결 갑자기 오류가 떠서 오류를 해결하느라고 시간이 너무 많이 걸렸다. 몇시간 동안 오류를 해결하기위해 다른 분께 여쭤도 보고 검색도 하였으나 이슈를 정확하게 파악하지 못해서 이전에 깃에 올려둔 작업을 다시 가져와서 새로운 내용만 다시 복사해서 겨우 해결..