React 초보를 위한 리액트 시작하기

✅ 이 글은 mac OS & VScode 사용자에게 맞춰져 있는 점 참고 바랍니다.

 

1.  iterm or Terminal에서 디렉토리 만들기

# mkdir 명령어로 프로젝트를 시작하려는 폴더에서 디렉토리를 만든다.
yeonsuchoi@Ella-iMac Workspace % mkdir React

# cd 명령어로 만들었던 디렉토리 안에 들어간다. (생략 가능)
yeonsuchoi@Ella-iMac Workspace % cd React

 

2. 리액트 설치하기

# 디렉토리 안에서 npx create-react-app {디렉토리명} 을 입력한다.
# 단, 아래와 같이 디렉토리 명을 대문자로 입력하면 아래와 같은 에러 코드가 뜬다.
yeonsuchoi@Ella-iMac React % npx create-react-app CodingApple

name can no longer contain capital letters
Please choose a different project name.

# 따라서 아래와 같이 소문자로 작성한다.
yeonsuchoi@Ella-iMac React % npx create-react-app codingapple

# 잘 입력했다면, prgress bar가 나타나며 무언가 로딩되고, 아래와 같은 문장이 나오면 성공!
Happy hacking!

# code .  명령어로 VScode를 실행한다.
yeonsuchoi@Ella-iMac React % code .

 

3. 터미널에서 실행하기

VScode 상단의 Terminal > New Terminal 클릭 혹은 단축키인 control + Shift + 백틱 키를 눌러 터미널을 실행한다.

 

4. 리액트를 브라우저에서 실행하기

# 아래의 명령어를 터미널에 입력한다.
npm start

# 단, 여기서 반드시 해당 디렉토리 안에 들어가서 실행해야 한다.
# 예를 들어, 내가 리액트 설치한 디렉토리 명이 codingapple인데 React에서 실행하면 안된다.
yeonsuchoi@Ella-iMac React % (X)
yeonsuchoi@Ella-iMac codingapple % npm start (O)

npm start를 입력하면 아래와 같이 브라우저에서 리액트가 실행된다.

 

5. 프로젝트 파일들 살펴보기

- node_modules: 라이브러리 코드 보관함

- public 폴더: static 파일들 모아두는 곳 (html, img 등)

- src 폴더: 코드 짜는 곳

- App.js: 이 안에서 JavaScript 코드를 짜면 되며, 메인이라고 보면 됨

- package.json: 프로젝트 정보

 

 

 

📎 내용 참조

- Youtube 코딩애플 - 2022 new 리액트 1강 : 리액트 뽕주입과 설치법