to-do-list + pagination

json-server로 fake API 구축

https://github.com/typicode/json-server
npm install -g json-server
sudo npm install -g json- server
npm을 통한 설치 가능
json-server --watch db.json

fetch API를 이용한 데이터 연동

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API
Ajax 요청을 위한 기술
비동기적 요청을 위해 사용한다.(새로고침 안하고 정보 불러와서 값 바꾸기)

var url = 'https://example.com/profile';
var data = {username: 'example'};

fetch(url, {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), 
  // data can be `string` or {object}!
  headers:{
    'Content-Type': 'application/json'
  }
}).then(res => res.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));

fetch 는 "응답은 Response (en-US) 객체로 표현되며, 직접 JSON 응답 본문을 받을 수는 없습니다." 즉,

fetch(url, {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), 
  // data can be `string` or {object}!
  headers:{
    'Content-Type': 'application/json'
  }
})

해당 코드에서는 받은 data = response(res)는 json 형식이 아니란 말.
그래서 .json()을 붙여서 받는다.

.then(res => res.json())

axios는 이 처리가 필요 없다.

method는 get,post...
body는 보낼 데이터
header 보낼 데이터의 타입

headers:{
    'Content-Type': 'application/json'
  }

DOMContentLoaded

https://developer.mozilla.org/ko/docs/Web/API/Window/DOMContentLoaded_event

• 초기 HTML 문서를 완전히 불러왔을 때 발생하게 만든 이벤트
• 페이지 최초 렌더링 시 발생하는 이벤트로 해당 이벤트가 실행되면 json data를 연결하여 값을 불러오도록 할 수 있다.
• 웹 페이지 생명주기

window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');
});

document.querySelector(target)

querySelector()는 javascript에서 CSS 선택자를 기반으로 element를 찾는 방법이다. 유사 방식으로 querySelectorAll()도 있다.

querySelector() 메소드는 CSS 선택자에 매치되는 하나 이상의 요소 중 첫 번째 항목을 반환한다.
만약 selector가 올바르지 않은 CSS 문법이라면 이 메소드는 SyntaxError를 내보낸다.
매치되는 요소가 하나도 없을 경우 null을 리턴한다.

querySelectorAll() 메소드는 CSS 선택자에 매치되는 모든 요소의 NodeList를 반환한다.
매치되는 요소가 없으면 빈 NodeList(길이가 0인 배열)를 반환한다. 이 NodeList는 Array 객체가 아닌 유사배열이다. NodeList를 배열로 전환하려면 다음과 같이 Array.from() 메소드를 사용할 수 있다.

즉, 기존 document.getElement~를 쓰지 않고
'TagName','.className','#id' 를 작성해 가져올 수 있다.

관련하여 꼭 읽어볼 글

//get 함수는 쿼리셀렉터를 편하게 사용할 수 있는 헬퍼 함수
const get = (target) => {
  return document.querySelector(target)
}

//이걸 쓰려면 get함수가 선언된 다음에 작성해야 한다.
const $wrap = get('.wrap'); 

javascript에서 dataset

HTML5 에서 새로 확장된 속성.
HTML에 추가의 커스텀 속성을 표시하는데 표준화된 방법을 제공하기 위해 제안되었다.

data-* 어트리뷰트로 표기하며, HTML5 표준 속성처럼 접근할 수 있다.

데이터셋 속성은 data-속성명="속성값" 으로 1개의 데이터셋 속성을 정의한다.
DOM 속성으로 변환될 때 data- 는 제외하고 "속성명"만 속성 이름으로 사용한다.
자바스크립트는 DOM 생성 시점에 data- 로 시작하는 속성들을 하나로 모아 dataset 맵(Map)으로 따로 모아서 관리한다.

관련해서 꼭 읽어볼 글

event.preventDefault();

form-submit 조합에 이벤트 발생 시 자동으로 새로고침 되는 것을 막는다.
Ajax 통신을 사용할 경우 전체 페이지가 렌더링 될 필요가 없으므로 무분별한 렌더링을 막기위해 사용한다.
🚨🚨 가운데 D를 반드시 대문자로 적을 것!! 🚨🚨

input data edit 시 커서 text 맨 뒤로 보내기

focus() 를 주면 input 맨 앞으로 텍스트포인터가 잡힌다.
이를 기존 value 맨 뒤로 보내기 위해서
기존 value를 변수로 담아두고 input창에 있는 value를 지웠다가 다시 적게 만든다.

focusValue = input.value

input.focus()
input.value = ""
input.value = focusValue

pagination

• 필요한 것

  • currentPage
  • totalPage
  • pageCount (이전-다음으로 이동 )
  • limit (한 page 당)

총 페이지의 갯수 계산

현재 페이지에 보여지는 그룹이 어떤 건지 계산

현재 페이지 그룹의 첫번째/마지막 숫자 계산

const currentPage = 1
const pageCount = 5

let pageGroup = Math.ceil(currentPage / pageCount) // 1

const currentPage = 7
const pageCount = 5

let pageGroup = Math.ceil(currentPage / pageCount) // 2

const pageGroup = 1
const pageCount = 5
const totalPage = 11

let lastNumber = pageGroup * pageCount // 5
if (lastNumber > totalPage) {
  lastNumber = totalPage
}
let firstNumber = lastNumber - (pageCount - 1) // 1

const next = lastNumber + 1 // 6
const prev = firstNumber - 1 // 0

// 1~5만큼 페이지네이션 그려줌
for (let i = firstNumber; i <= lastNumber; i++) {
  html += `<button class="pageNumber" id="page_${i}">${i}</button>`
}

const pageGroup = 2
const pageCount = 5
const totalPage = 11

let lastNumber = pageGroup * pageCount // 10
if (lastNumber > totalPage) {
  lastNumber = totalPage
}
let firstNumber = lastNumber - (pageCount - 1) // 6

const next = lastNumber + 1 // 11
const prev = firstNumber - 1 // 5

const pageGroup = 3
const pageCount = 5
const totalPage = 11

let lastNumber = pageGroup * pageCount // 15
if (lastNumber > totalPage) {
  lastNumber = totalPage // 11
}
let firstNumber = lastNumber - (pageCount - 1) // 7

const next = lastNumber + 1 // 12
const prev = firstNumber - 1 // 6

json을 사용할 경우 해당 라이브러리가 제공하는 페이지 네이션 기능을 사용할 수 있다.