[React] Next.js, typescript로 프로젝트 만들기(1)

시작

• vue와 node.js 위주로 실무를 진행하여 react에 대한 공부를 하고 싶기도 했고 동시에 CSR이 아닌 SSR의 프로젝트를 진행해보고싶어 시작하게 되었다.

• express를 사용해 back, front를 구분하여 정리할까 했지만, 우선은 next.js만 사용하여 프로젝트를 만들어보고 배포까지 진행할 예정이다.

1. next 프로젝트 typescript로 만들기

next 프로젝트를 cna로 만들고 추가해도되지만 typescript까지 한번에 설치하였다.

npx create-next-app@lastest --typescript [프로젝트 이름]

빌드 후에 package.json을 확인해보면

{
  "name": "frontend",
  "version": "1.0.0",
  "private": true,
  "main": "index.tsx",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^16.0.1",
    "next": "12.2.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
  },
  "devDependencies": {
    "@babel/node": "^7.18.6",
    "@babel/preset-env": "^7.18.6",
    "@types/node": "18.0.3",
    "@types/react": "18.0.15",
    "@types/react-dom": "18.0.6",
    "eslint": "8.19.0",
    "eslint-config-next": "12.2.1",
    "typescript": "4.7.4"
  }
}

env, eslint 사용을 위한 dotenv와 eslint까지 npm으로 설치한 후의 모습이다.
개발 실행 -> npm run dev
빌드 하기 -> npm run build
빌드 실행 -> npm run start 를 확인 할 수 있다.

2. 설정 파일 확인 및 수정

빌드를 하고 나면 config 파일들이 생기는데 먼저 typescript쪽 설정파일인 tsconfig.json은

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

다음과 같이 세팅하였다.
react 실행 기본 세팅은 next.config.js에서 수정가능하다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  
  //설정들 추가 가능
}

module.exports = nextConfig

3. 기본 폴더 트리 만들기 및 메인 페이지

다음과 같이 기본적으로 만들었고
(server.js, setupProxy.js, build.sh는 테스트용 파일이니 신경쓰지 않아도 된다.)

index.tsx에 home.tsx를 임포트 시켜 메인페이지를 간단히 http://localhost:3000에서 나오는 것을 확인하였다.

import Home from "./home/home"

export default function index () { 
  return (
    <div>
      <Home />
      index
    </div>
  )
}

4. 사용할 패키지 추가 (emotion.js, sass, mysql2), eslint, typescript 세팅

  "dependencies": {
    "@emotion/react": "^11.9.3",
    "dotenv": "^16.0.1",
    "mysql2": "^2.3.3",
    "next": "12.2.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "sass": "^1.53.0"
  },

npm install @emotion/react
npm install mysql2
npm install sass

앞으로 사용할 emotion.js, sass까지 설치하였다.

• eslint 환경 세팅과 typescript 세팅은 서칭을 통해 내게 필요한 설정을 추가로 해주거나 불필요한 세팅을 지워서 세팅하자.

• eslint 참조 링크텍스트

• typescript 참조 링크텍스트

다음엔 amazon rds를 연결하여 db세팅을 하고 메인페이지 및 로그인을 구현하려고 한다.