리액트 시작하기(1)

리액트란?

프론트엔드 라이브러리 중 하나

 

리액트의 장점 : 화면 출력에 특화된 프레임워크

1. 컴포넌트(component)로 효율적으로 화면을 구성

2. 가상화면(Virtual DOM) 기술을 통해 다음에 나타날 화면의 일부(노드)를 미리 그려놓고, 변경된 화면의 일부(노드)만 수정 가능

 

노드 패키지 매니저란? -> npm

npm : node_modules 폴더에 라이브러리를 내려받아 저장하고 package.json 이라는 파일에 설치된 라이브러리의 정보를 적어 저장

         : 실제 라이브러리와 라이브러리 명세 파일을 따로 관리

웹팩이란?

프로젝트에 사용된 파일을 분석하여 기존 웹 문서 파일로 변환하는 도구

 

---

리액트 개발환경 설치하기

1. NVM 설치하기

주소에 접속한 후 nvm-setup.zip을 내려받아 압축 해제 후 설치 파일 실행

https://github.com/coreybutler/nvm-windows/releases

2. NVM 버전 확인하기

nvm -v

3. NVM으로 노드제이에스 설치하기

nvm install 8.10.0

4. NVM이 설치한 노드제이에스 사용 설정하기

nvm use 8.10.0
node -v
npm -v

---

yarn과 create-react-app 설치하기

1. yarn 설치하기

npm install -g yarn

2. create-react-app 설치하기

(create-react-app : 리액트 프로젝트에 필요한 패키지들을 묶어 리액트 앱을 생성해주는 도구)

yarn global add create-react-app

3. carefully라는 이름의 리액트 앱 생성하기

create-react-app carefully

4. 리액트 앱 구동하기

cd carefully
yarn start

리액트 앱을 구동한 모습

5. 루트 폴더로 이동 후 명령어 yarn을 입력하면 package.json에 적힌 라이브러리가 모두 설치됨.

yarn

6. 비주얼스튜디오코드에서 Reactjs code snippets 플러그인 설치하기

(리액트에서 자주 사용하는 코드 뭉치를 자동으로 완성해주는 플러그인)

키워드	설명
RCC	기본 리액트 컴포넌트 코드 생성
RCCP	리액트 컴포넌트를 프로퍼티 타입과 함께 생성
RCFC	리액트 컴포넌트를 생명주기 함수와 함께 생성
RPC	리액트 퓨어 컴포넌트 생성
RSC	함수형 컴포넌트 생성
RSCP	함수형 컴포넌트를 프로퍼티 타입과 함께 생성

 

7. 비주얼스튜디오코드에서 Prettier 플러그인 설치

(코드의 줄바꿈 등의 스타일을 자동으로 변환해주는 Prettier-Code formatter)