여기에 이미지 설명을 삽입하세요.

기사 디렉토리

소개
CSS
자바스크립트
타입스크립트
VUE2
VUE3
반응하다
회로망
브라우저

소개

2023년 Gold, Nine, Silver Ten의 필수 프론트엔드 인터뷰 질문!
골든나인, 실버텐의 황금기가 왔습니다. 전직하고 싶은 친구들은 꼭 놀러오세요.

CSS

1. CSS 박스 모델이 무엇인지 설명하고 그 구성요소에 대해 설명해주세요.

답변: CSS의 박스 모델은 요소의 레이아웃과 위치 지정에 사용되는 개념입니다. 이는 콘텐츠 영역, 패딩, 테두리 및 여백으로 구성되며, 이는 차례로 요소를 둘러쌉니다.

2. CSS의 선택자와 우선순위를 설명하세요.

답변: CSS 선택기는 스타일을 적용해야 하는 HTML 요소를 선택하는 데 사용됩니다. 선택기의 우선순위 규칙은 인라인 스타일 > ID 선택기 > 클래스 선택기, 속성 선택기, 의사 클래스 선택기 > 요소 선택기 > 범용 선택기입니다. 동시에 !important를 사용하면 스타일의 우선순위가 높아질 수 있습니다.

3. CSS에서 부동 소수점이 어떻게 작동하는지 설명하고 예를 제공하십시오.

답변: 플로트(Float)는 CSS에서 요소의 왼쪽이나 오른쪽에 떠 있게 하는 데 사용되는 요소로, 요소를 문서의 흐름에서 꺼내어 요소 주위를 둘러쌉니다. 예를 들어:

.float-example {
    
    
  float: left;
  width: 200px;
  height: 200px;
}

4. CSS의 위치 속성과 다양한 값을 설명하세요.

답변: 위치 속성은 요소의 위치 지정 방법을 제어하는 데 사용됩니다. 일반적인 값은 static(기본값, 문서 흐름에 따라 위치 지정), 상대(상대 위치 지정), 절대(절대 위치 지정), 고정(고정 위치 지정) 및 고정(고정 위치 지정)입니다.

5. CSS에서 Z-색인이 어떻게 작동하는지 설명하세요.

답변: 스택 순서(z-index)는 요소의 수직 방향 스택 순서를 제어하는 데 사용됩니다. 더 높은 스택 순서 값을 가진 요소는 더 낮은 스택 순서 값을 가진 요소 위에 나타납니다. 기본적으로 스택 순서 값은 자동입니다.

6. CSS의 의사 클래스와 의사 요소의 차이점을 설명하고 예를 들어보세요.

답변: 의사 클래스는 :hover, :active 등과 같은 선택기에 특수 상태를 추가하는 데 사용됩니다. 의사 요소는 선택자에 ::before, ::after 등과 같은 특수 요소를 추가하는 데 사용됩니다. 예를 들어:

/* 伪类示例 */
a:hover {
    
    
  color: red;
}

/* 伪元素示例 */
p::before {
    
    
  content: "前缀";
}

7. CSS에서 상자 모델의 두 가지 모드인 표준 모드와 이상한 모드를 설명합니다.

답변: 표준 모드는 W3C 표준에 따라 페이지를 구문 분석하고 렌더링하는 모드입니다. 이상한 모드는 페이지 구문 분석 및 렌더링을 위해 이전 버전의 브라우저와 호환되는 모드입니다. <!DOCTYPE> 선언을 통해 사용할 모드를 지정할 수 있습니다.

8. CSS의 BFC가 무엇이고 그 역할은 무엇인지 설명해주세요.

답변: BFC(블록 수준 서식 컨텍스트)는 특정 규칙에 따라 요소가 배치되고 배치되는 독립적인 렌더링 환경을 만드는 CSS의 렌더링 모드입니다. BFC의 기능에는 플로트 지우기, 마진 겹침 방지 등이 포함됩니다.

9. CSS의 flexbox 레이아웃이 무엇이며 그 장점은 무엇인지 설명하세요.

답변: Flexbox 레이아웃은 유연하고 반응성이 뛰어난 레이아웃을 만들기 위한 CSS 모듈입니다. Flex 컨테이너와 Flex 항목의 조합을 통해 강력한 레이아웃 기능을 구현합니다. 장점으로는 사용 용이성, 강력한 적응성, 유연한 정렬 및 분포 제어가 있습니다.

10.CSS에 미디어 쿼리가 무엇이고 그 역할은 무엇인지 설명해주세요.

답변: 미디어 쿼리는 장치의 특성과 속성에 따라 다양한 스타일을 적용하는 데 사용되는 CSS의 기술입니다. 미디어 쿼리를 통해 화면 크기, 장치 유형, 해상도 및 기타 조건에 따라 페이지의 레이아웃과 스타일을 최적화할 수 있습니다.

자바스크립트

1. JavaScript 데이터 유형을 설명하고 각 유형의 예를 제공합니다.

답변: JavaScript에는 문자열, 숫자, 부울, 개체, 배열, Null 및 정의되지 않음의 7가지 데이터 유형이 있습니다. 예를 들어:

let str = "Hello";
let num = 10;
let bool = true;
let obj = {
    
     name: "John" };
let arr = [1, 2, 3];
let n = null;
let undef;

2. JavaScript에서 변수 호이스팅(variable hoisting)이 무엇인지 설명하세요.

답변: 변수 호이스팅은 JavaScript에서 코드가 실행되기 전에 변수 및 함수 선언이 범위의 맨 위로 호이스팅되는 것을 의미합니다. 즉, 변수와 함수는 선언되기 전에 사용할 수 있습니다. 예를 들어:

console.log(x); // 输出 undefined
var x = 5;

3. JavaScript에서 클로저(Closure)가 무엇인지 설명하고 예를 들어보세요.

답변: 클로저는 함수가 어휘 범위 밖의 변수에 접근하고 조작할 수 있는 경우를 말합니다. 이는 함수 내부에 내부 함수를 생성하고 해당 내부 함수를 반환함으로써 수행됩니다. 예를 들어:

function outer() {
    
    
  let x = 10;
  function inner() {
    
    
    console.log(x);
  }
  return inner;
}

let closure = outer();
closure(); // 输出 10

4. JavaScript의 이벤트 버블링(Event Bubbling)과 이벤트 캡처(Event Capturing)에 대해 설명하세요.

답변: 이벤트 버블링은 이벤트가 가장 구체적인 요소부터 상위 요소까지, 루트 요소까지 트리거될 때까지 단계적으로 이벤트가 트리거되는 것을 의미합니다. 이벤트 캡처는 이벤트가 루트 요소에서 시작하여 가장 구체적인 요소까지 단계별로 트리거된다는 것을 의미합니다. addEventListener 메소드의 세 번째 매개변수를 사용하여 이벤트 버블링 또는 이벤트 캡처를 사용할지 여부를 제어할 수 있습니다.

5. JavaScript에서 프로토타입 상속이 무엇인지 설명하세요.

답변: 프로토타입 상속은 객체 간의 상속 관계를 구현하는 JavaScript의 메커니즘입니다. 모든 객체에는 공유 속성과 메서드가 포함된 프로토타입 객체가 있습니다. 개체의 속성이나 메서드에 액세스할 때 개체 자체에 속성이나 메서드가 없으면 프로토타입 체인을 따라 조회됩니다. 프로토타입 상속은 Object.create() 메서드를 사용하거나 객체의 __proto__ 속성을 설정하여 구현할 수 있습니다.

6. JavaScript의 비동기 프로그래밍을 설명하고 비동기 작업의 예를 제공하십시오.

답변: 비동기 프로그래밍은 코드 실행 중에 후속 코드 실행을 차단하지 않는 프로그래밍 방법을 의미합니다. 일반적인 비동기 작업에는 네트워크 요청, 타이머 등이 포함됩니다. 예를 들어:

console.log("开始");
setTimeout(function() {
    
    
  console.log("异步操作");
}, 1000);
console.log("结束");

7. JavaScript에서 클로저(Closure)가 무엇인지 설명하고 예를 들어보세요.

function outer() {
    
    
  let x = 10;
  function inner() {
    
    
    console.log(x);
  }
  return inner;
}

let closure = outer();
closure(); // 输出 10

8. JavaScript에서 이 키워드의 기능과 사용 시나리오를 설명하십시오.

답변: this 키워드는 JavaScript의 현재 실행 컨텍스트 개체를 나타냅니다. 구체적인 값은 함수 호출 방법에 따라 다릅니다. 전역 범위에서 이는 전역 개체(브라우저 환경의 창 개체)를 가리킵니다. 함수에서는 함수를 어떻게 호출하느냐에 따라 this의 포인트가 달라지는데, call, Apply, Bind 등의 메소드를 통해 this의 값을 명시적으로 지정할 수 있습니다.

9. JavaScript에서 이벤트 위임(Event Delegation)이 무엇인지 설명하고 이벤트 위임을 사용하는 예를 들어보세요.

답변: 이벤트 위임은 이벤트 핸들러를 각 하위 요소에 직접 바인딩하는 것이 아니라 상위 요소에 바인딩하는 것을 의미합니다. 이벤트가 발생하면 해당 이벤트는 상위 요소까지 버블링되며, 이후 이벤트 대상을 판단하여 해당 처리 로직이 실행됩니다. 이렇게 하면 이벤트 핸들러 수가 줄어들고 성능이 향상됩니다. 예를 들어:

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
document.getElementById("list").addEventListener("click", function(event) {
    
    
  if (event.target.tagName === "LI") {
    
    
    console.log(event.target.textContent);
  }
});
</script>

10. JavaScript의 모듈형 프로그래밍을 설명하고 모듈 사용 예를 제공하십시오.

답변: 모듈형 프로그래밍은 코드를 독립된 모듈로 나누는 것을 의미하며, 각 모듈은 특정 기능을 담당하고 가져오기 및 내보내기를 통해 모듈 간의 종속성을 실현합니다. ES6에는 모듈식 구문이 도입되었으며, 가져오기 및 내보내기 키워드를 사용하여 모듈을 가져오고 내보낼 수 있습니다. 예를 들어:

// module.js
export function sayHello() {
    
    
  console.log("Hello!");
}

// main.js
import {
    
     sayHello } from "./module.js";
sayHello(); // 输出 "Hello!"

11. JavaScript의 이벤트 버블링과 이벤트 캡처에 대해 설명하세요.

답변: 이벤트 버블링은 이벤트가 DOM 트리에서 트리거될 때 가장 안쪽 요소에서 가장 바깥쪽 요소로 바깥쪽으로 전파된다는 것을 의미합니다. 이벤트 캡처는 이벤트가 DOM 트리에서 트리거될 때 가장 바깥쪽 요소에서 가장 안쪽 요소로 내부로 전파된다는 것을 의미합니다.

12. 프로토타입 체인이란 무엇입니까? 프로토타입 체인을 사용하여 상속을 구현하는 방법은 무엇입니까?

답변: 프로토타입 체인은 JavaScript의 개체 간 연결이며, 각 개체에는 해당 프로토타입에 대한 참조가 있습니다. 프로토타입 체인을 통해 객체는 프로토타입 객체의 속성과 메서드를 상속받을 수 있습니다. 상속은 프로토타입 체인을 사용하여 구현될 수 있습니다. 즉, 한 개체의 프로토타입을 다른 개체로 지정하여 해당 개체가 다른 개체의 속성과 메서드에 액세스할 수 있도록 합니다.

13. JavaScript의 디바운스와 스로틀에 대해 설명하세요.

답변: 디바운싱 및 조절은 함수 실행 빈도를 제어하는 데 사용되는 기술입니다. 흔들림 방지는 특정 기간 내에 마지막으로 트리거된 함수 호출만 실행하는 것을 의미합니다. 조절이란 특정 기간 내에 고정된 간격으로 함수 호출을 실행하는 것을 의미합니다.

14. 이벤트 루프란 무엇입니까? JavaScript의 이벤트 루프 메커니즘을 설명해주세요.

답변: 이벤트 루프는 비동기 작업을 처리하기 위한 JavaScript의 메커니즘입니다. 이벤트 루프는 작업 큐에서 작업을 지속적으로 가져와 작업 큐가 빌 때까지 실행합니다. 이벤트 루프는 메인 스레드와 작업 큐로 구성됩니다. 메인 스레드는 동기 작업을 실행합니다. 비동기 작업은 작업 큐에 들어가 메인 스레드가 유휴 상태일 때 실행될 때까지 기다립니다.

15. JavaScript의 딥카피와 얕은카피에 대해 설명해보세요.

답변: 딥 카피란 새 개체를 생성하고 원본 개체의 모든 속성과 중첩 개체의 속성을 새 개체에 복사하는 것을 의미합니다. 얕은 복사는 새 개체를 만들고 원본 개체의 속성을 새 개체에 복사하지만 중첩된 개체에 대한 참조는 계속 공유되는 것을 의미합니다.

16. 비동기 프로그래밍이란 무엇입니까? 비동기 작업을 처리하는 몇 가지 방법을 나열해 보세요.

답변: 비동기 프로그래밍은 메인 스레드를 차단하지 않고 잠재적으로 시간이 많이 소요되는 작업을 처리하는 프로그래밍 방법입니다. 비동기 작업을 처리하는 일반적인 방법에는 콜백 함수, Promise, async/await 및 이벤트 수신이 포함됩니다.

17. JavaScript의 호이스팅(변수 승격)에 대해 설명하세요.

답변: 변수 호이스팅은 JavaScript에서 변수 및 함수의 선언이 현재 범위의 맨 위로 끌어올려지는 것을 의미합니다. 이는 변수와 함수를 선언하기 전에 사용할 수 있지만 해당 할당이나 정의는 여전히 원래 위치에 있음을 의미합니다.

18. 커링이란 무엇입니까? 카레의 예를 들어주세요.

답변: 커링은 여러 매개변수를 허용하는 함수를 하나의 매개변수를 허용하고 새 함수를 반환하는 새 함수로 변환하는 프로세스입니다. 예:

function add(a) {
    
    
  return function(b) {
    
    
    return a + b;
  }
}

var add5 = add(5);
console.log(add5(3)); // 输出：8

19. JavaScript의 엄격 모드를 설명하세요.

답변: 엄격 모드는 더 엄격한 구문 및 오류 검사를 제공하는 JavaScript 실행 모드입니다. 엄격 모드에서는 일부 안전하지 않거나 더 이상 사용되지 않는 구문이 비활성화되고 변수를 사용하기 전에 선언해야 하며 전역 객체를 가리키는 데 사용하는 것을 금지하는 등 일부 새로운 기능이 도입됩니다.

타입스크립트

1. TypeScript와 JavaScript의 관계를 설명하세요.

답변: TypeScript는 정적 타이핑 및 기타 기능을 추가하는 JavaScript의 상위 집합입니다. TypeScript 코드는 JavaScript 코드로 컴파일될 수 있으므로 JavaScript를 지원하는 모든 환경에서 실행될 수 있습니다.

2. TypeScript의 유형 주석이란 무엇입니까? 유형 주석을 사용하는 방법은 무엇입니까?

답변: 유형 주석은 변수, 함수 매개변수, 함수 반환 값 등의 유형 정보를 명시적으로 선언하는 것을 참조합니다. 유형 주석은 콜론(:) 뒤에 유형을 사용하여 추가할 수 있습니다. 예를 들어:

let num: number = 10;

function add(a: number, b: number): number {
    
    
  return a + b;
}

3. TypeScript의 인터페이스란 무엇입니까? 인터페이스를 정의하고 사용하는 방법은 무엇입니까?

답변: 인터페이스는 객체의 구조와 유형을 정의하는 구문입니다. 인터페이스는 인터페이스 키워드를 사용하여 정의할 수 있습니다. 예를 들어:

interface Person {
    
    
  name: string;
  age: number;
}

function greet(person: Person) {
    
    
  console.log(`Hello, ${
      
      person.name}!`);
}

let john: Person = {
    
     name: "John", age: 25 };
greet(john); // 输出 "Hello, John!"

4. TypeScript의 클래스란 무엇입니까? 클래스를 어떻게 정의하고 사용하나요?

답변: 클래스는 객체를 생성하기 위한 청사진이며 속성과 메서드를 포함합니다. 클래스는 class 키워드를 사용하여 정의할 수 있습니다. 예를 들어:

class Person {
    
    
  name: string;
  age: number;

  constructor(name: string, age: number) {
    
    
    this.name = name;
    this.age = age;
  }

  greet() {
    
    
    console.log(`Hello, ${
      
      this.name}!`);
  }
}

let john = new Person("John", 25);
john.greet(); // 输出 "Hello, John!"

5. TypeScript의 제네릭이란 무엇입니까? 제네릭을 사용하는 방법?

답변: Generics는 함수, 클래스 또는 인터페이스를 정의할 때 자리 표시자 유형을 사용할 수 있는 재사용 가능한 코드를 생성하는 도구입니다. 일반 유형은 꺾쇠 괄호(<>)를 사용하여 지정할 수 있습니다. 예를 들어:

function identity<T>(value: T): T {
    
    
  return value;
}

let result = identity<string>("Hello");
console.log(result); // 输出 "Hello"

6. TypeScript의 열거형이란 무엇입니까? 열거형을 정의하고 사용하는 방법은 무엇입니까?

답변: 열거는 명명된 상수 컬렉션을 정의하기 위한 구문입니다. 열거형은 enum 키워드를 사용하여 정의할 수 있습니다. 예를 들어:

enum Color {
    
    
  Red,
  Green,
  Blue,
}

let color: Color = Color.Green;
console.log(color); // 输出 1

7. TypeScript의 모듈이란 무엇입니까? 모듈을 내보내고 가져오는 방법은 무엇입니까?

답변: 모듈은 코드를 구성하고 캡슐화하는 데 사용되는 단위입니다. 내보내기 키워드를 사용하면 모듈 내의 변수, 함수, 클래스 등을 내보내 다른 모듈에서 사용할 수 있습니다. import 키워드를 사용하여 다른 모듈에서 내보내기를 가져올 수 있습니다. 예를 들어:

// module.ts
export function greet(name: string) {
    
    
  console.log(`Hello, ${
      
      name}!`);
}

// main.ts
import {
    
     greet } from "./module";
greet("John"); // 输出 "Hello, John!"

8. TypeScript의 유형 추론이란 무엇입니까? 유형 추론을 사용하는 방법은 무엇입니까?

답변: 유형 추론은 TypeScript가 명시적으로 유형 주석을 추가하지 않고 컨텍스트를 기반으로 변수 유형을 자동으로 추론한다는 것을 의미합니다. 예를 들어:

let num = 10; // 推断为 number 类型
let str = "Hello"; // 推断为 string 类型

9. TypeScript의 네임스페이스란 무엇입니까? 네임스페이스를 정의하고 사용하는 방법은 무엇입니까?

답변: 네임스페이스는 코드를 구성하고 캡슐화하여 전역 이름 지정 충돌을 방지하는 메커니즘입니다. 네임스페이스는 네임스페이스 키워드를 사용하여 정의할 수 있습니다. 예를 들어:

namespace MyNamespace {
    
    
  export function greet(name: string) {
    
    
    console.log(`Hello, ${
      
      name}!`);
  }
}

MyNamespace.greet("John"); // 输出 "Hello, John!"

10. TypeScript의 유형 별칭이란 무엇입니까? 유형 별칭을 정의하고 사용하는 방법은 무엇입니까?

답변: 유형 별칭은 코드에서 더 쉽게 참조할 수 있도록 유형에 별칭을 제공하는 것입니다. 유형 별칭은 type 키워드를 사용하여 정의할 수 있습니다. 예를 들어:

type Point = {
    
     x: number; y: number };

function printPoint(point: Point) {
    
    
  console.log(`(${
      
      point.x}, ${
      
      point.y})`);
}

let p: Point = {
    
     x: 1, y: 2 };
printPoint(p); // 输出 "(1, 2)"

VUE2

1. Vue.js란 무엇인가요? 그 특징은 무엇입니까?

답변: Vue.js는 사용자 인터페이스 구축을 위한 JavaScript 프레임워크입니다. 다음과 같은 특징이 있습니다.

반응형 데이터 바인딩: Vue의 데이터 바인딩 구문을 사용하면 데이터 자동 업데이트가 가능합니다.
구성 요소 개발: Vue를 사용하면 페이지를 독립적인 구성 요소로 나눌 수 있어 코드의 유지 관리성과 재사용성이 향상됩니다.
가상 DOM: Vue는 가상 DOM을 사용하여 페이지의 변경 사항을 추적하고 실제 DOM을 효율적으로 업데이트합니다.
명령 시스템: Vue는 일반적인 DOM 작업 및 논리 제어를 처리하기 위한 풍부한 내장 명령을 제공합니다.
생태계: Vue는 다양한 개발 요구 사항을 충족하기 위해 플러그인, 도구 및 타사 라이브러리를 포함한 거대한 생태계를 갖추고 있습니다.

2. Vue에서는 양방향 데이터 바인딩이 어떻게 구현되나요?

답변: Vue의 양방향 데이터 바인딩은 v-model 지시문을 통해 구현됩니다. v-model은 양식 요소(예:,)에 대해 양방향 데이터 바인딩을 생성할 수 있습니다. 사용자 입력이 양식 요소의 값을 변경하면 데이터 모델이 자동으로 업데이트되고, 반대로 데이터 모델의 값이 변경되면 양식 요소도 자동으로 업데이트됩니다.

3. Vue의 라이프사이클 후크는 무엇입니까? 실행되는 순서는 무엇입니까?

답변: Vue의 수명 주기 후크에는 beforeCreate, 생성됨, beforeMount, 마운트됨, beforeUpdate, 업데이트됨, beforeDestroy 및 삭제가 포함됩니다. 실행 순서는 다음과 같습니다.

beforeCreate
가 생성되기
전에Mount
가 마운트되기
전에Update가
업데이트되기
전에Destroy가
파괴됨

4. Vue에서 계산된 속성과 리스너의 차이점은 무엇입니까?

대답: 계산된 속성은 종속된 데이터를 기반으로 값을 동적으로 계산하는 종속성 기반 속성입니다. 계산된 속성에는 캐싱 메커니즘이 있으며 종속 데이터가 변경될 때만 다시 계산됩니다. 리스너는 데이터 변경 사항을 모니터링하고 해당 작업을 수행하는 데 사용됩니다. 데이터가 변경되면 리스너는 지정된 콜백 함수를 즉시 실행합니다.

5. Vue에서 컴포넌트 통신 방법은 무엇입니까?

답변: Vue의 구성요소 통신 방법은 다음과 같습니다.

부모-자식 컴포넌트 통신: props를 통해 자식 컴포넌트에 데이터를 전달하고, 자식 컴포넌트는 이벤트를 통해 부모 컴포넌트에 메시지를 보냅니다.
하위 구성 요소와 상위 구성 요소 간의 통신: 하위 구성 요소는 $emit를 통해 이벤트를 트리거하고 상위 구성 요소는 이벤트를 수신하고 응답합니다.
형제 구성 요소 통신: 공유된 상위 구성 요소를 통해 데이터를 전달하거나 이벤트 버스를 통해 통신합니다.
크로스 레벨 컴포넌트 통신: Provide, Inject를 통해 상위 컴포넌트에 데이터를 제공한 후 하위 컴포넌트에서 사용합니다.

6. Vue에서는 라우팅이 어떻게 구현되나요?

답변: Vue의 라우팅은 Vue Router를 통해 구현됩니다. Vue Router는 Vue.js에서 공식적으로 제공하는 라우팅 관리자로, 이를 통해 개발자는 Vue 애플리케이션에서 단일 페이지 애플리케이션(SPA)을 구현할 수 있습니다. Vue Router는 경로 매핑 관계를 구성하여 URL 경로를 구성 요소와 연결하고, 사용자가 페이지를 새로 고치지 않고도 보기를 전환할 수 있도록 탐색 기능을 제공합니다.

7. Vue의 지침은 무엇입니까? 사용법을 설명하는 예를 들어보세요.

답변: Vue에서 일반적으로 사용되는 지침은 다음과 같습니다.

v-if: 표현식의 값을 기반으로 요소를 조건부로 렌더링합니다.
v-for: 배열이나 객체의 데이터를 기반으로 하는 루프 렌더링입니다.
v-bind: 속성을 동적으로 바인딩하거나 그에 따라 속성을 업데이트하는 데 사용됩니다.
v-on: DOM 이벤트를 수신하고 해당 메소드를 실행하는 데 사용됩니다.
v-model: 양식 요소에 대한 양방향 데이터 바인딩을 구현하는 데 사용됩니다.
예를 들어:

<div v-if="show">显示内容</div>

<ul>
  <li v-for="item in items" :key="item.id">{
    
    {
    
     item.name }}</li>
</ul>

<img v-bind:src="imageUrl">

<button v-on:click="handleClick">点击按钮</button>

<input v-model="message">

8. Vue에서 watch와 계산의 차이점은 무엇입니까?

답변: 감시 및 계산 모두 데이터 변경 사항을 모니터링하는 데 사용할 수 있지만 사용법과 구현은 약간 다릅니다. Watch는 지정된 데이터 변경 사항을 모니터링하고 데이터 변경 시 해당 작업을 수행하는 데 사용됩니다. 계산됨은 종속 데이터를 기반으로 새 값을 동적으로 계산하고, 값을 캐시하고, 종속 데이터가 변경될 때만 다시 계산하는 데 사용됩니다.

9. Vue의 믹스인은 무엇인가요? 그것은 무엇을 합니까?

답변: 믹스인은 여러 구성 요소 간에 코드를 공유하는 방법입니다. 믹스인은 구성 요소 옵션(예: 데이터, 메서드, 수명 주기 후크 등)을 포함할 수 있으며 믹스인을 사용하여 이를 구성 요소에 병합할 수 있습니다. 이를 통해 코드 재사용 및 구성 요소 확장을 달성하고 유사한 코드를 반복적으로 작성하는 작업을 줄일 수 있습니다.

10. Vue의 연결 유지란 무엇입니까? 그것은 무엇을 합니까?

답변: Vue에 내장된 구성 요소로 동적 구성 요소를 캐시하는 데 사용됩니다. 구성 요소가 에 래핑되면 해당 인스턴스, 상태 및 DOM 구조를 포함하여 구성 요소의 상태가 유지됩니다. 이렇게 하면 구성 요소를 전환할 때 구성 요소가 반복적으로 생성 및 삭제되는 것을 방지하여 성능과 사용자 경험을 향상시킬 수 있습니다.

11. Vue.js의 종속성 주입이 무엇인지 설명해 주세요. Vue의 애플리케이션 시나리오는 무엇입니까?

답변: 종속성 주입은 한 구성 요소에서 다른 구성 요소로 종속성을 전달하는 데 사용되는 디자인 패턴입니다. Vue에서 종속성 주입은 제공 및 주입 옵션을 통해 구현됩니다. 상위 구성 요소는 제공을 통해 데이터를 제공하고 하위 구성 요소는 주입을 통해 이 데이터를 주입합니다. 여러 수준에 걸친 구성 요소 통신에 매우 유용합니다.

12. Vue.js의 렌더링 기능은 무엇입니까? 템플릿과 차이점은 무엇인가요?

답변: 렌더 함수는 가상 DOM을 동적으로 생성하는 JavaScript 코드로 구성 요소를 작성하는 방법입니다. 템플릿과 비교하여 렌더링 기능은 더 큰 유연성과 제어 기능을 제공하며 더 복잡한 논리 및 동적 렌더링 요구 사항을 처리할 수 있습니다.

13. Vue.js의 슬롯이란 무엇입니까? 이름이 지정된 슬롯과 범위가 지정된 슬롯의 예를 제공해 주세요.

답변: 슬롯은 구성 요소의 콘텐츠를 확장하기 위한 메커니즘입니다. 명명된 슬롯을 사용하면 상위 구성 요소가 특정 이름의 콘텐츠를 하위 구성 요소에 삽입할 수 있고, 범위가 지정된 슬롯을 사용하면 하위 구성 요소가 상위 구성 요소에 데이터를 전달할 수 있습니다. 예:

<!-- 父组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot :data="data"></slot>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <slot name="header">默认标题</slot>
    <slot :data="computedData">{
    
    {
    
     computedData }}</slot>
  </div>
</template>

14. Vue.js의 애니메이션 시스템은 어떻게 작동하나요? 간단한 애니메이션 예시를 제공해 주세요.

답변: Vue.js의 애니메이션 시스템은 CSS 전환 및 애니메이션 클래스를 통해 구현됩니다. 전환 클래스 또는 애니메이션 클래스를 요소에 추가하면 해당 전환 효과 또는 애니메이션 효과가 트리거될 수 있습니다. 예:

<transition name="fade">
  <div v-if="show">显示内容</div>
</transition>

<!-- CSS样式 -->
<style>
.fade-enter-active, .fade-leave-active {
    
    
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
    
    
  opacity: 0;
}
</style>

15. Vue.js의 오류 처리 메커니즘은 무엇입니까? Vue 구성 요소의 오류를 포착하고 처리하는 방법은 무엇입니까?

답변: Vue.js는 전역 오류 처리 메커니즘과 구성 요소 수준 오류 처리 메커니즘을 제공합니다. 전역 오류 처리는 errorCaptured 후크 기능을 통해 오류를 캡처하고 처리할 수 있습니다. 구성 요소 수준 오류 처리는 errorCaptured 후크 함수 또는 errorHandler 옵션을 통해 오류를 캡처하고 처리할 수 있습니다.

16. Vue.js의 서버 측 렌더링(SSR)이란 무엇입니까? 장점과 한계는 무엇입니까?

답변: 서버 측 렌더링은 서버에서 HTML 콘텐츠를 생성하고 렌더링을 위해 브라우저로 보내는 프로세스를 의미합니다. Vue.js는 서버 측 렌더링을 수행하여 더 나은 최초 로드 성능과 SEO 최적화를 제공할 수 있습니다. 그러나 서버 측 렌더링에는 서버 로드 증가 및 개발 복잡성과 같은 몇 가지 제한 사항도 있습니다.

17. Vue.js의 반응형 배열의 한계는 무엇입니까? 이러한 제한 사항을 해결하는 방법은 무엇입니까?

답변: Vue.js의 반응형 시스템은 배열 변형 방법(예: 푸시, 팝, 스플라이스 등)을 추적할 수 없습니다. 이러한 제한을 해결하기 위해 Vue는 Vue.set, vm.$set 및 Array.prototype.splice와 같은 몇 가지 특수 메소드를 제공합니다. 이러한 방법을 사용하여 어레이를 업데이트하고 응답성을 유지할 수 있습니다.

18. Vue.js의 성능 최적화를 위한 일반적인 기술은 무엇입니까?

답변: 일반적인 Vue.js 성능 최적화 팁은 다음과 같습니다.

v-if 및 v-for를 사용할 때 불필요한 렌더링을 피하도록 주의하십시오.
계산된 속성을 사용하고 리스너를 적절하게 관찰하세요.
연결 유지 구성 요소를 사용하여 구성 요소 상태를 캐시합니다.
주문형 로딩을 위해 비동기 구성 요소를 사용합니다.
템플릿에 복잡한 표현식을 사용하지 마세요.
구성 요소 및 요소의 재사용을 관리하려면 키 속성을 사용하십시오.
지연 로딩과 코드 분할을 현명하게 사용하세요.

19. Vue.js의 경로 탐색 가드는 무엇입니까? 실행되는 순서는 무엇입니까?

답변: Vue.js의 경로 탐색 가드에는 글로벌 프론트 가드, 글로벌 파싱 가드, 글로벌 포스트 가드, 경로 독점 가드 및 구성 요소 내 가드가 포함됩니다. 실행 순서는 다음과 같습니다.

글로벌 프론트 가드(beforeEach)
경로 독점 가드(beforeEnter)
해상도 가드(beforeResolve)
구성 요소 내 가드(beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave)
글로벌 포스트 가드(afterEach)

20. Vue.js에서는 단위 테스트가 어떻게 이루어지나요? 간단한 단위 테스트 예시를 제공해 주세요.

답변: Vue.js의 단위 테스트는 Jest 또는 Mocha와 같은 도구를 사용하여 수행할 수 있습니다. 예:

// 组件代码
// MyComponent.vue
<template>
  <div class="my-component">
    <span>{
    
    {
    
     message }}</span>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      message: 'Hello',
      count: 0
    }
  },
  methods: {
    
    
    increment() {
    
    
      this.count++
    }
  }
}
</script>

// 单元测试代码
// MyComponent.spec.js
import {
    
     shallowMount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'

describe('MyComponent', () => {
    
    
  it('renders message correctly', () => {
    
    
    const wrapper = shallowMount(MyComponent)
    expect(wrapper.find('span').text()).toBe('Hello')
  })

  it('increments count when button is clicked', () => {
    
    
    const wrapper = shallowMount(MyComponent)
    wrapper.find('button').trigger('click')
    expect(wrapper.vm.count).toBe(1)
  })
})

VUE3

1. Vue.js 3의 Composition API는 무엇입니까? 옵션 API와 어떻게 다른가요?

답변: Composition API는 Vue.js 3에 도입된 구성 요소 논리를 구성하는 새로운 방법입니다. 이를 통해 개발자는 옵션 개체 대신 함수를 통해 논리를 구성하고 재사용할 수 있습니다. 대조적으로, 옵션 API는 Vue.js 2에서 구성요소 로직을 구성하는 데 일반적으로 사용되는 방법입니다. 구성요소의 데이터, 메소드 등은 옵션 객체의 속성을 통해 정의됩니다.

2. Vue.js 3의 텔레포트란 무엇입니까? 텔레포트의 예를 들어주세요.

답변: 텔레포트는 구성 요소의 콘텐츠를 DOM 트리의 어느 위치로든 렌더링하기 위해 Vue.js 3에 도입된 메커니즘입니다. 예:

<template>
  <div>
    <button @click="showModal = true">打开模态框</button>
    <teleport to="body">
      <modal v-if="showModal" @close="showModal = false">模态框内容</modal>
    </teleport>
  </div>
</template>

3. Vue.js 3에서 반응형 시스템은 어떻게 작동하나요? Vue.js 2의 반응형 시스템과 어떻게 다릅니까?

답변: Vue.js 3의 반응 시스템은 프록시 객체를 사용하여 구현됩니다. Vue.js 2의 반응 시스템과 비교하여 Vue.js 3의 반응 시스템은 더 나은 성능과 더 세밀한 추적을 제공하고 데이터 변경 사항을 더 정확하게 감지할 수 있으며 중첩된 반응 데이터를 지원합니다.

4. Vue.js 3의 Suspense란 무엇입니까? 그것은 무엇을 합니까?

답변: Suspense는 비동기 구성요소의 로딩 상태를 처리하기 위해 Vue.js 3에 도입된 메커니즘입니다. 비동기 구성 요소가 로드되기 전에 자리 표시자를 표시하고 로드된 후에 비동기 구성 요소의 콘텐츠를 렌더링할 수 있습니다. 이를 통해 비동기 구성 요소의 로딩 프로세스를 더 잘 처리하고 더 나은 사용자 경험을 제공할 수 있습니다.

5. Vue.js 3의 제공 및 주입 기능은 무엇입니까? 제공과 주입의 예를 들어주세요.

답변: 제공 및 주입은 구성 요소 간의 종속성 주입을 구현하는 데 사용됩니다. 상위 구성 요소에서 제공을 사용하여 데이터를 제공한 다음 주입을 사용하여 하위 구성 요소에 이 데이터를 주입합니다. 예:

// 父组件
const Parent = {
    
    
  provide: {
    
    
    message: 'Hello'
  },
  // ...
}

// 子组件
const Child = {
    
    
  inject: ['message'],
  created() {
    
    
    console.log(this.message); // 输出：Hello
  },
  // ...
}

6. Vue.js 3의 애니메이션 시스템에는 어떤 개선이 이루어졌나요? 몇 가지 개선 사항을 나열해 주십시오.

답변: Vue.js 3의 애니메이션 시스템은 Vue.js 2에 비해 다음과 같은 개선 사항이 있습니다.

더 나은 성능: Vue.js 3의 애니메이션 시스템은 더 효율적인 애니메이션 엔진을 사용하여 더 나은 성능을 제공합니다.
더욱 간결해진 구문: Vue.js 3의 애니메이션 시스템은 더욱 간결한 구문을 사용하여 애니메이션의 정의와 사용을 더욱 직관적이고 편리하게 만듭니다.
더 많은 애니메이션 기능 지원: Vue.js 3의 애니메이션 시스템은 대화형 애니메이션 및 더 복잡한 애니메이션 효과와 같은 더 많은 애니메이션 기능을 지원합니다.
Vue.js 3의 정적 트리 호이스팅이란 무엇입니까? 장점은 무엇입니까?
답변: 정적 리프팅은 컴파일 단계에서 정적 노드를 상수로 승격시켜 런타임 오버헤드를 줄이는 Vue.js 3의 최적화 기술입니다. 이 최적화 기술은 구성 요소의 렌더링 성능을 향상시키고 생성된 코드의 크기를 줄일 수 있습니다.

7. Vue.js 3의 조각이란 무엇입니까? 그것은 무엇을 합니까?

답변: 조각은 구성 요소에서 여러 루트 노드를 반환하기 위해 Vue.js 3에 도입된 메커니즘입니다. Vue.js 2에서 구성 요소의 템플릿은 하나만 가질 수 있습니다.
Vue.js 3의 Composition API에서 ref와 반응성의 차이점은 무엇입니까? 언제 어느 것을 사용해야 합니까?
답변: ref는 반응형 기본 데이터 유형을 생성하는 데 사용되는 반면, 반응형은 반응형 개체를 생성하는 데 사용됩니다. 간단한 리액티브 데이터를 생성해야 할 경우 ref를 사용할 수 있고, 여러 속성을 포함하는 리액티브 객체를 생성해야 할 경우에는 Reactive를 사용할 수 있습니다.

8. Vue.js 3에서 watchEffect와 watch의 차이점은 무엇입니까? 언제 어느 것을 사용해야 합니까?

답변: watchEffect는 응답 데이터의 변경 사항을 모니터링하고 콜백 함수에서 해당 작업을 수행하는 데 사용됩니다. 종속성을 자동으로 추적하고 종속성이 변경되면 콜백 함수를 다시 실행합니다. Watch는 지정된 응답 데이터를 모니터링하고 변경 시 해당 작업을 수행하는 데 사용됩니다. 이를 통해 수신할 데이터를 정확하게 지정할 수 있으며 더 많은 구성 옵션이 제공됩니다. 일반적으로 반응형 데이터의 변화를 모니터링하고 해당 작업을 수행해야 하는 경우 watchEffect를 사용하고, 보다 세밀한 제어가 필요한 경우 watch를 사용하면 됩니다.

9. Vue.js 3에서 v-model 지시어를 사용할 때 주의할 점은 무엇인가요?

답변: v-model 지시어를 사용할 때 다음 사항을 고려해야 합니다.

v-model 지시어는 , 등과 같은 양식 요소와 함께 사용해야 합니다.
사용자 정의 구성 요소를 사용할 때 v-model의 양방향 바인딩을 지원하려면 modelValue 특성 및 update:modelValue 이벤트를 구성 요소 내부에 구현해야 합니다.
입력 상자가 포커스를 잃을 때 .lazy 수정자를 사용하여 데이터를 업데이트할 수 있습니다.
.trim 수정자를 사용하여 입력 상자 내용에서 선행 및 후행 공백을 자동으로 제거할 수 있습니다.
.number 수정자를 사용하여 입력 상자의 값을 숫자 유형으로 변환할 수 있습니다.

10. Vue.js 3에서 반응형 데이터를 지원하고 제공합니까?

답변: 기본적으로 제공 및 주입은 반응형 데이터를 지원하지 않습니다. 공급자에 반응형 데이터를 제공해야 하는 경우 ref 또는 반응형을 사용하여 데이터를 래핑할 수 있습니다. 그런 다음 inject에서 toRefs 또는 toRef를 사용하여 데이터를 분해하여 반응형 참조를 얻습니다.

11. Vue.js 3의 nextTick 메소드는 무엇을 합니까? 어떤 상황에서 사용되나요?

답변: nextTick 메서드는 다음 DOM 업데이트 주기가 끝난 후 콜백 함수를 실행하는 데 사용됩니다. 업데이트된 DOM 요소를 조작하거나 업데이트된 계산 속성 값을 가져오는 등 DOM을 업데이트한 후 특정 작업이 수행되도록 하는 데 사용할 수 있습니다. NextTick은 일반적으로 계속 진행하기 전에 DOM 업데이트가 완료될 때까지 기다려야 하는 상황에서 사용됩니다.

12. Vue.js 3의 구성 요소와 구성 요소의 차이점은 무엇입니까?

답변: 구성 요소는 구성 요소의 내용을 DOM 트리의 어느 위치에나 렌더링하는 데 사용되는 반면, 구성 요소는 구성 요소가 DOM 트리에 들어가거나 나갈 때 전환 효과를 적용하는 데 사용됩니다. 주로 컴포넌트의 위치를 이동할 때 사용되며, 컴포넌트의 전환을 표시하거나 숨길 때 주로 사용됩니다.

13. Vue.js 3의 v-for 지시문에서 키 속성의 역할은 무엇입니까? 왜 그것을 사용합니까?

답변: v-for 지시문의 키 속성은 각 반복 항목에 대한 고유 식별자를 설정하는 데 사용됩니다. 그 역할은 데이터가 변경될 때 DOM을 효율적으로 업데이트하기 위해 Vue.js가 각 노드의 ID를 추적하도록 돕는 것입니다. 키 속성을 사용하면 잘못된 노드 업데이트 또는 재정렬 문제를 방지할 수 있습니다.

반응하다

1. 리액트란 무엇인가? 핵심 개념은 무엇입니까?

답변: React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. 핵심 개념은 구성 요소화와 선언적 프로그래밍입니다. React는 사용자 인터페이스를 독립적인 재사용 가능한 구성 요소로 분할하고 선언적 구문을 사용하여 구성 요소의 상태와 UI 간의 관계를 설명하므로 복잡한 UI를 쉽고 유지 관리하기 쉽게 만듭니다.

2. JSX란 무엇인가요? HTML과 어떻게 다른가요?

답변: JSX는 React의 UI 구조를 설명하는 데 사용되는 JavaScript 구문 확장입니다. HTML과 유사하지만 몇 가지 차이점이 있습니다.

3. React 컴포넌트란 무엇입니까? 그 두 가지 유형은 무엇입니까?

답변: React 구성 요소는 사용자 인터페이스를 구축하기 위한 독립적인 단위입니다. React 구성 요소에는 두 가지 유형이 있습니다.

함수 구성요소: 함수를 사용하여 구성요소를 정의하고, props를 매개변수로 받고, React 요소를 반환합니다.
클래스 구성 요소: ES6 클래스를 사용하여 구성 요소를 정의하고, React.Component 클래스에서 상속하고, render 메서드를 통해 React 요소를 반환합니다.

4. State와 Props란 무엇인가요? 그들 사이의 차이점은 무엇입니까?

답변: 상태는 구성 요소 자체에서 관리하는 데이터이며 setState 메서드를 통해 업데이트할 수 있습니다. 속성(props)은 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터로, 자식 컴포넌트는 props를 직접 수정할 수 없으며, 부모 컴포넌트의 업데이트를 통해서만 props를 변경할 수 있습니다.

차이점:

상태(State)는 컴포넌트 내부의 데이터로 컴포넌트 내에서 자유롭게 수정 및 관리할 수 있습니다.
속성(props)은 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터로, 자식 컴포넌트는 직접 수정할 수 없고, 전달받아 사용할 수만 있습니다.

5. React 수명주기 방법이란 무엇입니까? 일반적으로 사용되는 수명주기 방법을 나열하십시오.

답변: React 수명주기 메서드는 구성 요소의 여러 단계에서 실행되는 특정 메서드입니다. 다음은 일반적으로 사용되는 React 수명주기 방법입니다.

componentDidMount: 컴포넌트가 마운트된 후 즉시 호출됩니다.
componentDidUpdate: 구성 요소가 업데이트된 후 호출됩니다.
componentWillUnmount: 구성 요소가 마운트 해제되기 전에 호출됩니다.
shouldComponentUpdate: 구성 요소를 다시 렌더링해야 하는지 여부를 결정합니다.
getDerivedStateFromProps: 소품의 변경 사항에 따라 상태를 업데이트합니다.

6. React Hooks란 무엇인가요? 그들의 기능은 무엇입니까?

답변: React Hooks는 기능적 구성 요소에서 상태 및 기타 React 기능을 사용하기 위해 React 버전 16.8에 도입된 기능입니다. 후크는 클래스 구성 요소를 작성하지 않고도 상태를 관리하고 부작용을 처리하는 방법을 제공하여 함수 구성 요소가 클래스 구성 요소의 기능을 갖도록 만듭니다.

7. 리액트 라우터란 무엇인가요? 그것은 무엇을 합니까?

답변: React Router는 라우팅을 처리하기 위한 React의 라이브러리입니다. 단일 페이지 애플리케이션에서 탐색 및 라우팅 기능을 구현하는 방법을 제공합니다. React Router는 개발자가 페이지 간 전환, URL 매개변수 전달, 중첩 라우팅과 같은 기능을 구현하는 데 도움을 줄 수 있습니다.

8. 리액트 컨텍스트란 무엇인가요? 그것은 무엇을 합니까?

답변: React Context는 구성 요소 트리 전체에서 데이터를 공유하기 위한 메커니즘입니다. 소품을 통해 데이터 계층을 계층별로 전달하는 것을 방지하여 구성 요소 간 데이터 공유를 더욱 간단하고 효율적으로 만듭니다. React Context는 공유 데이터를 제공하고 소비하기 위한 공급자 및 소비자 구성 요소를 제공합니다.

9. React의 Reconciliation 프로세스는 무엇인가요? 어떻게 작동하나요?

답변: React의 조정 프로세스는 React가 구성 요소를 업데이트할 때 이전 가상 DOM 트리와 새 가상 DOM 트리의 차이점을 비교하여 업데이트가 필요한 부분에 대해서만 실제 DOM 작업을 수행한다는 것을 의미합니다. 조정 프로세스는 다음과 같이 진행됩니다.

React는 이전 가상 DOM 트리와 새 가상 DOM 트리의 노드를 레이어별로 비교하고 차이점을 찾습니다.
각 차이점에 대해 React는 노드 삽입, 업데이트 또는 삭제와 같은 해당 DOM 조작 명령을 생성합니다.
React는 실제 DOM에 대한 작업 수를 줄이기 위해 모든 DOM 작업 명령을 일괄적으로 실행합니다.

10. React의 이벤트 합성(SyntheticEvent)이란 무엇인가요? 그것은 무엇을 합니까?

답변: React의 이벤트 구성은 React에서 이벤트를 처리하기 위한 메커니즘입니다. 성능과 브라우저 간 호환성을 향상시키기 위해 React에서 구현한 이벤트 시스템입니다. 이벤트 합성의 기능은 다음과 같습니다.

브라우저 호환성을 고려하지 않고 이벤트를 처리하는 통합된 방법을 제공합니다.
이벤트 핸들러는 이벤트 위임을 통해 상위 구성 요소에 바인딩되어 성능을 향상시킬 수 있습니다.
기본 이벤트 객체의 속성과 메서드에 액세스할 수 있습니다.

11. React의 Fiber 아키텍처는 무엇입니까? 어떤 문제가 해결되나요?

답변: React의 Fiber 아키텍처는 React 16 버전에 도입된 새로운 조정 알고리즘 및 아키텍처입니다. 메인 스레드를 차단하는 장기 렌더링 문제를 해결하고 애플리케이션 성능과 사용자 경험을 향상시키도록 설계되었습니다. Fiber 아키텍처는 렌더링 프로세스를 여러 개의 작은 작업으로 분해하고 우선 순위 예약 알고리즘을 사용하여 타임 슬라이스를 동적으로 할당함으로써 React가 각 프레임에서 작업의 일부를 수행할 수 있도록 하여 원활한 사용자 인터페이스와 더 나은 응답 성능을 달성합니다.

12. React의 오류 경계란 무엇입니까? 그것은 무엇을 합니까?

답변: React의 오류 경계는 구성 요소 오류를 처리하기 위한 메커니즘입니다. 이를 통해 구성 요소는 전체 응용 프로그램의 충돌을 방지하기 위해 하위 구성 요소에서 발생하는 JavaScript 오류를 포착하고 처리할 수 있습니다. 오류 경계의 기능은 다음과 같습니다.

오류로 인해 전체 애플리케이션이 충돌하는 것을 방지하려면 구성 요소 트리에서 오류를 포착하고 처리하세요.
오류 메시지나 대체 UI를 표시하는 우아한 방법을 제공합니다.
오류를 기록하고 오류 보고서를 보내는 데 사용할 수 있습니다.

회로망

1. HTTP란 무엇입니까? 어떻게 작동하나요?

답변: HTTP(Hypertext Transfer Protocol)는 웹에서 데이터를 전송하는 데 사용되는 프로토콜입니다. 클라이언트가 서버에 HTTP 요청을 보내고 서버가 HTTP 응답을 반환하는 클라이언트-서버 모델을 사용합니다. HTTP의 작업 흐름은 다음과 같습니다.

클라이언트는 지정된 URL로 HTTP 요청을 보냅니다.
서버는 요청을 수신하고 처리한 후 HTTP 응답을 반환합니다.
클라이언트는 응답을 수신하고 이를 구문 분석하여 필요한 데이터를 가져옵니다.

2. HTTPS란 무엇입니까? HTTP와 어떻게 다른가요?

답변: HTTPS(Hypertext Transfer Protocol Secure)는 SSL(Secure Sockets Layer) 또는 TLS(Transport Layer Security) 프로토콜을 사용하여 통신을 암호화하고 인증하는 HTTP의 보안 버전입니다. HTTP와 비교할 때 HTTPS에는 다음과 같은 차이점이 있습니다.

데이터는 전송 중 암호화를 통해 보호되므로 보안이 더욱 강화됩니다.
디지털 인증서를 사용하여 서버를 인증하고 중간자 공격을 방지합니다.
기본 포트 443을 사용합니다.

3. 교차 도메인 요청이란 무엇입니까? 어떻게 해결됩니까?

답변: 교차 출처 요청은 브라우저의 다른 도메인 이름, 포트 또는 프로토콜로 전송되는 요청입니다. 브라우저 동일 출처 정책 제한으로 인해 도메인 간 요청이 제한됩니다. 도메인 간 문제를 해결하려면 다음 방법을 사용할 수 있습니다.

JSONP(JSON with Padding): 동적으로 생성됨

4. 캐시란 무엇입니까? 성능을 향상시키기 위해 프런트 엔드에서 캐싱을 사용하는 방법은 무엇입니까?

답변: 캐싱은 데이터나 리소스를 임시 저장소에 저장하여 후속 요청에 다시 사용할 수 있도록 함으로써 성능을 향상시키고 네트워크 트래픽을 줄이는 것입니다. 프런트엔드에서는 다음을 사용하여 캐싱을 활용할 수 있습니다.

HTTP 캐싱: Cache-Control 및 Expires와 같은 적절한 캐싱 헤더를 설정하여 응답을 캐시하도록 브라우저에 지시합니다.
리소스 캐싱: 파일 내용이 변경되면 브라우저가 파일을 다시 다운로드할 수 있도록 파일 지문 또는 버전 번호를 사용하여 정적 리소스 파일의 이름을 바꿉니다.
데이터 캐싱: 반복되는 요청을 피하기 위해 메모리 캐시, 브라우저 로컬 스토리지(예: localStorage) 또는 서버 측 캐시(예: Redis)를 사용하여 데이터를 저장합니다.

5. CDN이란 무엇입니까? 그것은 무엇을 합니까?

답변: CDN(Content Delivery Network)은 전 세계적으로 지연 시간이 짧은 고성능 콘텐츠 전송 서비스를 제공하는 데 사용되는 분산 네트워크 아키텍처입니다. CDN의 기능은 다음과 같습니다.

더 빠른 로딩 속도를 제공하기 위해 정적 리소스(예: 이미지, 스타일 시트, 스크립트 등)를 사용자에게 더 가까운 서버에 캐시합니다.
네트워크 트래픽을 분산하고 원본 서버의 로드 압력을 줄입니다.
콘텐츠 압축, 데이터 압축, 캐싱 등의 최적화 기술을 제공하여 사용자 경험을 향상시킵니다.

6. 웹페이지 로딩 성능 최적화란 무엇인가요? 페이지 로딩 성능을 향상시키기 위해 어떤 조치를 취할 수 있습니까?

답변: 웹 페이지 로딩 성능 최적화는 웹 페이지 로딩 시간을 줄이고 사용자 경험을 향상시키기 위해 다양한 기술적 수단을 사용하는 것을 의미합니다. 페이지 로딩 성능을 향상시키기 위해 할 수 있는 몇 가지 작업은 다음과 같습니다.

리소스 파일(예: CSS 및 JavaScript)을 압축하고 병합하여 파일 크기와 요청 수를 줄입니다.
이미지 압축과 적절한 형식 선택을 사용하여 이미지 파일 크기를 줄이세요.
브라우저 캐시와 HTTP 캐시 헤더를 사용하여 정적 리소스를 캐시합니다.
초기 로딩 속도를 향상하려면 지연 로딩을 사용하여 중요하지 않은 리소스의 로딩을 지연하세요.
CDN(Content Delivery Network)을 사용하여 정적 리소스를 분산하고 네트워크 대기 시간을 줄입니다.
페이지 콘텐츠를 최대한 빨리 렌더링하려면 중요한 렌더링 경로를 최적화하세요.

7. 웹 성능 모니터링 및 분석이란 무엇입니까? 웹페이지 성능을 모니터링하고 분석하는 데 어떤 도구를 사용할 수 있나요?

답변: 웹 페이지 성능 모니터링 및 분석은 성능 병목 현상을 식별하고 최적화하기 위해 웹 페이지 로딩 및 상호 작용 성능에 대한 데이터를 측정하고 수집하는 것을 말합니다. 다음 도구를 사용하여 웹 페이지 성능을 모니터링하고 분석할 수 있습니다.

웹 성능 API: 브라우저에서 제공하는 JavaScript API는 성능 개체를 통해 성능 데이터를 수집할 수 있습니다.
Lighthouse: 웹 성능, 접근성 및 모범 사례에 대한 포괄적인 보고를 제공하는 오픈 소스 도구입니다.
WebPagetest: 웹 페이지 로드 시간을 측정하고 자세한 성능 분석 보고서를 제공하는 온라인 도구입니다.
Chrome 개발자 도구: 브라우저에 내장된 개발자 도구는 성능 분석, 네트워크 모니터링, 페이지 검토 등의 기능을 제공합니다.

8. 프로그레시브 이미지 로딩이란 무엇입니까? 웹페이지 로딩 성능을 어떻게 향상시키나요?

답변: 프로그레시브 이미지 로딩은 흐릿하거나 저해상도 버전의 이미지를 점진적으로 로딩한 후 이미지의 선명도를 점진적으로 높여 웹 페이지 로딩 성능과 사용자 경험을 향상시키는 기술입니다. 프로그레시브 이미지 로딩의 이점은 다음과 같습니다.

사용자는 페이지 콘텐츠를 더 빠르게 볼 수 있어 인식 속도가 향상됩니다.
점진적으로 이미지를 로드하면 웹페이지의 전체 로드 시간을 줄일 수 있습니다.
점진적인 이미지 로딩은 부드러운 전환을 제공하고 페이지 콘텐츠의 갑작스러운 깜박임이나 변경을 방지합니다.

9. 프런트엔드 리소스 우선순위(Resource Prioritization)란 무엇입니까? 자원의 우선순위를 어떻게 정하나요?

답변: 프런트 엔드 리소스 우선 순위는 웹 페이지 로딩 성능을 최적화하기 위해 다양한 유형의 리소스에 로딩 우선 순위를 할당하는 것을 의미합니다. 다음 방법을 사용하여 리소스의 우선순위를 설정할 수 있습니다.

태그를 사용하여 리소스 사전 로드를 지정하면 중요한 리소스가 최대한 빨리 로드되도록 할 수 있습니다.
태그를 사용하여 향후 페이지에서 조기 로드를 위해 사용될 수 있는 리소스를 지정하세요.
태그를 사용하여 사전 확인될 도메인 이름을 지정하면 DNS 조회 시간이 단축됩니다.
태그를 사용하여 사전 연결할 도메인 이름을 지정하면 연결 설정 시간이 단축됩니다.

브라우저

1. 브라우저가 어떻게 작동하는지 설명하세요.

답변: 브라우저 작동 방식에는 다음과 같은 주요 단계가 포함됩니다.

구문 분석: 브라우저는 수신된 HTML, CSS 및 JavaScript 코드를 DOM 트리, CSSOM 트리 및 JavaScript 엔진 실행 가능 코드로 구문 분석합니다.
렌더링: 브라우저는 DOM 트리와 CSSOM 트리를 사용하여 렌더링 트리를 구축한 다음 렌더링 트리를 기반으로 레이아웃(요소의 위치 및 크기 계산)과 그리기(화면에 요소 그리기)를 수행합니다.
레이아웃 및 그리기: 렌더링 트리의 변경 사항을 기반으로 브라우저 레이아웃 및 그리기를 수행한 다음 최종 페이지를 사용자에게 표시합니다.
JavaScript 엔진 실행: 브라우저의 JavaScript 엔진은 JavaScript 코드를 해석하고 실행하여 필요에 따라 렌더링 트리를 업데이트하고 페이지를 다시 렌더링합니다.

2. 리페인트(repaint)와 리플로우(reflow)란 무엇입니까? 그들 사이의 차이점은 무엇입니까?

답변: 다시 그리기란 요소의 모양(예: 색상, 배경 등)이 변경되지만 레이아웃에는 영향을 주지 않는 업데이트 프로세스를 말합니다. 다시 그려도 요소의 위치나 크기는 변경되지 않습니다.

리플로우는 요소의 레이아웃 속성(예: 너비, 높이, 위치 등)이 변경될 때 업데이트 프로세스를 나타냅니다. 리플로우는 브라우저가 렌더링 트리를 다시 계산하고 페이지의 일부 또는 전체를 다시 그리도록 합니다.

차이점은 다시 그리기에는 모양만 변경되는 반면 리플로우에는 레이아웃 변경이 포함된다는 것입니다. 리플로우는 레이아웃을 다시 계산하고 전체 페이지를 다시 그려야 하기 때문에 다시 그리기보다 성능 집약적입니다.

3. 이벤트 버블링과 이벤트 캡처란 무엇입니까? 그들 사이의 차이점은 무엇입니까?

답변: 이벤트 버블링과 이벤트 캡처는 브라우저가 이벤트를 처리할 때 두 가지 다른 전파 방법을 나타냅니다.

이벤트 버블링은 이벤트가 가장 안쪽 요소에서 트리거된 다음 가장 바깥쪽 요소에 도달할 때까지 상위 요소로 전파되는 것을 의미합니다.

이벤트 캡처는 이벤트가 가장 바깥쪽 요소에서 트리거된 다음 가장 안쪽 요소로 전파된다는 것을 의미합니다.

차이점은 전파 방향에 있습니다. 이벤트 버블링은 내부에서 외부로 전파되는 반면, 이벤트 캡처는 외부에서 내부로 전파됩니다.

4. 동기식 및 비동기식 JavaScript 코드 실행 방법을 설명하십시오.

답변: 동기 코드는 순차적으로 실행되는 코드입니다. 각 작업은 실행되기 전에 이전 작업이 완료될 때까지 기다려야 합니다. 동기 코드는 현재 작업이 완료될 때까지 후속 코드 실행을 차단합니다.

비동기 코드는 순차적으로 실행되지 않는 코드로, 백그라운드에서 실행되며 후속 코드 실행을 차단하지 않습니다. 비동기 코드는 일반적으로 콜백 함수, Promise, async/await 등을 사용하여 비동기 작업의 결과를 처리합니다.

비동기 실행을 통해 메인 스레드 차단을 방지하고 페이지의 응답 성능을 향상시킬 수 있습니다.

5. 이벤트 루프란 무엇입니까? JavaScript에서 그 역할은 무엇입니까?

답변: 이벤트 루프는 비동기 코드 실행을 처리하는 JavaScript의 메커니즘입니다. 비동기 작업의 예약 및 실행을 관리하고 이를 실행 대기열에 추가하는 일을 담당합니다.

JavaScript에서 이벤트 루프의 역할은 비동기 작업이 올바른 순서로 실행되고 메인 스레드를 차단하지 않도록 하는 것입니다. 실행 대기열에서 작업을 지속적으로 제거하고 실행하여 비차단 비동기 작업을 구현합니다.

6. 브라우저의 가비지 수집 메커니즘이 어떻게 작동하는지 설명하십시오.

답변: 브라우저의 가비지 수집 메커니즘은 메모리 리소스를 해제하는 데 더 이상 사용되지 않는 개체를 감지하고 재활용하는 데 사용되는 자동 메모리 관리 메커니즘입니다.

가비지 수집 메커니즘은 마크 스윕 알고리즘을 통해 구현됩니다. 작동 방식은 다음과 같습니다.

표시 단계: 가비지 수집기는 루트 개체(예: 전역 개체)에서 시작하여 모든 개체를 재귀적으로 순회하고 여전히 액세스할 수 있는 개체를 표시합니다.
정리 단계: 가비지 수집기는 힙 메모리를 검색하고 표시되지 않은 개체를 지우고 개체가 차지하는 메모리 공간을 회수합니다.
가비지 수집 메커니즘의 목표는 더 이상 사용되지 않는 개체를 식별하고 재활용하여 메모리 누수를 방지하고 메모리 활용도를 높이는 것입니다.

7. 브라우저의 동일 출처 정책과 그 제한 사항을 설명하십시오.

답변: 동일 출처 정책은 출처가 다른 웹 페이지 간의 상호 작용을 제한하는 브라우저 보안 메커니즘입니다. 상동성은 프로토콜, 도메인 이름 및 포트 번호가 정확히 동일함을 의미합니다.

동일 출처 정책의 제한사항은 다음과 같습니다.

스크립트 액세스 제한: 서로 다른 소스의 스크립트는 서로의 데이터 및 작업에 직접 액세스할 수 없습니다.
DOM 액세스 제한: 서로 다른 소스의 웹 페이지는 JavaScript를 통해 서로의 DOM 요소에 액세스할 수 없습니다.
쿠키 제한사항: 서로 다른 출처의 웹페이지는 서로의 쿠키를 읽거나 수정할 수 없습니다.
AJAX 요청 제한: 서로 다른 출처의 웹 페이지는 AJAX 요청을 통해 서로의 데이터에 액세스할 수 없습니다.
동일 출처 정책이 존재하면 악의적인 웹사이트가 사용자의 민감한 정보를 획득하거나 악의적인 작업을 수행하는 것을 방지할 수 있습니다.

8. 웹 작업자란 무엇입니까? 브라우저에서 이들의 역할은 무엇입니까?

답변: Web Workers는 메인 스레드 차단을 방지하기 위해 백그라운드 스레드에서 시간이 많이 소요되는 컴퓨팅 작업을 수행하기 위해 브라우저에서 제공하는 JavaScript API입니다.

Web Worker의 역할은 복잡한 계산을 수행하거나 대용량 데이터를 처리할 때 사용자 인터페이스의 부드러움이 영향을 받지 않도록 브라우저의 응답성을 향상시키는 것입니다.

Web Worker는 멀티 코어 프로세서의 성능을 최대한 활용하여 작업을 백그라운드 스레드에 위임함으로써 병렬 처리를 가능하게 합니다. 메인 스레드와 통신할 수 있지만 DOM에 직접 액세스하거나 UI 관련 작업을 수행할 수는 없습니다.

9. 브라우저 캐시(Browser Cache)가 무엇이고 그 기능은 무엇인지 설명해주세요.

답변: 브라우저 캐시는 브라우저가 웹 페이지 및 리소스의 사본을 로컬에 저장하여 후속 방문 시 빠르게 로드할 수 있도록 하는 곳입니다. 그 기능은 서버에 대한 요청 수와 네트워크 전송량을 줄이고 페이지 로딩 속도와 사용자 경험을 향상시키는 것입니다.

브라우저 캐싱은 첫 번째 요청에서 리소스를 로컬로 저장하고 후속 요청을 확인하여 리소스가 이미 존재하고 만료되지 않았는지 확인하는 방식으로 작동합니다. 리소스가 이미 존재하고 만료되지 않은 경우 브라우저는 리소스를 서버에서 다시 다운로드하는 대신 캐시에서 직접 로드합니다.

10. 리디렉션이란 무엇입니까? 브라우저에서의 역할은 무엇입니까?

답변: 리디렉션은 브라우저가 URL을 요청할 때 서버가 다른 URL을 반환하여 브라우저의 요청을 새 URL로 리디렉션하는 것을 의미합니다.

브라우저에서 리디렉션의 역할은 페이지로 이동하거나, URL을 수정하거나, 리소스를 리디렉션하는 것입니다. 이전 링크 리디렉션 처리, URL 정규화, 사용자 인증 처리 등 다양한 상황에서 사용할 수 있습니다.

리디렉션은 HTTP 응답의 특정 상태 코드(예: 301 영구 리디렉션, 302 임시 리디렉션) 및 위치 헤더 필드를 설정하여 구현됩니다.

11. 브라우저 저장소란 무엇입니까? 다양한 저장 메커니즘은 무엇입니까?

답변: 브라우저 저장소는 클라이언트 측에 데이터를 저장하기 위해 브라우저에서 제공하는 메커니즘으로, 서로 다른 웹 페이지 간에 데이터를 공유하거나 데이터를 유지하는 데 사용됩니다.

브라우저 저장소에는 다음과 같은 다양한 저장 메커니즘이 있습니다.

쿠키: 소량의 데이터를 저장할 수 있고 모든 HTTP 요청과 함께 자동으로 서버로 전송되는 작은 텍스트 파일입니다.
웹 스토리지(localStorage 및 sessionStorage): 키-값 쌍의 형태로 브라우저에 더 많은 양의 데이터를 저장할 수 있습니다.
IndexedDB: 대량의 구조화된 데이터를 저장할 수 있고 인덱싱 및 트랜잭션 작업을 지원하는 고급 클라이언트 측 데이터베이스입니다.
캐시 API: 오프라인 액세스를 위한 네트워크 요청에 대한 응답을 캐시하거나 페이지 로딩 속도를 높이는 데 사용됩니다.
다양한 저장 메커니즘은 다양한 요구 사항에 적합하며 개발자는 특정 상황에 따라 적절한 저장 방법을 선택할 수 있습니다.

안녕하세요 페이첸입니다.
저를 따라와서 프론트 엔드 학습 리소스, 기술 변화에 대한 일일 공유, 생존 규칙, 업계 내부자, 통찰력 및 기회를 얻으실 수 있습니다.

2023년 Gold, Nine, Silver Ten의 필수 프론트엔드 인터뷰 질문! 2w 품질의 단어!