[React, NextJS] tsconfig.json 절대경로 설정과 폴더구조 고찰

 

1. NEXTJS에 타입스크립트 설정방법

** new 

 

여러 글과 영상을 보고 next에 typescirpt를 적용하는 것을 따라했는데 이상하게 tsc로 ts파일을 변환하는 것은 되는데

next의 컴포넌트 타입체크를 안하는 문제가 있었다.

vscode 에디터 save 속성과 관련되어 있는 문제 같은데 수정이 힘들어서 그냥 새로 폴더를 다시 생성했고 더 간단한 방법을 찾았다.

 

1. 루트 프로젝트에 touch tsconfig.json 파일 생성 (빈페이지로)

touch tsconfig.json

 

2. yarn add --dev typescript @types/react @types/node 설치

 

3. npm run dev 혹은 yarn dev 실행 

 

이렇게만 하면 알아서 typescirpt 설정을 해준다 bb 완전 간단..!

 

이제 우리가 해줄 것은 절대 경로 설정만 해주면 된다.

 

++ 추가

 

나의 경우 next에서만 typescript가 작동되지 않아 하루종일 설정 건드려보던 차에 

dev.to/chromygabor/add-typescript-type-check-to-next-js-2nbb?signin=true

 

를 참고해서 아래를 설치 했는데 됐다 ㅠㅠㅠ 진작 할걸.. 다른 사람들은 없이도 되는 것 같은데 왜 난 안될까

yarn add -D fork-ts-checker-webpack-plugin

위 명령어를 설치하고 나서

 

next.config.js 파일을 루트에 만들고 아래 코드를 써준다.

const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");

module.exports = {
 /**
  * Custom Webpack Config
  * https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
  */
 webpack(config, options) {
   const { dev, isServer } = options;

   // Do not run type checking twice:
   if (dev && isServer) {
     config.plugins.push(new ForkTsCheckerWebpackPlugin());
   }

   return config;
 },
};

---

 

 

 

jsconfig.json에 절대경로를 설정하다가 이제 타입스크립트로 프로젝트를 만드려고 tsconfig.json을 방법을 찾아봤다.

 

사실상 동일한 것 같다

 

2. 절대 경로 설정하는 방법

 

 jsconfig.json에서는 src폴더를 통째로 넣어도 문제가 생기지 않았는데 typescript를 사용하면서 node_modules안의 비슷한 이름의 폴더 이름이 충돌하는 것 같아 alias나 폴더 이름을 따로 지정할 필요성이 있었다.

 

(예전에 급하게 만들 때 생겼어서 어떤 이름이 문제였는지는 기억이 안난다. 다만 문제가 생기고 수정하는 것보다는 미리 해놓는 것이 더 편할 것이다. 모든 파일의 import부분을 수정하기 귀찮을 테니..)

 

tsconfig.json 파일

{
    "compilerOptions": {
      "allowJs": true,
      "alwaysStrict": true,
      "esModuleInterop": true,
      "forceConsistentCasingInFileNames": true,
      "isolatedModules": true,
      "jsx": "preserve",
      "lib": ["dom", "es2017"],
      "module": "esnext",
      "moduleResolution": "node",
      "noEmit": true,
      "noFallthroughCasesInSwitch": true,
      "noUnusedLocals": true,
      "noUnusedParameters": true,
      "resolveJsonModule": true,
      "skipLibCheck": true,
      "strict": true,
      "target": "esnext",
      "baseUrl":".",
      "paths":{
        "components/*":["components/*"],
        "config/*":["config/*"],
        "pages/*":["pages/*"],
        "styles/*":["styles/*"]
      }
    },
    "exclude": ["node_modules"],
    "include": ["**/*.ts", "**/*.tsx"]
  }

나는 아래 baseUrl로 루트 부분을 포함시키고 루트에 존재하는 폴더이름으로 구분을 했다.

     "baseUrl":".",
      "paths":{
        "components/*":["components/*"],
        "config/*":["config/*"],
        "pages/*":["pages/*"],
        "styles/*":["styles/*"]
      }

현재 create-next-app과 typescript만 적용한 폴더는 이렇다. 앞으로 구조를 어떻게 할지는 좀 더 고민해야할 것 같다.

 

container component, presentational component구조로 했더니 스타일 부분을 담당하는 프레젠테이셔널 컴포넌트 부분이 데이터 스릴링(부모에서 자식으로 또 그 자식으로 계속 props를 넘겨주는 것)이 일어나서 다른 구조를

생각해보았다.

 

www.robinwieruch.de/react-folder-structure

React Folder Structure in 5 Steps - RWieruch

일단 이 글을 참고해서 프로젝트를 만들어보려고 한다. 여기에 redux등 외부 라이브러리를 추가하면 또 다른 폴더 구조가 생길 것 같다.