grace's dev_note

React에는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구가 있습니다. 바로 StrictMode입니다. 개발 모드에서 앱 내의 잠재적인 버그를 알아내기 위해서 컴포넌트를 두 번 렌더해줍니다. 당연하게도, 개발 모드에서만 활성되기 때문에 프로덕션 빌드(배포)에는 영향을 끼치지 않습니다. React나 Next.js 앱을 시작하면 next.config.js 파일이 있는 것을 확인할 수 있습니다. 해당 파일에 들어가보면 /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, } module.exports = nextConfig 이렇게 작성되어 있는 것을 확인할 수 있는데요. 여기에서 stric..

우리가 javascript로 스크롤 애니메이션을 구현할 경우 getBoundingClientRect() 메서드를 많이 사용하게된다. getBoundingClientRect() 메서드는 실제 element의 offset을 측정해주는데 이 메서드를 사용할 경우 메인스레드에서 실행되어 프로그램의 성능이 떨어진다. 이러한 문제를 보완하기위해서 나온 것이 intersection observer이다. intersection observer는 callback과 option을 사용하여 비동기로 DOM 요소의 가시성을 측정해준다. intersection observer를 사용해주기위해서 install을 해주자. npm i react-intersection-observer 스크롤 애니메이션을 구현해보기 전에 먼저 알아야할..

조건부 렌더링 false값을 리턴하는 값 0 '' false null undefined Optional chaining data 값이 false일 경우 리턴하도록 사용 // default value로 사용 data || data.fetchProfile Nullish coalesing data의 값이 null 혹은 undefined 일 때 리턴하도록 할 때 사용 data ?? data.fetchProfile 폴더구조 체계화 Container - Presenter 패턴 React의 가장 기본적인 디자인 패턴으로 기존의 싱글파일 컴포넌트 형태로 사용 시 컴포넌트내부에 ui와 로직 api호출들이 점점 많아지게 되면서 가독성이 떨어지는 부분을 보완할 수 있는 좋은 방법이다. container pre..