서론

응용프로그램이 웹으로 올라가는 경우가 많아지고있다.

웹 기반의 고객 관리 시스템을 개발하겠다.
React로 웹 사이트를 어떻게 구성하고 출력하는지 알 수 있고
Node.js를 활용해서 사용자의 정보를 DB로 관리할 수 있도록 하겠다.
Material UI같은 디자인 프레임워크또한 다루겠다.

Create React App

설치

CRA는 패키지를 통해 React 프로젝트를 빠르게 만들 수 있다.

React 개발환경을 효과적으로 구축하기 위해 Node.js를 설치해야한다. (npm이 필요하기 때문)
npm으로 다양한 패키지를 설치할 수 있다.

Node.js 사이트에 접속하여 LTS 버전 다운로드 한다.

설치 프로그램 실행하고 시키는대로 따라간다. (기본 설정, "추가적인 도구 설치하겠습니다" 체크)
추가적인 도구를 설치하지않아도 무방합니다.

최신 Node.js는 설치와 동시에 npm이라는 패키지 관리도구도 설치된다.

Create React App 패키지 설치

터미널 실행한다.

다음 명령어로 현재 설치된 Node.js의 버전을 확인한다.

node -v

원하는 경로에 프로젝트 폴더를 생성하고 해당 경로로 이동한다.

cd /Users/tin9oo/react_nodejs_pjt_tutorial

다음 명령어로 create react app을 설치할 수 있다.

npm install -g create-react-app

-g 옵션을 통해 글로벌 패키지로 설치 가능하다. 글로벌 패키지로 설치하면 다른 프로젝트에도 적용가능해진다.

React 프로젝트 생성

다음 명령어로 현재 경로에 "management"라는 이름의 리액트 프로젝트를 생성할 수 있다.

create-react-app management

React는 react, react-dom, react-scripts 등의 다양한 라이브러리를 포함한 형태로 동작하는데 이런 것들을 자동으로 설치해서 하나의 완성된 react 프로젝트를 간단히 만들 수 있다.

현재 경로를 보면 management라는 폴더가 생성되고 있는 것을 볼 수 있다.
node_modules에는 실제로 설치된 다양한 모듈이 들어있다.
react 자체는 다양한 모듈을 포함하고있다. 이런 것들이 있어야 정상적으로 웹 FE를 작업할 수 있다.

package.json 파일도 자동생성된다.

Success가 출력되며 프로젝트가 정상적으로 생성됨을 알 수 있다.

다음 명령어로 현재 경로에 management라는 폴더가 생성되었음을 알 수 있다.

dir

React 앱 실행

다음 명령어로 management 폴더로 이동한다.

cd management

다음 명령어로 React 앱을 실행한다.

yarn start

알아서 react 앱이 만들어져서 실행된다.
기본 브라우저에 3000번 포트로 접속이 이루어진다.

성공적으로 React 개발환경이 구축된 것이다.

서버 구동 중에는 다음 명령어로 서버를 종료시킬 수 있다.

Ctrl + C

yarn start 명령어가 동작하지 않으면 npm install -g yarn으로 설치해준다.

React 앱 구동 중에만 접속이 가능하다.

.
.
.
본 게시글은 링크를 통해 공부한 내용을 기록한 것입니다.