전체 글

Next.js를 활용해 다수의 프로젝트를 구현하면서 관련된 정리를 해보고자 글을 쓰기로 했다. Next.js는 무엇인가?공식 문서를 살펴보면 React framework for building full-stack web applications이라고 설명이 되어있다. React Components를 사용하여 사용자 인터페이스를 빌드하고 Next.js를 사용하여 추가 기능과 최적화를 구현하는 프레임 워크임을 나타내고 있다. Next.js의 주요 특징1. 파일 기반 라우팅pages 폴더나 app 디렉토리 기반으로 자동으로 라우팅 생성pages/about.tsx 만들면 자동으로 /about 경로 생성됨2. 서버 사이드 렌더링 (SSR) / 정적 사이트 생성 (SSG) 페이지별로 렌더링 전략 선택 가능 (get..

프로젝트 시작 시 Prettier 설정하는 방법에 대해 정리했다.Prettier 설치npm install --save-dev prettier  프로젝트 루트에  .prettierrc / .prettierrc.js 파일 추가 module.exports = { printWidth: 200, tabWidth: 2, bracketSpacing: true, arrowParens: 'always', semi: true, singleQuote: true, trailingComma: 'all', endOfLine: 'auto', singleAttributePerLine: true,};semi: false - 세미콜론을 사용하지 않는다.singleQuote: true - 문자열을 표현할 때 싱글 쿼트를 ..

React 렌더링에 대한 최적화시키기 위한 도구인 React.memo, useMemo, useCallback 에 대해 정리 해보았다. 최적화, 메모이제이션업데이트, 변경과 같은 상황이 화면에서 이루어지면 컴포넌트를 다시 센터링하고 레이아웃 및 페인팅 과정을 다시 계산하는 상황이 발생하여 React의 성능을 점검할 때는 컴포넌트 자체의 리랜더링이 불필요하게 반복되고 있지 않은지, 그리고 내부 로직이 쓸데없이 다시 만들어지거나 복잡한 계산을 반복하고 있지는 않은지 고려해야 한다.Memoization(메모이제이션)은 Caching의 일종으로 이미 계산해 본 연산 결과를 기억해두었다가 동일한 연산을 해야 할 때 다시 연산하지 않고 기억해두었던 데이터를 반환시키는 방법으로 쓸데없이 같은 계산을 반복하게 하지 않게..