ivorycode

useCallback 메모이제이션(Memoization) useCallback은 useMemo와 아주 비슷하다. 특히 둘 다 메모이제이션을 한다는 공통점이 있다. 지난 포스팅에서도 언급했었지만, 너무나도 중요한 개념이니 다시 한번 짚고 넘어가 보자!! 참고로 useCallback도 useMemo처럼 React의 렌더링 성능 최적화를 위해 사용하는 hook이다. 메모이제이션이란 프로그래밍을 할 때 반복되는 결과를 메모리에 저장해 두고, 다음에 같은 결과가 나올 때 다시 계산할 필요 없이 빨리 실행하는 기법이다. 일종의 캐싱과 같다. 🆘 캐싱(Caching) 캐싱이란 캐시(Cache)라고 하는 좀 더 빠른 메모리 영역으로 데이터를 가져와 접근하는 방식을 말한다. 캐싱은 오랜 시간이 걸리는 작업의 결과를 저장..

나는 종종 개인 프로젝트, 실무업무를 할 때, 상태 값 확인과 혹시 모를 오류를 대비하기 위해 console.log()를 자주 찍어두는 습관이 있다. 그러던 어느 날, 여느 때처럼 상태 값 확인을 위해 함수에서 console.log()을 출력하다가 불필요한 렌더링이 된다는 사실을 발견하였다. 처음엔 큰 오류도 없고 별 탈없이 state 값을 변경시킨다고 생각하여 괜찮다는 생각도 순간 했었다. 하지만 다시 냉정히 되돌아서서 고민해봤다. - ‘a만 바꾸고 싶은데, 필요 없는 부분도 리렌더링 되는 게 과연 효율적이고 좋은 렌더링 과정인가?’ - ‘이런 코드가 티끌 모아 태산이 되어버린다면? 혹시 성능에서도 문제가 발생하진 않을까?’ - 'React 프로젝트에서 최적화를 하려면, 어떤 방법이 있을까?' 위의 고..

최근 개인 공부와 사이드 프로젝트를 기획 및 제작을 시작하면서, 개발 초기 세팅을 직접 해보고 있다. 매번 CRA로 자동으로 적용되는 설정만 사용해왔었고 실무 환경에서도 이미 생성되어 있는 프로젝트에서 기능 추가, 유지보수 혹은 정말 작은 프로젝트만 해왔기에 초기 세팅을 직접 적용해본 경험이 없었다. 그래서 이번 프로젝트를 통해 초기 세팅도 해보고 새롭게 습득하는 지식을 차근차근 공유해볼 계획으로 포스팅을 시작해봤다. ESLint ES + Lint 개념부터 빠르게 짚고 가자. ES는 ECMAScript의 약어로써 ECMA에서 만든 Script인 표준 Javascript를 의미한다. Lint 또는 Linter라고 불리는 이 개념은 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체..

Redux의 3가지 원칙 1. 하나의 애플리케이션 안에는 하나의 스토어만 사용하자. 특정 업데이트가 빈번하게 일어나거나, 애플리케이션 특정 부분을 분리시키게 되면, 여러 개의 스토어를 사용할 수 있다, 하지만, Redux는 하나의 애플리케이션에서 여러 개의 스토어 사용을 권장하지 않는 이유는 개발 도구를 활용하지 못하게 되어 디버깅이 어려워지기 때문이다. 그러니 하나의 스토어만 사용하여 디버깅을 용이하게 하고, 서버와의 직렬화를 통해 클라이언트에서 데이터를 쉽게 받아올 수 있도록 한다. 2. state는 읽기 전용이다. Redux는 state를 변경할 때, 기존 값은 건드리지 않고, action을 일으켜 새로운 state를 생성하여 업데이트해주는 방식이다. 이것은 Redux 고유의 불변성을 지키고, st..

이 글은 'Next.js를 사용하는 이유'에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! Next.js SSR을 쉽게 구현하도록 도와주는 프레임워크 Next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크다. 그렇다고 React에서 SSR이 불가능하다고 묻는다면, 대답은 'React에서도 구현 가능하다'이다. 하지만, React로 개발환경을 구현하는 것은 굉장히 복잡한 일이었다.(React와 Next.js의 차이를 경험해보기 위해 사전에 예제 코드를 적용하며 경험해 보았다...) 이런 문제를 해결하기 위해 등장한 것이 바로 Next.js 되겠다. 아래의 글에..

이 글은 React의 React Router에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! React Router React는 SPA 방식 React는 SPA 방식이다. SPA란 Single Page Application의 약자로 페이지가 1개인 어플리케이션을 말한다. 전통적인 웹 어플리케이션은 SPA와 반대인 MPA(Multi Page Application) 방식 여러 페이지로 구성되어 있었다. MPA의 동작 방식은 어떤 데이터를 요청할 때마다 페이지가 새로고침 되면서 서버로부터 자원(Resource)을 전달받고 렌더링 되는 방식이다. 반대로, SPA는 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터..

이 글은 Babel에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! Babel이란? JavaScript Compiler Babel 공식문서에 따르면, Babel은 JavaScript(이하 JS) Complier(이하 컴파일러)라고 정의되어 있다. 다시 정리하면, Babel은 JS의 컴파일러로서, 최신 JS 문법을 이전 단계의 JS문법으로 변환 가능하게 해주는 도구다. Babel, 왜 필요할까??? 끊임없이 발전하는 브라우저와 ES6 몇 년 전만 해도 가장 인기가 많고 많은 개발자들이 선호했던 jQuery가 빠르게 잊혔던 것처럼 프론트엔드 개발언어(다른 개발 분야도 마찬가지다.)는 빠르게 발전한다. 그와 동시에 브라우저 역..