[포스코x코딩온] 복습을 통한 추가 내용(8주차)

복습 주간

Form 전송 

2023.08.01 - [[포스코x코딩온] 웹개발자 풀스택 부트캠프8기] - [포스코x코딩온] Form 전송(body-parser, get, post, form validation, nodemon)

[포스코x코딩온] Form 전송(body-parser, get, post, form validation, nodemon)

2023.08.02 - [[포스코x코딩온] 웹개발자 풀스택 부트캠프8기] - [포스코x코딩온] 동적 form 전송(비동기 http 통신, ajex, axios, fetch, JSON)

[포스코x코딩온] 동적 form 전송(비동기 http 통신, ajex, axios, fetch, JSON)

---

※전송 타입

1. application/x-www-form-urlencoded

• HTML <form> 요소에서 데이터를 전송할때 주로 사용.
• 폼 데이터는 URL 인코딩되어 문자열로 변환되어 서버로 전송된다.
• 데이터는 key=value 형식으로 변환되고, 여러 개의 데이터는 &로 구분된다. (form 기본타입)

2. multipart/form-data

• 파일 업로드와 같이 바이너리 데이터를 포함하는 경우에 사용한다.(multer)
• 폼 데이터를 여러 부분으로 분할하고 각 부분에 대한 헤더와 데이터를 인코딩하여 전송
• 파일을 업로드할 때 주로 사용되며, 각 부분은 파일 데이터와 그 외의 텍스트 데이터를 가질 수 있다.

3. text/plain

• 텍스트 데이터를 그대로 전송
• 특별한 인코딩이나 변환이 없이 단순한 텍스트를 전송
• 주로 간단한 텍스트 데이터를 서버로 전송할 때 사용

4. application/json

• JSON 형식의 데이터를 전송하는 데 사용
• 주로 API 요청 및 응답에서 많이 사용

---

※주의!

제발 axios 쓸 때 cdn 좀 넣자...!!! 이거 때문에 몇번을 삽질 했는지 모른다...

---

Ajax

• Asynchronous JavaScript And XML
• 자바스크립트를 이용해 클라이언트와 서버 간에 데이터를 주고 받는 비동 기 HTTP 통신
• 장점
  • JQuery를 통해 쉽게 구현 가능
  • Error, Success, Complete의 상태를 통해 실행 흐름을 조절할 수 있다.
• 단점
  • Jquery를 사용해야만!! 간편하고 호환성이 보장된다. ( xml 사용은 복잡 )
  • Promise 기반이 아니다.

Axios

• Node.js와 브라우저를 위한 Promise API를 활용
• 비동기 HTTP 통신이 가능, return이 Promise 객체로 온다.
• 장점
  • Promise 기반으로 만들어졌다.
  • 브라우저 호환성이 뛰어나다.
• 단점
  • 모듈 설치 or 호출을 해줘야 사용이 가능하다.
  • npm install axios

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Fetch

• ES6부터 들어온 JavaScript 내장 라이브러리
• Promise 기반
• 장점
  • JavaScript 내장 라이브러리이므로 별도의 import 필요 X
  • Promise 기반
  • 내장 라이브러리이기 때문에 업데이트에 따른 에러 방지가 가능
    
• 단점
  • 최신 문법
  • Timeout 기능이 없다.
  • 상대적으로 Axios에 비해 기능 부족
  • JSON으로 변환해주는 과정 필요

※참고

https://velog.io/@kysung95/%EA%B0%9C%EB%B0%9C%EC%83%81%EC%8B%9D-Ajax%EC%99%80-Axios-%EA%B7%B8%EB%A6%AC%EA%B3%A0-fetch

[개발상식] Ajax와 Axios 그리고 fetch

---

MVC

2023.08.05 - [[포스코x코딩온] 웹개발자 풀스택 부트캠프8기] - [포스코x코딩온] MVC패턴(데이터베이스X)

[포스코x코딩온] MVC패턴(데이터베이스X)

2023.08.09 - [[포스코x코딩온] 웹개발자 풀스택 부트캠프8기] - [포스코x코딩온] MySQL과 연동하고 MVC 패턴을 적용하여 회원가입, 로그인, 회원정보 수정 및 탈퇴 기능구현

[포스코x코딩온] MySQL과 연동하고 MVC 패턴을 적용하여 회원가입, 로그인, 회원정보 수정 및 탈퇴

---

MVC 패턴 만드는 순서

1. 라우터 분리로 필요한 기능별 라우터 설정
2. controller 함수 설정(유지보수를 위해 get와 post를 위아래로 따로 만들던지 / 파일을 따로 만들어야 편하다.)
3. DB 설정(Model)
4. POSTMAN을 가지고 테스트하기
5. View 만들기

1. 라우터 분리로 필요한 기능별 라우터 설정

const express = require("express");
const router = express.Router();
const controller = require("../controller/Cmain");

router.get("/", controller.main);

//회원가입
router.get("/signup", controller.signup); //회원가입 페이지 열기
router.post("/signup", controller.post_signup); //데이터베이스에 회원정보 저장

//로그인
router.get("/signin", controller.signin); //로그인 페이지 열기
router.post("/signin", controller.post_signin); //로그인 하기

//회원정보 조회
router.get("/detail", controller.detail);
router.post("/detail", controller.post_detail);

//회원정보 수정
router.post("/updata", controller.updata);

module.exports = router;

2. controller 함수 설정(유지보수를 위해 get와 post를 위아래로 따로 만들던지 / 파일을 따로 만들어야 편하다.)

const model = require("../model/Model");

//========================================//

//GET
const main = (req, res) => {
  res.render("index");
};
//회원가입 페이지
const signup = (req, res) => {
  res.render("signup");
};
//로그인 페이지
const signin = (req, res) => {
  res.render("signin");
};

const detail = (req, res) => {
  res.render("detail");
};

//================================================//
//POST
//회원가입
const post_signup = (req, res) => {
  model.db_signup(req.body, () => {
    res.json({ result: true });
  });
};

const post_signin = (req, res) => {
  model.db_signin(req.body, (rows) => {
    if (rows.length > 0) {
      res.json({ result: true, data: rows[0] });
    } else {
      res.json({ result: false });
    }
  });
};

const post_detail = (req, res) => {
  model.db_detail(req.body, (rows) => {
    if (rows.length > 0) {
      res.json({ result: true, data: rows[0] });
    } else {
      res.json({ result: false });
    }
  });
};

const updata = (req, res) => {
  model.db_updata(req.body, () => {
    res.json({ result: true });
  });
};

//res.render : 뷰페이지를 랜더링 render(뷰페이지이름, 데이터(선택)) 뷰=> node.js가 제공하는 템플릿
//res.send : 모든타입(문자열, 배열, 객체, 숫자 등) 데이터 전송
//res.json : 객체타입(json) 데이터 전송
//res.redirect: 페이지를 이동

module.exports = {
  main,
  signup,
  signin,
  post_signup,
  post_signin,
  detail,
  updata,
  post_detail,
};

// //모듈사용방법
// //방법1
// const test = () => {};
// module.exports = test;
// //방법2
// module.exports.test2 = '함수, 변수 등 모두 사용';
// exports.text2 = ''; //생략형

3. DB 설정(Model)

• createPool 사용
• Prepared Statement 사용

const mysql = require("mysql");

//mysql연결

//createConnection => 단일 연결
//요청할 때 마다 새로운 연결을 생성하여 적은 수의 동시연결이나 단순한 데이터베이스 쿼리일 때 사용.
// const conn = mysql.createConnection({
//   host: "",
//   user: "",
//   password: "",
//   database: "",
// });
//=======//
//createPool => 연결 풀을 생성
//풀은 미리 정의된 수의 연결을 생성하고 관리
//요청이 들어오면 연결 풀에서 사용 가능한 연결을 제공한다. 작업 완료 후 해당 연결을 반환
//연결이 필요하지 않을 경우 자동으로 반환. 풀의 연결 수를 제한하고 관리를 최적화한다.
//따라서 다중연결 서비스에 적합하다.
const conn = mysql.createPool({
  host: "",
  user: "",
  password: "",
  database: "",
  connectionLimit: 30, //최대 연결 수 (기본값: 10)
});
//문자열 보간방법
//단점
//1. sql 인젝션 공격 취약
//2. 문자열에 특수문자가 포함될 경우 오류가 발생할 수도 있음
//보안방법
//Prepared Statement
//INSERT INTO user (userid,pw,name) VALUES (?,?,?)

//회원가입 정보 데이터베이스 저장
const db_signup = (data, callback) => {
  //문자열 보간방법
  //   const query = `INSERT INTO user1 (userid, pw, name) VALUES ('${data.userid}', '${data.pw}', '${data.name}') `;
  //   conn.query(query, (err, rows) => {
  //     if (err) {
  //       console.log(err);
  //       return;
  //     }
  //     console.log("db_signup", rows);
  //     callback();
  //   });

  //Prepared statement
  const query = `INSERT INTO user1 (userid, pw, name) VALUES (?,?,?)`;
  conn.query(query, [data.userid, data.pw, data.name], (err, rows) => {
    if (err) {
      console.log(err);
      return;
    }
    console.log("db_signup", rows);
    callback();
  });
};

const db_signin = (data, cb) => {
  //   const query = `SELECT * FROM user1 WHERE userid='${data.userid}' AND pw='${data.pw}'`;
  //   conn.query(query, (err, rows) => {
  //     if (err) {
  //       console.log(err);
  //       return;
  //     }
  //     console.log("db_signin", rows);
  //     cb(rows);
  //     // (rows) => {
  //     //     if (rows.length > 0) {
  //     //       res.json({ result: true, data: rows[0] });
  //     //     }
  //     //   }
  //   });

  //prepared statement
  const query = `SELECT * FROM user1 WHERE userid=? AND pw=?`;
  conn.query(query, [data.userid, data.pw], (err, rows) => {
    if (err) {
      console.log(err);
      return;
    }
    console.log("db_signin", rows);
    cb(rows);
  });
};

const db_detail = (data, cb) => {
  const query = `SELECT * FROM user1 WHERE id=?`;
  conn.query(query, [data.id], (err, rows) => {
    if (err) {
      console.log(err);
      return;
    }
    console.log("db_detail", rows);
    cb(rows);
  });
};
const db_updata = (data, cb) => {
  const query = `UPDATE user1 SET userid=?, name=?, pw=? WHERE id=?`;
  conn.query(query, [data.userid, data.name, data.pw, data.id], (err, rows) => {
    if (err) {
      console.log(err);
      return;
    }
    console.log("db_updata", rows);
    cb(rows);
  });
};
module.exports = {
  db_signup,
  db_signin,
  db_detail,
  db_updata,
};

---

※ Prepared Statement VS Statement

Prepared Statement

• 장점
  • Soft Parsing으로 SQL 처리가 빠르다.
  • 대입된 값은 SQL로 인식하지 않아서 SQL Injection을 예방할 수 있다.
• 단점
  • 쿼리에 오류가 생긴경우 분석하기 어렵다. 바인드변수 부분이 '?'로 나오므로 실제 실행된 쿼리를 확인하는것이 어렵다.
  • 바인드변수는 일부 허용된 위치에서만 사용할 수 있기 때문에 동적 쿼리 작성이 힘들다.
    한가지 예로 변수를 활용해 동적으로 테이블을 변경하는 쿼리를 작성해야 하는 경우 Prepared Statement로는 처리가 불가능하다.

Statement

• 장점
  • 테이블, 컬럼에 대한 동적 쿼리 작성이 가능하다. 즉 DDL 작성에 적합하다.
  • 쿼리실행문을 직접 확인 가능하므로 쿼리 분석이 쉽다.
• 단점
  • SQL Injection 공격에 노출된다.

※참조

https://www.baeldung.com/java-statement-preparedstatement

Difference Between Statement and PreparedStatement | Baeldung

---

4. POSTMAN을 가지고 테스트하기

5. View 만들기

---

2023.08.11 - [[포스코x코딩온] 웹개발자 풀스택 부트캠프8기] - [포스코x코딩온] Sequelize 사용하기

[포스코x코딩온] Sequelize 사용하기

---

2023.08.11 - [[포스코x코딩온] 웹개발자 풀스택 부트캠프8기] - [포스코x코딩온] Cookie(쿠키), Session(세션)

[포스코x코딩온] Cookie(쿠키), Session(세션)

2023.08.17 - [[포스코x코딩온] 웹개발자 풀스택 부트캠프8기] - [포스코x코딩온] JWT 인증 개념

[포스코x코딩온] JWT 인증 개념

---

※CookieParser와 Session은 index,js에서만 불러와서 쓰면 된다.

const cookieParser = require("cookie-parser");
const session = require("express-session");

---

※화살표 함수는 축약이 가능하다.{} 와 return 삭제 가능.(한줄 코드일때 사용!)

 const bcryptPassword = (password) => {
 return bcryptPassword.hash(password, 11);
 };

=> 축약

const bcryptPassword = (password) => bcrypt.hash(password, 11);

---

23.08.21 ~ 26 일주일간 그동안 배웠던 부분들 중에서 이해가 잘 안되고 어려웠던 부분들을 설문조사를 했고, 그 결과에 따라 form 전송, MVC, MVC_MySQL, sequelize, Cookie, Session, AWS 부분을 다시 배웠다. 한번 더 듣는 내용이라 좀 더 이해하는데 수월하였다. 특히 MVC 패턴을 수업 듣고 이해하기 위해 오래동안 고민했던 부분을 다시 들으니 정리가 되었다.