728x90
반응형

미들웨어

미들웨어는 중간단계 역할을 하는 존재입니다. 즉, 응답과 요청 사이에 express 자체에 있는 기능 외에 추가적인 기능을 넣어주는 것 입니다. npm으로 다운받아서 사용해도 되며 express 자체 미들웨어를 사용해도 됩니다. 미들웨어에는 인증, 예외처리, 세션처리, 라우터 등 많은 종료가 있습니다. 미들웨어는 app.use() 메서드를 사용합니다. 

next() : 다음 미들웨어로 가는 역할
next(error) : 오류 처리 미들웨어로 가는 역할
next('route') : next()로 같은 라우터에서 분기처리를 할 때 사용

express로 서버를 만들때 순서

  1. express를 불러옴
  2. 포트설정
  3. 공통부분 미들웨어 작성
  4. 라우터 구성
  5. 404 처리 미들웨어 구성
  6. 오루처리 미들웨어 구성
  7. 서버 포트를 리스닝

 

자주 사용하는 미들웨어

express.static

static 파일은 이미지, css, 스크립트 파일과 같이 그 내용이 고정되어 있어 파일 내용 그대로를 보여주면 되는 파일을 말합니다. 이러한 파일은 따로 폴더를 지정하여 놓으면 관리가 편합니다. static 은 express 안에 기본적으로 포함이 되어 별도의 설치없이 사용이 가능합니다. 아래와 같이 express_server_static.js 파일을 생성하여 줍니다.

const express = require("express");
const app = express();

app.set("port", process.env.PORT || 8080);

app.use(express.static(__dirname + "/public"));

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/test2.html");
});

app.listen(app.get("port"), () => {
  console.log(app.get("port") + "포트에서 서버 실행중...");
});

같은 폴더안에 public 폴더를 만들고 그곳에 sample.png 파일을 둡니다. 그리고 test2.html의 내용은 아래처럼 작성합니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>test2</title>
  </head>
  <body>
    <h1>Node.js Express Server2 Test html2 page</h1>
    <p>This is Main page.</p>
    <img src="./sample.png" width="500" height="350" />
  </body>
</html>

작성된  express_server_static.js 를 실행하여 localhost:8080 에 접속하면 아래와 같은 화면이 나타납니다.

이렇게 express.static 을 이용하면 html 파일 내에 /public 이라는 경로를 따로 명시해 주지 않아도 자동으로 서버에서 static 폴더로 지정된 곳에 해당 파일을 찾아 화면에 띄어주게 됩니다. 경로를 숨길수 있어 보안에도 도움이 됩니다.

 

router

클라이언트로부터 요청이 왔을대 서버에서 어떤 응답을 보내주어야 할지 결정해주는 미들웨어 입니다. 

아래 예제 코드는 localhost:8080 으로 들어올때와 localhost:8080/member/ty 로 접속했을때 다른 html 화면을 띄어주는 예제입니다. 

const express = require("express");
const app = express();

app.set("port", process.env.PORT || 8080);

app.use(express.static(__dirname + "/public"));

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/test2.html");
});

app.get("/member/:id", (req, res) => {
  res.send(req.params.id + "님의 마이 페이지입니다.");
});

app.listen(app.get("port"), () => {
  console.log(app.get("port") + "포트에서 서버 실행중...");
});

위 코드를 작성하여 실행하면, localhost:8080 로 접속했을 때는 위 express.static에서 만든 화면이 출력이 되지만 localhost:8080/member/ty 로 접속하면 아래와 같은 페이지가 출력됩니다.

express.json, express.urlencoded

클라이언트에서 post, put 요청 시 들어온 정보를 가진 req.body에 접근하기 위해 필요한 미들웨어입니다. 요청 정보가 url에 들어온 것이 아니라 request body에 들어있는데, 이 값을 읽을 수 있는 구문으로 파싱하고 req.body로 옮겨주는 역할을 하는 것입니다.

express.json 은 req.body가 json 형태일 때, express.urlencoded는 폼에 대한 요청일 때 사용합니다.

 

cookie-parser

쿠키는 클라이언트가 요청을 보낼 때마다 키-쌍으로 이루어진 쿠키를 보내고 서버에서는 클라이언트가 보낸 쿠키를 읽어 사용자가 누군지 식별합니다. 처음에 한 번만 서버에서 res.writeHead() 메서드를 통해 'Set-cookie'에 값을 넣어줍니다. 이렇게하면 브라우저에 키-쌍으로 이루어진 쿠기가 헤더에 저장됩니다. 이것을 자동으로 쿠키를 매번 요청할 때마다 서버에게 보냅니다.

728x90
반응형
728x90
반응형

express 모듈을 이용하여 가볍고 빠른 프레임워크를 만드는 방법입니다. 

  • 자바스크립트의 프론트엔드 프레임워크 : React.js, Angular.js, Vue.js
  • 자바스크립트의 백엔드 프레임워크 : node.js 의 express

 

express 설치

터미널을 이용하여 아래의 명령어로 express 를 설치합니다.

C:\dev\nodejs>npm install express

설치가 완료되면 nodejs 폴더 안에 node_modules 라는 폴더가 생성이되고 이곳에 express 동작을 위한 모듈들이 자동으로 설치가 됩니다.

 

express 코드 작성 1

express 사용을 연습하기 위하여 아래와 같이 코드를 작성합니다. 저는 nodejs 폴더 아래 express 폴더를 만들고 express_server.js 라고 파일을 만들어 아래 코드를 작성하였습니다.

const express = require("express");
const app = express();

app.get("/", (req, res) => {
  res.send("Hello World!!!!");
});

app.listen(8080, () => console.log("8080포트에서 서버 실행중..."));

js를 실행하여 브라우저로 localhost의 8080 포트에 접속을 하면 아래와 같이 표시됩니다.

express 코드 작성 2

웹 페이지를 만드는 방법으로 연습을 해봅니다. 우선 test.html 페이지를 만듭니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>test</title>
  </head>
  <body>
    Node.js Express Server Test html page
  </body>
</html>

이번에는 아래와 같이 js 파일을 수정합니다.

const express = require("express");
const app = express();

app.set("port", process.env.PORT || 8080);

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/test.html");
});

app.listen(app.get("port"), () => {
  console.log(app.get("port") + "포트에서 서버 실행중...");
});

수정 후 js 파일을 실행고 브라우저로 접속을 하면 아래와 같이 html 페이지를 화면에 표시하는 것을 확인 할 수 있습니다.

 

728x90
반응형
728x90
반응형

간단하게 Node.js를 이용하여 서버를 만드는 방법입니다.

 

아래와 같이 간단하게 코드를 작성하여 js파일을 만듭니다. 저는 simple_server.js 라고 하겠습니다.

const http = require("http");

http
  .createServer((req, res) => {})
  .listen(8080, () => {
    console.log("8080포트에서 서버 연결 중...");
  });

 

만들고나서 http://localhost:8080 으로 접속하면 아래와 같은 화면이 나타납니다.

이번에는 위에서 작성한 js파일을 실행하여 봅니다. 실행은 아래와 같이 실행 할 수 있습니다.

C:\dev\nodejs\test> node simple_server.js

위처럼 실행하면 "8080포트에서 서버 연결 중..."이라는 메시지가 나오면 성공입니다. 이런 상태에서 다시한번  http://localhost:8080에 접속해 봅니다.

아까와는 다르게 로딩중으로 표시되지만 아무런 변화는 없습니다. 이는 서버가 실행되고 있으나 아직 아무것도 등록해주지 않았기 때문에 계속 로딩만 표시되는 것 입니다. 서버를 종료하기 위해서는 명령어를 입력했던 터미널에서 ctrl+c 를 입력하면 서버가 종료됩니다.

 

요청에 대한 응답

이번에는 페이지를 한번 만들어보도록 하겠습니다. 아까 simple_server.js 파일을 아래와 같이 수정하여 주십시오.

const http = require("http");

http
  .createServer((req, res) => {
    res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
    res.write("<h1> Node.js Server </h1>");
    res.end("<p>http page test ... </p>");
  })
  .listen(8080, () => {
    console.log("8080포트에서 서버 연결 중...");
  });

수정 후 다시한번 node 명령어를 실행하여 서버를 실행 후  http://localhost:8080에 접속해 봅니다. 그러면 아래와 같은 화면이 표시되는 것을 확인할 수 있습니다. 

간단히 코드에 대한 설명을 해보겠습니다. .createServer() 함수는 말 그대로 서버를 만드는 함수입니다. res.writeHead()는 응답에 대한 헤더 정보를 기록하는 함수이고 res.write()에는 클라이언트로 보낼 데이터를 넣어주면 됩니다. res.end()는 응답을 종료하는 메서드로 응답을 종료합니다.

createServer()함수 뒤에 .listen()을 붙여 클라이언트와 연결할 포트번호와 서버가 연결되면 실행할 콜백 함수를 넣습니다.

 

파일을 보내는 응답 코드

이번에는 html 문서를 응답으로 보내도록 하겠습니다. 일단 아래와 같이 html 을 만들어 줍니다. 저는 test.html 이라고 하겠습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>test</title>
  </head>
  <body>
    Node.js Server Test html page
  </body>
</html>

그리고 js 파일을 아래와 같이 수정합니다.

const http = require("http");
const fs = require("fs").promises;

http
  .createServer(async (req, res) => {
    try {
      const f = await fs.readFile("./test.html");
      res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
      res.end(f);
    } catch (err) {
      console.error(err);
      res.writeHead(500, { "Content-Type": "text.html; charset=utf-8" });
      res.end(err.message);
    }
  })
  .listen(8080, () => {
    console.log("8080포트에서 서버 연결 중...");
  });

다시한번 서버를 실행하여 http://localhost:8080 에 접속하면 아래와 같은 페이지를 볼 수 있습니다.

728x90
반응형
728x90
반응형

Node.js 로 서버를 만들어보려 합니다. 간단히 Node.js 와 자바스크립트에 대하여 간단히 정리를 해보았습니다.

개요

  1. Node.js 란, 자바스크립트 런타임을 의미합니다.
  2. Node.js는 논블로킹/비동기 처리 방식이기 때문에 사용하기 어렵다고 합니다. 
    논블로킹/비동기는 작업 흐름이 순차적이지 않고, 응답을 기다리지 않습니다. 블로킹/동기 방식보다 자원 낭비가 적습니다.
  3. Node.js 는 싱글 스레드이지만 이벤트 루프가 있습니다. 
    이벤트 루프는 이벤트를 감지하며 작업을 위한 스레드를 생성하여 이벤트를 처리합니다.

 

ECMAScript(=ES)

ECMAScript 는 자바스크립트, J스크립트, 액션스크립트가 따르는 표준을 말합니다. 스크립트 언어들의 표준을 지키기 위하여 매년 6월마다 새로운 기능 혹은 규칙을 개정합니다. ES6(=ES2016) 버전에서 자바스크립트가 혁신적이게 바뀌게 되며 이 시점을 전후로 최신인지 구식인지를 판가름합니다.

 

간단한 자바스크립트 문법 정리

변수, 호이스팅

ES6 이전에는 변수 선언시 var를 사용했지만, ES6 이후로 되도록 const, let 를 사용해야합니다. 이유는 var의 변수 호이스팅과 function-level-scope로 인해 생기는 문제 때문입니다.

  • 변수 호이스팅(Hoisting) : 변수의 선언과 초기화가 동시에 이루어져, 아직 값이 없음에도 오류가 나지 않는 현상
  • function-level-scope: 함수의 블록 범위 내에서 선언한 변수는 함수 내에서만 인정하고 함수 외부에서 선언한 변수는 모두 전역변수가 된다

let과 const 의 차이

let과 const는 block-level-scope 입니다. 둘의 차이를 보면 let은 값을 재할당 할 수 있어 값의 변경이 가능합니다. const는 값을 재할당할 수 없어 변경할 수 없습니다. 

클로저

내부 함수가 외부 함수의 scope에 접근할 수 있는 것을 이야기합니다. 자바스크립트에서 scope는 함수 단위로 생성이됩니다. 한 함수의 inner()함수의 scope가 outer()함수의 scope를 참조하고 있고 outer()의 실행이 끝나고 소멸된 이후에도 inner()함수가 outer()함수의 스코프에 접근할 수 있다 것을 이야기합니다.

 

자주 사용하는 내장 함수

함수 설명 함수 설명
forEach() for문을 짧게 줄임 indexOf() 원소의 인덱스를 반환
findIndex() 배열의 요소가 객체,배열 일 때 판별 함수를 만족하는 첫 식별자 반환 find() 찾은 값을 반환
shift() 첫 번재 원소 제거 및 반환 unshift() 맨 앞에 새 원소를 추가
filter() 조건을 만족하는 배열 생성 splice() 인덱스로 특정 항목을 제거
slice() 항목을 제거해 새 배열 생성 pop() 마지막 원소 제거 및 반환
join() 배열 요소를 문자열로 합침 concat() 배열합침
reduce() 누적 값을 계산 map() 배열 각 원소 반원

자바스크립트의 비동기 처리

콜백함수, Promise

 콜백은 나중에 실행되는 코드를 의미합니다. A()라는 함수가 있을때, 인자로 어떤 함수를 넣어주었다고 한다면 A함수의 모든 명령어를 실행한 후 마지막으로 넘겨받은 인자 callback을 실행하게 될것이고 여기서 인자로 들어가는 함수를 콜백 함수라고 합니다. 콜백함수를 사용하는 이유는 이를 이용하여 비동기 작업을 동기적으로 처리할 수 있기때문입니다.

 Promise는 코드의 중첩이 많아지는 콜백 지옥을 해결하게 해주는 자바스크립트 API입니다. 보낸 요청에 대해 응답이 준비되었을 때 알림을 주는 알리미 역할을 합니다.

async/await

ES7.6부터 사용할 수 있는 문법으로 Promise의 단점을 보안해주는 패턴입니다. Node.js는 8버전부터 async/await를 지원합니다. async/await를 사용하면 new Promise로 Promise 객체를 선언하고 resolve, reject를 넘겨주는 부분은 숨기겨 코드의 양이 줄어듭니다. try/catch를 통해 오류를 다룰수 있다는 장점도 존재합니다.

await는 async 키워드를 붙인 함수 안에 lock을 걸어 놓고 싶은 부분에 await를 붙이기만하면 됩니다. async/await를 이용하게 되면 비동기로 처리하고 싶은 함수에 async를 붙이고, 비동기 처리를 할 특정 부분에 await를 붙이기만 하면 됩니다.

비동기 상황에서의 예외 처리

비동기 상황에서의 예외처리는 Promise의 .catch()를 이용하거나, Promise의 .then()을 이용하는 방법이 있습니다. 또한, async/await의 예외처리 방식으로 사용이 가능합니다.

 

 

 

 

 

 

728x90
반응형

+ Recent posts