20230406 JavaScript 면접 스터디

1. ==와 ===의 차이점은 무엇인가요?

• ==는 추상 동등 연산자이고 ===는 완전 동등 연산자입니다.
• ==연산자는 타입 변환이 필요한 경우 타입 변환을 한 후에 동등한지 비교
• ===연산자는 타입 변환을 하지 않으므로 두 값이 같은 타입이 아닌 경우 ===는 false를 반환

1 == '1'; // true
1 == [1]; // true
1 == true; // true
0 == ''; // true
0 == '0'; // true
0 == false; // true

2. JavaScript와 관련하여 same-origin 정책을 설명하세요.

• same-origin 정책은 JavaScript가 도메인 경계를 넘어서 요청하는 것을 방지합니다.
• origin은 URI 체계, 호스트 이름, 포트 번호의 조합으로 정의됩니다.
• 이 정책은 한 페이지의 악의적인 스크립트가 해당 페이지의 DOM을 통해 다른 웹 페이지의 중요한 데이터에 접근하는 것을 방지한다.

3. 왜 Ternary expression이라고 부르고, "Ternary"라는 단어는 무엇을 나타내나요?

"Ternary"는 "삼항"을 나타내고 삼항 표현식은 세가지 피연산자, 테스트 조건문, "then"표현식, "else"표현식을 받습니다

4. "use strict"; 이 무엇인가요? 사용시 장단점이 무엇인가요?

'use strict'는 전체 스크립트나 개별 함수에 엄격 모드를 사용하는데 사용되는 명령문
Strict 모드는 JavaScript 다양한 자바스크립트를 제한하는 방법

장점

• 실수로 전역변수를 만드는 것이 불가능합니다.
• 암묵적으로 실패한 예외를 throw하지 못하는 할당을 만듭니다.
• 삭제할 수 없는 속성을 삭제하려고 시도합니다. (시도 효과가 없을 때까지)
• 함수의 매개변수 이름은 고유해야합니다.
• this는 전역 컨텍스트에서undefined입니다.
• 예외를 발생시키는 몇 가지 일반적인 코딩을 잡아냅니다.
• 헷갈리거나 잘 모르는 기능을 사용할 수 없게 합니다.

단점

• 일부 개발자는 익숙하지 않은 기능이 많습니다.
• function.caller와 function.arguments에 더 이상 접근할 수 없습니다.
• 서로 다른 엄격한 모드로 작성된 스크립트를 병합하면 문제가 발생할 수 있습니다.

5. 100까지 증가하면서 3의 배수에는 fizz를 출력하고, 5의 배수에는 buzz를 출력하고, 3과 5의 배수에는 fizzbuzz를 출력하는 for loop를 만드세요.

for (let i = 1; i <= 100; i++) {
  let f = i % 3 == 0,
    b = i % 5 == 0;
  console.log(f ? (b ? 'FizzBuzz' : 'Fizz') : b ? 'Buzz' : i);
}

6. 일반적으로 웹 사이트의 전역 스코프를 그대로 두고 건드리지 않는 것이 좋은 이유는 무엇인가요?

모든 스크립트는 전역 스코프에 접근할 수 있으며, 모든 사람이 전역 네임스페이스를 사용하여 변수를 정의하면 충돌이 발생할 수 있습니다.
모듈 패턴 (IIFEs)을 사용하여 변수를 로컬 네임스페이스 내에 캡슐화하세요.

7. 왜 load 이벤트와 같은 것을 사용하나요? 이 이벤트에는 단점이 있나요? 다른 대안을 알고 있나요? 알고 있다면 왜 그것을 사용할 건가요?

사용 이유

웹 페이지에서 자바스크립트를 사용할 때, 이미지, 비디오, 스크립트 파일, 폰트 등과 같은 외부 리소스를 로드해야 할 때가 있다. 이러한 리소스가 로드되기 전에 스크립트가 실행될 경우, 오류가 발생할 수 있다. 따라서 이러한 리소스가 로드될 때까지 기다리는 방법이 필요합니다. 이를 위해 load 이벤트를 사용합니다.

단점

load 이벤트가 발생하려면 모든 리소스가 로드되어야 하기 때문에, 웹 페이지가 느려질 수 있다.
페이지가 완전히 로드되기 전에 사용자가 상호작용하려는 경우 사용자 경험이 저하될 수 있다.

대안

DOM 이벤트 DOMContentLoaded는 페이지의 DOM이 생성된 후에 발생하지만 다른 리소스가 로딩되기를 기다리지 않는다. 이것은 초기화되기 전에 전체 페이지가 로드될 필요가 없는 경우에 선호된다.
그러나 이 이벤트를 사용하면 모든 리소스가 로드되기 전에 자바스크립트 코드가 실행되기 때문에, 이벤트 핸들러에서 로드되지 않은 리소스를 사용하면 오류가 발생할 수 있습니다.

8. single page app이 무엇인지 설명하고 SEO-friendly하게 만드는 방법을 설명하세요.

Single page application (SPA)은 전체 페이지를 다시 로드하지 않고, 웹 페이지의 일부분만을 업데이트하여 사용자 경험을 개선하는 웹 애플리케이션

SEO-friendly란 검색 엔진 최적화(search engine optimization, SEO)를 고려하여 웹 페이지를 디자인하고 개발하는 것

SPA를 SEO-friendly하게 만드는 방법

1. 사이트맵 생성 : 검색 엔진에서는 웹 페이지의 내용을 크롤링하여 인덱싱합니다. SPA에서는 페이지가 동적으로 생성되기 때문에 검색 엔진이 해당 페이지를 크롤링하는 것이 어려울 수 있습니다. 이 문제를 해결하기 위해, 사이트맵을 만들어 검색 엔진이 페이지를 크롤링할 수 있도록 해야 합니다.

2. Pre-rendering : SPA에서는 페이지가 동적으로 생성됩니다. 이는 일부 검색 엔진에서 문제를 일으킬 수 있습니다. 이 문제를 해결하기 위해, SPA의 초기 페이지 렌더링을 pre-rendering 하여 검색 엔진이 이를 인덱싱할 수 있도록 해야합니다.

3. 올바른 Meta 태그 : Meta 태그는 웹 페이지의 정보를 설명하는 데 사용됩니다. SPA에서도 Meta 태그를 사용하여 검색 엔진이 페이지의 정보를 이해할 수 있도록 해야합니다.

4. URL 설정 : SPA에서는 URL이 동적으로 변경될 수 있습니다. 이를 해결하기 위해, URL을 변경할 때마다 history API를 사용하여 브라우저의 URL을 업데이트해야 합니다. 이렇게 하면 검색 엔진이 URL을 인식할 수 있습니다.

5. JSON-LD 마크업 : 검색 엔진에서는 JSON-LD 마크업을 사용하여 웹 페이지의 정보를 인식할 수 있습니다. SPA에서도 JSON-LD 마크업을 사용하여 페이지의 정보를 검색 엔진이 인식할 수 있도록 해야합니다.

6. 서버 사이드 렌더링 : SPA에서는 클라이언트에서 모든 작업을 수행합니다. 이에 대해, 검색 엔진은 페이지를 검색할 때 JavaScript를 실행하지 않기 때문에 페이지가 인덱싱되지 않을 수 있습니다. 이를 해결하기 위해, 서버 사이드 렌더링을 사용하여 SPA의 초기 페이지 렌더링을 서버에서 수행할 수 있도록 해야합니다.

---

질문

질문1

"use strict";이 무엇인지 설명하고 장단점을 설명해주세요

답변1

질문2

same-origin 정책에 대해 설명해주세요

답변2

질문3

single page app이 무엇인지 설명하고 SEO-friendly하게 만드는 방법을 설명하세요

답변3

질문4

load 이벤트를 사용하는 이유와 단점을 설명하고 대안책이 있다면 설명해주세요
대안책에 대한 단점은 무엇인가요

답변4