초짜가 mac에서 react 설치하기란

나는 여태 리액트가 그냥 제이쿼리 다운받듯이 스크립트로 연결해서 쉽게 쓸 수 있는 거라고 생각했다.

정말 무식했어..

 

일주일 전에 본격적으로 리액트라는걸 맛보기라도 해볼까 싶어서 책도 사고 인터넷에 검색도 해봤는데 1. node.js를 다운받는다. 2.갑자기 npm 어쩌구를 친다. 이 순서로 이어지는게 아니겠는가.

 

node.js 다운받으라고 할때만 해도 진짜 식은죽먹기넴~ㅋ 이정도야 모~~ㅋ 했었는데..

문제는 2번. 

그냥 밑도 끝도 없이 npm 어쩌구라는데 도대체 저걸 어디다 입력하라는건지 뭔지 모르겠고 점차 인내심은 바닥 나기 시작했다.

 

'아.. 

이렇게 리액트는 시작도 못해보고 포트폴리오를 마쳐야하는가' 하면서 자기 전에 조금 많이 고민을 하다가 결국 포기하지 않고 열심히 더 구글링을 해보았고 드디어 저 npm은 터미널이란 곳에 가서 입력하면 된다는 것을 알았다.

 

 

0. Homebrew 설치

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

 

1. nodejs.org/ko/

Node.js

node.js를 각 운영체제에 맞는 버전으로 설치한다.

여기서 버전은 사람마다 말이 다 다른데 나는 안정적인 버전으로 설치했는데.....누구는 무조건 최신버전 설치하라고 하고(오류 많이 난다고).. 뭐 하튼 말이 많다. 그냥 하고싶은거 하면 될 것 같음.

 

 

2. 터미널을 킨다!!!!!!

터미널은 런치패드나 위에 돋보기 눌러서 ter까지만 검색해도 앱이 바로 나온다.

 

3. 터미널에 brew install node 입력

 

4. 막 # 왔다갔다 하면서 설치 되면 버전 확인하기 위해  입력

node -v
npm -v

각각 node.js와 npm 설치 버전을 확인할 수 있다.

 

 

5. 리액트 프로젝트를 시작할 폴더로 이동한다.

말 그대로 내가 홈페이지 만들 폴더로 이동하면 된다. 

나는 쉽게 바탕화면에 있는 나만의 폴더 안에 있는 리액트 폴더에 넣고 싶었는데 쉽게 생각하면 바탕화면>내폴더>리액트니까 

cd desktop/내폴더/react

라고 입력하면 이동이 됨.

cd는 머 디렉토리인가 이동할 수 있다는 뜻이라고 했다.

 

이동 후에

 

6. cra라는 create-react-app을 활용하여 리액트 프로젝트를 생성한다.

npx create-react-app 프로젝트명

프로젝트명은 원하는거 아무거나 입력하면 된다.

리액트가 세팅된 라이브러리임..

이건 원하는 웹사이트 만들때마다 이런식으로 만들면 된다. 

 

후에 vs code나 브라켓 등등 원하는 에디터를 켠 뒤에 열기를 눌러 내 리액트 폴더를 열고 터미널에서 또한 내 리액트 폴더로 이동한 뒤에

npm start

넣어주면 이제 서버 시작이당.

 

초반엔 어디서부터 어떻게 해야하는지 몰랐는데 (설치부터 리액트 프로젝트를 만들 때까지 어디가 설치부분이고 어디가 프로젝트 만드는 부분인지를 몰랐음) 이제는 척하면 척 npx create-react-app website1 등으로 쉽게 프로젝트를 만들어서 작성하고 있다.