초보 개발자의 성장 일기

컴포넌트를 만들고 나면 성능을 Optimization(최적화)를 해야한다. 컴포넌트 최적화를 위한 대표적인 Hooks useMemo useCallback Memo란? Memoization을 의미하며 동일한 값을 리턴하는 하는 함수를 반복적으로 수행해야 한다면 맨 처음 값을 계산할 때 해당값을 메모리에 저장해서 필요할때마다 다시 계산하지 않고 메모리에서 꺼내서 재사용한다. 자주 필요한 값을 처음 계산할 때 캐싱을 해 두어 값이 필요할 때 캐시에서 꺼내 사용한다. 함수형 컴포넌트 함수로 정의되어있는 컴포넌트를 의미한다. function Component() { const value = calculate(); return {value} } component 함수 호출 시 변수 value는 계속 초기화가 된다...

리액트의 데이터 흐름은 Component Tree형태이고 위에서 아래로 흐른다. 부모와 자식 컴포넌트는 props를 이용해 단계별로 전달한다. 데이터를 전달해야할 자식 컴포넌트가 많을 때는 어떻게 해야 할까? 전역적으로 필요한 공통 컴포넌트가 필요한 순간이 있다. 테마, 언어 등의 데이터가 있다. 하지만 이 데이터를 props를 이용해 단계별로 전달을 하기에는 무리가 있다. 이러한 문제를 해결하기 위해 React에서 Context API를 제공한다. 앱 안에서 전역적으로 사용되는 데이터를 여러 컴포넌트끼리 쉽게 공유할 수 있는 방법을 제공한다. 즉, props로 일일히 데이터를 전달하지 않아도 데이터를 가진 상위 컴포넌트가 어느곳이든 위치해 있는 하위 컴포넌트들에게 전달할 수 있다. Prop Drilli..

함수형 컴포넌트에서 useRef를 부르면 Ref 오브젝트를 반환해준다. const ref = useRef(value) Ref 오브젝트는 { current: value }와 같은 형태이고 수정이 가능하다. Ref에 접근하고 싶을 때 ref[변수명].current로 작성한다. const ref = useRef('one') // { current: 'one' } ref.current = 'two' // { current: 'two' } ref.current = 'three' // { current: 'three' } 원하는 값으로 언제든지 변경이 가능하다. 반환된 ref는 컴포넌트의 전 생애주기에 의해 유지된다. 컴포넌트가 렌더링이 되어도 unmount가 되기 전까지 값을 그대로 유지할 수 있다. 컴포넌트가 ..

리액트 훅을 공부하면서부터 어려운 난관에 부딪혀 이 훅을 제대로 공부하지 않으면 앞으로의 프로젝트와 공부에 더 큰 어려움을 겪을 것 같아 더 자세하게, 왜 사용하는지 어떤 점이 좋은지, 어떻게 사용하는건지 더 자세히 알아보기로 했다. useState로 하는 상태관리에 대해서는 사실 이해가 쉬웠고 사용하고 응용하는데 큰 어려움은 없었다. 하지만 useEffect 부터는 내가 기능을 구현하는 것 뿐만이 아니라 버그도 고치고, 사이드 이펙트가 없는 페이지를 개발해야하니 어디서 어떻게 사용해야하는지 정확히 어려웠다. 컴포넌트의 상태는 세 가지가 있다. Mount: 어떠한 컴포넌트가 생겨나는 시점 Update: 다시 렌더링 되었을 때(상태가 변화했을 때 Unmount: 컴포넌트가 사라질 때 이 상태에서 특정 코드..

Redux 앱 전체 상태를 쉽게 관리하기 위한 라이브러리이다. Redux의 많은 개념들이 Flux pattern에서 차용된다. 주로 React 앱과 같이 사용한다. 앱 전체의 상태 관리가 필요할 때 사용한다. 복잡한 비동기 처리가 있는 상태 관리가 필요할 때 사용한다. 앱의 상태가 복잡하고, 이를 체계적으로 관리하고 싶을 때 사용한다. 상태 관리 패턴을 도입하여, 여러 개발자와 협업하고 싶을 때 사용한다. logger, devtool 등을 활용하여 상태를 관리할 필요가 있을 때 사용한다. 핵심 원칙 Single source of truth - Store는 단 하나이며, 모든 앱의 상태는 이곳에 보관된다. Immutability – 상태는 오로지 읽을수만 있다. 변경하려면 모든 상태가 변경되어야 한다. P..

문제 설명 문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다. 인덱스 1의 문자가 같은 문자열이 여럿 일 경우, 사전순으로 앞선 문자열이 앞쪽에 위치합니다. 나의 해결 방법 map함수로 n번째를 뽑아 정렬을 하면 된다고 생각했다. ⇒ 오류 → word[n]은 문자열에서 인덱스 n에 해당하는 문자 하나를 의미하므로, sort를 사용할 수 없다. function solution(strings, n) { return strings.map(word => word[n..

상태관리 앱 상에서의 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는 것이다. 한 컴포넌트 안에서의 상태, 여러 컴포넌트 간의 상태, 전체 앱의 상태 관리를 모두 포한다. SPA에서는 자체적으로 데이터를 갖고, 서버와의 동기화가 필요한 데이터만을 처리한다. 그 외의 데이터는 Client만의 데이터로 유지한다. 상태 기술 상태가 많지 않거나, 유저와의 인터렉션이 많지 않다면 매 작업 시 서버와 동기화하더라도 충분하다. 하지만 앱이 사용하는 데이터가 점점 많아지고, 유저와의 인터렉션 시 임시로 저장하는 데이터가 많아지는 경우 상태 관리를 고려해야한다. 프론트엔드 뿐만 아니라, 백엔드와의 데이터 통신도 충분히 고려해야 한다. (ex. GraphQL) 높은 품질의 코드를 작성하는 데 유..

문제 설명 문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성하세요. 예를 들어 s가 "a234"이면 False를 리턴하고 "1234"라면 True를 리턴하면 됩니다. 나의 문제 해결 방법 배열로 만든 후 원소를 정수로 바꿔준 후 길이가 4, 6이 아니고 숫자가 아닌경우 false를 반환한다. function solution(s) { const newArr = s.split('') for(let i=0; i !isNaN(c)) } else { return false; } } 다른 분들의 풀이 방법을 조금 참고해서 더 간단하게 길이가 4, 6일경우를 if문 안에 넣어서 배열로 만든 후 모든 원소가 숫자일 경우 true를 반환하도록 하였다. 아닐 경우는 fal..

문제 설명 두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주세요. 나의 문제 해결 방법 left부터 right까지 약수의 갯수를 구해서 짝수면 더하고 홀수면 뺀다. function solution(left, right) { let sum = 0; let cnt = 0; for(let i = left; i

동기(synchronous) 해당 코드 블록을 실행할 때 thread의 제어권을 넘기지 않고 순서대로 실행하는 것을 의미한다. console.log("This is synchronous...") for (let i = 0; i < 1000000000; ++i) { console.log("I am blocking the main thread...") } console.log("This is synchronous...DONE!") 비동기(asynchronous) 코드의 순서와 다르게 실행된다. 비동기 처리 코드를 감싼 블록은 task queue에 넣어지며 main thread가 동기 코드를 실행한 후에 제어권이 돌아왔을 때 이벤트 루프가 task queue에 넣어진 비동기 코드를 실행한다. setTimeou..