[TDL] 04/26 Today's-Done-List

- JS 기본 문법

• instance : 특정 공간의 메모리를 차지하고 있는 실제 고유한 객체
  https://en.wikipedia.org/wiki/Instance_(computer_science)
• prepend() : 첫 번째 자식 앞에 Node개체 또는 개체 집합을 삽입
  https://developer.mozilla.org/en-US/docs/Web/API/Element/prepend

// 요소 추가
let div = document.createElement("div");
let p = document.createElement("p");
let span = document.createElement("span");
div.append(p);
div.prepend(span);

console.log(div.childNodes); // NodeList [ <span>, <p> ]

// 텍스트 추가
let div = document.createElement("div");
div.append("Some text");
div.prepend("Headline: ");

console.log(div.textContent); // "Headline: Some text"

// 요소, 텍스트 추가
let div = document.createElement("div");
let p = document.createElement("p");
div.prepend("Some text", p);

console.log(div.childNodes); // NodeList [ #text "Some text", <p> ]

 

• Node.removeChild() :  NodeDOM에서 자식 노드를 제거하고 제거된 노드를 반환
  https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

---

- JavaScript infinite-scroll

• api url 변경
  • https://jsonplaceholder.typicode.com/ 
  • jsonplaceholder에서 100개의 post를 받아와, 무한 스크롤을 구현해보는 중.
  • 10개씩 받아오고, 1페이지 초기화.

const limit = 10
let page = 1

const getPost = async () => {
    const API_URL = `https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=${limit}`
    const res = await fetch(API_URL)
    if (!res.ok) {
      throw new Error('에러')
    }
    return await res.json()
  }

• 스크롤 끝부분 감지
  • 어제 했던 프로그래스 바와 같이, scrollTop, scrollHeight, clientHeight의 값을 구한다.
  • scrollHeight에서 -5를 하면 맨 밑에서 5px 떨어진 길이가 되는데,
    만약 scrollTop + clientHeight가 scrollHeight보다 같거나 커진다면 스크롤이 맨 아래로 내려온 것이기에
    한 페이지를 추가해주고 total을 10개 추가하여 load 시켜준다.
  • 이렇게만 구현한다면, 내가 가진 데이터를 모두 보여주고도 스크롤이 계속 적용됨.
    이것을 방지해주기 위해 모든 데이터가 렌더 되었다면 (스크롤이 끝까지 내려갔다면) 스크롤 이벤트를 remove.

const end = 100
let total = 10
let page = 1
  
const onScroll = () => {
    const { scrollTop, scrollHeight, clientHeight } = document.documentElement
    if (total === end) {
      window.removeEventListener('scroll', onScroll)
      return
    }
    if (scrollTop + clientHeight >= scrollHeight - 5) {
      page++
      total += 10
      loadPost()
    }
}

---

17:50 오후 회고 스터디 (만족도 : 6)

저번 주부터 약속도 많고, 날씨도 좋다 보니까? 많이 풀어졌다... 너무 해이해졌다.
이제 놀만큼 놀았으니, 마음 단단히 먹고 피시 카톡도 열지 말고 공부에 집중을 해보자꾸나. (내일 약속 있다는 게 함정)

그리고, 어떤 것을 구현하다가 잘 안 된다 싶으면 바로 해답을 보기보다 구글링을 해보고, 노트에도 적어보면서 생각을 좀 한 뒤에 해답을 보는 습관을 들이자. 실무에는 해답이 존재하지 않는다고!

---

- 자료구조 / 알고리즘 (Js ver.) 강의

---

22:50 저녁 회고 스터디 (만족도 : 6)

집중 잘하다가 조금만 쉰다는 걸 너무 오래 쉬어버렸네....^^

---

[ 출처, 참고 : 제로베이스 프런트엔드 스쿨 ]