[toy blog service] Next.js의 Pages 이해하기(간단한 Typescript설정)

Project를 시작하며...

- 작업한 화면: 아래는 이 화면을 구성하면서 다룬 내용들이다. 

오늘 만든 화면

- 필요한 routes 와 pages

- `/index.js` -> `/`: main

- `/:username/index.js` -> `/:username`: 개인 블로그의 메인(Read all)

- `/:username/id`: 각 포스팅 읽기(Read one)

- `/:username/write`: 블로그 글 create page

- `/:username/write?id=articleId`: 블로그 글 수정페이지(update)

 

pages 구성

아래에 내가 화면을 구성하면서 파악한 내용들을 정리했다. 

 

 

 

 

 

 

 

1. TypeScript 설정을 하자: 공식 독스

- 후에 더 상세하게 살펴보기로 하고 여기서는 일단 설정만을 했다. 

npm install -D typescript @types/react @types/node
touch tsconfig.json // 빈 tsconfig.json을 생성한다. 

devDependency 설치

빈 tsconfig를 가지고 npm run dev를 하면 아래처럼 next.js가 기본 tsconfig.json 설정을 생성한다. 

여기서는 이렇게 기본 설정을 사용하고  추후에 이 설정과 관련되서 더 알아 보아야겠다. 

 

위는 next.js가 자동으로 default values로 설정해준 tsconfig이다. 

 

 

 

 

2. 본격적으로 pages폴더 이해하기

default pages구조

Next.js App을 생성하면 기본구조는 위와 같다. api 폴더내에 있는 것은 api 처리와 관련된 내용을 다루는 곳이므로 이번에는 화면구성에 중요한 _app.js와 파일시스템 기반 라우팅 구조를 이해해보고자 한다. 

 

 

- _app.js 파일  

import "../styles/globals.css";
import type { AppProps /*, AppContext */ } from "next/app";

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;

_app.tsx 는 위와 같이 생겼다. 여기서 'Component' prop은 현재 보이는 page라, 두 Route사이를 이동할때, Component가 새로운 page로 업데이트 된다. 그래서 Component로 보내는 props들이 page로 전달된다. 

 

1. 여기서는 page간에 유지되어야하는 layout을 적용하거나

2. page를 이동할때 state를 유지하거나

3. componentDidCatch를 사용한 error 핸들링

4. page에 추가적인 데이터 주입

5. 전역 css 적용

 

위의 다섯가지가 _app.js / _app.tsx 파일의 주 역할이다. 

 

 

 

 

 

- routes 이해하기: 공식독스  

Next.js는 Page에 기반해서 file-system 기반의 라우팅을 하고 있다. `pages`에 파일이 추가되면 자동으로 route로 사용가능하다.

예를 들자면 아래와 같다. 

// 파일 구조 -> 요청 url
- `pages/index.js` -> `/`

- `pages/blog/index.js` -> `/blog`

- `pages/home.js` -> `/home`

- `pages/blog/home.js` -> `/blog/home`

 

하지만 위와 같은 방식으로는 부족한 점이 많아 다이나믹 라우팅또한 지원하고 있다. 

 

예를 들어 `pages/유저명/write.js`이런식의 라우팅을하려고 한다면 위의 방식으로는 부족한 점이 있는데 아래처럼 표현할 수 있다. .

 

[username] 내에 위치한 파일들은 `/hayoung` 등의 username을 가지고 라우팅을 할 수 있게 해준다. 

 

localhost:3000/hayoung 으로 접근했을때

 

 

다이나믹 라우팅에 대해서 하나더 알아야할 사실은 catch all routes 와 optional catch all routes 이다

 

- `pages/post/[...slug].js` 이렇게 하면 /post/a, /post/b, /post/a/b 이렇게는 match 하지만 /post에는 해당하지 않는다(Catch all routes)

- `pages/post/[[...slug]].js` 이렇게 하면 /post, /post/a, /post/b, /post/a/b 랑 다 match 한다(Optional Catch all routes)

 

이때 Optional Catch all routes로 구성한 경우에 `post.js`가 상위에 있으면 에러가 발생한다. 왜냐하면 Optional Catch All Routes의 경우 `post` path와도 matching되기때문에 상위에 post.js 같은 파일이 있으면 꼬여버린다. 

 

 

 

 

 

- useRouter: 공식독스

next.js는 `useRouter` hooks를 제공하는데 이를 통해서 어떤 functional component에서든 라우터 객체에 접근이 가능하다. 사용은 아래와 같다.

import { useRouter } from "next/router";
import styles from "../../styles/Home.module.css";

const index = () => {
  const router = useRouter();
  const { username } = router.query; // 여기서 [username] 부분을 받아온다
  return <div className={styles.container}>index for {username}</div>;
};

export default index;

 

 

 

 

 

- simple styling: 

개발자로써 디자인이 항상 어려운데, 색은 아래의 사이트에서 참고했다. 

 

visme.co/blog/website-color-schemes/

50 Gorgeous Color Schemes From Stunning Websites

 

이번 프로젝트에서는 이 색을 사용하면 좋을 것 같아 이 색을 조합하고자 한다. 

 

CSS 경우에는 Next.js의 Built-in CSS 모듈을 사용하고자 한다. CSS경우 어떤 모듈을 사용하는지보다는 CSS 그 자체에 집중하고자 이렇게 사용하기로 했다. [using built-in support]

 

 

 

 

후기

페이지는 대략적으로 구성을 했고, 이제 간단하게 API를 달아서 Page가 렌더링 되는 방식에 대에서 고민하고자 한다. UI를 잘 구성한다는 것이 어렵고, 하기전에는 쉬운 것 같다가도 고민할게 많은 것 같아서 보람이 있는것 같다.