March 13, 2022
Ajax(asynchronous JavaScript and XML)는 비동기 웹 응용 프로그램을 만들기 위해 클라이언트 측에서 사용되는 웹 개발 기술의 집합입니다. Ajax를 사용하면 웹 어플리케이션은 기존 페이지의 화면 및 동작을 방해하지 않으면서 백그라운드에서 비동기적으로 서버로 데이터를 보내고 서버에서 데이터를 받아올 수 있습니다. Ajax는 프리젠테이션 레이어에서 데이터 교환 레이어를 분리함으로써?, 웹페이지 밑 확장 웹 애플리케이션이 전체 페이지를 다시 로드 할 필요 없이 동적으로 컨텐츠를 변경할 수 있도록 합니다. 실제로 최근에는 일반적으로 네이티브 JavaScript의 장점 때문에 XML대신 JSON을 사용합니다.
즉, Ajax는 JavaScript 라이브러리중 하나이고, 비동기식 자바스크립트와 XML를 뜻하며, 브라우저에 내장된 XMLHttpRequest 객체를 통해 전체페이지를 새로 고치지 않고도 페이지의 일부분만을 위한 데이터를 로드하는 기법이다.
비동기란? 웹페이지를 리로드하지 않고 데이터를 불러오는 방식으로 Ajax를 통해 서버에 요청을 해도 계속해서 다른 코드를 실행한다는 의미이다.
JSONP는 현재 페이지에서 cross-origin 도메인으로의 Ajax 요청이 허용되지 않기 때문에 웹 브라우저에서 cross-domain 정책을 우회하는 데 일반적으로 사용되는 방법입니다.
전통적인 웹 브라우저는 same-origin policy(SOP) 정책에 따라 다른 도메인간의 request를 제한하고 있다. 그러나 <script>
태그는 same-origin-policy(SOP) 정책에 속하지 않는다는 사실을 근거로, 서로 다른 도메인간의 JavaScript 호출을 위하여 JSONP이 사용되었습니다.
JSONP는 <script>
태그를 통해 cross-origin 도메인에 요청하고 보통 callback 쿼리 매개 변수 (예: https://example.com?callback=printData)로 요청합니다. 그러면 서버는 printData라는 함수 안에 데이터를 래핑하여 클라이언트로 반환합니다.
<script>
function printData(data) {
console.log(`My name is ${data.name}`);
}
</script>
<script src="https://example.com?callback=printData"></script>
printData({ name: 'Yang Shun' })
클라이언트는 전역 범위에 있는 printData 함수를 가져야만 하고, cross-origin domain으로부터의 응답이 수신될 때 함수가 클라이언트에 의해 실행됩니다.
JSONP는 안전하지 않을 수 있으며, 보안 관련 이슈가 있습니다. JSONP는 실제 JavaScript고, JavaScript가 할 수 있는 모든 작업을 수행할 수 있으므로 JSONP 데이터 공급자를 신뢰해야만 합니다.
요즘에는 CORS가 권장되는 접근방식이며, JSONP는 해킹으로 간주됩니다.
요즘에는 빠른 방법으로 ES2015 템플릿 문자열 리터럴을 사용할 수 있습니다.
const template = `<div>My name is: ${name}</div>`
호이스팅은 코드에서 변수 선언의 동작을 설명하는데 사용되는 용어입니다. var키워드로 선언되거나 초기화된 변수는 현재 스코프의 최상위 단위까지 옮겨집니다. 그리고 함수는 선언과 동시에 초기화되며 할당됩니다. 이것을 호이스팅이라고 부릅니다. 그러나 변수는 선언문만 호이스팅 되며 할당은 그대로 있게됩니다.
// var는 호이스팅이 된다.
console.log(foo) // undefined
var foo = 1
console.log(foo) // 1
// let/const 선언은 호이스팅이 되지않는다.
console.log(bar) // ReferenceError: bar is not defined
let bar = 2
console.log(bar) // 2
함수 선언은 함수 몸체가 호이스팅되는 반면, 변수 선언 형태로 작성된 함수 표현식은 변수 선언만 호이스팅됩니다.
console.log(foo) // [Function: foo]
foo() // "FOOOOO"
function foo() {
console.log('FOOOOO')
}
console.log(foo) // [Function: foo]
//함수 표현식
console.log(bar) //undefined
bar() //Uncaught TypeError: bar is not
var bar = function() {
console.log('BARRRR')
}
console.log(bar) //[Function: bar]