초보 개발자의 성장 일기

코드 테스트가 필요한 경우 코드를 작성하고 나면, 원하는 대로 동작하는지 알기 위해 테스트를 한다. 코드에 버그가 있으면, 어떤 상황에서 버그가 발생하는지를 알기 위해 테스트를 한다. 코드를 리팩토링하면, 원래대로 동작하는지 테스트한다. 리액트 앱의 컴포넌트가 늘어날수록, 컴포넌트끼리 서로 영향을 미치는 경우가 많아진다. 특정 코드가 수정되면, 어떤 컴포넌트에 에러가 발생할 수 있다. 언급한 상황들에 대한 테스팅 코드를 작성하여, 미연의 에러를 방지한다. TDD(Test Driven Development) 등의 방법론을 적용하여 생산성을 향상시킨다. 테스트가 늘어나면서 테스트 코드가 구현 코드에 대한 문서화가 된다. 테스트가 용이하게 코드를 작성하여, 코드 품질과 신뢰성을 높인다. 코드가 영향을 미치는 ..

useCallback은 컴포넌트를 최적화 시켜주는 도구이다. useMemo와의 차이점 useMemo: 인자로 콜 백함수를 넣어주면 return 값을 memoization 한다. useCallback: 인자로 전달한 콜백함수 그 자체를 memoization 한다. const calculate = useCallback((num) => { return num + 1; }, [item]) useCallback으로 함수를 감싸주어 함수가 필요할 때마다 메모리에서 가져와 재사용한다. function Component() { const calculate = useCallback((num) => { return num + 1 }, [item]); return {value} } 컴포넌트 객체가 처음 렌더링 될 때만 함수..

컴포넌트를 만들고 나면 성능을 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..