코딩 팁

Express Node | Node.js WEB 프레임워크에서 Hello World

코딩 기록 vicddory 2020. 3. 16. 07:00


Node.js에서도 쉽게 WEB 애플리케이션 만들 수 있지만, WEB 프레임워크 Express를 사용하면 더욱 유연하고 간결한 코드를 작성할 수 있습니다.


저는 API 테스트를 위해 사용해 봤는데 간편하다는 장점에 감동했습니다. JavaScript로 작성할 수 있고, JSON 취급하기도 쉽다는 장점이 있습니다.


Node.js 이용자에게도 필요하므로 설치 방법, 설명, 간단한 예제를 소개합니다. 이 포스팅 내용은 초보자를 위한 공식 문서를 보충하는 형태입니다.

실행 환경

  • web framework Express 4.16
  • Node.js 10.15 (기존에 설치된 것 이용)
  • npm 6.4
  • Windows 10 Home


개발 예제는 Windows에서 실행(작성)했습니다만, Node와 npm이 설치되어 있으면 Mac 또는 Linux도 괜찮습니다.


Node.js / npm 설치

현재 Node.js 12.x가 추천 버전입니다. OS별 Node js와 npm 설치 방법은 각각 아래와 같습니다.



버전 6과 8에서 확인해 봤습니다. 이미 설치한 분들은 그대로 사용해도 됩니다.


> node -v
v10.15.1

> npm -v
6.4.1


설치하고 위의 명령으로 확인하세요.


Web Framework Express



Fast, unopinionated, minimalist web framework for Node.js

Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크


프런트 사이드의 JavaScript를 다루는 분은 이미 경험이 있으실 겁니다. 서버 측의 JavaScript를 다룰 때 외울 것이 적어 바로 개발을 시작할 수 있습니다. 그리고 npm의 풍부한 라이브러리도 다루기 때문에 Node.js와 Express를 배워두면 손해는 없다고 생각합니다.

설치

다음 명령어로 Express를 설치합니다.


> npm install express


설치할 때 --save를 붙이라고 하지만, 안 써도 상관은 없습니다.


--save는 package.json에서 프로젝트 모듈(Express)을 관리할 때 사용합니다. 단, npm v5에선 디폴트 옵션으로 --save와 유사한 것을 추가하므로 굳이 사용할 필요가 없습니다.


Hello World

애플리케이션 디렉터리(your_app) 아래에 서버 코드를 작성합니다.


your_app / app.js


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

app.get('/', (reqres=> res.send('Hello World!'))

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


얼마 안 되는 몇 줄이지만, 이것만으로 Hello World!를 반환하는 웹 애플리케이션이 생겼습니다! 코드에 대해서는 뒤에서 설명합니다.


서버 실행

우선 서버를 실행합니다.


# app.js 경로로 이동
> cd path/to/your_app

# 서버 실행
> node app.js
Example app listening on port 3000!


이제 http://localhost:3000 을 브라우저에서 열면 Hello World! 문자열을 확인할 수 있습니다.



코드를 편집할 경우 Kill (Ctrl + C) 한 후 다시 실행합니다.


세미콜론 생략에 대해

Node js는 JavaScript로 작성하는데요. ; 세미콜론을 자동으로 삽입해주니 생략해도 됩니다. 이 사양에 대한 논의가 다양하게 있습니다만, 개인적으로 붙이는 편입니다.

코드 설명

코드는 5행이지만, 한 줄씩 자세히 설명하겠습니다.


인스턴스

const express = require('express')


npm으로 설치한 모듈(Express)은 require()를 사용하여 로드합니다.


const app = express()


이어 web framework express 인스턴스를 생성합니다. 이후 app에 리퀘스트 처리 등을 추가합니다.


라우팅

app.METHOD(PATHHANDLER)


URL 처리, 연결하는 라우팅입니다.


app.get('/', (reqres=> res.send('Hello World!'))


위에서 http://localhost:3000/에 GET으로 액세스하면 Hello World!란 반환값을 받습니다.


get()은 post(), put(), delete() 등 메소드별로 반환할 수 있습니다. use()는 모든 메소드를 대상으로 작업을 수행합니다.


매개변수(파라미터)의 req가 요청(request), res가 응답(response)입니다. res.send()에서 문자열 또는 HTML 페이지 등을 반환할 수 있습니다.


// /hello에 온 POST 함수에 대해 hello 반환하기 
app.post('/hello', (reqres=> res.send('hello'))

// PUT
app.put('/user'function (reqres) {
  res.send('Got a PUT request at /user');
});


// 콜백함수 넘겨주기
var callback = function (reqres) {
  res.send('Got Any request method at /book');
}

// use는 모든 함수에 대해 처리합니다.
app.use('/book'collback);

// /add?a=10&b=5 인 경우 15를 반환
app.get('/add', (reqres=> {
    // req.query에서 쿼리 파라미터 얻음
    let a = parseInt(req.query.a)
    let b = parseInt(req.query.b)
    // 문자열로 만들어 리턴
    res.send((a + b).toString())
})


두 번째 인수는 함수를 전달합니다. 화살표 함수가 아닌, function (req, res) {} 형식도 사용할 수 있습니다.


아래 사이트에서 node js 샘플을 참고하세요.



서버 시작

app.listen(PORTHANDLER)


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


포트 3000번에서 서버를 시작합니다.

그러면, 서버 응답 값을 브라우저에서 확인할 수 있습니다. 포트 번호는 비어있는 곳 아무거나 쓰셔도 됩니다.



반응형
그리드형(광고전용)