MEAN STACK/Node js

노드 js (Node.js), 웹스톰(webStorm) 다운 및 페이지 라우팅(Page Routing) 예제

minwoohi 2018. 9. 12. 10:01

MEAN STACK이라는 말이 각광을 받고 있다. MongoDB, Express, Angular 4, Node.js를 이용한 웹개발을 일컫는다. 스프링이나 서블릿으로 할 수 있는 개발을 MEAN STACK을 통해 대체 가능하다는 말이다. 서블릿과 비교하면 스프링도 굉장한 코드량을 줄일 수 있었지만 MEAN STACK을 사용하면 더욱 간소화 할 수 있다. (Express를 사용하면 한줄로 서버를 동작시킬 수 있다.)
Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 Non-blocking I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 자랑한다.

- 2009년 “라이언 달” 이 V8과 CommonJS 로 Node.js 를 개발함
- 최근의 Web Application 들은 서버내에서 수학적 연산을 처리하는 경우는 거의 존재하지 않음.
- 보통 요청을 전달받아 Database 에 전달하는 방식으로 동작됨.
- 초 고성능의 서버를 필요로 하지 않으면서 최적의 성능을 유지시킬 수 있음.
- 월마트, 야후, 그루폰 등의 트래픽 처리능력이 중요한 사이트에서 각광받고 있음.


노드js 및 IDE webStorm 설치. 둘 다 default 설정으로 설치하면 돼 과정 생략.

웹스톰(WebStorm) 사이트 접속


https://www.jetbrains.com/webstorm/


Node.js 사이트 접속

https://nodejs.org/en/

비트에 맞춰 LTS 버전 다운

웹스톰은 유료 툴이기 때문에 체험 버전으로 설치한다.

Accept 클릭

OK 클릭하면 프로그램 사용 준비 완료.

FIle - New - Project 클릭해 경로 설정 후 생성

File - New - JavaScript File 클릭

파일명 설정 후 OK

helloworld.html 생성해 적당히 내용 넣는다.

login.html 또한 생성해 둔다. url에 정의되어 있는 parse.pathname 메소드를 사용해 요청을 구분해 다른 페이지를 보여준다. 이를 페이지 라우팅이라 한다.
※ 하나의 어플리케이션에 하나의 서버가 있기 때문에 자바에서 사용하던 Context Path 개념은 필요가 없어진다. 스프링에서는 하나의 톰캣 서버에 여러개의 프로젝트 파일을 올릴 수 있었기 때문에 프로젝트명을 Context Path로 지정해 실행시킬 어플리케이션을 구분했다. 
- 스프링 url 패턴 : 'localhost:포트번호/ContextPath/url'
- Node.js url 패턴 : 'localhost:포트번호/url'

require
 다른 자바스크립트에 정의되어 있는 함수나 변수를 사용할 수 있다. CommonJS에서 지원(import와 비슷한 느낌)
url.parse(request.url).pathname
요청 url 받아오는 메소드
createServer 
서버 관련 정보 지정 메소드. url
readFile
데이터 읽을 파일 지정한다.  요청에 대한 정보가 err, data에 저장된다.
data는 파일 스트림으로 저장되어 출력해보면 의미 없는 숫자들이 나온다.
직접 값 확인해보고 싶으면 data.toString()을 호출하면 된다.
writeHead 
응답 및 문서에 대한 정보 지정
end
브라우저에 data 전송
listen
포트번호 지정해 서버 동작시킴

/**
 * Created by Admin on 2017-04-28.
 */

// http 프로토콜
var http = require('http');
// File System 의 약어
var fs = require('fs');
// url 정보를 쪼개 관리 가능하게 해주는 모듈
var url = require('url');

var server = http.createServer(function(request, response){

    var pathName = url.parse(request.url).pathname;
    console.log(pathName);

    // 페이지 라우팅
    if(pathName == '/'){
        fs.readFile('helloworld.html', function(err, data) {
            response.writeHead(200, {'Content-Type': 'text/html'});
            response.end(data);
        });
    } else if(pathName == '/login'){
        fs.readFile('login.html', function(err, data) { // data :
            response.writeHead(200, {'Content-Type': 'text/html'});
            response.end(data);
        });
    } 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');
});

다음과 같이 url에 따라 다른 페이지가 나온다.