티스토리 뷰

C++ 200제/코딩 IT 정보

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('/', (req, res) => 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(PATH, HANDLER)


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


    app.get('/', (req, res) => 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', (req, res) => res.send('hello'))

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


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

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

    // /add?a=10&b=5 인 경우 15를 반환
    app.get('/add', (req, res) => {
        // 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(PORT, HANDLER)


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


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

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



    반응형