"리액트 설치"의 두 판 사이의 차이

DB CAFE

2020년 3월 17일 (화) 18:12 판

추천메뉴 바로가기

DBA { Oracle DBA 명령어 > DBA 초급 과정 > DBA 고급 과정 }
튜닝 { 오라클 튜닝 목록 }
모델링 { 데이터 모델링 가이드 }

1 리액트(react) 설치 및 설정[편집]

리액트란? 리액트 프로젝트시 컴포넌트를 파일로 분리해 저장하며 또 이 컴포넌트는 일반 JavaScript 가 아닌 JSX 라는 문법으로 저장하게됨 이 여러가지 파일을 한개로 결합기위해 Webpack 이라는 도구를 사용하고 JSX / JavaScript 등의 문법을 사용하기위해 Babel 이란 도구를 사용.

2 시작전 준비물[편집]

Node.js: Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 기반이기 때문에 설치 Yarn: npm 의 상위버전으로써 더나은 속도/캐싱을 위해 사용 코드 에디터: VSCode , Atom, WebStorm, SublimeText 윈도우의 경우, Git for Windows 를 설치해서 앞으로 터미널에 무엇을 입력하라는 내용이 있으면 함께 설치되는 Git Bash 를 사용

Node.js 설치

Window : https://nodejs.org/ko/download/

Mac :

1 2 curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash nvm install --lts Colored by Color Scripter cs

Yarn 설치

https://yarnpkg.com/en/docs/install#windows-stable

코드에디터 설치

SublimeText3 : https://www.sublimetext.com/3

create-react-app 설치/사용

설치

npm 설치

1 npm install -g create-react-app cs

yarn설치 1 yarn global add create-react-app cs

linux or Mac yarn 오류시 1 2 3 4

macOS:

echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bash_profile

Linux:

echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bashrc cs

사용

hello-react 생성 1 create-react-app hello-react cs

ㄴ hello-react 실행 1 2 cd hello-react yarn start cs

ㅇ여기까지 진행했다면 브라우저로 리액트 기본화면이 실행됨

@@ 7번째 줄: / 7번째 줄: @@
-== 시작전 준비물 ==ㅊㅇ
+== 시작전 준비물 ==
-Node.js: Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 기반이기 떄문에 설치
+Node.js: Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 기반이기 때문에 설치
 Yarn: npm 의 상위버전으로써 더나은 속도/캐싱을 위해 사용
 코드 에디터: VSCode , Atom, WebStorm, SublimeText