20230404 JavaScript 면접 스터디

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

장점

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

단점

• 동적 웹 페이지는 북마크하기 어렵다.
• 브라우저에서 JavaScript가 비활성화된 경우 작동하지 않는다.
• 일부 웹 크롤러는 JavaScript를 실행하지 않으며 JavaScript에 의해 로드된 콘텐츠를 볼 수 없다.
• SPA의 대부분의 단점과 같다.

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

JSONP(JSON with Padding)는 현재 페이지에서 cross-origin 도메인으로의 Ajax 요청이 허용되지 않기 때문에 웹 브라우저에서 cross-domain 정책을 우회하는데 사용되는 방법

사전 지식

동일 출처 정책 (Same-Origin Policy)

어떠한 문서나 스크립트가 다른 프로토콜 / 포트 / 호스트 에 있는 리소스 사용하는 것을 제한하는 정책

CORS(Cross-Origin Resource Sharing)

동작 방식

JSONP는 동적으로 생성된 script 태그를 사용하여 다른 도메인에서 JSON 데이터를 가져온다. 이 때, JSON 데이터를 쿼리 문자열에 포함시키고, 이를 호출하는 콜백 함수 이름도 함께 포함시킨다.

서버는 요청된 JSON 데이터를 해당 콜백 함수 이름과 함께 응답합니다. 이 때, 응답 데이터는 함수 호출의 인수로 전달됩니다. 이렇게 하면 다른 도메인에서 JSON 데이터를 안전하게 가져올 수 있습니다.

<!-- https://mydomain.com -->
<script>
  function printData(data) {
    console.log(`My name is ${data.name}!`);
  }
</script>

<script src="https://example.com?callback=printData"></script>

// https://example.com?callback=printData 에서 로드된 파일
printData({name: 'Yang Shun'});

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

라이브러리는 주로 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임이다. 여기에는 구성 데이터, 문서, 도움말 자료, 메시지 틀, 미리 작성된 코드, 서브루틴(함수), 클래스, 값, 자료형 사양을 포함할 수 있다.

4. 호이스팅에 대해 설명하세요.

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것

그러나 선언문만 호이스팅되며 할당문은 호이스팅 되지 않는다

• var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화
• 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다.

// 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 a function
var bar = function () {
  console.log('BARRRR');
};
console.log(bar); // [Function: bar]

5. event bubbling에 대해 설명하세요.

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작

이벤트 버블링은 이벤트 전파 과정 중에 이벤트 타깃까지 이벤트 전파가 이루어질 때까지 모든 조상 요소를 탐색하므로, 이벤트 핸들러를 한 곳에서 관리할 수 있어서 코드를 간결하게 유지할 수 있다. 그러나 이벤트 버블링으로 인해 의도치 않은 이벤트 처리가 발생할 수도 있으므로 주의해야 한다. 이를 방지하기 위해서는 이벤트 캡처링(Event Capturing)을 사용하거나 이벤트 버블링을 중지시키는 방법을 사용할 수 있다.

사전 지식

버블링(Bubbling) : 자식 요소에서 발생한 이벤트가 바깥 부모 요소로 전파 (기본값)
캡쳐링(Capturing) : 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 안쪽 자식 요소까지 도달

동작 방식

1. 이벤트 발생(사용자 이벤트 혹은 강제 이벤트 할당:trigger)
2. 이벤트 발생 객체를 찾기 위하여 하위 탐색(캡쳐)
3. 이벤트 발생 객체 도달
4. 하위 탐색의 역순으로 복귀(버블링)

이벤트 버블링 방지 방법

e.stopPropagation()

stopPropagation() 메소드를 호출하면 버블링 또는 캡처링 설정에 따라 상위, 하위로 가는 이벤트 전파를 막을 수 있다.

e.stopImmediatePropagation()

stopImmediatePropagation() 메소드를 호출하면, 이벤트 전파와 더불어 형제 이벤트 실행을 중지한다.

e.target 으로 조건 걸어 방지

document.body.addEventListener('click', (e) => {

    if (e.target.id === "ancestor") {
        print('ancestor')
    }

    if (e.target.id === "parent") {
        print('parent')
    }

    if (e.target.id === "child") {
        print('child')
    }
    
});

e.preventDefault()

e.preventDefault() 는 이벤트 전파 뿐만 아니라 기본 이벤트 동작 자체를 취소한다.

6. attribute와 property의 차이점은 무엇인가요?

attribute

attribute는 html문서에서 elements에 추가적인 정보를 넣을 때 사용되는 요소

<div class= ‘my-class’></div>라는 my-class라는 클래스 속성을 가진 div 요소에서 div 는 element(요소) 이고 class 는 attribute(속성) 가 되며 my-class 는 class attribute의 value(값)가 됩니다.

property

property는 html DOM 안에서 attribute를 가리키는 표현

위 내용은 <div class= ‘my-class’></div> 태그를 DOM 으로 표현한 것인데 위에서 className이 property가 된다

차이점

attribute는 HTML 마크업에 정의되고 정적인(바뀌지 않는) 속성을 뜻한다
property는 HTML DOM에 정의되고 동적인(바뀌는) 속성을 뜻한다

7. 내장 JavaScript 객체를 확장하는 것이 좋은 생각이 아닌 이유는 무엇인가요?

참조 무결성에 대해 좋지 않음

참조 무결성

참조 무결성은 관계 데이터베이스 관계 모델에서 2개의 관련 있던 관계 변수 간의 일관성

8. document load 이벤트와 document DOMContentLoaded 이벤트의 차이점은 무엇인가요?

• DOMContentLoaded 이벤트는 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생
• load 이벤트는 HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 외부 자원도 모두 불러오는 것이 끝났을 때 발생

참고

DOMContentLoaded를 막지 않는 스크립트

위와 같은 규칙엔 두 가지 예외사항이 있다.

1. async 속성이 있는 스크립트는 DOMContentLoaded를 막지 않습니다.
2. document.createElement('script')로 동적으로 생성되고 웹페이지에 추가된 스크립트는 DOMContentLoaded를 막지 않습니다.

---

질문

질문1

이벤트 버블링 방지 방법은 무엇이 있고 각각에 대해 어떤 역할을 하는지 설명해주세요

답변1

이벤트 버블링 방지 방법 글 참고

질문2

JSONP의 동작 방식을 설명해 주세요

답변2

동작 방식 글 참고

질문3

attribute와 property의 차이점에 대해 설명해 주세요

답변3

attribute는 HTML 마크업에 정의되고 정적인(바뀌지 않는) 속성을 뜻한다
property는 HTML DOM에 정의되고 동적인(바뀌는) 속성을 뜻한다

질문4

DOMContentLoaded를 막지 않는 스크립트에 대해 설명해주세요

답변4

1. async 속성이 있는 스크립트는 DOMContentLoaded를 막지 않습니다.
2. document.createElement('script')로 동적으로 생성되고 웹페이지에 추가된 스크립트는 DOMContentLoaded를 막지 않습니다.