[Next.js] 포트폴리오 웹 페이지 제작기 - 1. 프로젝트 세팅

포트폴리오 웹 페이지를 만들기로 결심했다.
그래도 웹 개발 하겠다는 사람인데 나를 위한 웹 페이지 하나쯤은 있어야지 싶었다.
Next.js + TypeScript를 사용할 것이다.

포트폴리오라는 프로젝트 특성상 빠른 로딩이 중요할 것 같아 SSR인 Next.js를 택했다.
Next.js를 사용한 프로젝트를 개발하면서 코드 변경사항이 dev 서버 화면에 즉각 반영되는 경험이 좋았어서 선택한 것도 있다.

1. Next.js 세팅

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app --typescript

TS를 사용할 것이기 때문에 --typescript 플래그를 붙여줬다.
ESLint 또한 사용하겠다고 했다.

설치를 완료하고 나서 불필요한 파일들과 코드들을 지우고 favicon을 변경했다.

Prettier도 설치해줬다.

npm install --save-dev --save-exact prettier

// .prettierrc.js

module.exports = {
  semi: true,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 160,
  tabWidth: 2,
};

2. Tailwind CSS 세팅

Next.js 환경에서는 아래와 같이 세팅해줘야 한다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

도중에 설치가 멈추길래 무슨 일인가 했더니 npm run dev로 dev 서버를 돌리고 있어서였다.
혹시 npm 설치가 되지 않으면 dev 서버가 실행중인지 확인해보자.

설치가 완료되면 css 파일에 @tailwind directives를 추가해줘야 한다.

/* src/styles/globals.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

추가로 prettier-plugin-tailwindcss를 다운받으면 Prettier에서 Tailwind 클래스를 자동으로 정렬해준다.

yarn add -D prettier prettier-plugin-tailwindcss

여기까지 하고 GitHub Repository를 만들어 코드를 업로드했다.
내일부터는 본격적인 개발에 들어갈 것이다.