🔹 const param = { ...globalConstElem.dataset };

✅ param에 dataset 배열값이 담겨서 객체가 된다.

---

✅ html에서 feed를 안만들고 js에서 만든 이유는

✅ home.html에 들어가자 마자 피드들이 뜨게 하기 위해서다

✅ infinite scroller를 쓰기 위한 것이다

🔹 home.html에 들어가자 마자 피드들이 뜨는 이유

✅ js의 ajax함수를 실행시키기 때문

home2.js

feedObj.url = '/feed/list2';
feedObj.setScrollInfinity(window);
feedObj.getFeedList(1);

🟦 feed.js

const feedObj = {
    limit: 5,
    itemLength: 0,
    currentPage: 1,
    url: '',
    iuser: 0,
    swiper: null,
    containerElem: document.querySelector('#feedContainer'),
    loadingElem: document.querySelector('.loading'),

• containerElem: document.querySelector('#feedContainer') : <div id="feedContainer"></div>
• loadingElem: document.querySelector('.loading') : <div class="loading hide"><img th:src="@{/img/loading.gif}"></div>

    makeFeedList: function(data) {
        if(data.length == 0) { return; }

        for(let i=0; i<data.length; i++) {
            const item = data[i];

            const itemContainer = document.createElement('div');
            itemContainer.classList.add('item');

            // 글쓴이 정보 영역
            let imgTag = ``;
            if(item.mainProfile != null) {
                imgTag = `<img src="/pic/profile/${item.iuser}/${item.mainProfile}" class="pointer profile wh30" 
               token interpolation">${item.iuser});">`;
            }
            const regDtInfo = getDateTimeInfo(item.regdt);
            const topDiv = document.createElement('div');
            topDiv.classList.add('top')
            topDiv.innerHTML = `
            <div class="itemProfileCont">${imgTag}</div>
            <div>
                <div><span class="pointer"token interpolation">${item.iuser});">${item.writer}</span> - ${regDtInfo}</div>
                <div>${item.location == null ? '' : item.location}</div>
            </div>
            `;
            //이미지영역
            const imgDiv = document.createElement('div');
            imgDiv.classList.add('itemImg');

            const swiperContainerDiv = document.createElement('div');
            swiperContainerDiv.classList.add('swiper-container');

            const swiperWrapperDiv = document.createElement('div');
            swiperWrapperDiv.classList.add('swiper-wrapper');

            swiperContainerDiv.append(swiperWrapperDiv);
            imgDiv.append(swiperContainerDiv);

            for(let z=0; z<item.imgList.length; z++) {
                const imgObj = item.imgList[z];

                const swiperSlideDiv = document.createElement('div');
                swiperSlideDiv.classList.add('swiper-slide');

                const img = document.createElement('img');
                img.src = `/pic/feed/${item.ifeed}/${imgObj.img}`;
                swiperSlideDiv.append(img);
                swiperWrapperDiv.append(swiperSlideDiv);
            }

            itemContainer.append(topDiv);
            itemContainer.append(imgDiv);

• const itemContainer = document.createElement('div'); itemContainer.classList.add('item');
<div class='item'></div>

    const topDiv = document.createElement('div');
    topDiv.classList.add('top')
    topDiv.innerHTML = `
    <div class="itemProfileCont">${imgTag}</div>
    <div>
        <div><span class="pointer"token interpolation">${item.iuser});">${item.writer}</span> - ${regDtInfo}</div>
        <div>${item.location == null ? '' : item.location}</div>
    </div>
    `;

[ topDiv ]

<div class='top'>
   <div class="itemProfileCont">
           <img src="/pic/profile/${item.iuser}/${item.mainProfile}" class="pointer profile wh30" 
                           onclick="moveToProfile(${item.iuser});" onerror="this.style.display='none';">
   </div>
   <div>
       <div>
           <span class="pointer" onclick="moveToProfile(${item.iuser});">${item.writer}</span> - ${regDtInfo}
       </div>
       <div>${item.location == null ? '' : item.location}</div>
   </div>
</div>

• const imgDiv = document.createElement('div'); imgDiv.classList.add('itemImg');
  : <div class="itemImg"></div>
• const swiperContainerDiv = document.createElement('div'); swiperContainerDiv.classList.add('swiper-container');
  : <div class="swiper-container"></div>
• const swiperWrapperDiv = document.createElement('div'); swiperWrapperDiv.classList.add('swiper-wrapper');
  : <div class="swiper-wrapper"></div>

    const swiperSlideDiv = document.createElement('div');
    swiperSlideDiv.classList.add('swiper-slide');

    const img = document.createElement('img');
    img.src = `/pic/feed/${item.ifeed}/${imgObj.img}`;
    swiperSlideDiv.append(img);
    swiperWrapperDiv.append(swiperSlideDiv);

[ imgDiv ]

<div class="itemImg">
  <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="/pic/feed/${item.ifeed}/${imgObj.img}">
        </div>
    </div>
  </div>
</div>

• itemContainer.append(topDiv); itemContainer.append(imgDiv);

<div class='item'>  * 여러번 반복 
  <div class='top'>
      <div class="itemProfileCont">
              <img src="/pic/profile/${item.iuser}/${item.mainProfile}" class="pointer profile wh30" 
                              onclick="moveToProfile(${item.iuser});" onerror="this.style.display='none';">
      </div>
      <div>
          <div>
              <span class="pointer" onclick="moveToProfile(${item.iuser});">${item.writer}</span> - ${regDtInfo}
          </div>
          <div>${item.location == null ? '' : item.location}</div>
      </div>
  </div>

  <div class="itemImg">
    <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"> * 여러번 반복 
            <img src="/pic/feed/${item.ifeed}/${imgObj.img}">
          </div>
      </div>
    </div>
  </div>
</div>

---

🟦 feed.js

            //좋아요 영역
            const favDiv = document.createElement('div');
            favDiv.classList.add('favCont');
            const heartIcon = document.createElement('i');
            heartIcon.className = 'fa-heart pointer';
            if(item.isFav === 1) { //좋아요 O
                heartIcon.classList.add('fas');
            } else { //좋아요 X
                heartIcon.classList.add('far');
            }
            const heartCntSpan = document.createElement('span');
            heartCntSpan.innerText = item.favCnt;

            heartIcon.addEventListener('click', ()=> {
                item.isFav = 1 - item.isFav;
                fetch(`fav?ifeed=${item.ifeed}&type=${item.isFav}`)
                    .then(res => res.json())
                    .then(myJson => {
                        if(myJson === 1) {
                            switch (item.isFav) {
                                case 0: //O > X
                                    heartIcon.classList.remove('fas');
                                    heartIcon.classList.add('far');
                                    heartCntSpan.innerText--;
                                    break;
                                case 1: //X > O
                                    heartIcon.classList.remove('far');
                                    heartIcon.classList.add('fas');
                                    heartCntSpan.innerText++;
                                    break;
                            }
                        }
                    });
            });
            favDiv.append(heartIcon);
            favDiv.append(heartCntSpan);

            itemContainer.append(favDiv);

• const favDiv = document.createElement('div'); favDiv.classList.add('favCont');
  : <div class="favCont"></div>
• const heartIcon = document.createElement('i'); heartIcon.className = 'fa-heart pointer';
  : <i class="fa-heart pointer"></i>
• const heartCntSpan = document.createElement('span'); heartCntSpan.innerText = item.favCnt;
  : <span>${item.favCnt}</span>
• favDiv.append(heartIcon); favDiv.append(heartCntSpan);

<div class="favCont">
  <i class="fa-heart pointer"></i>
  <span>${item.favCnt}</span>
</div>

• itemContainer.append(favDiv);

<div class='item'>  * 여러번 반복 
   //글쓴이 정보 영역
  <div class='top'>
      <div class="itemProfileCont">
              <img src="/pic/profile/${item.iuser}/${item.mainProfile}" class="pointer profile wh30" 
                              onclick="moveToProfile(${item.iuser});" onerror="this.style.display='none';">
      </div>
      <div>
          <div>
              <span class="pointer" onclick="moveToProfile(${item.iuser});">${item.writer}</span> - ${regDtInfo}
          </div>
          <div>${item.location == null ? '' : item.location}</div>
      </div>
  </div>

  //이미지 영역
  <div class="itemImg">
    <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"> * 여러번 반복 
            <img src="/pic/feed/${item.ifeed}/${imgObj.img}">
          </div>
      </div>
    </div>
  </div>

   //좋아요 영역
  <div class="favCont">
    <i class="fa-heart pointer"></i>   👉 click 💨 fav?ifeed=${item.ifeed}&type=${item.isFav}
    <span>${item.favCnt}</span>
  </div>
</div>

🟦 FeedController

@ResponseBody
@GetMapping("/fav")
public int feedFavProc(FeedFavEntity param, int type) { //type: 1 - ins(등록), 0 - del(취소)
    System.out.println(param);
    System.out.println("type: " + type);
    return service.feedFavProc(param, type);
}

🟦 FeedService

public int feedFavProc(FeedFavEntity param, int type) {
    param.setIuser(auth.getLoginUserPk());
    if(type == 1) {
        return mapper.insFeedFav(param);
    }
    return mapper.delFeedFav(param);
}

🟦 FeedMapper

int insFeedFav(FeedFavEntity param);
int delFeedFav(FeedFavEntity param);

<insert id="insFeedFav">
    INSERT INTO t_feed_fav
    ( ifeed, iuser )
    VALUES
    ( #{ifeed}, #{iuser} )
</insert>

<delete id="delFeedFav">
    DELETE FROM t_feed_fav
    WHERE ifeed = #{ifeed}
    AND iuser = #{iuser}
</delete>

---

🟦 feed.js

            if(item.ctnt != null) { // 글내용 영역
                const ctntDiv = document.createElement('div');
                ctntDiv.innerText = item.ctnt;
                ctntDiv.classList.add('itemCtnt');
                itemContainer.append(ctntDiv);
            }

            //댓글 영역
            const cmtDiv = document.createElement('div');
            const cmtListDiv = document.createElement('div');
            const cmtFormDiv = document.createElement('div');
            cmtDiv.append(cmtListDiv);
            if(item.cmt != null && item.cmt.isMore === 1) {
                const moreCmtDiv = document.createElement('div');
                const moreCmtSpan = document.createElement('span');
                moreCmtSpan.className = 'pointer';
                moreCmtSpan.innerText = '댓글 더보기';
                moreCmtSpan.addEventListener('click', () => {
                    moreCmtSpan.remove();
                    fetch(`cmt?ifeed=${item.ifeed}`)
                        .then(res => res.json())
                        .then(result => {
                            result.forEach(obj => {
                                const cmtItemContainerDiv = this.makeCmtItem(obj);
                                cmtListDiv.append(cmtItemContainerDiv);
                            })
                        });
                });
                moreCmtDiv.append(moreCmtSpan);
                cmtDiv.append(moreCmtDiv);
            }
            cmtDiv.append(cmtFormDiv);

            const cmtInput = document.createElement('input');
            cmtInput.type = 'text';
            cmtInput.placeholder = '댓글을 입력하세요...';
            cmtInput.addEventListener('keyup', (e) => {
                if(e.key === 'Enter') {
                    cmtBtn.click();
                }
            });

            if(item.cmt != null) { //댓글 있음
                const cmtItemContainerDiv = this.makeCmtItem(item.cmt);
                cmtListDiv.append(cmtItemContainerDiv);
            }

            const cmtBtn = document.createElement('input');
            cmtBtn.type = 'button';
            cmtBtn.value = '등록';
            cmtBtn.addEventListener('click', () => {
               const cmt = cmtInput.value;
               if(cmt.length === 0) {
                   alert('댓글 내용을 작성해 주세요.');
                   return;
               }

               const param = {
                   ifeed: item.ifeed,
                   cmt: cmt
               }

               fetch('cmt', {
                   method: 'POST',
                   headers: {
                       'Accept': 'application/json',
                       'Content-Type': 'application/json'
                   },
                   body: JSON.stringify(param)
               })
                   .then(res => res.json())
                   .then(myJson => {
                       console.log(myJson);
                       switch(myJson) {
                           case 0:
                               alert('댓글을 등록할 수 없습니다.');
                               break;
                           case 1:
                               //댓글 추가한다.
                               const globalConstElem = document.querySelector('#globalConst');

                               const param = { ...globalConstElem.dataset };
                               param.cmt = cmtInput.value;

                               const cmtItemDiv = this.makeCmtItem(param);
                               cmtListDiv.append(cmtItemDiv);

                               cmtInput.value = '';
                               break;
                       }
                   })
                   .catch(err => {
                       console.log(err);
                   });
            });

            cmtFormDiv.append(cmtInput);
            cmtFormDiv.append(cmtBtn);

            itemContainer.append(cmtDiv);
            this.containerElem.append(itemContainer);
        }
        if(this.swiper != null) { this.swiper = null; }
        this.swiper = new Swiper('.swiper-container', {
            direction: 'horizontal',
            loop: false,
        });
    },

• makeCmtItem(obj)

    makeCmtItem: function({iuser, writerProfile, writer, cmt}) {
        const cmtItemContainerDiv = document.createElement('div');
        cmtItemContainerDiv.className = 'cmtItemCont';

        //프로필
        const cmtItemProfileDiv = document.createElement('div');
        cmtItemProfileDiv.className = 'cmtItemProfile';
        const cmtItemWriterProfileImg = document.createElement('img');
        cmtItemWriterProfileImg.src = `/pic/profile/${iuser}/${writerProfile}`;
        cmtItemWriterProfileImg.className = 'profile wh30 pointer';
        cmtItemWriterProfileImg.addEventListener('click', () => {
            moveToProfile(iuser);
        });

        cmtItemProfileDiv.append(cmtItemWriterProfileImg);
        cmtItemContainerDiv.append(cmtItemProfileDiv);

        //댓글
        const cmtItemCtntDiv = document.createElement('div');
        cmtItemCtntDiv.className = 'cmtItemCtnt';
        cmtItemCtntDiv.innerHTML = `<div class="pointer"token interpolation">${iuser});">${writer}</div><div>${cmt}</div>`;
        cmtItemContainerDiv.append(cmtItemCtntDiv);

        return cmtItemContainerDiv;
    }

---

<div class='item'>  * 여러번 반복 
   //글쓴이 정보 영역
  <div class='top'>
      <div class="itemProfileCont">
              <img src="/pic/profile/${item.iuser}/${item.mainProfile}" class="pointer profile wh30" 
                              onclick="moveToProfile(${item.iuser});" onerror="this.style.display='none';">
      </div>
      <div>
          <div>
              <span class="pointer" onclick="moveToProfile(${item.iuser});">${item.writer}</span> - ${regDtInfo}
          </div>
          <div>${item.location == null ? '' : item.location}</div>
      </div>
  </div>

  //이미지 영역
  <div class="itemImg">
    <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"> * 여러번 반복 
            <img src="/pic/feed/${item.ifeed}/${imgObj.img}">
          </div>
      </div>
    </div>
  </div>

   //좋아요 영역
  <div class="favCont">
    <i class="fa-heart pointer"></i>   👉 click 👉 fav?ifeed=${item.ifeed}&type=${item.isFav}
    <span>${item.favCnt}</span>
  </div>

   //글 내용 영역
  <div class="itemCtnt">${item.ctnt}</div>

  //댓글영역 
  <div>
    <div>
      <div>
          <div> 👉 cmtListDiv
              <span>댓글더보기</span> 👉 click 👉 remove() 👉 cmt?ifeed=${item.ifeed}  
          </div>                                        👉 makeCmtItem(obj) * 반복
      </div>
    </div>
  
    <input type="text" placeholder="댓글..." onkeyup="엔터→cmtBtn.click()"></input>
    <input type="button" value="등록"></input> 👉 click 👉 cmt(item.ifeed, cmtInput.value)
                                          👉 makeCmtItem({ ...globalConstElem.dataset }) 👉  cmtListDiv.append()
  </div>
</div>

🟦 home.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="basicLayout">
    <th:block layout:fragment="css">
        <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
        <link rel="stylesheet" th:href="@{/css/feed/home.css}">
    </th:block>

    <th:block layout:fragment="js">
        <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
        <script defer th:src="@{/js/feed.js}"></script>
        <script defer th:src="@{/js/feed/home2.js}"></script>
    </th:block>

    <th:block layout:fragment="content">
        <div id="feedContainer"></div>
        <div class="loading hide"><img th:src="@{/img/loading.gif}"></div>
    </th:block>
</html>

🟦 결과

    <th:block layout:fragment="content">
        <div id="feedContainer">
            <div class='item'>  * 여러번 반복 
               //글쓴이 정보 영역
              <div class='top'>
                  <div class="itemProfileCont">
                          <img src="/pic/profile/${item.iuser}/${item.mainProfile}" class="pointer profile wh30" 
          onclick="moveToProfile(${item.iuser});" onerror="this.style.display='none';">
                  </div>
                  <div>
                      <div>
                          <span class="pointer" onclick="moveToProfile(${item.iuser});">${item.writer}</span> - ${regDtInfo}
                      </div>
                      <div>${item.location == null ? '' : item.location}</div>
                  </div>
              </div>
            
              //이미지 영역
              <div class="itemImg">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide"> * 여러번 반복 
                        <img src="/pic/feed/${item.ifeed}/${imgObj.img}">
                      </div>
                  </div>
                </div>
              </div>
            
               //좋아요 영역
              <div class="favCont">
                <i class="fa-heart pointer"></i>👉 click 👉 fav?ifeed=${item.ifeed}&type=${item.isFav}
                <span>${item.favCnt}</span>
              </div>
            
               //글 내용 영역
              <div class="itemCtnt">${item.ctnt}</div>
            
              //댓글영역 
              <div>
                <div>
                  <div>
                      <div> 👉 cmtListDiv
                          <span>댓글더보기</span> 👉 click 👉 remove() 👉 cmt?ifeed=${item.ifeed}  
                      </div>                                        👉 makeCmtItem(obj) * 반복
                  </div>
                </div>
              
                <input type="text" placeholder="댓글..." onkeyup="엔터→cmtBtn.click()"></input>
                <input type="button" value="등록"></input> 👉 click 👉 cmt(item.ifeed, cmtInput.value)
                     👉 makeCmtItem({ ...globalConstElem.dataset }) 👉  cmtListDiv.append()
              </div>
            </div>
        </div>
        <div class="loading hide"><img th:src="@{/img/loading.gif}"></div>
    </th:block>

---

🟦 feed.js가 돌아가는 구조

• 처음 getFeedList 호출
  ↳ 여기서 makeFeedList 호출
• 스크롤 (이 부분이 계속 반복)
  ↳ 여기서 getFeedList 호출
  ↳ 여기서 makeFeedList 호출

✅ feed.js - getFeedList

    getFeedList: function(page) {
        this.showLoading();

        fetch(`${this.url}?iuserForMyFeed=${this.iuser}&page=${page}&limit=${this.limit}`)
            .then(res => res.json())
            .then(myJson => {
                console.log(myJson);
                this.itemLength = myJson.length;
                this.makeFeedList(myJson);
            }).catch(err => {
            console.log(err);
        }).then(() => {
            this.hideLoading();
        });
    },

✅ FeedDTO

• int page
• int limit
• int iuserForMyFeed
• int iuserForFav
• int getStarIdx() {return (page-1) * limit}

✅ FeedController

@ResponseBody
@GetMapping("list2")
public List<FeedDomain2> selFeedList2(FeedDTO param) {
  return service.selFeedList2(param);
}

✅ FeedService

public List<FeedDomain2> selFeedList2(FeedDTO param) {
  param.setIuserForFav(auth.getLoginUserPk());
  return mapper.selFeedList2(param);
}

✅ FeedDomain2

• int iFeed
• String location
• String ctnt
• int iuser
• String regdt
• String writer
• String mainProfile
• int favCnt
• int isFav
• List<FeedImgEntity> imgList
• FeedCmtDomain cmt

✅ FeedMapper

List<FeedDomain2> selFeedList2(FeedDTO param);

• iuserForMyFeed : 0
• page : 1
• limit : 5
• iuserForFav : 나
• starIdx : 0 → 5 → 10 → 15...

SELECT
A.ifeed, A.location, A.ctnt, A.iuser, A.regdt
, C.nm AS writer, C.mainProfile, IFNULL(E.cnt, 0) AS favCnt
<if test="iuserForFav > 0"> 👉🟦true🟦
, CASE WHEN D.ifeed IS NULL THEN 0 ELSE 1 END AS isFav
</if>
FROM t_feed A
INNER JOIN t_user C
ON A.iuser = C.iuser  👉🟦어떤 사람들이(nm, mainProfile) 쓴 글들의 
                        ifeed, location, ctnt, iuser, regdt, 좋아요갯수와 각각의 글들에 
                        내가 좋아요 했는지 여부 isFav가 각각 모여서LIST가 된다.  🟦
<if teset="iuserForMyFeed > 0"> 👉🟦false🟦
AND C.iuser = ${iuserForMyFeed} 👉🟦만약 true라면 내가 팔로우한 사람들의 글만 볼 수 있다.🟦
</if>
LEFT JOIN (
SELECT ifeed, COUNT(ifeed) AS cnt
FROM t_feed_fav
GROUP BY ifeed
) E  👉🟦그 글의 좋아요 갯수 , 위에서 E.cnt로 쓰인다🟦 
ON A.ifeed = E.ifeed
<if test="iuserForFav > 0"> 👉🟦true🟦
LEFT JOIN t_feed_fav D
ON D.iuser = ${iuserForFav} 👉🟦그 글에 나는 좋아요 눌렀는지 여부🟦
AND A.ifeed = D.ifeed   👉🟦위에서 D.ifeed라고 쓰인다🟦
</if>
ORDER BY ifeed DESC 👉🟦리스트를 최신순으로 나열한다🟦
LIMIT #{starIds} , #{limit} 👉🟦0, 5 → 가장 처음부터 5개를🟦

<resultMap id="FeedDomainMap" type="FeedDomain2">
    <result property="ifeed" column="ifeed"></result>
    <association property="cmt" column="ifeed" select="selFeedCmt"></association>
    <collection property="imgList" column="ifeed" select="selFeedImgList"></collection>
</resultMap>

<select id="selFeedCmt" resultType="FeedCmtDomain">
    SELECT A.*, COUNT(A.icmt) - 1 AS isMore
    FROM (
        SELECT
            A.icmt, A.cmt, A.regdt, A.ifeed
            , B.iuser, B.nm as writer, B.mainProfile as writerProfile
        FROM t_feed_cmt A
        INNER JOIN t_user B
        ON A.iuser = B.iuser
        WHERE A.ifeed = ${ifeed}
        ORDER BY icmt ASC
        LIMIT 2
    ) A
    GROUP BY A.ifeed
</select>

<select id="selFeedImgList" resultType="FeedImgEntity">
    SELECT ifeedimg, ifeed, img FROM t_feed_img
    WHERE ifeed = #{ifeed}
</select>