뽀모 프로젝트 초기 세팅 과정목차

📝 목차

🍅 사용 기술

• next.js (typescript)

• eslint

• prettier

• lint-staged

• husky

• emotion

• react-query

🔥 설정 과정

+) 추가적으로 참고한 글

Create a NextJs project with Typescript, ESLint, Prettier and TailwindCSS

Learn how to create a NextJs project with Typescript, ESLint, Prettier and TailwindCSS. NextJs is an amazing React framework that you can use to quickly create production-level application for the web. In this article, we are going to learn how to create and setup a new project with Typescript (types), (linting warning and errors), (code formatting), and TailwindCSS (CSS styling).

https://www.sandromaglione.com/techblog/create-nextjs-project-with-typescript-eslint-prettier-tailwindcss

next.js

• create-next-app을 통해 next.js 프로젝트 생성

npx create-next-app@latest # ts, eslint - yes

• 참고
Getting Started | Next.js
Next.js 13 was recently released, learn more and see the upgrade guide. Version 13 also introduces beta features like the app directory that works alongside the pages directory (stable) for incremental adoption. You can continue using pages in Next.js 13, but if you want to try the new app features, see the new beta docs.

https://nextjs.org/docs/getting-started

eslint

• create-next-app을 통해 next에서 기본적으로 제공하는 ESLint(eslint-config-next) 설정
• eslint-plugin-react , eslint-plugin-react-hooks , eslint-plugin-next 포함
• 참고
Basic Features: ESLint | Next.js
Next.js provides an integrated ESLint experience out of the box. Add next lint as a script to package.json: Then run npm run lint or yarn lint: If you don't already have ESLint configured in your application, you will be guided through the installation and configuration process.

https://nextjs.org/docs/basic-features/eslint

• typescript-eslint 설정

npm install --save-dev @typescript-eslint/eslint-plugin

• eslint-config-next가 @typescript-eslint/parser에 의존성을 가지고 있어서 따로 설치하지 않음.
• 참고
Getting Started | typescript-eslint
Quickstart

https://typescript-eslint.io/getting-started/

next.js/index.js at canary · vercel/next.js
You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

https://github.com/vercel/next.js/blob/canary/packages/eslint-config-next/index.js

• .eslintrc.json

{
  "plugins": ["@typescript-eslint"],
  "extends": [
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": [
      "warn",
      {
        "varsIgnorePattern": "^_",
        "args": "all",
        "argsIgnorePattern": "^_",
        "caughtErrors": "all"
      }
    ]
  }
}

• settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

prettier

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

• .prettierrc.json

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 120,
  "endOfLine": "lf"
}

• .eslintrc.json

{
	...,
	"extends": [
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "prettier" // 가장 마지막에 추가
  ],
}

• .vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
	// 아래 두 줄 추가
  "editor.formatOnSave": true, // Tell VSCode to format files on save
  "editor.defaultFormatter": "esbenp.prettier-vscode" // Tell VSCode to use Prettier as default file formatter
}

lint-staged

npm install --save-dev lint-staged

• package.json

{
	...,
	"lint-staged": { 	// 추가
    "**/*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

• 아래 명령어로 lint-staged가 잘 동작하는지 확인

npx lint-staged

husky

npm install --save-dev husky

npx husky install

• package.json

{
	...,
	"scripts": {
    "prepare": "husky install" // 추가
  },
	...
}

• Hook 생성

npx husky add .husky/pre-commit "npx lint-staged"

• .husky/pre-commit 파일 내용이 아래와 같은지 확인

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

• 참고
Husky - Git hooks
Modern native Git hooks made easy

https://typicode.github.io/husky/#/?id=create-a-hook
husky, lint-staged를 사용하자( sub : ESLint 자동화하기 )
우리는 ESLint 를 프로젝트에 적용시킬 때는 협업하는 모든 사람들이 같은 규칙 내에서 코딩을 하는 것을 예상한다. 하지만 가끔은 규칙을 지키지 않고 깃헙에 코드를 푸시할 때가 생긴다. 내 경우에도 가끔 오랜 코딩에 지쳐서 깜빡하고 ESLint 확인을 안하고 푸시할 때가 있었다.

https://velog.io/@do_dadu/husky-lint-staged%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%9E%90-sub-ESLint-%EC%9E%90%EB%8F%99%ED%99%94%ED%95%98%EA%B8%B0

(3) husky와 lint-staged로 커밋할 때마다 자동으로 lint 검사하기
해당 글은 시리즈로 작성되었습니다! React 프로젝트에서 일관성 있는 코드를 유지하기 위해 사용하는 ESLint, Prettier, husky, lint-staged가 무엇인지, 왜 사용하며, 어떻게 사용하는지 알아볼 것이며 아래 순서로 포스팅하였습니다. :) (1) ESLint와 Prettier가 무엇이며 왜 필요하고 어떻게 사용하는지 (2) 그래서 eslintrc, prettierrc 설정 어떻게 해?

https://velog.io/@treejy/husky%EC%99%80-lint-staged%EB%A1%9C-%EC%BB%A4%EB%B0%8B%ED%95%A0-%EB%95%8C%EB%A7%88%EB%8B%A4-%EC%9E%90%EB%8F%99%EC%9C%BC%EB%A1%9C-lint-%EA%B2%80%EC%82%AC%ED%95%98%EA%B8%B0

Run a TypeScript type check in your pre-commit hook using lint-staged + husky
A great way to prevent TypeScript compilation errors from bringing down your CI pipelines is to introduce a type check before you commit your .ts file changes. If you've worked with Git Hooks before, you'll probably know that one of the best combinations for running pre-commit checks is husky and lint-staged.

https://dev.to/samueldjones/run-a-typescript-type-check-in-your-pre-commit-hook-using-lint-staged-husky-30id

Emotion

• @emotion/react, @emotion/styled 설치

npm install --save @emotion/react @emotion/styled

Install

There are lots of ways to use Emotion, if you're using React, the easiest way to get started is to use the @emotion/react package. If you're not using React, you should use the @emotion/css package.

https://emotion.sh/docs/install

React Query

npm install react-query

Installation

You can install React Query with NPM, Yarn, or a good ol' via unpkg.com. React Query is compatible with React v16.8+ and works with ReactDOM and React Native. Wanna give it a spin before you download? Try out the simple or basic examples!

https://react-query-v3.tanstack.com/installation

• react query 이름이 바뀌었다.. tanstack

• tanstack 설치해야함…….
Migrating to React Query 4 | TanStack Query Docs
v4 is a major version, so there are some breaking changes to be aware of: You will need to un-/install dependencies and change the imports: To make the import migration easier, v4 comes with a codemod. The codemod is a best efforts attempt to help you migrate the breaking change.

https://tanstack.com/query/latest/docs/react/guides/migrating-to-react-query-4