3주차는 바닐라 자바스크립트 개인 프로젝트 진행 주차였다..!!
2주차 동안에 학습했던 JS강의를 기반으로 진행되었고,
Open API에서 영화정보를 가져와서 페이지에 띄우고, 검색기능을 만드는 내용의 과제였다.
어려웠던 점 / 알게된 점
1. fetch (async/await)
강의를 들으면서 학습한 내용이었지만,
제대로 이해하지 못해서 사용하는데 어려움이 있었다.
하지만 setTimeOut 으로 console에 확인해본다던가
aysnc/await를 작성하는 등의 방법으로
promise pending 문제를 해결할 수 있음을 알게 되었다.
2. JS에서 DOM 접근하기
getElement나 querySelector 등으로 DOM에 접근할 수 있는 방법이 많은데,
각각 반환하는 결과가 일반 배열의 형태가 아닌
HTMLCollection, NodeList로 다르게 확인되는 점을 처음 알게 되었다!
그리고 선택하려는 객체가 한개인지 여러개인지에 따라
Elements나 All을 사용해야 하기 때문에
아무래도 보기 편한 querySelctor를 사용해야겠다고 생각했다.
3. 이벤트 핸들러
Element.addEventListner('click', function (event) {
console.log(event);
})이벤트 핸들러란 특정 이벤트가 발생했을 때 실행되는 함수로
매개변수로 event 객체를 받을 수 있다.
event.target: 이벤트가 발생한 element
event.currentTarget: 이벤트 핸들러가 등록되어 있는 요소
물론 addEventListner 말고
HTML에서 onclick을 사용해서 함수를 실행시킬 수도 있지만,
HTML에 작성하면 함수를 보기 번거로우므로
JS에 이벤트 핸들러를 사용하면 좋다.
JS를 작성할 때
기능이 작동하는 것도 물론 중요하지만,
내가 아닌 다른 사람이 읽어도 편하게 읽을 수 있도록 작성하는 것이 중요하다는 것을 알게 되었다.
그리고 무작정 코드를 작성하기 보다는
주석으로 기능이나 해결 방법을 순서대로 적어보고
그에 필요한 것들을 찾아가며 코드를 작성하는 것이 가독성 좋은 코드를 만드는 방법 중에 하나라고 한다.
다음 프로젝트 진행 시에는 꼭 이부분을 염두해 두고 진행해야겠다..!!
