< 목차 >
1. Git 초기 세팅 명령어
(1) npm으로 pnpm을 전역에 설치
(2) Next.js 설치
(3) Tailwind CSS 설치 및 세팅
(4) TanStack Query, Zustand 설치 및 세팅
(5) eslint-config-airbnb 설치 및 세팅
(6) .gitignore
(7) 끝! 커밋을 잊지 말자
2. 팀원들과 따옴표, 쌍따옴표 Prittier가 안 맞아요!
3. GitHub에 빈 폴더를 넣고 싶어요!
pnpm 패키지 매니저를 사용해서 Next.js + TypeScript + Tailwind CSS + TanStack Query + Zustand 를 설치하려고 한다면 축하한다. 지금부터 프로젝트 설치 명령어와 세팅을 아주 상세하게 알려주겠다.
터미널에 다음과 같은 명령어를 입력하면 된다.
1. Git 초기 세팅 명령어
(1) npm으로 pnpm을 전역에 설치
npm install -g pnpm
(2) Next.js 설치
pnpm create next-app
위 명령어를 입력하면 아래와 같이 뜰 것이다.
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`? No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/
프로젝트에 사용하는 기술 스택에 맞게 Yes 혹은 No를 선택해서 엔터키를 누르면 Next.js 설치가 완료된다. 나는 App Router를 사용했다.
(3) Tailwind CSS 설치 및 세팅
pnpm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p // -p는 PostCSS 설정 파일 생성을 의미
잠깐 위 명령어의 의미와 설치 이유를 명확히 알고 넘어가도록 하자.
pnpm install -D tailwindcss postcss autoprefixer 명령어로 설치하는 Tailwind CSS, PostCSS, Autoprefixer는 각각 특정 역할을 하며, Tailwind CSS를 제대로 활용하려면 반드시 설치해야 한다.
1) Tailwind CSS
: Tailwind CSS는 유틸리티 클래스 기반의 CSS 프레임워크
1. 설치 이유
- CSS를 직접 작성하지 않고, 미리 정의된 클래스를 활용하여 빠르게 UI를 구성할 수 있음
- e.g. bg-blue-500, flex, px-4와 같은 유틸리티 클래스
2. 하는 일
- Tailwind CSS의 핵심 기능을 제공함
- 사용자 정의 설정(tailwind.config.js)과 함께 작동하여 프로젝트 요구에 맞는 CSS를 생성
2) PostCSS
: Tailwind CSS는 PostCSS 플러그인으로 작동
1. 설치 이유
PostCSS는 CSS를 처리하기 위한 도구로, 여러 플러그인을 활용하여 CSS를 변환하거나 최적화함
Tailwind CSS도 PostCSS 플러그인 중 하나이기 때문에 PostCSS가 필요
2. 하는 일
Tailwind CSS의 유틸리티 클래스와 사용자 정의 스타일을 처리
CSS 파일을 컴파일하는 과정에서 PostCSS를 통해 클래스 변환 및 최적화 수행
3) Autoprefixer
: 브라우저 호환성을 위해 CSS에 자동으로 벤더 접두사(vendor prefix)를 추가
1. 설치 이유
- e.g. webkit-, moz- 같은 접두사가 필요한 CSS 속성 자동 처리
- Tailwind CSS는 기본적으로 Autoprefixer를 PostCSS와 함께 사용하여 CSS 호환성을 보장
2. 하는 일
- 최신 CSS를 작성하더라도 구형 브라우저에서도 정상적으로 동작하도록 보장
- e.g. display: flex; → webkit-display: flex; (구형 브라우저 지원)
이 3가지 패키지는 상호 보완적으로 작동하며, Tailwind CSS를 프로젝트에서 정상적으로 사용하기 위해 필수적이다.
설치 후, tailwind.config.js 파일과 PostCSS 설정 파일(postcss.config.js)을 생성하면 Tailwind CSS의 기능을 최대로 활용할 수 있다.
// src/styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
globals.css 파일에 위 코드가 잘 작성돼있는지 확인한다.
나는 따로 관리되는 CSS 파일을 모아두기 위해 styles 폴더를 새로 생성해서 globals.css 파일을 넣어줬다.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/**/*.{js,ts,jsx,tsx,mdx}', // ./src/ 경로도 사용하기 때문에 content 배열에 추가
],
theme: {
extend: {},
},
plugins: [],
}
프로젝트 루트에 tailwind.config.js 파일의 content 배열에 Tailwind CSS를 적용할 파일 경로를 지정해야 한다. ./src/ 경로도 사용하기 때문에 content 배열에 추가해주었다.
(4) TanStack Query, Zustand 설치 및 세팅
pnpm install @tanstack/react-query zustand
위 명령어를 통해 패키지를 설치한다.
// ReactQueryProvider.tsx
'use client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactNode, useState } from 'react';
export default function ReactQueryProvider({ children }: { children: ReactNode }) {
const [queryClient] = useState(() => new QueryClient());
return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
}
세팅은 src/app/ReactQueryProvider.tsx 파일을 만들어서 위와 같이 코드를 작성하면 된다.
그러고 나서 src/app/layout.tsx에서 body 태그 안에서 하위 코드들을 <ReactQueryProvider>로 감싸주면 TanStack Query 설치 및 세팅은 끝이다.
Zustand는 따로 세팅할 게 없다.
store를 깔끔하게 관리하고 싶다면, 관리할 폴더를 따로 만들어서 그 안에 전역 상태 관련 코드를 잘 분류해서 작성하고 사용할 파일에서 import하여 사용하면 된다.
(5) eslint-config-airbnb 설치 및 세팅
pnpm install -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y
pnpm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
pnpm install -D eslint-plugin-simple-import-sort
나는 eslint-config-airbnb와 eslint-plugin-simple-import-sort 를 사용했다.
eslint-plugin-simple-import-sort를 사용하면 import 구문을 좀 더 가독성 있게 관리할 수 있다. 더 자세한 내용은 다른 포스팅에 작성하겠다.
Next.js는 공식 문서에서 알 수 있듯이 프레임워크답게 ESLint를 제공해주고 있다.
그래서 eslint-config-airbnb처럼 다른 패키지를 추가적으로 설치하는 경우, 충돌이 생기지 않도록 설정 파일을 생성해서 추가적인 설정을 해줘야 한다.
// .eslintrc.json (ESLint 설정 파일 생성 및 구성)
{
"extends": [
"airbnb", // Airbnb의 ESLint 규칙 적용
"airbnb/hooks", // React Hooks에 대한 Airbnb 규칙 추가
"plugin:@typescript-eslint/recommended", // TypeScript 관련 권장 규칙 추가
"plugin:react/recommended" // React와 관련된 권장 규칙 추가
],
"parser": "@typescript-eslint/parser", // TypeScript 파일을 분석하기 위한 파서 지정
"parserOptions": {
"ecmaVersion": 2021, // 최신 ES2021 문법 지원
"sourceType": "module", // 모듈 시스템(import/export) 지원
"ecmaFeatures": {
"jsx": true // JSX 구문 지원
}
},
"plugins": [
"@typescript-eslint", // TypeScript 관련 규칙을 제공하는 플러그인
"react", // React 규칙을 제공하는 플러그인
"react-hooks" // React Hooks 관련 규칙을 제공하는 플러그인
],
"rules": {
"react/react-in-jsx-scope": "off", // React 17 이상에서는 React import가 필요 없으므로 비활성화
"import/extensions": [
"error", // import에서 확장자 생략 시 오류 발생
"ignorePackages",
{
"ts": "never", // TypeScript 파일에서는 확장자를 생략 가능
"tsx": "never" // TSX 파일에서도 확장자를 생략 가능
}
]
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"] // 이 확장자를 가진 파일을 import 경로로 인식
}
}
}
}
프로젝트 루트 경로에 .eslintrc.json 파일을 생성해야 한다.
그러고 나서 eslint-config-airbnb와 함께 사용할 경우, 충돌할 수 있는 import/order 규칙을 비활성화해야 한다. 이외의 더 자세한 내용은 주석을 통해 알 수 있다.
// package.json
"scripts": {
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
}
프로젝트 루트에 있는 package.json에 ESLint 실행 스크립트 추가하면 pnpm lint로 ESLint를 실행할 수 있다.
난 이것도 귀찮고 번거로워서 VS Code 설정 파일(.vscode/settings.json)을 만들어서 파일 저장 시, import 구문 자동으로 정렬되게 만들었다.
// .vscode/settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
프로젝트 루트 경로에 직접 .vscode/settings.json을 생성해야 한다.
vscode라는 폴더에 생성하여 vscode 관련 설정 파일을 따로 분류하고 관리할 수 있게끔 하였다.
🚨 단, 여기서 주의해야 할 점이 있다! 🚨
프로젝트의 ESLint, Prettier 등 팀 단위 설정을 공유하려는 경우, .gitignore에 .vscode/를 추가하지 않아야 한다. 제외된 채로 GitHub에 commit 되기 때문이다.
이렇게 다 적용하면 Airbnb 스타일 가이드를 통한 일관된 코드 스타일 적용이 가능하다.
pnpm lint
ESLint 세팅을 끝낸 뒤, 프로젝트에서 ESLint를 실행하여 설정을 확인하고 싶으면 pnpm lint 명령어를 터미널에 작성하면 된다. Next.js는 ESLint를 기본적으로 제공하기 때문에 이렇게 간결한 명령어로 확인이 가능하다.
(6) .gitignore
// .gitignore
node_modules
.next
.env
.env.local // .env.local부터는 필요하면 추가
.env.development.local
.env.test.local
.env.production.local
git init 명령어를 작성하면 .gitignore가 자동으로 생성된다.
생성되지 않은 경우엔 프로젝트 루트에 .gitignore 파일을 생성해서 위와 같이 코드를 작성하면 된다.
보통 GitHub에 올리면 안 될 보안 관련 정보가 들어가는 env 파일이나 프로그램을 돌릴 때 사용하는 폴더 및 파일을 gitignore에 포함한다.
(7) 끝! 커밋을 잊지 말자
"setting: 초기세팅 완료" // 변경사항 커밋
다 하고 나선 변경사항을 커밋하자!
2. 팀원들과 따옴표, 쌍따옴표 Prittier가 안 맞아요!
위 내용을 참고하여 Single Quote에 체크하면 해결된다.
TSX와 JSX 중 1개만 체크하진 않고 2가지 모두 체크했는지 확인해보는 걸 추천한다. TSX나 JSX로 작성했을 때 모두 코드 파일을 저장하면 따옴표로 자동정렬 돼야 하기 때문이다.
3. GitHub에 빈 폴더를 넣고 싶어요!
위와 같이 touch 명령어를 사용하면 된다.
예시를 통해 빠르게 적용해보자.
빈 폴더 assets/images/를 GitHub에 추가하려고 한다.
1. 빈 폴더 생성
: 터미널 또는 파일 탐색기에서 프로젝트 디렉토리 내에 폴더를 생성한다.
mkdir -p assets/images
2. .gitkeep 파일 생성
: Git은 빈 폴더를 추적하지 않기 때문에, assets/images 폴더 안에 .gitkeep 파일을 추가한다.
touch assets/images/.gitkeep
위와 같이 생성된다.
즉, 폴더 하위에 파일이 생성되는 것이다.
'[Front-end] 개발자 공부' 카테고리의 다른 글
| [TypeScript] unknown, never, enum 타입의 개념 및 특징 (1) | 2024.12.27 |
|---|---|
| [Next.js] App Router vs. Page Router (2) | 2024.12.07 |
| 배포 시, NextUI 적용이 안 되는 에러 → .npmrc 파일 추가 및 pnpm을 다시 설치해 해결 (9) | 2024.11.09 |
| [개발 공부 113일차] Map과 Set 딥 다이브 (4) | 2024.10.07 |
| [개발 공부 107일차] 함수형 코딩 | 타임라인 조율하기 (12) | 2024.09.28 |