[React] 리액트 설치

설치에 앞서, 웹팩과 바벨에 대해 R아보자

💡 Webpack

오픈 소스 자바스크립트 모듈 번들러로서 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리

웹팩 장점

1. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있어, 로딩에 대한 네트워크 비용을 줄일 수 있다.
2. 모듈 단위로 개발이 가능해 가독성과 유지보수가 쉽다.

💡 Babel

최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있게 변환 시켜주는 라이브러리

리액트를 이용하면 웹팩과 바벨을 설치하지 않았어도 알아서 설치해준다.

리액트 설치

앗! 리액트 설치! 라면끓이기보다 쉽다!

1. 폴더를 만든다(대문자 사용불가)
2. 터미널을 연다
3. 하단의 명령어를 따라친다

// 현재 디렉토리 안에 리액트 설치
npx create-react-app ./

끗
참쉽죠?

Q. 그럼 npx는 모죠

npx는 노드 패키지 실행을 도와주는 도구임
그래서 npm 레지스트리에 있는 패키지를 뒤져서 create-react-app 패키지를 찾아내 폴더에 실행해서 설치해주는거임