Preview _

1) 로그인이 된 상태를 사용자에게 알림 2) 로그아웃 기능 제공

1. main.js 코드

1) 로그인 상태 함수 코드 추가

function authIsOwner(request, response) {
  var isOwner = false;
  var cookies = {};
  // 쿠키값이 있는 경우만 실행.
  if (request.headers.cookie) {
    //request.headers.cookie 를 접근 가능.
    //but, 이것은 그냥 text 상태이기에, 사용하기 위해서는 가공해야 한다!!
    // 가공을 위해, cookie 모듈을 사용한다.
    // cookie.parse로 parsing 한다!! (분석 & 가공)
    cookies = cookie.parse(request.headers.cookie);
  }
  if (cookies.email === "lydo7413" && cookies.password === "111111") {
    isOwner = true;
  }
  // console.log(isOwner);
  return isOwner;
}

2) 만든 함수 불러오기_ 위치 ; 메인 페이지 불러올 때 넣어줌.

  var isOwner = authIsOwner(request, response);
  console.log(isOwner);

2. 로그인 상태를 UI에 반영

1) template.js 코드 변경

else if (pathname === "/login_process") {
    var body = "";
    request.on("data", function (data) {
      body = body + data;
    });
    request.on("end", function () {
      var post = qs.parse(body); // post 안에 담긴 사용자의 email & password
      if (post.email === "lydo7413@naver.com" && post.password === "111111") {
        // 쿠키생성
        response.writeHead(302, {
          "Set-Cookie": [
            `email : ${post.email} `,
            `password = ${post.password} `,
            `nickname = YJ`,
          ],
          Location: `/`,
        });
        response.end();
      } else {
        response.end("WHO?");
      }
    });
  }

2. 결과

• 쿠키에 password까지 보이므로, 쿠키로 인증 구현을 하면 안되는 이유다!

< main.js >

else if (pathname === "/login") {
    fs.readdir("./data", function (error, filelist) {
      var title = "Login";
      var list = template.list(filelist);
      var html = template.HTML(
        title,
        list,
        `
        <form action="login_process" method="post">
          <p><input type="text" name="email" placeholder="email"></p>
          <p><input type="password" name="password" placeholder="password"></p>
          <p><input type="submit" ></p>
        </form>  
        `,
        `<a href="/create">create</a>`
      );
      response.writeHead(200);
      response.end(html);
    });
  } 

2. 결과

3. 앞으로...

• login하면, login_process가 정보를 받음.

쿠키를 이용한 로그인을 구현할 것이다. 그러나, 심각한 보안 문제가 있으므로 현실로 쿠키로 구현하여 사용하면 안 된다!

Preview_ Auth by Cookie.

• 현재 화면은 로그인한 화면
• 쿠키에 password로 평문으로 되어있다.
• 그래서 매우 위험하다.
• +) logout 상태에서는 creat 버튼을 눌러도 작동하지 않는다. 왜냐? 인증이 안 되어 있으니까.
• 인증이 된 상태에서 생성 화면으로 가는 Application을 만든다.

http://localhost:3030/cookie 처럼, cookie directory 안의 page에 만들어 보겠다! 현재는..

• 최상위 루트에 존재한다.

1. cookie 생성 코드를 비활성화 해보자.

    // response.writeHead(200, {
    //   "Set-Cookie": [
    //     "yummy_cookie=choco",
    //     "tasty_cookie=strawberry",
    //     `Permanent=cookies; Max-Age=${60 * 60 * 24 * 30}`,
    //     "Secure=Secure; Secure", // 해설>> 일반적인) 쿠키의 이름=값; [진짜 중요한 부분!!]
    //     "HttpOnly=HttpOnly; HttpOnly",
    //   ],
    // });

2. 결과

• 그럼에도 쿠키는 아직 살아있다.

3. What do i want?

: 특정 directory 에서만 쿠키가 활성화 되도록 하고 싶다.

sol> path 기능

4. 코드 추가.

        "Path=Path; Path=/cookie",

5. 결과

6. Again_ cookie 생성 코드를 비활성화 해보자.

7. localhost:3030에 재접속 한다.

• 최상위 루트에서는 path 쿠키가 없다.
• /cookie의 하위로 접속해도 path 쿠키는 살아있고,
• 그냥 /cookie로 접속해도 path 쿠키가 살아있따.

  Con_

  < 코드 >

  var http = require("http");
  var cookie = require("cookie");
  http
  .createServer(function (request, response) {
    console.log(request.headers.cookie);
    var cookies = {};
    if (request.headers.cookie !== undefined) {
      cookies = cookie.parse(request.headers.cookie);
    }
    console.log(cookies.yummy_cookie);
    response.writeHead(200, {
      "Set-Cookie": [
        "yummy_cookie=choco",
        "tasty_cookie=strawberry",
        `Permanent=cookies; Max-Age=${60 * 60 * 24 * 30}`,
        "Secure=Secure; Secure", // 해설>> 일반적인) 쿠키의 이름=값; [진짜 중요한 부분!!]
        "HttpOnly=HttpOnly; HttpOnly",
        "Path=Path; Path=/cookie",
      ],
    });
    response.end("Cookie!!");
  })
  .listen(3030);
  

- path의 어떤 directory 를 지정하면, 원하는 path 경로와 그 경로 아래에서만 path가 활성화 되서, 웹 브라우저는 _거기에 해당되는 쿠키만_을 서버에게 전송한다!

# Domain
* cf_ 아래의 domian접속은 안 되서, 영상을 캡쳐하여 설명함. 

## 1. 코드 추가

    "Domain=Domain; Domain=o2.org",

## 2. o2.org:3000에 접속.
![](https://images.velog.io/images/glowing0512_/post/85052f90-3f41-473a-bd57-73876fd3fccc/image.png)
- 이 전에 쿠키들을 모두 지운 후에, 도메인에 접속한다. 

## 3. cookie 생성 코드를 비활성화 해보자

// response.writeHead(200, {
//   "Set-Cookie": [
//     "yummy_cookie=choco",
//     "tasty_cookie=strawberry",
//     `Permanent=cookies; Max-Age=${60 * 60 * 24 * 30}`,
//     "Secure=Secure; Secure", // 해설>> 일반적인) 쿠키의 이름=값; [진짜 중요한 부분!!]
//     "HttpOnly=HttpOnly; HttpOnly",
//     "Path=Path; Path=/cookie",
//     "Domain=Domain; Domain=o2.org",
//   ],
// });

## 4. test/o2.org 에 접속한다. 
- 앞의 test : 서브 도메인

## 5. 결과
![](https://images.velog.io/images/glowing0512_/post/d4a67147-3b9d-43b2-8599-0fe8175931c2/image.png)
- "Domain=Domain; Domain=o2.org"는...
이 앞의 어떤 서브 도메인에서도 살아남는다!
o2.org 에서만 살아남는다가 아니고!!


> **Conclusion**
path: 어느 path에서 동작 할 것인가를 제한.
domain : 어떤 domain에서 동작 할 것인가를 제한. 

WHAT IS... Secure & HttpOnly

https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies

1. "Secure=Secure; Secure", // 해설>> 일반적인) 쿠키의 이름=값; [진짜 중요한 부분!!]

• 코드 추가

        "Secure=Secure; Secure",
  

![](https://images.velog.io/images/glowing0512_/post/3a3c96c0-3f9c-4491-b4db-1cbaeb24120a/image.png)
- 현재 통신을 할 떄, http를 쓰기 때문
- MDN 사이트 로그인 되어 있는 상태일 때, ![](https://images.velog.io/images/glowing0512_/post/78c66d52-0622-4e23-8331-a67177a1e5a6/image.png)
session ID 값을 납치하면 해킹을 할 수 있다. 
그러므로, https가 아닌, http로 접근을 하면 sessionID를 쉽게 가져갈 수 있으므로, 보안 처리 한다. 



## 2.          "HttpOnly=HttpOnly; HttpOnly",


- 코드 추가

    "HttpOnly=HttpOnly; HttpOnly",

- 이렇게 추가하면, console창에 자바스크립트 언어로 웹브라우저를 제어한다. 쿠키가 화면처럼 생겼고, 콘솔에 cookie를 치면 화면처럼, HttpOnly를 보면,  flag값이 지정되어 있고, 이렇게 flag가 지정되어 있으면 자바스크립트 눈에는 보이지 않는다.
- 이 역시도 자바스크립트를 이용하여 쿠키를 훔쳐 session과 같이 중요한 data를 해킹 하는 것을 막는 것. 
![](https://images.velog.io/images/glowing0512_/post/b6cdc00a-03b1-4b89-b43f-85164b2ed5f7/image.png)


## 3.전체 코드

var http = require("http"); var cookie = require("cookie"); http .createServer(function (request, response) { console.log(request.headers.cookie); var cookies = {}; if (request.headers.cookie !== undefined) { cookies = cookie.parse(request.headers.cookie); } console.log(cookies.yummy_cookie); response.writeHead(200, { "Set-Cookie": [ "yummy_cookie=choco", "tasty_cookie=strawberry", Permanent=cookies; Max-Age=${60 * 60 * 24 * 30}, "Secure=Secure; Secure", // 해설>> 일반적인) 쿠키의 이름=값; [진짜 중요한 부분!!] "HttpOnly=HttpOnly; HttpOnly", ], }); response.end("Cookie!!"); }) .listen(3030);

쿠키가 언제까지 살아있게 할 것인가!?

https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies

1. Session 쿠키 vs Permanent 쿠키

• 둘의 차이점은 permanent 쿠키는 는 웹 브라우저를 껐다 켜도 살아있다. (세션 쿠키는 반대로 죽어있따. )
• 기존 set cookie(= Session cookie) 에 Expires or _Max-Age_를 추가하면 Permanent cookie가 된다.
• Max-Age: 현재 시점으로 얼마동안 살아 있을 것인가. (상대적 시간)
• Expires : 언제에 만료 될 것인가. ( 절대적 시간)

2. 코드

var http = require("http");
var cookie = require("cookie");
http
  .createServer(function (request, response) {
    console.log(request.headers.cookie);
    var cookies = {};
    if (request.headers.cookie !== undefined) {
      cookies = cookie.parse(request.headers.cookie);
    }
    console.log(cookies.yummy_cookie);
     response.writeHead(200, {
       "Set-Cookie": [
         "yummy_cookie=choco",
         "tasty_cookie=strawberry",
         `Permanent=cookies; Max-Age=${60 * 60 * 24 * 30}`,
    //   ],
    // });
    response.end("Cookie!!");
  })
  .listen(3030);

3. 결과

Create & Read 한 Cookie를 어디다 쓸 것인가?

https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies

쿠키의 활용과 보안에 대한 자료.

https://www.youtube.com/watch?v=HHBOUG3cpQ4&list=PLuHgQVnccGMDo8561VLWTZox8Zs3K7K_m&index=5

이번 시간은..

쿠키의 생성에 이어 생성한 쿠키를 다시 웹 브라우저가 서버쪽으로 전송 했을 때, 그 것을 WEB Application 안에서 어떻게 알아 낼 수 있는가.

Google : how to get cookie in nodejs

• 추론해보자. createServer 안에서 To read a cookie , request 요청 정보를 가진 객체를 parseCookie 함수로 보내고, 이 함수는 request의 헤더의 쿠키로 접근한다.!

1. 쿠키를 재생산.

2. npm 에서 cookie 핸들링을 찾아보자.

Google : npm cookie

https://www.npmjs.com/package/cookie

3. 코드 작성

var http = require("http");
var cookie = require("cookie");

http
  .createServer(function (request, response) {
    console.log(request.headers.cookie);
    var cookies = {};
    if (request.headers.cookie !== undefined) {
      cookies = cookie.parse("request.headers.cookie");
    }
    console.log(cookies.yummy_cookie);
    response.writeHead(200, {
      "Set-Cookie": ["yummy_cookie = choco", "tasty_cookie = strawberry"],
    });
    response.end("Cookie!!");
  })
  .listen(3030);

모든 정보 system의 핵심 : CRUD

이 중, Create를 살펴본다.

https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies

1.cookie.js

var http = require("http");
http
  .createServer(function (request, response) {
    response.end("Cookie!!");
  })
  .listen(3030);

• 쿠키 값은 없다.

• 응답하는 메시지를 조작하여, cookie를 보내본다.

2. 쿠키 생성

var http = require("http");
http
  .createServer(function (request, response) {
    // 2개의 쿠키값을 전송한다.
    response.writeHead(200, {
         // 응답하는 메시지를 전송.
         // 200;  성공했다.
         // 2번째 인자로는 객체가 들어오기로 약속됨. 이 안에 key value의 형식으로 넣어줌.
      "Set-Cookie": ["yummy_cookie = choco", "tasty_cookie = strawberry"],
    });
    response.end("Cookie!!");
  })
  .listen(3030);

결과.

1) Response : 쿠키가 존재 한다.

2) Request : 쿠키가 없다.

Reload

1) 쿠키 생성 코드 주석처리함.

var http = require("http");
http
  .createServer(function (request, response) {
    // response.writeHead(200, {
    //   "Set-Cookie": ["yummy_cookie = choco", "tasty_cookie = strawberry"],
    // });
    response.end("Cookie!!");
  })
  .listen(3030);

• 더 이상 서버가 웹 브라우저에게 'Set Cookie'를 보내지 않게 처리함!

  2) Reload

  결과_

  
• 웹 브라우저가 요청이 들어가는데, 이 안에 쿠키 값이 심어져 있다!!
• Response에는 쿠키가 없다. : 주석처리를 했으므로..
• 이제부터는 웹 브라우저는 reload를 할 때 마다 Set Cookie로 인해서 저장된 쿠키 값을 쿠키라는 헤더값을 통해서 서버로 전송한다.
• 어떤 쿠키가 생성 된지는 쿠키 탭에서 확인 가능하다.
• Applicaion 탭의 Cookies를 가면, 어떤 ip 주소에 어떤 쿠키가 심어져 있는지 알 수 있다. 위의 금지 마크는 쿠키를 모두 지우는 것이다.

웹이 등장한 이후에 수 많은 불만족들이 생겨남. 그 불만족 중에 개인화가 존재. 개인화란 사람마다 그 사람의 선택과 취향에 따라 페이지를 보여주는 것. ex_ 한 번 로그인을 하면, 그 다음에 인증이 필요 없이 자동으로 로그인이 되어 있는 것. 쿠키가 도입되면서 웹 브라우저는 웹 서버로 전송 할 수 있게 되었고, 웹 서버는 이 정보를 통해서 현재 접속한 사람을 알 수 있게 되었다.

우리는.

쿠키란? & 쿠키를 통한 인증 구현.

API를 작성 전에 DB 설계부터 한다!

01. [할 일 메모 사이트] - API 구현하기(1)

• 15) mongoose - Todo 모델 작성하기

  MongoDB에 연결 할 준비가 됐으니 이제 Todo 모델을 작성하고 기능을 구현해봅니다.

  • 예시

      const mongoose = require("mongoose");
    
      const TodoSchema = new mongoose.Schema({
        value: String,
        doneAt: Date,
        order: Number
      });
      TodoSchema.virtual("todoId").get(function () {
        return this._id.toHexString();
      });
      TodoSchema.set("toJSON", {
        virtuals: true,
      });
      module.exports = mongoose.model("Todo", TodoSchema);

    참고 - 몽구스 > 가이드 > Virtual

    mongoose에 대한 설명은 기초 수업에서 많이 다뤘으니 자세한 설명은 생략합니다! 기억이 잘 안나신다면 공식 가이드 문서를 참고하시면 좋아요 😉

• 16) 할 일 추가 API 만들기

  모델을 작성했으니 이제 할 일 추가 API를 짜볼게요! 간단히 입력받은 값을 저장하고 저장한 값을 응답값으로 주도록 하겠습니다 🙂

  단, order라는 숫자 값을 같이 저장할 건데요! 이 값은 추가한 Todo 데이터들의 순서를 가지는 값이 될 예정입니다. order가 높을 수록 해당 Todo 데이터가 상단에 위치하도록 하는 것이죠!

  추가된 항목은 항상 맨 위에 추가될 수 있게 이미 저장된 order 값보다 1이 더해진 값으로 저장하도록 구현해보세요!

  • 할 일 추가 API

      const Todo = require("./models/todo");
    
      router.post("/todos", async (req, res) => {
        const { value } = req.body; // 1) 
        const maxOrderByUserId = await Todo.findOne().sort("-order").exec();
    
        const order = maxOrderByUserId ? maxOrderByUserId.order + 1 : 1;
        const todo = new Todo({ value, order });
        await todo.save();
        res.send({ todo });
      });

  해설 )

  router.post("/todos", async (req, res) => {})

안에.

    const { value } = req.body;

는

로, { value } 값이 넘어온다. 그래서,

    const { value } = req.body;

라는 코드를 넣게 된다.

Pull Request

• 언제 이를 수행하는지, 그 흐름을 아직도 모르겠다....
• 깃!!! 잘 사용하고 싶다!!

• 이후에는 Reviewers 의 등록된 팀원들이 코드를 보고, Feedback을 주거나 approve를 진행 한다.

NodeMon 설치

$ npm i nodemon --save-dev

: -dev; 개발환경에서만 가능하도록 설치함 (이 것이 정확하게 설치는 하는 것이다)

Script에 nodemon 실행 추가.

"backend" 카로 명령어 추가함

nodemon 실행

https://www.youtube.com/watch?v=wMJ7hQ2FKfQ

1) Git이란

• 분산 관리 시스템 : 여러 개발자의 협업 가능.

2. SSH 를 이용한 GitHub

https://www.youtube.com/watch?v=0yVqbHuZ3FA

1. DB directory & file 생성

2. Users.js 파일 코드

const mongoose = require('mongoose')

const userSchema = mongoose.Schema({
  name: {
    type: String,
    maxlength: 50
  },
  email: {
    type: String,
    trim: true, // 스페이스를 없애주는 역할
    unique: 1
  },
  password: {
    type: String,
    maxlength: 50
  },
  role: {
    type: Number, // number : 1 ; 관리자 /0 ; 일반 유저 같이..
    default: 0
  },
  image: String,
  token: { // 유효성 관리
    type: String
  },
  tokenExp: { // 토큰의 유효기간
    type: Number
  }
})

const User = mongoose.model('User', userSchema)

module.exports = User // 다른 곳에서도 쓸 수 있도록 이 모듈을 export