프로젝트 구성

개인 프로젝트를 시작해보려고 하는데, 여러 프로젝트를 진행하려면 개인적으로 템플릿이 필요하다고 생각이 들었다. 그래야 추후에 아이디어가 떠오를 때 빠른 시작이 가능하니까!  

1. 기술스택

구분	기술	선정 이유
프레임워크	Next.js 14	개인적으로 12버전으로 경력을 쌓아왔는데, 현재 15버전 까지 나온 상황에서 최신 버전은 아무래도 어려움이 많을 거 같아서 한 버전 낮은 걸 골랐다.
라이브러리	React 18	기존엔 17버전을 써왔는데, 이번엔 18을 써보기로.
언어	Typescript, Javascript	Typescript는 사용한 경험이 있지만, 아직 Javascript만큼 익숙하지는 않기도 하고 런타임 에러를 고려하면 당연히 사용하는 걸로? Javascript는 말해 뭐해
디자인 프레임워크	tailwindcss	css 파일 크기 관리에 효율적이고 유틸 클래스로 쉽게 디자인 적용이 가능하다!
코드 분석	Eslint	코드 품질 유지에 필수라고 생각한다. 생각지도 못한 부분을 잡아준다 항상.
코드 포맷터	Prettier	Eslint와 결합시켜 코드 가독성을 위해서 역시 필수지 않을까?
파트너	ChatGPT	자료 서치에 소요되는 시간을 줄여주는 동반자!

Next.js와 거기에 사용되는 React의 버전 상승이 있었기 때문에 관련 내용 학습을 병행해보자?

 

2. 초기 설정

1. package 설정

npm init

npx create-next-app 명령어로 Next.js 자동 구성이 가능하지만, 불필요한 라이브러리도 포함될 거 같아 수동 설치 구성을 해보려고 했다. 해당 명령어 입력 후 적당한 내용을 슉슉 입력.

 

2. 필요 패키지 설치 및 설정 진행

npm i next@14 react@18 react-dom@18

앞서 고른 패키지 3개를 모두 설치해주자.

npm install --save-dev typescript @types/react @types/node

Typescript를 사용하기 위해서 필요한 패키지는 devDependencies로 설치해주고, 초기 구성은 Next.js에게 맡기기 위해 적당한 위치에 .tsx or .ts 파일을 만들고, npm run dev 명령어로 서버 실행 한 번 해주면 아래와 같이 tsconfig.json 파일이 생성된다. 프레임워크의 맛.

{
  "compilerOptions": {
    "lib": [
      "dom", // DOM API를 사용할 수 있도록 설정
      "dom.iterable", // DOM의 반복 가능한 객체를 지원
      "esnext" // 최신 ECMAScript 기능을 사용하도록 설정
    ],
    "allowJs": true, // JavaScript 파일도 TypeScript로 컴파일할 수 있도록 허용
    "skipLibCheck": true, // 라이브러리 파일의 타입 검사 건너뛰기 (속도 향상)
    "strict": false, // 엄격한 타입 검사 비활성화 (기본값 false)
    "noEmit": true, // 컴파일된 JavaScript 파일을 출력하지 않음
    "incremental": true, // 증분 컴파일을 활성화하여 빌드 속도 향상
    "module": "esnext", // 모듈 시스템을 ESNext로 설정
    "esModuleInterop": true, // CommonJS 모듈을 ESModule처럼 사용할 수 있게 설정
    "moduleResolution": "node", // Node.js 방식의 모듈 해석 방식을 사용
    "resolveJsonModule": true, // JSON 파일을 TypeScript에서 모듈로 가져올 수 있게 설정
    "isolatedModules": true, // 각 파일을 독립적인 모듈처럼 처리하여 빠른 빌드를 가능하게 설정
    "jsx": "preserve", // JSX를 그대로 유지 (Next.js는 JSX 처리에 별도의 설정 필요)
    "plugins": [
      {
        "name": "next" // Next.js에 맞게 TypeScript 설정을 위한 플러그인 사용
      }
    ]
  },
  "include": [
    "next-env.d.ts", // Next.js 관련 환경 설정 파일 포함
    ".next/types/**/*.ts", // Next.js 빌드에 관련된 타입 파일 포함
    "**/*.ts", // 모든 TypeScript 파일 포함
    "**/*.tsx" // 모든 TypeScript JSX 파일 포함
  ],
  "exclude": [
    "node_modules" // node_modules 폴더 제외
  ]
}

 

npm lint

해당 명령어를 실행하면 마찬가지로 Eslint 적용에 필요한 .eslintrc.json 파일을 작성해준다.

npm install eslint eslint-config-airbnb@^19.0.4 eslint-config-airbnb-typescript@^18.0.0 eslint-config-next@15.1.3 eslint-config-prettier@^9.1.0 eslint-plugin-import@^2.31.0 eslint-plugin-prettier@^5.2.1 eslint-plugin-react@^7.37.3 --save-dev

eslint 설정을 위해 필요한 패키지도 설치해주자. 해당 패키지 내용은 복잡한데, 파트너가 정리해준 내용을 확인.

eslint-plugin-react-hooks도 설치하라는 얘기가 있는데, next에서 제공하는 eslint에 포함되어 있기 때문에 여기선 제외!!

 

{
  "extends": [
    "next/core-web-vitals", // Next.js 기본 규칙
    "next/typescript", // TypeScript 설정
    "airbnb", // Airbnb 기본 규칙
    "airbnb-typescript", // Airbnb TypeScript 규칙
    "prettier" // Prettier와의 충돌 방지
  ],
  "plugins": ["react", "import", "prettier"],
  "parser": "@typescript-eslint/parser", // TypeScript 파서
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "project": "./tsconfig.json" // TypeScript 설정 파일 지정
  },
  "rules": {
    "prettier/prettier": "error", // Prettier 규칙 위반 시 오류로 처리
    "react/react-in-jsx-scope": "off", // Next.js에서는 React import가 필요없으므로 비활성화
    "react/prop-types": "off", // TypeScript에서는 PropTypes 필요 없음
    "react/jsx-filename-extension": ["warn", { "extensions": [".tsx"] }], // JSX 파일 확장자 설정
    "no-console": "warn", // console.log 사용 시 경고
    "@typescript-eslint/no-unused-vars": "warn", // TypeScript에서 미사용 변수 경고
    "@typescript-eslint/explicit-module-boundary-types": "off", // 함수 반환 타입 명시 강제하지 않기
    "react-hooks/rules-of-hooks": "error", // React hooks 규칙 강제
    "react-hooks/exhaustive-deps": "warn", // React hooks 의존성 배열 규칙
    "react-hooks/no-namespace": "off" // 필요시 사용
  }
}

우선은 최초 세팅이기 때문에 실행까지 확인하고 자세한 설정은 추후에 필요에 따라 수정해보자.

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "arrowParens": "always"
}

prettier 설정은 간단하게 이렇게만 사용해보자.

EsLint 설정은 할 때마다 필요한 패키지가 너무 많아서 복잡하다고 느껴진다. 아 그리고 next.js에서 기본 제공하는 eslint가 있는데 airbnb eslint 설정도 함께 사용하는 이유는 대중적으로 많이 사용되기도 하고 실무에서 사용해 봤을 때 가장 코드 품질 유지에 도움이 된다고 느껴졌기 때문!

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

css 프레임워크는 tailwindcss를 사용할 예정이므로 필요한 패키지를 설치하고, 명령어를 실행하면 설정 파일이 생성된다.

/** @type {import('tailwindcss').Config} */
const config = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

export default config;

적당한 경로에 tailwind.css 파일을 생성해 아래 스타일을 불러오자.

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

3. 마무리

한 번씩 구축해봤던 설정들이라 큰 어려움은 없었다. 그때는 Javascript긴 했지만.

한 번에 전체적인 구축을 마무리하면 좋지만, 그러면 내용이 길어지고 계속해서 추가되는 내용이 있을 수 있으니 초기 구성은 여기까지!

 

진행 상황

• 프로젝트 초기 구성 (https://fbtmdwhd33.tistory.com/265)
• 나름의 기획 (https://fbtmdwhd33.tistory.com/266)
• 화면 설계 (https://fbtmdwhd33.tistory.com/267)
• 구현 + 추가 구성
• 실제 적용

 

Preference

• GitHub 주소~
• https://nextjs.org/docs/14/getting-started

GitHub - anewpotato/portfolio-front

 

Introduction: Getting Started | Next.js