[TIL] 210627

오늘은 일지목록에서 포스트들을 Read 하는 기능을 만들었다 그리고 카테고리별로 나오게 할수있게 sorting 구현했다.

-------🖥️ Frontend-------

📂카테고리 & 포스트 Read

$(document).ready(function () {
            getCategory();      //페이지 시작할때 카테고리 목록과 포스트 목록불러오기 함수들
            getPost();
          
        })

        function getCategory(){		//카테고리 불러오기
          $("#categoryList").empty()
          $.ajax({
                type: "GET",
                url: "api/list",
                data: {},
                success: function (response) {
                    const categories = response["categories"] //카테고리만 db에서 받아옴
                    const cate = []
                    for (let i = 0; i < categories.length; i++){
                      cate.push(categories[i].category);} 
                    const categ = new Set(cate);	// 카테고리 중복없애기 작업
                    const catego = [...categ];
                    console.log(catego)
                    for (let i of catego){
                      makeCategories(i);
                    }
                }
        })
      }

        function makeCategories (categories){	//카테고리 temp html 만들어주기
          let tempHtmlCategories = `<li>
                                      <a id="${categories}">
                                      <span class="icon is-small">
                                        <i class="fa fa-link">
                                          </i>
                                          </span>${categories}
                                       </a>   
                                    </li>
                                    `
          $("#categoryList").append(tempHtmlCategories)
          
        }

        function getPost(category) {	// 포스트 정보들 가져오기
            $("#cardBox").empty()
            $.ajax({
                type: "GET",
                url: "/api/posts",
                data: {},
                success: function (response) {
                    let posts = response["posts"]
                    for (let i = 0; i < posts.length; i++) {
                        makePost(posts[i])	//db에 있는 포스트 수만큼 다 만들기
                    }
                }
            })
        }
        
        function getPostCategory(category) {    // 카테고리 클릭했을때 그 카테고리에 맞는
            $("#cardBox").empty()		// 포스트 불러오기
            $.ajax({
                type: "GET",
                url: `/api/posts${category ? "?category=" + category : ""}`,
                data: {},				// 카테고리를 request
                success: function (response) {
                    let posts = response["posts"] // 카테고리에 맞는 포스트들
                    for (let i = 0; i < posts.length; i++) {
                        makePost(posts[i])
            
                    }
                }
            })
        }
        

        function makePost(post) {
            let tempHtml = `<article class="card">
                              <section class="card__image" style="background-image: url(/static/thumex.png)">
                              </section>
                              
                              <h1 class="card__title">${post['title']}</h1>
                              
                              <section class="card__content">
                                ${post['subtitle']}
                              </section>
                              
                              <section class="card__footer">
                                edit
                              </section>
                            </article>`
            $("#cardBox").append(tempHtml)                
            }

-------⚙️ Backend-------

📂카테고리 & 포스트 Read

router.get("/posts", async (req, res, next) => {
    try {
        const { category } = req.query;
        const posts = await Posts.find({ category })
        res.json({ posts : posts });
    } catch (err) {
      console.error(err);
      next(err);
    }
  });
  
  router.get("/list", async (req, res, next) => {
    try {
      const categories = await Posts.find({}, { _id : false, category : true })
      res.json({ categories : categories });	// _id는 기본값이니 빼고 카테고리만 줌
    } catch (err) {
      console.error(err);
      next(err);
    }
  });