✅ 간략한 정의 : 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리
Web
이 초기에는 정적인 웹으로 사용되다가 시간이 지나면서 점점 HTML
, CSS
, JavaScript
가 복잡해지고 양이 방대해지면서 동적인 웹으로 변화되어왔다.
HTML
, CSS
JavaScript
, jQuery
(DOM을 통해서 직접 지정을 해줘야 했고, Web에 많은 기능들이 추가되면서 점점 유지보수와 가독성이 어려워짐)React
, Angular
, View
같은 프론트엔드 프레임워크 & 라이브러리 출시프론트엔드 프레임워크 및 라이브러리를 사용하는 이유는 아래와 같다.
Angular,View
는 Model-View-Controller Architecture이고React
는 UI적인(View) 부분에서만 컨트롤할 수 있는데 왜 React
를 더 많이 사용할까?
Third-party앱이 다양해서 내 입맛에 맞게 사용할 수 있고, 무엇보다 React
생태계가 활성화되어 있어 전 세계적으로 사용자가 많다. (Facebook에서 만든 거라 더더욱 그런 것 같다.)
Node.js
는 자바스크립트가 브라우저 밖에서도 동작하게 하는 환경을 구축하기 위해 깔아줘야 한다.
(Project 개발 환경을 구축하는 주요 도구[CRA, Babel, Webpack 등]들이 Node.js 기반으로 되어 있다.)
npm
이 저절로 같이 설치된다.
CRA
는 리액트 프로젝트를 시작하기 앞서 필수 개발 환경을 자동으로 셋팅해주는 도구다.
React
는 UI 기능만 제공하기 때문에 개발자가 스스로 본인에게 필요한 개발 환경을 직접 셋팅해야하는데 초기에 일일히 설정하기에 어려움이 있다. 이 문제를 해결해주기 위해 필요한 개발 환경을 CRA를 통해 패키지로 다운받을 수 있는 것이다.React
를 사용할 폴더로 경로 이동을 한 상태에서 아래 코드를 터미널에 입력한다.npx create-react-app folderName //입력하면 다운로드가 시작된다
cd folderName //my-app 프로젝트 진입
npm start //로컬 서버 작동되서 브라우저로 창이 뜬다
설치를 완료하고 나면 설치한 디렉토리에 아래 폴더 및 파일들이 생길 것이다.
- node_modules : 사용할 수 있는 라이브러리 패키지가 들어있는 폴더
(CRA를 구성하는 모든 패키지 소스 코드가 존재)
- .gitignore : 이 파일에 있는 목록은 깃허브에
push
해서 올릴 때 올리지 않을 폴더와 파일 리스트
- package.json : 만들고 있는 어플리케이션에 대한 정보가 기록된 파일
(CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록됨)
npm install (터미널 입력) : 현재 만들고 있는 어플리케이션(package.json)을 다운받을 수 있음
개발자A
가 초기 세팅, React, React Router, Sass 등 설치하고 깃허브에 push
(node_modules, package.json)node_modules
는 용량이 크고 모두 사용되는 것이 아니기 때문에 .gitignore
파일에 넣어서 관리 (어차피 필요한 라이브러리/패키지는 package.json
에 있음)개발자B
는 개발자A
가 깃허브에 올린 작업물을 git clone
을 통해 로컬 저장소에 다운로드하여 npm install
을 통해 package.json
에 있는 라이브러리/패키지를 설치