search

WHYGRAM / WHYGRAM_logs

0 stars 0 forks source link

`fetch CATCH 오작동`, `img.onerror`, 이미지맞추기 , `undo`, 게시물 리스트 - 버그 , 부트스트랩, #48

Open HyeonJin-Jang opened 3 years ago

HyeonJin-Jang commented 3 years ago
HyeonJin-Jang commented 3 years ago

게시물 리스트

게시물 디테일

~분 전

function getDateTimeInfo(dt) {
    const nowDt = new Date();
    const targetDt = new Date(dt);

    const nowDtSec = parseInt(nowDt.getTime() / 1000);
    const targetDtSec = parseInt(targetDt.getTime() / 1000);

    const diffSec = nowDtSec - targetDtSec;
    if(diffSec < 120) {
        return '1분 전';
    } else if(diffSec < 3600) { //분 단위
        return `${parseInt(diffSec / 60)}분 전`;
    } else if(diffSec < 86400) { //시간 단위
        return `${parseInt(diffSec / 3600)}시간 전`;
    } else if(diffSec < 604800) { //일 단위
        return `${parseInt(diffSec / 86400)}일 전`;
    }
    return targetDt.toLocaleString();
}  // --> common.js
HyeonJin-Jang commented 3 years ago

마이페이지 리스트 구조

html


- 이미지
  - `th:attr` ,   `/pic/feed/{feed_id}/{contents_img}` , `onerror="this.src=/img/feed/error.png"`

## `js` 

- `mypageFeed.js`
  - `feedElem`
  - `loadingElem`
  - `mypage_id`  👉🟦`getFeedList`🟦
  - `limit`  👉🟦`getFeedList`🟦
  - `itemLength` 👉🟦`getFeedList , scrollInfinity`🟦
  - `getFeedList`
  - `makeFeedList`
  - `scrollInfinity`
  - `hideLoading`
  - `showLoading`

```js
FeedObj = {
feedElem : document.querySelector('#mypageFeed'),
loadingElem : document.querySelector('#loading'),
mypageList : mypageConstElem.dataset.pid,
limit : 12,
itemLength : 0,
getFeedList : function(page) {
  this.showLoading();
  fetch(`/profile/mypageList?mypage_id=${this.users_id}  👉🟦users_id , limit🟦
  &page=${page}&limit=${this.limit}`)
    .then(res => res.json())
    .then(myJson => {
      console.log(myJson);
      this.itemLength = myJson.length; 👉🟦itemLength (인피니티스크롤에서 쓰임)🟦
      this.makeFeedList(myJson);
    }).catch(err => {
      console.log(err);
      feedElem.innerHTML(`<img src="/img/feed/error.png" class="img-thumbnail wh400">`)
    }).then(() => {
      this.hideLoading();
    });
},
makeFeedList: function(data) {
        if(data.length == 0) { return; }

        for(let i=0; i<data.length; i++) {
            const item = data[i];
      }
},
setScrollInfinity: function(target) {
    target.addEventListener('scroll', () => {
        const {
            scrollTop,
            scrollHeight,
            clientHeight
        } = document.documentElement;

        if (scrollTop + clientHeight >= scrollHeight - 5 && this.itemLength === this.limit) {
            this.itemLength = 0;
            this.getFeedList(++this.currentPage);
        }
    }, { passive: true });
},
hideLoading: function() { this.loadingElem.classList.add('hide');},
showLoading: function() { this.loadingElem.classList.remove('hide'); }
}

java , sql

hover

const mementos = [];
mementos.push(feedElem.innerHTML);
mementos.push(`
<div class="wh70 blurImg"></div>
`);
HyeonJin-Jang commented 3 years ago

마이페이지 디테일 구조

부트스트랩 MODAL

            mypageFeedElem.dataset.bsToggle = "modal";
            mypageFeedElem.dataset.bsTarget = '#mypageDetailModal';
HyeonJin-Jang commented 3 years ago

UNDO

  1. memento형식

https://stackoverflow.com/questions/54416318/how-to-make-a-undo-redo-function

const mementos = []
const input = document.querySelector('input')

function saveMemento() {
  mementos.push(input.value)
}

function undo() {
  const lastMemento = mementos.pop()

  input.value = lastMemento ? lastMemento : input.value
}
<h4> Type some characters and hit Undo </h4>
<input onkeydown="saveMemento()" value="Hello World"/>
<button onclick="undo()">Undo</button>

js 배열의 push() , pop()함수

  1. elem.classList.add()

  2. elem.append() + elem.lastElementChild.remove()

    addEvent : function (elem) {
        const imgElem = elem.firstElementChild;
        elem.addEventListener('mouseover', () => {
            imgElem.classList.add('blurImg');
            this.showIcn(elem);
        });
        elem.addEventListener('mouseout', () => {
            imgElem.classList.remove('blurImg');
            this.hideIcn(elem);
        });
    },
    showIcn : function (elem) {
        const favIcn = this.favIcn(elem.dataset.isfav);
        const cmtIcn = this.cmtIcn(elem.dataset.iscmt);

        const icnElem = document.createElement('div');
        icnElem.id = 'icn';
        icnElem.append(favIcn);
        icnElem.append(cmtIcn);
        icnElem.style.position = 'absolute';

        elem.append(icnElem);
    },
    hideIcn : function (elem) {
        if(elem.childElementCount>1) {
            elem.lastElementChild.remove();
        }
    }
HyeonJin-Jang commented 3 years ago

부트스트랩 display: none

가로영역 다 차지하기 flex 취소하기

<div class="modal-footer" style="display: block">

스크롤

HyeonJin-Jang commented 3 years ago

fecth CATCH 오작동

  1. res.status === 200

    fetch(URL)
        .then(res => {
            if (res.statusCode === 200) {
                return res.json();
            } 
            return res.text().then(text => {throw new Error(text)})
        }).then(myJson => {
            console.log(myJson);
            if (myJson.length) {
                this.itemLength = myJson.length;
                this.makeFeedList(myJson);
            } else {
                console.log('게시물 없음');
                feedElem.innerHTML = '<img src="/img/feed/empty.jpg" class="img-thumbnail wh400">';
            }
        }).catch(err => {
            console.log('에러 : ' + err);
            feedElem.innerHTML = '<img src="/img/feed/error.png" class="img-thumbnail wh400">';
        }).then(() => {
            this.hideLoading();
        });

  2. res.ok

    fetch(URL)
        .then(res => {
            if (res.ok) {
                return res.json();
            } 
            return res.text().then(text => {throw new Error(text)})
        }).then(myJson => {
            console.log(myJson);
            if (myJson.length) {
                this.itemLength = myJson.length;
                this.makeFeedList(myJson);
            } else {
                console.log('게시물 없음');
                feedElem.innerHTML = '<img src="/img/feed/empty.jpg" class="img-thumbnail wh400">';
            }
        }).catch(err => {
            console.log('에러 : ' + err);
            feedElem.innerHTML = '<img src="/img/feed/error.png" class="img-thumbnail wh400">';
        }).then(() => {
            this.hideLoading();
        });
HyeonJin-Jang commented 3 years ago

사진 에러처리 img.onerror

이미지 맞추기

HyeonJin-Jang commented 3 years ago

mypage리스트, 하나의 게시물의 댓글과 좋아요 수만큼 중복되어 나타나는 버그

스크린샷(155)

SQL에 GROUP BY안해서 생긴 문제

 SELECT
        A.feed_id, IFNULL(B.cnt, 0) AS favCnt, IFNULL(D.cnt, 0) AS cmtCnt
            , CASE WHEN E.feed_id IS NULL THEN 0 ELSE 1 END AS isFav
            , CASE WHEN F.feed_id IS NULL THEN 0 ELSE 1 END AS isCmt
        FROM feed A
        LEFT JOIN (
        SELECT feed_id, COUNT(feed_id) AS cnt
        FROM feed_fav
        GROUP BY feed_id
        ) B
        ON A.feed_id = B.feed_id
        LEFT JOIN (
        SELECT feed_id, COUNT(feed_id) AS cnt
        FROM cmt
        GROUP BY feed_id
        ) D
        ON A.feed_id = D.feed_id   
          LEFT JOIN feed_fav E   👈 🔺GROUP BY하지 않아서🔺
          ON E.users_id = 2 AND A.feed_id = E.feed_id
          LEFT JOIN cmt F
          ON F.users_id = 2 AND A.feed_id = F.feed_id
        WHERE A.users_id = 2 👈 🔺GROUP BY하지 않아서🔺
        ORDER BY A.feed_id DESC

👇 올바른 SQL

 SELECT
        A.feed_id, IFNULL(B.cnt, 0) AS favCnt, IFNULL(D.cnt, 0) AS cmtCnt
            , CASE WHEN E.feed_id IS NULL THEN 0 ELSE 1 END AS isFav
            , CASE WHEN F.feed_id IS NULL THEN 0 ELSE 1 END AS isCmt
        FROM feed A
        LEFT JOIN (
        SELECT feed_id, COUNT(feed_id) AS cnt
        FROM feed_fav
        GROUP BY feed_id
        ) B
        ON A.feed_id = B.feed_id
        LEFT JOIN ( 
        SELECT feed_id, COUNT(feed_id) AS cnt
        FROM cmt
        GROUP BY feed_id
        ) D
        ON A.feed_id = D.feed_id
          LEFT JOIN (                  👈 🔺GROUP BY🔺
            SELECT users_id, feed_id
            FROM feed_fav
            GROUP BY feed_id
            ) E
          ON E.users_id = 2 AND A.feed_id = E.feed_id
          LEFT JOIN (                  👈 🔺GROUP BY🔺
          SELECT users_id, feed_id
            FROM cmt
            GROUP BY feed_id
            ) F
          ON F.users_id = 2 AND A.feed_id = F.feed_id
        WHERE A.users_id = 2
        ORDER BY A.feed_id DESC