[프로젝트]NEXT js에 Typescript 초기 세팅 해보기

본 포스트는 TIL로 내용이 부정확할 수 있어 정보를 공유하기보다 과정을 기록함에 목적이 있습니다.
정확한 정보를 원하시면 뒤로가기를 눌러주세요.

NEXT js에는 친절하게 npx create-next-app --typescript의 명령어로 초기세팅이 가능하다, 그동안 기한이 있는 프로젝트를 맡아 하다보니 React나 React Native모두 CRA, EXPO CLI를 통해 빠르게 시작했지만 의도치 않은 Module이 깔리고 내가 직접 하지 않은 setting이 분명 존재 했을텐데 이번에는 처음부터 내가 setting하면서 프레임워크에 대한 dependency은 낮추고 mastery는 높이고자 시작했다.

첫 시작은 폴더를 만들고 npm init을 통해 의존성을 추가해 package.json을 생성했다.
기획한 대로 NEXT와 styled-components등 기본적으로 필요한 모듈만 설치 했고 추가로 typescript의 관한 내용을 추가 했다.

//package.json
"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
   
    ...
    
"dependencies": {
    "next": "^11.1.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "styled-components": "^5.3.1"
  },
  "devDependencies": {
    "@types/react": "^17.0.20",
    "@types/styled-components": "^5.1.14",
    "@typescript-eslint/eslint-plugin": "^4.31.0",
    "@typescript-eslint/parser": "^4.31.0",
    "babel-plugin-styled-components": "^1.13.2",
    "eslint": "^7.32.0",
    "eslint-config-next": "^11.1.2",
    "typescript": "^4.4.2"
  }

사실 처음 하는 setting이다 보니 cna--typescript를 참고해 내가 알고 사용하는 내용만 우선 설치 했고 조금이라도 애매한 부분은 제외를 했다.

추가로 설정이 필요해보이는 파일 중 내가 예상하는 바로는

• next-env.d.ts: typescript(줄여서 ts)의 next type을 설정하는 것 같아 cna를 그대로 사용함.
• next.config.js: 모듈의 관련된 부분으로 아마 지금보다 배포단계에서 '문제'가 생기면서 수정, 추가를 해야하는 부분으로 생각됨(내용이 없어도 현재 빌드와 개발은 가능함)
• tsconfig.json: ts의 설정파일로 보이며 cna의 설정을 그대로 사용함.

사실 더 이해하고 하나하나 파악해보고싶었지만 '첫 술에 배부르랴'라는 마음으로 현재 할 수 있는 부분까지만 생각하고 최대한 프로젝트를 '시작'하는 것에 초점을 맞추고 내가 분명히 알 수 있는 부분만 제외, 추가 하면서 진행을 하였다.

그나마 조금 더 알 수 있는 .eslintrc.json과 .prettierrc는 나름 더 편하게 setting 할 수 있었다.(특히 prettierr!는 완전한 내 스타일로 해서 뿌듯 😊)

//.eslintrc.json

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "next/core-web-vitals",
    "prettier/react",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ]
}
//ts와 prettierr에 관련되어 보이는 것만 넣어 놓았다.

//.prettierrc

{
	"parser": "typescript",
	"singleQuote": true,
	"semi": true,
	"useTabs": false,
	"tabWidth": 2,
	"trailingComma": "none",
	"printWidth": 80
}
// 블로그와 cna 설정을 보며 setting

이제 style에 관련된 부분인데

styled.d.ts: styled-components의 ts interface를 만드는 부분으로 처음에는 그냥 공식 홈페이지 styled-components코드를 따라 만들었는데 추후 학습을 통해 interface개념을 이해할수 있었다.
global-style의 경우 크게 다르지 않았고 theme는 const theme: DefaultTheme로 styled.d.ts에서 만든 interface를 지정해주는 부분만 달랐다.

나머지는 _app.tsx에 global-style과 theme를 적용해주고 우선 실행해봤을 때 문제 없이 적용되어 나름 뿌듯 👍

그동안 초기세팅을 완벽히 해보고 싶은 욕심에 미루기만하고 진도는 못나가는 상황에서 '일단 하자'라는 마음으로 시작했고 최소한의 개발환경이 구축된것에 만족하고 과정에서 겪는 불협화음을 통해 또 배울것을 기대(라고 쓰고 걱정이라고 읽는다)하며 이번에는 어렵더라도 반드시 완벽한 장악력으로 프로젝트를 시작하고 관리하는 내가 되도록 노력할 것이다.

그날을 기대하며 ....😇