9/7 TIL : form 태그로 데이터 전달, fetch, MongoDB

KDT/TIL

9/7 TIL : form 태그로 데이터 전달, fetch, MongoDB

ebulsok 2022. 9. 18. 20:41

🔎 추가 routing 처리

app.js에 코드 추가

const router = require('./routes/index');

app.use('/', router);

/routes/index.js 생성

// @ts-check
const express = require('express');

const router = express.Router();

router.get('/', (req, res) => {
  res.render('index');
});

module.exports = router;

/views/index.ejs 생성

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Index</title>
</head>

<body>
  <h1>Hello, Express Service</h1>
  <h2><a href="/users">Move to USER service</a></h2>
  <h2><a href="/posts">Move to POST service</a></h2>
</body>

</html>

🔎 res.status(undefined) 에러를 방지하기 위해 app.js에서 에러코드 수정

어디서 발생한 것인지는 모르겠지만 서버상의 문제이므로 err 객체에 statusCode가 없으면 500을 띄우도록 함

(ex. ejs 파일에서 에러가 발생한 경우)

app.use((err, req, res, next) => {
  console.log(err.stack);
  res.status(err.statusCode || 500);
  res.send(err.message);
});

🔎 프론트의 form 태그로 백에 데이터 보내기

🚩 Form

action : 보내고자 하는 주소 값
method : 보내는 method 설정
input의 name : 서버에서 받을 때의 필드 값
button으로 submit을 하면 해당 폼의 내용을 지정한 방식 + 주소로 전달함

<form action="/users" method="POST">
    <div>
      <label>ID</label>
      <input type="text" name="id" />
    </div>
    <div>
      <label>NAME</label>
      <input type="text" name="name" />
    </div>
    <div>
      <label>EMAIL</label>
      <input type="email" name="email" />
    </div>
    <button type="submit">Submit</button>
 </form>

🚩 body-parser: form에서 전송된 정보를 req.body에 담아서 obj로 전달해주는 역할

사용하지 않으면 데이터를 body에 넣은 다음 인코딩 처리까지 해줘야 함

(req.on('data', function(chunk) { body += chunk; });)

[터미널] npm install body-parser --save
app.js에 코드 추가

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

url-encoded 옵션은 데이터를 변환하면 해당 데이터를 json 형태라고 전달
extended: true => query로 들어온 문자열을 외부 모듈인 qs 모듈로 처리(설치 필요, npm i qs)
extended: false => express 내장 모듈인 queryString 모듈로 처리, 중첩된 객체 허용 x

🚩 req.body 처리

form에서 전달된 정보는 req.body를 통해 들어옴
req.query 값은 전달하지 않아도 빈 객체를 전달하는데 빈 객체는 if문에서 true를 리턴하므로 예외 처리 필요
회원가입이 완료되면 다시 회원 목록 페이지를 보여주도록 res.direct 사용

router.post('/', (req, res) => {
  if (Object.keys(req.query).length > 0) {
    if (req.query.id && req.query.name && req.query.email) {
      const newUser = {
        id: req.query.id,
        name: req.query.name,
        email: req.query.email,
      };
      USER.push(newUser);
      res.redirect('/users');
    } else {
      const err = new Error('Unexpected query');
      err.statusCode = 404;
      throw err;
    }
  } else if (req.body) {
    if (req.body.id && req.body.name && req.body.email) {
      const newUser = {
        id: req.body.id,
        name: req.body.name,
        email: req.body.email,
      };
      USER.push(newUser);
      res.redirect('/users');
    } else {
      const err = new Error('Unexpected form Data');
      err.statusCode = 404;
      throw err;
    }
  } else {
    const err = new Error('No data');
    err.statusCode = 404;
    throw err;
  }
});

🔎 form 없이 데이터를 보내는 방법

🚩 XMLHttpRequest

1999년에 클라이언트에서 서버 측 데이터를 받기 위해 탄생
promise 등을 기본으로 내장하지 않기 때문에 서버 통신을 동기적으로 처리하려면 따로 사용해야하는 불편함이 있음

🚩 JQuery

2006년 등장하여 DOM 기능, 데이터 통신 등 다양한 분야에서 사용
ES6 문법이 등장하기 전까지는 주로 JQuery를 통해 통신

🚩 Fetch()

브라우저에서 서버 사이드 통신을 위해 2015년 ES6에서 추가된 기능
기존의 XMLHttpRequest의 문제점을 개선하여(promise 내장) 서버 통신 코드를 백엔드 코드와 비슷하게 짤 수 있음

🚩 fetch를 이용한 삭제 기능 구현

li 요소에 삭제 버튼 추가(a 태그)
a 태그에 onclick으로 삭제 함수 연결 => 해당 함수에서 fetch로 삭제 api 요청

<li>
      <p>id: <%= USER[i].id %></p>
      <p>name: <%= USER[i].name %></p>
      <p>email: <%= USER[i].email %></p>
      <a href="" onclick="deleteUser('<%= USER[i].id %>');">삭제</a>
</li>

deleteUser(id) 함수 구현

<script>
  function deleteUser(id) {
    fetch(`http://localhost:4000/users/${id}`, {
      method: 'delete',
      headers: {
        'Content-type': 'application/json'
      },
    }).then((res) => {
      location.reload();
    })
  }
</script>

🔎 DBMS(DataBase Managemanet System): 데이터 베이스를 관리하고 운영하는 SW

🚩 SQL(Structured Query Language): select, insert, update, delete 같은 언어를 통해 데이터베이스의 데이터를 다루는 언어

🚩 관계형(SQL), Relational DBMS(RDBMS): SQL을 사용하는 DB, 키와 값의 관계를 테이블화 시킨 원칙을 토대로 구성

먼저 테이블이 구성되고 테이블의 구조에 맞추어 데이터가 들어가기 때문에 DB를 구성하기 전에 스키마라 불리는 DB의 구조, 관계, 제약 사항에 대한 정의가 필요
장점: 구조화가 명확해서 예외게 없음, 데이터 입출력 속도가 빠름, 신뢰성이 높음
단점: DB의 구조 변경이 어렵기 때문에 빅데이터 등은 사용이 어려움(새로운 키가 추가되면 전체 스키마 변경이 필요)

🚩 비관계형(NoSQL): SQL을 사용하지 않는 모든 DB

문서형, 그래프형, 키밸류형, 와이드 컬럼형...
특정 목적에 맞는 DB가 존재
장점: 대용량 데이터 처리에 효율적, 구조 변경이 쉽고 확장성이 뛰어남, 복잡한 데이터 구조의 표현이 가능
단점: 데이터 자체가 크면 전체 데이터를 일부 읽어서 처리해야 하므로 데이터가 크면 속도가 저하되는 문제 발생

🚩 MongoDB(Humongous DB)

장점: 데이터를 익숙한 JSON 형태로 처리, 구조 변경 용이, 높은 수평 확장성, 스키마 설계의 유연성
단점: 표준이 없음, 데이터가 구조화 되어 있지 않기 때문에 단순한 구조의 쿼리만 사용 가능하고 데이터의 일관성 및 안정성을 DB가 아닌 App 레벨에서 관리해줘야 함 => 버그 발생 확률 높음

https://www.mongodb.com/ko-kr/cloud/atlas/efficiency 에서 로그인 -> FREE db -> cluster 생성 -> username/password -> ip 등록 -> connect -> include full driver code example 체크 후 코드 복사
routes/mongo.js 생성 후 붙여넣기
[터미널] npm i mongodb
[터미널] node routes/mongo.js
mongodb 접속용 함수 + 데이터베이스 생성(async, await)

// @ts-check
const { MongoClient, ServerApiVersion } = require('mongodb');

const uri =
  'mongodb+srv://ebulsok:<password>@cluster0.dvpqw9g.mongodb.net/?retryWrites=true&w=majority';
const client = new MongoClient(uri, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  serverApi: ServerApiVersion.v1,
});

async function main() {
  await client.connect();

  const users = client.db('KDT-1').collection('users');

  await client.close();
}

main();

.insertOne({ }) : 하나의 도큐먼트(데이터) 삽입

.insertMany([{ }]) : 많은 데이터를 한꺼번에 삽입(배열에 담긴 객체 형태로 전달 되어야 함)

.deleteOne({ }) : 조건을 만족하는 첫 도큐먼트 하나를 삭제

.deleteMany([{ }]) : 많은 데이터를 한꺼번에 삭제

.updateOne({ }, { $set: { }, }) : 조건을 만족하는 첫 도큐먼트 하나를 수정

.updateMany({ }, { $set: { }, }) : 조건을 만족하는 모든 도큐먼트를 수정

.findOne({ }) : 검색 조건을 만족하는 첫 도큐먼트를 찾아서 값을 반환(변수에 넣어서 처리/바로 출력해야함)

.find([{ }]) : 조건에 부합하는 데이터를 전부 찾아줌

실제적인 데이터를 전달하기보다 cursor 객체로 저장
리턴이 될 때 await를 사용하지 않음
find로 찾은 값을 출력하려면 await와 함께 forEach() 메소드를 사용해야 함
데이터로 변경하려면 await와 함께 toArray() 메소드를 사용

비교식/논리식

// db.컬렉션명.find({쿼리: [{조건1}, {조건2}, ...]});

const data = users.find({
    $and: [{ age: { $gte: 5 } }, { name: 'loopy' }],
 });
 await data.forEach(console.log);

저작자표시 비영리 변경금지 (새창열림)

'KDT > TIL' 카테고리의 다른 글

9/16 TIL : cookie, HTTP session, passport (0)	2022.09.20
9/14 TIL : 게시판 기능에 MongoDB 적용, 서버 배포 (0)	2022.09.20
9/5 TIL : express로 API 만들기, view engine(EJS), express 폴더 구조 (0)	2022.09.18
9/2 TIL : 전개 구문, yarn, postman, express router (0)	2022.09.18
8/31 TIL : File-system(JS, Promise, async/await), Routing w/o framework (0)	2022.09.18

현재글9/7 TIL : form 태그로 데이터 전달, fetch, MongoDB

괴발개발