4) HTML templating 서버로부터 받은 데이터를 화면에 반영해야 하는 경우가 많이 있습니다. 그런데 HTML 형태는 그대로이고, 데이터만 변경이 되는 경우가 있을 텐데요. 이럴 때는 어떻게 처리하는 게 효율적인지 알아봅니다. HTML Templating 댓글 또는 상품과 같은 아래 화면에 데이터를 Ajax로 받아와서 화면에 추가해야 한다고 생각해봅시다. 데이터는 JSON 형태의 데이터입니다. 아래 리스트들의 상품들은 HTML 구조, 즉, structure는 굉장히 비슷한데 데이터(사진, 가격, 이름, 별점 등)만 다른 것입니다. 해당 상품 정보만 바꿔서 HTML에 추가하면 효율적으로 동작할 것 같습니다. 여기서 templating 이라는 개념을 도입하면 좋습니다. HTML Templating ..
3) Event delegation 이런 상황에서의 이벤트 등록(이벤트를 효율적으로 등록하는 방법) 아래 화면은 가로로 배치된 책 리스트입니다. 각각 리스트에 클릭을 할 때 어떤 이벤트가 발생해야 한다고 가정합니다. addEventListener를 사용해서 이벤트 등록을 할 수 있을겁니다. 예제에는 4개의 li 태그가 있습니다. li 각각에 addEventListener를 통해 이벤트를 등록합니다. 이 코드는 잘 동작합니다. var log = document.querySelector(".log"); var lists = document.querySelectorAll("ul > li"); for(var i=0,len=lists.length; i < len; i++) { lists[i].addEventLis..
2) DOMContentLoaded 이벤트 일반적으로 GET 방식으로 사이트에 요청을 하면 해당 사이트에서 HTML을 응답으로 받고 파싱을 합니다. HTML 코드에 CSS가 필요하면 CSS를 요청해서 받아오고 자바스크립트가 필요하면 또 요청해서 받아오고 이미지가 필요하면 또 요청해서 받아옵니다. 그리고 받아온 HTML과 CSS를 분석해서 배치를 결정하는데 이를 레이아웃이라 합니다. 렌더링 작업 후에 이미지까지 가져와서 화면에 출력을 하면 사용자 입장에서는 화면이 전부 로드된 것으로 보입니다. 그런데 이러한 과정 중간에 자바스크립트가 들어가서 DOM API를 사용하여 구조를 바꾸려 한다면 사용할 수가 없습니다. 아직 DOM 트리가 구성되기 전이기 때문입니다. 이러한 이유로 자바스크립트 파일을 HTML 하단..
1) 서비스 개발을 위한 디렉토리 구성 1. JavaScript파일 구성 간단한 내용의 JavaScript라면 한 페이지에 모두 표현하는 것도 좋습니다. 그렇지 않다면 의미에 맞게 구분하는 방법이 더 좋습니다. 2. HTML안에 JavaScript 구성하기 CSS는 head태그 안에 상단에 위치합니다. 자바스크립트는 body 태그가 닫히기 전에 배치합니다. 브라우저는 한 라인씩 HTML 코드를 파싱하다가 자바스크립트 코드가 있으면 실행해 버립니다. 그런데 script를 head에 위치시키면 document라는 게 구성이 제대로 안 되어서 그 아래에 있는 태그를 못 찾습니다. 그래서 자바스크립트 코드를 body 태그 닫히기 전에 위치시킵니다. 또한, 자바스크립트는 소스파일 간 의존성을 이해해서 순서대로 배..