2. React 프로젝트 시작하기 (feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

css는 깃허브 참고 https://github.com/katf101/React-The_Complete_Guide

---

 

1. Node 설치

기본적으로 Node.js가 설치되어 있어야 한다.

노드 홈페이지에 들어가서 lts 버전으로 다운하자

https://nodejs.org/en/

Node.js

 

노드 설치가 끝나고 터미널에 node -v 로 노드 버전을 확인할 수 있다.

$ node -v
v16.14.2

---

2. React 프로젝트 설치

터미널에 아래와 같이 입력한다.

$ npx create-react-app react-complete-guide

# react-complete-guide 는 프로젝트 이름 이므로
# 본인이 하고 싶은 프로젝트 이름으로 설치하시면 됩니다.

 

React 설치 후

 

 

 

리액트 패키지를 설치하면 왼쪽 사진처럼 업데이트된다.

리액트 최신버전에서는 리액트 패키지를 설치하면 알아서 node_modules까지 설치를 해주는 것 같지만,

만일 node_modules가 없다면 npm install로 설치를 해야한다.

 

 

 

 

3. 로컬에서 실행

src 폴더 안의 App.js를 아래와 같이 수정해준다. 수정하는 과정에서 logo 파일은 삭제하였다.

import "./App.css";

function App() {
  return (
    <div className="App">
      <h2>Let's get started!</h2>
    </div>
  );
}

export default App;

# app.js

 

그리고 터미널에서 cd react-complete-guide (프로젝트 명) 를 입력한 뒤

npm start를 입력하자.

 

터미널에서 마지막에 webpack compiled successfully 이라고 출력되면 성공이다.

 

리액트는 기본적으로 3000 포트에서 실행된다.

크롬에서 http://localhost:3000/ 을 입력하여 접속해보자.