📚TIL

Day 17

Element.closest()

• 선택한 Element로부터 부모 요소 단위로 출발해 인자로 들어간 선택자와 동일한 선택자를 찾음
• 가장 가깝게 조건에 만족한 부모 요소가 반환
• 조건에 만족한 요소가 없으면 null 반환

<article>
	<div id= "top">
  		<div id="middle">
        	<div id="bottom">
              </div>
        </div>
  	</div> 
<article>
              
var $bottom = document.getElementById('bottom')

var $middle = bottom.closest('middle')
//middle id를 가진 div를 반환

var $top = bottom.closest('article > div')
//bottom에서 가장 가까운 article에서 바로 하위의 div요소 반환

var $article = $bottom.closest(':not(div)')
//  div요소가 아닌 가장 가까운 부모인 article요소가 반환

낙관적 업데이트

• 서버에 요청했을 때 성공할 것이라고 낙관적으로 보고 서버와 통신 전에 현재 상태에 추가하는 것
• 서버와의 통신이 늦어질 경우 화면에 출력되지 않는 일을 방지할 수 있음
• api 통신이 느릴 때 로딩처리를 하는게 안전하나 사용성이 끊긴다는 느낌을 줄이기 위해서 사용할 수 있음

input - placeholder

• input 태그에 무엇을 입력해야 하는지 안내하는 문구를 넣고 싶을 때 사용
• 화면에는 지정한 문자열이 보이나 버튼을 클릭했을 때 문자열이 전송되진 않음

Todo App 실습

🌊하루를 마치며

오늘 Todo APP 실습을 하면서 낙관적 업데이트가 가장 기억에 남았다. 이름이 일단 귀여서 내용을 들어보니 더 재밌었다. 서버와 통신하는 중에 어떤 에러도 나지 않을 것이라고 낙관적으로 생각하고 화면에 출력한다는 것이 재밌었다. 그러다 만약에 에러가 난다면 서버와 화면에서 차이가 발생하는데 이 때 어떤식으로 해결하는게 효율적일지 궁금했다. 이부분은 따로 조사해봐야겠다! 실습을 하면서 전보다 더 복잡해지고 컴포넌트들을 다루는게 어려워졌다 ㅠㅠ 이제 시간이 많이 없는데 프로젝트를 해낼 수 있을지 너무 걱정된다.. 그래도 하는데까진 해봐야지!
아직도 강의를 다 듣지 못해서 내일은 강의 마무리와 프로젝트를 시작할 생각이다. 제발 오류에 시간 많이 뺏기지 않고 목표하는데까지 해냈으면 좋겠당 ㅠㅠ