2023.05.02 express delete esj

이무헌·2023년 7월 21일

node.JS

목록 보기

3/10

1. express js

http 요청과 응답을 좀 더 편하게 사용할 수 있도록 도와주는 모듈
express nodejs에서 제일 인기가 많은 모듈
nodejs프레임 워크
http 요청과 응답을 더 쉽게 작성할 수 있도록 도와준다.
기본적인 기능만 포함하고 있어서.
자유도 높고 라우팅 미들웨어 등등 개발자가 원하는 방식으로
구성할 수 있다.
본인만의 보일러 플레이팅이 가능하다.
보일러 플레이팅=>반복적인 작업을 미리 작성해서 개발의 생산성을 높임
express를 사용해보자

express 객체 생성과 서버객체 생성

const e = require("express");

// 설치 부터 받아 express
// npm

// 서버 객체가 생성
const app = e();

get()메소드 사용하기

// 메소드를 사용해서
// app.get();
// 요청의 내용이 get메소드인지 post메소드인지
// app.post();

app.get("/", (req, res) => {
  // send 메소드로 응답하고 종료
  res.send("hello world");
});

app.listen(8080, () => {
  console.log("성공했구나 이녀석..");
});

// pacakge.json에 스크립트 명령어 작성
//     "test": "echo \"Error: no test specified\" && exit 1",
// "start": "node 20230502/index.js"
// "dev":"node 20230502/index.js"

// start명령어는 ===npm start
// 별도의 네이밍으로 우리가 작성한 스크립트 명령어 실행
// 예)dev 가정하면 npm run dev 이렇게 실행 하면 된다.(start는 특별)

get()메소드는 기본적으로 유저의 정보나 기타 정보를 요청하는 프로토콜이다.

이를 활용해 send()메소드로 hello world를 보내주었다.

res.send와 end의 차이점은 send는 자동으로 header를 설정해준다.
하지만 end는 수동으로 header를 설정해 주어야한다.

path모듈을 사용하여 편리하게 경로 설정

//여기서 사용할 모듈 express path
// path는 내장 모듈
// path 모듈은 경로에 대한 조작을 도와주는 모듈
// 파일 시스템의 경로들을 상대경로나 절대경로 설정 할 수 있도록 도와주는 모듈
// 상대경로나 절대 경로를 쉽게 연경할 수 이도록 메서드를 지원해준다.

const e = require("express");

const path = require("path");

// 서버 인스턴스 생성
const app = e();

// get 방식 요청해서 데이터를 가져오는 메서드
// get 방식으로 /url 요청을 하면
app.get("/", (req, res) => {
  //루트 경로 처리
  // join메서드가 전달받은 경로를 합쳐주는 동작을 해줌
  const body = path.join(__dirname, "views", "index.html");
  //   파일까지의 경로를 만들어주고
  console.log(body);
  //   res.send("");
  res.sendFile(body);
});
// res.send와 end의 차이점은 send는 자동으로 header를 설정해준다.
// 하지만 end는 수동으로 header를 설정해 주어야한다.

app.get("/list", (req, res) => {
  const body = path.join(__dirname, "views", "list.html");

  //   브라우저로 파일 보내준다.
  res.sendFile(body);
});

app.get("/myPage", (req, res) => {
  const body = path.join(__dirname, "views", "mypage.html");
  res.sendFile(body);
});

app.listen(8080, () => {
  console.log("good");
});

express 모듈과 path 모듈 객체 선언

const e = require("express");

const path = require("path");

// 서버 인스턴스 생성
const app = e();

메인페이지를 get() 방식으로 처리

// get 방식 요청해서 데이터를 가져오는 메서드
// get 방식으로 /url 요청을 하면
app.get("/", (req, res) => {
  //루트 경로 처리
  // join메서드가 전달받은 경로를 합쳐주는 동작을 해줌
  const body = path.join(__dirname, "views", "index.html");
  //   파일까지의 경로를 만들어주고
  console.log(body);
  //   res.send("");
  res.sendFile(body);
});

path.join에서 첫번째 파라미터는 현재 디렉토리(폴더)의 위치이고 그 다음 매개변수는 차례대로 하위 파일을 찾아가면 된다.
기존의 send가 아닌 sendFile로 html자체를 보내줘야 한다.

2. ejs 그리고 mysql의 body,query,delete

전체 코드

// express와 템플릿 엔진을 같이 사용해서
// 게시판 만들어보자.
// ejs 템플릿 엔진

const e = require("express");

// 템플릿 엔진은 서버측에서 html을 만들어서 브라우저에 보여주는것.
// 서버 사이드 렌더링(SSR)

// 나중에는 분리할 예정
// html과 동일하고 js를 같이 추가해서 동적인 웹페이지를 만들 수 있는 템플릿 엔진.

// express에서 ejs를 지원한다.
// 서버 측에서 html 템플릿을 그려주고
// 이러한 기법을 서버 사이드 렌더링 이라고 한다.
// 검색 기능 및 페이지 로딩이 빠르다.

// body-parser는 express미들웨어
// 요청으로 받은 body의 내용을 req객체 안에 있는 body라는 key에 value 담아준다.
// req.body로 호출이 가능해진다.
// 미들웨어라는건 쉽게 요청과 응답을 하는 사이 중간에 동작하는 함수

// 사용할 모듈 express,ejs,mysql2,body-parser,path

const mysql2 = require("mysql2");
const path = require("path");
const bodyParser = require("body-parser");

// 서버 인스턴스
const app = e();

// express에 set메서드와 use 메서드가 있습니다~
// set 메서드: express의 view 등등 설정을 할 수가 있다.
// 그려줄 파일이 있는 폴더의 경로 같은 설정을 할 수가 있다.

// use 메서드:요청 또는 응답시 실행되는 미들웨어를 추가 할 수 있다.

// express의 view 속성을 경로로 지정
// express view로 사용할 파일들의 경로
// express도 서버사이드 렌더링을 지원해주기 때문에 view엔진을 사용한다.
// view엔진은 html등의 템플릿 파일을 보여주는 역할을 하는데
app.set("views", path.join(__dirname, "views"));

// view엔진을 ejs로 사용하겠다 설정
// html 확장자도 ejs로 변경
app.set("view engine", "ejs");

// app.use(
//   bodyParser.urlencoded({
//     // urlencoded from 데이터를 파싱을 도와주는 미들웨어
//     extended: false,
//   })
// );
//extended true: query string 모듈의 기능이 좀 더 확장된 qs모듈을 사용한다.(깊은 객체를 지원)
// false: express 기본 내장된 쿼리 스트링 모듈 사용(깊은 객체 지원 x)
// 권장은 false
// 복잡한 데이터를 다루게 되면 쓸 수도 있겠는데 없으니 false로 사용하자.

// express 버전이 올라가면서 bodyParser를 지원해준다.
app.use(e.urlencoded({ extended: false }));

const mysql = mysql2.createConnection({
  user: "root",
  password: "q1w2e3R$",
  database: "test2",
});

mysql.query("SELECT * FROM products", (err, res) => {
  if (err) {
    const sql =
      "CREATE TABLE products(id INT AUTO_INCREMENT PRIMARY KEY,name VARCHAR(20),number VARCHAR(20),series VARCHAR(20))";
    mysql.query(sql);
  } else {
    console.log(res);
  }
});

app.get("/", (req, res) => {
  // 루트 경로로 요청시 처리
  // 메인페이지
  mysql.query("SELECT * FROM products", (err, result) => {
    // render 메서드 view엔진이 문자열을 html로 브라우저에 반환해서 렌더링 해준다.
    // 첫번째 매개변수가 view로 설정한 폴더경로에 파일의 이름을 문자열로 전달.
    // 두번째 매개변수 템플린 엔진에서 사용할 데이터(객체 형식)
    res.render("main", { data: result });
  });
});

// 추가하는 페이지로 가자
// 리스트를 추가하는 페이지

// get 방식 요청인지,post 방식 요청인지 나뉨
app.get("/insert", (req, res) => {
  res.render("insert");
  res.send();
});

app.post("/insert", (req, res) => {
  const data = req.body;
  // body 객체 안에 form에서 요청을 보냄
  // 데이터가 객체로 들어있다. 객체 안에 있는 키값들은
  // inputdml name으로 정해준 키로 값이 들어있다.
  // 우리가 요청한 데이터의 내용을 데이터 베이스에 추가하자
  const sql = "INSERT INTO products (name,number,series)VALUES(?,?,?)";
  console.log(data);
  // query 메서드 두번째 매개변수로 배열의 형태로 value를 전달 해 줄수 있다.
  //   순서대로 ?에 들어감
  mysql.query(sql, [data.name, data.number, data.series], (err, result) => {
    // redirect 메서드로 매개변수로 전달한 URL로 페이지를 전환 시킨다.
    // 경로로 이동시킨다.
    res.redirect("/");
  });
});

// 삭제를 해봅시다.
app.get("/delete/:id", (req, res) => {
  // :id url요청에서 파라메터 값이라고 합니다.
  // 아는 req.params.id로 가져올 수 있다.
  const sql = "DELETE FROM products WHERE id=?";
  mysql.query(sql, [req.params.id], () => {
    res.redirect("/");
  });
});

app.listen(8080, () => {
  console.log("성공했구나 이녀석..");
});

객체 생성

const e = require("express");
const mysql2 = require("mysql2");
const path = require("path");
const app = e();

set을 통한 웹 설정

// express에 set메서드와 use 메서드가 있습니다~
// set 메서드: express의 view 등등 설정을 할 수가 있다.
// 그려줄 파일이 있는 폴더의 경로 같은 설정을 할 수가 있다.

// use 메서드:요청 또는 응답시 실행되는 미들웨어를 추가 할 수 있다.

// express의 view 속성을 경로로 지정
// express view로 사용할 파일들의 경로
// express도 서버사이드 렌더링을 지원해주기 때문에 view엔진을 사용한다.
// view엔진은 html등의 템플릿 파일을 보여주는 역할을 하는데
app.set("views", path.join(__dirname, "views"));

// view엔진을 ejs로 사용하겠다 설정
// html 확장자도 ejs로 변경
app.set("view engine", "ejs");

views 안의 ejs파일을 사용하기 위해 views까지의 경로를 미리 set으로 저장했다.
우리는 템플릿 엔진을 ejs를 쓸 것이므로 view engine을 ejs로 바꿨다.

미들웨어를 사용한 url 인코딩

//extended true: query string 모듈의 기능이 좀 더 확장된 qs모듈을 사용한다.(깊은 객체를 지원)
// false: express 기본 내장된 쿼리 스트링 모듈 사용(깊은 객체 지원 x)
// 권장은 false
// 복잡한 데이터를 다루게 되면 쓸 수도 있겠는데 없으니 false로 사용하자.

// express 버전이 올라가면서 bodyParser를 지원해준다.
app.use(e.urlencoded({ extended: false }));

전날에 한 mysql 접속과 테이블 생성.

const mysql = mysql2.createConnection({
  user: "root",
  password: "q1w2e3R$",
  database: "test2",
});

mysql.query("SELECT * FROM products", (err, res) => {
  if (err) {
    const sql =
      "CREATE TABLE products(id INT AUTO_INCREMENT PRIMARY KEY,name VARCHAR(20),number VARCHAR(20),series VARCHAR(20))";
    mysql.query(sql);
  } else {
    console.log(res);
  }
});

main ejs

<table style="width: 100%">
      <a href="/insert">추가 페이지</a>
      <tr>
        <th>삭제</th>
        <th>수정</th>
        <th>아이디</th>
        <th>아름</th>
        <th>전화번호</th>
        <th>시리즈</th>
      </tr>
      <!-- 페이지에 리스트면 여러개의 데이터가 있을 텐데 -->
      <!-- html에서 동적으로 뭔가를 해본적이 없죠? -->
      <% data.forEach(function(el,index){ %>
        <tr>
            <td>삭제</td>
            <td>수정</td>
            <td><%= el.id %></td>
            <td><%= el.name %></td>
            <td><%= el.number %></td>
            <td><%= el.series %></td>
        </tr>
        <% }); %>
    </table>

함수나 변수를 사용할 때는 <% %>로 시작한다.
그 안에 내장(프로토타입)메서드를 이용하면 된다.
단, 반복되는 html 문은 원본이 반복되므로 <% %> 부분 밖에다 써준다.
변수를 넣는 방법은 <%=’변수’ %>다.
함수가 끝나는 곳에 다시 <% %> 를 작성하고 그 안에 괄호를 닫아주자.

insert ejs

<!-- post 방식의 메소드로 데이터를 보냄 -->
    <!-- action 요청을 url 없다면 현재 url -->
    <form action="/insert" method="post">
      <label for="">이름</label>
      <input type="text" name="name" />
      <label for="">전화번호</label>
      <input type="text" name="number" />
      <label for="">시리즈</label>
      <input type="text" name="series" />
      <button type="submit">추가</button>
    </form>

특별한 것은 없다. view engine을 ejs로 해서 확장자는 ejs다.
form 을 이용해 submit해준다. method는 데이터의 저장이므로 post이다.

post 프로토콜

app.post("/insert", (req, res) => {
  const data = req.body;
  // body 객체 안에 form에서 요청을 보냄
  // 데이터가 객체로 들어있다. 객체 안에 있는 키값들은
  // inputdml name으로 정해준 키로 값이 들어있다.
  // 우리가 요청한 데이터의 내용을 데이터 베이스에 추가하자
  const sql = "INSERT INTO products (name,number,series)VALUES(?,?,?)";
  console.log(data);
  // query 메서드 두번째 매개변수로 배열의 형태로 value를 전달 해 줄수 있다.
  //   순서대로 ?에 들어감
  mysql.query(sql, [data.name, data.number, data.series], (err, result) => {
    // redirect 메서드로 매개변수로 전달한 URL로 페이지를 전환 시킨다.
    // 경로로 이동시킨다.
    res.redirect("/");
  });
});

sql문을 작성할 때 변수를 쓰기 위해선 원하는 위치에 ?로 작성해주면 된다.
그 후에 mysql.query()로 쿼리를 보낼 때 , 두번째 매개변수에 배열 형태로 순서에 맞게 데이터를 주면 된다.
당연하지만 데이터를 받을 땐 bodyparser를 해줬으므로 req.body로 받자

delete 프로토콜

// 삭제를 해봅시다.
app.get("/delete/:id", (req, res) => {
  // :id url요청에서 파라메터 값이라고 합니다.
  // 아는 req.params.id로 가져올 수 있다.
  const sql = "DELETE FROM products WHERE id=?";
  mysql.query(sql, [req.params.id], () => {
    res.redirect("/");
  });
});

: ←를 이용하여 삭제할 id를 동적으로 받자. request param에 있는 id 이므로 req.params객체 안에 id가 있다.
이렇게 작성하면 주소창 마지막에 오는 숫자가 id가 된다!

3.느낀점

💡 지금까지 알고 있었던 것 외에 여러가지를 배웠다. 특히 path 는 경로 문제로 merge시 일어났던 문제를 말끔히 해결해 줄 것만 같았다. 또한 2년전에 배운 SQL문(~~솔직히 테이블도 못 만들었다~~) 도 복습하면서 다시 익숙해지는 기분이 들어 의의가 있었다. 익숙하게 써온 express라이브러리에서 send()의 소중함이라던가 특히 body parser를 이제는 쉽게 설정할 수 있는app.use(e.urlencoded({ extended: false })); 는 미들웨어를 다루기 수월하게 해주었다. 앞으로의 수업이 더 기대된다!

이무헌

개발당시에 직면한 이슈를 정리하는 곳

이전 포스트

2023.05.02 express delete esj

node.JS

1. express js

2. ejs 그리고 mysql의 body,query,delete

3.느낀점

2023.04.27 node start

0개의 댓글