[React] 시작하기 | 맥 node 업데이트 | VScode |npx

1. Node.js 최신 버젼 다운 하기 

 

리액트를 시작하기 위해서는

일단 Node.js 최신 버젼 다운 받아야 한다. (node 업데이트 하기)

 

node.js 설치하는 이유

npm이 필요한데 node.js 설치하면 npm 툴 같이 다운 받아짐

Create React App 이라는 라이브러리 설치하기 위해 

 

 

1-1. 일단 터미널에서 내가 받은 node.js가 있나 확인한다. 

터미널에 아래 코드 입력하여 내 컴퓨터에 있는 버젼을 확인한다. 

node --version

 

난 14.17.6 버젼이 다운 받아져 있다. 

 

 

1-2. Node.js에 들어가서 최신 버젼이 무엇인지 확인하기 

현재 안정적으로 돌아가는 것은 16.14.0 버젼이다. 

 

 

1-3. node.js 업데이트 하기 

 

n 다운받기 

sudo npm install -g n 

 

안정적인 최신 버젼 다운받기

sudo n stable

 

잘 업데이트 됐나 확인하기 

node --version

 

---

 

2. Visual Studio Code에서 익스텐션 다운받기 

babel sublime 검색해서 많이 다운 받은 것 다운 받았음 

- babel JavaScript

- Sublime Text Keymap and Setting Importer

- Babel ES6/ES7 

- Rainbow Brackets

- Reactjs code snippets

- Snazzy Operator

- Spirited Away Color Theme

- vscode-icons

- vscode-styled-component

- Auto Close Tag

- Bittersweet Theme

- ESLint

- GraphQL

- Markdown All in One

- Path Intellisense

- Prettier - Code formatter

 

---

 

3. React App 만들기 | 리액트 실행

vscode를 오픈한다

vscode에서 터미널 열어 리액트를 실행시킨다.

npx create-react-app keeper-app 

 

 

npm: node package manager 

npm is just these different node related libraries or files and folders that get created by different tool developers online that we can use to help us with our node projects or Javascript based projects. create-react-app이 대표적 툴

a installation as well as a executable environment. what this means that we can install directly, create-react-app and all of these different packages onto our local project or we can install it globally on our computer. 

       참고 npm install create-react-app 

이렇게 쓰면 create-react-app locally into local folder. anything inside of this folder can leverage.

so you might have numerouse versions of create-react-app in multiple different projects.

but what if we want to always to leverage one versionof it across our entire computer? 

       참고 npm install -g create-react-app

이 코드보다 더 간단하게 쓰는 것이 npx를 쓰는 것이다. 

 

npx: npm package runner tool 라이브러리 설치를 도와줌

npm에 들어있는 tool.  

npx를 쓰면 아주 간단해짐

자동으로 최신 버젼을 global로 쓸 수 있게 하면서 바로 실행까지 하게 해줌. 

그리고는 실행할 것만 실행 시키고 패키지 삭제를 해버림 

 

예) cowsay 실행 시키기 

            npm list cowsay 

            npm list -g cowsay 

 로 검색해도 cowsay 나오지 않음 

이미 삭제되고 없음 

 

 

 

create-react-app: 라이브러리 이름. 리액트 세팅해줌.  다 완료된 boilerplate 제공

it's just a tool that Facebook built that allows us to quickly and easily build our react applications. 

 

keeper-app: 프로젝트 이름 / keeper-app으로 파일이 생성된다. 

 

 

react-script: 로컬 컴퓨터에서 리액트가 돌아가도록 돕고 브라우저에서 내용을 볼 수 있게 해주는 모듈 

 

 

다 다운이 되면 이렇게 터미널에 치라고 나옴

cd keeper-app 작업할 keeper-app 파일로 이동 

npm start  리액트 시작하기. 실시간 서버 가동이됨 

 

폴더 오픈하기 

 

 

 

---

 

4. 파일 정리하기 

이제 리액트 코드를 작성하면 되는데

create-react-app이 실행되면 필요없는 많은 파일들이 딸려온다

 

 

package.json 

a file that have different libraries or packages that this project needs in order to work. 

 

 

react-script

kind of package helper that create-react-app 편하게 쓸 수 있게 도와줌 

 

 

4-1 필요없는 파일 삭제 

public, src 소스 안에 index.html와 index.js 파일만 남기고 다른 파일들은 모두 삭제해도 괜찮다. 

 

 

 

 

4-2 index.html 정리하기 

index.html 도 기본형만 남기고 모두 삭제한다

root div는 기본으로 들어가 있다. 

index.html

 

 

 

script tag를 추가해서 index.js와 연결해준다. 

index.html 

 

 

 

4-3 index.js 정리하기 

상위 두 줄만 남기고 모두 지운다. 

 

 

Hello world를 브라우저에 나타내본다.

 

 

브라우저

 

 

준비 완료!