이미지

front

laundryApply.ejs

프론트에서 유저가 입력한 값을 가져올 때 jQuery,ajax를 이용해서 값을 서버로 보내주는데 이미지를 받아서 전달해줄때는 좀 더 작업이 필요하다

function apply() {
    let laundryName = $("#laundryName").val();
    let laundryContent = $("#laundryContent").val();
    let laundryAddress = $("#laundryAddress").val();
    let requests = $("#requests").val();

    let file = document.getElementById("laundryImg").files[0];

    if (
      !laundryName ||
      !laundryContent ||
      !laundryAddress ||
      !laundryImg ||
      !file
    ) {
      return customAlert("요청사항을 제외한 모든 요소는 필수입니다!");
    }

    const formdata = new FormData();
    formdata.append("file", file);
    formdata.append("laundryName", laundryName);
    formdata.append("laundryContent", laundryContent);
    formdata.append("laundryAddress", laundryAddress);
    formdata.append("requests", requests);

    $.ajax({
      type: "POST",
      url: "/api/laundry/apply",
      data: formdata,
      cache: false,
      contentType: false,
      processData: false,
      enctype: "multipart/form-data",
      success: function (response) {
        customAlert("세탁신청이 완료되었습니다!");
        window.location.replace("/laundry");
      },
      error: function (response) {
        customAlert(error.responseJSON.errorMessage);
      },
    });
  }

=> 받은 파일을 document.getElementById(id)를 이용해 해당하는 id와 일치하는 데이터값을 가져옴.
(만약 id값을 지정하지 않았다면, document.querySelector를 사용)
우리는 input태그의 type=file을 이용해 이미지를 넣어 주었기 때문에 console.log()로 받아오는 데이터값을 확인해준 뒤 추가적인 처리를 더 해주었다.

그리고 formdata를 이용해 데이터를 담아서 서버로 보내준다!

ajax로 formdata를 보내줄때 다음 태그를 붙여줘야 제대로 보내진다!

cache: false,
contentType: false,
processData: false,
enctype: "multipart/form-data",

controller

laundry.controller.js

프론트에서 데이터를 보내주는 형식을 처리해주었지만 받았을 때도 처리를 해줘야 한다.

const { laundryName, laundryContent, laundryAddress, requests } = req.body;
const imgPath = req.file.path;
const laundryImg = imgPath.split("\\")[2];

=>이미지를 제외한 데이터는 req.body로 받아오고, image경로는 req.file.path를 받아와줬다.

이미지를 어떻게 가져오나 확인했더니 views\\images\\파일이름으로 저장하길래 이미 이미지를 불러올 때 아래처럼 나머지 경로를 써두어서 이미지 이름만 가져와주면 되어서 split을 사용해서 이미지 이름만 가져와주도록 처리했다!

저장한 이미지 불러오기

applyById.js

let temp = `
          <tr>
          <td>
            <img src="../images/${response.data[i].laundryImg}" alt="img" />
          </td>
          <td>${response.data[i].laundryName}</td>
          <td>${response.data[i].laundryContent}</td>
          <td>${response.data[i].laundryAddress}</td>
          <td>${response.data[i].requests}</td>
          <td>${response.data[i].status}</td>
        </tr>
        `;
          $("#appliesList").append(temp);

포인트감소

서버에서 포인트처리

point.repository.js

if (point - 10000 < 0) {
        return point - 10000;
      } else {
        const changePoint = await user.update(
          {
            point: point - 10000,
          },
          { where: { id: id } }
        );
      }

laundryApply.ejs

function minusPoint() {
    $.ajax({
      type: "PUT",
      url: "/api/point/change",
      async: false,
      success: function (response) {
        console.log(response.data.changePoint);
        if (response.data.changePoint >= 0) {
          apply();
        } else {
          customAlert("포인트가 부족합니다!");
          return;
        }
      },
      error: function (error) {
        customAlert(error.responseJSON.errorMessage);
      },
    });
  }

=>
포인트가 10000이 차감될때 음수값을 리턴하게 만들고 만약 음수값을 리턴하면 세탁신청과 포인트차감이 되지 않도록 만들어두었다!
그게 아니라면 세탁신청이 되고 포인트차감이 되도록 만들었다.

데이터를 가공하는 부분은 service쪽에다가 코드를 작성해야 하지만, 복잡해서 repository에 작성한 것을 그대로 두었다...! 이건 수정해야함...!