[나만의 친환경 PJ]TypeScript 관련 내용

lee·2024년 2월 16일

[프로젝트]나만의 친환경

나만의 친환경 프로젝트

목록 보기

4/5

1. TypeScript를 왜 사용했는가?

- JavaScript와 TypeScript 차이

많은 사람이 알듯이 JavaScript는 동적 타입 언어 로써 유연하게 사용이 가능하며 편리하다는 점이 있다. 하지만 에러를 런타임에서 내뱉는다. (자바스크립트는 인터프리티어 언어로 컴파일 과정 없이 한 줄씩 해석해서 바로 실행한다. => 런타임 에러)
TypeScript는 정적 타입 언어로 변수, 함수, 객체 등 타입을 지정해주어야 한다는 점이 있으며, 에러를 컴파일중 뱉어 디버깅이 쉽다.
(실시간으로 디버깅 가능)

- 컴파일 VS 런타임 이란?

타입스크립트 - 컴파일 : TypeScript는 결국 JavaScript코드로 변환이 된다. 이때 컴파일 과정을 거치는데 컴파일은 프로그램을 위해 작성한 소스코드를 다른 프로그램이나 기계가 처리하기 용이한 형태로 바꾸는 과정을 말한다.
자바스크립트 - 런타임 : 런타임이란 컴파일 과정을 마친 컴퓨터 프로그램이 실행되고 있는 환경 또는 동작되는 동안의 시간을 말한다. (JavaScript가 웹 브라우저에서 실행된다면 런타임 환경은 웹 브라우저가 된다. Node.js에서 동작한다면 런타임 환경은 Node.js이다.)
정리
- 컴파일 에러는 프로그램이 컴파일링 되는 과정에서 발생하게 되고 일반적으로 컴파일 에러 발생시 문제를 일으킨 소스코드라인을 지적해준다. => 그렇기에 디버깅이 쉬워진다.
  -신택스 오류
  -타입체크 오류
- 런타임 에러는 프로그램이 실행이 시작되고 예기치 못한 충돌혹은 에러로인해 실행중에 발생하는 형태의 오류이며, 정확한 부분을 찾기 어려워진다.
  -0나누기 오류
  -널(Null)참조 오류
  -메모리 부족 오류

정리

위에 정리한 내용을 보면 굳이 TypeScript를 사용안할 이유는 없는거 같다.
하지만 단점으로는 러닝커브가 좀 있다는 것과 처음에는 코드가 더 길어지기 때문에 타입스크립트가 오래 걸리는거 같지만 컴파일 도중 에러를 찾아주는 것만으로도 큰 프로젝트를 생각했을때는 생산성이 더 증가한다고 생각을 했다.
또한 리액트를 사용하는 프로젝트였기에 호환성또한 좋았기에 선택을 했다.

2. React + Typescript 셋팅하기

- 설치

나는 처음부터 CRA를 통해 타입스크립트를 설치하였다.

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

- tsconfig.json 설정

CRA를 통해 타입스크립트를 설치했다면 자동으로 깔려 있을것이다.
만약 없다하면 밑에 명렁어로 설치하면 된다.

npx tsc --init

{
    "compilerOptions": {
      "target": "ESNext", // JS파일을 어떤 버전으로 바꿀지 설정
      "lib": ["DOM", "DOM.Iterable", "ESNext"],// 몇 버전까지의 JS를 사용할지 작성.

      "module": "ESNext", // 파일간 import 문법을 구현할 때 어떤 문법을 쓸지
      "skipLibCheck": true,// 선언파일의 형식 검사를 스킵. -> 정확성은 떨어지지만 그만큼 시간을 절약.
      "types": ["vite/client"],
      /* Bundler mode */
      "moduleResolution": "bundler",
      "allowImportingTsExtensions": true,
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true,
      "jsx": "react-jsx", //tsx파일을 어떻게 jsx파일로 변환할 건지 결정.
  
      /* Linting */
      "strict": true,
      "noUnusedLocals": true,
      "noUnusedParameters": true,
      "noFallthroughCasesInSwitch": true
    },
    "include": [".eslintrc.cjs","src","src/image.d.ts"], // 컴파일대상 포함.
    "references": [{ "path": "./tsconfig.node.json" }]
  }