YoungGyu Blog

[프론트엔드 인터뷰]FE-Study 2주차 2회

March 13, 2022

Ajax에 대해 가능한 한 자세히 설명하세요.

Ajax(asynchronous JavaScript and XML)는 비동기 웹 응용 프로그램을 만들기 위해 클라이언트 측에서 사용되는 웹 개발 기술의 집합입니다. Ajax를 사용하면 웹 어플리케이션은 기존 페이지의 화면 및 동작을 방해하지 않으면서 백그라운드에서 비동기적으로 서버로 데이터를 보내고 서버에서 데이터를 받아올 수 있습니다. Ajax는 프리젠테이션 레이어에서 데이터 교환 레이어를 분리함으로써?, 웹페이지 밑 확장 웹 애플리케이션이 전체 페이지를 다시 로드 할 필요 없이 동적으로 컨텐츠를 변경할 수 있도록 합니다. 실제로 최근에는 일반적으로 네이티브 JavaScript의 장점 때문에 XML대신 JSON을 사용합니다.

즉, Ajax는 JavaScript 라이브러리중 하나이고, 비동기식 자바스크립트와 XML를 뜻하며, 브라우저에 내장된 XMLHttpRequest 객체를 통해 전체페이지를 새로 고치지 않고도 페이지의 일부분만을 위한 데이터를 로드하는 기법이다.

비동기란? 웹페이지를 리로드하지 않고 데이터를 불러오는 방식으로 Ajax를 통해 서버에 요청을 해도 계속해서 다른 코드를 실행한다는 의미이다.

Ajax를 사용하는 것의 장단점을 무엇인가요?

장점

  • 상호작용성이 좋아집니다. 서버의 새로운 컨텐츠를 전체 페이지를 다시 로드할 필요 없이 동적으로 변경할 수 있습니다.
  • 스크립트나 스타일 시트는 한 번만 요청되므로 서버에 대한 연결을 줄여줍니다.
  • 상태를 페이지에서 관리 할 수 있으며, 메인 컨테이너 페이지가 다시 로드되지 않기 때문에 JavaScript의 변수와 DOM의 상태가 유지됩니다.
  • 기본적으로 SPA 대부분의 장점과 같습니다.

단점

  • 히스토리가 관리가 되지않는다
  • 페이지 이동없는 통신으로 보안상 문제가 있다.
  • 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
  • 동일-출처 정책으로 인하여 다른 도메인과는 통신이 불가능하다.
  • 브라우저에서 JavaScript가 비활성화된 경우 작동하지 않습니다.
  • 일부 웹 크롤러는 JavaScript를 실행하지 않으며 JavaScript에 의해 로드된 콘텐츠를 볼 수 없습니다.

JSONP가 어떻게 동작하는지(그리고 Ajax와 어떻게 다른지)를 설명하세요.

JSONP는 현재 페이지에서 cross-origin 도메인으로의 Ajax 요청이 허용되지 않기 때문에 웹 브라우저에서 cross-domain 정책을 우회하는 데 일반적으로 사용되는 방법입니다.

전통적인 웹 브라우저는 same-origin policy(SOP) 정책에 따라 다른 도메인간의 request를 제한하고 있다. 그러나 <script> 태그는 same-origin-policy(SOP) 정책에 속하지 않는다는 사실을 근거로, 서로 다른 도메인간의 JavaScript 호출을 위하여 JSONP이 사용되었습니다.

image

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는 해킹으로 간주됩니다.

JavaScript 템플릿을 사용한 적이 있나요? 사용해봤다면, 어떤 라이브러리를 사용했나요?

요즘에는 빠른 방법으로 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]
Lee YoungGyu