Study/Node, React 기초 강의_John Ahn

개발 환경 설치_Node.js, express js, Visual Studio (Window)

d-_-s 2023. 2. 11. 17:05

실습에 앞서 개발환경을 설치해 주도록 한다.

 

Node.js를 설치하기 위해 아래의 URL에 접속하여 Nod.js를 다운로드한다.

 

https://nodejs.org/en/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

 

Node.js가 잘 설치가 됐는지 확인하기 위해 cmd 창에 접속하여 Node.js 버전과 Npm 버전을 확인한다.

 

< Node.js 버전확인 >

node --version

< 결과 >

 

< Npm 버전 확인 > 

npm --version

 

< 결과 >

 

다음으로 통합 개발환경인 Vusual Studio Code를 설치한다.

 

Vusual Studio Code를 설치하기 위해 아래의 URL에 접속하여 Vusual Studio Code를 다운로드한다.

 

https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

 

 

다음으로 프로젝트 파일과 패키지를 생성한다.

 

프로젝트 파일명은 BOILER-PLATE, 패키지 파일명은 package.json이다.

 

 

패키지 파일의 내용을 추가

 

터미널 창에서 npm init을 실행한다.

npm init

 

dependencies는 express js 설치 후 반영된다.

 

{
  "name": "boilerplate",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "d-_-s",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  }
}

 

index.js를 추가

 

// express 모듈을 추가
const express = require('express')
// 새로운 express 모듈을 생성
const app = express()
// port 설정
const port = 5000

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

// 5000번 port에서 실행
app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
})

 

express js 설치

 

터미널 창에서 npm install express --save을 실행한다.

 

npm install express --save

 

 

실행

npm run start

 

 

접속

 

브라우저에서 localhost:5000/으로 접속한다.