[React]-꼭 알아야 할 리액트 툴과 extension!

Babel

바벨(Babel)은 자바스크립트 transcompiler임!
유저가 최신 자스 문법을 지원하지 않는 브라우저를 사용할 때, 리액트로 개발할 때 최신 문법을 사용해도 이 바벨을 이용해서 플젝을 빌드할 때 사용자에게 배포하기 전에 최신 문법을 예전 버전으로 변환해주는 컴파일러!

Webpack

웹팩(Webpack)은 우리의 코드를 잘 포장(번들링)해서 사용자에게 배포할 수 있게 도와주는 모듈 번들러임!

Eslint

코드를 올바르게 잘 작성하고 있는지 체크해주는 툴!

Jest

작성한 코드가 원하는대로 동작하는지 테스팅을 할 수 있게 해주는 프레임워크!

PostCSS, tailwind

크롬 익스텐션에서 React Developer Tool을 꼭 설치하자!

유용한 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