ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 노드js(Node.js) NPM(Node Package Manager) 예제
    MEAN STACK/Node js 2018. 9. 12. 10:09

    노드js도 스프링과 마찬가지로 여러가지 내외부 모듈을 사용할 수 있다. 이러한 모듈들의 집합을 NPM(Node Package Manager)라 한다. 스프링에서 Maven과 비슷한 역할을 하는 녀석이라고 이해하면 될 것 같다. 또한 노드js의 개발을 편하게 제공하는 프레임워크로 Express가 있다. Node js만으로 웹 개발을 하기는 굉장히 어려워 Express를 사용해야만 개발이 가능하다고 보면 된다. 메이븐에서 pom.xml에 Dependencies를 등록해 사용했듯이 Node.js에서는 package.json 파일에 설정하고 등록한다. Scriptlet을 사용할 수 있도록 돕는 ejs를 등록하는 과정 포스팅



    새 프로젝트 생성

    위 Terminal 클릭해 npm 초기화 진행한다. 명령어는 npm init 으로 초기화를 진행해야 npm 설정을 저장, 배포할 때 편한 package.json  파일이 프로젝트 내에 생성된다.

    이름 설정 반드시 소문자여야 한다. 입력 후 엔터

    이후 부분들 모두 엔터 누르면 기본값으로 생성된다.

    다음과 같이 package.json 파일 생기면 정상 종료. 
    scripts에 원하는 명령어의 별칭(Alias)를 줄 수 있다. 사용 빈도가 높기 때문에 역할을 파악하는 것을 권장.

    ejs 설치 절차. npm update 명령어로 갱신.
    - npm install --save ejs 통해 ejs 설치. --save는 설치할 모듈을 package.json에 저장한다는 의미이다. 따라서 package.json이 없다면 사용할 수 없다는 의미이고, npm init 이후에 사용해야 의미 있는 옵션이 된다. 메이븐과 마찬가지로  배포할 때 유용하게 사용된다.

    package.json에 dependeicies ejs dependencies에 대한 정보가 자동 등록되는 것 확인

    다음과 같이 ejs 폴더가 생성된다.

    infos.ejs, npmex.js 작성하고, package.json에 등록한다.

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title><%= title%></title>
    </head>
    <body>
        <table>
            <tr>
                <td>Info</td><td>Value</td>
            </tr>
            <% for (var i in list ) { %>
            <tr>
                <td><%= list[i].inform %></td><td><%= list[i].val%></td>
                <% } %>
            </tr>
        </table>
    </body>
    </html>
    

    infos.ejs 
    스크립트릿(Scriptlet) 사용했다.



    /**
     * Created by Admin on 2017-04-28.
     */
    
    var http = require('http');
    // File System 의 약어
    var fs = require('fs');
    // Scriptlet 지원 모듈
    var ejs = require('ejs');
    // url 정보를 쪼개 관리 가능하게 해주는 모듈
    var url = require('url');
    
    
    var server = http.createServer(function(request, response){
    
        var pathName = url.parse(request.url).pathname;
    
        // 페이지 라우팅
        if(pathName == '/'){
            fs.readFile('infos.ejs', 'utf8', function(err, data){
                response.writeHead(200, {'Content-Type' : 'text/html'});
                response.end(ejs.render(data,{
                    title : 'My info',
                    list : [
                        {inform : '이름', val : '민우'},
                        {inform : '거주지', val : '서울'}
                    ]
                }));
            });
        } else {
            response.writeHead(404, {'Content-Type' : 'text/html'});
            response.end('<h1>Page Not Found!</h1>');
        }
    });
    
    server.listen(3000, function(){
        console.log('Server running at http://localhost:3000');
    });
    

     npmex.js
    http와 url은 노드js에서 서버를 동작시킬 때 사용하는 모듈이다. Express를 사용하게 되면 사용할 필요 없으니 메소드들이 어떤 역할을 하는지 대충 파악하고 넘어가면 된다. "createServer를 통해 서버를 동작시키고, writeHead는 문서의 메타 정보를, end를 통해 데이터를 브라우저로 전송하는구나" 정도로 이해하면 된다는 말이다.
     fs와 ejs는 필수적으로 사용해야 하는 모듈이므로 사용법 숙지하자.

    Module
    Method
    Description
    fs (File System)
    readFile
    브라우저로 전송할 페이지의 정보 및 DB에서 읽어오는 데이터 지정
    ejs 
    render
    Key, value의 형태로 DB의 데이터 브라우저에 전송할 수 있도록 돕는 메소드


    {
      "name": "npmex",
      "version": "1.0.0",
      "description": "",
      "main": "npmex.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start" : "node npmex.js"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "ejs": "^2.5.6"
      }
    }
    
    



    package.json. scripts에 start 명령어 추가. 이제 start 명령어를 사용할 수 있다.

    터미널에서 npm start 입력하면

    ejs를 이용해 자바의 문법을 사용해 결과 출력된다.


Designed by Tistory.