공부 목표
React + TypeScript를 능숙하게 사용하는 방법을 알아보자
읽고 있는 글
Ultimate React Component Patterns with Typescript 2.8
https://levelup.gitconnected.com/ultimate-react-component-patterns-with-typescript-2-8-82990c516935
tslib 가 무엇일까?
tslib는 TypeScript 헬퍼 함수들을 모두 포함하고 있는 라이브러리
helper function 은 무엇일까?
A helper function is a function that performs part of the computation of another function.
다른 함수의 부분적인 연산을 수행하는 함수
복잡한 함수의 부분적인 기능을 수행하는 함수를 작성하여 코드의 가독성을 높일 수 있고 재사용 할 수도 있다
@types 는 무엇일까?
npm 모듈 중 @types/xxx 형태의 모듈은 타입 선언만 포함하는 모듈, 패키지
만약 사용하려는 자바스크립트 모듈에 타입이 정의되어있지 않다면
npm install -D @types/<module_name>위 명령어로 사용하는 노드 모듈의 타입 정보가 담긴 패키지를 dev-dependencies에 추가해주어야 타입스크립트 환경에서 사용 할 수 있다.
@types/ 로 시작하는 패키지는 Definitely Typed repository에 작성된 타입 정보이다
Definitely Typed 는 무엇일까?
수 많은 자바스크립트 라이브러리들의 타입 정보를 제공하는 repository,
이 레포에 자바스크립트 라이브러리 타입 정보를 제공하거나 수정하는 것으로 오픈소스 참여하기 좋다고 한다
package.json의 dev-dependencies는?
npm 모듈 설치 시 -D 옵션을 주면 package.json의 dev-dependencies에 기록된다
프로젝트 빌드 타임에 필요한 모듈들이지만 런타임에는 쓰이지 않는 모듈들은 dev-dependencies에 포함시킨다
@next?
블로그 글에서 타입스크립트를 설치 할 때 사용한 명령어
yarn add -D typescript@next
<모듈이름>@<모듈버전> 으로 알고있는데 @next는 무엇일까? 숫자가 아닌 next이다
@next는 가장 최신 버전을 뜻한다 안정적인 버전은 아니다 (안쓸래~)
타입스크립트 환경 설치
yarn add -D typescript
yarn add tslib
typescript, tslib를 설치한다
typescript는 빌드타임에만 사용되고 tslib는 런타임에도 사용되나보다
느낀점
간단한 것을 왜라는 질문을 통해 복잡하게 알아보았다 ㅎㅎ
조금은 집요하게 알아보고 이해했을 때 진짜 내 것이 되는 느낌이 든다
블로그 글 작성하는 것이 큰 도움이 된다는 것을 알았다 블로그 한번 시작해봐야겠다
찾은 유용한 링크들
https://radlohead.gitbook.io/typescript-deep-dive/styleguide
https://radlohead.gitbook.io/typescript-deep-dive/tsx/react
타입스크립트 스타일 가이드와 JSX 관련 글을 위주로 읽어봐야겠다
https://fettblog.eu/typescript-react-why-i-dont-use-react-fc/
왜 글쓴이는 React.FC를 사용하지 않는지 알아보기
https://levelup.gitconnected.com/ultimate-react-component-patterns-with-typescript-2-8-82990c516935
타입스크립트 리액트 패턴 공부
다음 공부
계속해서 Ultimate React Component Patterns with Typescript 2.8 글 읽기
함수형 컴포넌트 타입 작성에 관련된 도움이 될 만한 포스트 작성해보기
