강의 정보
: 타입스크립트로 배우는 리액트(React.js)
섹션1. 준비하기
1) 기본 프로그램 설치( vscode, node.js )
2) 비주얼 스튜디오 코드 익스텐션 설치
- auto close tag
- auto rename tag
- autoprefixer
- code runner
- material icon theme
- material theme icons
- material theme
- css peak
- prettier ->코드 포맷팅
- html css support
- html to css autocompletion
- live server -> 로컬 서버 실행
- gitlens -> git 추적
3) Prettier 익스텐션 설정
- default formatter를 prettier로 변경
- format on save에 체크
4) ES7 + Snippets 추가 설치
- ES7 React/Redux/GraphQL/React-Native snippets 설치 -> react 코드 자동 생성
섹션 2.
[왜 CRA를 쓰지 않는가]
1) 패키지 관리의 부재 - 22년도 이후로 업데이트 X
2) 트렌드 못 따라감 - 프로젝트 생성 시 컴포넌트 파일의 기본을 .js 사용
3) 웹팩 기반이라 구동 속도 느림
=> Vite를 사용하자
- es modules를 활용한 효율적인 서버 - 빠르다
- .jsx/.tsx 확장자 기본 제공
[WebPack과 Vite]
등장 배경: es6부터 import와 export를 통해 파일을 여러개로 분리 -> 모듈 증가
-> 네트워크 요청 증가
웹팩
: 여러 모듈을 하나 or 소수의 파일로 합쳐주는 번들링 사용 -> 네트워크 요청 최소화
: HMR(Hot Module Replacement) - 코드 변경 사항을 전체 페이지에 새로고침 없이 반영해줌
: 근데 모든 파일을 번들링 해서 초기 로딩 속도 느림
: 조금만 수정해도 전체 파일 다시 번들링
=>레거시 지원이 필요하거나 빌드 설정이 복잡한 프로젝트에 사용
Vite
: 개발 환경에서 번들링 X, 필요한 모듈만 웹브라우저를 통해 로드
: 개발 시 esbuild로 빠른 트랜스컴파일 수행, 프로덕션 빌드 시 rollup을 사용해 최적화된 번들 생성
=> 모던 브라우저를 타겟으로 하거나 빠른 개발이 중요한 프로젝트에 사용
[왜 Vite인가]
Vite는 세가지 도구를 번갈아 가면서 사용함
- esbuild 개발 모드에서 주력으로 사용, '의존성 사전 번들링' 아주 빠름
- rollup 프로덕션 빌드 단계에서 사용, 트리쉐이킹(안 쓰는 코드 정리), 코드 스플리팅 성능 좋음
- swc(Speedy Web Compiler) rust로 작성되어 js기반 도구들보다 20배 빠름
=> 빠른 개발 속도와 최적화된 번들링
[Vite로 리액트 초기 애플리케이션 설정하기]
snippet 및 user snippet 활용하기
ES7 React/Redux/GraphQL/React-Native snippets에 내장된 snippet활용
snippet = 짧은 코드 조각을 의미 반복적으로 사용하는 코드를 미리 저장
(예시) rfc
export default function App () {
return (
<div>
</div>
);
}user snippet
setting->snippet->ts/react 검색->빈 json파일에->코드 작성
(rfc)
export default function App () {
return (
<>
<h1> App Component </h1>
</>
);
}[npm run dev]
package.json의 scripts에서 "dev"로 설정되어있는 vite 명령어가 실행
-> vite 개발 서버가 시작됨 -> index.html-> main.tsx-> App.tsx
->App.tsx파일이 id에 렌더링
[JSX란]
js에서 html과 유사한 문법을 작성할 수 있도록 js를 확장한 문법
jsx는 브라우저가 직접 실행할 수 없어서 트랜스파일러(ESBuild)를 통해 JS로 변환
[JSX의 특징]
[컴포넌트란]
컴포넌트: UI를 구성하는 독립적이고 재사용 가능한 작은 단위
