"리액트 설치"의 두 판 사이의 차이
DB CAFE
(→리액트(react) 설치 및 설정) |
|||
| (같은 사용자의 중간 판 3개는 보이지 않습니다) | |||
| 1번째 줄: | 1번째 줄: | ||
| − | + | = 리액트(react) 설치 및 설정 = | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| + | == 리액트란? == | ||
| + | # 리액트 프로젝트시 컴포넌트를 파일로 분리해 저장하며 또 이 컴포넌트는 일반 JavaScript 가 아닌 JSX 라는 문법으로 저장하게됨 | ||
| + | # 이 여러가지 파일을 한개로 결합기위해 Webpack 이라는 도구를 사용하고 JSX / JavaScript 등의 문법을 사용하기위해 Babel 이란 도구를 사용. | ||
== 시작전 준비물 == | == 시작전 준비물 == | ||
| + | # Node.js: Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 기반이기 때문에 설치 | ||
| + | # Yarn: npm 의 상위버전으로써 더나은 속도/캐싱을 위해 사용 | ||
| + | # 코드 에디터: VSCode , Atom, WebStorm, SublimeText | ||
| + | # 윈도우의 경우, Git for Windows 를 설치해서 앞으로 터미널에 무엇을 입력하라는 내용이 있으면 함께 설치되는 Git Bash 를 사용 | ||
| − | + | === Node.js 설치 === | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | Node.js 설치 | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | ==== Window ==== | |
| − | + | https://nodejs.org/ko/download/ | |
| + | ==== Mac ==== | ||
| + | <source lang=shell> | ||
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash | curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash | ||
nvm install --lts | nvm install --lts | ||
| − | + | </source> | |
| − | |||
| − | |||
| − | |||
| − | |||
| + | ===== Yarn 설치 ===== | ||
| + | <source lang=shell> | ||
https://yarnpkg.com/en/docs/install#windows-stable | https://yarnpkg.com/en/docs/install#windows-stable | ||
| + | </source> | ||
| − | + | ==== 코드에디터 설치 ==== | |
| − | 코드에디터 설치 | + | <source lang=shell> |
| − | |||
SublimeText3 : https://www.sublimetext.com/3 | SublimeText3 : https://www.sublimetext.com/3 | ||
| + | </source> | ||
| − | + | === create-react-app 설치/사용 === | |
| − | + | ==== 설치 ==== | |
| − | + | ==== npm 설치 ==== | |
| − | + | <source lang=shell> | |
| − | |||
| − | |||
| − | create-react-app 설치/사용 | ||
| − | |||
| − | |||
| − | |||
| − | 설치 | ||
| − | |||
| − | npm 설치 | ||
| − | |||
| − | |||
npm install -g create-react-app | npm install -g create-react-app | ||
| − | + | </source> | |
| − | + | ===== yarn설치 ===== | |
| − | + | <source lang=shell> | |
| − | yarn설치 | ||
| − | |||
yarn global add create-react-app | yarn global add create-react-app | ||
| − | + | </source> | |
| − | linux or Mac yarn 오류시 | + | ===== linux or Mac yarn 오류시 ==== |
| − | |||
| − | |||
| − | |||
| − | |||
# macOS: | # macOS: | ||
| + | <source lang=shell> | ||
echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bash_profile | echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bash_profile | ||
| + | </source> | ||
# Linux: | # Linux: | ||
| + | <source lang=shell> | ||
echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bashrc | echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bashrc | ||
| − | + | </source> | |
| − | 사용 | + | === 사용 === |
| − | hello-react 생성 | + | ==== hello-react 생성 ==== |
| − | + | <source lang=shell> | |
create-react-app hello-react | create-react-app hello-react | ||
| − | + | </source> | |
| − | + | ==== hello-react 실행 ==== | |
| − | + | <source lang=shell> | |
| − | hello-react 실행 | ||
| − | |||
| − | |||
cd hello-react | cd hello-react | ||
yarn start | yarn start | ||
| − | + | </source> | |
| − | + | * 여기까지 진행했다면 브라우저로 리액트 기본화면이 실행됨 | |
| − | |||
| + | === 리엑트 앱 개발 === | ||
| + | # TODO APP 만들기 | ||
| + | #: https://dev.to/joelynn/build-a-react-crud-todo-app-add-read-todos-1l8a | ||
[[category:react]] | [[category:react]] | ||
2021년 5월 27일 (목) 13:55 기준 최신판
thumb_up 추천메뉴 바로가기
- DBA { Oracle DBA 명령어 > DBA 초급 과정 > DBA 고급 과정 }
- 튜닝 { 오라클 튜닝 목록 }
- 모델링 { 데이터 모델링 가이드 }
목차
1 리액트(react) 설치 및 설정[편집]
1.1 리액트란?[편집]
- 리액트 프로젝트시 컴포넌트를 파일로 분리해 저장하며 또 이 컴포넌트는 일반 JavaScript 가 아닌 JSX 라는 문법으로 저장하게됨
- 이 여러가지 파일을 한개로 결합기위해 Webpack 이라는 도구를 사용하고 JSX / JavaScript 등의 문법을 사용하기위해 Babel 이란 도구를 사용.
1.2 시작전 준비물[편집]
- Node.js: Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 기반이기 때문에 설치
- Yarn: npm 의 상위버전으로써 더나은 속도/캐싱을 위해 사용
- 코드 에디터: VSCode , Atom, WebStorm, SublimeText
- 윈도우의 경우, Git for Windows 를 설치해서 앞으로 터미널에 무엇을 입력하라는 내용이 있으면 함께 설치되는 Git Bash 를 사용
1.2.1 Node.js 설치[편집]
1.2.1.1 Window[편집]
1.2.1.2 Mac[편집]
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
nvm install --lts1.2.1.3 코드에디터 설치[편집]
SublimeText3 : https://www.sublimetext.com/31.2.2 create-react-app 설치/사용[편집]
1.2.2.1 설치[편집]
1.2.2.2 npm 설치[편집]
npm install -g create-react-app1.2.2.2.1 yarn설치[편집]
yarn global add create-react-app1.2.2.3 = linux or Mac yarn 오류시[편집]
- macOS:
echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bash_profile- Linux:
echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bashrc