천천히 느리게 천천히 느리게

◎NextJS에서 Data Fectching 하는 방법을 알아보자. NexJS 8 버전에는 getInitialProps를 사용했는데, 현재 9 버전에서는 getStaticProps, getStaticPaths, getServerSideProps를 주로 사용한다. 1. 사전 렌더링(pre-rendering) ◎ NextJS가 작동하는 방식과 이를 빠르게 만드는 데 있어 큰 부분을 차지한다. 기본적으로 NextJS는 실행해야 하는 최소한의 Jacascript와 함께 Hydration를 통해 각 페이지 HTML을 미리 생성하여 모든 페이지를 사전 렌더링 한다. 사전 렌더링에는 정적 생성(SG)과 서버 측 렌더링 (SSR)이 있다. 이 둘의 차이점은 데이터를 가져올 때이다. 1-2. 정적 생성(SG) ◎ SG의..

◎ Next.js 에서 이미지 불러오는 게 이렇게 힘든 것인가... 아니면 내가 못하는 건가.. svg 파일 불러오는데 시간을 많이 투자했다. svg파일을 사용하면서 삽질기와 배운 것을 적겠다. 1. babel-plugin-inline-react-svg ◎ SVG 파일을 가져오려면 React Components로 변환하고 SVGO를 사용하여 SVG를 최적화해야 한다. npm install --save-dev babel-plugin-inline-react-svg 2. .babelrc 에 추가 ◎ .barbelrc에 inline-react-svg 플러그인을 추가한다. { "plugins": [ "inline-react-svg" ] } 3. Waring: Invalid attribute name: `'data..

◎ 지금 하는 프로젝트에 styled-component를 적용하기로 했다. 원래는 sass로 되어있는 프로젝트인데 styled-component로 바꿔서 해야 하는 큰 숙제가 있다. 현재 정리 내용은 처음 접하는 Next.js를 공부하면서 정리한 내용이다. 1. 설치 npm install --save styled-components Javascript를 사용할 때는 위의 방식으로 설치하면 되지만, Typescript를 적용하면 styled-components를 인식하지 못한다. 그 이유는 Typescript에서는 리액트 라이브러리에 대한 type정의가 되어있지 않기 때문이다. 그렇기 때문에 type을 정의해 놓은 라이브러리도 설치해줘야 한다. npm install --save @types/styled-c..

◎ 회사에서 내가 맡은 프로젝트는 CRA로 만들어져서 SEO가 잘되어있지 않는 이슈가 있어서, 이참에 Next.js를 사용하여 ssr 방식으로 프로젝트를 재구성할 기회가 생겼다. next.js를 언젠간 한번 해보고 싶었는데 좋은 기회이다. 1. Next.js? ◎ Next.js를 사용 이유 중 핵심이 SSR 방식인 점이다. 렌더링 방식은 블로그에 정리돼있으므로 생략하겠다. React를 사용하여 완전한 웹 애플리케이션을 빌드하려면 고려해야 할 중요한 부분이 많다. - 코드는 webpack과 같은 번들러를 사용하여 번들로 묶고 Babel과 같은 컴파일러를 사용하여 변환해야 한다. - 코드 분할과 같은 프로덕션 최적화를 수행해야 한다. - 성능 및 SEO를 위해 일부 페이지를 정적으로 사전 렌더링 할 수 있다..