본문 바로가기
Javascript/React.js

[ReactJS] React 프로젝트 생성 및 실행 (React로 아주 간단한 게시판 만들기 - 1)

by 임채훈 2020. 10. 29.

ReactJS로 게시판 만들기입니다. (극도로 단순한 구성 주의)

 

 

NPM (Node Package Manager) 설치 확인

npm -v

6.14.8

 

create-react-app 모듈 설치

sudo npm install -g create-react-app

 

create-react-app 을 활용한 프로젝트 생성

  • 프로젝트 (디렉토리 명) - react-simple-blog
create-react-app react-simple-blog
Creating a new React app in /Users/imchaehun/workspace/react/react-simple-blog.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

yarn add v1.17.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] 🔨  Building fresh packages...
[1/5] ⠐ fsevents
[-/5] ⠐ waiting...
[-/5] ⠐ waiting...
[-/5] ⠐ waiting...
[-/5] ⠐ waiting...

 

React 실행

cd react-simple-blog
npm start

 

접속

별다른 설정이 없다면 개발 환경 Webpack 서버의 Port는 3000번 입니다.

따라서 localhost:3000 접속

 

Visual Studio Code 를 활용해 개발 환경 구성

 

다음장에 이어서

2020/10/29 - [ReactJS] - [ReactJS] 핵심 Component 만들기 및 게시글 목록 페이지 구성 (ReactJS로 아주 간단한 게시판 만들기 - 2)


프로젝트 예제 소스코드 주소

 

youspend8/react-simple-blog-example

Contribute to youspend8/react-simple-blog-example development by creating an account on GitHub.

github.com

 

댓글0