[React.js, 스프링부트, AWS로 배우는 웹 개발] 3장 - 리액트 애플리케이션 생성

사용자는 자신의 컴퓨터에서 브라우저를 실행한다.

브라우저는 인터넷을 이용해 서버에 있는 자원(HTML, JavaScript, CSS 등)을 사용자의 컴퓨터로 다운로드한 후 브라우저에서 실행한다.

 

Node.js

Node.js 등장 전까지 자바스크립트는 브라우저 내에서만 실행할 수 있었다.

자바스크립트는 브라우저상에서 HTML 렌더링 일부로 실행하거나 개발자창의 자바스크립트 콘솔을 이용해 실행해야 했다.

다시 말해 자바스크립트는 브라우저 밖에서는 실행할 수 없었다.

이젠 그렇지 않다.

Node.js는 자바스크립트를 내 컴퓨터에서 실행할 수 있게 해주는 프로그램, 즉 자바스크립트 런타임 환경이다.

Node.js는 구글 크롬의 V8 자바스크립트 엔진을 실행한다.

 

 

NPM(Node Package Manager) 

NPM(Node Package Manager) 은 Node.js의 패키지 관리 시스템이다.

gradle이 maven 리포지토리에서 라이브러리를 다운받는 것과 비슷한 개념으로 

NPM을 이용해 Node.js 라이브러리를 설치한다. NPM은 Node.js 설치하면 함께 설치된다.

 

 

npm init을 활용해 node프로젝트를 초기화 한다.

 

 

[node 프로젝트 초기화]

$ mkdir test-project
$ cd test-project

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See 'npm help json' for definitive documentation on these fields and exactly what they do.

• node 프로젝트를 초기화 하면 패키지 이름이나 버전 등 기본적인 정보를 입력해야 한다.
• 이 정보를 다 입력하면 마지막에 package.json 이라는 파일을 만들어 준다.
• package.json에는 프로젝트의 메타데이터가 들어간다.

npm install react

• npm을 이용해 react를 설치한다.
• 해당 패키지는 node_modules 디렉터리 아래에 설치된다.
• package.json에 설치한 패키지가 명시된다.
• dependencies에 추가된 라이브러리를 이후 프로덕션 배포에 사용된다.

 

파일 용도

[package.json]

{
  "name": "test-project",
  "version": "1.0.0",
  "description": "test-project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "export PORT=3002 && react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.1"
  }
}

• 이 프로젝트의 메타데이터로 사용할 node.js 패키지 목록 등을 포함한다.
• build.gradle에 dependencies 추가 후 빌드하는 경우, gradle이 dependencies에 나열된 라이브러리를 메이븐 리포지토리에서 설치해 주었다.
• Node.js는 기본 서비스 포트가 3000번 이고, "start': "export PORT=3002 && react-scripts start" 라인을 추가하면
  환경변수로 지정되어 서비스 포트가 3002번으로 변경되어 실행된다.
• Node.js의 경우, 이 과정이 자동으로 일어나지 않으므로, 수동으로 커맨드를 쳐야, dependencies 내 라이브러리를 설치할 수 있다.

npm install

• npm install을 이용해 수동으로 필요한 모든 패키지를 설치한다.

 

public 디렉터리 하위의 파일들

• index.html : http://localhost:3000 접속하면 가장 처음으로 리턴하는 HTML 파일
• 다른 페이지들은 React.js를 통해 생성되고 index.html이 있는 root Element 아래에 동적으로 랜더링 된다.

 

src 디렉터리 하위의 파일들

• index.js : index.html과 함께 가장 처음으로 실행되는 자바스크립트 코드
• 이 자바스크립트 코드가 리액트 컴포넌트를 root 아래에 추가한다.
• App.js는 기본으로 생성된 리액트 컴포넌트이다.

 

프론트엔드 애플리케이션 생성

우리는 npm이 아닌 npx 라는 툴로 리액트 애플리케이션을 초기화할 예정이다.

그렇지 않으면 일일이 설정해야 하는 부분이 많기 때문이다.

 

[react-workspace 디렉터리 생성]

$ mkdir react-workspace
$ cd react-workspace

 

[react 애플리케이션 생성]

$ npx create-react-app todo-react-app

 

[react 애플리케이션 생성 로그]

Creating a new React app in /... /react-apps/todo-react-app.

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

We suggest that you begin by typing:
  cd todo-react-app
  npm start
  
  Happy hacking!

• 로그의 제안대로 프로젝트 폴더(todo-react-app)로 이동하여 npm start로 애플리케이션을 실행해보자!

 

[react 애플리케이션 실행]

$ cd todo-react-app
$ npm start

> todo-react-app@0.1.0 start /Users/alyssakim/nodeJsProjects/react-apps/todo-react-app
> react-scripts start

Compiled successfully!

You can now view todo-react-app in the browser.
  Local:             <http://localhost:3000/>
  On Your Network:   <http://localhost-ip-address:3000/>
  
Note that the development build is not optimized.
To create a production build, use npm run build.

• todo-react-app은 3000포트에서 실행되고 있고 http://localhost:3000 경로로 들어가면 애플리케이션을 확인할 수 있다.
• package.json 파일에서 서비스 포트를 3002 로 수정했다면, 위에 문구는 3002로 나올 것이다.