시작

Text Editor 기본 로직

• 텍스트에 style을 바꿀 수 있는 버튼들을 생성하고 각 버튼을 클릭시 이벤트를 발생 + execCommand라는 문서 편집 관련 함수를 사용해 텍스트 에디터를 구현 (현재는 deprecated된 함수)

toggle

• <html요소>.classList.toggle을 통해 class를 넣었다 뺏다 할 수 있음

preventDefault

• preventDefault 함수를 사용해 html 요소에 기본적으로 동작하는 동작을 취소 시킬 수 있다

innerText, innerHTML, textContent

• innerText는 html 요소에서 마크업이 적용된 텍스트 내용을 가져 오고, innerHTML은 html 요소에서 텍스트 + html 태그 까지 같이 가져온다, textContent는 마크업이 적용되지 않은 텍스트 내용을 가져와 성능적으로 innerText보다 좋다고 한다

Todo List 기본 로직

• DOM 트리가 로딩이 완료 된 후 Todo 리스트를 가져옴
  • 서버에 GET 메소드를 전달 -> 이 후 서버에서 받아온 내용을 가지고 todo element를 생성해 todo list에 append
• input 필드에 내용을 넣고 submit 하면 db에 Todo 업데이트
  • input 필드 내용을 payload에 넣어 서버에 POST 메소드 전달 -> 이 후 getTodo 함수로 Todo 리스트 업데이트
• Todo 요소의 체크박스를 클릭하면 db의 체크 상태 업데이트
  • 체크박스 상태를 payload에 넣어 서버에 PATCH 메소드 전달 -> 이 후 getTodo 함수로 Todo 리스트 업데이트
• 업데이트 버튼을 누르면 Todo 내용을 변경 가능
  • input 필드 + 변경 확인 버튼을 보이게 하고 label + 내용 변경 버튼은 안보이게
• 내용 변경 후 확인 버튼을 누르면 db에 변경 내용 업데이트
  • 변경 된 내용을 payload에 넣어 서버에 PATCH 메소드 전달 -> 이 후 getTodo 함수로 Todo 리스트 업데이트
• x 버튼을 누르면 Todo를 db에서 삭제
  • 서버에 DELETE 메소드 전달 -> 이 후 getTodo 함수로 Todo 리스트 업데이트

fetch 관련 이슈

• fetch로 GET이외의 method를 사용하면 page refresh가 되는 현상이 있는데 원인을 잘 모르겠다

비동기 통신

• 비동기 통신 방법으로 fetch, ajax, axios가 있는데 ajax는 promise 기반이 아니라 콜백헬이나 에러 처리 한계를 가지고 있다고 한다. 그리고 fetch를 사용하면 headers 필드 내용이 필수로 들어가야 한다

closest 함수

• event.target.closest(<찾는 요소>) 메소드는 event가 발생한 요소 부터 부모 -> html 요소까지 트리를 이동하면서 매개변수에 적힌 요소를 찾는다

dataset

• dataset는 read only 만 가능한 속성이다. data-<이름> 으로 넣어준 속성인 경우 <해당 요소>data.set.<이름>으로 넣어준 속성에 접근 가능하다

style.display

• <요소>.style.display에 ‘block’, ‘none’을 넣어줌으로써 요소를 보였다 안보였다 할 수 있다

끝

😊