TIL # 57 < Typescript (3) 리액트 -> 타입스크립트 리팩토링>

  개발/공부 진행 및 완료상황, 무엇을 더 하면 좋을지

 

Typescript 공부중...!

 

  업무, 개발 중 발생한 이슈/고민 또는 이를 해결한 내용

🔥Error

Module not found: Error: Can't resolve './App'

📌해결

구글링해본결과 대부분 node_modules를 삭제하고 npm install 하라는 내용이라서 해봤는데 해결이 안됬다.

TypescriptReact를 사용해서 그런지 다른문제인걸로...

확인해 본 결과  최상위 폴더에 tsconfig.json 와 webpack.config.js 이 없었다. 왜 없는거지...?

 

 

💡tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "lib": ["es6", "dom"],
    "rootDir": "src",
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es5",
    "sourceMap": true,
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  },
  "include": [
    "./src"
  ],
  "exclude": [
    "node_modules",
    "build"
  ]
}

 

💡webpack.config.js

module.exports = {
  entry: {
    dev: "./src/index.tsx",
  },
  output: {
    filename: "./build/index.js",
  },
  devtool: "source-map",
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
  },
  module: {
    loaders: [
      // Typescript
      { test: /\.tsx?$/, loader: "ts-loader" },
    ],
  },
};

을 추가해주면 간단히 해결된다! 그뒤에 오류들은 할말하않..

 

 

  오늘 새로 배운 내용

 

📖 Typescript 내배캠강의 1~2강

 

npm init -y (package.json 생성- 프로젝트를 초기설정하겠다는 의미)
npm install typescript (node_modules 생성)

npx tsc --init (tsconfig.json)

(터미널에서 ll치면 폴더를 진한글자로 볼수있음 -> 폴더들어가서 touch로 파일생성하는 습관들이기)
(터미널에서 폴더생성 mkdir [폴더명])

npx tsc (ts파일을 js파일로 변환 - 컴파일)

node 파일명.js (실행)

### Module: import 문법을 어떻게 변환할까?

`commonjs`는 `require` 문법

`es2015` , `esnext` 는 `import` 문법

ts를 브라우저가 이해하지 못하기 때문에 js로 컴파일 하는 과정이 필요하다!!

 

📖 리액트 -> 타입스크립트

 

타입스크립트를 초기부터 적용하는게 좋다
but 리액트로 하다가 적용하는경우
npm install typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom
js파일 -> .ts
jsx파일 -> .tsx로 변경

uuid 사용시 npm install @types/uuid도 해줘야함
styled componets 사용시 npm i -D @types/styled-components 으로 타입정의 받아야함

 

 

참고

 

redux

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

 

react-router-dom

npm i(nstall) react-router-dom 만 깔면된다! (@types X)

 

toolkit

 

npm i(nstall) @reduxjs/toolkit

 

styled-components

 

npm i styled-components

 

npm i(nstall) --save @types/styled-components

 

react-query

 

npm i(nstall) react-query

 

firebase

 

npm i(nstall) firebase

 

npm insall @types/firebase

 

 

  참고할 만한 레퍼런스들

 

리액트 -> 타입스크립트 https://www.youtube.com/watch?v=g-kauNOTVRY&t=607s

 

타입스크립트 https://nykim.work/108

 

 

  회고

 

- 오늘은 새벽 2시까지 공부한 보람이 있는날이다. todo 를 typescript로 리팩토링 하는 것도 끝냈고, react query에 대해서 많이 알수 있었다!

 

  To-Do List

 

- 타입스크립트 팀프로젝트 계획세우고 S.A. 작성하기