EJS공부 & 팀원 코드 이해하기1

EJS공부 & 팀원 코드 이해하기1

---

 

📄 /controllers/workshow.controller.js

const WorkShowService = require('../services/workshow.service');

class WorkShowController {
  workShowService = new WorkShowService();

  getWork = async (req, res, next) => {
    const WorkShow = await this.workShowService.findAllWork();

    res.render('workShow', { datas: WorkShow });
  };
}

module.exports = WorkShowController;

'workShow.ejs'로 render하고 datas라는 이름으로 WorkShow리스트 보냈다.

 

 

 

📄 /repositories/workshow.repository

const worksList = [];
for (let i = 0; i < Works.length; i++) {
  const workId1 = Works[i].workId;
  const createdAt1 = Works[i].createdAt;
  const status1 = Works[i].status;
  const img1 = Works[i].img;
  const userWanted1 = Works[i].userWanted;
  const user = await User.findOne({ where: { userId: Works[i].user_id } });
  const username = user.name;
  const useraddress = user.address;
  const userphonenumber = user.phoneNumber;

  worksList.push({
    workId: workId1,
    createdAt: createdAt1,
    status: status1,
    img: img1,
    userWanted: userWanted1,
    name: username,
    address: useraddress,
    phoneNumber: userphonenumber,
  });
}

return worksList;

return 되는 workShow 값은 위와 같다.

 

---

 

const { sequelize, User, Post, Comment, Like } = require("../models");

const [result, metadata] = await sequelize.query(`
  SELECT p.*, u.nickname
  FROM Posts p
  LEFT JOIN Users u
  ON p.userId = u.id;
 `);

이런식으로 쿼리문을 활용해 left join해 값을 찾아올 줄 알았는데,

팀원분은 for문을 활용해 값을 찾아오셨다.

 

---

📄 workShow.ejs

function imgshow(imgid){
        imgtag = $("#"+imgid+" img")
        imgtag.css("display","block");
    }
function imgdrop(){
    imgtag.css("display","none");
}


<div class="container">
    <h2>세탁물 신청 조회 페이지</h2>
    <hr />
    <table style="width: 100%; text-align: center; margin-top: 1.5rem">
      <tr>
        <th>이름</th>
        <th>주소</th>
        <th>연락처</th>
        <th>이미지</th>
        <th>요구사항</th>
        <th>날짜</th>
        <th>상태</th>
      </tr>
      <!--        여기 부분에 들어갈 데이터들-->
      <% for(let i =0; i< datas.length; i++){ %>
      <tr>
        <td style="width: 5%"><%= datas[i].name %></td>
        <td style="width: 20%"><%= datas[i].address %></td>
        <td style="width: 10%"><%= datas[i].phoneNumber %></td>
        
        // 이미지는 null값 허용이므로 이미지 데이터가 없을 수도 있다.
        <% if (datas[i].img) {%>
          <td class="tdimg" id="img<%=i%>" onmouseover="imgshow('img<%=i%>')" onmouseleave="imgdrop()">
            <%if(datas[i].img.length >0){%>
            이미지 보기
            <img style="display: none; position:absolute; width: 500px; height:500px; top:50%;left:50%;z-index: 9999; transform: translate(-25%,-50%)" src="http://<%=datas[i].img%>" alt="이미지입니다.">
            <%}else{%>

            <%}%>
          </td>
          <%}else{%>
            <td></td>
            <%}%>
      <td style="width: 30%"><%= datas[i].userWanted %></td>
      <td style="width: 10%">
        <%=
        datas[i].createdAt.toISOString().substring(0,10).replaceAll("-",".")
        %>
      </td>
        <td style="width: 15%"><%= datas[i].status %><button style="margin-left:1rem" class = "status" value="<%= datas[i].workId %>, <%= datas[i].status %>" type="button">수락</button></td>
      </tr>
      <% } %>
    </table>
  <div class="container" style="text-align: center">
    <button
      type="button"
      style="
        width: 200px;
        height: 60px;
        margin-top: 40px;
        margin-right: 20px;
      "
      class="btn btn-primary"
      onclick="exitPageToReview()"
    >
      메인 페이지 이동
    </button>
  </div>
</div>

response를 받은 ajax나 axios없이도 데이터가 동기적으로 표에 삽입되는 걸 확인 할 수 있다.

---

버튼을 클릭해 상태 데이터가 없데이트 되는 경우

즉, 서버쪽으로 데이터를 보내주는 경우에 axios를 사용했다.