Node + React 기초 1 | Node.js와 Express.js 다운로드

 

1. Node.js 다운로드

Node.js 홈페이지에서 다운로드한다. 설치되었으면, 터미널에서 아래와 같은 버전을 확인할 수 있다.

 

2. express.js 다운로드

boiler-plate 폴더를 생성한 후, npm init을 한다.

boiler plate란 로그인과 같이 비슷한 기능을 재사용할 수 있게 만든 프로그램 형식을 의미한다.

PS C:\Users\admin\Desktop> cd boiler-plate
PS C:\Users\admin\Desktop\boiler-plate> npm init
package name: (boiler-plate)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author: Eunseo Kim
license: (ISC)
About to write to C:\Users\admin\Desktop\boiler-plate\package.json:

{
  "name": "boiler-plate",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Eunseo Kim",
  "license": "ISC"
}

 

vscode로 boiler-plate 폴더를 열어보면, package.jason 파일이 들어있다.

폴더 안에 index.js 파일을 생성하고, 터미널에서 express를 설치한다.

PS C:\Users\admin\Desktop\boiler-plate> npm install express --save 
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

added 57 packages, and audited 58 packages in 2s

7 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

그러면 폴더 안에 node_modules 라이브러리가 생성된 것을 확인할 수 있다.

 

index.js 파일에 아래 코드를 입력하여 express 앱을 생성한다.

const express = require('express')
const app = express()
const port = 5000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

 

 

express 앱은 포트 5000을 통해 서버와 상호작용하며, 루트의 요청을 받으면, 'Hello World!'을 보내고, 콘솔창에는 'Example app listening on port 5000'을 찍는다.

 

다시 package.jason 파일로 돌아와 scripts에 "start": "node index.js", 를 추가해준다.

이 때, 코마를 꼭 써줘야 한다.

{
  "name": "boiler-plate",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Eunseo Kim",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.1"
  }
}

 

터미널에서 npm run start을 입력하여 실행시켜본다.

PS C:\Users\admin\Desktop\boiler-plate> npm run start
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

> boiler-plate@1.0.0 start
> node index.js

Example app listening on port 5000

 

그리고 브라우저 주소에 localhost:5000을 입력하면 다음과 같이 Hello World가 화면에 찍힌 것을 확인할 수 있다.

 

---

*본 포스트는 인프런 <따라하며 배우는 노드, 리액트 시리즈 - 기본 강의> 강좌 수강 후 정리한 내용입니다.