[20.09.14 Hello_Node, Hello_Node_2] pug, client에게 데이터 보내는 방식 get, post, module.exports, *.js,*.pug코드 해석

Hello_Node

처음에 nodejs를 이용해서 프로젝트를 생성할거다.

express 프로젝트 명

 

• express

nodejs에서 웹 프로젝트를 만들 때 가장 많이 사용되고 있는 프레임워크 중에 하나이다.

---

프로젝트를 만들고 나서 package

  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1",
    "pug": "^3.0.0"
  }

우리가 사용하는 nodejs 프로젝트에서 기본적으로 가지고있는 dependency들임!

jade라는 친구가 Spring에서 jsp

View단에 해당하는 친구!

jade는 이름이 바꼈다 pug로!

 

  "scripts": {
    "start": "node ./bin/www"
  },

start 라는 명령어를 실행하게 되면

node를 이용해 되면 bin폴더아래에 www라는 파일을 읽어서 실행하라

이 코드는 다시 서버를 실행시켜야하는 문제를 일으킬 수 있다.

 

그래서 nodemon을 실행시켜줌!

var app = require('../app');
var debug = require('debug')('hello-node-2:server');
var http = require('http');

// 우리가 만들 nodejs의 가장 기본적인 항목들

 

www 파일에서 가장 기억해야할 부분은

var port = normalizePort(process.env.PORT || '3000');

nodejs로 실행하는 프로젝트는  3000번 포트에서 작동되도록 한다는 이야기.

 

var server = http.createServer(app);

// >> 이친구가 서버를 구동 시켜주는 코드

server.listen(port);

// 이 함수가 시작됨으로 해서 web browser req를 수신할 준비가 됌

>> www 파일

>> Hello_Node/pacakage.json

---

app.js 의 코드 해석

var express = require("express");

require라는 함수를 이용해 express모듈을 가져오기 위해서는

package.json의 express라는 dependency가 반드시 있어야한다.

해당되는 dependency들이 있어야함.

 

구버전에서는 import라고 사용했지만

신버전에서는 require라는 함수를 사용한다.

 

express라는 친구를 이용해 app이라는 친구를 생성하겠다.

쉽게 말해 nodejs 서버 생성자라고 보면 된다.

 

views라는 속성에 views라는 폴더에 화면단에 해당하는 파일들을 저장하겠다는 의미.

__dirname : nodejs의 현재 시스템 폴더 (이미 만들어져서 제공되는 변수, 시스템 변수)

 

path.join :

 __dirname에저 저장된 폴더 문자열과 views라는 문자열을 연결하여

 하나의 path(폴더)로 지정하라

 

app.set("view engine", "pug");

그리고 우리가 사용할 view의 engine은 pug를 사용하겠다는 의미.

 

// resources 폴더처럼
// Controller를 거치지 않고, 직접 핸들링 할 파일들을 저장하는 곳
app.use(express.static(path.join(__dirname, "public")));

스프링처럼 ccs, img 파일들을 직접 가공없이 client에 보내는 역할을 수행

 

// 사용자가 localhost:3000/* 라고 요청을 하면
// indexRouter에게 제어권을 넘겨라
app.use("/", indexRouter);

 

var indexRouter = require("./routes/index");

"./routes/index" : 현재 폴더 아래에 있는 routes아래의 index.js라는 파일을 찾아서

indexRouter : 그 파일을 쓸 수 있게 만들어 주라 (import 해달라) (변수 선언)

 

※ index.js라고도 해줘도 되지만 생략 가능!     그래서 ./routes/index 인 것

 

>> app.js

---

index.js 코드 해석

// localhost:3000/를 GET 방식으로 요청을 하면
// function() 함수를 실행하라
// router.get() 콜백함수, 함수
// function(req,res) {  }
// req(request) : client(web browser)가 요청하는 여러가지 정보를 담고와서
//  서버에 전달해 주는 역할을 수행한다.
// res(response) : 서버가 client에게 응답하는 것들이 담겨있다.
router.get("/", function (req, res, next) {
  // views/index.pug 파일을 읽어서 rendering한 후
  // client에게 응답하라
  // title이라는 변수에 Express라는 문자열을 담고,
  // rendering할 때 index.pug에게 전달하라
  res.render("index", { title: "대한민국" });
});

누군가 /로 요청을 하면

response객체의 render함수를 호출하는데 

index.pug파일을 읽어서 렌더링한 후에 클라이언트에게 응답하라는 소리

 

사용자가 / root로 요청을 하면

views 폴더에있는 index.pug라는 파일을 보내라

그때, title이라는 변수에 대한민국이라는 문자열을 같이 보내서 rendering 실행

 

 

client에게 값을 전달할때 사용하는 방식 2가지

• params

  let num1 = parseInt(req.params.num1);

// req로 부터 params라는 객체를 통해
// num1값을 추출해서 숫자로 변경한 다음 저장해라

• query

  // client에서 num2라는 query변수에 값이 담겨오면
  // 그 값을 정수로 바꾸어서 num2에 저장하고
  // 그렇지않으면 num2에 정수 40을 저장하라
  let num2 = parseInt(req.query.num2) || 40;

 

 

client에서 데이터를 보낼 때 보내는 방법 3가지

 - 주소창에 ?변수=값 형태 : req.query

// ?변수=값 형태로 전달된 값을 추출하기
let num1 = parseInt(req.query.num1) || 30;

 - 주소창에 값을 :으로 값을 주소처럼 보내는 형태 : req.params (Rest

// localhost:3000/add/숫자1/숫자2 라고 요청을 하면
// 숫자1에 있는 값을 추출, 숫자2에 있는 값을 추출하여
// 정수로 변환한 다음 덧셈하여 결과를 response하라
router.get("/add/:num1/:num2", function (req, res) {
  let num1 = parseInt(req.params.num1);
  let num2 = parseInt(req.params.num2);
  let sum = num1 + num2;
  res.send(sum + "");
});

 - input form에 들어있는 값을 보낼 때는 : req.body

// form에서 input주소로 데이터를 보내오면
router.post("/input", function (req, res) {
  let m_user = req.body.m_user;
  res.send("전송된 user : " + m_user);
});

 

※ req : 클라이언트로부터 요청이 넘어오면 그 정보를 전부 가지고 있음

      응답을 되돌릴때는 res의 함수를 이용해서 전송한다라고 보면된다.

 

 client에서 서버로 request를 수행할 때

 변수에 값을 담아서 보내는 방법

 

// post 함수 (form에 입력된 데이터를 전달할 때)

 1. 보안적 측면, 내용적 측면에서 매우 좋은 방법

 form, input을 이용하여 데이터를 담아서 보내는 방법 (body)

form(action="/home/input", method="post")
  input(type="text", name="m_user")

 

// get 함수 ( a 태그를 이용해서 전송을 할 때)

 2. 간단한 데이터를 서버로 보내고자할 때 (query)

 query문자열로 만들어서 보내는 방법

 http://localhost:3000url?변수1=값&변수2=값&변수3=값

 가. 전체 query문자열이 255자를 넘어가면 데이터가 잘린다.

 나. 데이터가 주소창에 노출되어 보안에 취약하다.

 다. 서버로 전송되는 변수 이름이 노출되어 보안에 취약하다.

a(href="/home/input?nation=korea") query

 

 3. RestFull(Representation Satae Transfer) 방식 (params)

 최근에 web 어플리케이션에서 사용되는 데이터 전송 방식

 간단한 데이터를 서버로 보낼 때 query문자열을 대체하는 방법

 params 주소 사용

 http://localhost:3000/input/30/40/50 이런 주소를 서버로 전송하면

 ~/input/까지는 url로 인식되고 이후의 30, 40, 50이라는 값은

 params변수에 담아서 서버에서 사용할 수 있도록 하는 체계

a(href="/home/input/korea") params

 

 >> query방식보다는 RestFull방식을 사용하자고 권장하는!

>>>> Node_Hello_2/ home.js

 

Router : 경로설정

  spring : Controller 클래스로 선언

  spring에서 Controller가 하는 일과 유사한 기능을 수행한다.

  client의 request 요청 주소를 분석하여 적절한 요청을 수행하고

  응답을 수행하는 역할을 한다.

>> index.js

---

home.js 코드 해석

 

 Router를 만드는 절차

// express의 routing 기능을 활용하기 위해
// express 프레임워크에서 지원하는 routing 기능을 사용해서
// client에 mapping을 처리하는 절차
// 1. express import
var express = require("express");
// 2. express로 부터 router선언

 

client의 request method

router에는 4개의 함수가 있지만 get,post를 가장 많이 사용함

 - router.get();

 - router.post();

 - router.put();

 - router.delete();

---

.main
    .sub 우리나라만세
    .sub 대한민국만세
    .sub Republic Of Korea
//- pug에서는 div를 생략 할 수 있다.
//- .main이라고 있으면 div가 생략되어있다고 보면 된다.

우리가 개발한 pug 파일은 한번 컴파일 된다.

html파일로 만들어진 다음에 client에게 전송이된다.

pug라는 자체가 nodejs에 의해서 div.html이라는 파일이 만들어지는 것

 

우리가 만드는 pug라는 파일이 html로 변경이되는데

이러한 것들을 transfiler(파일을 변환시킨다) 라고 한다.

 

>> div.pug

 

pug view

1. 전통적인 html 코딩이 아닌 새로운 문법구조로 만드는 view 파일

2. html과 달리 tag가 열리기만 하고 닫히는 tag가 없다.

3. 각 tag의 시작은 왼쪽정렬로 정확히 구조가 일치해야한다.

4. tag에 tag를 포함할 때는 포함되는 tag의 앞에 tab을 추가해주어야한다.

5. pug nodejs에 의해서 transfiler(파일변환)가 되고 실제로는 html 코드로 만들어져서 client에 전송이 된다.

6. nodejs에 설치한 pug 모듈에 의해서 파일이 변환된다.

---

Hello_Node_2

밖으로 내보내기

// express를 사용한 router 설정객체를
// app.js에서 import하여 사용할 수 있도록 내보내기 기능
// 이걸 안하면 home.js를 아무리 만들어도 그 기능을 사용할 수 없음
// 밖으로 내보내는..
module.exports = router;

 

• form 에 입력된 데이터를 받을 때 post 함수를 사용한다.

// form에 입력된 데이터를 받을 때 post함수를 사용함!
router.post("/input", function (req, res) {
  // res.send("INPUT POST Mapping");
  let m_user = req.body.m_user;
  // res.send("입력한 user : " + m_user);
  res.render("home", { m_user: m_user });
});

 

• list 배열에 json 객체 추가

router.get("/list", function (req, res) {
  // 비어있는 배열 list
  let list = [];

  // list배열에 json객체를 추가하기
  list.push({ name: "홍길동" });
  list.push({ name: "이몽룡" });
  list.push({ name: "성춘향" });
  list.push({ name: "장보고" });
  list.push({ name: "임꺽정" });

  // list한테 list.pug를 실어서 보내는 것
  res.render("list", { list: list });
});

>> home.js

 

• 게시판을 만들거나 리스트를 만들 때 자주 사용하는 코드

block content
    ul
        //- 반복문을 쓸 때 each라고 사용함
        each vo in list
            li= vo.name

pug에서는 for라는 키워드 말고 each라는 키워드를 사용한다.

서버에 보낸 list를 반복문으로 회전하면서 vo에 하나씩 담아라

vo에 있는 내용을 li 태그를 이용해 뿌려라 하는 코드

---

layout.pug

layout.pug 파일은 개발자가 직접 open을 하거나 핸들링하는 경우는 많지않다.

공통적으로 설정되는 header, link등을 작성해두면

다른 pug파일을 rendering 할 때 같이 묶어서 rendering을 수행할 수 있다.

  body
    //- block content라고 설정을 해두면
    //- rendering되는 pug파일에 같은 이름의 block이 있어야하고
    //- 파일을 rendering할 때 그 이름을 참조하여 한꺼번에 묶어서 연동해준다.
    //- 만약 index.pug를 rendering하라는 코드가 있으면
    //- index.pug의 block content위치에 있는 코드를
    //- layout.pug의 여기 위치에 부착하여 하나의 html로 변환작업을 한다.
    block content
    //- 실제 이코드는 index.pug에 있는 block 코드가 대신 들어가는거임
    //- index.pug에서는 
    //-     doctype html
    //- html
    //-   head
    //-     title= title
    //-     link(rel='stylesheet', href='/stylesheets/style.css')
    //-   body
    //- 이 부분들이 extends되어있고
    //- block content부분은 index.pug에 있는 코드들이 부착되어있는 것과 같음

예를들어 router에서 index 파일을 rendering하라고 지시를 하면

index.pug에 맨 위에있는

extends layout

layout.pug를 이 위치에 갖다 붙인다.

index.pug를 렌더링하지만

자동으로 layout.pug라는 파일이 자동으로 import된다

 

그리고 layout.pug안에 있는 block content 코드는

index.pug에 block content아래에 있는 코드들이 대체한다.

 

>> layout.pug

---

rendering을 수행할 때 변수를 취급하는 방법

   tag= 변수명 : text 방식으로 문자열 표시 (tag를 그대로 보여줘버림)

   #{변수명} : text 방식으로 문자열 표시 (tag를 그대로 보여줘버림)

   !{변수명} : 문자열 중간에 tag등이 있으면

     tag의 속성을 반영하는

     html로 변환되어 표시

h1 !{title}
p Welcome to !{title}

>> index.pug

---

layout.pug파일을 좀 더 쉽게 이해하려면 이 코드 확인 !!

//- 현재 파일을 rendering할 때 layout.pug를 포함하겠다.
extends layout

//- layout.pug파일의 block content가 있는 부분에 
//- 아래 코드를 부착하라는 코드
block content
    //- 일반적인 문자열은 태그명 다음에 한칸띄고 작성
    h1 My Home
    p #{m_user}님의 방문을 환영합니당 :)
    p 나의 홈페이지 :)

>> home.pug