일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- 카카오홈페이지클론
- solidity
- ERC-721
- 정보처리기사실기요약
- 노마드코더
- React
- npm
- ERC721
- node.js
- ETH
- 콜백함수this
- 솔리디티
- 2021정보처리기사실기
- 블록체인
- Klaytn
- 비트코인
- it5
- 페이지클론
- 정보처리기사
- Non-Blocking
- web3.js
- github
- git
- blockchain
- it5분잡학사전
- 이더리움
- 정보처리기사실기
- 클레이튼
- 카카오페이지클론
- 노개북
- Today
- Total
Be lazy, Be crazy
[React] 빠르게 React 개발환경 셋팅하기 (2021 버전) 본문
리액트 개발환경을 빠르게 셋팅 해봅시다
셋팅을 위해 필요한 건, 3가지
1. Node.js 최신버전
2. VSCode
3. create-react-app 라이브러리로 프로젝트 생성하기
순서대로 해봅시다
1. Node.js
먼저 Node.js는 홈페이지가서 가장 최신 버전(오른쪽꺼)으로 설치합니다
맥북 M1은 가끔가다 라이브러리 이용에 어려움이 있을 수 있으니 LTS버전을 추천합니다
2. VSCode
운영체제에 맞는걸루 깔아주세요
3. create-react-app 라이브러리로 프로젝트 생성하기
작업할 폴더 하나 생성해서 VSCode 에서 열어주고
VSCode 터미널 열기
(상단 탭 메뉴에 Terminal - New Terminal
또는 단축키 ctrl+shift+`)
npx create-react-app 원하는폴더명
터미널에 입력 후 엔터
(프로젝트 진행하실거면 프로젝트명을 폴더명으로 하면 될 것 같습니다)
설치가 잘 되었다면 맨처음 생성한 폴더에
방금 이름 지어준 하위폴더가 하나 생겼을텐데
VSCode에서 새로 생성된 폴더를 다시 오픈합니다 (중요)
(꿀팁)
터미널에서 `cd 폴더명` 으로 생성한 폴더로 이동한 후 `code .`를 작성하면
해당 폴더를 VSCode로 열 수 있음
(안될 경우 cmd + shift + p > Shell Command : install 'code' command 어쩌구 install 하면 됨)
내가 짠 코드 브라우저에서 보고 싶으면
npm start
새로 생성된 폴더 터미널에서 입력 후 엔터
(처음 폴더에서 입력하면 안나와유)
안뜨면 그냥 크롬 주소창에 localhost:3000 ㄱㄱ
자 이제
src 폴더안에 있는 App.js와 App.css를 수정하면
브라우저에서 바뀌는 걸 확인할 수 있습니다
App.js 파일에서 App이라는 클래스를 가진 div안에서 HTML처럼 코드 짜시고
App.css 파일에서 CSS 작업하시면 됩니다~
// (App.js)
function App(){
return (
<div className="App">
<h3 className="hello">hello</h3>
</div>
)
}
/* (App.css) */
.hello {
color : orange;
}
<설치된 폴더/파일 설명>
package.json : 설치한 라이브러리 목록
node_modules : 라이브러리 모음
public : static 파일 보관함
src : 소스코드 보관함
에러 발생 해결 방법
You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).
We no longer support global installation of Create React App.
sudo npm uninstall -g create-react-app
sudo npm add create-react-app
터미널에 작성한 후 지정 폴더에서 npx create-react-app (app이름) 다시 시도
'JavaScript' 카테고리의 다른 글
이벤트 루프 [event loop] (0) | 2022.04.07 |
---|---|
SPA이란? - SPA, MPA 비교, 장단점 (0) | 2021.11.13 |
SSR vs CSR 비교 (0) | 2021.11.12 |
[React] JSX 문법 왜 쓰는걸까? (1) | 2021.10.26 |
[React] 리액트(React)를 공부해야하는 이유에 대해 (1) | 2021.10.26 |