goal
리액트에 앞서
Virual DOM . npm . web pack
1. Virual DOM
: 다음에 나타날 화면의 일부노드를 미리 그려놓고, 변경된 화면의 일부노드만을 수정하는 가상화면 기술이다.
2. npm (node package manager)
: 개발에 필요한 라이브러리를 설치 및 삭제하는 등의 관리를 해주는 프로그램이다.
- npm 공홈은 👉️여기를 참고 (en)
- 자바스크립트 라이브러리는 npm으로 관리한다.
- 라이브러리를 설치하면,
node_modules디렉토리에 라이브러리를 저장하고,package.json디렉토리에 설치된 라이브러리의 정보 및 버전을 기록한다. (저장하는 곳과 기록하는 곳을 따로 분리한 이유는?node_modules는 용량이 매우 커질 수 있기 때문에, 여러 개발자들의 협업시package.json의 목록만으로 본인의 환경에서 라이브러리를 설치하면 되기 때문이기도 하다.^^) - yarn과 npm의 동작방식은 비슷하다.
2-1. yarn
- yarn 공홈은 👉️여기를 참고 (en)
- React 생태계에서는 npm 외에도 yarn 이라는 패키지 매니저를 종종 사용한다.
- yarn 역시 npm과 같이 의존성(dependency)을 package.json에 추가한다.
- npm과의 차이점은 설치 당시에 만들어지는 의존성 트리 정보인 package-lock.json 대신, yarn.lock을 사용한다는 점과 명령어에 작은 차이점이 있다.
| action | npm | yarn |
|---|---|---|
| 모든 dependency 설치 | npm install | yarn |
| 특정 dependency 설치 | npm install [package] | yarn add [package] |
| 특정 dependency 삭제 | npm uninstall [package] | yarn remove [package] |
3. web pack
: 프로젝트에 사용된 파일을 분석하여, 기존의 웹 문서 파일로 변환하는 도구이다.
- 웹팩이 필요한 이유는?
프레임워크가 기존의 js, css등의 파일을 사용하지 않기 때문이다. 웹 브라우저가 해석하지 못하는 파일을 해석해주는 역할을 한다. /
파일들을 적절한 크기로 /
간단한 노드 기반의 웹 서버를 구동 / 등
리액트 개발환경 설치
npm 설치 -> node.js 설치 -> create-react-app 설치
create-react-app
- 리액트 프로젝트에 필요한 패키지들을 묶어서 리액트 앱을 생성해주는 도구이다.
- 설치는 👉️여기를 참고 (공홈 en)
- yarn 으로는
설치 :npm install --g yarn
버전확인 :yarn --version
create-react-app 설치 :yarn global add create-react-app npx create-react-app 설정할앱네임
cd 설정할앱네임
npm start
참고
reactjs code snippet (in vscode)
rcc: 기본 리액트 컴포넌트 코드 생성rccp: 리액트 컴포넌트를 프로퍼티 타입과 함께 생성rcfc: 리액트 컴포넌트를 생명주기 함수와 함께 생성rpc: 리액트 pure 컴포넌트를 생성rsc: 함수형 컴포넌트를 생성rscp: 함수형 컴포넌트를 프로퍼티 타입과 함께 생성
delilah's journey