<div id="readability-page-1" class="page"><div>요즘 <a href="https://nextjs.org/">Next.js</a> 가 엄청 재미있다. 그래서 작은 프로젝트 하나 한땀한땀 만들어가면서 반복적인 내용들을 잊어먹지 않도록 정리해보려고 한다. 대충 아래 내용들을 하나씩 해나가며 정리해보려 한다.
<ul>
<li>프로젝트 설정: TypeScript, ESLint, Prettier 설정</li>
<li>MongoDB 연결</li>
<li>Session 인증 구현</li>
</ul>
우선 첫번째는 프로젝트 설정이다.
<h2 id="nextjs-프로젝트-시작하기">Next.js 프로젝트 시작하기</h2>
프로젝트 폴더를 미리 만들지 말고, 프로젝트 폴더가 생성될 부모 폴더에서 다음 명령어를 실행해주자.
<pre><code>npx create-next-app --typescript</code></pre>
<code>npx</code> 로 <code>create-next-app</code> 을 설치할 것이냐고 물어본 후, <code>y</code> 를 입력하면, 프로젝트 이름을 입력하라고 한다. 이 때 입력한 프로젝트 이름으로 폴더를 생성하고, 그 안에 프로젝트를 설치한다.
<pre><code>✔ What is your project named? nextjs</code></pre>
설치된 프로젝트에는 git 설정을 비롯해, 기본적인 프로젝트 셋팅이 되어 있다.
일단 <code>npm run dev</code> 를 타이핑하여, 프로젝트를 실행해보자. 첫 실행 시에는 자동으로 <code>tsconfig.json</code>을 감지하여, 필요한 추가 설정을 더해준다.
<pre><code>~/Workspace/donelist/nextjs main ❯ npm run dev

&gt; nextjs@0.1.0 dev
&gt; next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
We detected TypeScript in your project and reconfigured your tsconfig.json file for you. Strict-mode is set to false by default.

The following suggested values were added to your tsconfig.json. These values can be changed to fit your project's needs:

	- incremental was set to true</code></pre>
...<code>create-next-app</code> 명령어 때 애초에 왜 완성된 <code>tsconfig.json</code> 을 만들지 않고, 나중에 추가하는지는 모르겠지만, 여튼 그렇다.
<code>localhost:3000</code> 을 브라우저로 접속하면 아래와 같이 뜬다.
<img src="https://media.vlpt.us/images/byron1st/post/9f1f4bef-c9c6-4913-9aba-da70f82b49a4/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202021-12-22%2022.05.58.png">
<h2 id="eslint-설정">ESLint 설정</h2>
eslint는 설치되어 있지 않다. 하나하나 다 설치해줄 수도 있지만, 최대한 Next.js 에서 제공하는 방법을 사용하여 설치해보자.
우선, <code>package.json</code> 파일 내 <code>"scripts"</code> 항목에 <code>next lint</code> 를 추가해주자.
<pre><code>{
 ...
 "scripts": {
 ...
 "start": "next start",
 "lint": "next lint" // 추가
 }
}</code></pre>
그런 다음 터미널에서 <code>npm run lint</code>를 해주자. 그러면 아래와 같이 선택지가 뜨고, 자동으로 <code>eslint</code>, <code>eslint-config-next</code> 를 설치한다. 나 같은 경우 추천하는 <code>Strict</code> 로 설치하였다.
<pre><code>~/Workspace/donelist/nextjs main !2 ❯ npm run lint

&gt; nextjs@0.1.0 lint
&gt; next lint

? How would you like to configure ESLint? https://nextjs.org/docs/basic-features/eslint

Installing devDependencies:
- eslint
- eslint-config-next


added 172 packages, and audited 469 packages in 6s

83 packages are looking for funding
 run `npm fund` for details

found 0 vulnerabilities

We created the .eslintrc.json file for you and included your selected configuration.
ready - ESLint has successfully been configured. Run next lint again to view warnings and errors.</code></pre>
eslint 는 8.5.0 버전이, eslint-config-next 는 12.0.7 버전이 설치되는데, 일단 최신버전이 설치되는 것 같다. <code>^</code> 를 쓰지 않으므로, 버전은 고정된다.
<h2 id="prettier-설정">Prettier 설정</h2>
이제 Prettier 를 설치해보자.
<pre><code>npm install -D eslint-config-prettier eslint-plugin-prettier prettier</code></pre>
<code>eslint-config-prettier</code> 는 다른 eslint 규칙들 중, Prettier 와 겹치는 규칙들을 비활성화해준다. 그리고 <code>eslint-plugin-prettier</code> eslint 를 실행할 때 Prettier 를 대신 실행해준다.
이제 eslint 설정 파일에 Prettier 설정을 추가해준다. 앞 단계에서 <code>next lint</code>는 <code>.eslint.json</code> 파일을 자동으로 생성하고, 아래와 같은 기본설정을 생성한다.
<pre><code>{
 "extends": "next/core-web-vitals"
}</code></pre>
<code>extends</code> 항목을 배열로 바꾸고 아래와 같이 변경한다.
<pre><code>{
 "extends": [
 "next/core-web-vitals",
 "plugin:prettier/recommended"
 ]
}</code></pre>
참고로 <code>plugin:prettier/recommended</code> 는 항상 반드시 배열 마지막에 와야 한다.
이제 <code>.prettierrc</code> 파일을 생성하여, Prettier 설정을 추가해주자. 내가 개인적으로 쓰는 Prettier 설정은 다음과 같다.
<pre><code>{
 "semi": false,
 "singleQuote": true,
 "trailingComma": "all"
}</code></pre>
<h2 id="typescript-설정">TypeScript 설정</h2>
과거 TypeScript 는 TSLint 를 통해 린팅을 했었다. 하지만 이제는 ESLint 로 통합되었고, <code>@typescript-eslint</code> 프로젝트들을 통해 구현된다. 아래 명령어로 설치해주자.
<pre><code>npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser</code></pre>
Parser 는 ESlint가 TypeScript 코드를 파싱할 수 있도록 해주고, plugin TypeScript 특화된 규칙들을 추가해준다.
이제 <code>.eslint.json</code> 파일을 다음과 같이 변경해주자.
<pre><code>{
 "parser": "@typescript-eslint/parser",
 "extends": [
 "next/core-web-vitals",
 "plugin:@typescript-eslint/recommended",
 "plugin:prettier/recommended"
 ]
}</code></pre>
이제 린트 관련 설정은 모두 끝났다. 추가로 import 경로 관련 설정을 하고 싶다면 아래 내용도 진행하도록 하자.
<h2 id="baseurl-추가">baseURL 추가</h2>
개인적으로 import 때 상대 경로로 하는 것을 매우 싫어한다. 너무 많은 <code>../</code>가 생기고, 정확히 어떤 모듈을 import 하는 것인지 혼동되기 때문이다. 그래서 <code>baseURL</code> 설정을 꼭 해주는 편이다.
Next.js 는 <code>baseURL</code> 설정을 할 경우, 별도의 추가 설정(Babel 이나 등등)없이 바로 절대 경로로 import 가능하다. (참고로 <code>path</code> 설정도 잘 먹는데, 난 <code>path</code>는 하지 않고 <code>baseURL</code> 만 하는 편이다. 폴더 구조 자체가 곧 모듈 구조를 나타낸다고 보기 때문이다.)
<code>tsconfig.json</code> 파일의 <code>compilerOptions</code> 항목 안에 다음과 같이 추가해주자.
<pre><code>{
 "compilerOptions": {
 ...
 "baseUrl": "."
 }
}</code></pre>
이럴 경우, 프로젝트 루트 폴더를 기준으로 import 경로를 계산한다. 잘 되는지 확인하기 위해, <code>pages/_app.tsx</code> 파일의 <code>globals.css</code> import를 다음과 같이 수정해보자.
<pre><code>import 'styles/globals.css' // 원래는 '../styles/globals.css'
...</code></pre>
<code>npm run dev</code> 로 실행해보자.
<img src="https://media.vlpt.us/images/byron1st/post/c0c15718-80d6-42b3-a350-1012c99ca8f5/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202021-12-22%2022.35.49.png">
<code>globals.css</code> 파일 내용이 잘 적용되어 있음을 알 수 있다.
이상 모든 프로젝트 설정이 끝났다.</div></div>

byron1st.log

안휘

요즘 Next.js 가 엄청 재미있다. 그래서 작은 프로젝트 하나 한땀한땀 만들어가면서 반복적인 내용들을 잊어먹지 않도록 정리해보려고 한다. 대충 아래 내용들을 하나씩 해나가며 정리해보려 한다.
프로젝트 설정: TypeScript, ESLint, Prettier 설정
MongoDB 연결
Session 인증 구현
우선 첫번째는 프로젝트 설정이다.
Next.js 프로젝트 시작하기
프로젝트 폴더를 미리 만들지 말고, 프로젝트 폴더가 생성될 부모 폴더에서 다음 명령어를 실행해주자.
npx create-next-app --typescript
npx 로 create-next-app 을 설치할 것이냐고 물어본 후, y 를 입력하면, 프로젝트 이름을 입력하라고 한다. 이 때 입력한 프로젝트 이름으로 폴더를 생성하고, 그 안에 프로젝트를 설치한다.
✔ What is your project named? nextjs
설치된 프로젝트에는 git 설정을 비롯해, 기본적인 프로젝트 셋팅이 되어 있다.
일단 npm run dev 를 타이핑하여, 프로젝트를 실행해보자. 첫 실행 시에는 자동으로 tsconfig.json을 감지하여, 필요한 추가 설정을 더해준다.
~/Workspace/donelist/nextjs main ❯ npm run dev
> nextjs@0.1.0 dev
> next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
We detected TypeScript in your project and reconfigured your tsconfig.json file for you. Strict-mode is set to false by default.
The following suggested values were added to your tsconfig.json. These values can be changed to fit your project's needs:
    - incremental was set to true
...create-next-app 명령어 때 애초에 왜 완성된 tsconfig.json 을 만들지 않고, 나중에 추가하는지는 모르겠지만, 여튼 그렇다.
localhost:3000 을 브라우저로 접속하면 아래와 같이 뜬다.
ESLint 설정
eslint는 설치되어 있지 않다. 하나하나 다 설치해줄 수도 있지만, 최대한 Next.js 에서 제공하는 방법을 사용하여 설치해보자.
우선, package.json 파일 내 "scripts" 항목에 next lint 를 추가해주자.
{
  ...
  "scripts": {
    ...
    "start": "next start",
    "lint": "next lint" // 추가
  }
}
그런 다음 터미널에서 npm run lint를 해주자. 그러면 아래와 같이 선택지가 뜨고, 자동으로 eslint, eslint-config-next 를 설치한다. 나 같은 경우 추천하는 Strict 로 설치하였다.
~/Workspace/donelist/nextjs main !2 ❯ npm run lint
> nextjs@0.1.0 lint
> next lint
? How would you like to configure ESLint? https://nextjs.org/docs/basic-features/eslint
Installing devDependencies:
- eslint
- eslint-config-next
added 172 packages, and audited 469 packages in 6s
83 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities
We created the .eslintrc.json file for you and included your selected configuration.
ready - ESLint has successfully been configured. Run next lint again to view warnings and errors.
eslint 는 8.5.0 버전이, eslint-config-next 는 12.0.7 버전이 설치되는데, 일단 최신버전이 설치되는 것 같다. ^ 를 쓰지 않으므로, 버전은 고정된다.
Prettier 설정
이제 Prettier 를 설치해보자.
npm install -D eslint-config-prettier eslint-plugin-prettier prettier
eslint-config-prettier 는 다른 eslint 규칙들 중, Prettier 와 겹치는 규칙들을 비활성화해준다. 그리고 eslint-plugin-prettier eslint 를 실행할 때 Prettier 를 대신 실행해준다.
이제 eslint 설정 파일에 Prettier 설정을 추가해준다. 앞 단계에서 next lint는 .eslint.json 파일을 자동으로 생성하고, 아래와 같은 기본설정을 생성한다.
{
  "extends": "next/core-web-vitals"
}
extends 항목을 배열로 바꾸고 아래와 같이 변경한다.
{
  "extends": [
    "next/core-web-vitals",
    "plugin:prettier/recommended"
  ]
}
참고로 plugin:prettier/recommended 는 항상 반드시 배열 마지막에 와야 한다.
이제 .prettierrc 파일을 생성하여, Prettier 설정을 추가해주자. 내가 개인적으로 쓰는 Prettier 설정은 다음과 같다.
{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all"
}
TypeScript 설정
과거 TypeScript 는 TSLint 를 통해 린팅을 했었다. 하지만 이제는 ESLint 로 통합되었고, @typescript-eslint 프로젝트들을 통해 구현된다. 아래 명령어로 설치해주자.
npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
Parser 는 ESlint가 TypeScript 코드를 파싱할 수 있도록 해주고, plugin TypeScript 특화된 규칙들을 추가해준다.
이제 .eslint.json 파일을 다음과 같이 변경해주자.
{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ]
}
이제 린트 관련 설정은 모두 끝났다. 추가로 import 경로 관련 설정을 하고 싶다면 아래 내용도 진행하도록 하자.
baseURL 추가
개인적으로 import 때 상대 경로로 하는 것을 매우 싫어한다. 너무 많은 ../가 생기고, 정확히 어떤 모듈을 import 하는 것인지 혼동되기 때문이다. 그래서 baseURL 설정을 꼭 해주는 편이다.
Next.js 는 baseURL 설정을 할 경우, 별도의 추가 설정(Babel 이나 등등)없이 바로 절대 경로로 import 가능하다. (참고로 path 설정도 잘 먹는데, 난 path는 하지 않고 baseURL 만 하는 편이다. 폴더 구조 자체가 곧 모듈 구조를 나타낸다고 보기 때문이다.)
tsconfig.json 파일의 compilerOptions 항목 안에 다음과 같이 추가해주자.
{
  "compilerOptions": {
    ...
    "baseUrl": "."
  }
}
이럴 경우, 프로젝트 루트 폴더를 기준으로 import 경로를 계산한다. 잘 되는지 확인하기 위해, pages/_app.tsx 파일의 globals.css import를 다음과 같이 수정해보자.
import 'styles/globals.css' // 원래는 '../styles/globals.css'
...
npm run dev 로 실행해보자.
globals.css 파일 내용이 잘 적용되어 있음을 알 수 있다.
이상 모든 프로젝트 설정이 끝났다.

Next.js 프로젝트 설정

댓글