20230719(수)_ 백오피스 프로젝트

 금일 달성 항목

1) main화면 ejs로 작성, 게시글 리스트 불러오기

---

문제 해결 과정 1 -음식점 리스트 불러오기

[문제]

백단에서 만든 음식점 api를 프론트로 가져와야하는데 방법을 모르는 상태였습니다.

 

[시도 및 해결]

튜터님과 동료들에게 물어봐서 해결하였습니다.

 

1. 모든 데이터를 조회하기 위해서는 전체조회 라우터가 필요하므로 추가해야합니다.

controllers

 

  // 음식점 전체 조회
  getAllRestaurant = async (req, res) => {
    const { foodName, category } = req.query;
    const { code, data } = await this.restaurantsService.getAllRestaurant(foodName, category);
    res.status(code).json({ data });
  };

 

service

  // 음식점 전체 조회
  getAllRestaurant = async (foodName, category) => {
    try {
      const getAll = await this.restaurantsRepository.getAllRestaurant(foodName);
      return { code: 200, data: getAll };
    } catch (error) {
      return { code: 500, data: error.message };
    }

 

repositories

getAllRestaurant = async (foodName, category) => {
    // foodName search
    if (foodName) {
      return await Restaurant.findAll()
  };

 

 

2.렌더 라우터 영역에 연결하는 데이터를 추가합니다.

// 음식점 전체 조회
router.get('/', async (req, res) => {
  // /restaurants?foodName=오리지널 버거 콤보
  const data = await restaurantsRepository.getAllRestaurant();
  res.render('index', { data });
});

 

 

3. ejs에 해당 영역을 forEach로 돌려서 전체 리스트를 제공합니다.

 <div class="cards">
        <% data.forEach((restaurant, idx)=> { %>
        <div class="restaurant-card">
          <a href="/subpage/<%=restaurant.restaurant_id %>"><%= restaurant.restaurant_id %></a>
          <span><%= restaurant.name %></span>
          <span><%= restaurant.category %></span>
        </div>

 

[알게된 점]

렌더 라우터를 통해 데이터를 뽑아내야하는 것을 알았고 console.log를 통해 데이터의 형태를 파악해서 뿌려주면 프론트 화면에 노출된다는 것을 알았습니다.