TIL_리액트 # 1 | 리액트는 레고블럭이다!

리액트

》자바스크립트 라이브러리? 프레임워크?

프론트엔드의 꽃🌷이라고 한다. 하태하태 🔥

• 자바 vs 자바스크립트?실제로 자바가 유행할 당시 덕을 보기 위해 자바'스크립트'라고 붙였다고 한다. 즉, 아무 관계 없다.
• JSX : HTML in JS

---

프로젝트 만들기

	⚡명령어 & 설치	의미
1	nvm (Node Version Manager) 설치	nvm은 Node.js의 '버전' 관리자
2	nvm --version	nvm 잘 설치 되있는가, 버전 확인
3	nvm intall 14.16.0 (버전명)	LTS 버전은 안정된 버전, 버그가 적다.
4	nvm ls	노드 버전 리스트 확인
5	node -v	입력했을때 nvm ls와 같아야 한다
6	nvm use 14.16.0	"14.16.0 버전의 노드를 사용할 것이다"
7	npm install -g yarn	"npm으로 yarn을 컴퓨터 전체에 설치 할것이다" (-g : global, 컴퓨터 전체에서 쓸 수 있게 한다.)
8	yarn -v	yarn 버전 확인
9	yarn add [옵션] [설치할 패키지 이름]	설치할 패키지 이름을 넣어 설치 ex) yarn add styled-components...
10	yarn add global create-react-app	"CRA (패키지 생성)" 웹사이트를 만들 때 필요한 올인원 패키지! (global : 전역에 설치)
11	yarn create react-app [리액트 프로젝트 이름(폴더명)]	리액트에서는 프로젝트 = 앱
12	cd [폴더명]	[폴더명]으로 이동!
13	yarn start	localhost:3000에서 회전하는 리액트 로고를 볼 수 있다!

🗂node_modules : 설치할 노드들 있는 곳

 

 

 

---

자잘한 문제들!

🚨 node 터미널 안보인다 ...@.@

: node터미널은 cd [프로젝트 폴더]에서 node를 치면 켜졌다..!

sitmin.tistory.com/entry/VSCode%EC%97%90%EC%84%9C-nodejs-%EC%8B%A4%ED%96%89%EA%B3%BC-TypeScript-%EB%8B%A4%EC%9A%B4-%EB%B0%8F-%EC%8B%A4%ED%96%89%ED%95%98%EA%B8%B0

🚨 warning package.json: No license field

package.json에 "dependencies"위에 "private" : true, 를 입력하면 된다.

 

🚨 error Command "start" not found.

yarn start를 하고 위와 같은 에러가 뜬다면 yarn 패키지 설치되지 않은 폴더에서 start했기 때문!

내가 yarn을 어디서 설치했는지 알기!