포스코 X 코딩온 7기 6주차 ch1. MVC패턴과 MYSQL연동하기, Cookie, Session

포스코 X 코딩온 7기 6주차에는

 form구조로 구현한 로그인, 방명록 기능을

mvc구조로 나누고, mysql을 연동 한 후

방명록 기능, 로그인/회원가입 기능을 구현하였다

 

또한 위에서 구현한 로그인, 방명록 코드를 가지고,

Sequelize로 재구성 하는 시간을 가졌다.

 

또 바로 비밀번호 암호화 하는 방법,

cookie, seesion에 대한 진도도 나갔다.

 

이모든 것이 일주일 만에 나간 진도라

뒤따라 가느라 애좀 먹었다.

 

단기간에 많은 것을 배운 탓인지,

아니면 내가 수업시간에 집중을 못 한 탓인지

많이 헷갈린다,,

 

일단 MVC패턴과 MYSQL연결하는 법에 대해서 먼저

리뷰해보고,

Ssequelize에 대해서도 리뷰해 보도록 하겠다!

 

 

---

수업 리뷰에 앞서 헷갈리는 거 ! 찾아본 거 기록 

 

❓ legacy와 sequelize의 차이

 

1. Legacy:
   • Legacy는 일반적으로 ORM(Object-Relational Mapping)이나 SQL 쿼리를 작성하는 데 사용되는 기존의 방식을 의미합니다.
   • 데이터베이스와의 상호 작용을 위해 직접 SQL 쿼리를 작성하고, 결과를 직접 처리해야 합니다.
   • 개발자가 직접 SQL 문법에 익숙해야 하고, 데이터베이스와의 상호 작용에 대한 세부 사항을 관리해야 합니다.
   • 직접 SQL을 작성하고 실행하기 때문에 세밀한 제어와 최적화가 가능합니다.
   • 하지만 SQL 문법에 대한 이해와 데이터베이스 관련 작업에 대한 추가적인 작업이 필요합니다.
2. Sequelize:
   • Sequelize는 JavaScript 기반의 ORM(Object-Relational Mapping) 라이브러리입니다.
   • 데이터베이스와의 상호 작용을 위해 JavaScript 객체와 메서드를 사용하여 데이터를 조작할 수 있습니다.
   • SQL 쿼리를 자동으로 생성하고 실행하기 때문에 SQL 문법에 대한 이해를 크게 요구하지 않습니다.
   • Sequelize는 다양한 데이터베이스 시스템과 호환되는 ORM으로, 데이터베이스 간 이식성을 제공합니다.
   • 모델과 관계 설정, 데이터 유효성 검사, 쿼리 생성 및 실행, 결과 처리 등을 쉽게 처리할 수 있습니다.
   • Sequelize는 ORM 패턴을 따르기 때문에 개발자는 객체 지향적인 코드를 작성하여 데이터베이스와 상호 작용할 수 있습니다 
   •  
   • 요약하면, Legacy는 기존의 SQL 쿼리 작성 및 직접적인 데이터베이스 상호 작용에 의존하는 방식입니다. 반면에 Sequelize는 ORM 패턴과 JavaScript 객체를 사용하여 데이터베이스와 상호 작용하며, SQL 쿼리 작성과 데이터베이스 관련 작업을 단순화하는 데 중점을 둡니다. Sequelize를 사용하면 개발자는 데이터베이스 작업에 대한 세부 사항을 추상화하고, 코드의 가독성과 유지 보수성을 향상시킬 수 있습니다.

 

 

시퀄라이즈로 작성하게 되면,

controller에 경로, sequelize쿼리문을 기재하고,

model에는 mysql정보를 기재한다

 

 

 

---

MVC패턴과 MYSQL연동하기

 

일단 다시금 상기 시켜보는 

MVC흐름 ..

 

파일 구조는 이렇다!

 

구현해 볼 것!

 

npm install mysql

을 입력하여 mysql을 설치하여 준다.

 

model/visitor.js

- 외부에서 최상위 root계정으로의 비밀번호 접근을 허용하지 않는다.

 

- mysql에서 root계정으로의 접근을 허용하지 않는 이유는 

보안과 관련이 있다. root계정은 mysql에서 가장 높은 권한을 가지느 사용자 계정으로,

데이터 베이스와 관련된 모든 작업에 대한 권한을 갖는다.

 

따라서 root계정이 외부에서 접근 가능한 상태로 설정되어 있다면,

해커나 악의적인 사용자에게 큰 위험이 될 수 있다.

 

- 즉, 새로운사용자 (user 계정) 를 만들고 

그 사용자로 접근을 해야한다.

 

터미널 창에서 mysql사용자 추가하고, db에 권한 부여하기

 

 

model/Visitor.js>

❓콜백함수를 사용하는 이유는?

 

- 콜백함수는 비동기적 작업이 완료되었을 때 실행되는 함수이다.

 

- 위의 코드에서 exports.MgetVisitor1 함수는 mysql쿼리를실행하여

결과를 가져오는 비동기 작업을 수행한다.

 

이때, 콜백함수를 인자로 전달하여 

결과를 반환하고 처리할 수 있다.

 

- 이를 통해 비동기 작업이 완료되었을 떄,

'rows'를 전달받아 원하는 로직을 수행할 수 있다.

 

-콜백함수 대신, promises나 async/await와 같은

비동기 제어 패턴을 사용하여도 비슷한 결과를 얻을수 있다.

 

 

controller/visitor.js>

 - res.render("visitor", {data: result});;방문자 데이터를 

visitor페이지에 전달하고 해당 페이지를 렌더링한다.

 

 

 

router>

 

---

 

세션(Session)과 쿠키(Cookie)의 차이 

 

1. 세션(Session)

- 세션은 서버 측에서 사용자 상태를

추적하기 위해 서버에 데이터를 저장하는 방식

 

- 사용자가 웹 사이트에 접속하면

서버는 고유한 세션식별자를 생성하고 클라이언트에게 전달

 

- 클라이언트는 이 세션 식별자를 쿠키를 사용하여 저장하거나

url의 쿼리 매개변수에 전달

 

- 서버는 클라이언트의 세션 식별자를 기반으로

사용자의 세션 데이터를 저장하고 관리

 

ex. 사용자 로그인 시 세션을 생성하고 세션에 사용자 정보를 저장하여

인증된 상태를 유지하는경우

 

2. 쿠키(Cookie)

- 쿠키는 클라이언트 측에서 사용자 상태를 추적하기 위해

클라이언트에 데이터를 저장하는 방식

 

- 서버는 클라이언트에게 쿠키를 설정하여 

클라이언트가 다시 요청할 때 마다 쿠키를 함께 전송

 

- 서버는 클라이언트가 전송한 쿠키를 기반으로

사용자의 상태를 추적하고 관리

 

ex. 쇼핑 웹 사이트에서 장바구니에 상품을 추가하고,

클라이언트의 쿠키에 장바구니 아이템을 저장하여

다음 방문시에도 장바구니에 상품이 유지되는 경우

 

 

❓세션과 쿠키의 보안과 개인 정보 보호

 

세션은 서버에 데이터를 저장하기 때문에 

일반적으로 쿠키보다 안전하다.

 

그러나, 세션은 서버 측 리소스를 사용하므로

서버의 부하를 증가시킬 수 있다.

 

반면, 쿠키는 클라이언트에 데이터를 저장하므로

서버 부하는 감소하지만, 

클라이언트에서 수정이 가능하기 떄문에 보안에 민감한 데이터를

저장하는 데는 제한이 있다.

 

 

Cookie 사용하기

📌cookie사용시 필요한 설치 , 메소드 등

npm install cookie-parser //쿠키 설치하기

const cookieParser = require("cookie-parser");
app.use(cookieParser()); 
// cookie-parser 미들웨어를 사용하는 부분

res.cookie('쿠키이름', '쿠키값', '옵션객체');
//express프레임워크에서 사용되는 메서드, 서버에서 클라이언트로 쿠키를 설정할 때 사용

 

📌Cookie 예제

 

cookies.js 주요코드!

 

app.use(cookieParser());

app.get("/", (req, res) => {
  res.render("index", { data: req.cookies.popup });
});

app.post("/setCookie", (req, res) => {
  res.cookie("popup", "hide", {
    maxAge: 60 * 1000,
  });
  res.send({ result: true });
});

 

 

popup 이라는 이름으로 hide값을 가지는 쿠키를 설정한다.

이는 클라이언트의 브라우저에 쿠키를 전송하여 저장

/setCoolie경로로 post요청이 들어온 경우

'popup'이라는 이름의 쿠키를 설정한 후,
{result: true}라는 json응답을 클라이언트에게 보내는 기능을 수행한다.

 

index.ejs 주요 코드!

const myModal = new bootstrap.Modal("#exampleModal");
    if ("<%= data %>" === "") {
        myModal.show();
    }
    function closeModal() {
        axios({
            method: "POST",
            url: "/setCookie",
        }).then((res) => {
            console.log(res.data);
        });
        myModal.hide();
    }

 

 

axios를 사용하여 post메서드를 사용하여 /setCookie로 요청을 보낸다

이는 서버 축에서 쿠키를 설정하기 위한 요청이다

 

axios의 then() 메서드는 서버에서 응답이 도착한 후에 

실행될 콜백함수를 정의한다.

 

res매개변수는 서버의 응답을 나타낸다

 

요청에 대한 응답을 받으면, 콘솔에 출력한 후에 모달창을 숨기는 역할

 

 

---

Session 사용하기

 

 

-  웹 서버에 저장되는 쿠키

 

- 사용자가 웹 브라우저를 통해 접속한 시점부터

연결을 끝내는 시점까지의 시간 동안 일련의 요구를 하나의 상태로 보고 

그 상태를 유지시킨다.

ex) 로그인 유지

 

npm install express-session //session 사용 전 설치 모듈

const session = require('express-session');
app.use(seesion('옵션객체'));
// session 미들웨어

req.session.id = req.body.id;
//req.session.key = value

 

 

 

📌 Session 예제

 

session.js 주요 코드!

const userInfo = { id: "abc", pw: "123" };

app.use(
  session({
    secret: "mysecretKey",
    resave: false,
    saveUninitialized: true,
  })
);

if (user === undefined) {
    res.render("app", { isLogin: false });
  } else {
    res.render("app", { isLogin: true, user: user });
  }
  
  app.post("/login", (req, res) => {
  console.log(req.body);
  if (req.body.id === userInfo.id && req.body.pw === userInfo.pw) {
    req.session.user = req.body.id;
    res.redirect("/");
  } else {
    res.send({ result: false });
  }
});

 

 

세션설정

express-session은 express애플리케이션에서 세션관리를 위한 미들웨어로 사용

secret: 세션을 암호화 하기 위한 비밀키, 이 비밀키는 세션 데이터를 암호화하고,복호화 하는데 사용

resave: 변경사항이 없더라도 세션을 다시 저장할 지 여부를 설정,

일반적으로 false로 설정하여 변경사항이 없을 경우, 세션을 다시 저장하지 않도록 함

saveUninitialized : 초기화 되지 않은 세션도 저장할지 여부 설정,

일반적으로true로 설정하여 모든 요청에 대해 세션을 유지하는 것을 권장

 

 

res.redirect("/")를 쓰는 이유?

 

render는 템플릿을 불러오고, redirect는 url로 이동을 한다.

    url로 이동한다는 것은 그 url에 맞는 views가 다시 실행되고,

여기서 render를 할지 다시 redirect할지 결정

 

 

---

하이라이트인 시퀄라이즈에 대한 내용은

다음 글에서 작성하도록 ,,