리엑트 관련 툴
Create React APP
많은 리엑트 개발자들이 공통적으로 사용하는 환경을 한 번에 세팅해서 사용할 수 있도록 도와주는 (페이스북에서 만든)스크립트 툴이다.
nodeJS
노드js는 자바스크립트를 실행할 수 있는 환경이다. 어느 곳에서나 자바스크립트로 프로그래밍이 가능하게 하는 프레임워크이다.
예전에는 자바스크립트가 브라우저, 웹어플리케이션에서만 실행할 수 있는 언어였는데 노드JS 덕분에 웹브라우저 밖에서도, 즉 운영체제 위에서 실행할 수 있다.
백엔드 서버를 만들때, 서버사이드 렌더링을 할 때도 이용한다.
노드를 설치하면 npm도 설치가 된다.
npm(node package manager)
npm은 패키지 매니저이다.
외부 라이브러리를 일일히 다운받아서 프로젝트에 넣을 필요 없이 간단하게 라이브러리를 설치하고 버전을 관리하고 삭제할 수 있다.
npm을 이용하면 프로젝트에 package.json이라는 파일이 생성된다. 이 파일 안에 외부 라이브러리들과 그것들의 버전 등의 정보들이 있다.
npx(node package execute)는 무엇일까?
외부 라이브러리르 설치하는 것이 아니라 실행할 수 있게 도와주는 툴이다.
npm은 외부 라이브러리를 설치하고 업데이트 하는것만 가능하다.
Yarn
페이스북에서 만들어진 패키지 매니저이다. npm보다 보안, 버전관리, 성능이 좋다.
yarn도 npm위에서 동작하는 툴이기 때문에 package.json이라는 파일로 라이브러리들을 관리할 수 있다.
바벨
ECMA2015+(이후) 버전의 자바스크립트 문법을 예전 브라우저도 이해할 수 있는 예전 버전의 자바스크립트 코드로 변환해주는 툴이다.
또한 타입스크립트, jsx와 같은 순수 자바스크립트가 아닌 것들도 브라우저가 이해할 수 있는 자바스크립트로 변환해주며 어느정도의 버전까지 변환 할 건지와 같은 세부적인 설정도 가능하다.
웹팩
소스코드나 여러 리소스들을 한번에 묶어서 번들 단위로 사용자에게 제공할 수 있도록 제공하는 툴이다. 즉 사용자가 페이지를 열 때 자바스크립트의 기능과 어떤 이미지가 필요하다면 그것들을 번들링해서 사용자에게 보내준다.
또한 소스코드를 줄여주고 긴변수나 함수의 이름을 외부로 노출되지 않게 이상하게 보여지도록 하는 기능도 있다.
정리하자면 웹팩은 프로젝트의 소스코드와 리소스등을 사용자게에 간편하게 전달할 수 있도록 모듈을 번들링 하는 툴이다.
ESLint
즉각적으로 코드에 잘못된 점이 있다면 경고사인을 보여준다.
Jest & Cypress
유닛테스트를 할 수 있게 도와주는 테스팅 프레임워크이다.
PostCSS
css전처리기 중에 하나이다. less나 sass와 같이 그것들이 제공하는것에 맞게 css를 작성하면 브라우저가 이해할수 있는 css로 변화해준다.
sass는 정해진 것들만 할 수 있는 반면에 postcss는 굉장히 다양한 플러그인이 있어서 현업에서 많이 사용하는 강력한 도구이다.
