[TIL] 0213

yoon Y·2022년 2월 14일
0

2022 - TIL

목록 보기
38/109

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의 문제점
      • 매번 돔을 만들어줘야하는데 속성을 일일이 설정해야해서 번거롭다
profile
#프론트엔드

0개의 댓글