[TIL] 0213

MonthSub Refactoring - TS 환경 세팅

• 라이브러리 설치

  yarn add typescript @types/node @types/react @types/react-dom @types/jest
  yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

• eslint 설정
• tsconfig.json 설정
• tsconfig.path.json 설정
  • alias경로 설정
  • tsconfig.json에 path를 작성하면 yarn start시 초기화되기 때문에 따로 path파일을 만든 후 craco에 등록해준다

• craco.config.js 설정

  • alias경로를 tsconfig.path.json로 적용하도록 설정

  		yarn add -D craco-alias

• @types react-router-dom 설치

  • 기존의 react-router-dom사용 시 오류

    yarn add @types/react-router-dom

• storybook.main.js 설정

• 오류 리스트

  • airbnb의 버전 관련해서 컴포넌트 작성 시 화살표함수를 쓰는 것에 대해 오류를 잡고있다(rules적용)
  • 그 외 tsLint가 기존 코드에 대해 오류를 잡고 있다

  ---

TypeScript Project

계산기 만들기 프로젝트 구현 (1)

• 전 것들 보다 복잡해서 컴포넌트를 나눴다

          Calculator
          /          \
     Input        ButtonContainer 
                        \
                      Button   

• 자식 컴포넌트들을 연결할 때의 문제점
  • innerHtml의 문제점
    • 부모 노드에 자식을 2개 이상 연결할 수 없다
    • appendChild를 이용해야 함
  • appendChild의 문제점
    • 매번 돔을 만들어줘야하는데 속성을 일일이 설정해야해서 번거롭다