3.3 기본 툴 설명
node
브라우저 외부에서 자바스크립트를 실행할 수 있게 해주는 자바스크립트 런타임 환경
server side rendering
command line tools
npm(Node Package Manager)
- node.js 설치 시 자동으로 생성
- npm 플롯폼 자체
외부 라이브러리를 쉽게 설치하고 버전을 관리할 수 있게 해준다.
package.json파일을 프로젝트 루트에 만들어준다.
npx
npm설치할때 설치됨
패키지들을 개별적으로 실행 할 수 있게 도와주는 툴
npx 명령어로 자동으로 라이브러리 실행할 수 있다.
yarn
npm의 단점을 보완한 패키지 매니저
- 페이스북에서 개발
- npm과 호환성이 좋다.
- 속도, 안정성, 보안성에서 npm보다 좋다.
npm 단점
라이브러리를 하나씩 순차적으로 설치해 속도가 떨어진다.
yarn은 라이브러리를 병렬적으로 동시 설치하므로 속도가 빠르고 보안, 일관성이 좋다.
3.6 프로젝트 구조 살펴보기
.yarn : yarn 실행하는데 필요한 파일
node_modules
.pnp.cjs :pulg and plugin
index.html :seo관련, head, title
manifest.json
robots.txt: 크롤링하는 로봇들에게 사이트의 정보를 명시
public > 정적페이지를 위한 것
src > 동적 코드들
reportWebVitals.js
setupTest : unit test
.gitignore : 빌드된 파일들..패키지
.package.json: 모든 라이브러리 정보(dependnecy, 명령어 정보, eslintconfig, browserlist(브라우저 지원하기 위한 자바스크립트를 어디까지 지원해야하나)
3.7 숨겨진 툴들 살펴보기
package.json에 명시된 eject로
특수상황에 맞게 한번 eject하면 복구할 수 없다.
babel, webpack?
eject 좀더 수정해야할듯
3.8 중요한 툴들 설명
babel
javascript transcompiler
사용자가 예전 브라우저나 최신 자바스크립트버전을 지원하지 않는 브라우저를 사용할 경우,
프로젝트를 빌드할때 사용자에게 배포전에 사용자에 맞게 예전 버전으로 배포해주는 것
사용자의 브라우저 버전을 걱정하지 않아도됨
ts로 => js(타입스크립트도 에전js로 변환가능하다)
webpack
우리의 코드를 잘 번들링(포장해서) 사용자에게 배포할수 있게 도와줌
결국 사용자에게 가야하는 html, js, css,png...등을 번들링해주는 것
create reate app쓰면 잘 되어있다.
코드 압축, 코멘트 빼서 사용자에게 전달
css이름 축약...등등
ESLint
코드 올바르게 작성하고 있는지 체크
Jest
유닛테스트 작성해서 사용
강의 나중에 참고하기!
3.9 브라우저 준비 및 익스텐션
크롬 익스텐션
- React Developer Tools : 컴포넌트들 확인, props, value 디버깅도 가능
유용한 VS Code 익스텐션
- Material Theme: 현재 사용하고 있는 테마(dark)
- Material Icon Theme: 현재 사용하고 있는 아이콘들
- Auto Import: 자동으로 import 해줌
- Prettier - Code formatter: 코드를 이쁘게 포맷
- CSS Modules: 나중에 PostCSS 쓸때 유용함
기타 HTML & CSS 관련 익스텐션
- IntelliSense for CSS class names in HTML
- HTML to CSS autocompletion
- HTML CSS Support
- CSS Peek
- Auto Rename Tag
