TIL.React Tool

React 프로젝트를 진행하기 위한 작업환경을 세팅에 필요한 Tool에 대해서 알아보려고 한다.

Node.js

자바스크립트를 실행할 수 있는 환경

• 어느 곳에서나 자바스크립트로 프로그래밍이 가능하게 하는 프레임워크
• 백엔드 서버를 만들 때도 쓰고, 서버사이드 렌더링 할 때도 이용하고, 스크립트를 만들때도 쓰인다.

npm (node package manager)

패키지(외부 라이브러리) 매니저

• node.js 를 설치하면 자동적으로 설치 되는 것인데, 패키지(외부 라이브러리)를 설치/관리할 수 있는 패키지 매니저이다.
• npm을 이용하면 간단하게 명령어 하나로 라이브를 설치할 수 있고, 버전을 업데이트하거나 삭제할 수 있다.
• npm을 이용하면 package.json이라는 파일이 생기는데, 그 안에는 우리가 쓰고 있는 외부 라이브러리들과 그들의 버전의 정보가 담겨있다.

npx

패키지 실행 도구

• 패키지(외부 라이브러리)를 실행할 수 있게 도와주는 도구

CRA (Creat-React-App)

리액트 프로젝트를 시작하는데 필요한 환경을 세팅 해주는 도구(toolchain)

• CRA는 react 배우기에 간편한 환경입니다. 이것은 개발 환경을 설정하고, 최신 자바스크립트를 사용하게 해주며, 좋은 개발 경험과 프로덕션 앱 최적화를 해줍니다. (출처: 리액트 공식페이지)
• CRA에는 바벨과 웹팩과 같이 리액프 애플리케이션 실행에 필요한 다양한 패키지가 포함되어 있으며, 테스트 시스템, ES6+ 문법, CSS 후처리 등의 개발 환경을 구축해 준다.

웹팩

소스코드 번들링 라이브러리

• 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리
• 의존성을 분석해 모듈을 번들(여러 개를 하나로 묶어주는)시켜주는 역할을 한다.

바벨

코드 컴파일러

• 타입스크립트나 JSX처럼 순수 자바스크립트가 아닌 것들을 변환해주거나 최신 자바스크립트 문법을 구형 브라우저에서도 이해할 수 있는 소스코드로 변환해주는 코드 컴파일러

Jest

유닛테스트를 할 수 있도록 해주는 프레임워크