첫 React 프로젝트 만들기

nvm 설치 할것!

폴더 만들기

자신이 프로젝트를 진행하고자 하는 위치에 폴더를 만든다.
그리고 그 폴더를 vs코드로 열어준다.

vs코드 내에서 새 터미널을 열어주고 nvm 설치 확인 한다. (bash 사용)

nvm --version

이렇게 입력했을 때 nvm이 잘 설치되었다면 설치한 nvm 버전이 나오게 된다.

nvm으로 node.js 설치하기 및 적용하기

이 과정에 대한 설명은
M1 애플 실리콘 개발 환경 구축하기 에 설명이 되어있다.

추가적으로 현재 사용하고 있는 node 버전 확인 하는 명령어는

node -v

npm으로 yarn을 설치해보자

npm(node package manager)은 무수히 많은 third-party 패키지를 활용할 수 있게 해준다.

yarn도 비슷한 친구이다. 다만, 속도적인 측면에서 npm보다 조금 더 빠르다.
그리고 node를 설치하면 npm도 함께 설치되기 때문에 따로 설치하지 않아도 된다.

npm install -g yarn

여기서 -g는 global의 약자로 컴퓨터 전제에서 쓸 수 있도록 글로벌하게 설치한다 라는 뜻이다.

yarn에서 React를 설치하자

yarn에서 다른 무언가를 설치할때는 아래를 입력하자

yarn add [옵션] [설치할 패키지 이름]

yarn add global create-react-app

CRA? create-react-app
리엑트는 레고같은 거라고 생각하면 된다.
웹프로그래밍을 할때 리엑트를 사용한다면 정말 많은 레고들을 조립해서 만들게 되는데
이 무수히 많은, 웹을 만드는데 필요한 모든 레고들을 한데 모아놓은 패키지이다.

React 프로젝트 만들기

1. 아까 만든 프로젝트를 진행하기 원하는 폴더로 들어간다.
2. yarn create react-app [우리가 만들 프로젝트 이름]
3. create react app이라는 패키지가 프로젝트를 만들어 준다.

설치가 다 되었으면 폴더 구조를 한번 보자
node_modules : yarn으로 설치할 패키지들이 담기는 곳
public : index.html/png 파일 등이 몇개 있다 //
src : css, app.js 등이 있다.
그 밖에 package.json / .gitignore 등의 파일이 있다.

프로젝트 구동하기

터미널에서 현재 위치를 확인한 후, 프로젝트를 행하기로 정했던 폴더로 들어간 후
yarn start 입력