1) Tab UI를 만들기 위한 HTML과 CSS 구조전략 Tab UI에는 왼쪽 위에 햄버거 버튼이 있고 그 옆으로 여러 메뉴가 있는 경우가 흔합니다. 그리고 메뉴를 누르면 하단의 내용이 통째로 바뀝니다. 하단의 내용은 텍스트로만 이루어져 있는 경우도 있고 텍스트 이외에 다른 컨텐츠들이 있는 경우도 있습니다. 여기서는 텍스트로 화면만 구성해보겠습니다. 우리가 자주 보는 Tab UI 형태 상단 메뉴를 누를 때마다, 새로 고침 없이 아래 내용이 변경되는 경우가 있을 것 같습니다. 실습코드 TAB UI TEST crong jk pobi honux hello jk Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis consequuntur ..
5) HTML templating 실습 HTML Template의 보관 아래와 같은 html 문자열, template을 어딘가 보관해야 합니다. Javascript코드 안에서 이런 정적인 데이터를 보관하는 건 좋지 않기 때문입니다. var html = "{title}{content}{price}"; Template 보관 방법 서버에서 file로 보관하고 Ajax로 요청해서 받아옵니다. HTML코드 안에 숨겨둔다(?) 간단한 것이라면 HTML 안에 숨겨둘 수가 있습니다. 숨겨야 할 데이터가 많다면 별도 파일(a.template, b.template)로 분리해서 Ajax로 가져오는 방법도 좋습니다. 하지만 여기서는 많지 않은 데이터이므로 우리는 HTML 안에 잘 보관해두겠습니다. Templating HTML..
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..