2023년 Vue 고빈도 면접 질문 공유(답변 분석 포함)

이 기사에는 수집할 가치가 있는 2023년 선정 항목vue자주 자주 나오는 인터뷰 질문(답변 포함)이 요약되어 있습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Vue-router 네비게이션 가드란 무엇입니까?

• 전역 접두사/후크: beforeEach, beforeResolve, afterEach
• Route 전용 가드: beforeEnter
• 구성 요소 내의 가드: beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave

(학습 영상 공유: vue 영상 튜토리얼)

Vue3.0에서 Proxy를 채택하고 Object.defineProperty를 포기한 이유는 무엇인가요?

Object.defineProperty 자체에는 배열 첨자의 변경 사항을 모니터링하는 특정 기능이 있지만 Vue에서는 성능/경험의 비용 효율성을 고려하여 이 기능이 포기되었습니다(Vue가 배열 변경 사항을 감지할 수 없는 이유). 이 문제를 해결하기 위해 Vue 내부 처리 후 다음 방법을 사용하여 배열을 모니터링할 수 있습니다

push();
pop();
shift();
unshift();
splice();
sort();
reverse();

위 7가지 방법만 해킹되었기 때문에 다른 배열의 속성을 감지할 수 없으며 여전히 일정한 제한이 있습니다. .

Object.defineProperty는 객체의 속성만 하이재킹할 수 있으므로 각 객체의 각 속성을 순회해야 합니다. Vue 2.x에서는 데이터 객체의 재귀 + 순회를 통해 데이터 모니터링이 이루어집니다. 속성 값도 객체라면 심층 탐색이 필요합니다. 물론 완전한 객체를 탈취할 수 있다면 더 나은 선택입니다.

프록시는 전체 개체를 하이재킹하고 새 개체를 반환할 수 있습니다. 프록시는 객체뿐만 아니라 프록시 배열도 프록시할 수 있습니다. 동적으로 추가된 속성을 프록시할 수도 있습니다.

v-for 키를 추가하는 이유

키를 사용하지 않는 경우 Vue는 동적 요소를 최소화하고 동일한 유형의 요소를 최대한 수정/재사용하는 알고리즘을 사용합니다. 키는 Vue에서 vnode에 대한 유일한 표시입니다. 이 키를 통해 diff 작업이 더 정확하고 빨라질 수 있습니다

• 더 정확합니다: 키를 사용하면 동일한 노드 함수에서 재사용되지 않습니다. key === b.key는 비교 중에 내부 재사용을 피할 수 있습니다. 그래서 더 정확할 것입니다.

• Faster: 키의 고유성을 사용하여 맵 객체를 생성하고 해당 노드를 얻는 것이 순회 방법보다 빠릅니다.

실제 DOM에서 가상 DOM으로 이동하는 방법

템플릿을 사용합니다. 주요 프로세스인 Vue의 컴파일 원리:

• 템플릿을 ast 트리로 변환하고, ast는 객체를 사용하여 실제 JS 구문을 설명합니다(실제 DOM을 가상으로 변환) DOM) ast 树， ast 用对象来描述真实的JS语法（将真实DOM转换成虚拟DOM）

• 优化树

• 将 ast 树生成代码

为什么Vue采用异步渲染呢？

Vue 是组件级更新，如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，所以为了性能， Vue 会在本轮数据更新后，在异步更新视图。核心思想 nextTick 。

dep.notify（） 通知 watcher进行更新， subs[i].update 依次调用 watcher 的 update ， queueWatcher 将watcher 去重放入队列， nextTick（ flushSchedulerQueue

트리 최적화

ast 트리에서 코드 생성

Vue가 비동기 렌더링을 사용하는 이유는 무엇인가요?

Vue는 구성 요소 수준 업데이트입니다. 비동기 업데이트를 사용하지 않으면 데이터가 업데이트될 때마다 현재 구성 요소가 다시 렌더링됩니다. 따라서 >Vue는 데이터 업데이트 라운드 후에 뷰가 비동기적으로 업데이트됩니다. 핵심 아이디어 nextTick.

dep.notify()는 감시자에게 업데이트를 알리고, subs[i].update는 감시자의 업데이트를 차례로 호출합니다. queueWatcher 감시자를 대기열에 넣으면 nextTick(<code> flashSchedulerQueue)은 다음 틱에서 감시자 대기열을 (비동기적으로) 새로 고칩니다.

• vue 구성 요소의 데이터는 왜 함수여야 합니까?
• 객체는 참조 유형입니다. 데이터 객체는 모두 동일한 데이터 객체를 가리키므로 한 구성 요소에서 데이터가 수정되면 반환된 항목을 사용하는 동안 재사용된 다른 구성 요소의 데이터도 동시에 수정됩니다. object 함수, 새 개체(Object의 인스턴스)를 반환할 때마다 참조 주소가 다르기 때문에 이 문제는 발생하지 않습니다.

MVC와 MVVM의 차이점

MVC

MVC의 정식 이름은 Model View Controller로, Model-View-Controller의 약자로 소프트웨어 설계 모델입니다🎜🎜🎜 모델 : 애플리케이션의 일부 애플리케이션 데이터의 논리를 처리합니다. 일반적으로 모델 객체는 데이터베이스의 데이터에 액세스하는 역할을 담당합니다. 🎜🎜View: 데이터 표시를 처리하는 애플리케이션의 일부입니다. 일반적으로 뷰는 모델 데이터를 기반으로 생성됩니다. 🎜🎜컨트롤러: 사용자 상호 작용을 처리하는 애플리케이션의 일부입니다. 일반적으로 컨트롤러는 뷰에서 데이터를 읽고, 사용자 입력을 제어하고, 모델에 데이터를 보내는 일을 담당합니다. MVC의 개념은 컨트롤러가 뷰를 사용하여 모델의 데이터를 표시하는 일을 담당한다는 것입니다. 즉, Model이 Controller에 표시됩니다. 데이터는 View에 할당됩니다. 🎜🎜🎜MVVM🎜🎜🎜MVVM에 새로운 VM 클래스가 추가되었습니다🎜

• ViewModel 层：做了两件事达到了数据的双向绑定 一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。

MVVM 与 MVC 最大的区别就是：它实现了 View 和 Model 的自动同步，也就是当 Model 的属性改变时，我们不用再自己手动操作 Dom 元素，来改变 View 的显示，而是改变属性后该属性对应 View 层显示会自动改变（对应Vue数据驱动的思想）

整体看来，MVVM 比 MVC 精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作 DOM 元素。因为在 MVVM 中，View 不知道 Model 的存在，Model 和 ViewModel 也观察不到 View，这种低耦合模式提高代码的可重用性

注意：Vue 并没有完全遵循 MVVM 的思想 这一点官网自己也有说明

那么问题来了 为什么官方要说 Vue 没有完全遵循 MVVM 思想呢？

• 严格的 MVVM 要求 View 不能和 Model 直接通信，而 Vue 提供了$refs 这个属性，让 Model 可以直接操作 View，违反了这一规定，所以说 Vue 没有完全遵循 MVVM。

Vue 为什么要用 vm.$set() 解决对象新增属性不能响应的问题 ？你能说说如下代码的实现原理么？

1）Vue为什么要用vm.$set() 解决对象新增属性不能响应的问题

• Vue使用了Object.defineProperty实现双向数据绑定

• 在初始化实例时对属性执行 getter/setter 转化

• 属性必须在data对象上存在才能让Vue将它转换为响应式的（这也就造成了Vue无法检测到对象属性的添加或删除）

所以Vue提供了Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value)

2）接下来我们看看框架本身是如何实现的呢?

Vue 源码位置：vue/src/core/instance/index.js

export function set (target: Array<any> | Object, key: any, val: any): any {
  // target 为数组  
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 修改数组的长度, 避免索引>数组长度导致splcie()执行有误
    target.length = Math.max(target.length, key)
    // 利用数组的splice变异方法触发响应式  
    target.splice(key, 1, val)
    return val
  }
  // key 已经存在，直接修改属性值  
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  // target 本身就不是响应式数据, 直接赋值
  if (!ob) {
    target[key] = val
    return val
  }
  // 对属性进行响应式处理
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

我们阅读以上源码可知，vm.$set 的实现原理是：

• 如果目标是数组，直接使用数组的 splice 方法触发相应式；

• 如果目标是对象，会先判读属性是否存在、对象是否是响应式，

• 最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理

defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法

Vue3.0 和 2.0 的响应式原理区别

Vue3.x 改用 Proxy 替代 Object.defineProperty。因为 Proxy 可以直接监听对象和数组的变化，并且有多达 13 种拦截方法。

相关代码如下

import { mutableHandlers } from "./baseHandlers"; // 代理相关逻辑
import { isObject } from "./util"; // 工具方法

export function reactive(target) {
  // 根据不同参数创建不同响应式对象
  return createReactiveObject(target, mutableHandlers);
}
function createReactiveObject(target, baseHandler) {
  if (!isObject(target)) {
    return target;
  }
  const observed = new Proxy(target, baseHandler);
  return observed;
}

const get = createGetter();
const set = createSetter();

function createGetter() {
  return function get(target, key, receiver) {
    // 对获取的值进行放射
    const res = Reflect.get(target, key, receiver);
    console.log("属性获取", key);
    if (isObject(res)) {
      // 如果获取的值是对象类型，则返回当前对象的代理对象
      return reactive(res);
    }
    return res;
  };
}
function createSetter() {
  return function set(target, key, value, receiver) {
    const oldValue = target[key];
    const hadKey = hasOwn(target, key);
    const result = Reflect.set(target, key, value, receiver);
    if (!hadKey) {
      console.log("属性新增", key, value);
    } else if (hasChanged(value, oldValue)) {
      console.log("属性值被修改", key, value);
    }
    return result;
  };
}
export const mutableHandlers = {
  get, // 当获取属性时调用此方法
  set, // 当修改属性时调用此方法
};

Vue模版编译原理知道吗，能简单说一下吗？

简单说，Vue的编译过程就是将template转化为render函数的过程。会经历以下阶段：

• 生成AST树
• 优化
• codegen

首先解析模版，生成AST语法树(一种用JavaScript对象的形式来描述整个模板)。 使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。

Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的DOM也不会变化。那么优化过程就是深度遍历AST树，按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对，对运行时的模板起到很大的优化作用。

编译的最后一步是将优化后的AST树转换为可执行的代码。

MVVM的优缺点?

优点:

• 分离视图（View）和模型（Model），降低代码耦合，提⾼视图或者逻辑的重⽤性: ⽐如视图（View）可以独⽴于Model变化和修改，⼀个ViewModel可以绑定不同的"View"上，当View变化的时候Model不可以不变，当Model变化的时候View也可以不变。你可以把⼀些视图逻辑放在⼀个ViewModel⾥⾯，让很多view重⽤这段视图逻辑
• 提⾼可测试性: ViewModel的存在可以帮助开发者更好地编写测试代码
• ⾃动更新dom: 利⽤双向绑定,数据更新后视图⾃动更新,让开发者从繁琐的⼿动dom中解放

缺点:

• 버그는 디버그하기 어렵습니다. 양방향 바인딩 모드로 인해 인터페이스에서 예외가 표시되면 뷰 코드에 버그가 있거나 모델 코드에 문제가 있을 수 있습니다. 데이터 바인딩을 사용하면 한 위치의 버그가 다른 위치로 빠르게 전송되므로 원래 문제 위치를 찾는 것이 쉽지 않습니다. 또한 데이터 바인딩 선언은 뷰 템플릿에 명령적으로 작성됩니다. 이러한 내용은 중단되거나 디버깅될 수 없습니다. 대형 모듈의 모델도 사용하기 편리하지만 매우 큽니다. 데이터의 일관성을 오랫동안 유지하면 메모리를 해제하지 않으면 더 많은 메모리가 소모됩니다. 상대적으로 높을 것.
• Vue 데이터의 속성 값이 변경된 후 뷰가 즉시 동기식으로 다시 렌더링됩니까?

렌더링은 즉시 동기적으로 수행되지 않습니다. Vue의 반응성은 데이터가 변경된 직후 DOM이 변경된다는 것을 의미하는 것이 아니라 특정 전략에 따라 DOM이 업데이트된다는 것을 의미합니다. Vue는 DOM을 비동기적으로 업데이트합니다. 데이터 변경 사항을 수신하는 한 Vue는 대기열을 열고 동일한 이벤트 루프에서 발생하는 모든 데이터 변경 사항을 버퍼링합니다. 동일한 감시자가 여러 번 실행되면 대기열에 한 번만 푸시됩니다. 버퍼링 중 이러한 중복 제거는 불필요한 계산 및 DOM 작업을 방지하는 데 중요합니다. 그런 다음 다음 이벤트 루프 틱에서 Vue는 큐를 플러시하고 실제(중복 제거된) 작업을 수행합니다.

diff 알고리즘

시간 복잡도: 트리의 전체 diff 알고리즘은 vue Convert에 의해 최적화된 O(n*3)의 시간 복잡도입니다. O(n)으로 변경하세요.

이해하세요: diff 算法是一个时间复杂度为 O(n*3） ，vue进行优化转化成 O(n) 。

理解：

• 最小量更新， key 很重要。这个可以是这个节点的唯一标识，告诉 diff 算法，在更改前后它们是同一个DOM节点

  • 扩展 v-for 为什么要有 key ，没有 key 会暴力复用，举例子的话随便说一个比如移动节点或者增加节点（修改DOM），加 key 只会移动减少操作DOM。
• 只有是同一个虚拟节点才会进行精细化比较，否则就是暴力删除旧的，插入新的。
• 只进行同层比较，不会进行跨层比较。

diff算法的优化策略：四种命中查找，四个指针

1. 旧前与新前（先比开头，后插入和删除节点的这种情况）
2. 旧后与新后（比结尾，前插入或删除的情况）
3. 旧前与新后（头与尾比，此种发生了，涉及移动节点，那么新前指向的节点，移动到旧后之后）
4. 旧后与新前（尾与头比，此种发生了，涉及移动节点，那么新前指向的节点，移动到旧前之前）

--- 问完上面这些如果都能很清楚的话，基本O了 ---

以下的这些简单的概念，你肯定也是没有问题的啦?

Vue的优点

• 轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；
• 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；
• 双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；
• 组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；
• 视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
• 虚拟DOM：dom 操作是非常耗费性能的，不再使用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种方式；
• 运行速度更快：相比较于 react 而言，同样是操作虚拟 dom，就性能而言， vue

최소 업데이트, 키는 매우 중요합니다. 이는 이 노드의 고유 식별자일 수 있으며 diff 알고리즘에 변경 전후에 동일한 DOM 노드임을 알려줍니다.

Extension v-for가 있는 이유 키가 없으면 폭력적인 재사용이 발생합니다. 예를 들어 노드를 이동하거나 노드를 추가하면 됩니다(DOM 수정). DOM만 이동하고 축소합니다.

동일한 가상 노드인 경우에만 자세한 비교가 이루어집니다. 그렇지 않으면 이전 노드가 강제로 삭제되고 새 노드가 삽입됩니다.

동일한 레이어 내에서만 비교가 이루어지며, 레이어 간 비교는 이루어지지 않습니다.

• Diff 알고리즘 최적화 전략
: 적중 검색 4개, 포인터 4개

• Old before와 new before(먼저 시작을 비교한 다음 노드 삽입 및 삭제)

Old after와 new After(끝과 비교) , 삽입 또는 삭제 전)

• Old 이전과 New 이후 (머리와 꼬리를 비교하면 노드 이동이 수반되며 새 프런트가 가리키는 노드는 이전 노드 이후로 이동됩니다)

Old Back 및 새 전면(꼬리 대 머리, 이는 이동 노드와 관련하여 발생하며 새 전면이 가리키는 노드는 이전 전면 이전으로 이동됩니다)

• --- 요청한 후 명확하게 할 수 있다면 위의 질문이라면 기본적으로는 O---

다음과 같은 간단한 개념만 있어도 전혀 문제가 없겠죠?

• Vue의 장점

• 경량 프레임워크: 뷰 레이어에만 집중하여 데이터 구축 뷰 컬렉션의 크기는 수십 kb입니다.
• 배우기 쉬움: 중국어, 중국어 문서로 개발되었으며 언어 장벽이 없으며 이해하고 배우기 쉽습니다. 바인딩: angular 기능을 유지하여 데이터 작업을 더 간단하게 만듭니다.
  구성요소화: react의 장점을 유지하고 html의 캡슐화 및 재사용을 실현합니다. 단일 페이지 애플리케이션 구축 시 고유한 장점이 있습니다.
• 뷰, 데이터 및 구조 분리: 논리 코드를 수정할 필요 없이 데이터 변경을 더 간단하게 만들고 관련 작업을 완료하기 위해 데이터만 조작하면 됩니다. : dom

작업은 성능 집약적입니다. 기본 dom 작업 노드는 더 이상 사용되지 않으므로 dom 작업이 크게 자유로워집니다. 특정 작업은 여전히 ​​dom이며

실행 속도가 더 빠릅니다. react에 비해 가상 dom도 작동하므로 성능 측면에서 vue에는 큰 장점이 있습니다.

vue-router 라우팅 후크 기능은 무엇이며 실행 순서는 무엇입니까?

라우팅 후크의 실행 프로세스는 글로벌 가드, 라우팅 가드, 컴포넌트 가드입니다.

완료 내비게이션 분석 프로세스:

🎜 🎜🎜내비게이션이 트리거됩니다. 🎜🎜🎜🎜비활성화된 구성요소에서 beforeRouteLeave 가드를 호출합니다. 🎜🎜🎜🎜각 가드 전에 전역을 호출하세요. 🎜🎜🎜🎜재사용된 구성요소에서 beforeRouteUpdate 가드(2.2+)를 호출하세요. 🎜🎜🎜🎜라우팅 구성에 들어가기 전에 전화하세요. 🎜🎜🎜🎜비동기 라우팅 구성 요소를 해결합니다. 🎜🎜🎜🎜활성화된 구성요소에 RouteEnter 전에 전화하세요. 🎜🎜🎜🎜BeforeResolve 가드(2.5+) 전역을 호출합니다. 🎜🎜🎜🎜내비게이션이 확인되었습니다. 🎜🎜🎜🎜Each Hook 이후 전역을 호출하세요. 🎜🎜🎜🎜DOM 업데이트를 트리거합니다. 🎜

调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

Vue.js的template编译

简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点），详细步骤如下：

首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。

然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）

$nextTick 是什么？

Vue 实现响应式并不是在数据发生后立即更新 DOM，使用 vm.$nextTick 是在下次 DOM 更新循环结束之后立即执行延迟回调。在修改数据之后使用，则可以在回调中获取更新后的 DOM。

说说Vue的生命周期吧

什么时候被调用？

• beforeCreate ：实例初始化之后，数据观测之前调用
• created：实例创建万之后调用。实例完成：数据观测、属性和方法的运算、 watch/event 事件回调。无 $el .
• beforeMount：在挂载之前调用，相关 render 函数首次被调用
• mounted：了被新创建的vm.$el替换，并挂载到实例上去之后调用改钩子。
• beforeUpdate：数据更新前调用，发生在虚拟DOM重新渲染和打补丁，在这之后会调用改钩子。
• updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用改钩子。
• beforeDestroy：实例销毁前调用，实例仍然可用。
• destroyed：实例销毁之后调用，调用后，Vue实例指示的所有东西都会解绑，所有事件监听器和所有子实例都会被移除

每个生命周期内部可以做什么？

• created：实例已经创建完成，因为他是最早触发的，所以可以进行一些数据、资源的请求。
• mounted：实例已经挂载完成，可以进行一些DOM操作。
• beforeUpdate：可以在这个钩子中进一步的更改状态，不会触发重渲染。
• updated：可以执行依赖于DOM的操作，但是要避免更改状态，可能会导致更新无线循环。
• destroyed：可以执行一些优化操作，清空计时器，解除绑定事件。

ajax放在哪个生命周期？：一般放在 mounted 中，保证逻辑统一性，因为生命周期是同步执行的， ajax 是异步执行的。单数服务端渲染 ssr 同一放在 created 中，因为服务端渲染不支持 mounted 方法。 什么时候使用beforeDestroy？：当前页面使用 $on ，需要解绑事件。清楚定时器。解除事件绑定， scroll mousemove 。

Vue 怎么用 vm.$set() 解决对象新增属性不能响应的问题 ？

受现代 JavaScript 的限制 ，Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。但是 Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value) 来实现为对象添加响应式属性，那框架本身是如何实现的呢？

我们查看对应的 Vue 源码：vue/src/core/instance/index.js

export function set (target: Array<any> | Object, key: any, val: any): any {
  // target 为数组  
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 修改数组的长度, 避免索引>数组长度导致splcie()执行有误
    target.length = Math.max(target.length, key)
    // 利用数组的splice变异方法触发响应式  
    target.splice(key, 1, val)
    return val
  }
  // key 已经存在，直接修改属性值  
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  // target 本身就不是响应式数据, 直接赋值
  if (!ob) {
    target[key] = val
    return val
  }
  // 对属性进行响应式处理
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

我们阅读以上源码可知，vm.$set 的实现原理是：

• 如果目标是数组，直接使用数组的 splice 方法触发相应式；
• 如果目标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理（ defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）

（学习视频分享：web前端开发、编程基础视频）

위 내용은 2023년 Vue 고빈도 면접 질문 공유(답변 분석 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!