React 개발 환경 구축
node 버전 업데이트
-
버전 지정하여 설치
nvm install [version] -
가장 최신 버전 설치
nvm install node -
사용할 버전 지정
nvm use [version] -
디폴트 버전 지정
nvm alias default [version] -
버전 확인
node -v
yarn 설치
npm install -g yarn
npm과 yarn의 차이점?
npm과 yarn 둘 다 자바스크립트 런타임 환경인 node.js의 패키지 관리자이다.
(런타임 : 프로그래밍 언어가 구동되는 환경)
- npm
- Node package Manager의 약자
- node.js 설치할 때 자동 설치된다. - yarn
- npm과의 호환성이 좋으며 npm보다 설치 속도가 빠르며 안정성이 좋다.
React란?
A JavaScript library for building user interfaces
React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리이다.
“컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구축할 수 있다.
즉, virtual DOM을 사용하여 UI를 구축하는 SPA 기반 라이브러리이다.
SPA (Single Page Application)
한 개의 페이지로 이루어진 애플리케이션
(MPA(Multi Page Application)과 반대 개념)
- 서버에 리소스를 1회 요청
- 그 이후 데이터만 받아와서 기본 페이지를 수정해주는 방식
- 새로 로딩되지 않기 때문에 자연스러운 UX 구현 가능 - 한 페이지에 수정되는 방식이다보니 SEO(search Engine Organization)에 좋지 않다는 단점이 있다.
CRA (Create React App)
한 줄의 명령어 입력으로 React 프로젝트 개발에 필요한 요소를 자동으로 구성하는 방법
(필요한 요소: bable, webpack, eslint 등)
보일러 플레이트 방식 -> React 개발 시 똑같이 사용하는 것들을 한번에 설치!
yarn을 사용한 생성 및 실행
(1) 생성
yarn create react-app week-1
- npm으로 설치할 경우
npm create-react-app [프로젝트명]명령어를 사용하면 된다.
(2) 이동 및 실행
cd week-1
yarn start
CRA로 프로젝트를 생성하면 node_modules 폴더가 자동 생성된다.
이 용량이 매우 커서 압축해서 올려야 한다면 시간이 매우 오래 걸릴 수 있다.
그렇기 때문에 미리 node_modules 파일을 삭제하고 압축한 후
npm i 명령어를 실행하여 node_modules를 재생성해주는 것이 좋다.
절대 경로 만드는 법
jsconfig.json 파일 생성
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}- src 아래에 있는 파일을 절대경로로 사용할 수 있도록 한다.
이제 상대경로 ./App.css 가 아닌 절대경로 App.css로 불러올 수 있게 되었다.
