2022.05.11 TypeScript 로 React 세팅하기

2022.05.11 TypeScript 로 React 세팅하기_정리노트

 

ㅎㅇㅎㅇ 드디어 돌아왔다!!!!!! 노마드 코더 강의 듣다가 이리저리 타입스크립트로 바꾸는데 에러가 많이 생겨서..... 흑흑 프로젝트 세팅하는 간단한 포스팅부터 시작해보려구!!(하지만 개인적으로 뻘짓 많이 해버려서 간단하진 않았음.)

 

 

나는 이미 만든 프로젝트로 시작하려고 하니 에러 사항이 많던걸....왜 나에게 이런 시련이 흑흑 어쩌다 뭐부터가 잘못된건지 흑흑

 

일단 처음부터 타입스크립트가 포함된 리액트 프로젝트를 만들려면!!

$ npx create-react-app my-app --template typescript
$ yarn create react-app my-app --template typescript

 

요롷게 my-app 부분에 만들고 싶은 프로젝트 이름을 넣고 npm or yarn 으로 만들어주면 된다!

 

만약 기존 프로젝트에 ts를 추가하려면

 

$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest
$ yarn add typescript @types/node @types/react @types/react-dom @types/jest

이역시 npm or yarn 으로 해당 명령어로 만들어주기!

 

 

이렇게 깔고 나면, 내가 지금 만들고 있었던 파일들의 확장자를 

 

tsx 로 바꿔주면 된다. 여기서 만약에 yarn start 를 할 때

 

Compiled with problems:X ERROR in ./src/index.tsx 6:0-24 Module not found: Error: Can't resolve './App' in 'C:\Users\username\Desktop\React\react-masterclass\src'

 

이런 에러가 뜬다면 찬찬히 읽어보다 보니

 

터미널이 웹팩 문제라고 하기도 하고 구글링 하더니 다들  web.config.js 를 건들라고 하더라고....? 그렇게 9시 넘게까지 웹팩을 찾아보다가 결국 이게 아니라 걍 내가 모종의 이유로 tsconfig.json 파일 생성이 안되어서 경로 설정일 때 타입스크립트를 제대로 컴파일을 못한 거였다!!!!!!!!!! 아이 젠장 내 2시간 30분...... ㅠㅠㅠㅠㅠ

역시 리액트는.....터미널 믿지 말자 믿을게 안됨. 그리고 난 아직 웹팩의 ㅇ도 모른단 말임.....흑흑 이것 때문에 내가 시러하는 eslint 도 깔았단 말이다.. 난 이제 협업 안할거야 린트 필요없다고!!!!!!

 

 

... 각설하고 강의와는 다르게 타입스크립트 설치부터 리액트에 어떻게 녹여내는지 부터 다시 시작해보자고!!

 

 

타입 스크립트 글로벌 설치

$ yarn global add typescript
$ npm install -g typescript

그런 다음

 

파일 최상단에 (packge.json 과 같은 경로) tsconfig.json를 생성해주자. 사실 자동으로 생성되어야 한다고 하는데 난 왜 안생긴건지는 아직 의문.....

 

새로 만든 프로젝트는 잘 들어가 있더군....흑.....흑 

 

쨋든 이 아이는 ts 파일들을 js 파일로 변환할 때 어떻게 변환할 것인지 세부 설정이 가능한 친구다.

이왕 이렇게 된거 기본 옵션이라도 어떤 옵션들인지 알아보자!

 

 

 

{   //compilerOptions 속성은 생략될 수 있으며 생략하면 컴파일러의 기본 값이 사용됨.
    "compilerOptions": {
      "target": "es5", //타입스크립트 파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분(기본값)
      // 커스텀하게 라이브러리를 쓰려고 할 때 lib 정의. 여기에 항목을 정하지 않았다면 target에서 지정한 기본값 버전에 따라 정의됨.
      "lib": [
        "dom",
        "dom.iterable",
        "esnext"
      ], 
      "allowJs": true, //true 라면 파일의 확장자가 .js, .jsx 사용 가능. 기본은 .ts, .tsx 및 .d.ts
      "skipLibCheck": true, // 선언 파일의 유형 검사를 건너뛰어 컴파일하는 동안 시간을 절약할 수 있음.
      "esModuleInterop": true, // ES6 모듈 사양을 준수하여 CommonJS 모듈을 가져올 수 있게 됨. (import 를 require로 사용할 수 있음. 아니면 import * as 로도 사용 가능.)
      "allowSyntheticDefaultImports": true, // default export 가 아닌 모듈에서도 default import 가 가능하게 할 지에 대한 여부. 타입 확인에 영향.
      "strict": true, //strict 모드 활성화 여부
      "forceConsistentCasingInFileNames": true, // 같은 파일에 대한 일관되지 않은 참조를 허용하지 않을 지에 대한 여부
      "noFallthroughCasesInSwitch": true, //switch 문에서 fallthrough 케이스에 대한 에러보고 여부
      "module": "esnext", //모듈을 위한 코드 생성 설정 (none, commonjs, amd, system, umd, es2015, es2020 or esnext)
      "moduleResolution": "node", // 모듈 해석 방법 설정: 'node' (Node.js) 혹은 'classic' (TypeScript pre-1.6).
      "resolveJsonModule": true, //ts 는 기본적으로 json 파일 확인을 지원하지 않음. json 파일을 가져오기 위한 설정
      "isolatedModules": true, // 각 파일을 분리된 모듈로 트랜스파일
      "noEmit": true, //결과 파일을 내보낼지에 대한 여부
      "jsx": "react-jsx" // JSX 코드 생성 설정 (preserve, react-native, 혹은 react-jsx)
    },
    "include": [
      "src"  // 프로그램에 포함할 파일 이름 또는 패턴의 배열을 지정. (src/**/*, tests/**/*) 예시처럼 해당 파일이 가진 디렉토리를 기준으로 확인됨.
    ]
  }

 

추가로, 만약 ES6부터 등장한 Promise등을 사용하려면, es2015.promise 라는 라이브러리를 lib에 추가해주어야 한다!

 

아니면 처음부터 target 을 ES6로 설정해주기도 가능하다.

 

 

참고했던 것들

https://www.typescriptlang.org/tsconfig#include

TSConfig Reference - Docs on every TSConfig option

사실 공식 문서가 제일 편하긴 하지만.. 영어기도 하고 아직 모르는 개념 ? 용어 ? 들이 많아서

 

https://geonlee.tistory.com/214

tsconfig.json 컴파일 옵션 정리

 

이 분의 블로그를 많이 참고했다..! 감사합니다 흑흑

 

 

---

끝으로 반성글...

이 때 거의 다 써놓고 tsconfig.json 주석을 달기 귀찮아서 미루고 미루다 이제 적는... 흑흑 사실 주석들이 무슨 의미가 있겠냐만은 내 블로그 고집이 자꾸 자꾸 업로드 하지말라고 하더라....... 몰라도 한 자 더 적고 자세히 적는게 블로그의 성질이 되어버린 ? 느낌인지라... 이제는 또 내가 파이썬으로 잠시 갈아타서 ㅎㅁㅎ 기초부터 차근 차근 쉽고 간결한 글들도 올려 볼려고 한다..!! 작은 글이라도 꾸준히 올리는게 더 좋지 않겠어 !??! 휴 더이상의 임시저장 글 또한 없으리라고 다짐하고 오늘의 포스팅 끝!!!!!!!