프론트 문제 - 오답 정리

• 문제1: 다음 설명으로 올바르지 않은 것은?
  • 옵션:
    1. null: 사용자가 null값을 변수에 할당한 경우(빈 값이라는 의미)
    2. undefined: 변수를 선언하고 값을 할당하기 전의 값이며, 변수에 값이 할당되어 있지 않은 상태
    3. undeclared: 변수를 선언하였으나 선언한 변수의 값이 null일 경우
    4. NaN: "Not a Number"의 약어이며, 컴퓨터에서 숫자로 나타낼 수 없을 때 나타내는 표시
  • 정답: 3번 undeclared: 변수를 선언조차 하지 않은 경우 (올바르지 않은 설명)

• 문제2: Vue.js에서 v-bind 디렉티브의 역할은 무엇입니까?
  • 설명: Vue.js에서 v-bind 디렉티브는 HTML 속성을 동적으로 바인딩할 때 사용됩니다. 예를 들어, v-bind는 href 속성을 바인딩하고, v-bind는 클래스를 바인딩할 때 사용됩니다. 다른 선택지를 올바르지 않은 예시로 사용했습니다.
  • 정답: 2번 HTML 속성을 바인딩할 때 사용함

• 문제3: 가상 DOM을 사용하는 가장 큰 이유는?
  • 설명: 가상 DOM(Virtual DOM)을 사용하는 주된 이유는 웹 애플리케이션의 성능을 향상시키기 위함입니다. 웹 브라우저의 실제 DOM을 직접 조작하는 것은 비용이 많이 드는 작업입니다. DOM 조작은 렌더링 성능에 큰 영향을 미칠 수 있으며, 특히 복잡한 애플리케이션에서는 이러한 비용이 누적되어 성능 저하를 일으킬 수 있습니다.
  • 정답: 2번 직접 DOM을 조작하는 것보다 빠른 성능을 제공하기 위해

• 문제4: 다음 코드를 실행했을 때 로그 결과를 고르세요.
  • 코드

function test() {
  const a = [1, 2, 3];
  const b = [1, 2, 3];
  const c = a;
  console.log(a == b); // false
  console.log(a == c); // true
  console.log(b == c); // false
}
test();

• 설명:
  • a == b: 배열은 객체이기 때문에, ==로 비교해도 여전히 참조가 다르기 때문에 false입니다.
  • a == c: c는 a와 같은 참조를 가지기 때문에 true입니다.
  • b == c: b와 c는 참조가 다르므로 false입니다.
• 정답: 5번 false, true, false

 

• 문제5: JavaScript에서 this 키워드는 무엇을 참조합니까?
  • 설명: JavaScript에서 this 키워드는 일반적으로 함수가 호출된 객체를 참조합니다. 함수가 전역 컨텍스트에서 호출되면 전역 객체를 참조할 수 있지만, 일반적으로 메서드를 호출한 객체를 가리킵니다.
  • 옵션:
    1. 전역 객체
    2. 호출된 함수
    3. 함수의 인수
    4. 함수를 호출한 객체
    5. 함수의 반환 값
  • 정답: 5번 함수를 호출한 객체
  • this 키워드는 호출된 함수 자체를 참조하는 것이 아니라, 함수를 호출한 객체를 참조합니다. 즉, 함수가 메서드로서 객체의 프로퍼티로 호출될 때 this는 해당 객체를 참조하게 됩니다. 따라서 올바른 정답은 5번: 함수를 호출한 객체입니다.

 

• 문제6: HTML 문서의 최상위 요소는 무엇입니까?
  • 설명: HTML 문서의 최상위 요소는 문서의 루트 요소로, 모든 HTML 문서의 최상위 요소입니다. 이 요소 내에 문서의 메타데이터와 콘텐츠를 포함합니다.
  • 정답: 1번 document 요소

 

• 문제7: Vue.js에서 라이프사이클 훅 중 컴포넌트가 DOM에 삽입된 후 호출되는 훅은 무엇입니까?
  • 설명: Vue.js에서 컴포넌트의 라이프사이클 중 mounted 훅은 컴포넌트가 DOM에 삽입된 후에 호출됩니다. 이 시점에서는 컴포넌트의 엘리먼트가 DOM으로 랜더링되고 화면에 표시된 상태입니다.
  • 정답: 1번 mounted