프로젝트 시작 시 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의 일종으로 이미 계산해 본 연산 결과를 기억해두었다가 동일한 연산을 해야 할 때 다시 연산하지 않고 기억해두었던 데이터를 반환시키는 방법으로 쓸데없이 같은 계산을 반복하게 하지 않게..

저번 글에 이어서 휠 이벤트(= 스크롤) 시 화면이 fadeInOut 이 되면서 페이지가 전환되게 구현해보았다. 구현 포인트마우스 휠 사용 시 fadeInOut 이 되면서 한 페이지 씩 넘어가기handleScrollVertical 함수handleScrollVertical함수는 useCallback을 통해 메모이제이션되므로, 동일한 함수 참조가 유지된다. ( useCallback을 사용 안 하면 컴포넌트가 리렌더링 될 때마다 handleScrollVertical 함수가 새로 생성된다. useEffect 내부의 클린업 함수가 이전 함수와 같은 참조를 가지지 않기 때문에 이벤트 리스너를 정확히 제거하지 못 할 수 있다.)event.deltaY값을 사용하여 사용자가 스크롤 하는 방향을 결정합니다 (event.d..