Today I Learned 1127

React 설치(CRA)

Node.js 설치 이후 cmd 창에서

해당 순서로 실행

node -v : node.js가 설치되었는지 확인(버전 확인)

npm install--global yarn

-> yarn: 패키지 관리 툴(npm 과 같은 기능이지만 더 빠름)
이렇게 선언하면 node.js 가 전역변수로 선언되서 어디든 실행 가능(window 경우 재부팅 필수)
(이미지의 경우 재부팅 안해서 cmd 창에서 vsCode 실행함)

vsCode

ctrl + shift + ` -> 터미널 창 열림

똑같이 node.js 버전과 yarn 버전 확인
ctrl + shift + p : 터미널 기본 프로필 설정 -> cmd로

이후 yarn create react-app 프로젝트명 입력하면 리액트 앱이 생성됨

리액트 프로젝트 구조

package 에는 라이브러리 같은 설정이 json 형태(key : value)로 입력되어 있고 app.js의
function App() 안에 html 형식으로 코드를 입력하면 실행했을 때 화면에 해당 내용이 출력됨

react 시작 : yarn start

React 설치(vite 기반 - 더 가볍고 빠름)

1. npm create vite@latest 입력후 프로젝트 이름 설정
2. 프로젝트 설정

3. 디렉토리 이동 후 npm install

4. npm run dev 로 프로젝트 실행

화면 출력

리액트 실행 화면에서 페이지 소스 보기를 클릭하면 이러한 코드가 나온다.
그리고 이는 프로젝트 내에 index.html 에 있는 내용과 동일하다.

1. index.html 파일에서 index.jsx 로드
2. index.jsx 에서 App.jsx import
3. 결과적으로 App.jsx에서 작성한 컴포넌트가 화면에 출력