2. Express란? install / Connection / 정적파일서비스 / 웹페이지 표현하는 법

Node.js FrameWork Express

Express는 node.js 의 framework 입니다. framework 라는 것은 어떠한 작업을 쉽게 완성하기 위한 라이브러리의 집합이라고할 수 있습니다. 작업을 시작부터 끝까지 라이브러리로 지원한다는 점이 단순한 라이브러리와 차이가 나는 부분입니다. 예를 들면JQuery는 javascript 라이브러리로 다양한 용도를 가지고 있지만, jquery 자체가 무엇 하나를 이루기 위한 목적을 가지고 있지는않습니다. express는 node.js를 이용하여 웹 어플리케이션을 만들기위한 틀(frame)을 제공하는 라이브러리의 집합입니다.

 

Express

express 사이트에서 설치절차를 따른다.

(node, npm init(현재 프로젝트를 npm프로젝트로 만듦) 이 설치 됐다는 가정하에)

package.json파일이 있는 폴더에서

npm install express --save 를 입력해서 설치.

--save했기 때문에

package.json파일의 dependeccies에는

express 버전을 추가된다.

app.js 파일을 생성해서 진행

var express = require('express');
var app = express(); 
// app이란 객체 생성한다. express 모듈은 함수이기에 
//()를 통해 실행하면 app을 리턴.
// 이 app을 통해 원하는 앱을 만들 수 있다.


// 사용자가 홈피접속시 성공했다는 화면 보여주기위해 get메서드 사용함
// 일반적으로 url을 치고 들어오는 것은 get방식으로 접속함
// 홈페이지로 접속했다는 것으로 구분하기 위해 '/'을 입력. 그리고 홈으로 접속시 '/'뒤의 콜백함수실행
app.get('/', function (req, res) { 
    res.send('Hello World!'); 
    // 사용자에 대해 응답해주기 위해 res안에 있는 send라는 메서드,함수를 사용
});
// 실행방법 : URL에 http://localhost:3000 입력
// 앱은 URL('/') 혹은 라우트에 대해 'Hello Wolrd!'로 응답


app.listen(3000, function(req,res) {
    // 괄호 내부의 req,res는 삭제해도 무방. 사용하지 않기때문
    // res.send('3000!'); 이 기능을 입력할 시 send는 정의되지 않았단 오류발생
    console.log('Connected 3000 port!');
});
// app에는 listen이라는 메서드가 존재, 그 메서드에 포트번호(3000)를 지정해주면 3000번 포트를 리슨한다
// 앱은 서버를 시작하며 3000번 포트에 연결 청취
// listen 성공시 콜백함수 실행
// 실행방법 : cmd창 해당 파일 디렉터리에서 node app.js 입력시 'Example port 3000! 출력

Routing

3자 존재

이용한 : 웹브라우저를 사용자 우리 웹앱사용자

​

우리 웹앱은 다음과 같이 2가지로 구성

Router

Controller

​

get은 사용자의 요청과 그 요청에 대한 처리인 컨트롤러를 중개해줌 => 라우터역할

라우터는 정말 중요.

다음처럼 html문법을 적용시킬 수도 있다.

적용전 -> 적용후

 

 

정리하자면

*은 express의 실행객체

​

*.get(port_number,function(req,res){

res.send('message');

});

​

라우터의 역할

사용자의 요청(req) 그리고

그 요청에 대한 처리(res)인 컨트롤러를

중개한다

 

Connection

표제어 의미1,2,3,...

단어 + 단어 = 문장

문장과 문법

의미와 문법

​

JS / node.js

Module / NPM

Router(연결자,중개자)는 사용자의 요청을 어떤 Controller에 전달할 것인가를 도와줌

하단처럼 회원가입, 홈페이지, 에러화면 등등

정적파일서비스

동적이란 >

php, python, ...

프로그래밍쪽으로만들어진것

 

정적이란 >

사람이한번작성한것, 언제나똑같이 보이는 것

​

과정 >

현 디렉터리에서 public이라는 디렉터리를 생성한다.

그리고 public디렉터리 내부에는 아무 사진파일을 넣는다.

(현재는 node app.js가 실행된 상태)

이 파일을 사용자가 요청했을 때 전달해주기 위해서

다음과 같이 코드를 변경한다.

​

기존의 app.js파일에서

app.use(express.static('public'));

이란 js코드를 추가한다.

+) Expressjs사이트에선 정적파일을 쓰기위해 위 js코드를 추가하라고 설명함

그리고 현재는

밑줄 친 public 부분을 제외하곤 잘 모를 것. 미들웨어를 배운다면 알게됨

app.use(express.static('public'));

는 정적인 파일이 위치할 디렉터리(현재는 public)를 지정하는 기능.

public이란 디렉터리를 정적인 파일이 위치하는 디렉터리로 하겠다는 말

​

추가된 위치는 하단과 같다.

​

그리고 나서

> node app.js

를 입력해서 실행시킨 뒤

URL에는

127.0.0.1:3000/route.png 를 입력한다.

(현재 이미지파일 및 확장자 명이 router.png임)

rotuer.png파일이 public디렉터리에 있다고 해서

127.0.0.1:3000/public/route.png를 입력할 필요는 없음

​

그리고

이젠 public디렉터리에 test.txt라는 아무내용이 적힌 파일을 넣는다.

이후 URL에

127.0.0.1:3000/test.txt

를 입력하면 내가 넣은 내용이 출력된다.

​

만약 웹페이지에 이 전에 사용했던 route.png이미지를 넣고 싶다면

app.js 소스에 다음 내용을 추가한다.

그리고 다시

node app.js를 실행시키고

​

URL에는

127.0.0.1:3000/route

를 입력하면 하단 처럼 나타난다.

나는 app.get('/Picture', ... ) 으로 입력함

​

var express = require('express');
var app = express();

// 정적파일사용하기
app.use(express.static('public'));
// 앱은 쓴다 익스프레스의 정적파일을 디렉터리에.

//앱은 URL('/') 혹은 라우트에 대해 'Hello Wolrd!'로 응답
app.get('/', function (req, res) { 
    res.send('Hello World! this is homepage route');
});

// 사진도 함께 띄우기
app.get('/route',function(req,res){
    res.send('Hello This is my picture, <img src="/route.png">')
});

app.get('/login', function(req,res){
    res.send('<h1>Login please </h1>');
});

//앱은 서버를 시작하며 3000번 포트에 연결 청취
app.listen(3000, function (req,res) {
    // 괄호 내부의 req,res는 삭제해도 무방. 사용하지 않기때문
    // res.send('3000!'); 이 기능을 입력할 시 send는 정의되지 않았단 오류발생
    console.log('Example port 3000!');
});

정리하자면

정적파일을 위해선 기존 소스에 app.use(express.static('디렉터리명'));

 

웹페이지 표현하는 법

웹페이지를 사용자에게 서비스하려면 2가지 방법존재

동적 / 정적 방법

 

정적파일

한번만들어지면 언제나 똑같은 모습인 html을 만드는 것

public디렉터리에 html파일을 넣는 것

사용자가 html파일에 접근했을 때

app.js의

app.use(express.static('public'));

이 코드에 의해

express는 public디렉터리안에서 그파일을찾게되는 것임.

​

일단 public디렉터리에서

static.html 파일을 생성함

그리고 URL에 입력하면

​

위와 같이 정적인 파일은 수정즉시 반영이 가능하다.

수정될때마다 노드가 받아서 던져주므로 node app.js를 재시작할필요는 없다.

 

동적파일

이제 app.js에 라우터를 추가한다.

/dynamic 이란 주소로 접근했을 때,

static.html에 입력한 코드와 동일하게 출력하도록 만들어본다.

​

우선, static.html 코드를 그대로 복사한 뒤

var output = `여기안에 복붙한다`;

(위의 `은 ESC와 TAB키 사이의 키)

그리고 res.send(output);을 통해 response한다.

이렇게 바꾼 뒤에는

app.get이므로

다시 node app.js를 실행시켜줘야 수정사항이 반영된다. => 동적파일이므로

​

위처럼 js에서 html을 입력하게 된다면

html에서 여러개의 소스를 반복입력하는 번거로운 작업시

프로그래밍 기법을 통해 간편하게 할 수 있다.

app.get('/dynamic', function(req, res){
  var lis = '';
  for(var i=0; i<5; i++){ // 숫자만 바꿔주면 프로그래밍 횟수가 달라짐
    lis = lis + '<li>coding</li>';
  }
  var time = Date(); // 현재시간 표시하기, JS의 API인 Date()
  var output = `
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title></title>
    </head>
    <body>
        Hello, Dynamic!
        <ul>
          ${lis} // 이는 lis변수를 의미한다. `가 있기에 변수를 쓸 수 있다.
        </ul>
          ${time} // 현재시간 변수를 body태그 내부에 삽입. res.send(time)안함
    </body>
  </html>`;
  res.send(output);
});

wep_page의 Reload를 누를 때 마다 시간표시됨

​

JS통해 서버쪽에서 웹 페이지를 만들고있기 때문에

위와같은 편리한 html작업이 가능한 것

​

반면 순수 html은 현재시간표시, 화면표시된 것을 동적으로 바꿀 수 없음

 

추가