2) Tab UI에 생명 불어넣기 간단하게 이벤트로 해서 Ajax를 가져온 다음에 화면에 넣는 사이클을 해보겠습니다. Ajax를 이용하려면 간단하게 로컬 서버를 띄어주는 게 좋습니다. 만약에 NPM이라는 노드 패키지가 설치되어 있으면 live-server와 같은 것들을 찾아가지고 npm install 할 수가 있고요. 파이썬이 만약에 설치되어 있는 경우도 서버를 띄울 수가 있습니다. 중간에 매번 누를 때마다 데이터를 매번 가져오는 조금 미련한 방법을 하고 있는데 이거는 캐시를 하면 됩니다. 메모리에 보관을 하면 돼요. 메모리에 보관한다는 거는 결과를 배열이나 오브젝트에 넣어놓으시라는 얘기입니다. 있으면 그거를 재사용하는 것이겠죠. type="my-template"가 기술적으로 문제를 일으키지는 않습니다...
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 ..