doeunn.log

Configuration CRA로 프로젝트를 만들었을 때는 webpack config 등을 커스텀하려고 하면 React에 기본으로 셋업되어 있는 configuration을 해제해서 직접 커스터마이징할 수 있게 하거나(`npm run eject`), carco(Create React App Configuration Override)와 같은 도구 등을 사용하여야 했습니다. next.config.js Next.js에서는 기존에 있는 것을 eject 하거나 craco 같은 도구를 쓸 필요없이 root 디렉토리에 `next.config.js`을 저장해 두고 그곳에서 필요한 여러 configuration을 추가하면 됩니다. 그렇게 추가한 config는 서버를 띄우거나 build하는 타이밍에 사용됩니다. 1. 환경 ..

Error Handling 공식 문서 공식문서에서 개발, 서버 측 및 클라이언트 측 오류를 처리하는 방법을 설명하고 있습니다 :) 해당 내용에 대해 살펴보도록 하겠습니다. 1. 개발 중 오류 처리 Next.js 개발 단계에서 런타임 오류가 발생하면 오버레이가 발생합니다 . 웹 페이지를 덮는 모달입니다. devlopment 모드로 실행될 때만 표시 되며 빌드 환경에서는 표시되지 않습니다. 오류를 수정하면 오버레이가 자동으로 해제됩니다. 2. 서버 오류 처리 서버 측 오류를 처리하기 위해 기본적으로 정적인 500 페이지를 제공합니다. `500.js`라는 파일을 만들어 커스텀해서 에러 페이지를 보여줄 수도 있습니다. 마찬가지로 404, 401과 같이 에러 status code 이름으로 파일을 만들어 컴포넌트를..

Absolute Imports and Module Path Aliases 프로젝트를 하면 어떤 라이브러리 혹은 컴포넌트를 import하는 일이 많습니다. 일반적으로 `import Somthing from '../../components/Something'` 과 같은 형식으로 상대경로를 이용해서 불러옵니다. 프로젝트 규모가 커질 수록, 생성되는 폴더 및 파일이 많아질수록 depth가 깊어져 아래와 같이 import문이 굉장히 길어질 수 있습니다. import Something from '../../../../components/common/layout/Something/'; import SubThing from '../../../../components/common/base/SubThing/'; 보기 불편..

Dynamic Import Dynamic Import는 컴포넌트를 사용하는 시점에 로드하는 것인데요. Next.js에서는 이미지나 Link 컴포넌트 두 가지 모두 Viewport 안에 들어왔을 떄 로드하는 것들이 있었습니다. 그런 것들을 Lazy Load라고 합니다. 컴포넌트 마저도 상단에서 모두 한번에 import해서 사용하는 것이 아니라 필요한 타이밍에 로드해서 사용할 수 있는 방법을 제공합니다. Next.js에서는 그것을 Dynamic이라는 개념으로 사용됩니다. Dynamic Import를 사용하면 모듈을 빌드 타임이 아닌 런타임에 불러오도록 합니다. 이를 통해 번들 파일을 분리하고 초기 렌더링 시간 단축이란느 퍼포먼스 향상을 기대할 수 있습니다. 애플리케이션에는 초기 로딩부터 사용하지 않는 부분이..

어떻게 해야할까? Page가 필요하겠네? 여러 input들을 받을 수 있는... API도 필요하겠네? file에 저장할 input을 전달받을... 서버에서 실제로 파일을 저장할 writePost 함수도 필요하겠네? 작성이 성공하면 해당 page로 가는 Link도 제공하면 좋겠군... 우선 필요한 파일들을 생성해 봅시다 pages/post/write.js Page 추가 pages/api/post/write.js API 추가 lib/posts.js 안에 writePost 함수 추가 먼저 글을 쓸 수 있는 페이지를 구성해 봅시다 글을 쓸 수 있는 form이 있는 페이지를 만들어보겠습니다. 📜 pages/post/write.js import { useRef } from 'react' import Layout f..

지난 포스팅에서 md 파일들에 있는 데이터를 읽어와서 SSG를 통해 렌더링을 했었습니다. 만약! 추가로 다음과 같은 요구사항이 있다면 어떻게 해야할까요? SSG를 사용해서 url: /posts/ssg-ssr 이면 posts/ssg-ssr.md를 읽어서 보여준다 url: /posts/pre-rendering 이면 posts/pre-rendering.md를 읽어서 보여준다 → /pages/posts/[slug].js 가 떠올랐어야 합니다. post의 제목들 자리에는 dynamic하게 들어가야 하기 때문에 slug를 활용해야겠습니다. SSG를 활용해서 다이나믹한 page 들을 생성하려면? getStaticPaths가 필요합니다. getStaticPaths는 생성해둬야 하는 페이지 정보를 배열로 반환합니다. 요..