Ajax 개요 Ajax(Asyncronous JavaScript and XML)는 비동기적인 웹 애플리케이션 제작을 위해 사용되는 개발 기법입니다. 여기서 Ajax란 어떤 하나의 특정한 기술을 말하는 것이 아닌, 함께 사용하는 기술의 묶음을 칭합니다. 이 문서를 보기 전 Single Page Application을 먼저 보는 것을 권합니다. Ajax의 필요성 기존 웹 브라우저는 서버로부터 페이지 단위로만 받을 수 있었습니다. 간단한 상호작용을 하려고 해도 페이지 전체를 로딩해야 했기 때문에 네트워크 낭비가 발생하는 문제점이 있었습니다. 하지만 Ajax를 사용하면 XML 파일 조각 단위로 데이터를 받아올 수 있기 때문에 페이지 일부를 동적으로 갱신할 수 있습니다. 데이터 전송 형식 서버와 클라이언트가 데이..
클로저(Closure)? 클로저는 함수가 생성되는 시점에 접근 가능했던 변수들을 생성 이후에도 계속해서 접근할 수 있게 해주는 기능입니다. 일반적으로 함수 내부에서 정의된 지역 변수는 그 함수가 처리되는 동안에만 존재합니다. 하지만 Javascript는 함수를 리턴시킬 수 있으므로 이를 잘 응용하면 계속해서 지역 변수에 접근 가능하게 할 수 있는 것입니다. 이것이 가능한 이유는 리턴하는 함수가 클로저를 형성하기 때문인데. 이때 접근 가능한 변수 환경은 클로저가 형성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성됩니다. 다음 예를 살펴보겠습니다 function sayHello(name) { const saying = `${name} 안녕!`; return function() { return sayi..
HTTP, Cookie, Web Storage? 초기 웹은 HTML 페이지나 이미지 등 각종 웹서비스 중간에 발생하는 일시적인 데이터 등 모든 정보를 웹 서버에 저장하도록 설계되었습니다. 하지만 시간이 지나 웹의 사용량이 폭발적으로 늘어나게 되자, 웹 서버의 부담이 기하급수적으로 커지게 되고 웹 브라우저와 웹 서버 사이의 통신 트래픽도 증가하게 되어 결국 웹 서비스 효율이 나빠지게 됩니다. 따라서 이 문제를 해결하기 위해 웹은 진화를 거듭했고 결국 HTML5에서는 웹 브라우저가 실행되는 사용자 컴퓨터에도 데이터를 저장해두는 다양한 저장 기능이 만들어지게 되었습니다. 저장 기능에는 다음과 같은 것들이 있습니다. 쿠키 (Cookie) 웹 스토리지 (Web Storage) 로컬 파일 (Local File) 인..
바닐라 자바스크립트로 Ajax를 수행하기 위해서 XMLHttpRequest 객체를 사용합니다. jQuery에서는 Ajax와 관련된 메서드를 제공하므로 더 쉽게 Ajax 요청을 구현할 수 있습니다. 관련 메서드는 다음과 같습니다. 메서드 설명 $.ajax() 범용적인 Ajax 관련 메서드 $.get() get 방식으로 Ajax 수행 $.post() post 방식으로 Ajax 수행 $.getJSON() get 방식으로 Ajax를 수행해 JSON 데이터를 가져옴 $.getScript() get 방식으로 Ajax를 수행해 Script 데이터를 가져옴 $().load() Ajax를 수행하고 선택자로 선택한 문서 객체 안에 집어넣음 $().serialize() 입력 양식의 내용을 요청 매개변수 문자열로 만듬 $()..