React 초기 설정 _ ( git, node.js , yarn )

React 설정&설치

 

 

초기 설정 

 

🔻 터미널 : iTerm 사용

https://iterm2.com/downloads.html

Downloads - iTerm2 - macOS Terminal Replacement

 

🔻 node.js 

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

다운로드 | Node.js

 

 

🔻 git

https://git-scm.com/downloads

Git - Downloads

 

 

🔻 yarn

npm install yarn --global 

윈도우 용 yarn 다운로드 : https://classic.yarnpkg.com/en/docs/install/#windows-stable

 

Mac : brew install yarn

brew가 설치되어져 있지 않다면 https://brew.sh/

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

위에 명령어를 복사해서  터미널에 붙여 실행하면 설치됨

 

---

각 설치 후 커맨드 창에서 확인

git -v

node -v 

npm -v

npm install yarn --global /brew install yarn

yarn -v

 

 

📌 컴파일 에러 발생 시

yarn&&yarn start

yarn : 프로젝트에 필요한 모듈을 다시 재설치

yarn start : 프로젝트 시작 

 

 

 

 

 

---

 

 

react 프로젝트 만들기

 

 

"template" 이라는 react 프로젝트 만들기 

 

yarn create react-app template

 

🔻 해당 프로젝트 들어가기

cd template

 

🔻 visual studio 실행

code .

 

🔻 실행

yarn start

 

 

 

 

 

일단 기본 초기 설정을 이렇게 해두자

🔺 app.js , index.js 에 삭제한 import 들 지워주기 

App.js -> app.jsx 로 바꾸기  (리액트 컴포넌트인지 순수 자바스크립트 코드인지 헷갈리기 때문에 구분하기 위해 이렇게 지정 ~ , 굳이 안해도 됨) 

 

 

📌 JSX ??

https://reactjs.org/docs/introducing-jsx.html

Introducing JSX – React

자바스크립트 코드 위에서 간단하게 HTML 처럼 할 수 있도록 직관적으로 간편하게 만들수 있는게 jsx 이다 

 

 

 

public

정적인 실행을 담는 곳

사용자가 한 번에 받아서 컨텐츠가 변하지 않음 (HTML , 이미지, 리소스 등) 

 

src

동적인 실행을 담는 곳 

컨탠츠가 다이나믹하게 동적으로 변화하는 소스 코드들 , 자바스크립트 코드 ... 

 

 

 

---

리액트 는 순수자바스크립트이고 이 자바스크립트를 이용해서 컴포넌트들을 만들어 나가는 거다 

실제로 브라우저는 HTML 과 CSS, 순수 자바스크립트 "만"을 이용할 수 있다

하지만 브라우저가 이해할 수 있는 것들은 HTML, CSS, 자바스크립트 인데 리액트의 이러한 컴포넌트들은 

결국은 바벨(Bebel) 을 이용해서 순수 자바스크립트로 변환이 된다 

우리가 만든 컴포넌트들은 HTML 과 연결하는 작업을 해주어야 하는데 이 작업을 react-dom 에서 해준다 ! 

사용자에게 궁극적으로 배포되어 지는 것은 index.html 이다 

밑에 줄에 <div id ="root"></div> 한 줄이 있는데  root 라는 아이디를 이용해서 자바스크립트와 연결해준다 

 

리액트 컴포넌트 라는 것은 결국은 HTML 로 변환이 되어서 사용자에게, 브라우저에게 표기가 된다