Javascript & Jquery (6) 썸네일형 리스트형 서로 다른 도메인을 사용하는 부모창과 자식창(iframe) 간 데이크 통신하는 방법(크로스도메인, postMessage, eventListener message) 부모창에서 iframe을 이용해서 부모창과 다른 도메인을 가진 자식창을 호출해야 하는 경우가 있습니다. 예를 들면, 내가 만든 홈페이지에 구글 애드센스나, 애드픽 등을 넣는 경우 등이 해당됩니다. 아래와 같은 구조가 되는 거죠. 부모창에서 다른 도메인을 가진 iframe 페이지 표시하는 방법 일반적으로 부모창에 서로 다른 도메인을 가진 iframe을 추가하게 되면 아래와 같이 에러가 발생하면서 자식창이 화면에 표시가 안됩니다. 에러 메세지 : Refused to display 'http://localhost:8181/' in a frame because it set 'X-Frame-Options' to 'sameorigin'. 같은 도메인에서만 호출을 허용하도록 설정이 되어 있기 때문입니다. 그래서 아래.. [Javascript] HTML5 Web Storage 를 언제 사용해야 할까? (cookie 대신 활용한 사례) Web Storage 란? HTML5부터 제공하는 기능으로 해당 도메인과 관련된 특정데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능입니다. 우리가 알고 있는 쿠키(cookie) 와 비슷한 기능인거죠. Web Storage가 필요한 이유? 쿠키와 Web Storage 모두 브라우저에 저장되기는 하지만 쿠키는 아래와 같은 단점이 있기 때문에 Web Storage를 사용합니다. 4KB의 데이터 저장 제한 HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안에 취약 쿠키는 모든 HTTP Request에 포함되어 있어 웹서비스 성능에 영향을 줄 수 있음 Web Storage 종류 기존에 우리가 흔히 사용했던 쿠키와 세션(Session) 처럼 Web Storage도 .. 서버작업 없이 엑셀파일 내용을 JSON으로 변환해서 활용하는 예제(HTML5 FileReader + Javascript SheetJS) 오늘은 클라이언트에서, 즉, 순수하게 html과 javascript만으로 엑셀 파일을 핸들링하는 방법과 어떤 경우에 활용했는지 알아보겠습니다. 일단, 기존에는 엑셀파일을 핸들링할 때 서버단에서 JAVA를 이용해서 엑셀 파일을 읽거나 만들어야 했는데, HTML5에서 FileReader 객체를 지원하게 되면서 엑셀과 같은 파일을 읽거나 만들 수 있게 되었습니다. HTML5의 FileReader를 이용해서 파일 읽기 HTML5의 FileReader 란? HTML5의 FileReader 객체를 MDN에서는 아래와 같이 설명하고 있습니다. FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로.. [Javascript] 재귀함수 실제 적용한 예제. 사용자가 입력한 여러 키워드를 조합하는 기능 재귀함수란? 자바스크립트 함수 안에서 다시 자신의 함수를 호출하면서 로직을 처리하는 경우를 말합니다. 일단 개념 자체는 아주 단순합니다. function recurcive(){ ... recurcive(); } 어떤 경우에 사용했나? 아래와 같이 사용자가 입력한 여러 키워드를 조합해서 가능한 모든 경우의 수를 표시해야하는 경우가 있다고 합시다. 대략 어떤 기능인지 이해가 가시나요? 에 사용자가 엔터로 구분된 키워드를 입력하면 모든 경우의 수를 고려해서 키워드를 조합해서 보여주는 기능입니다. 는 1개가 될 수도 있고 5개가 될 수도 있기 때문에 자바스크립트 html의 textarea 태그와 무관하게 작동해야했습니다. 이런 경우 필요한게 자바스크립트의 재귀함수 였습니다. 재귀함수를 사용하지 않을 경우 tex.. [jquery] li 태그의 data 속성을 이용해서 정렬하는 방법(jquery sort() 함수 사용) 어떤 경우에 사용했나? 보통 리스트성 데이터는 DB에서 조회해서 가져올 때 'order by' 를 이용해서 정렬된 데이터를 가지고 옵니다. 목록 데이터에 대한 정렬기준을 여러가지 제공하는 경우 매번 request를 요청하는건 불필요한 행위지요. 이럴 경우에는 jquery의 sort 함수를 이용해서 쉽게 정렬을 변경할 수 있습니다. html 기본구조 node.js에서 ejs 템플릿 엔진을 이용해서 html을 만든 예제입니다. 정렬의 기준이 되는 데이터를 html의 data 속성을 이용해서 각 li 태그에 설정해놓아야 합니다. (정렬을 위해 루프를 돌 때 정렬 기준 데이터를 가져올 수 있는 방법으로 세팅합니다.) //테스트 목록 //정렬 버튼 최신순 인기순 javascript 부분 $("#btnCreatDt.. [Javascript] 객체(Object) 생성, 프로퍼티(key, value) 접근하는 다양한 방법 먼저, 객체를 생성하는 방법은 아래와 같이 여러가지 방법이 있습니다. 객체 생성하는 다양한 방법 //객체 리터럴을 이용해서 객체 생성과 동시에 프로퍼티 설정 var person = { name : '홍길동', age : 29, print : function(){ console.log('name : ' + name + ', age : ' + age); } } //객체 생성 후 프로퍼티 추가1 var person = {}; //또는 var person = new Object(); person.name = '홍길동'; person.age = 29; //객체 생성 후 프로퍼티 추가2 person["name"] = '홍길동'; person["age"] = 29; //객체의 Key값을 동적으로 생성하는 방법 var.. 이전 1 다음
