1. React는 사용자 인터페이스 구축을 위한 JavaScript 라이브러리로, UI 수준의 솔루션만 제공하며, 컴포넌트 디자인 패턴, 선언적 프로그래밍 패러다임, 함수형 프로그래밍 개념을 따르므로 프런트엔드 애플리케이션을 보다 효율적으로 만듭니다. 
2. 가상 DOM을 사용하여 DOM을 효과적으로 운영하고, 상위 수준 구성요소에서 하위 구성요소로의 단방향 데이터 흐름을 따르고, 인터페이스를 독립적인 작은 블록으로 나누는 데 도움을 줍니다. 각 블록은 구성요소이며 이러한 구성요소는 결합, 중첩되어 전체 페이지를 구성합니다. 
3. 기능: JSX 구문, 단일 항목 데이터 바인딩, 가상 DOM, 선언적 프로그래밍, 구성 요소

2. Real diff 알고리즘이 어떻게 작동하는지 알려주세요.

1. diff 알고리즘은 성능을 절약하도록 설계되었습니다. 동일한 레벨과 비교할 때 레벨을 넘지 않으면 성능이 더 효율적입니다. 2. 작업 프로세스는 
주로 트리 레이어, 구성 요소 레이어, 요소 레이어 
    1, 트리 레이어의 세 가지 레이어로 나뉩니다. : 트리 레이어 DOM 노드의 레벨 간 이동 연산은 무시하고, 같은 레벨의 DOM 노드만 비교하며, 해당 노드가 존재하지 않는 것으로 확인되면 해당 노드와 이후의 모든 하위 노드를 직접 삭제합니다 
    . diff, 계층적 비교를 위해 다양한 유형의 구성 요소를 발견할 때 이 다른 구성 요소를 더티 구성 요소로 직접 판단하고 이 구성 요소 아래의 모든 하위 노드를 교체합니다. 이 구성 요소의 가상 DOM이 변경되지 않았음을 알면 수동으로 사용할 수 있습니다. , shouldComponentUpdate는 diff가 필요한지 여부를 결정하는 데 사용되며, 이는 diff의 효율성과 성능을 더욱 향상시킵니다. 
    3. 요소 계층: 동일한 수준 아래에서는 새 노드에 대해 삽입 작업을 수행할 수 있고, 중복된 노드에 대해서는 삭제 작업을 수행할 수 있습니다. 전치된 노드, 이동 작업을 수행합니다.

3. React 라이프사이클의 다양한 단계에 대해 알려주십시오. 각 단계에 해당하는 방법은 무엇인가요?

1. React 라이프 사이클은 주로 생성 단계, 업데이트 단계 및 제거 단계의 세 단계로 나뉩니다.
2. 생성 단계:
1. 생성자: 상태를 정의하거나 이 메서드를 저장하는 데 사용됩니다.
2. getDerivedStateFromProps(): 미래에 사용하려면 새 객체를 새 상태로 반환하거나 상태 상태를
업데이트 할 필요가 없음을 나타내기 위해 null을 반환해야 합니다.
4. componentDidMount(): 일부 데이터 수집, 이벤트 모니터링 및 기타 작업을 수행하는 데 사용됩니다.
3. 업데이트 단계:
1. getDerivedStateFromProps(): 향후에 사용될 예정이며 새 객체를 새 상태로 반환하거나 상태 상태가 유효하지 않음을 나타내기 위해 null을 반환해야 합니다. 업데이트 필요 2. shouldComponentUpdate
: 컴포넌트 자체는 현재 props 및 상태를 기반으로 컴포넌트를 다시 렌더링할지 여부를 결정하고 기본적으로 true를 반환합니다. 3.
render: 클래스 컴포넌트에 의해 구현되어야 하는 메서드로, DOM 구조를 렌더링하는 데 사용되며 컴포넌트 상태에 액세스할 수 있습니다. prop 속성
4, getSnapshotBeforeUpdate: 이 주기적 함수는 렌더링 후에 실행되며 DOM 요소는 실행 시 업데이트되지 않았습니다. 목적은 구성 요소가 업데이트되기 전에 구성 요소의 스크롤 위치와 같은 일부 정보를 얻는 것입니다. .컴포넌트가 업데이트된 후 이 정보를 기반으로 일부 UI 시각적 상태를 복원할 수 있습니다
.5.ComponentDidUpdate: 데이터 가져오기, DOM 스타일 수정 등 전후의 props 및 상태 변경에 따라 해당 작업을 수행할 수 있습니다. 4. 하역
단계:
componentWillUnmount: 이 메소드는 구성 요소가 마운트 해제되기 전에 이벤트를 수신하거나 네트워크 요청 구독 취소 등을 위해 일부 등록을 정리하는 데 사용됩니다. 구성 요소 인스턴스가 마운트 해제되면 다시 마운트되지 않고 재생성만 가능합니다.

4. React의 가상 돔에 대해 어떻게 이해하고 계시나요?

1. 가상 DOM은 js 객체의 형태를 사용하여 페이지 돔의 중첩 관계를 시뮬레이션합니다. 
2. 가상 DOM은 가상 JavaScript 객체 트리입니다. 그림의 초점은 "가상"과 "JS 객체"입니다. 실제 웹페이지 문서 노드들을 하나씩 js 객체로 가상화하여 트리 구조로 메모리에 저장한다는 것입니다. 
3. 구현 원리: JS를 통해 웹 페이지 문서 노드를 시뮬레이션하고 JS 개체 트리(가상 DOM)를 생성한 다음 실제 DOM 트리를 추가로 생성한 다음 화면에 그립니다. 나중에 콘텐츠가 변경되면 React는 완전히 새로운 가상 DOM 트리를 재생성한 다음 이전 가상 DOM 트리와 차이점을 비교하고 차이점을 패치로 패키징한 후 실제 DOM에 적용한 다음 탐색을 위해 화면에 렌더링합니다. 장치.

5. 리액트훅에 대한 이해도를 알려주세요.

1. Hook은 React 16.8.0에 추가된 새로운 기능/문법으로, 이를 통해 함수 구성 요소에서 상태 및 기타 React 기능을 사용할 수 있습니다.
일반적인 Hooks:
2. useState: 클래스 구성 요소의 상태와 유사하므로 다음을 수행하는 것이 편리합니다. 초기화 정의 데이터는 두 개의 매개변수를 받습니다. 하나는 데이터를 초기화하는 것이고, 다른 하나는 데이터를 수정하는 것입니다. 방법
3, useEffect: 부작용 함수, 사용 후에만 부작용이 발생하며 두 개의 매개변수를 받습니다. 하나는 함수입니다. , 다른 하나는 모니터링된 데이터가 []일 수 있다는 것인데, 이는 한 번만 실행되고 매개변수도 전달할 수 있음을 의미합니다. 매개변수가 전달된 후에는 데이터가 변경될 때만 트리거됩니다. 쓰지 않으면 4. useMemo
: 데이터 캐시, 컴포넌트 간 통신 시 상위 컴포넌트의 데이터가 변경되면 업데이트된 데이터가 데이터와 관련되어 있는지 여부에 관계없이 하위 컴포넌트도 그에 따라 업데이트됩니다. 하위 구성 요소 중 업데이트 작업을 수행합니다. 이때 업데이트 성능이 낭비됩니다. ysememo를 사용하여 불필요한 업데이트 작업을 캐시하고 줄일 수 있습니다. 캐시의 매개 변수는 문자열입니다. 함수인 경우
5. useRef: 입력 상자 데이터의 변경 사항을 모니터링하고 입력 상자의 값을 가져올 수 있습니다 .

6. React 컴포넌트 간 통신은 어떻게 하나요?

React 컴포넌트 통신은 Value 컴포넌트가 특정 목적을 달성하기 위해 특정 방식으로 정보를 전송하는 것을 의미합니다. 
    방법: 
    1. 상위 컴포넌트가 하위 컴포넌트에 정보를 전송합니다: React의 데이터 흐름은 단방향이므로 상위 컴포넌트가 호출할 때 매개변수는 하위 구성요소 태그에 전달되고, 하위 구성요소는 props 속성 
    2를 통해 수신합니다. 하위 구성요소는 상위 구성요소에 정보를 전송하고, 상위 구성요소는 함수를 전달합니다. 3. Brothers 구성 요소 간 전송 
    : 상위 구성 요소는 상위 구성 요소를 사용하여 데이터 상호 통신을 달성하기 위한 중간 계층 역할을 합니다. 전송 
    4, 상위 구성요소는 하위 구성요소에 값을 전송합니다. 컨텍스트에서 제공하는 구성요소 통신 방식을 사용하여 데이터 공유가 실현될 수 있습니다. 공급자 구성요소는 값 속성을 하위 구성요소에 전달합니다. 5. 비관계형 구성요소는 데이터를 전달합니다 
    . : 
redux

7. 제어되는 구성 요소와 비제어 구성 요소에 대한 귀하의 이해에 대해 알려주십시오. 응용 시나리오?

1. 제어되는 구성 요소: React에서 변경 가능한 상태는 일반적으로 구성 요소의 상태 속성에 저장되며 setState()를 통해서만 업데이트할 수 있습니다. 반면 양식을 렌더링하는 React 구성 요소는 후속 사용자 입력 시 해당 양식에서 발생하는 상황도 제어합니다. React에 의해 제어되는 입력 양식 요소가 값을 변경하는 것을 제어되는 구성요소라고 합니다. 간단히 말하면, setState의 제어권을 받고 컴포넌트의 상태는 프로세스 전반에 걸쳐 외부 데이터에 응답합니다.2. 
제어되지 않는 컴포넌트: 폼 데이터는 DOM 자체에서 처리됩니다. 즉, 전통적인 HTML 폼 입력과 유사하게 setState()에 의해 제어되지 않으며 입력 입력 값은 최신 값을 표시하며(DOM에서 폼 값을 얻으려면 ref를 사용) setState에 의해 제어되지 않습니다. 초기화 중 외부 데이터를 생성한 다음 자체 상태를 내부에 저장합니다. 
애플리케이션 시나리오: 
    1. 제어되는 구성 요소: 필수 입력 형식, 하나의 데이터에 대한 다중 입력, 동적 입력, 제출 시 확인 문제 
    2. 제어되지 않는 구성 요소: 일회성 값(제출), 유효성 검사 제출 시

8. Connect 컴포넌트의 원리를 알려주세요.

1. Connect는 redux를 연결하고 반응하고, 이를 컨테이너 구성 요소의 외부 레이어에 래핑하고, 위의 공급자가 제공한 저장소에서 상태 및 디스패치를 수신하고, 이를 생성자에 전달하고, 객체를 반환하고, 컨테이너 구성 요소에 전달합니다. 2. Connect는 상위 수준 함수로 
, 먼저 mapStateToProps, mapDispatchToProps를 전달한 다음 Component 함수를 반환한 다음 실제 Component를 매개 변수로 전달하여 새 구성 요소를 반환합니다.

9. React에서 jsx 구문 설탕의 본질에 대해 이야기해 보세요.

1. Jsx의 본질은 React.createElement 함수의 문법적 설탕입니다. 모든 jsx 구문은 결국 babel.js를 통해 React.createElement로 변환됩니다. 2. 
세 가지 매개변수: type은 현재 요소 유형을 참조하고 config는 jsx 속성입니다. 객체 속성과 값의 형태로 저장되며, 자식은 태그에 저장되는 내용이다. 
3. JSX 작성 방법: Babel을 도입하고 스크립트 태그의 타입을 text/bable로 설정해야 한다. Babel: jsx를 React로 변환한다. .createElement() 함수 호출

10. Redux 미들웨어에 대해 어떻게 이해하고 계시나요? 일반적으로 사용되는 미들웨어는 무엇입니까? 구현 원칙?


1. Redux 미들웨어는 응용 시스템과 시스템 소프트웨어 사이의 소프트웨어 유형으로, 시스템 소프트웨어가 제공하는 기본 서비스를 사용하여 응용 시스템의 여러 부분 또는 네트워크의 다른 응용 프로그램을 연결하여 리소스 공유 및 기능 공유를 달성합니다. 일반적으로 사용되는 미들웨어 : 비동기 작업에는 redux-thunk, 로그 기록에는 redux-logger 사용 
구현
원리 : 모든 미들웨어는 배열로 중첩되어 실행되며, 전달된 데이터 타입을 판단하여 최종적으로 store가 실행됨 .dispatch , 미들웨어 내부의 미들웨어 API는 getstate 및 dispatch 메소드를 얻을 수 있습니다.

11. AMD, CMD, commonJS 모듈러 사양의 차이점에 대해 알려주세요.

1. AMD: 본 사양은 비동기 로딩 모듈로 모든 종속성을 먼저 정의한 후 로딩이 완료된 후 콜백 함수에서 require(['xxx'], function(){})을 실행합니다. 2. CMD: 원리 의존성 근접성 
작성 시 function(require,exports,module){require('xxx')} 사용 
3. commonJS: require('xxx')를 사용하여 모듈 로드 
차이점: 
    1. AMD와 CMD의 가장 큰 차이점 은 종속 모듈의 실행 타이밍입니다. 처리가 다릅니다. 둘 다 비동기 로딩 모듈입니다. 
    2, AMD는 전면에 의존하고, js는 종속 모듈이 누구인지 쉽게 알 수 있으므로 즉시 로드하고, CMD는 가장 가까운 모듈에 의존하므로 모듈을 변경해야 합니다. 문자열 분석 
    3, commonJS는 모든 코드 실행 모듈 범위에서 전역 범위를 오염시키지 않습니다. 모듈 로딩은 동기식입니다. 로딩이 완료된 후에만 다음 작업을 수행할 수 있습니다. requeire 값은 a입니다. 출력 값의 복사본 및 모듈 내용의 변경은 이 값에 영향을 미치지 않습니다.

12. package.json의 버전 번호 규칙에 대해 알려주십시오.

^: 0이 아닌 숫자를 왼쪽으로 변경하지 않는 업데이트만 수행합니다 
~: ~0.13.0이 기록된 경우 npm 업데이트가 실행되면 패치 버전으로 업데이트됩니다. 
>: 해당 버전보다 높은 버전을 받습니다. 지정된 버전 
>= : 지정된 버전과 같거나 그보다 높은 모든 버전을 허용합니다. 
<=: 지정된 버전보다 같거나 낮은 버전을 허용합니다. 
<: 지정된 버전보다 낮은 모든 버전을 허용합니다 
. =: 정확한 버전을 받습니다 
. -: 허용합니다. 버전 범위 
||: 결합된 컬렉션 
서명되지 않음: 지정된 특정 버전 수신 
최신: 사용 가능한 가장 높은 버전 사용

13. React jsx를 실제 DOM으로 변환하는 과정을 알려주세요.

1. React.createElement 또는 jsx를 사용하여 React 컴포넌트를 작성합니다. 실제로 모든 jsx 코드는 React.ccreateElement(...)로 변환되며 babel은 변환 프로세스를 완료하는 데 도움이 됩니다. 2. createElement 함수는 특수용입니다 
. key 및 ref와 같은 props를 처리하고 defaultProps를 가져와 기본 props를 할당하고 들어오는 하위 노드를 처리하고 마지막으로 가상 DOM 객체를 형성합니다. 3. 
ReactDOM.render는 생성된 가상 DOM을 지정된 컨테이너에 렌더링하며 일괄 처리를 사용합니다. 트랜잭션 및 기타 메커니즘은 특정 브라우저에 최적화되어 최종적으로 실제 DOM으로 변환됩니다.

14. @reduxjs/toolkit에 대해 어떻게 이해하고 계시나요? React-Redux와의 차이점은 무엇입니까?

1. React-redux는 React 구성 요소가 redux 저장소에서 데이터를 읽고 작업을 저장소로 전달하여 상태를 업데이트할 수 있도록 하는 공식 React UI 바인딩 레이어입니다. React와 Redux를 연결할 수 있도록 connect, Provider 등의 API가 제공되며, 구현된 로직은 더욱 엄격하고 효율적이 될 것입니다. 2. 
@reduxjs/tookit은 Redux의 보조 패키지입니다. 스토어 생성과 스토어 업데이트의 차이점 
    : 
    1 . Reduxjs/tookit은 React-redux보다 편리합니다. redux-devtools-extension을 통합하여 추가 구성이 필요하지 않아 매우 편리합니다. 2. 
    Reduxjs/tookit은 immutable-js 기능을 통합하므로 설치, 구성이 필요하지 않습니다. 
    3. reduxjs/tookit은 redux-thunk의 기능을 통합합니다. 4. 
    reduxjs/tookit은 유형, 작업 및 감소기를 함께 사용하여 새로운 슬라이스를 형성하므로 사용이 단순화됩니다.

15. React 렌더 메소드의 원리, 언제 실행되나요?

React에서 Render 함수는 두 가지 형태가 있는데, 클래스 컴포넌트에서는 render 메소드를 참조하고, 함수 컴포넌트에서는 함수 컴포넌트 자체를 참조하며, render에서는 jsx를 작성하고, jsx는 익숙한 js로 변환합니다. 형식에 따라 렌더링 프로세스 중에 React는 새로 호출된 render 함수에 의해 반환된 트리를 이전 버전의 트리와 비교하고 DOM을 업데이트하는 방법을 결정한 다음 diff 비교를 수행하여 DOM 트리를 업데이트합니다. 트리거 타이밍: 1. 클래스 컴포넌트가 setState를 호출하여 
        상태를 수정하는 
    경우 
        2. 함수 컴포넌트가 useState Hook을 통해 상태를 수정하는 경우 
        3. 클래스 컴포넌트가 다시 렌더링되는 경우 
4.
        함수 컴포넌트가 다시 렌더링되는 경우

16. React 성능 최적화의 수단은 무엇입니까?

1. shouldComponentUpdate를 통해: state와 props를 비교하여 다시 렌더링할지 여부를 결정하고, 기본적으로 true를 반환하며, 렌더링이 false를 반환하지 않도록 2. PureComponent: 
state와 props의 비교 결과를 비교하여 구현 
3. React.memo: 불필요한 업데이트를 피하기 위해 구성 요소 렌더링을 캐시합니다(함수 구성 요소에만 해당) 
4. 인라인 함수 사용을 피하세요. 렌더링이 호출될 때마다 새 함수가 다시 렌더링되고 구성 요소 내부에 함수가 생성되며 이벤트가 발생합니다. 함수 자체에 바인딩 
5. 추가 마크업을 피하기 위해 React Fragments 사용 
6. Immutable 사용: 렌더링 수 줄이기 
7. 지연 로딩 구성 요소: 서스펜스 및 지연 구성 요소를 사용하여 코드 분할 기능 달성 
8. 이벤트 바인딩 방법 
9. 서버- 사이드 렌더링

17. 네이티브 js를 통해 조절 기능과 흔들림 방지 기능을 구현하는 방법은 무엇입니까?

1. 함수 조절: 자주 트리거되지만 특정 시간 내에 한 번만 코드를 실행합니다. 
2. 함수 흔들림 방지: 자주 트리거되지만 특정 시간 내에 실행 조건이 트리거되지 않을 때 코드를 한 번만 실행합니다. 
3. 차이점: 둘 다 차이점은 기능 제한은 1초마다 요청을 보내는 등 고정된 시간에 특정 작업을 수행하는 것입니다. 손떨림 방지 기능은 자주 트리거된 후 한 번만 실행됩니다 
.(두 가지 모두 빈번한 트리거가 전제임) 스크롤 막대의 위치를 얻은 후 다음 작업을 수행하려는 경우 
5. 손떨림 방지 응용 시나리오: 입력 상자 검색 자동 완성 이벤트, 잦은 작업 좋아요 및 좋아요 취소 등. 이러한 응용 시나리오는 기능 조절을 통해 실현할 수도 있으며 자주 좋아요 작업 및 좋아요 취소를 수행하므로 마지막 작업 결과를 가져와 서버에 전송해야 합니다.

18. Koa의 양파 모델에 대해 어떻게 이해하고 계시나요?

1. Koa에서는 next() 메소드에 의해 미들웨어가 두 부분으로 나뉘는데, next 메소드의 상단 부분이 먼저 실행되고, 이후 미들웨어 실행이 모두 완료된 후 하단 부분이 실행됩니다. 양파 모델에서 각 계층은 
A 미들웨어와 동일하며 오류 처리, 세션 처리 등과 같은 특정 기능을 처리하는 데 사용됩니다. 처리 순서는 먼저 next() 요청, 다음으로 next() 함수 실행, 마지막으로 next() 응답, 즉 각 미들웨어에는 두 가지 처리 기회가 있습니다. 
3. 양파 모델의 핵심 원리는 componse 메소드를 사용하는 것입니다.

19. webpack을 사용하여 프런트엔드 성능을 최적화하는 방법에 대해 이야기해 주세요.

1. 코드 압축: 중복된 코드, 주석 삭제, 코드 작성 단순화 등 webpack의 UglifyJsPlugin 및 ParallelUglifyPlugin을 사용하여 JS 파일 
2를 압축하고, cssnano(css-loader?minimize)를 사용하여 CSS 
3을 압축하고, CDN을 사용하여 가속화할 수 있습니다. 구성 프로세스 중에 참조된 정적 리소스 경로를 해당 경로의 CDN으로 수정합니다. 출력 매개변수에 webpack을 사용하고 각 로더의 publicPath 매개변수를 사용하여 리소스 경로를 수정할 수 있습니다. 
4. Tree Shaking: 코드에서 절대 접근하지 않을 조각을 삭제합니다. webpack을 시작할 때 
--optimize-minimize 매개변수를 추가하면 가능합니다. 
5. 코드 분할: 코드를 경로 차원이나 구성 요소에 따라 청크로 나누어 필요할 때 로드할 수 있고 브라우저를 최대한 활용할 수 있습니다. 캐시 
6. 공개 타사 라이브러리 추출: 공개 모듈 추출을 위한 SplitChunksPlugin 플러그인, 
7. 브라우저 캐시를 사용하여 오랫동안 자주 변경할 필요가 없는 공개 코드를 캐시합니다.

20. webSocket에 대해 어떻게 이해하고 계시나요?

1. 이해: webSocket은 OSI 모델의 애플리케이션 계층에 있는 네트워크 전송 프로토콜로, 단일 TCP 연결에서 이중 통신을 수행할 수 있어 서버 리소스와 대역폭을 더 잘 절약하고 실시간 통신을 달성할 수 있습니다. 클라이언트와 서버는 핸드셰이크만 완료하면 둘 사이에 지속적인 연결이 생성될 수 있으며 양방향 데이터 전송이 수행될 수 있습니다. 2. 특징 
: 
    1. 전이중(통신을 통해 데이터를 2. 
    바이너리 프레임(바이너리 프레임 구조를 사용하여 구문과 의미가 HTTP와 완전히 호환되지 않으며 실시간 통신에 더 중점을 둡니다.) 3. 
    프로토콜 이름(ws 및 wss는 웹소켓 프로토콜을 나타 내기 위해 도입되었습니다) 일반 텍스트와 암호문이 각각 있으며 기본 포트는 80 또는 443 으로 http와 거의 동일합니다 
    .

21. 바인딩, 호출, 적용의 차이점은 무엇입니까? 바인드를 구현하는 방법은 무엇입니까?

Call, Bind, Apply 모두 함수가 실행될 때 this 지점을 변경합니다. 차이점 
    : 
    1. apply는 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 this 지점이고 두 번째 매개변수는 함수가 전달한 매개변수입니다. 배열로 
    2. Call 메소드의 첫 번째 매개변수도 this로 가리키고 매개변수 목록은 나중에 전달됩니다. 
    3. Bind 메소드는 call과 유사합니다. 첫 번째 매개변수도 this로 가리키고, 매개변수 목록은 나중에 전달됩니다(이 목록은 여러 개의 두 번째 전달로 나눌 수 있음). 바인딩은 
this 를 바인딩한 후 
호출 
    개체가 함수인지 확인 
    If(typeof this != = 'function'){throw new TypeError("error")} 
    매개변수 가져오기 
    Const args = [...arguments].slice(1) 
    Fn = this 
    반환 함수 Fn (){ 
호출 메서드에 따라 다른 바인딩을 전달합니다. 값 
    반환 fn.apply(이 Fn 인스턴스 ? new fn(...arguments):context,args.concat(...arguments)) 
} 
}

22. 흔들림 방지 및 스로틀링이란 무엇입니까? 차이점이 뭐야? 달성하는 방법?

Throttling: n초 이내에 한 번만 허용 n초 이내에 반복적으로 발생하면 한 번만 적용 
Anti-shake: n초 후에 이벤트가 실행 n초 이내에 반복적으로 발생하면 이벤트 발생 차이점 
: 
    1. 함수 안티- 일정 기간 동안 연속 작업이 수행된 후, callback은 clearTimeout 및 setTimeout을 사용하여 처리됩니다. 함수 조절은 연속 작업 기간 동안 각 이벤트가 한 번만 실행되며, 성능 향상을 위해 고주파 이벤트에 사용됩니다. 2. 흔들림 방지 기능 
    일정 시간 동안 연속 트리거되는 시간에 주의하여 마지막에 한 번만 실행하고, 스로틀링 기능은 1회에 한 번만 실행합니다. 기간

23. 리플로우와 리드로를 어떻게 이해하나요? 어떤 상황에서 발동되나요?

Reflow: 레이아웃 엔진은 다양한 스타일에 따라 페이지에 있는 각 상자의 위치와 크기를 계산합니다. 
Redraw: 상자 모델의 위치, 크기 및 기타 속성을 계산한 후 브라우저는 각 상자의 특성에 따라 트리거 
타이밍을 다시 그립니다. box : 
    리플로우: 표시되는 DOM 요소를 추가하거나 삭제합니다. 요소의 위치가 변경되고 요소의 크기가 변경되며 텍스트 변경이나 그림이 바뀌는 등 콘텐츠가 변경됩니다. 페이지가 렌더링되기 시작하면 브라우저 창 크기가 변경되고 redraws 
    : 리플로우가 트리거될 때 다시 그리기가 트리거되어야 하며, 그 외에도 색상 변경, 텍스트 방향 변경, 그림자 변경 등이 있습니다.

24. VUE 라우팅의 원리는 무엇입니까?

라우팅은 해시 모드(Hash Mode)와 히스토리 모드(History Mode) 두 가지 모드로 구분되며, 
원리: 
    해시(Hash): url에 포함된 해시 값은 클라이언트의 상태로, 서버에 요청을 보낼 때 해시 부분은 전송되지 않으며, 해시가 브라우저에 표시됩니다.브라우저의 접근 기록에 기록을 추가하면 브라우저의 뒤로 및 앞으로 버튼을 통해 해시 전환을 제어할 수 있고, 해시 값을 변경하여 페이지를 이동할 수 있습니다. 히스토리 모드에서는 프런트엔드 
    URL이 실제와 동일해야 백엔드에 요청을 시작하는 URL이 일관되며, pushState와 replacementState 두 API를 사용하여 해당 URL의 변경을 연산하고 실현할 수 있습니다. 페이지를 새로 고치지 않고 브라우저 기록을 확인하거나 popstate를 사용하여 URL 변경을 모니터링하여 페이지 점프 기능을 구현합니다.

25. vue의 diff 알고리즘을 아시나요? 말해 주세요?

Diff 알고리즘은 동일한 레벨의 트리 노드를 비교하는 효율적인 알고리즘으로 동일한 레벨에서만 비교가 이루어지며, 변경 사항은 레벨 간에 비교되며, diff 비교 과정에서 루프가 양쪽에서 이동한다는 두 가지 특징을 가지고 있습니다. 비교 원리 
: 
    1. 데이터가 변경되면 set 메소드는 Dep.notify를 호출하여 모든 구독자 감시자에게 알리고 구독자는 patch를 호출하여 실제 DOM을 패치하고 해당 뷰를 업데이트합니다. 2. 모든 diff 
    는 updateChildren 메서드를 호출하여 비교한 다음 이전 Vnode와 새 Vnode의 모든 하위 노드가 비교될 때까지 계층별로 반복적으로 내려갑니다. domDiff의 프로세스는 두 트리의 비교에 더 가깝습니다. 동일한 노드가 발견될 때마다 해당 하위 노드를 레이어별로 비교하는 심층 재귀 순회 비교 프로세스입니다.

26. 연결 유지에 대한 귀하의 이해에 대해 알려주십시오.

1. Keep-alive는 vue에 내장된 컴포넌트로, 컴포넌트 캐시라고 불리는 DOM의 반복 렌더링을 방지하기 위해 컴포넌트 전환 중에 메모리에 상태를 유지할 수 있습니다. 2. Keep-alive가 동적 컴포넌트를 래핑할 때 
, 활성 구성 요소 인스턴스를 파기하는 대신 캐시되지 않습니다. 
3. Keep-alive는 props 속성을 설정할 수 있습니다: 이름이 일치할 때만 캐시되는 문자열 또는 정규 표현식을 포함합니다. 
4. 제외: 문자열 또는 정규 표현식, 모든 이름 일치하는 구성 요소는 캐시되지 않습니다. 최대 개수, 최대 캐시할 수 있는 구성 요소 인스턴스 수

27. 반응형 디자인이란 무엇입니까? 반응형 디자인의 기본 원칙은 무엇입니까? 수행하는 방법?

    반응형 웹사이트 디자인: 일종의 네트워크 페이지 디자인 레이아웃으로, 페이지 디자인 및 개발은 사용자 행동 및 장비 환경(시스템 플랫폼, 화면 크기, 화면 방향 등)에 따라 적절하게 반응하고 조정되어야 합니다. 반응형 디자인: 
    예 처리를 위한 미디어 쿼리를 통해 다양한 장치 화면 크기를 감지합니다. 모바일 단말기를 처리하려면 페이지 헤더에 메타문 뷰포트가 있어야 합니다. 
구현 방법: 
    1. 미디어 쿼리: 다양한 유형의 미디어 조건을 설정하고 해당 조건을 제공합니다. 해당 조건에 따른 미디어콜에 해당하는 스타일시트 
    2. 백분율 : 브라우저의 너비나 높이가 변경될 때, 브라우저의 변경에 따라 브라우저 내 구성요소의 너비와 높이가 백분율 단위를 통해 변경될 수 있음 , 반응성을 달성하기 위해 공식 
    3의 효과. vw/vh: vw는 보기 창에 상대적인 너비를 나타내고, vh는 보기 창에 상대적인 높이를 나타냅니다. 모든 수준의 요소에 대해 vw 단위의 경우 1vw는 보기 너비의 1%와 같습니다. 
    4. rem: rem은 루트 요소 html에 상대적인 글꼴 크기 속성입니다. 기본적으로 브라우저의 글꼴 크기는 16px입니다. 1rem = 16px인 경우

28. 크로스 도메인 문제를 해결하는 방법은 무엇입니까?

브라우저의 동일 출처 정책 제한으로 인해 발생하는 도메인 간 문제로 인해 브라우저가 한 도메인 이름의 웹 페이지에서 다른 도메인 이름의 리소스를 요청할 때 도메인 이름, 포트 또는 프로토콜의 차이가 교차됩니다. -도메인 해결 방법: 1. jsonp 교차 
- 
    도메인 도메인 
    2, Nginx 역방향 프록시 
    3, Php 끝 수정 헤더 
    4, Document.domain은 서로 다른 창 간의 상호 액세스 및 작업을 실현합니다 
    5, Cors는 교차 도메인을 해결합니다 
    . 6, Window.name은 서로 다른 도메인 간의 데이터 전송을 달성하기 위한 브라우저의 특성

29. 웹팩 패키징 속도를 최적화하는 방법은 무엇입니까?

1. 템플릿에서 로더 사용을 최대한 줄이고, 로더의 빈번한 실행 빈도를 줄입니다. 
2. 개발 기술의 반복을 따라갑니다: node, Yarn, npm, webpack은 가장 안정적인 최신 버전을 유지합니다. 3. 
플러그인은 최대한 적고 안정적이어야 하며 성능을 선택해야 합니다 뭐 공식 추천 플러그인 
4. Resolve 매개변수의 합리적인 구성 
5. DllPlugin을 사용하여 webpack 패키징 속도 높이기 
6. 패키지 파일 크기 조절 
7. 스레드 로더, 병렬 웹팩, happypack 다중 프로세스 패키징

30. SPA 첫 화면의 느린 로딩 속도를 해결하는 방법은 무엇입니까?

첫 화면 로딩: 사용자가 입력한 URL에 대해 브라우저가 응답한 시점부터 첫 화면 콘텐츠가 렌더링되는 시간으로, 이때 웹페이지 전체가 반드시 완전히 렌더링될 필요는 없으나, 웹페이지 전체가 렌더링될 필요는 없습니다. 1. 엔트리 파일의 크기를 줄입니다 
    :, 서로 다른 경로에 해당하는 구성 요소를 서로 다른 코드 블록으로 나누고 경로를 요청하면 해당 경로를 별도로 패키징하여 엔트리 파일이 됩니다. 
    작업자 오프라인 캐싱, 로컬 스토리지의 합리적인 사용 3 
    , 요청 시 UI 프레임워크 로딩 
    4, 구성 요소 반복 패키징 
    5, 이미지 리소스 압축 
    6, GZip 압축 활성화 
    7, SSR 사용: 서버 측 렌더링 , 구성 요소 또는 페이지는 서버를 통해 HTML 문자열을 생성하고 다시 브라우저로 보냅니다.

31. 리액트 라우터에는 몇 가지 모드가 있나요? 구현 원칙?

두 가지 모드: 해시 모드 및 히스토리 모드 
    해시 원리: 해시 값이 변경되면 전역 창 개체의 hashchange 이벤트가 트리거됩니다. 따라서 해시 모드 라우팅은 hashchange 이벤트를 사용하여 URL 변경을 모니터링하고 DOM 작업을 수행하여 페이지 점프 
    기록 원리를 시뮬레이션하는 것입니다. HTML5 기록 인터페이스에서 새로운 pushState() 및 replacementState() 메서드를 사용합니다.

32. 브라우저 주소창에 url을 입력하고 페이지를 표시하기까지의 과정은 어떻게 되나요?

1. 브라우저는 요청된 URL을 DNS 도메인 이름 분석에 제출하고 실제 IP를 찾아 서버에 요청을 시작합니다. 
2. 서버는 백그라운드 처리가 완료된 후 데이터를 반환하고 브라우저는 파일(HTML)을 수신합니다. , JS, CSS, 이미지 등) 
3. 브라우저는 로드된 리소스(HTML, JS, CSS 등)를 구문 분석하고 해당 내부 데이터 구조(예: HTML DOM)를 설정합니다. 4. 구문 분석된 리소스 
파일을 로드합니다. 페이지를 렌더링하고 완료합니다.

33. JavaScript의 데이터 유형에 대해 알려주십시오. 저장공간 차이?

기본 유형: 숫자, 문자열, 부울, 정의되지 않음, null, 기호 
복합 유형: 객체, 배열, 함수 
저장 차이점: 
    1. 다양한 위치: 기본 데이터 유형은 스택에 저장되고 참조 유형은 힙에 저장됩니다. 
    2. 선언 변수에 대한 메모리 주소 할당: 해당 값은 단순 유형의 값 스택에 저장되고, 힙을 가리키는 메모리 주소는 참조 데이터 유형 3의 스택에 저장됩니다. 단순 기본 유형의 할당은 동일한 값을 생성합니다. 두 개체는 
    서로 다른 주소에 해당하고 복합 유형 할당은 저장된 개체의 메모리 주소를 다른 변수에 할당하고 두 변수는 힙 메모리의 동일한 개체를 가리킵니다.

34. React Hooks에 대해 어떻게 이해하고 계시나요? 어떤 문제가 해결되었나요?

Hooks는 React 16.8의 새로운 기능입니다. 
문제 해결을 위해 클래스를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수 있습니다 . 
    1. 컴포넌트에서 상태 관련 로직을 재사용하고 공유하기가 어렵습니다. 
    2. 비즈니스 변화로 인해 함수 컴포넌트를 클래스 컴포넌트로 변경해야 합니다. 
    3. 복잡한 로직을 가진 컴포넌트는 개발 및 유지 관리가 어렵다 컴포넌트가 관련 없는 여러 로컬 상태를 처리해야 하는 경우 각 라이프사이클 기능에는 관련 없는 다양한 로직이 포함될 수 있음 4. 클래스 컴포넌트는 기존 도구를 기반으로 최적화됨 일부 기존 문제 
    5. 
    출현 후크의 기능은 함수 구성 요소의 기능을 확장했으며 클래스 구성 요소와 유사한 기능을 가지고 있습니다. 일상적으로 사용하는 경우 후크를 사용하면 대부분의 문제를 해결할 수 있으며 코드 재사용 메커니즘도 있으므로 후크 우선 순위 지정

35. 약속에 대한 당신의 이해에 대해 말해주십시오.

1. Promise는 커뮤니티에서 제안하고 구현한 비동기 프로그래밍에 대한 최초의 솔루션으로, 다른 기존 솔루션(콜백 함수 및 이벤트)보다 더 합리적이고 강력합니다.
2. 비동기 처리 콜백 피라미드 문제를 해결하기 위해 Promise를 생성합니다.
3. Promise 객체의 상태는 외부 세계의 영향을 받지 않습니다. Promise의 상태가 한 번 변경되면 다시 변경되지 않습니다. 이 결과는 언제라도 얻을 수 있습니다. 상태는 되돌릴 수 없으며 보류에서 이행으로 또는 보류에서 거부로만 변경될 수 있습니다.
4. Promise 생성자는 함수를 매개변수로 받아들이고 함수의 두 매개변수는 확인과 거부입니다. 이는 JavaScript 엔진에서 제공하는 두 가지 기능이므로 직접 배포할 필요가 없습니다. 해결 함수의 역할은 Promise 객체의 상태를 "미완성"에서 "성공"으로 변경하고(즉, 보류에서 해결로) 비동기 작업이 성공하면 이를 호출하고 비동기 작업의 결과를 전달하는 것입니다. 매개변수로 거부 함수의 기능은 Promise 객체의 상태를 "미완성"에서 "실패"로 변경하고(즉, 보류에서 거부로) 비동기 작업이 실패할 때 이를 호출하고 보고된 오류를 전달하는 것입니다. 비동기 작업을 매개변수로 사용합니다.
5. Promise 인스턴스가 생성된 후 then 메소드를 사용하여 해결된 상태와 거부된 상태의 콜백 함수를 각각 지정할 수 있습니다.

36. webpack의 공통 Loader에 대해 알려주세요. 어떤 문제가 해결되었나요?

1. 로더는 모듈의 소스 코드를 변환하고 모듈을 가져오거나 로드할 때 파일을 전처리하는 데 사용됩니다. 
2. 스타일-로더: DOM의 인라인 스타일 태그 스타일에 CSS를 추가합니다. 
3. Caa-로더: CSS 파일을 전달합니다. Introduce by require 및 return CSS 코드 
4, Less-loader: 프로세스 less 
5, Sass-loader: 프로세스 sass 
6, Postcss-loader: postcss를 처리하여 CSS 
7, File-loader: 파일을 출력 디렉터리에 배포하고 상대 경로를 반환합니다. 
8, Html-minify-loader: HTML 압축

37. React 성능 최적화의 수단은 무엇입니까?

1. shouldComponentUpdate를 통해: state와 props를 비교하여 다시 렌더링할지 여부를 결정하고, 기본적으로 true를 반환하며, 렌더링이 false를 반환하지 않도록 2. PureComponent: 
state와 props의 비교 결과를 비교하여 구현 
3. React.memo: 불필요한 업데이트를 피하기 위해 구성 요소 렌더링을 캐시합니다(함수 구성 요소에만 해당) 
4. 인라인 함수 사용을 피하세요. 렌더링이 호출될 때마다 새 함수가 다시 렌더링되고 구성 요소 내부에 함수가 생성되며 이벤트가 발생합니다. 함수 자체에 바인딩 
5. 추가 마크업을 피하기 위해 React Fragments 사용 
6. Immutable 사용: 렌더링 수 줄이기 
7. 지연 로딩 구성 요소: 서스펜스 및 지연 구성 요소를 사용하여 코드 분할 기능 달성 
8. 이벤트 바인딩 방법 
9. 서버- 사이드 렌더링

38. React의 setState 실행 메커니즘에 대해 알려주세요.

    구성요소의 표시 형식은 데이터 상태와 외부 매개변수에 의해 결정되며 데이터 상태는 상태입니다. 값의 상태를 수정해야 할 경우 seState를 통해 변경하여 업데이트 기능을 달성합니다. 컴포넌트의 내부 데이터 SetState는 동기화와 업데이트 데이터로 나눌 수 있습니다 
    .비동기 업데이트, 컴포넌트 수명주기 또는 반응 합성 이벤트에서 setState는 비동기, setTimeout 또는 기본 DOM 이벤트에서 setState는 동기입니다.

39. Vue 구성 요소 간의 통신 방법은 무엇입니까?

이런 유형의 질문은 먼저 당신이 그것에 대해 더 많이 알고 있음을 보여주기 위해 분류되므로 끝내지 않거나 놓쳤습니다.면접관은 구성 요소 의사 소통의 네 가지 주요 범주 인 부모와 자식, 부모
와
자식에 관심이 없습니다. 이해
1. props 및 $emit 상위 구성 요소는 props를 통해 하위 구성 요소에 데이터를 전달하고, 하위 구성 요소는 $emit를 통해 상위 구성 요소에 데이터를 전달하여 이벤트를 트리거합니다. 2. $attrs
및 $listeners
3. 중앙 이벤트 버스 위의 두 가지 방법 버스 상위 및 하위 구성 요소 간의 데이터 전송을 다루지만 두 구성 요소가 상위-하위 구성 요소가 아닌 경우 어떻게 될까요? 이 경우 중앙 이벤트 버스 접근 방식을 사용할 수 있습니다. 새로운 Vue 이벤트 버스 객체를 생성한 다음,bus.$emit를 통해 이벤트를 트리거하고,bus.$on을 통해 트리거된 이벤트를 수신합니다.
4. 제공 및 주입 부모 컴포넌트에서는 공급자를 통해 변수를 제공하고, 자식 컴포넌트에서는 주입을 통해 변수를 주입합니다. 하위 구성 요소의 깊이에 관계없이 inject 가 호출되는 한
공급자의 데이터를 주입할 수 있습니다. 현재 상위 구성 요소의 prop 속성에서만 데이터를 가져오는 것으로 제한되는 대신, 상위 구성 요소의 수명 주기 내에 있는 한 하위 구성 요소는 이를 호출할 수 있습니다.
5. v-model: 상위 구성 요소가 v-model을 통해 하위 구성 요소에 값을 전달하면 자동으로 value의 prop 속성을 전달하고 this.$emit(를 통해 하위 구성 요소의 v-model 바인딩을 자동으로 수정합니다. 'input', val) 값
6을 설정합니다. $parent 및 $children은
vue에서 Key 값의 역할에 대해 이야기합니다. vue
7
의 가상 dom 및 diff 알고리즘에 대해 이야기합니다. boradcast 및 디스패치
8. Vuex는 구성 요소 간의 데이터 상호 작용을 처리합니다. 비즈니스 로직이 복잡하고 많은 구성 요소가 동시에 일부 공통 데이터를 처리해야 하는 경우 위의 방법은 현재 프로젝트 유지 관리에 도움이 되지 않을 수 있습니다. vuex의 접근 방식은 다음과 같습니다. 이러한 공개 데이터 데이터가 추출되면 다른 구성 요소가 이 공개 데이터를 읽고 쓸 수 있어 분리 목적을 달성할 수 있습니다.

40. React 라이프사이클의 함정에 대해 알려주십시오. 그것을 피하는 방법?

1. getDerivedStateFromProps는 안티 패턴 코드를 작성하기 쉽기 때문에 제어되는 구성 요소와 제어되지 않는 구성 요소의 구분이 모호해집니다. 
2. 구성 요소WillMount는 React에서 더 이상 사용되지 않으며 권장되지 않습니다. 주된 이유는 새로운 비동기 아키텍처로 인해 더 많은 호출이 사용되므로 네트워크 요청 및 이벤트 바인딩은 componentDidMount 3에 배치되어야 합니다. 
또한, componentWillReceiveProps는 더 이상 사용되지 않는 것으로 표시되고 주로 성능 문제로 인해 getDerivedStateFromProps로 대체됩니다. 
4. shouldComponentUpdate는 true 또는 false를 반환하여 새 렌더링을 트리거해야 하는지 여부를 결정합니다. 주로 성능 최적화에 사용됩니다. 
5. componentWillUpdate도 새로운 비동기 렌더링 메커니즘으로 인해 더 이상 사용되지 않는 것으로 표시되므로 권장되지 않습니다. 변환을 위해 원래 논리를 getSnapshotBeforeUpdate 및 componentDidUpdate와 결합할 수 있습니다. 
6. componentWillUnmount 함수에서 이벤트 바인딩 해제, 타이머 취소 및 기타 정리 작업을 잊어버린 경우 버그가 발생하기 쉽습니다. 오류 경계 처리가 추가되지 않은 경우 렌더링 시 예외가 발생하면 사용자에게 작동할 수 없는 흰색 화면이 표시되므로 반드시 추가하십시오.

41. 조정 단계에서 setState는 무엇을 합니까?

1. 코드에서 setState 함수를 호출한 후 React는 들어오는 매개변수 객체를 구성 요소의 현재 상태와 병합한 다음 소위 조정 프로세스(Reconciliation)를 시작합니다. 
2. 조정 프로세스 후 React는 상대적으로 효율적인 방식으로 새 상태에 따라 React 요소 트리를 구성하고 전체 UI 인터페이스를 다시 렌더링하기 시작합니다. 3. 
React가 요소 트리를 얻은 후 React는 자동으로 새 상태를 계산합니다. 4. 차이 
계산 알고리즘에서 React는 어느 위치가 변경되었는지, 어떻게 변경해야 하는지 상대적으로 정확하게 알 수 있으므로 보장됩니다. 모든 새로운 렌더링 대신 주문형 업데이트.

42. redux의 구현원리를 이야기하고, 핵심코드를 작성해 볼까요?

1. 애플리케이션의 상태를 상태에 넣고, 스토어에서 상태를 관리합니다. 
2. 리듀서의 역할은 새로운 상태를 반환하여 스토어의 해당 상태를 업데이트하는 것입니다. 
3. redux의 원칙에 따르면 UI 레이어의 모든 상태 변경은 액션에 의해 트리거되어야 합니다. 액션은 다음으로 전달됩니다. 새로운 상태는 저장소에 저장된 상태를 업데이트하여 상태 업데이트를 완료합니다. 
4. 구독은 저장소에 대한 리스너 함수를 구독하는 것이며 구독된 리스너 함수는 각 디스패치가 시작된 후 순차적으로 실행됩니다. 5. 
미들웨어 추가 가능 제출된 디스패치를 다시 작성

43. React 합성 이벤트의 원리는 무엇입니까?

    반응하는 이벤트는 모두 합성 이벤트입니다. 모든 dom 이벤트를 dom에 바인딩하는 대신 이벤트가 문서에 균일하게 바인딩됩니다. 트리거되면 이벤트가 문서에 버블링되어 합성 이벤트를 트리거합니다. 따라서 e.stopPropagation을 사용하여 중지할 수는 없지만 e.preventDefault를 사용하여 중지할 수 있습니다. 
    합성 이벤트: 모든 유형의 eventPlugins를 반복하고, 각 이벤트 유형에 해당하는 다양한 이벤트 풀을 생성하고, 비어 있으면 새 이벤트 풀을 생성하고, 이전 이벤트를 사용하고, 고유 키에 따라 지정된 콜백 함수를 가져오고, 콜백 함수로 반환합니다. 매개변수용.

44. 반응 요소에 $$type 속성이 있는 이유는 무엇입니까?

목적은 XSS 공격을 방지하는 것입니다. 
    Synbol은 직렬화할 수 없기 때문에 React는 $$typeof 속성이 있는지 여부를 통해 현재 요소 객체가 데이터베이스에서 나온 것인지 아니면 자체적으로 생성된 것인지 확인할 수 있습니다. $$typeof 속성이 없으면 반응은 요소 처리를 거부합니다.

45. Redux 미들웨어에 대해 어떻게 이해하고 계시나요? 일반적으로 사용되는 미들웨어는 무엇입니까? 구현 원칙?


Redux 미들웨어는 응용 시스템과 시스템 소프트웨어 사이의 소프트웨어 유형으로 시스템 소프트웨어 가     제공하는 기본 서비스를 사용하여 응용 시스템의 여러 부분이나 네트워크의 다른 응용 프로그램을 연결하여 리소스 공유 및 기능 공유를 달성합니다. : redux-thunk는 비동기 작업에 사용되며, redux-logger는 로그 기록에 사용됩니다. 
구현 원리: 모든 미들웨어는 중첩 실행을 위해 배열에 배치되고, 전달된 데이터 유형을 판단하고 최종적으로 store.dispatch를 실행합니다. 미들웨어 내부 미들웨어 API는 getstate 및 dispatch 메소드를 얻을 수 있습니다.

46. 이벤트 루프에 대해 어떻게 이해하고 계시나요?

JavaScript是一门单线程的语言，意味着同一时间内只能做一件事情，但是并不意味着单线程就是阻塞，而实现单线程非阻塞的方法就是事件循环
所有的任务都分为同步任务、异步任务。
    同步任务：立即执行的任务，同步任务一般会直接进入到主线程中执行
    异步任务：ajax网络请求、setTimeout定时器函数
    同步任务进⼊主线程，即主执⾏栈，异步任务进⼊任务队列，主线程内的任务执 ⾏完毕为空，会去任务队列读取对应的任务，推⼊主线程执⾏。那么上述过程的不断重复就称为事件循环。

47、前端跨域的解决方案？

1、  Jsonp跨域：利用script标签没有跨域限制，src属性发送带有callback参数的get请求，服务端接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从前端拿到数据
2、  跨域资源共享：允许浏览器向跨源服务器发出XMLhttpRequest请求，克服了ajax只能同源使用的限制
3、  Nginx代理跨域
4、  Node.js中间件代理跨域
5、  Localtion.hash+iframe跨域

48、数组常用方法及作用，至少15个？

1. Array.join(): 배열의 요소를 문자열로 결합합니다. 
2. Array.push(): 배열의 마지막 위치에 새 요소를 추가합니다 
. 3. Array.splice(): 첨자에 따라 array 배열의 임의의 위치에 요소를 추가하거나 삭제합니다 형식 매개변수 1은 배열의 첨자에 따라 요소 수를 추가하거나 삭제하는 것을 의미합니다. 
4. Array.slice(): 배열 첨자에 따라 새 배열을 잘라냅니다. 
5. Array.forEach(): 이 배열 메소드는 세 가지 형식 매개변수를 받습니다. 첫 번째 형식 매개변수는 배열의 각 항목입니다. 두 번째 매개변수는 배열에 있는 각 항목의 인덱스 첨자; 세 번째 매개변수는 배열 자체입니다. 
6. Array.map(): 루프, 새 배열을 저장할 메모리 공간을 할당하고 반환 
7. Array.filter(): 새 배열을 생성합니다. 새 배열의 요소는 필터 메서드로 확인한 다음 모든 요소의 조건을 충족하는 배열이며 원래 배열은 변경되지 않습니다. 
8. Array.reduce(): 함수를 누산기(accumulator)로 받아 배열의 각 값(왼쪽에서 오른쪽으로)이 감소(증가)되기 시작하여 최종적으로 값이 됩니다. 
9. Array.every(): 모든 배열 값이 테스트를 통과하는지 확인합니다. 
10. Array.some(): 일부 배열 값이 테스트를 통과하는지 확인합니다. 
11. Array.indexOf(): 배열에서 요소 값을 검색하고 해당 위치를 반환합니다. 
12. Array.find(): 테스트를 통과한 첫 번째 배열 테스트 함수 13번 요소의 값 
, Array.pop(): 배열 15에서 마지막 요소 제거  , Array.pop(): 배열 
14
, Array.unshift(): 처음에 배열에 새 요소를 추가하고 이전 요소를 역방향 이동합니다.

49. Vue의 믹스인에 대해 어떻게 이해하고 계시나요?

1. Mixin은 메소드 구현을 제공하는 객체 지향 프로그래밍 언어의 클래스입니다. 다른 클래스는 하위 클래스가 되지 않고도 mixin의 메소드에 액세스할 수 있습니다. 2. Vue의 Mixin은 Vue를 배포하는 매우 유연한 방법입니다 
. 컴포넌트 
3. 이는 본질적으로 데이터, 컴포넌트, 메소드, 생성 등과 같은 컴포넌트의 모든 기능 옵션을 포함할 수 있는 js 객체입니다. 4. 
공유 함수를 객체 형태로 mixins 옵션에 전달합니다. 구성 요소가 mixins 개체를 사용하면 mixins 개체의 모든 옵션이 구성 요소 자체의 옵션에 혼합됩니다.

50. for...in 루프와 for...of 루프의 차이점은 무엇입니까?

1. For in과 for of를 모두 탐색하는 데 사용할 수 있습니다. 
2. For in은 배열의 인덱스 인덱스를 탐색하고 for of는 배열의 요소 값을 탐색합니다. 
3. For in은 객체를 탐색하는 데 더 적합하며 물론 그럴 수도 있습니다. 그러나 몇 가지 문제가 있습니다. for of는 반복자 객체가 있는 숫자, 배열 객체, 문자열 및 기타 컬렉션을 탐색할 수 있습니다. 
4. for in은 프로토타입을 포함하여 배열의 열거 가능한 모든 속성을 탐색합니다. For of는 배열에 있는 요소만 탐색합니다. array, 프로토타입 특성 및 인덱스는 포함하지 않습니다. 
5. For in은 항상 객체의 키나 배열이나 문자열의 첨자를 가져오고, of는 객체의 값이나 배열이나 문자열의 값을 가져옵니다.

51. Js 데이터 유형을 판단하는 방법은 무엇입니까? 적어도 5명 이상 이름을 말합니까? 차이점이 뭐야?

1. Typeof 메소드: 참조된 객체의 유형에 관계없이 데이터 유형을 나타내는 문자열을 반환하고 Object를 반환합니다. 
2. Instanceof 메소드: 구성 유형에서 데이터 유형을 결정합니다. 
3. 생성자 메소드: 프로토타입 객체의 속성입니다. 생성자를 가리키는 
4. Object.prototype.toString 메서드: 개체 개체가 [Object 개체]를 반환하고, 다른 형식은 호출이 필요하며 호출에 적용됩니다. 
5. Jquery.type() 메서드

52. Object.defineProperty()에 대해 어떻게 이해하고 계시나요?

    1. Object.defineProperty() 메서드는 객체에 대한 새 속성을 직접 정의하거나 객체의 기존 속성을 수정하고 이 객체를 반환합니다. IE8은 호환되지 않습니다. 
    2. 객체에는 현재 두 가지 유형의 속성 디스크립터가 있습니다: 데이터 디스크립터와 액세스 디스크립터 
    3. 데이터 디스크립터는 값이 있는 속성으로, 기록되거나 작성되지 않을 수 있습니다. 액세스 디스크립터는 get에 의해 정의됩니다. 4. 데이터 디스크립터 
    값을 가지며 쓰기 가능하며, 액세스 디스크립터는 getter 및 setter 함수 묶음으로 설명하는 속성입니다. get 반환 값은 속성 값으로 사용되며 set 메소드는 유일한 매개 변수를 허용하고 매개 변수에 새로운 값을 할당합니다. 5. get 또는 set 메소드 
    를 사용할 때 writable 및 value 속성을 사용할 수 없으며 그 반대의 경우도 마찬가지입니다.

53. Vue의 사용자 정의 지침을 이해하기 위한 애플리케이션 시나리오는 무엇입니까?

1. 명령어 시스템은 기계어라고도 불리는 컴퓨터 하드웨어의 언어 체계이기도 하며 시스템 프로그래머가 보는 컴퓨터의 주요 속성이다 2. 사용자 정의 명령어도 컴포넌트, 바인드, 삽입, 업데이트 
, componentUpdated, unbind 
3, 시나리오: 양식 반복 제출 방지, 사진 지연 로딩, 원클릭 복사 기능

54. 자바스크립트 메모리 누수의 여러 상황에 대해 이야기해 주세요.

1. 예상치 못한 전역 변수 
2. 타이머 해제를 잊음 
3. 다중 참조, 다중 변수가 동일한 객체를 참조할 때 일부 참조가 지워지지 않음 
4. 클로저의 부당한 사용 
5. Console.log 인쇄 정보 메모리가 해제되지 않음

55. 대용량 파일 업로드를 재개하는 방법은 무엇입니까?


대용량 파일을 업로드할 경우 서버의 데이터 처리 능력, 요청 시간 초과, 네트워크 변동 등 의 변수가 사용자 경험에 영향을 미치므로 대용량 파일 업로드 에 대해서는 별도의 처리가 필요합니다. 전체 파일을 여러 데이터 블록으로 나누어 조각으로 업로드 업로드가 완료된 후 서버는 업로드된 파일을 원본 파일로 요약하고 통합합니다 2. 중단점 재개: break 클릭 재개는 다운로드 또는 업로드 작업을 여러 부분으로 나누는 것을 말합니다 
. 다시 다운로드 또는 업로드할 때 각 부분은 스레드를 사용하여 업로드 또는 다운로드하거나 다운로드한 부분이 완료되지 않은 부분을 계속 업로드 또는 다운로드하기 시작하므로 처음부터 업로드 및 다운로드를 시작할 필요가 없으므로 사용자는 시간을 절약할 수 있습니다. 그리고 속도를 높이세요. 
3. 중단점에서 업로드를 재개하는 방법에는 일반적으로 두 가지가 있습니다. 서버가 반환되어 시작할 위치를 알려주고, 브라우저가 스스로 처리합니다.

56. 네이티브 js는 풀업 로딩 및 풀다운 새로 고침을 어떻게 구현합니까?

풀업 로딩과 풀다운 새로 고침은 모두 사용자 상호 작용에 따라 다릅니다.
1. 풀업 로딩:
1. scrollTop: 스크롤 창의 높이는 창 상단으로부터의 거리이며 위로 스크롤할수록 증가합니다. 초기값은 0으로 변경값
2입니다. clientHeight: 고정된 값으로 화면의 보이는 영역의 높이를 나타냅니다.
3. scrollHeight: 페이지를 스크롤할 수 없는 경우에도 존재합니다. , scrollHeight는 clientHeight와 같습니다. 4. scrollHeight는 본문의 모든 요소(본문 요소 자체의 패딩 포함)의 총 길이를 나타내며
바닥 공식은 다음과 같습니다. scrollTop + clientHeight >= scrollHeight
2. 풀다운 새로 고침:
풀다운 새로 고침의 본질은 다음과 같습니다. 페이지 자체가 상단에 배치되면 사용자는 트리거된 동작을 아래로 당겨야 합니다.
1. 기본 touchstart 이벤트를 수신하고 초기 위치 값 e.touches[0].pageY를 기록합니다.
2. 기본 touchmove 이벤트를 수신합니다. , 현재 슬라이딩 위치 값과 초기 위치 값 사이의 차이를 기록하고 계산합니다. 0보다 큰 경우 풀다운을 의미하며 CSS3의translateY 속성을 사용하여 요소가 제스처를 따라 해당 차이를 아래로 슬라이드하도록 하고 설정합니다. 3. 원래의 touchend 이벤트를 듣고
이때 요소가 최대값으로 슬라이드되면 콜백이 트리거되고 동시에translateY가 0으로 재설정되고 요소가 초기 상태로 돌아갑니다. 위치

57. 장치 픽셀, CSS 픽셀, 장치 독립 픽셀, dpr 및 ppi의 차이점에 대해 알려주십시오.

1. 스케일링이 없는 경우 CSS 픽셀 1개는 장치 독립 픽셀 1개와 같습니다. 
2. 장치 픽셀은 화면에 생성된 후 변경되지 않지만 장치 독립 픽셀은 변경되는 가상 단위입니다. 
3. 켜기 PC 측, 1 장치 독립 픽셀 = 1 장치 픽셀(100%, unscaled) 
4. 모바일 단말기에서 1 장치 독립 픽셀 = 표준 화면(160ppi) 아래 1 장치 픽셀 
5. 장치 픽셀 비율(dpr) = 장치 픽셀/장치 독립적 픽셀 
6. 인치당 픽셀(ppi), 값이 클수록 이미지가 더 선명해집니다.

58. BFC에 대한 이해를 말해달라.

1. Bfc는 블록 수준의 포맷팅 컨텍스트로 페이지 내 렌더링 영역이며 고유한 렌더링 규칙 집합을 가지고 있습니다. 2. 
Bfc의 목적은 외부 세계와 완전히 독립된 공간을 형성하여 내부 하위가 -요소는 외부 요소에 영향을 미치지 않습니다 
3. Bfc는 페이지에서 격리되고 독립적인 컨테이너입니다.컨테이너 내부의 하위 요소는 외부 요소에 영향을 주지 않으며 그 반대의 경우도 마찬가지입니다.4. 
Bfc의 영역은 영역과 겹치지 않습니다. 부동 요소

59. TCP에 3방향 핸드셰이크와 4방향 핸드셰이크가 필요한 이유를 알려주십시오.

3방향 핸드셰이크는 신뢰할 수 있는 데이터 전송 채널을 설정하기 위한 것이고, 4방향 핸드셰이크는 데이터 수신 후 연결이 닫히도록 보장하는 것입니다. 
1. 3방향 핸드셰이크는 TCP 연결이 설정될 때 클라이언트와 서버가 총 3개의 패킷을 보내야 함을 의미합니다. 주요 기능은 양쪽 당사자의 수락 및 전송 기능이 정상적인지 확인하고 이를 지정하는 것입니다. 준비 
2. 4번 웨이브를 한다는 것은 TCP가 연결을 종료한다는 것을 의미하며, 이를 위해서는 4번의 핸드 웨이브가 필요합니다.서버가 클라이언트로부터 연결 끊김 메시지를 받으면 즉시 연결을 닫지 않고 연결을 종료합니다. 먼저 ACK 패킷을 보내 클라이언트에게 알립니다. 연결을 닫으라는 요청을 받은 후 서버에서 모든 메시지가 전송된 후에만 연결이 끊어집니다.

60. 프런트엔드 성능 최적화 방법은 무엇입니까?

1. 리소스 압축 및 병합, http 요청 감소 
2. 이미지 최적화, png를 사용하여 크기 감소 
3. 비핵심 코드는 비동기식으로 로드됩니다 
. 4. 브라우저 캐시를 사용하여 리소스 파일은 로컬에 저장되고 다음 호출은 다음 호출에서 직접 가져옵니다. 5. CDN 
을 사용하면 부하 분산 및 성능 향상 가능 
6. DNS 사전 분석 
7. Gzip 코드 압축 활성화 
8. 불필요한 쿠키 줄이기

61. 플로팅 프론트엔드를 클리어하는 방법은 적어도 3가지가 있나요?


1. 추가 라벨 방법: 지워야 하는 플로팅 요소 앞에 빈 div를 배치하고 이 빈 div에 대해clear 속성을 설정합니다. 둘 다 2. 상위 요소에 대한 오버플로 속성을 숨김 또는 자동으로 설정합니다. 3 
.: 의사 요소를 사용하여 모든 플로팅 라벨을 지운 후 -> 플로팅 라벨 앞에 블록 수준 요소를 추가합니다.

62. 강력한 캐싱과 협상 캐싱이란 무엇입니까?

브라우저가 처음으로 리소스를 요청한 후 다시 요청해야 할 때 브라우저는 먼저 리소스 캐시의 헤더 정보를 얻은 다음 Cache-Control에 따라 리소스가 로컬 캐시에서 만료되었는지 여부를 판단하고 만료됩니다. . 만료되지 않은 경우 리소스 정보를 로컬 캐시에서 직접 가져오고 브라우저는 더 이상 서버에서 리소스를 다시 요청하지 않습니다. 만료된 경우 요청을 다시 보내고 리소스를 다시 캐시해야 합니다. , 캐시 시간을 업데이트합니다. 
1. 강력한 캐싱은 리소스의 캐시 시간을 나타내는 데 사용되는 http 요청 헤더의 Expires 및 Cache-Control 필드에 의해 제어됩니다. Expires는 http1.0의 사양이며 그 값은 GMT 형식의 절대 시간 문자열입니다. 
2. 협상 캐시는 캐시 리소스가 사용 가능하고 만료되었는지 여부를 확인하기 위해 서버에서 사용됩니다. 서버는 캐시 리소스가 사용 가능한지 브라우저에 확인해야 하기 때문에 둘은 통신해야 하며 통신 프로세스는 요청을 보내는 것이므로 서버가 캐시 리소스를 사용할 수 있는지 확인할 수 있도록 헤더에 특수 식별자가 있어야 합니다. 요청된 리소스를 캐시하고 액세스할 수 있습니다.

63. 스택과 큐에 대한 당신의 이해에 대해 말해주십시오. 응용 시나리오?

1. 스택(Stack)이라고도 불리는 스택(Stack)은 연산이 제한된 선형 테이블로, 테이블 끝에서 삽입과 삭제 연산만 수행하는 선형 테이블에 국한된다 
. First in, Last Out, 가장 먼저 들어오는 데이터의 원리 스택의 맨 아래로 푸시되고 마지막 데이터가 스택의 맨 위에 놓이게 됩니다. 데이터를 읽어야 할 때 데이터는 스택에서 팝됩니다. 스택의 맨 위에 위치하며 메모리 기능을 가지고 있다. 3. 큐는 
스택과 매우 유사하다. 큐는 특수한 선형 테이블이다. 특징은 테이블의 앞부분에서만 삭제 작업이 허용된다는 점이다. ) 및 테이블의 백엔드(후면)에서 삽입 작업을 수행하며 
먼저 큐에서 삭제되므로 큐를 선입선출이라고도 합니다. 5. 
시나리오: 스택은 함수 호출 및 재귀 및 컴파일러가 입력 구문을 분석할 때 이진 트리를 탐색할 때 큐를 사용할 수 있습니다.

64. git rebase와 git merge에 대해 어떻게 이해하고 계시나요? 차이점?

1. 버전 관리를 위해 git을 사용하는 프로젝트에서 기능 개발이 완료되어 마스터 브랜치에 병합되면 git merge와 git rebase의 두 가지 방법이 있습니다. 2. git rebase와 git merge는 모두 동일한 효과를 갖습니다 
. 둘 다 한 브랜치를 다른 브랜치로 병합하지만 원칙은 다릅니다. 
3. git merge는 현재 브랜치를 지정된 브랜치에 병합합니다: git merge xxx; git rebase는 브랜치를 병합하거나 지정된 커밋에 병합합니다: git rebase -I < commit> 
4. 병합을 통해 브랜치를 병합하면 병합 커밋이 추가된 다음 두 브랜치의 기록이 연결되고, rebase는 전체 브랜치를 다른 브랜치로 이동하여 모든 브랜치를 효과적으로 통합합니다.

65. git에서 일반적으로 사용되는 명령이 무엇인지 알려주세요.

1. git status: 웨어하우스의 현재 상태와 변경 사항을 추적합니다. 
2. git diff Novel.txt: 수정된 콘텐츠 작업 보기 
3. git reflog: 버전 번호 보기 
4. git log: 제출 내역 
5. git 재설정 --hard 버전 번호: 해당 버전 번호로 셔틀 
6. git checkout --novel.txt: 작업 공간의 수정 사항을 취소할 수 있습니다. 
7. rm 파일 이름: 파일 삭제(아닌 파일) 8. git rm 파일 이름 : 저장소 
의 파일 삭제 
9, git Branch dev : dev 브랜치 생성 
10, git Branch -a : 브랜치와 현재 어떤 브랜치가 있는지 확인 
11, git checkout dev : dev 브랜치 
12로 전환하고 git merge dev: 현재 브랜치를 dev 브랜치와 병합하여 병합합니다.

66. Vue 컴포넌트 통신?

컴포넌트 통신은 특정 목적을 달성하기 위해 송신자가 특정 매체를 통해 특정 형식으로 수신자에게 정보를 전송하는 것을 의미합니다. 분류:
부모와 자식 컴포넌트 간 통신, 형제 컴포넌트 간 통신, 조부모와 자손 간의 통신, 비관계형 간 통신 구성 요소
vue에는 8가지 기존 통신 방식이 있습니다.
1. props 전달: 하위 구성 요소는 props 속성을 설정하고 수신 상위 구성 요소가 전달한 매개 변수를 정의하며 상위 구성 요소는 하위 구성 요소 태그를 사용하여 리터럴을 전달합니다. 2. 트리거 $emit를 통한 맞춤
이벤트: 하위 구성 요소는 $emit를 통해 맞춤 이벤트를 트리거하고, $emit의 두 번째 매개 변수는 전달된 값이며, 상위 구성 요소는 하위 구성 요소가 전달한 매개 변수를 가져오기 위해 리스너를 바인딩합니다. 3, 참조 사용
: 부모 컴포넌트는 자식 컴포넌트 사용 시 ref를 설정하고, 부모 컴포넌트는 자식 컴포넌트 ref를 설정하여 데이터를 획득합니다.
4. EventBus: 중앙 이벤트 버스 EventBus를 생성하고, 형제 컴포넌트는 $emit, $emit 두 번째를 통해 커스텀 이벤트를 트리거합니다. 매개변수는 전달된 값입니다.
또 다른 형제 구성요소는 $on 5, $parent 또는 $root를 통해 사용자 정의 이벤트를 수신합니다
. 공통 조상 $parent 또는 $root
6, attrs 및 리스너를 통해 통신 브리지 구축: 배치 다운 속성 $ attrs 및 상위 범위에서 소품으로 인식(및 선택)되지 않는 속성 바인딩( class 및 style 제외)이 포함된 $listeners. v-bind="$attrs" 를 통해 내부 컴포넌트를 전달할 수 있습니다.
7. Provide 및 Inject: 조상 컴포넌트에 Provide 속성을 정의하고, 전달된 값을 반환하고, 하위 컴포넌트에 inject 를 통해 컴포넌트가 전달한 값을 받습니다.
8 .Vuex: 이 함수는 공유 변수를 저장하는 컨테이너와 동일합니다.

67. vuex에 대한 당신의 이해에 대해 말해주십시오. 그 원리의 핵심 코드를 작성하시겠습니까?

Vuex는 Vue.js 애플리케이션을 위해 특별히 개발된 상태 관리 패턴 + 라이브러리입니다. 중앙 집중식 저장소를 사용하여 애플리케이션의 모든 구성 요소 상태를 관리하고 해당 규칙을 사용하여 상태가 예측 가능한 방식으로 변경되도록 합니다. 
vuex의 5가지 핵심 속성: state, getter, mutation, action, module 
    1, state: 데이터 저장, 상태 저장; 루트 인스턴스에 저장소를 등록한 후 this.$store.state를 사용하여 액세스합니다. vue의 데이터에 해당합니다. ; store 데이터 모드는 반응형이며 vue 구성 요소는 저장소에서 데이터를 읽습니다. 데이터가 변경되면 구성 요소가 그에 따라 업데이트됩니다. 
    2. Getter: 저장소의 계산된 속성으로 간주할 수 있으며 반환 값은 종속성에 따라 캐시되며 종속 값이 변경될 때만 다시 계산됩니다. 
    3. 돌연변이: Vuex 스토어의 상태를 변경하는 유일한 방법은 돌연변이를 제출하는 것입니다. 
    4. 작업: 비동기 작업을 포함하며 변형을 제출하여 상태를 간접적으로 변경합니다. 
    5. 모듈: 저장소를 모듈로 나눕니다. 각 모듈에는 상태, 변형, 동작, getter 및 중첩된 하위 모듈이 있습니다.

68. props와 state의 유사점과 차이점은 무엇입니까? 어떤 상황에서 render 메서드가 실행되나요?

차이점: 
1. props는 컴포넌트 내부에서 수정될 수 없으나, state는 컴포넌트 내부에서 수정될 수 있습니다. 
2. self-composite의 props는 부모 컴포넌트에서 수정될 수 있지만, 자체 컴포넌트의 state는 컴포넌트 내부에서 수정될 수 없습니다. 상위 구성 요소 
동일한 점: 
1. props 및 state 둘 다 HTML로 내보낸 원시 데이터입니다. 
2. props와 state는 모두 결정적입니다. 우리가 작성하는 구성 요소가 동일한 props와 state의 조합인 경우 3. 다른 출력을 생성하면 뭔가 잘못된 것입니다 4. 
props와 state 모두 렌더링 업데이트를 트리거합니다. 
5 두 .props 및 state는 순수 JS 객체입니다(판단하려면 typeof를 사용하세요. 결과는 객체입니다). 6. 
어떤 상황에서 
props 및 state의 초기 값이 상위 구성 요소에서 실행될 수 있습니까 ? 
    1. 클래스 컴포넌트가 setState를 호출하여 상태를 수정하는 경우 
    2. 함수 컴포넌트가 useState Hook을 통해 상태를 수정하는 경우 
    3. 클래스 컴포넌트가 다시 렌더링될 때 
    4. 함수 컴포넌트가 다시 렌더링되는 경우

69. React의 두 가지 새로운 후크 기능은 무엇입니까? 삭제된 유언장 시리즈와 차이점은 무엇인가요?

React의 두 가지 새로운 라이프사이클 후크 기능? 
1. 
getDerviedStateFromProps 함수: props에서 파생된 상태 가져오기 
2. 
getSnapshotBeforeUpdate 함수: 구성 요소가 업데이트되기 전에 스냅샷을 가져옵니다. 일반적으로 componentDidUpdate와 함께 사용되며, getSnapBeforeUpdate의 반환 값은 세 번째 매개변수로 componentDidUpdate에 전달됩니다. , 
그리고 componentDidUpdate는 중간에 렌더를 끼울 것입니다. 실제로 핵심 기능은 업데이트 전에 dom 정보를 기록하고 렌더가 dom을 변경하기 전에 이를 componentDidUpdate에 전달하는 것입니다. 
2. React의 새로운 라이프사이클로 인해 Hook 기능이 제거되었나요? 
1. componentWillMount 
2. componentWillReceiveProps 
3. componentWillUpdate 
요약 
    1. componentWillMount에서 수행해야 할 작업(일부 데이터 초기화 작업은 이 후크에서 처리해야 함), 생성자와 componentDidMount도 수행할 수 있으며 더 나아가 이 메서드는 폐기되었습니다. 
    2. 불안정성으로 인해 getDerivedStateFromProps 로 대체 
    되었기 때문에 componentWillReceiveProps의 실제 동작은 이름과 일치하지 않습니다.

70. CDN의 특징과 의의는 무엇인가요?

1. CDN은 콘텐츠 배포 네트워크를 의미하며, 기존 네트워크를 기반으로 전 세계 엣지 서버에 분산된 지능형 가상 네트워크입니다. 기본 아이디어는 데이터 전송 속도와 안정성에 영향을 미칠 수 있는 인터넷상의 병목 현상과 링크를 방지하여 콘텐츠 전송을 더 빠르고 안정적으로 만드는 것입니다.
2. CDN은 원본 서버의 데이터를 다른 서버로 복사하는 것을 의미합니다. 사용자가 방문하면 데이터 콘텐츠를 복제하는 서버에서 방문할 수 있습니다. 그 목적은 사용자가 필요한 콘텐츠를 더 빠르고 효과적으로 얻을 수 있도록 하고 네트워크 정체를 해결하며 웹사이트를 방문하는 사용자의 응답 속도를 향상시키는 것입니다. CDN 가속은 비용이 저렴하고 속도가 빠르며 상대적으로 방문 횟수가 많은 웹 사이트에 적합합니다.
기능:
1. 로컬 캐시 가속: 기업 웹사이트(특히 많은 수의 사진과 정적 페이지가 포함된 웹사이트)의 액세스 속도를 향상시키고 위 웹사이트의 안정성을 크게 향상시킵니다.
2. 미러 서비스: 서로 다른 운영자 간의 상호 연결 병목 현상의 영향을 제거하고, 운영자 간 네트워크 가속화를 실현하며, 서로 다른 네트워크의 사용자가 우수한 액세스 품질을 얻을 수 있도록 보장합니다.
3. 원격 가속: 원격 액세스 사용자는 DNS 로드 밸런싱 기술을 기반으로 캐시 서버를 지능적이고 자동으로 선택하고 가장 빠른 캐시 서버를 선택하여 원격 액세스를 가속화합니다.
4. 대역폭 최적화: 서버의 원격 미러 캐시 서버를 자동으로 생성합니다. 원격 사용자가 액세스하면 캐시 서버에서 데이터를 읽고, 원격 액세스 대역폭을 줄이고, 네트워크 트래픽을 공유하고, 원래 웹 서버의 부하를 줄일 수 있습니다.
5. 클러스터 공격 방지: 널리 분산된 CDN 노드와 노드 간 지능형 중복 메커니즘은 해커 침입을 효과적으로 방지하고 웹 사이트에 대한 다양한 DDoS 공격의 영향을 줄이며 동시에 더 나은 서비스 품질을 보장할 수 있습니다.

71. 클로저란 무엇이며 적용 시나리오는 무엇입니까?

1. 클로저는 다른 함수의 내부 변수를 읽을 수 있는 함수입니다.. 직설적으로 말하면 클로저는 함수이지만 다른 함수 안에 들어있습니다. 
2. 자바스크립트에서는 함수 내부의 하위 함수만 지역 변수를 읽을 수 있으므로 클로저는 간단히 "함수 내부에 정의된 함수"로 이해될 수 있습니다. 응용 프로그램 시나리오: 1. 블록 수준 범위 모방: 타이머 2. 매장된 
포인트 
    카운터 
    : 3. 커링 
    (Currying): 다중 매개변수 함수를 단일 매개변수 함수로 변환하는 방법

72. 브라우저 커널에 대해 어떻게 이해하고 계시나요?

핵심은 크게 렌더링 엔진과 js 엔진으로 구분됩니다. 
1. 렌더링 엔진: 웹 페이지의 콘텐츠(HTML, XML, 이미지 등)를 가져오고 정보(CSS 등)를 구성하며 표시 방법을 계산하는 역할을 담당합니다. 웹 페이지를 확인한 후 모니터나 프린터로 출력합니다. 브라우저 커널마다 웹 페이지에 대한 구문 해석이 다르므로 렌더링 효과도 다릅니다. 네트워크 콘텐츠를 편집하고 표시해야 하는 모든 웹 브라우저, 이메일 클라이언트 및 애플리케이션에는 커널 
2, JS 엔진이 필요합니다. 웹 페이지에 동적 효과를 얻기 위해 JavaScript를 구문 분석하고 실행합니다. 
처음에는 렌더링 엔진과 js 엔진이 명확하게 구분되지 않았습니다. 나중에 js 엔진은 점점 더 독립적이게 되었고 커널은 렌더링 엔진만을 참조하는 경향이 있었습니다.

73. 플로트를 청소하는 방법은 몇 가지입니까? 각각의 장단점은?

클리어 플로팅: 하위 요소의 플로팅으로 인해 상위 요소의 내부 높이가 무너지는 문제를 해결하기 위해 방법: 1. 
추가 
라벨 방법(마지막 플로팅 라벨 뒤에 새 라벨을 추가하고 클리어:모두 설정) ;) 장점: 대중적 이해하기 쉽고 더 편리함, 단점: 의미 없는 태그 추가, 빈약한 의미 
2. 부모에 오버플로 속성 추가(오버플로 추가: 부모 요소에 숨김) 장점: 코드가 간결함, 단점: 내용이 증가하면 자동 줄바꿈 없이 내용이 숨겨지기 쉽습니다. 3. 
float를 지우기 위해 after pseudo- 요소를 사용합니다. 장점: 닫힌 부동 아이디어에 부합하며 구조적 의미가 정확합니다. 단점: IE6-7은 의사 요소를 지원하지 않습니다. 
4. 부동 소수점을 지우려면 전후 이중 의사 요소를 사용합니다. 장점: 코드가 더 간결합니다. 단점: haslayout을 트리거하려면 Zoom: 1을 사용합니다.

74. 애니메이션을 수동으로 작성해야 한다면 최소 시간 간격은 얼마나 된다고 생각하며, 그 이유는 무엇입니까?

대부분의 모니터의 기본 주파수는 60Hz, 즉 초당 60회 새로 고침이므로 이론적인 최소 간격은 1/60*1000ms = 16.7ms입니다. 브라우저 렌더링 및 사용자 경험을 위해서는 최소 0.1~0.3초 설정이 가장 좋습니다.

75. Real DOM과 Virtual DOM의 차이점을 알려주세요. 장점과 단점?

1. Real DOM, real DOM은 구조화된 텍스트를 추상화한 Document Object Model을 의미합니다. 페이지에 렌더링되는 모든 노드는 실제 DOM 구조입니다. 2. 본질적으로 JavaScript 객체 형태로 존재하는 Virtual Dom 3. The 가상 DOM을 생성 하는
목적은 가상 노드를 페이지 뷰에 더 잘 렌더링하는 것입니다. 가상 DOM 객체의 노드는 실제 DOM의 속성과 하나씩 대응됩니다. 4. 둘 사이의 차이점은 다음과 같습니다. DOM은 조판 및 다시 그리기 작업을 수행하지
않으며
실제 DOM은 자주 재배치하고 다시 그리기 때문에 가상 DOM
의 전체 손실은 "가상 DOM 추가, 삭제 및 수정 + 실제 DOM 차이 추가, 삭제 및 수정 + 조판 및 다시 그리기"입니다. 실제 DOM의 전체 손실은 "실제 DOM 완전한 추가, 삭제 및 수정 + 조판 및 다시 그리기"
장단점입니까?
Real DOM의 장점: 사용하기 쉽다
단점:
1. 효율성이 낮고, 파싱 속도가 느리고, 메모리 사용량이 많다.
2.
성능이 좋지 않다: Real DOM을 자주 조작하면 쉽게 다시 그리기 및 리플로우가 발생할 수 있다.
Virtual DOM을 사용하면 다음과 같은 장점이 있다. .간단하고 편리함 : 실제 DOM을 사용하여 수동으로 페이지를 완성하는 경우 번거롭고 오류가 발생하기 쉬우며 대규모 애플리케이션에서도 유지 관리가 어렵습니다. 2. 성능 : Virtual DOM을 사용하면 잦은 업데이트를 효과적으로 피할 수 있습니다
. 3. 교차
플랫폼: 가상 DOM의 도움으로 React는 교차 플랫폼 기능을 제공하며 일련의 코드가 여러 터미널에서 실행됩니다. 단점
:
1. 일부 응용 프로그램에서는 성능이 극도로 높습니다. 요구 사항에 따라 가상 DOM은 극단적인 최적화 대상이 될 수 없습니다.
2. 처음으로 많은 양의 DOM을 렌더링할 때 가상 DOM의 추가 레이어 계산으로 인해 속도가 평소보다 약간 느립니다.

76、说说react的事件机制？

1、react自身实现了一套自己的事件机制，包括事件注册、事件的合成、事件冒泡、事件派发等，虽然和原生的是两码事，但也是基于浏览器的事件机制下完成的。
2、React 上注册的事件最终会绑定在document这个 DOM 上，而不是 React 组件对应的 DOM(减少内存开销就是因为所有的事件都绑定在 document 上，其他节点没有绑定事件)
3、React 自身实现了一套事件冒泡机制，所以这也就是为什么我们 event.stopPropagation()无效的原因。
4、React 通过队列的形式，从触发的组件向父组件回溯，然后调用他们 JSX 中定义的 callback
5、React 有一套自己的合成事件 SyntheticEvent

77、说说你对fiber架构的理解？解决了什么问题？

React Fiber는 Facebook이 2년여 만에 React에 적용한 주요 변경 및 최적화로, React의 핵심 알고리즘을 다시 구현한 것입니다. 
이에 대응하여 주로 다음과 같은 작업을 수행합니다. 
    1. 각 작업마다 우선순위를 높이고, 우선순위가 높은 작업은 우선순위가 낮은 작업을 중단할 수 있습니다. 그런 다음 우선순위가 낮은 작업을 다시 실행합니다. 
    2. 비동기 작업을 추가하고 requestIdleCallback API를 호출합니다. 브라우저가 유휴 상태일 때 
dom diff 트리는 연결된 목록이 됩니다. 하나의 dom은 두 개의 파이버(연결된 목록)에 해당합니다. 두 개의 큐, 둘 다 중단된 작업을 찾아서 재실행하는 것입니다 
    . 3. 아키텍처 관점에서 Fiber는 React의 핵심 알고리즘(즉, 조정 프로세스)을 다시 작성한 것입니다. 
    4. 코딩 관점에서, Fiber는 React 16의 새로운 아키텍처에서 가상 DOM인 Fiber 트리 구조의 노드 단위인 내부 A 정의 데이터 구조입니다.

78. 반응 차이의 원리는 무엇입니까?

1. Vue와 일관되게 React는 유효하지 않은 Dom 작업을 크게 방지하기 위해 Virtual DOM 개념을 도입하여 페이지 구성 효율성을 크게 향상시켰습니다. diff 알고리즘은 이전 Virtual DOM과 새 Virtual DOM을 비교하여 보다 효율적으로 알아내는 것입니다. DOM이 변경됩니다. 
작업 프로세스는 주로 트리 레이어, 구성 요소 레이어, 요소 레이어 
    1 및 트리 레이어의 세 가지 레이어로 나뉩니다. 트리 레이어는 DOM 노드의 레벨 간 이동 작업을 무시하고 동시에 DOM 노드만 비교합니다. 2. 컴포넌트 레이어: 동일한 유형 의 컴포넌트를 만나면 
    트리 diff를 따라 계층적 비교를 수행합니다. 컴포넌트 유형에 따라 다른 컴포넌트를 직접 판단합니다. 더티 컴포넌트이며 해당 컴포넌트 아래의 모든 하위 노드를 대체합니다. 이 컴포넌트의 가상 DOM에 변경 사항이 없음을 알면 수동으로 사용할 수 있습니다. shouldComponentUpdate 를 사용하여 판단합니다. diff가 필요한지 여부에 따라 diff의 효율성과 성능이 더욱 향상됩니다.3. 
    요소 계층: 동일한 수준보다 낮을 경우 새 노드가 있는 경우 삽입 작업을 구현할 수 있으며, 중복된 노드가 있는 경우 삭제 작업을 구현할 수 있습니다. 전치된 노드가 있는 경우 이동 작업을 수행할 수 있습니다.

79. CSS를 사용하여 삼각형을 구현하는 방법은 무엇입니까?

1. 테두리: 너비와 높이가 0인 요소가 주어지면 테두리의 모든 값이 직접 교차하며 이 교차점을 사용하여 삼각형을 만들 수 있습니다. 즉, border 속성은 삼각형으로 구성되는데, 오른쪽을 가리키는 삼각형을 원할 경우 테두리의 왼쪽 부분을 보이게 하고 나머지 부분은 투명하게 설정하면 됩니다 
. 삼각형을 얻으려면 그라데이션을 배경 이미지와 결합해야 합니다. 그라데이션을 사용하여 단계별로 삼각형을 구현해 보겠습니다. 
3. 클립 경로: 클립 경로는 이를 사용하여 다각형(또는 원, 타원 등)을 그리고 요소 내에 위치를 지정합니다. 실제로 브라우저는 클립 경로 외부에 아무 것도 그리지 않으므로 우리가 보는 것은 클립 경로의 테두리입니다. 
4transform: 오버플로로 회전: 삼각형을 그리기 위해 숨겨짐

80. shouldComponentUpdate의 기능은 무엇입니까?

1. shouldComponentUpdate()의 반환 값에 따라 React 컴포넌트의 출력이 현재 상태 또는 props 변경에 영향을 받는지 확인합니다. 기본 동작은 상태가 변경될 때마다 구성 요소가 다시 렌더링되는 것입니다. 
2. 반응 시 props와 state 값이 변경되면 컴포넌트가 다시 렌더링됩니다. shouldComponentUpdate를 사용하면 불필요한 렌더링 렌더링을 줄이는 것입니다. 부울 값을 반환한 다음 Virtual DOM을 비교하고 실제 DOM 업데이트가 필요한지 확인합니다.

81. git rebase와 git merge에 대해 어떻게 이해하고 계시나요? 차이점?

1. git을 사용해 버전을 관리하는 프로젝트에서는 기능 개발이 완료되어 master 브랜치에 merge되면 git rebase, git merge를 사용하게 된다 2. 둘 다 브랜치를 제출하는 기능은 동일하다 Merge 
into 다른 브랜치이지만 원칙은 다릅니다 
3. Git merge는 현재 브랜치를 지정된 브랜치에 병합합니다: git merge xxx; git rebase는 지정된 커밋에 병합합니다: git rebase -I <commit > 
4. merge에 의해 병합된 브랜치 병합 커밋 추가된 다음 두 브랜치의 기록이 연결됩니다. rebase는 전체 브랜치를 다른 브랜치로 이동하여 모든 브랜치의 커밋을 효과적으로 통합합니다.

82. redux를 사용하는 과정에서 정의된 action-type이 지속적으로 중복되는 것을 방지하려면 어떻게 해야 하나요?

ES6에는 고유한 값을 나타내는 새로운 기본 데이터 유형인 Symbol이 도입되었습니다. 
    새 명령은 기호 기능 이전에 사용할 수 없습니다. 그렇지 않으면 오류가 보고됩니다. 생성된 Symbol은 객체가 아닌 기본 유형의 값이기 때문입니다.Symbol 함수는 주로 콘솔에 표시하거나 문자열로 변환하기 위해 Symbol 인스턴스에 대한 설명을 나타내는 문자열을 매개 변수로 받아들일 수 있습니다. , 구별하기가 더 쉽습니다.

83. React의 가상 돔에 대해 이야기해 보세요. 가상 돔 계산 중 diff와 key의 관계는 무엇입니까?

1. 실제로는 실제 DOM에 대한 추상화 계층일 뿐입니다. 트리는 JavaScript 객체(VNode 노드)를 기반으로 하며 객체의 속성은 노드를 설명하는 데 사용됩니다. 마지막으로 트리는 다음과 매핑될 수 있습니다. 일련의 작업을 통해 실제 환경에 가상 DOM을 생성하는 것은 가상 노드를 페이지 뷰에 더 잘 렌더링하여 가상 DOM 객체의 노드가 실제 DOM의 속성과 하나씩 대응되도록 하는 것입니다. 2. 웹 문서 시뮬레이션 노드를 통해 JS
객체 트리(가상 DOM)를 생성한 다음, 또 다른 단계를 거쳐 실제 DOM 트리를 생성한 다음 화면에 그립니다. 나중에 콘텐츠가 변경되면 React는 완전히 새로운 가상 DOM 트리를 재생성한 다음 이전 가상 DOM 트리와 차이점을 비교하고 차이점을 패치로 패키징한 후 실제 DOM에 적용한 다음 탐색을 위해 화면에 렌더링합니다. 장치.
가상 DOM이 계산될 때 diff와 키의 관계는 무엇입니까?
1. React는 동시에 두 개의 가상 DOM 트리를 유지해야 합니다. 하나는 현재 DOM 구조를 나타내고 다른 하나는 React 상태가 변경되어 곧 생성될 때 생성됩니다. 다시 렌더링됩니다. React는 이 두 트리의 차이점을 비교하여 DOM 구조를 수정할지 여부와 수정 방법을 결정합니다. 이 알고리즘을 Diff 알고리즘이라고 합니다.
2. 키 같은 레벨의 노드가 같은 레벨의 다른 노드에 고유한 키 속성을 추가하는 경우, 현재 레벨에서의 위치가 변경될 때. 반응 diff 알고리즘이 이전 노드와 새 노드를 비교한 후 동일한 키 값을 가진 새 노드와 이전 노드를 찾으면 이동 작업을 수행합니다(그런 다음 여전히 원래 전략을 따라 노드에 깊이 들어가 비교하고 업데이트합니다) 차이점), 기존 전략에 따라 기존 노드를 삭제하는 대신 새 노드를 생성하는 작업입니다. 이는 의심할 여지 없이 React 성능과 렌더링 효율성을 크게 향상시킵니다.

84. React의 props.children은 map 함수를 사용하여 순회하고 예외 표시를 받습니다.왜? 어떻게 통과해야합니까?

1. 현재 컴포넌트에 자식 노드 데이터 타입이 없으면 정의되지 않습니다 
2. 자식 노드 데이터 타입이 있으면 객체입니다. 
3. 자식 노드가 여러 개인 경우 배열이 되며, 노드가 여러 개인 경우에만 map 메소드를 직접 호출할 수 있습니다.React는 자식 노드 객체를 안전하게 순회할 수 있는 React.children.map() 메서드를 제공합니다. .

85. immutable.js에 대해 어떻게 이해하고 계시나요?

1. Immutable.js는 React에서 성능 최적화를 위해 사용됩니다. 
2. Immutable을 React에서 사용하면 페이지의 불필요한 렌더링을 줄일 수 있으며, React처럼 깊이 비교에서 렌더링할 필요가 없습니다. 
3. Immutable은 직접적이고 빠르게 가능합니다. , 렌더링이 완료되어 렌더링 효율성이 향상되고 성능 소모가 줄어듭니다. 
4. Immutable은 Immutable입니다. 컴퓨터에서는 한번 생성되면 변경할 수 없는 데이터를 의미합니다. 
Immutable 객체를 수정하거나 추가 또는 삭제하면 be 새로운 불변 객체를 반환합니다 
불변 구현의 원칙은 영구 데이터 구조(영구적 데이터 구조)입니다. 
    1. 데이터 구조를 사용하여 데이터를 저장합니다 
    . 2. 데이터가 수정되면 객체가 반환되지만 새 객체는 반환됩니다. 가능한 한 빨리 업데이트되며, 메모리 낭비 없이 이전 데이터 구조 사용 가능

86. Redux는 원래 동기식인데 왜 비동기 코드를 실행할 수 있나요? 실현원리는 무엇인가? 미들웨어의 구현 원리는 무엇입니까?

1. Redux-thunk는 비동기 작업을 지원하는 미들웨어입니다. 
2. 비동기 작업을 실행하려면 먼저 썽크를 다운로드하고 이를 사용하여 비동기 작업을 수행해야 합니다. 비동기 작업을 지원합니다. 디스패치 및 getState를 사용할 수 있습니다. 데이터 또는 상태를 얻기 위해 3. 
Redux는 상태 관리 라이브러리입니다. redux의 핵심은 store, actions, Reducers의 세 부분으로 구성됩니다. 
4. Dispatch를 통해 작업의 Action으로 보내고 Action에서 Promise 객체를 반환합니다. 
5. 리듀서에서 타입과 데이터를 전달 하여 해석

87. Redux에서 동기 동작과 비동기 동작의 가장 큰 차이점은 무엇입니까?

1. 동기 동작: 디스패치 함수가 실행된 후 해당 감속기 순수 함수가 즉시 실행됩니다.감소기가 실행된 후 상태가 즉시 변경됩니다. 이때 store.getState 함수를 사용하여 최신 상태 값을 가져옵니다. 2. 
비동기 작업: 원칙적으로 redux는 비동기 작업에 대한 솔루션을 제공하지 않습니다. 비동기 작업은 타사 미들웨어 솔루션(예: redux-thunk)에 의존해야 합니다. 비동기 작업(본질적으로 디스패치의 기능)을 디스패치한 후, 대상 상태는 즉시 응답하지 않지만 비동기 함수 내부의 논리에 따라 상태가 응답하는 시기를 결정합니다. 
3. 차이점: 
    첫째, redux와 React-redux를 구별한다 Redux는 다른 프레임워크에서도 사용할 수 있는 별도의 모듈인 반면, React-redux는 React를 위해 탄생하여 데이터를 관리한다. 
    redux의 디자인 아이디어: 웹 애플리케이션은 상태 머신이고, 뷰와 상태는 일대일 대응이며, 모든 상태는 객체에 저장됩니다.

88. redux-saga와 redux-thunk의 차이점과 사용 시나리오는 무엇입니까?

1. redux-thunk 코드를 사용하여 함수를 반환하면 저장소는 반환된 함수를 호출하고 우리가 사용할 디스패치를 노출합니다. redux-thunk의 전체 프로세스에서는 비동기 작업의 실행이 완료될 때까지 기다린 다음 디스패치를 호출하고 저장소로 이동하여 리듀서를 호출합니다. 2. redux-saga 코드를 사용하여 작업 유형 
이 디스패치가 리듀서에 없으면 redux-saga의 리스너 함수 takeEvery가 이를 수신하고 비동기 작업에 디스패치와 동일한 결과가 있을 때 put 메소드를 실행하고 디스패치를 다시 트리거합니다. 
redux-saga의 전체 프로세스에 대해 액션과 리듀서가 실행된 후 리듀서에서 이러한 액션 차이가 있는지 판단합니다 . 
    1. redux-thunk와 redux-saga가 비동기 작업을 처리하는 타이밍이 다릅니다. redux-saga의 경우 2. redux action을 기반으로 async action의 브랜치가 다시 오픈되어 비동기 작업을 별도로 처리하게 되었습니다.3. 
    Saga는 기본적으로 자체적으로 asyc 이벤트 모니터링 메커니즘을 설정했으며, 그 양은 코드가 크게 늘어났습니다. 내 경험으로 볼 때 redux-thunk는 더 간단하고 redux 자체와 더 밀접하게 관련되어 있습니다.

89. 일반 for 루프가 forEach 루프보다 더 효율적인 이유는 무엇입니까?

1. for 루프는 첨자를 통해 루프 안의 코드를 반복적으로 실행하는 것으로, 강력한 기능을 가지고 있으며 인덱스를 통해 요소를 얻을 수 있습니다. 보다 복잡한 처리를 처리할 때 더욱 편리합니다.2 
. forEach() 루프 메서드를 사용하여 배열의 각 요소를 호출하고 해당 요소를 콜백 함수에 전달합니다. 일부 foreach는 향상된 for 루프라고도 하며, forEach는 실제로 for 루프의 단순화된 특수 버전입니다. forEach 루프는 빈 배열에 대한 콜백 함수를 실행하지 않습니다. 
차이점: 
    1. 순회: for 루프는 순서대로 순회하며, forEach는 반복자 반복자를 사용하여 순회합니다. 
    2. 데이터 구조: for 루프는 무작위로 요소에 액세스하고, foreach는 순차 연결 목록의 요소에 액세스합니다. 
    3. 성능: arraylist의 경우 순서대로입니다. for 루프를 사용하면 순차적으로 액세스할 수 있으며 속도가 상대적으로 빠르며 foreach 루프를 사용하면 for 루프보다 약간 느립니다. linedlist의 경우 단일 연결 목록이고 for 루프는 읽을 때마다 첫 번째 요소에서 다음 필드를 읽어야 하므로 매우 느립니다. foreach를 사용하면 현재 노드를 직접 읽을 수 있으며 데이터가 더 빠릅니다.

90. 모바일 단말용 1픽셀 솔루션은 무엇인가요?

모바일 웹 개발 시 UI 디자인 초안에서 테두리를 1픽셀로 설정하고, 프런트 엔드 개발 과정에서 border: 1px가 나타나면 테스트를 통해 일부 모델에서는 1px가 더 두꺼워지는 것이 더 클래식한 모바일임을 알 수 있습니다. 터미널 1px 픽셀 문제 
해결 방법: 
1. 십진수: 0.5px, 브라우저에서 확실히 천천히 지원할 것이라고 생각합니다. 현재 사용할 수 있으면 해킹할 수 있습니다. 
2. Shadow, border-img 솔루션은 권장되지 않습니다. 3. 한 줄에 확대/축소를 사용하고 
, 배경 이미지로 4개의 프레임을 시뮬레이션하는 등 배경 이미지와 확대/축소를 프로젝트에서 함께 사용할 수 있습니다. 4. 
변환 및 의사 클래스 사용을 권장합니다.

91. Flexbox의 크기 조정 메커니즘은 무엇입니까?

1. 플렉스박스의 아이템 설정 flex-grow 속성은 아이템의 확대 비율을 정의하며, 기본값은 0이며, 값이 클수록 확대가 강해지며, 음수값은 지원되지 않습니다. -shrink 
속성은 항목의 축소 비율을 정의합니다. 기본값은 1입니다. 값이 클수록 축소가 강해집니다. 음수 값도 지원되지 않습니다. 3. 
flex-basis 속성은 항목이 차지하는 주축 공간을 정의합니다. 초과 공간을 할당하기 전에 항목 브라우저는 이 속성에 따라 주축이 중복되는지 여부를 계산합니다. 그의 기본값은 프로젝트의 원래 크기인 자동입니다.

92. Vue의 믹스인에 대해 어떻게 이해하고 계시나요?

1. Mixin은 메소드 구현을 제공하는 객체 지향 프로그래밍 언어의 클래스입니다. 다른 1 클래스는 하위 클래스를 호출하지 않고 mixin의 메소드에 액세스할 수 있습니다. 2. Vue의 Mixin은 Vue 구성 요소의 재사용 가능한 배포판 
입니다 
. 데이터, 컴포넌트, 메소드, 생성 등 컴포넌트 내의 모든 함수 옵션을 포함할 수 있는 js 객체 4. 
공용 함수를 객체 형태로 mixins 옵션에 전달합니다.컴포넌트가 mixins 객체를 사용하는 경우, mixins 개체의 모든 옵션은 구성 요소 자체의 옵션에 혼합됩니다.

93. for...in 루프와 for...of 루프의 차이점은 무엇입니까?

for in과 for of of는 모두 순회 1에 속합니다. 
for in 순회일 때 배열의 인덱스 인덱스는 for in 순회 
2일 때 배열의 요소 값입니다. for in은 순회 객체에 더 적합하며 배열을 순회할 수도 있습니다. for of 배열, 객체 및 반복자 객체가 있는 기타 컬렉션 
3. for in은 항상 객체의 키나 배열 또는 문자열의 첨자를 가져옵니다. for of는 객체의 값이나 배열의 값을 가져옵니다. 또는 문자열

94. 게시-구독 모델은 무엇이며 핵심 구현 코드를 작성합니까?

1. 게시 및 구독 모드: 구독자(Subscriber)가 이벤트 등록(Subscribe)을 통해 디스패치 센터(Topic)에 구독 이벤트를 제출하고, 디스패치 센터(Topic)가 구독자의 등록 정보를 저장(콜백 기능)합니다. 게시 이벤트가 발생하면 게시된 메시지를 이벤트 퍼블리싱(Publish)을 통해 디스패치 센터에 제출하고, 디스패치 센터는 구독자가 해당 이벤트에 등록한 메시지를 일률적으로 처리합니다(등록 시 콜백 기능 실행) 2. 구현: // 
게시 구독 모드 인스턴스화 
    , 여러 개의 새로운 이벤트 격리가 달성될 수 있습니다. 일반적으로 하나의 프로젝트로 충분합니다. const 
    pub1 = new Pubsub() 
    //예제 호출 
    pub1.topic("on-sleep) //휴면 구독 주제 생성 
    / /student 1 sleep 구독 
    pub1.subscribe("on-sleep",(a)=>{ 
        console.log("sleep") 
        console.log(a) 
    }) 
    //학생 2는 sleep 콜백 구독이 다릅니다 
    pub1. subscribe("on- sleep",(a)=>{ 
        console.log("sleep2") 
        console.log(a) 
    }) 
 
    setTimeout(()=>{ 
        //시간이 거의 다 되었습니다. 시간이 되었다고 알려주세요. 자다!
        pub1.publish("on-sleep",{info:"잠잘 시간이에요!"}) 
    },2000)

95. 뷰포트에 대해 어떻게 이해하고 계시나요?

1. 브라우저에서 보이는 영역이 뷰포트 
2. PC측 페이지에서는 레이아웃 뷰포트와 시각적 뷰포트가 동일하므로 뷰포트를 구분할 필요가 없습니다 
. 모바일 단말기에서는 모바일 단말기의 웹페이지 창이 비교적 작은 경우가 많기 때문에 레이아웃의 뷰포트가 보이는 뷰포트와 다르기 때문에 큰 웹페이지가 모바일 단말기에서 완전히 표시될 수 있기를 바랍니다. 4. 따라서 기본적으로 , 
모바일 단말기의 레이아웃 뷰포트는 시각적 뷰포트 
5보다 크므로 모바일 단말기에서는 뷰포트를 세 가지 상황으로 나눕니다 
    : 1. 레이아웃 뷰포트(layout viewport) 
    2. 시각적 뷰포트(visual Layout) 
    3. 이상적 뷰포트(이상적인 뷰포트) 레이아웃)

96. useEffect에 대한 이해에 대해 알려주십시오. 어떤 수명주기를 시뮬레이션할 수 있습니까?

1. 후크 함수 useEffect를 사용하여 구성 요소의 부작용을 실현합니다. useEffect(원하는 액션, [컴포넌트 상태 목록]); 두 번째 파라미터는 useEffect 호출 시점을 처리하는 배열인 배열로, 배열은 컴포넌트 상태 목록입니다. 
2. useEffect는 componentDidMount를 시뮬레이션합니다. useEffect의 두 번째 매개변수가 빈 목록으로 전달되면 이는 수명 주기 함수인 componentDidMount를 시뮬레이션하는 것과 동일합니다. 이 부작용은 구성 요소가 처음으로 UI를 마운트할 때 한 번만 호출됩니다. 이를 사용하여 컴포넌트가 처음 마운트될 때 시뮬레이션하고, API에 액세스하고, 데이터를 얻습니다. 
3. UseEffect는 componentDidUpdate를 시뮬레이션합니다. useEffect를 사용할 때 두 번째 매개변수를 가져오지 않으면 수명주기 함수인 componentDidUpdate를 시뮬레이션하는 것과 같습니다. 렌더링이 완료될 때마다 호출됩니다. 
4. useEffect는 컴포넌트WillUnmount를 시뮬레이션하고, useEffect에서 함수를 반환하여 컴포넌트 WillUnmount를 시뮬레이션합니다.

97. React에서 setState와 replacementState의 차이점에 대해 이야기해 주세요.

1. setState는 상태 객체를 설정하는 데 사용됩니다 
. 2. 두 개의 매개변수: nextState, 현재 상태와 병합될 설정할 새 상태, 콜백, 선택적 매개변수, 콜백 함수. 이 함수는 setState가 성공적으로 설정되고 구성 요소가 다시 렌더링된 후에 호출됩니다. 
3. nextState와 현재 상태를 병합하고 구성 요소를 다시 렌더링합니다. setState는 React 이벤트 핸들러 및 요청 콜백에서 UI 업데이트를 트리거하는 주요 방법입니다. 
4. replacementState() 메소드는 setState()와 유사하지만 이 메소드는 nextState의 상태만 유지하고 nextState에 없는 원래 상태는 삭제됩니다. 5. 두 개의 
매개변수: nextState, 새로 생성할 상태 set은 현재 상태를 대체합니다. 콜백, 선택적 매개변수, 콜백 함수. 이 함수는 replacementState가 성공적으로 설정되고 구성 요소가 다시 렌더링된 후에 호출됩니다. 
------------------------------------ -
--------- 
1. setState는 상태의 일부를 수정하는 것입니다. 이는 Object.sign과 동일하며 덮어쓰기만 하고 원본을 줄이지 않습니다. 2.replaceState 
는 원래 상태를 완전히 바꾸는 것으로, 이는 값을 할당하여 원래 상태를 다른 개체로 바꾸는 것과 같습니다. 새 상태의 속성이 감소하면 해당 상태는 더 이상 상태에 존재하지 않게 됩니다.

98. 반응에서 onClick 바인딩의 작동 원리에 대해 이야기해 보세요.

컴포넌트 요소가 onClick 이벤트에 바인딩된 후: 
1. React는 먼저 이벤트를 등록하고 이벤트를 문서에 균일하게 등록합니다. 
2. 컴포넌트의 고유한 표현 키에 따라 이벤트 함수를 저장합니다. 
3. 통합 지정, dispatchEvent 콜백 함수 
4. 저장 이벤트 콜백: React는 클릭 이벤트를 객체에 저장합니다. 콜백 함수의 저장은 키-값 쌍의 형태로 객체에 저장됩니다. 키는 구성 요소의 고유 식별자 ID입니다. , 해당 값에 해당하는 이벤트는 콜백 함수이며, 해당 구성 요소를 통해 키는 해당 함수로 돌아갈 수 있습니다.

99. 수직 마진 통합이란 무엇입니까? 합병 후 상황에 대해 말씀해 주시겠습니까?

1. 세로 여백 병합: 두 개의 여백이 만나면 여백이 형성되며, 병합된 여백의 높이는 병합된 두 여백의 높이 중 큰 값과 같습니다 
. 문서 흐름의 레벨 요소는 병합되고 인라인 상자, 부동 상자 또는 절대 위치 사이의 여백은 병합되지 않습니다 상황: 1. 인접한 요소의 수직 여백이 병합될 때 
: 
위쪽 요소의 여백이 더 낮은 경우 하위 요소에 상위 마진이 있는 경우, 그 사이의 수직 간격은 하단과 상단의 합이 아니라 둘 중 큰 쪽이 되며, 이러한 현상을 외부 마진이라고 합니다 
. 병합: 상위 요소에 상단 패딩과 테두리가 없는 경우 상위 요소의 상단 여백은 하위 요소의 상단 여백과 병합되며 병합된 여백은 둘 중 중간이 됩니다. 더 큰 것, 즉 상단 여백 부모 요소는 0이고 병합됩니다. 
해결 방법: 부모 요소에 대해 1픽셀 위쪽 테두리 또는 위쪽 내부 여백을 정의할 수 있습니다.

100. 참조 유형으로서 useEffect의 종속성을 어떻게 처리합니까?

1. 'use-deep-compare-효과' 사용: 심층 비교를 수행할 수 있으며 사용 방법은 매우 간단합니다. 'use-deep-compare-효과'에서 useDeepCompareEffect를 가져오고 원래 useEffect를 useDeepCompareEffect로 바꾸면 됩니다. 
2. 위의 문제를 해결하기 위해 useRef 후크를 사용할 수도 있습니다. useRef의 기능은 렌더링 주기에 걸쳐 데이터를 저장하는 것입니다. 3. 
이전 데이터를 저장하려면 useRef를 사용합니다. useEffect의 종속성은 참조 유형이며, 이는 호출됩니다. obj 함수가 바뀔때마다 실행함수에 별도의 판단이 있는데, prevObj는 마지막 렌더링의 obj값이고, 이번에는 prevObj에 있는 키와 obj에 있는 키를 비교해서 조건이 만족된 후에 다른 작업을 합니다. 만났다

101. createPortal의 반응에 대해 알고 있고 사용 시나리오에 대해 이야기해 주시나요?

1. 하위 노드를 상위 구성 요소 외부에 존재하는 DOM 노드로 렌더링하는 포털.
2. ReactDOM.createPortal(child, 컨테이너)
첫 번째 매개변수(child)는 요소, 문자열 또는 조각과 같은 렌더링 가능한 React 하위 요소입니다. 두 번째 매개변수(컨테이너)는 DOM 요소입니다.
2. 포털은 흐름을 벗어난 구성 요소, 특히 위치: 절대 및 위치: 고정 구성 요소에 적합합니다. 모달박스, 알림, 경고, goTop 등

버전 2.0(업데이트된 내용)

1. Event Loop에 대해 어떻게 이해하고 계시나요?

1. 이벤트 루프는 비동기 이벤트 및 콜백 함수를 처리하기 위한 JavaScript의 메커니즘으로, 작업 대기열에서 작업을 지속적으로 꺼내어 작업 대기열이 빌 때까지 실행하는 JavaScript 런타임 환경의 루프입니다. 2. 이벤트 루프의 작동 원리: a. 동기 코드를 실행하고 비동기 작업을 작업 큐에 넣습니다. b. 메인 스레드 작업이 유휴 상태일 때 이벤트 루프는 작업 큐에 작업이 있는지 확인합니다. c. 만약 d. 태스크 완료 후 다시 태스크 큐를 확인하여 b, c의 동작을 반복한다. 3. 이벤트 루프는 자바스크립트에서 매우 중요한 개념으로, 자바스크립트가 비동기 연산을 처리하고 프로그램 성능과 사용자 경험을 향상시킵니다.

2. BOM에 대한 이해를 말해주십시오. 일반적인 BOM 객체에 대해 무엇을 알고 있습니까?

1. BOM은 콘텐츠와 독립적으로 브라우저 창과 상호 작용하는 개체를 제공하는 브라우저 개체 모델을 말합니다. 2. 해당 기능은 뒤로 가기, 앞으로 가기, 새로 고침 방법, 브라우저 창 변경 방법 등 브라우저와 상호 작용하는 것입니다. , 스크롤 막대가 스크롤되고 브라우저 브랜드 버전, 화면 해상도 3, 창과 같은 일부 고객 정보가 획득됩니다. BOM의 핵심 개체는 브라우저의 인스턴스를 나타내는 창입니다. 브라우저에서 창 개체는 브라우저 창과 전역 개체의 인터페이스인 이중 역할을 가지므로 전역 범위에 선언된 모든 변수와 함수는 창 개체의 속성과 메서드를 프로그래밍합니다. 4. local: 5. navigator: main 브라우저의 속성을 얻고 브라우저 유형을 구별하는 데 사용됩니다. 속성이 많고 호환성이 더 복잡합니다. 6. 화면: 순수 클라이언트 기능 정보, 즉 픽셀 너비, 픽셀 높이 등 브라우저 창 외부에 표시되는 클라이언트 정보를 저장합니다. 7. 기록: 객체는 주로 작업에 사용됩니다. 매개 변수를 통해 지정된 URL로 전달, 역방향 또는 리디렉션될 수 있는 브라우저 URL의 기록입니다.

3. 브라우저의 커널은 무엇이며, 차이점은 무엇입니까?

일반적인 브라우저 커널은 다음과 같습니다.

트라이던트 커널(Trident kernel): 마이크로소프트에서 개발한 브라우저 커널로 주로 인터넷 익스플로러 브라우저에서 사용된다.

Gecko 커널: Mozilla Firefox 브라우저의 커널이며 다른 브라우저에서도 채택됩니다.

WebKit 커널: Apple에서 개발한 브라우저 커널로 주로 Safari 브라우저와 Chrome 브라우저에서 사용됩니다.

블링크 커널: WebKit 커널을 기반으로 구글이 개발한 브라우저 커널로 주로 크롬 브라우저와 오페라 브라우저에서 사용된다. 5. 차이점: 1. 주된 이유는 렌더링 엔진이 다르기 때문에 브라우저 성능, 호환성, 보안 등에 차이가 발생하기 때문입니다. 2. Trident 커널은 CSS 및 JavaScript 처리가 상대적으로 느립니다. 3. Gecko 커널은 보안 및 개인 정보 보호에 더 많은 관심을 기울입니다. 4. WebKit 커널은 빠른 렌더링 속도와 우수한 호환성으로 유명합니다. 5. Blink 커널은 성능과 안정성이 향상되었습니다.

4. 브라우저의 점진적인 향상과 점진적인 저하의 차이점에 대해 알려주십시오.

1. 브라우저의 점진적인 향상과 점진적인 저하 모두 서로 다른 브라우저나 기기 간의 호환성 문제를 해결하기 위해 설계되었습니다. 2. 점진적인 향상이란 웹사이트나 애플리케이션을 디자인하고 개발할 때 기본 기능의 구현을 먼저 고려한 후 점차적으로 추가하는 것을 의미합니다. 다양한 브라우저 및 장치의 기능에 적응하는 고급 기능 및 대화형 효과 3. 점진적인 향상은 이전 브라우저에서도 향후 호환성에 더 중점을 둡니다. 고급 기능 및 인터랙티브 효과를 구현한 후 이러한 기능을 지원하지 않는 구형 브라우저 및 장치에 적응하기 위해 요구 사항을 점차적으로 줄입니다.

5. 웹사이트 성능 최적화를 위한 솔루션은 무엇입니까?

1. HTTP 요청 수를 최소화합니다: js, css 등을 병합합니다. 2. 파일 압축: CSS, JavaScript, HTML 및 기타 파일을 압축하여 파일 크기를 줄이고 웹 페이지 로딩 속도를 향상합니다. 3. 이미지 최적화: 적절한 이미지 형식을 사용하고, 이미지 크기를 압축하고, 이미지 수를 줄이고, 웹페이지 로딩 속도를 향상시킵니다. 4. CDN 가속: CDN(콘텐츠 배포 네트워크)을 사용하여 웹사이트 액세스 속도를 가속화하고 웹사이트 콘텐츠를 전 세계 서버에 배포하여 사용자가 가장 가까운 서버에서 콘텐츠를 얻을 수 있도록 합니다. 5. 캐시 최적화: 브라우저 캐시와 서버 캐시를 사용하여 반복 요청을 줄이고 웹사이트 액세스 속도를 향상시킵니다. 6. 프런트엔드 최적화: HTTP 요청을 줄이고, CSS Sprite를 사용하고, JavaScript 파일과 기타 기술을 병합하여 페이지 로딩 시간을 줄입니다. 7. 데이터베이스 최적화: 데이터베이스 쿼리 문 최적화, 인덱스 사용, 데이터베이스 쿼리 시간 단축, 웹 사이트 액세스 속도 향상. 8. 서버 최적화: 고성능 서버를 사용하고, 서버 구성을 최적화하고, 웹사이트 접속 속도를 향상시킵니다. 9. 중복 코드 제거: 쓸모 없는 코드를 제거하고, 페이지 크기를 줄이고, 웹 사이트 액세스 속도를 향상시킵니다. 10. 반응형 디자인: 반응형 디자인을 사용하면 웹사이트가 다양한 장치와 화면 크기에 적응하여 사용자 경험을 향상시킬 수 있습니다.

6. Link와 @import의 차이점은 무엇입니까?

1. Link와 @import는 모두 외부 리소스를 도입하는 데 사용됩니다. 2. 차이점: 1. 로드 순서가 다릅니다. 링크 태그는 페이지가 로드될 때 동시에 외부 리소스를 로드하는 반면, @import는 페이지가 로드된 후에만 로드됩니다. 페이지가 로드됩니다. 외부 리소스를 로드합니다. 2. 다양한 호환성: 링크 태그는 모든 브라우저에서 지원되지만 @import는 일부 이전 버전 브라우저에서는 지원되지 않을 수 있습니다. 3. 다양한 범위: 링크 태그를 사용하여 다양한 다양한 유형의 리소스를 소개할 수 있습니다. , CSS, JavaScript, 이미지 등을 포함하며 @import는 CSS 파일을 도입하는 데에만 사용할 수 있습니다. 4. 우선 순위가 다릅니다: Link 태그의 우선 순위가 @import 태그의 우선 순위보다 높으므로 동일한 스타일 시트에 두 가지 방법이 모두 있는 경우 사용하는 경우 Link는 @import 스타일을 재정의합니다.

7. BFC에 대한 이해도를 말해주세요.발동조건은 무엇인가요?

1. BFC는 블록 레벨 포맷팅 컨텍스트로, 특정 규칙에 따라 요소가 배치되고 렌더링되는 독립적인 렌더링 영역을 나타냅니다. 2. BFC 기능: 1. 내부 요소가 수직 방향으로 차례로 배열됩니다. 
    수직 흐름을 
형성하기 위해 
    2. BFC 영역은 플로팅 요소와 겹치지 않습니다. 
    3. BFC 영역은 외부 요소의 여백과 겹치지 않습니다. 
    4. BFC 영역은 플로팅 요소를 포함할 수 있습니다. 
    5. BFC 영역은 요소가 덮이는 것을 방지할 수 있습니다. 상위 요소의 테두리 기준 
3. 트리거 조건: 
    1. 루트 요소 또는 루트 요소를 포함하는 요소 
    2. 플로팅 요소 float가 없음과 같지 않음 
    3. 절대 위치 지정 위치는 절대 또는 고정 
    4. 디스플레이는 다음과 같습니다. inline-block, table-cell, table-caption, flex, inline-flex 
    5. 오버플로가 표시되지 않는 블록 수준 요소

8. null과 정의되지 않은 것의 차이점은 무엇입니까?

1. js에서 null과 undefine은 모두 값이 없음을 의미합니다. 2. 차이점: 1. undefine은 변수가 선언되었지만 값이 할당되지 않았거나 개체 속성이 존재하지 않음을 의미합니다. 2. null은 변수에 값이 없음을 의미합니다. null 값이 할당되었거나 개체 속성에 null 3 값이 할당되었습니다. 조건문에서는 undefine과 null이 모두 false로 변환되지만 비교 연산자에서는 동작이 다릅니다. 자신을 포함한 모든 값과 비교되지만 null은 undefound와만 비교됩니다.

9. CSS의 요소가 문서 흐름에서 분리되는 방식은 무엇입니까? 포지셔닝 방법과 차이점은 무엇입니까?

1. CSS의 요소가 문서 흐름을 벗어나는 방법에는 여러 가지가 있습니다. 1. 부동(float): 다른 요소와 나란히 표시될 수 있도록 요소를 문서 흐름 밖으로 이동합니다. 2. 절대 위치 지정(위치: 절대): 요소를 문서 흐름 밖으로 이동하고 가장 가까운 위치의 상위 요소를 기준으로 위치를 지정합니다. 3. 고정 위치 지정(위치: 고정): 요소를 문서 흐름 밖으로 이동하고 브라우저 창을 기준으로 위치를 지정합니다. 4. 유연한 레이아웃(display: flex): 상위 요소를 유연한 컨테이너로 설정하면 해당 하위 요소를 문서 흐름에서 분리하고 특정 규칙에 따라 정렬할 수 있습니다. 5. 그리드 레이아웃(표시: 그리드): 상위 요소를 그리드 컨테이너로 설정하면 해당 하위 요소를 문서 흐름에서 분리하여 특정 규칙에 따라 정렬할 수 있습니다. 2. 위치 지정 방법은 다음과 같습니다. 1. 상대 위치 지정(위치: 상대): 문서 흐름에서 요소의 위치를 기준으로 위치를 지정하면 다른 요소의 위치에 영향을 주지 않습니다. 2. 절대 위치 지정(position:absolute): 가장 가까운 위치에 있는 조상 요소를 기준으로 위치 지정을 수행하며, 위치가 지정된 조상 요소가 없는 경우 문서의 본문 요소를 기준으로 위치 지정을 수행합니다. 3. 고정 위치 지정(위치: 고정): 브라우저 창을 기준으로 위치가 지정되며 페이지 스크롤 시 이동되지 않습니다.

3. 차이점: 상대 위치 지정과 절대 위치 지정의 차이점은 상대 위치 지정은 문서 흐름에서 벗어나지 않는 반면 절대 위치 지정은 문서 흐름에서 벗어나는 것입니다. 고정 위치 지정은 절대 위치 지정과 유사하지만 브라우저 창을 기준으로 위치가 지정되며 페이지를 스크롤할 때 이동하지 않습니다.

10. 동기식과 비동기식의 차이점은 무엇입니까?

1. 동기식 및 비동기식은 작업이 처리되는 동안 작업이 다른 방식으로 실행된다는 것을 의미합니다. 2. 동기식 작업은 작업이 순차적으로 실행된다는 것을 의미합니다. 각 작업은 실행되기 전에 이전 작업이 완료될 때까지 기다려야 합니다. 동기식 실행에서는 작업 실행이 차단됩니다. 즉, 작업이 실행되면 작업이 완료될 때까지 기다렸다가 다음 작업을 계속 실행합니다. 3. 비동기 실행은 작업이 순서대로 실행되지 않고 각 작업이 실행되는 것을 의미합니다. 작업은 독립적으로 실행될 수 있으며 이전 작업이 완료될 때까지 기다립니다. 비동기식 작업 실행에서 작업 실행은 비차단 방식입니다. 즉, 작업 실행은 작업 완료를 기다리지 않고 다음 작업을 계속 실행합니다. 4. 동기식과 동기식의 차이점 비동기식은 작업이 실행되는 방식에 있습니다.순차 실행은 이전 작업이 완료될 때까지 기다리지 않고 독립적으로 실행되는 반면 비동기식 실행은 일반적으로 프로그램의 응답 속도와 효율성을 향상시킬 수 있습니다.

11. 의사 클래스와 의사 요소의 차이점은 무엇입니까? CSS3의 새로운 선택자는 무엇입니까?

의사 클래스와 의사 요소의 차이점: 1. 의사 클래스는 :hover, :active, :focus 등과 같은 요소의 일부 특수 상태를 설명하는 데 사용되는 반면, 의사 요소는 일부 요소를 생성하는 데 사용됩니다. ::before, ::after 등과 같이 문서 트리에 없는 항목입니다. 2. CSS2에서 의사 클래스는 단일 콜론(:)으로 표시되고, 의사 요소는 이중 콜론(::)으로 표시됩니다. 3. 의사 클래스는 모든 요소에 사용할 수 있지만 의사 요소는 일부 특정 요소에만 사용할 수 있습니다. 4. 의사 클래스는 선택기의 어느 곳에서나 사용할 수 있지만 의사 요소는 선택기의 마지막 위치에서만 사용할 수 있습니다. CSS3의 새로운 선택자는 다음과 같습니다: 1. 속성 선택자: [attr=value], [attr~=value], [attr|=value], [attr^=value], [attr$=value], [attr *= value] 2. 의사 클래스 선택자: :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type(), :first-child, :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :not() 3. 의사 요소 선택자: ::before, ::after, ::first-letter, ::first-line, ::selection 4. 결합 선택자: AB, A > B, A + B, A ~ B

12. Promise와 async/await의 차이점을 알려주세요.

Promise와 async/await는 모두 비동기 작업을 처리하는 방법이지만 둘 사이에는 몇 가지 차이점이 있습니다.

구문: Promise는 콜백 함수를 기반으로 하는 비동기 프로그래밍 방법으로, .then() 및 .catch() 메서드를 사용하여 비동기 작업의 결과를 처리합니다. 그리고 async/await는 ES2017에서 도입된 비동기 프로그래밍 방법으로, async 및 wait 키워드를 사용하여 비동기 작업의 결과를 처리합니다.

가독성: Promise에 비해 async/await는 읽고 이해하기 쉽고 코드가 더 간결하고 명확합니다.

오류 처리: Promise에서 오류를 처리하려면 오류를 포착하기 위해 .catch() 메서드를 사용해야 합니다. async/await에서는 try/catch 문을 사용하여 오류를 잡을 수 있습니다.

체인 호출: Promise는 체인에서 여러 비동기 작업을 호출할 수 있는 반면 async/await는 하나의 비동기 작업이 완료된 후에만 다음 비동기 작업을 진행할 수 있습니다. 일반적으로 async/await는 더 직관적이고 읽기 쉽고 이해하기 쉬운 비동기 프로그래밍 방법이지만 어떤 경우에는 Promise도 매우 유용합니다.

13. 재배치와 다시 그리기의 차이점에 대해 이야기해 주세요. 트리거 조건은 무엇입니까?

리플로우와 다시 그리기는 브라우저가 페이지를 렌더링할 때 중요한 두 가지 개념입니다. 리플로우는 페이지의 요소 레이아웃이 변경되면 브라우저가 요소의 위치와 크기를 다시 계산하고 페이지 레이아웃을 다시 정렬해야 함을 의미합니다. 리플로우로 인해 페이지가 다시 레이아웃되고 다시 렌더링되는데, 이는 상대적으로 성능 집약적인 작업입니다. 다시 칠하기(repaint)는 페이지의 요소 스타일이 변경되면 브라우저가 해당 요소의 스타일을 다시 그려야 함을 의미합니다. 다시 그리기는 페이지의 레이아웃을 변경하지 않고 요소의 스타일만 다시 그리므로 리플로우보다 비용이 저렴합니다. 리플로우를 트리거하는 조건은 다음과 같습니다. 1. 페이지의 초기 렌더링 2. 브라우저 창 크기 변경 3. 요소의 위치, 크기 및 콘텐츠 변경 4. 요소 스타일 변경 5. 트리거 조건 페이지 스크롤 시 다시 그리기에는 다음이 포함됩니다: 1. 요소의 스타일 변경 2. 요소의 배경색, 테두리 색상, 텍스트 색상 및 기타 속성 변경 3. 요소의 투명도 변경 4. 요소의 텍스트 내용 변경 일반적으로 재배열 및 다시 그리기는 페이지에 영향을 미치므로 개발 과정에서 재배열 및 다시 그리기를 자주 실행하지 않는 것이 필요합니다. JavaScript 애니메이션 대신 CSS3 애니메이션을 사용하는 등 합리적인 레이아웃 디자인을 통해 페이지 성능을 최적화할 수 있습니다.

14. Javascript는 상속을 어떻게 구현합니까?

1. 프로토타입 체인 상속: 상속은 하위 클래스의 프로토타입 객체를 상위 클래스의 인스턴스 객체로 지정함으로써 달성됩니다. 2. 생성자 상속: 하위 클래스 생성자에서 상위 클래스 생성자를 호출하여 상속을 구현하는 것을 말합니다. 3. 조합 상속: 컴포지션 상속은 프로토타입 체인과 생성자 상속을 결합한 상속 방법을 말하며, 구현 방법은 하위 클래스 생성자에서 부모 클래스 생성자를 호출하여 부모 클래스의 속성을 상속하고, 그 프로토타입 객체는 클래스는 메소드를 상속하기 위해 새로운 상위 클래스 인스턴스 객체를 가리킵니다. 4. ES6의 클래스 상속: extends 키워드를 사용하여 상위 클래스를 상속하고 super를 사용하여 상위 클래스의 생성자와 메서드를 호출합니다.

15. 엄격 모드란 무엇이며 제한 사항은 무엇입니까?

엄격 모드는 개발자가 보다 강력한 코드를 작성할 수 있도록 제한을 적용하는 JavaScript의 실행 모드입니다. 엄격 모드에서는 일부 안전하지 않은 동작이 금지되고 일부 오류가 발생합니다. 엄격 모드의 제한 사항은 다음과 같습니다. 1. 선언되지 않은 변수의 사용은 금지됩니다. 2. 변수, 함수, 함수 매개변수의 삭제는 금지되어 있습니다. 3. eval() 함수를 사용하여 변수나 함수를 생성하는 것은 금지되어 있습니다. 4. with 문은 금지됩니다. 5. 함수 내에서 Argument.callee 및 Argument.caller를 사용하는 것은 금지되어 있습니다. 6. 읽기 전용 속성에 대한 할당은 금지됩니다. 7. 내장 객체의 프로토타입을 확장하는 것은 금지되어 있습니다. 8. 함수 내에서 변수를 반복적으로 선언하는 것은 금지되어 있습니다. 코드 시작 부분에 "use strict"를 추가하면 엄격 모드를 활성화할 수 있습니다. 엄격 모드로 코드를 작성하면 개발자가 일반적인 JavaScript 실수를 방지하고 코드의 가독성과 유지 관리성을 향상시키는 데 도움이 됩니다.

16. var arr = [1,2,3,4,5,6,7,8,9,10]과 같이 배열의 순서를 빠르게 방해하는 방법은 무엇입니까?

배열의 마지막 요소부터 시작하여 배열을 앞으로 탐색합니다.

0과 현재 순회 인덱스 값 사이의 정수를 무작위로 생성합니다.

현재 순회하는 요소를 무작위로 생성된 인덱스에 해당하는 요소로 교체합니다.

배열의 첫 번째 요소가 탐색될 때까지 2단계와 3단계를 반복하면서 계속해서 배열을 앞으로 탐색합니다.

17. Vue의 사용자 정의 명령 후크 기능은 무엇입니까? 사용자 정의 지시어로 무엇을 했나요?

Vue의 사용자 정의 명령 후크 기능에는 바인딩, 삽입, 업데이트, 구성 요소 업데이트, 바인딩 해제가 포함됩니다. 1. 바인드(bind): 한 번만 호출되며 명령어가 요소에 처음 바인딩될 때 호출되며 여기서 일회성 초기화 설정을 수행할 수 있습니다. 2. 삽입됨: 바인딩된 요소가 상위 노드에 삽입될 때 호출되지만 상위 노드 이전에 DOM에 삽입되지 않을 수 있습니다. 3. 업데이트: 바인딩된 값이 변경되는지 여부에 관계없이 바인딩된 요소가 있는 템플릿이 업데이트될 때 호출됩니다. 업데이트 전과 후의 바인딩된 값을 비교하여 불필요한 템플릿 업데이트를 무시할 수 있습니다. 4. componentUpdated: 바인딩된 요소가 있는 템플릿이 업데이트 주기를 완료할 때 호출됩니다. 5. 바인딩 해제: 명령어가 요소에서 바인딩 해제될 때 한 번만 호출됩니다. 한번은 사용자 정의 명령을 사용하여 바깥쪽 영역을 클릭하여 팝업 창을 닫는 기능을 구현한 적이 있습니다. 구체적인 구현 방법은 문서의 클릭 이벤트를 바인딩 훅(Bind Hook) 기능에 바인딩하는 것으로, 클릭 이벤트가 발생하면 클릭된 영역이 팝업 창 내부인지 판단하고, 그렇지 않으면 팝업 창을 닫는다. 폐쇄되었습니다. 바인딩 해제 후크 함수에서 이벤트 바인딩을 해제합니다.

18. A 페이지에서 B 페이지로 이동, 구성 요소 A 캐시, 구성 요소 A에서 C 구성 요소로 이동, 캐시 취소, 달성 방법은 무엇입니까?

1. Keep-alive는 === "B" & from === "A"일 때 현재 페이지의 BeforeRouter(to, from, next)를 전달할 수 있습니다. == "C ” & from ===”A” keep-alive 메타의 매개변수가 false입니다. 2. 라이프 사이클, this.router.meta를 가져와서 페이지 메타의 매개변수를 수정하고 keep-alive 메타 캐시의 매개변수에 따라 구성 요소를 활성화할지 여부를 결정합니다.

19. Vue2와 Vue3의 반응형 원칙과 차이점은 무엇입니까?

1. Vue2 및 Vue3의 반응 원리는 Object.defineProperty를 기반으로 합니다. 데이터가 변경되면 보기 업데이트가 자동으로 트리거됩니다. 그러나 Vue3은 Object.defineProperty 대신 프록시 프록시 객체를 사용하여 응답성 원칙을 최적화하여 반응형 시스템을 보다 효율적이고 유연하게 만듭니다. 2. Vue2의 반응 원리는 Vue 객체를 인스턴스화할 때 데이터의 각 속성을 재귀적으로 순회하고 각 속성을 getter 및 setter로 변환하며 속성에 액세스하거나 수정되면 getter 및 setter 메서드를 트리거한다는 것입니다. , 반응형 업데이트를 활성화합니다. 3. Vue3의 반응형 원칙은 객체 액세스 및 수정 작업을 가로챌 수 있는 프록시 프록시 객체를 사용하여 반응형 업데이트를 실현합니다. Vue3의 리액티브 시스템은 일반 객체를 리액티브 객체로 변환할 수 있는 리액티브 기능도 지원하므로 개발자는 리액티브 시스템을 보다 유연하게 사용할 수 있습니다. 4. 일반적으로 Vue3의 반응형 시스템은 Vue2보다 더 효율적이고 유연하지만, 사용에 있어 몇 가지 차이점이 있으므로 개발자가 올바르게 배우고 조정해야 합니다.

20. Vue는 권한 관리를 어떻게 구현하고 버튼 수준 권한을 실현하는 방법은 무엇입니까?

1. 모든 권한을 수준에 따라 1차 권한과 2차 권한으로 나누고, 상대 트리 번호를 생성하고, 각 권한의 ID를 획득하고, 각 ID를 목록에 넣고, 역할 권한에 외래 키를 할당합니다. 2. 버튼 권한은 각 버튼이 처리 방법에 바인딩되어 있으며, 로그인한 사용자가 버튼의 권한 방법에 해당하지 않는 역할 ID를 반환하면 버튼이 숨겨집니다.

첫 주

21. Vue2와 Vue3의 차이가 5점 이상인가요?

성능 최적화: Vue3는 컴파일러 최적화, 반응형 시스템 최적화, 가상 DOM 최적화 등 성능 측면에서 많은 최적화를 수행하여 Vue3의 성능을 Vue2보다 빠르게 만듭니다.

Composition API: Vue3에서는 구성 요소 논리를 더 잘 구성하고 재사용할 수 있는 새로운 API 스타일인 Composition API를 도입하여 코드를 더 명확하고 유지 관리하기 쉽게 만듭니다.

TypeScript 지원: Vue3의 TypeScript 지원이 더욱 완벽해졌습니다. 이를 통해 유형 검사와 코드 힌트를 더 잘 수행하고 코드의 신뢰성과 유지 관리 가능성을 향상시킬 수 있습니다.

더 나은 트리 쉐이킹: Vue3는 트리 쉐이킹을 더 잘 지원하고 패키징 볼륨을 줄일 수 있는 보다 현대적인 ES 모듈 구문을 채택합니다.

더 나은 적응성: Vue3는 웹 및 모바일 터미널에 대한 더 나은 적응성을 가지며 PWA 및 SSR과 같은 기술을 더 잘 지원할 수 있습니다.

향상된 오류 처리: Vue3에는 개발자가 오류를 더 쉽게 찾고 해결할 수 있도록 하는 오류 처리 메커니즘이 도입되었습니다.

22. Vue3 [아버지에서 아들, 아들에서 아버지]의 컴포넌트 통신 프로세스는 무엇입니까?

1. vue3의 컴포넌트 통신 과정은 부모-아들, 아들-아버지 두 가지 방식으로 나누어집니다 
2. 아버지-아들: 
    부모 컴포넌트는 props를 통해 자식 컴포넌트에 데이터를 전송하고, 자식 컴포넌트는 컴포넌트는 props를 통해 데이터를 받습니다. 
부모 컴포넌트는 템플릿 내의 자식 컴포넌트를 사용할 수 있으며, v-bind 명령을 통해 자식 컴포넌트에 데이터를 전달할 수 있으며, 자식 컴포넌트는 props 에서 수신된 데이터 유형과 기본값을 선언할 수 있습니다. 부모 컴포넌트에 이벤트를 보냅니다 
    . 상위 구성 요소는 v-on 명령을 통해 하위 구성 요소가 보낸 이벤트를 수신하고 하위 구성 요소는 $emit 메서드를 상위 구성 요소에 전달할 수 있습니다.

23. Apply/call/bind의 원리는 무엇인가요?

1. 적용, 호출 및 바인딩은 모두 JavaScript에서 함수의 실행 컨텍스트를 변경하는 데 사용되는 방법입니다. 2. allpy와 call의 함수는 동일합니다. 둘 다 함수의 실행 컨텍스트를 변경합니다. 즉, 함수 내부의 this 포인터를 변경합니다. 차이점은 매개변수를 전달하는 방식에 있습니다. Apply는 배열을 다음과 같이 받습니다. 매개변수 및 호출이 여러 개의 매개변수 3을 수신하는 경우 바인드 메소드는 함수의 실행 컨텍스트를 변경하는 데에도 사용되지만 함수를 즉시 실행하지는 않지만 새 함수를 반환합니다. 이 새 함수의 this는 바인딩된 항목을 가리킵니다. 객체 4의 경우 일반적으로 apply, call, 바인딩은 모두 함수의 실행 컨텍스트를 변경하는 데 사용되는 메소드이며, 차이점은 매개변수를 전달하는 방식과 반환값입니다. apply 및 call은 함수를 즉시 실행하는 반면, 바인딩은 새 함수를 반환합니다.

24. 프로토타입과 프로토타입 체인에 대해 어떻게 이해하고 계시나요?

1. 프로토타입(Prototype)은 자바스크립트에서 중요한 개념으로, 다른 객체가 속성과 메소드를 상속받을 수 있는 객체이다. 모든 JavaScript 개체에는 해당 개체의 속성과 메서드를 정의하는 프로토타입 개체가 있습니다. 현재 개체에서 속성이나 메서드를 찾을 수 없는 경우 JavaScript 엔진은 해당 개체의 프로토타입 개체를 찾을 때까지 자동으로 검색합니다. 2. 프로토타입 체인은 프로토타입 객체들로 구성된 체인 구조로, 자바스크립트에서 상속을 구현하는 방식입니다. 객체가 다른 객체의 속성이나 메서드에 액세스해야 하는 경우 JavaScript 엔진은 속성이나 메서드를 찾을 때까지 프로토타입 체인을 찾습니다. 전체 프로토타입 체인에서 속성이나 메서드를 찾을 수 없으면 정의되지 않은 값을 반환합니다. 3. JavaScript에서 각 개체에는 개체의 프로토타입 개체를 가리키는 proto 속성이 있습니다. 객체의 속성이나 메소드에 접근하면 JavaScript 엔진은 먼저 객체 자체에 속성이나 메소드가 있는지 확인하고, 그렇지 않은 경우 이를 찾을 때까지 프로토타입 체인을 검색합니다. 전체 프로토타입 체인에서 속성이나 메서드를 찾을 수 없으면 정의되지 않은 값을 반환합니다. 4. 간단히 말해서 프로토타입과 프로토타입 체인은 JavaScript에서 매우 중요한 개념으로, 상속을 실현하고 객체 간 속성과 메서드를 공유하는 데 도움이 될 수 있습니다.

25. ES6의 Generator에 대해 어떻게 이해하고 계시나요?

1. ES6의 제너레이터는 실행 중에 현재 상태를 일시 중지하고 저장한 다음 필요할 때 실행을 재개할 수 있는 특수 기능입니다. Generator 함수는 Yield 키워드를 통해 실행을 일시 중지하고 다시 시작하는 기능을 구현합니다. 2. 제너레이터 함수는 비동기 프로그래밍에 사용될 수 있습니다.yield 키워드를 사용하여 비동기 작업 실행을 일시 중지하고 계속하기 전에 비동기 작업이 완료될 때까지 기다릴 수 있습니다. Generator 함수는 Yield 키워드를 통해 값을 반환하고 다음 호출에서 실행을 계속할 수 있는 반복기를 구현하는 데에도 사용할 수 있습니다. 3. 또한, Generator 함수는 Generator 함수를 호출할 때 전달될 수 있는 매개변수를 허용할 수도 있으며, 그런 다음 이러한 매개변수를 함수 내에서 사용할 수 있습니다. 4. 즉, 생성기 기능은 비동기 프로그래밍 및 반복기와 같은 기능을 구현하는 데 사용할 수 있는 매우 강력한 도구로, 코드 작성 및 유지 관리를 크게 단순화할 수 있습니다.

26. 브라우저 이벤트 루프와 nodeJs 이벤트 루프의 차이점에 대해 알려주십시오.

브라우저 이벤트 루프와 Node.js 이벤트 루프 사이에는 다음과 같은 몇 가지 차이점이 있습니다. 1. 브라우저 이벤트 루프는 단일 스레드인 반면 Node.js 이벤트 루프는 다중 스레드입니다. 2. 브라우저 이벤트 루프의 작업은 매크로태스크와 마이크로태스크로 구분되는 반면, Node.js 이벤트 루프에는 매크로태스크만 있습니다. 3. 브라우저 이벤트 루프의 마이크로태스크에는 Promise, MutationObserver 및 process.nextTick이 포함되는 반면 Node.js 이벤트 루프에는 process.nextTick이 없지만 setImmediate가 있습니다. 4. 브라우저 이벤트 루프의 매크로 작업에는 스크립트, setTimeout, setInterval, I/O, UI 렌더링 등이 포함되는 반면 Node.js 이벤트 루프의 매크로 작업에는 I/O, 타이머, setImmediate 등이 포함됩니다. 5. 브라우저 이벤트 루프의 작업 실행 순서는 모든 마이크로태스크를 먼저 실행한 다음 매크로 작업을 실행하는 것이고, Node.js 이벤트 루프의 작업 실행 순서는 모든 I/O 및 타이머 작업을 먼저 실행하는 것입니다. 그런 다음 setImmediate 작업을 실행합니다. 일반적으로 브라우저 이벤트 루프와 Node.js 이벤트 루프는 모두 이벤트 중심 모델을 기반으로 하지만 구현 방법과 작업 실행 순서가 다릅니다.

27. 브라우저 캐싱 메커니즘에 대해 어떻게 이해하고 계시나요?

브라우저 캐시 메커니즘은 브라우저가 웹 페이지에 액세스할 때 일부 정적 리소스(예: 사진, CSS, JS 등)를 로컬로 캐시하여 다음에 동일한 웹 페이지를 방문할 때 직접 사용할 수 있음을 의미합니다. 로컬 캐시에서 읽어 웹페이지 성능을 향상하고 로딩 속도와 사용자 경험을 개선합니다. 1. 브라우저 캐싱 메커니즘에는 강력한 캐싱과 협상 캐싱이라는 두 가지 유형이 있습니다. 2. 강력한 캐싱이란 브라우저가 처음으로 리소스를 요청할 때 리소스의 만료 시간(Expires) 또는 최대 캐시 시간(Cache-Control)을 로컬에 저장하고, 다음번에 요청할 때 먼저 로컬 캐시가 만료되었는지 확인하고, 만료되지 않은 경우 서버에 요청을 보내지 않고 로컬 캐시에서 직접 리소스를 읽습니다. 3. 협상 캐싱은 브라우저가 처음으로 리소스를 요청할 때 리소스 식별자(ETag 또는 Last-Modified)를 로컬에 저장하고 다음 요청을 위해 서버에 요청을 보내고 서버가 판단하는 것을 의미합니다. 리소스 식별자에 따라 리소스 업데이트가 있는지 여부, 업데이트가 없으면 304 상태 코드가 반환되고 브라우저는 로컬 캐시에서 리소스를 직접 읽습니다. 4. 브라우저 캐싱 메커니즘은 네트워크 요청을 효과적으로 줄이고 웹 페이지 로딩 속도와 사용자 경험을 향상시킬 수 있지만 리소스가 적시에 업데이트되지 않을 수도 있으므로 문제를 방지하려면 개발 중에 캐싱 메커니즘을 합리적으로 사용해야 합니다.

28. 브라우저 커널에 대해 어떻게 이해하고 계시나요?

브라우저 커널은 렌더링 엔진과 JS 엔진의 두 부분으로 나눌 수 있습니다. 1. 렌더링 엔진: 웹 페이지의 콘텐츠(HTML, XML, 이미지 등) 획득, 정보 구성(CSS 추가 등), 및 상기 웹페이지의 표시방식을 계산하여 모니터나 프린터로 출력하는 단계를 포함한다. 브라우저 커널마다 웹 페이지에 대한 문법적 해석이 다르므로 렌더링 효과도 다르기 때문에 적합한 브라우저 커널을 선택하는 것은 브라우저 성능과 사용자 경험에 매우 중요합니다.

29. Vue의 반응 원리에 대해 어떻게 이해하고 계시나요?

Vue의 반응 원리는 데이터 하이재킹을 통해 실현됩니다. Vue 인스턴스가 생성되면 Vue는 모든 데이터를 모니터링하고 데이터가 변경되면 Vue는 자동으로 뷰를 업데이트합니다. 구체적인 구현 방법은 다음과 같습니다. 1. Vue는 인스턴스화 중에 데이터 객체를 탐색하고 각 속성을 getter/setter로 변환하므로 Vue는 속성이 액세스되거나 수정되는 시기를 모니터링할 수 있습니다. 2. 데이터가 변경되면 Vue는 setter 메소드를 통해 변경 사항을 모니터링하고 데이터에 의존하는 모든 구성 요소에 업데이트하도록 알립니다. 3. Vue는 Dep 클래스를 사용하여 모든 종속성을 관리합니다. 각 데이터는 Dep 인스턴스에 해당합니다. 데이터가 변경되면 Dep는 데이터에 의존하는 모든 Watcher 인스턴스에 업데이트를 알립니다. 4. Watcher 인스턴스는 Vue에서 중요한 개념으로, 컴포넌트가 렌더링될 때 생성되고, 데이터가 변경되면 업데이트되도록 알림을 받습니다. 각 Watcher 인스턴스는 Dep 인스턴스와 연결되어 있으며, 데이터가 변경되면 Dep는 연결된 모든 Watcher 인스턴스에 업데이트하도록 알립니다. 일반적으로 Vue의 반응 원리는 데이터 하이재킹, Dep 클래스 및 Watcher 인스턴스를 통해 실현됩니다. Watcher 인스턴스는 데이터 변경 사항을 자동으로 모니터링하고 뷰를 업데이트하여 개발 프로세스를 크게 단순화합니다.

30. 시계 계산 방법의 차이점은 무엇입니까?

1. Vue.js에서는 메소드와 watch 모두 데이터 변경을 모니터링하는 데 사용됩니다 2. 메소드는 Vue.js의 옵션으로 구성 요소에서 메소드를 정의하는 데 사용됩니다. 매개변수를 승인하고, 일부 작업을 수행하고, 결과를 반환할 수 있습니다. 구성 요소의 데이터가 변경될 때 일부 데이터를 다시 계산해야 하는 경우 메서드에서 다시 계산하고 결과를 반환해야 합니다. 3. Watch는 Vue.js의 특수 옵션으로, 데이터 변경 사항을 모니터링하고 일부 작업을 수행하는 데 사용됩니다. 하나 이상의 데이터 변경을 모니터링하고, 데이터 변경 시 지정된 콜백 함수를 실행할 수 있습니다. 데이터가 변경될 때 일부 비동기 작업이나 복잡한 계산을 수행해야 하는 경우 watch를 사용해야 합니다. 4. 차이점은 다음과 같습니다. 1. 메소드는 매개변수를 승인하고 일부 작업을 수행하며 결과를 반환할 수 있는 구성 요소의 메소드를 정의하는 데 사용됩니다. 그리고 watch는 데이터 변경 사항을 모니터링하고 일부 작업을 수행하는 데 사용되며 매개 변수를 허용하거나 결과를 반환할 수 없습니다. 2. 메소드는 일반적으로 속성 계산 또는 이벤트 처리와 같은 간단한 작업에 사용되는 반면, 감시는 일반적으로 복잡한 비동기 작업 또는 계산을 처리하거나 여러 데이터 변경 사항을 모니터링해야 할 때 사용됩니다.

Computed는 Vue.js의 계산된 속성이며 템플릿에서도 호출할 수 있지만 구현이 Methods와 다릅니다. 계산은 종속성 캐싱을 기반으로 합니다. 즉, 종속 데이터가 변경될 때만 다시 계산됩니다. 종속 데이터가 변경되지 않은 경우 Computed는 결과를 캐시에 직접 반환하므로 성능이 향상됩니다.

31. Virtual DOM에 대해 어떻게 이해하고 계시나요?

Virtual DOM은 웹 애플리케이션의 성능을 최적화하는 데 사용되는 기술입니다. 실제 DOM의 계층 구조와 속성을 시뮬레이션하고 실제 DOM을 직접 조작하는 대신 메모리에서 작동할 수 있는 경량 JavaScript 개체입니다. Virtual DOM이 변경되면 실제 DOM과 비교하여 업데이트가 필요한 부분만 업데이트하므로 DOM 작업 횟수가 줄어들고 애플리케이션 성능이 향상됩니다. Virtual DOM의 장점은 다음과 같습니다. 1. 애플리케이션 성능 향상: Virtual DOM은 업데이트가 필요한 부분만 업데이트하므로 DOM 작업 수를 줄이고 애플리케이션 성능을 향상시킵니다. 2. 애플리케이션 개발 단순화: Virtual DOM은 메모리에서 작동할 수 있으므로 애플리케이션 개발 및 테스트를 더 쉽게 수행할 수 있습니다. 3. 애플리케이션 유지 관리성 향상: Virtual DOM을 사용하면 애플리케이션 개발 및 테스트가 더 쉬워지기 때문에 애플리케이션 유지 관리성이 향상될 수 있습니다. 결론적으로 Virtual DOM은 웹 애플리케이션의 성능과 유지 관리성을 향상시키는 데 도움이 되는 매우 유용한 기술입니다.

32. nextTick에 대한 이해와 기능에 대해 알려주십시오.

1. nextTick은 Vue.js의 비동기 메소드로, 다음 DOM 업데이트 주기가 끝난 후 지정된 콜백 함수를 실행하는 기능입니다. nextTick의 주요 기능은 Vue.js가 DOM을 업데이트한 직후에 일부 작업을 수행하는 것입니다. 예를 들어 데이터 업데이트 직후 DOM 요소의 크기나 위치를 가져오는 것입니다. 2. nextTick의 구현 원리는 JavaScript의 이벤트 루프 메커니즘을 사용하는 것입니다. Vue.js가 DOM을 업데이트하면 모든 DOM 업데이트 작업을 대기열에 넣고 다음 이벤트 루프가 실행될 때까지 기다립니다. nextTick 메소드는 지정된 콜백 함수를 이 큐에 넣고 다음 이벤트 주기의 실행을 기다리는 것입니다. 3. NextTick은 광범위한 사용 시나리오를 가지고 있습니다.예를 들어 Vue.js에서 $nextTick 메소드를 사용하면 DOM 요소의 크기나 위치를 얻는 등 DOM이 업데이트된 후 즉시 일부 작업을 수행할 수 있습니다. 또한 Vue.js의 nextTick 메소드를 사용하면 데이터가 업데이트된 후 즉시 업데이트된 데이터를 얻는 등 일부 비동기 데이터 업데이트 문제를 해결할 수도 있습니다. 4. 간단히 말해서, nextTick은 Vue.js에서 매우 중요한 비동기 메서드로, DOM이 업데이트된 후 즉시 일부 작업을 수행하는 데 도움이 되어 애플리케이션의 성능과 사용자 경험을 향상시킬 수 있습니다.

33. 웹팩에 대한 이해도를 알려주세요.

Webpack은 최신 JavaScript 애플리케이션 패키징 도구입니다. 브라우저에서 쉽게 로드하고 사용할 수 있도록 여러 JavaScript 파일, CSS 파일, 이미지 및 기타 정적 리소스를 하나 이상의 번들 파일로 패키징할 수 있습니다.

Webpack의 주요 기능은 다음과 같습니다. 1. 모듈식 관리: Webpack은 CommonJS, AMD, ES6 및 기타 모듈식 사양을 지원하며 여러 모듈을 하나의 파일로 패키징하여 HTTP 요청 수를 줄이고 페이지 로딩 속도를 향상시킬 수 있습니다. 2. 코드 변환: Webpack은 ES6, TypeScript, CoffeeScript 등 고급 언어를 브라우저가 인식할 수 있는 JavaScript 코드로 변환할 수 있습니다. 3. 코드 분할: Webpack은 애플리케이션을 여러 청크로 분할하여 온디맨드 로딩을 달성하고 페이지 로딩 속도를 향상시킬 수 있습니다. 4. 리소스 관리: Webpack은 CSS, 이미지, 글꼴과 같은 정적 리소스를 처리하고 이를 하나 이상의 파일로 패키징하고 압축 및 최적화와 같은 작업을 수행할 수 있습니다. 5. 플러그인 시스템: Webpack은 코드 압축, 파일 복사, HTML 생성 등과 같은 다양한 자동 작업을 실현할 수 있는 풍부한 플러그인 시스템을 제공합니다. 간단히 말해서, Webpack은 개발자가 JavaScript 애플리케이션을 더 잘 관리 및 패키징하고, 개발 효율성과 사용자 경험을 향상시키는 데 도움이 되는 매우 강력한 도구입니다.

34. GET과 POST의 차이점에 대해 이야기해 주세요.

1. GET 및 POST는 HTTP 프로토콜에서 일반적으로 사용되는 두 가지 요청 방법입니다. 2. 차이점: 1. GET 요청 방법은 리소스를 얻는 데 사용되는 반면 POST 요청 방법은 데이터를 제출하는 데 사용됩니다. 2. GET 요청 메소드의 데이터는 물음표 "?"로 구분된 URL에 추가되며, 매개변수는 "&" 기호로 구분되며, POST 요청 메소드의 데이터는 URL에 포함됩니다. 요청 본문. 3. GET 요청 방식의 데이터 전송량은 일반적으로 2KB를 넘지 않는 작은 반면, POST 요청 방식의 데이터 전송량은 상대적으로 크고 어떤 크기의 데이터도 전송할 수 있습니다. 4. GET 요청 방식의 데이터는 캐시, 북마크 가능, 브라우저 기록에 기록될 수 있지만, POST 요청 방식의 데이터는 캐시, 북마크, 기록되지 않습니다. 브라우저 기록 기록에 있습니다. 5. GET 요청 방식은 데이터가 URL에 노출되어 가로채기 및 변조가 쉽기 때문에 보안성이 낮은 반면, POST 요청 방식은 데이터가 노출되지 않기 때문에 보안성이 높습니다. URL에서는 요청 본문의 데이터만 가로채서 변조할 수 있습니다.

35. HTTP와 HTTPS의 차이점에 대해 이야기해 보세요. HTTPS의 암호화 원리는 무엇인가요?

1. HTTP는 하이퍼텍스트 전송 프로토콜로 데이터를 전송하는 데 사용되는 프로토콜로 일반 텍스트로 전송되므로 데이터를 쉽게 도청하고 변조할 수 있습니다. 2. HTTPS는 HTTP를 기반으로 SSL/TLS 프로토콜을 추가하고, 암호화 및 인증 기술을 통해 데이터 보안을 보장합니다. HTTPS는 암호화된 전송을 사용하며 데이터 기밀성과 무결성을 보장하기 위해 데이터 전송 중에 암호화가 수행됩니다. 3. 구체적으로 HTTPS는 데이터를 전송하기 전에 SSL/TLS 핸드셰이크를 수행하고 보안 채널을 설정한 다음 데이터를 전송합니다. SSL/TLS 프로토콜은 비대칭 암호화와 대칭 암호화의 두 가지 암호화 방법을 사용하며, 비대칭 암호화는 보안 채널을 설정하는 데 사용되고 대칭 암호화는 데이터 전송을 암호화하는 데 사용됩니다. 4. SSL/TLS 핸드셰이크 과정에서 서버는 자신의 공개 키를 클라이언트에 보냅니다. 클라이언트는 공개 키를 사용하여 난수를 암호화한 후 이를 서버에 보냅니다. 서버는 자신의 개인 키를 사용하여 난수를 해독한 후 사용합니다. 이 난수는 암호화된 데이터 전송을 위한 대칭 키를 생성합니다. 5. HTTPS는 HTTP에 비해 보안성과 기밀성이 높으며 은행, 전자상거래 웹사이트 등 사용자의 개인정보와 민감한 정보를 보호해야 하는 웹사이트에 적합합니다.

36. TCP에 세 번의 핸드셰이크가 필요한 이유는 무엇입니까?

TCP 프로토콜에서는 연결을 설정하기 위해 3방향 핸드셰이크가 필요합니다. 이는 주로 통신 당사자 모두가 데이터를 정상적으로 보내고 받을 수 있도록 보장하기 위한 것입니다. 구체적인 이유는 다음과 같습니다. 1. 첫 번째 핸드셰이크: 클라이언트가 서버에 연결 요청 세그먼트를 보내고, 서버는 요청을 받은 후 확인 세그먼트로 응답하여 클라이언트의 요청이 수신되었음을 나타냅니다. 2. 두 번째 핸드셰이크: 클라이언트의 요청을 받은 후 서버는 확인 메시지 세그먼트를 클라이언트에 보내 클라이언트의 요청을 받았고 클라이언트와 통신할 준비가 되었음을 나타냅니다. 3. 세 번째 핸드셰이크: 서버로부터 확인 세그먼트를 받은 후 클라이언트는 확인 세그먼트를 서버에 보내 서버로부터 확인을 받았고 서버와 통신할 준비가 되었음을 나타냅니다. 4. 3방향 핸드셰이크를 통해 통신의 양쪽 당사자가 정상적으로 데이터를 보내고 받을 수 있도록 보장할 수 있으며, 네트워크 지연이나 패킷 손실로 인한 연결 실패나 데이터 전송 오류를 방지할 수 있습니다. 동시에, 3방향 핸드셰이크는 네트워크의 악의적인 공격이나 잘못된 정보로 인해 발생하는 보안 문제도 예방할 수 있습니다.

37. Proxy Proxy의 원리에 대해 알려주세요.

프록시는 클라이언트와 서버 사이의 중개자 역할을 하는 웹 애플리케이션입니다. 클라이언트와 서버 사이에 프록시 서버를 구축하는 것을 원칙으로 하며, 클라이언트는 프록시 서버에 요청을 보내고, 프록시 서버는 해당 요청을 서버로 전달하며, 서버가 응답한 후 그 결과를 프록시 서버로 반환하며, 프록시 서버는 결과를 프록시 서버 클라이언트로 반환합니다.

프록시의 작업 흐름은 다음과 같습니다. 1. 클라이언트가 프록시 서버에 요청을 보냅니다. 2. 프록시 서버는 요청을 수신하고 요청을 서버에 전달합니다. 3. 서버는 요청에 응답하고 결과를 프록시 서버에 반환합니다. 4. 프록시 서버는 결과를 수신하고 결과를 클라이언트에 반환합니다.

Proxy 에이전트의 역할은 주로 다음과 같은 측면을 포함합니다. 1. 액세스 속도 향상: 프록시 서버는 요청 결과를 캐시할 수 있으며, 다음에 동일한 요청이 있을 때 캐시된 결과를 직접 반환하므로 액세스 속도가 향상됩니다. . 2. 접근 제어: 프록시 서버는 특정 웹사이트에 대한 접근을 제한하거나 특정 클라이언트의 접근을 제한하는 등 클라이언트의 요청을 필터링하고 제어할 수 있습니다. 3. 클라이언트 정보 숨기기: 프록시 서버는 클라이언트의 실제 IP 주소를 숨겨 클라이언트의 개인 정보를 보호할 수 있습니다. 4. 로드 밸런싱: 프록시 서버는 요청을 여러 서버에 분산하여 로드 밸런싱을 달성하고 서버 성능과 안정성을 향상시킬 수 있습니다. 간단히 말해서, 프록시 프록시는 액세스 속도를 향상시키고 개인정보를 보호하며 로드 밸런싱 및 기타 기능을 달성할 수 있는 매우 유용한 네트워크 애플리케이션입니다.

38. 메모리 누수에 대한 이해에 대해 이야기해 주시겠습니까? 메모리 누수가 발생하는 상황은 무엇입니까?

메모리 누수란 프로그램 실행 중에 요청한 메모리 공간이 제대로 해제되지 않아 시스템에서 사용 가능한 메모리가 지속적으로 줄어들어 결국 프로그램 충돌이나 시스템 충돌로 이어지는 현상을 말합니다. 메모리 누수는 일반적으로 동적으로 할당된 메모리를 해제하지 않거나, 반복적으로 메모리를 해제하거나, 이미 해제된 메모리를 사용하는 등 프로그램의 일부 잘못된 메모리 관리 작업으로 인해 발생합니다.

메모리 누수에는 여러 가지 유형이 있습니다. 1. 동적으로 할당된 후 메모리가 해제되지 않습니다. 프로그램이 작업 중에 동적으로 할당된 메모리를 사용하지만 사용 후에는 해제하지 않아 메모리 누수가 발생합니다. 2. 순환 참조: 두 개 이상의 개체가 서로를 참조할 때 개체 간의 참조 관계가 올바르게 처리되지 않으면 메모리 누수가 발생합니다. 3. 파일이 닫히지 않음: 프로그램이 파일을 사용할 때 파일이 제대로 닫히지 않으면 메모리 누수가 발생합니다. 4. 캐시가 지워지지 않습니다. 프로그램이 캐시를 사용할 때 캐시가 올바르게 정리되지 않으면 메모리 누수가 발생합니다. 5. 프로그램 오류: 이미 해제된 메모리를 사용하거나, 메모리를 반복적으로 해제하는 등 프로그램에 잘못된 메모리 관리 작업이 있어 메모리 누수가 발생합니다.

메모리 누수로 인해 프로그램의 실행 속도가 느려지고 심지어 프로그램이 중단되거나 시스템이 중단되는 원인이 되므로 프로그램 개발 시에는 메모리 관리에 주의를 기울이고 사용하지 않는 메모리 공간을 적시에 해제해야 합니다.

세 번째 주

39. 화살표 기능과 일반 기능의 차이점을 알려주세요.

화살표 함수와 일반 함수의 주요 차이점은 다음과 같습니다. 1. 화살표 함수에는 자체 this가 없으며 this는 외부 범위에서 상속됩니다. 일반 함수의 this는 함수 호출 시 동적으로 바인딩되며 해당 값은 함수 호출 방법에 따라 달라집니다. 2. 화살표 함수는 인수 객체를 사용할 수 없으며 new 키워드를 사용하여 호출할 수도 없습니다. 일반 함수는 인수 객체를 사용하거나 new 키워드를 사용하여 호출할 수 있습니다. 3. 화살표 함수에는 프로토타입 속성이 없으므로 생성자로 사용할 수 없습니다. 일반 함수를 생성자로 사용하여 새 개체 인스턴스를 만들 수 있습니다. 4. 화살표 함수의 구문이 더욱 간결해지고, 함수 본문의 return 키워드와 중괄호를 생략할 수 있습니다. 일반 함수는 return 키워드를 사용하여 값을 반환해야 하며, 함수 본문은 중괄호로 묶어야 합니다. 5. 일반적으로 화살표 기능은 간단한 기능에 적합하므로 코드를 더 간결하고 읽기 쉽게 만들 수 있습니다. 일반 기능은 더욱 유연하며 다양한 시나리오를 처리할 수 있습니다.

40. SPA 첫 화면의 느린 로딩 속도를 해결하는 방법은 무엇입니까?

코드 최적화: 코드에 중복되거나 반복되거나 불필요한 코드가 있는지 확인하고, 코드 양을 최대한 줄이고, 코드 구조와 알고리즘을 최적화하여 페이지 로딩 속도를 향상시킵니다.

이미지 최적화: 이미지가 너무 큰 경우 이미지 압축 도구를 사용하여 압축하여 이미지 크기를 줄여 페이지 로딩 속도를 향상시킬 수 있습니다.

레이지 로딩(Lazy loading): 페이지에 있는 사진, 동영상 등의 리소스에 대해 레이지 로딩 기술을 사용하면 사용자가 해당 위치로 스크롤할 때만 로드되어 첫 화면의 로딩 시간을 줄일 수 있습니다.

CDN 가속: CDN(Content Delivery Network) 가속 서비스를 사용하여 전 세계 서버에 정적 리소스를 분산시켜 페이지 로딩 속도를 향상시킵니다.

캐시 최적화: 브라우저 캐싱 기술을 사용하여 페이지의 정적 리소스를 로컬로 캐시하고 다음 방문 시 캐시에서 직접 읽어 서버 요청을 줄이고 페이지 로딩 속도를 향상시킵니다.

서버 최적화: 서버 응답이 느린 경우 더 높은 구성의 서버를 사용하거나 로드 밸런싱 기술을 사용하여 요청을 여러 서버에 분산시켜 페이지 로딩 속도를 향상시킬 수 있습니다.

41. 웹팩의 공통 로더에 대해 이야기해 보세요. 어떤 문제가 해결되었나요?

babel-loader: ES6/ES7/JSX 및 기타 구문을 ES5 구문으로 변환하여 브라우저 호환성 문제를 해결합니다.

css-loader: @import 및 url()과 같은 CSS 파일 및 프로세스 종속성을 구문 분석하여 CSS 파일을 JS 파일로 패키징할 수 있습니다.

style-loader: HTML 페이지의 <style> 태그에 CSS 코드를 삽입하여 스타일을 적용합니다.

file-loader: 파일을 출력 디렉터리에 복사하고 파일 경로를 반환하여 파일 경로 문제를 해결합니다.

url-loader: file-loader와 유사하지만 지정된 크기보다 작은 파일을 base64 인코딩으로 변환하여 HTTP 요청을 줄이고 페이지 로딩 속도를 향상시킬 수 있습니다.

image-loader: 이미지 파일을 로드하고 압축하여 이미지 로딩 속도가 느린 문제를 해결합니다.

json-loader: JSON 파일을 로드하여 JSON 파일 사용 시 수동 구문 분석 문제를 해결합니다.

xml-loader: XML 파일을 로드하여 XML 파일을 사용할 때 수동으로 구문 분석하는 문제를 해결합니다. 이러한 로더는 브라우저 호환성, 파일 경로, 스타일 주입, 이미지 로딩 속도 등과 같은 다양한 문제를 해결하여 Webpack이 다양한 유형의 파일을 처리하고 이를 하나 이상의 JS 파일로 패키징할 수 있도록 하여 애플리케이션 프로그램 성능을 향상시키고 유지 관리성.

42. SPA 단일 페이지에 대해 어떻게 이해하고 있으며, 장점과 단점은 무엇입니까? SPA 애플리케이션을 구현하는 방법은 무엇입니까?

SPA 단일 페이지 애플리케이션은 전체 애플리케이션에 단 하나의 페이지만 있고, 모든 페이지 콘텐츠는 비동기적으로 데이터를 로드하고 페이지를 동적으로 업데이트하여 실현된다는 의미입니다. SPA 애플리케이션은 일반적으로 프런트 엔드 프레임워크(예: React, Angular, Vue 등)를 사용하여 구현됩니다. 장점: 1. 좋은 사용자 경험: SPA 애플리케이션은 새로 고침 없이 페이지 전환을 실현할 수 있으며 사용자 경험이 더 원활합니다. 2. 프론트엔드와 백엔드 분리: SPA 애플리케이션은 프론트엔드와 백엔드를 분리할 수 있으며, 프론트엔드는 페이지 표시와 상호작용 로직에만 집중하면 되고, 백엔드는 API만 제공하면 됩니다. 인터페이스. 3. 성능 향상: SPA 애플리케이션은 페이지 새로 고침을 줄이고 서버 로드를 줄이며 성능을 향상시킬 수 있습니다. 단점: 1. 첫 번째 화면의 로딩 속도가 느림: SPA 애플리케이션은 모든 프런트 엔드 코드와 데이터를 로드해야 하며 첫 번째 화면의 로딩 시간이 더 깁니다. 2. SEO에 비우호적: SPA 애플리케이션에는 페이지가 하나뿐이므로 검색 엔진이 페이지의 콘텐츠를 크롤링하기 어렵기 때문에 SEO에 비우호적입니다. 3. 브라우저 호환성 문제: SPA 애플리케이션은 HTML5의 몇 가지 새로운 기능을 사용해야 하며 브라우저 호환성에 대한 요구 사항이 높습니다. SPA 애플리케이션 구현 방법: 1. 프런트엔드 프레임워크 사용: React, Angular, Vue와 같은 프런트엔드 프레임워크를 사용하여 SPA 애플리케이션을 빠르게 구현합니다. 2. 라우팅 라이브러리 사용: React Router 및 Vue Router와 같은 라우팅 라이브러리를 사용하여 페이지 새로 고침 전환을 달성합니다. 3. AJAX 기술 사용: AJAX 기술을 사용하면 데이터를 비동기적으로 로드하고 페이지 콘텐츠를 동적으로 업데이트할 수 있습니다.

43. Vue의 구성 요소와 플러그인의 차이점은 무엇입니까?

Vue에서 컴포넌트와 플러그인의 차이점은 다음과 같습니다. 1. 컴포넌트는 Vue의 기본 개념이며 Vue 애플리케이션에서 재사용 가능한 코드 블록으로 UI 컴포넌트 또는 비즈니스 로직을 캡슐화하는 데 사용됩니다. 구성 요소는 Vue 애플리케이션에서 여러 번 사용될 수 있고, 상위 구성 요소가 전달한 데이터를 받을 수 있으며, 상위 구성 요소에 데이터를 보낼 수도 있습니다. 2. 플러그인은 Vue의 확장 기능으로, Vue 애플리케이션의 기능을 향상시키는 데 사용되는 선택적 기능 모듈입니다. 플러그인은 전역 메서드 또는 속성, 전역 지시어 또는 필터, Vue 인스턴스 메서드 또는 믹스인을 추가할 수 있습니다. 3. 구성 요소와 플러그인은 다르게 사용됩니다. 컴포넌트를 사용하려면 먼저 Vue 애플리케이션에 등록해야 하며, Vue.comComponent() 메서드 또는 Vue.extend() 메서드를 통해 컴포넌트를 등록할 수 있습니다. 플러그인은 Vue.use() 메소드를 통해 설치하거나 Vue 인스턴스에서 직접 사용할 수 있습니다. 4. 구성 요소와 플러그인의 범위는 다릅니다. 컴포넌트는 주로 UI 컴포넌트나 비즈니스 로직을 캡슐화하는 데 사용되며, 작업 범위는 일반적으로 로컬이며 특정 컴포넌트 내에서만 사용됩니다. 플러그인은 주로 Vue 애플리케이션의 기능을 향상시키는 데 사용되며, 동작 범위는 일반적으로 전역적이며 Vue 애플리케이션 전체에서 사용할 수 있습니다.

44. Vue 컴포넌트 간의 통신 방법은 무엇입니까?

Vue 컴포넌트 간의 통신 방법은 다음과 같습니다. 1. 부모-자식 컴포넌트 통신: 부모 컴포넌트는 props를 통해 자식 컴포넌트에 데이터를 전달하고, 자식 컴포넌트는 이벤트를 통해 부모 컴포넌트에 데이터를 전달합니다. 2. 형제 구성 요소 통신: 데이터는 중개자로서 공통 상위 구성 요소를 통해 형제 구성 요소로 전달될 수 있습니다. 3. 교차 레벨 구성 요소 통신: 제공/주입을 사용하여 데이터를 아래로 전달하거나 $parent/$root를 사용하여 상위 구성 요소를 찾을 수 있습니다. 4. 비부모-자식 구성요소 통신: 비부모-자식 구성요소 간의 통신을 달성하기 위해 이벤트 버스(Event Bus) 또는 Vuex를 사용할 수 있습니다. 이벤트 버스는 이벤트를 실행하고 수신하는 데 사용할 수 있는 빈 Vue 인스턴스입니다. Vuex는 데이터를 중앙에서 관리하고 구성 요소 간의 공유 상태를 실현할 수 있는 상태 관리 라이브러리입니다.

45. vue의 diff 알고리즘을 아시나요? 말해 주세요?

Vue의 diff 알고리즘은 효율적인 가상 DOM 비교 알고리즘으로, 두 가상 DOM 트리 전후의 차이를 계산하고 그 차이를 실제 DOM에 적용하여 DOM 작업을 최소화하는 데 사용됩니다. Vue의 diff 알고리즘은 이중 종료 비교 전략을 채택합니다. 즉, 이전 가상 DOM 트리와 새 가상 DOM 트리의 머리와 꼬리에서 동시에 비교를 시작하여 비교 횟수를 최대한 줄입니다. 구체적으로 Vue의 diff 알고리즘은 다음 단계로 나누어집니다: 1. 먼저 기존 가상 DOM 트리와 새 가상 DOM 트리의 루트 노드를 비교합니다. 노드 유형이 다르면 전체 노드를 직접 교체하고, 노드 유형이 같으면 다음으로 이동합니다. 다음 비교 단계로 넘어갑니다. 2. 노드의 속성과 이벤트를 비교하고, 변경 사항이 있으면 노드의 속성과 이벤트를 업데이트합니다. 3. 노드의 자식 노드를 비교하여 자식 노드의 개수가 다르면 전체 노드의 자식 노드를 직접 교체하고, 자식 노드의 개수가 같으면 다음 비교 단계로 이동합니다. 4. 동일한 위치에 있는 하위 노드의 경우 모든 하위 노드가 비교될 때까지 위 단계를 반복적으로 수행합니다. 5. 새 가상 DOM 트리의 중복 노드의 경우 실제 DOM에 직접 추가하고, 이전 가상 DOM 트리의 중복 노드의 경우 실제 DOM에서 직접 삭제합니다. 위 단계를 통해 Vue의 diff 알고리즘은 두 가상 DOM 트리 전후의 차이를 효율적으로 계산하고, 그 차이를 실제 DOM에 적용하여 DOM 작업을 최소화할 수 있습니다.

46. Virtual Dom에 대해 간단히 이야기하자면?

1. Virtual Dom은 페이지의 상태를 가상 DOM 트리로 추상화하는 기술입니다. React, Vue 등 프론트엔드 프레임워크의 핵심 기술 중 하나입니다. 2. Virtual Dom의 작동 원리는 페이지 상태가 변경되면 프레임워크가 먼저 새 상태를 새 가상 DOM 트리로 변환한 다음 새 가상 DOM 트리를 이전 가상 DOM 트리와 비교하여 최종적으로 업데이트가 필요한 부분만 업데이트함으로써 불필요한 DOM 작업을 방지하고 페이지 성능을 향상시킵니다. 3. Virtual Dom을 사용하면 개발자가 페이지의 특정 구현 세부 사항에 신경 쓰지 않고 페이지 상태 관리에 집중할 수 있다는 장점이 있습니다. 동시에 Virtual Dom은 DOM 작업을 줄일 수 있으므로 페이지의 성능과 응답성을 향상시킬 수 있습니다.

47. Vue3.0에서 사용하는 Composition Api와 Vue2.x에서 사용하는 Options Api의 차이점은 무엇인가요?

Vue3.0에서 사용하는 Composition Api는 Vue2.x에서 사용하는 Options Api와 다음과 같은 점에서 다릅니다. 1. 코드 구성 방법이 다릅니다. Composition Api는 함수 기반이고 Options Api는 객체 기반입니다. 2. 더 강력한 재사용성: Composition Api는 논리 재사용을 더 잘 실현할 수 있으며 논리 코드를 함수로 캡슐화하여 여러 구성 요소에서 재사용을 용이하게 할 수 있습니다. 3. 더 나은 유형 추론: Composition Api는 더 많은 유형 추론을 사용하므로 TypeScript를 더 잘 지원할 수 있습니다. 4. 더 나은 코드 가독성: Composition Api는 코드를 더 잘 구성하고, 코드를 더 명확하고 읽기 쉽게 만들고, Options Api에서 혼란과 중복을 줄일 수 있습니다. 5. 더 나은 응답성: Composition Api의 반응성 및 참조는 반응성 데이터를 더 잘 처리할 수 있어 코드를 더 간결하고 이해하기 쉽게 만듭니다. 간단히 말해서 Composition Api는 코드 구성, 재사용성, 유형 추론, 코드 가독성 및 응답성 측면에서 큰 이점을 제공하므로 개발자가 고품질 Vue 애플리케이션을 구축하는 데 더 도움이 될 수 있습니다.

48. React의 setState 실행 메커니즘에 대해 이야기해 보세요.

React에서 setState는 구성 요소의 상태를 업데이트하는 데 사용되는 메서드입니다. setState 메소드가 호출되면 React는 새 상태 객체를 현재 상태 객체에 병합하고 구성 요소를 다시 렌더링합니다. 구체적인 실행 메커니즘은 다음과 같습니다. 1. setState 메서드를 호출하면 React는 새 상태 객체를 업데이트 대기열에 추가합니다. 2. 동일한 이벤트 루프에서 setState 메소드가 여러 번 호출되면 React는 이러한 업데이트를 하나의 업데이트로 결합하고 하나의 업데이트 작업만 수행합니다. 3. 컴포넌트 라이프사이클 함수 및 이벤트 핸들러에서 setState 메소드가 호출되면 React는 큐에 업데이트를 추가하고 현재 이벤트 루프가 끝난 후 업데이트 작업을 수행합니다. 4. 비동기 작업에서 setState 메서드가 호출되면 React는 업데이트를 대기열에 추가하고 다음 이벤트 루프에서 업데이트 작업을 수행합니다. 5. 업데이트 작업이 실행되기 전에 React는 업데이트 대기열을 최적화하여 중복 업데이트와 잘못된 업데이트를 제거하여 성능을 향상시킵니다. 정리하자면, React의 setState 메소드는 업데이트를 큐에 추가하고 적절한 시점에 업데이트 작업을 수행하는 비동기 작업입니다. setState 메서드를 사용할 때는 구성 요소 성능을 향상시키기 위해 무한 루프와 불필요한 업데이트를 방지하도록 주의해야 합니다.

49. React의 클래스 컴포넌트와 함수 컴포넌트에 대한 이해에 대해 이야기해 주시겠습니까? 차이점이 뭐야?

1. 클래스 구성요소와 함수 구성요소 모두 구성요소를 정의하는 방법입니다. 2. 클래스 구성 요소는 ES6의 클래스 구문을 사용하여 정의되고 React.Component 클래스를 상속해야 하며 구성 요소의 jsx를 반환하는 render 메서드를 구현해야 합니다. 클래스 구성 요소는 상태 및 수명 주기 메서드를 사용하여 상태와 동작을 관리할 수 있습니다. 3. Functional 컴포넌트는 함수를 사용하여 정의되며 JSX만 반환하면 됩니다. Functional 컴포넌트는 상태 및 수명주기 메서드를 사용할 수 없지만 React Hook을 사용하여 컴포넌트의 상태 및 동작을 관리할 수 있습니다. 차이점: 1. 문법: 클래스 컴포넌트 클래스 구문을 사용하고 함수 구성요소는 함수 구문을 사용합니다. 2. 상태 관리: 클래스 구성 요소는 상태를 사용하여 구성 요소의 상태를 관리할 수 있는 반면, 함수 구성 요소는 React Hooks를 사용하여 상태를 관리해야 합니다. 3. 생명주기: 클래스 구성요소에는 componentDidMount(), componentWillUnmount() 등과 같은 생명주기 메소드가 있는 반면, 함수 구성요소에는 생명주기 메소드가 없습니다. 4. 성능: 기능적 구성 요소는 일반적으로 React.Component 클래스를 상속하고 render() 메서드를 구현할 필요가 없기 때문에 클래스 구성 요소보다 가볍습니다. 그러나 상태와 동작을 관리해야 하는 경우 기능 구성 요소는 성능에 영향을 미칠 수 있는 React Hooks를 사용해야 할 수 있습니다.

50. React Hooks에 대해 어떻게 이해하고 계시나요? 어떤 문제가 해결되었나요?

React Hooks는 React 16.8에 도입된 새로운 기능으로, 클래스를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수 있게 해줍니다. React Hooks는 다음 문제를 해결합니다. 1. 구성 요소 간 상태 논리를 재사용하기가 어렵습니다. React Hooks는 사용자 정의 Hooks라는 상태 로직을 공유하는 방법을 제공합니다. 2. 복잡한 구성 요소를 이해하기 어려워집니다. React Hooks는 구성요소를 더 작은 기능으로 분할할 수 있으며, 각 기능은 특정 기능에 중점을 둡니다. 3. 클래스 구성 요소의 수명 주기 메서드와 상태 논리 간의 관계는 직관적이지 않습니다. React Hooks는 라이프사이클 메서드와 상태 로직을 분리하여 코드를 더 쉽게 이해하고 유지 관리할 수 있도록 해줍니다. 4. 클래스 구성 요소의 바인딩 문제입니다. React Hooks의 기능적 구성 요소에는 이러한 바인딩 문제가 없으므로 코드가 더 간결해지고 유지 관리가 더 쉬워집니다. 요약하자면, React Hooks는 React 구성 요소를 작성하는 더 간단하고 직관적인 방법을 제공하여 코드를 더 쉽게 이해하고 유지 관리할 수 있도록 해줍니다.

51. UseMemo와 useCallback은 어떻게 성능을 향상시키며, 적용 시나리오는 무엇입니까?

UseMemo와 useCallback을 모두 사용하여 React 구성 요소의 성능을 최적화할 수 있습니다. UseMemo는 계산 결과를 캐시하여 반복 계산을 방지함으로써 구성 요소의 렌더링 성능을 향상시킬 수 있습니다. 적용 시나리오는 다음과 같습니다. 1. API에서 데이터를 얻고 복잡한 계산을 수행하는 등 계산 비용이 높은 값. 2. 불필요한 렌더링을 피하기 위해 하위 구성 요소의 렌더링을 최적화합니다. 3. 렌더링할 때마다 새로운 객체나 배열을 생성하지 마십시오. UseCallback은 함수를 캐시하여 렌더링될 때마다 새 함수가 생성되는 것을 방지함으로써 구성 요소의 렌더링 성능을 향상시킬 수 있습니다. 해당 응용 프로그램 시나리오는 다음과 같습니다. 1. 함수를 하위 구성 요소에 props로 전달할 때 하위 구성 요소의 불필요한 렌더링을 피합니다. 2. useEffect 사용 시 함수 참조 변경으로 인해 useEffect를 반복적으로 실행하지 마세요. 3. useMemo를 사용할 때 함수 참조 변경으로 인한 useMemo의 이중 계산을 피하십시오.

52. Vue-router의 구현 원리는 무엇인가요?

Vue-router는 Vue.js에서 공식적으로 제공하는 라우팅 관리 플러그인입니다. 구현 원리는 주로 다음과 같은 측면을 포함합니다. 1. Vue.js의 구성 요소 개발 아이디어를 기반으로 라우팅 규칙을 구성 요소로 추상화하고 구성 요소의 중첩 및 전환을 통해 페이지 점프 및 새로 고침을 실현합니다. 2. 프런트엔드 경로의 점프 및 새로 고침을 실현하기 위해 HTML5 History API를 사용하여 pushState 및 replacementState 메소드를 통해 브라우저의 URL 주소를 변경합니다. 3. Vue.js의 반응형 데이터 바인딩 메커니즘을 사용하여 Vue 인스턴스의 데이터 속성에 라우팅 정보를 저장하고 시계를 통해 라우팅 변경 사항을 모니터링하여 라우팅의 동적 업데이트 및 응답을 실현합니다. 4. beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave 등과 같은 Vue.js의 라이프사이클 후크 기능을 사용하여 경로 차단 및 제어를 구현함으로써 경로 권한 관리 및 페이지 동적 로딩을 실현합니다. 즉, Vue-router의 구현 원리는 Vue.js의 구성 요소 개발 아이디어와 반응형 데이터 바인딩 메커니즘을 기반으로 하며 HTML5 History API 및 Vue.js 라이프 사이클 후크 기능을 사용하여 프런트 엔드 라우팅 점프를 실현합니다. , 새로 고침, 차단 및 제어.

53. 컴포넌트를 패키징하고 다른 프로젝트 간에 사용하는 방법은 무엇입니까?

다른 프로젝트에서 사용할 구성 요소를 패키징하려면 다음 단계를 수행하십시오. 1. 패키징할 모든 구성 요소가 포함된 별도의 구성 요소 라이브러리 프로젝트를 만듭니다. 2. 구성 요소 라이브러리 프로젝트에서 각 구성 요소에 대해 별도의 폴더를 만들고 그 안에 구성 요소의 모든 코드와 스타일을 포함합니다. 3. 각 구성 요소 폴더에서 구성 index.js요소 클래스, 스타일, 기타 종속성 등 구성 요소에 필요한 모든 콘텐츠를 내보내는 파일을 만듭니다. 4. 구성 요소 라이브러리 프로젝트에서 webpack과 같은 패키징 도구를 사용하여 모든 구성 요소를 단일 JavaScript 파일로 패키징합니다. 5. 다른 프로젝트에서 사용할 수 있도록 구성 요소 라이브러리 프로젝트를 npm 또는 다른 패키지 관리자에 게시합니다. 6. 다른 프로젝트에서는 npm install명령을 사용하여 구성 요소 라이브러리를 설치합니다. 7. 컴포넌트를 사용해야 하는 파일에서 필요한 컴포넌트를 가져와서 사용합니다.

54. Vue, React, Angle의 차이점은 무엇인가요?

Vue, React, Angular는 모두 단일 페이지 애플리케이션(SPA) 및 동적 웹 애플리케이션을 구축하기 위한 최신 JavaScript 프레임워크입니다. 1. Vue.js는 배우고 사용하기 쉽고 소규모 프로젝트에 적합한 경량 프레임워크입니다. React.js는 대규모 프로젝트에 적합한 더 많은 유연성과 사용자 정의 가능성을 제공하는 라이브러리입니다. Angular는 대규모 엔터프라이즈 수준 프로젝트에 적합한 다양한 기능과 도구를 제공하는 완전한 프레임워크입니다. 2. Vue.js의 템플릿 구문은 더 간단하고 직관적이며 이해 및 유지 관리가 쉽습니다. React.js는 JSX 구문을 사용하므로 더 많은 학습과 이해가 필요합니다. Angular는 HTML과 TypeScript를 사용하므로 더 많은 학습과 숙달이 필요합니다. 3. Vue.js는 가상 DOM과 비동기 렌더링을 사용하기 때문에 성능이 더 좋습니다. React.js도 가상 DOM을 사용하지만 성능을 위해서는 수동으로 최적화해야 합니다. Angular는 양방향 데이터 바인딩과 많은 종속성 주입을 사용하기 때문에 상대적으로 성능이 좋지 않습니다. 4. Vue.js와 React.js는 모두 오픈 소스이며 활발한 커뮤니티와 수많은 플러그인 및 구성 요소를 사용할 수 있습니다. Angular도 오픈 소스이지만 복잡성과 학습 곡선으로 인해 커뮤니티가 비교적 작습니다.

55. Redux에 대해 어떻게 이해하고 계시나요? 어떻게 작동하나요?

Redux는 애플리케이션의 상태를 관리하고 업데이트하는 데 도움이 되는 JavaScript 상태 관리 라이브러리입니다. Redux의 핵심 개념은 전체 애플리케이션의 상태를 포함하는 JavaScript 객체인 Store입니다. Redux는 작업과 감속기를 사용하여 저장소의 상태를 업데이트합니다. 애플리케이션에서 이벤트가 발생하면 이벤트 유형과 관련 데이터를 설명하는 작업 개체를 만들 수 있습니다. 그런 다음 이 액션 개체를 리듀서 함수에 전달하면 액션 유형에 따라 저장소의 상태가 업데이트됩니다. 리듀서 함수는 현재 상태와 액션 객체를 매개변수로 받고 새로운 상태 객체를 반환합니다. Redux의 작동 원리는 다음 단계로 요약할 수 있습니다. 1. 전체 애플리케이션의 상태를 포함하는 저장소 개체를 만듭니다. 2. 애플리케이션의 이벤트를 설명하는 작업 개체를 정의합니다. 3. 액션 유형에 따라 스토어의 상태를 업데이트하는 리듀서 함수를 생성합니다. 4. 액션 객체를 리듀서 함수에 전달하면 새로운 상태 객체가 반환됩니다. 5. 새 상태 개체와 일치하도록 저장소의 상태를 업데이트합니다. 6. 상태가 변경될 때 UI를 업데이트하려면 애플리케이션에서 스토어의 변경 사항을 구독하세요.

Redux의 장점은 애플리케이션 상태를 더 잘 구성하고 관리하는 데 도움이 되어 애플리케이션을 더 예측 가능하고 유지 관리하기 쉽게 만든다는 것입니다. 동시에 Redux는 React와 같은 프레임워크 및 라이브러리와 통합될 수도 있으므로 Redux를 사용하여 애플리케이션 상태를 더 쉽게 관리할 수 있습니다.

첫 번째 주간 시험 2205A

56. 박스모델에 대한 당신의 이해를 말해주십시오.

상자 모델은 웹 페이지의 각 요소가 네 개의 테두리, 내부 여백, 외부 여백 및 콘텐츠 영역으로 구성된 직사각형 상자로 간주됨을 의미합니다. 이 모델은 웹 페이지 요소의 레이아웃과 스타일을 더 잘 이해하고 제어하는 데 도움이 될 수 있습니다. 구체적으로 박스 모델은 다음과 같은 부분을 포함합니다. 1. 콘텐츠 영역(content): 텍스트, 그림 등 요소의 실제 콘텐츠입니다. 2. Padding : 콘텐츠 영역과 테두리 사이의 여백은 padding 속성을 설정하여 조절할 수 있습니다. 3. 테두리: 콘텐츠 영역과 패딩을 둘러싸는 선은 테두리 속성을 설정하여 제어할 수 있습니다. 4. 여백: 테두리와 인접 요소 사이의 공백은 여백 속성을 설정하여 제어할 수 있습니다. 실제 응용에서는 박스 모델의 다양한 속성을 설정하여 요소의 크기, 위치, 테두리 스타일, 배경색 등을 제어할 수 있습니다. 동시에 상자 모델은 CSS 레이아웃의 기초이기도 하며 상자 모델을 합리적으로 사용하면 다양하고 복잡한 레이아웃 효과를 얻을 수 있습니다.

57. CSS의 선택자는 무엇입니까? 우선순위? 어느 것이 상속될 수 있나요?

CSS 선택자는 다음과 같습니다. 1. 요소 선택기(element selector): p, div, a 등 요소 이름으로 요소를 선택합니다. 2. 클래스 선택자(class selector) : .class와 같이 "."으로 시작하는 클래스 이름으로 요소를 선택합니다. 3. ID 셀렉터(ID selector) : #id와 같이 "#"으로 시작하는 ID로 요소를 선택합니다. 4. 속성 선택자(attribute selector) : [type="text"]와 같이 요소의 속성을 통해 요소를 선택합니다. 5. 의사 클래스 선택기(pseudo-class selector): :hover, :active, :visited 등과 같이 상태별로 요소를 선택합니다. 6. 의사 요소 선택자(pseudo-element selector): ::before, ::after 등 요소의 특정 부분을 선택하는 데 사용됩니다. CSS 선택기의 우선순위는 높음부터 낮음입니다: 1. !important 2. 인라인 스타일(스타일 속성) 3. ID 선택기 4. 클래스 선택기, 속성 선택기, 의사 클래스 선택기 5. 요소 선택기, 의사 클래스가 수행하는 CSS 속성 요소 선택자는 다음과 같이 상속할 수 있습니다. 1. 글꼴 모음 속성(글꼴 모음, 글꼴 크기, 글꼴 두께 등) 2. 텍스트 모음 속성(텍스트 정렬, 텍스트 들여쓰기, 텍스트 장식 등) 3 .색상 속성(color, background-color 등) 4. 목록 속성(list-style-type, list-style-image 등) 5. 테이블 레이아웃 속성(border-collapse, border-spacing 등) 6. 기타 속성(가시성, 커서 등)

58. 요소를 수평 및 수직으로 중앙에 배치하는 방법은 무엇입니까? 요소의 너비와 높이가 가변적이면 어떻게 되나요?

요소를 수평 및 수직으로 중앙에 배치하는 방법에는 여러 가지가 있습니다: 1. 플렉스 레이아웃 사용: 상위 요소를 표시하도록 설정: flex;, justify-content: center; 및 align-items: center;를 설정하여 수평 및 수직 중앙 정렬을 달성합니다. 2. 절대 위치 지정 사용: 상위 요소를 상대 위치로 설정하고, 하위 요소를 절대 위치로 설정하고, 위쪽: 50%, 왼쪽: 50%;를 설정한 다음 변환 사용: 변환(-50%, -50%) ; 수평 및 수직 센터링이 가능합니다. 3. 테이블 레이아웃 사용: 상위 요소를 표시하도록 설정: table;, 하위 요소를 표시하도록 설정: table-cell; 그리고 수직 정렬: 중간 및 텍스트 정렬: 중앙;을 설정하여 수평 및 수직 중앙 정렬을 구현합니다.

요소의 너비와 높이가 가변적인 경우 다음 방법을 사용할 수 있습니다: 1. 플렉스 레이아웃 사용: 상위 요소를 표시하도록 설정: flex; 및 justify-content: center; 및 align-items: center; 및 하위 요소를 flex로 설정: 1 ; 수평 및 수직 센터링을 달성할 수 있습니다. 2. 절대 위치 지정 사용: 상위 요소를 상대 위치로 설정하고, 하위 요소를 절대 위치로 설정하고, 위쪽: 50%, 왼쪽: 50%;를 설정한 다음 변환 사용: 변환(-50%, -50%) , 최대 너비: 100%, 최대 높이: 100%, 수평 및 수직 중앙 정렬 가능 3. 테이블 레이아웃 사용: 표시할 상위 요소 설정: table;, 표시할 하위 요소 설정: table-cell; , 그리고 수직 정렬: 중간; 및 텍스트 정렬: 중앙;을 설정한 다음 최대 너비: 100% 및 최대 높이: 100%;를 사용하여 수평 및 수직 중앙 정렬을 달성합니다.

59. 리플로우와 리드로를 어떻게 이해하나요? 어떤 상황에서 발동되나요?

리플로우와 다시 그리기는 브라우저가 페이지를 렌더링할 때 중요한 두 가지 개념입니다. 리플로우는 페이지에 있는 요소의 위치와 크기가 변경되면 브라우저가 요소의 위치와 크기를 다시 계산한 다음 전체 페이지를 다시 레이아웃해야 한다는 것을 의미합니다. 이 프로세스가 리플로우입니다. 리플로우로 인해 페이지가 다시 렌더링되므로 성능이 더욱 집약됩니다. 다시 그리기는 페이지에 있는 요소의 스타일 속성이 변경될 때 브라우저가 요소의 위치와 크기를 다시 계산하지 않고 해당 요소의 스타일만 다시 그리면 된다는 의미입니다. 이 프로세스를 다시 그리기라고 합니다. 리드로잉은 리플로우보다 비용이 저렴합니다.

리플로우 및 다시 그리기는 다음 시나리오에서 트리거됩니다. 1. 페이지가 처음으로 로드되면 브라우저가 리플로우 및 다시 그리기를 수행해야 합니다. 2. 페이지에 있는 요소의 위치, 크기, 내용 및 기타 속성이 변경되면 리플로우 및 다시 그리기가 트리거됩니다. 3. 페이지 요소의 스타일 속성이 변경되면 다시 그리기가 시작됩니다. 4. 브라우저 창의 크기가 변경되면 리플로우 및 다시 그리기가 트리거됩니다. 5. 페이지가 스크롤되면 다시 그리기가 트리거됩니다.

따라서 페이지를 작성할 때 잦은 리플로우와 다시 그리기를 피하도록 노력해야 하며 다음과 같은 방법으로 페이지 성능을 최적화할 수 있습니다. 1. CSS3의 변형 및 불투명도 속성을 사용하여 애니메이션 효과를 얻고 위치 및 부동과 같은 속성의 사용을 피합니다. 2. 위치 요소에 절대 또는 고정 위치를 사용하고 여백 및 패딩과 같은 속성을 사용하지 마십시오. 3. DOM 요소의 스타일 속성을 자주 수정하지 않으려면 여러 수정 작업을 하나의 작업으로 결합할 수 있습니다. 4. 가상 목록과 같은 기술을 사용하여 대량의 데이터 렌더링을 최적화합니다.

60. 반응형 디자인이란 무엇입니까? 반응형 디자인의 기본 원칙은 무엇입니까? 수행하는 방법?

반응형 디자인은 웹사이트가 다양한 기기(예: 데스크톱 컴퓨터, 태블릿 컴퓨터, 휴대폰 등)에서 최상의 사용자 경험을 제공할 수 있도록 하는 웹 디자인 방법입니다. 반응형 디자인의 기본 원리는 CSS 미디어 쿼리, 탄력적 그리드 레이아웃 등의 기술을 사용하여 화면 크기에 따라 웹 페이지의 레이아웃, 글꼴 크기, 그림 크기 및 기타 요소를 자동으로 조정하여 다양한 장치의 화면에 적응하는 것입니다. 다양한 장치 크기 및 해상도의 해상도.
要做好响应式设计，需要遵循以下几个步骤： 1. 设计弹性网格布局：使用相对单位（如百分比、em等）来定义网页元素的大小和位置，以适应不同设备的屏幕大小。 2. 使用CSS媒体查询：根据不同设备的屏幕大小和分辨率，使用CSS媒体查询来调整网页的布局、字体大小、图片大小等元素。 3. 优化图片大小：使用适当的图片格式和压缩技术来减小图片的大小，以提高网页加载速度。 4. 测试和优化：在不同设备上测试网页的响应式设计效果，并根据测试结果进行优化，以提高用户体验。

61、说一下对盒子模型的理解？

1、盒子模型就是指的在网页中，每个元素都被看做是一个矩形的盒子，包含了内容、内边距、边框和外边距四个部分，其中，内容区域是元素实际显示内容的区域，内边距是内容区域与边框之间的距离，边框是围绕内容和内边距的线条，外边距是边框与相邻元素之间的距离。

2、盒子模型的大小由元素的高度和宽度属性决定，但是实际大小还要加上内边距、边框和外边距的值，在css中，可以通过box-sizing属性来控制盒子模型的计算方式。有两种取值：content-box和border-box。content-box表示盒子模型的大小只包括内容区域，而border-box表示盒子模型的大小包括内容区域、内边距和边框，但不包括外边距。

3、盒子模型在网页布局中非常重要，可以通过设置元素的宽度、高度、内边距、边框和外边距等属性来实现各种布局效果。同时，盒子模型还可以通过CSS的定位属性来控制元素的位置和层级关系。

62、如何让一个盒子水平垂直居中，有哪些方法？

使用flex布局，将父容器设置为display:flex，然后使用justify-content:center和align-items:center来实现水平垂直居中

使用绝对定位，将盒子的left和top属性设置为50%，然后使用transform:translate(-50%,-50%)来实现水平垂直居中。

테이블 레이아웃을 사용하고 상위 컨테이너를 디스플레이:테이블로 설정한 다음 상자를 디스플레이:테이블-셀로 설정하고 수직 정렬:중간 및 텍스트 정렬:중심을 사용하여 수평 및 수직 중앙 정렬을 구현합니다.

63. JavaScript의 데이터 유형과 이를 저장하는 방법에 대해 알려주십시오.

JavaScript에는 다음과 같은 7가지 데이터 유형이 있습니다.

기본 데이터 유형: 숫자, 문자열, 부울, Null, 정의되지 않음, 기호(ES6의 새로운 기능)

참조 데이터 유형: 개체.

기본 데이터 타입의 값은 스택 메모리에 저장되고, 참조 데이터 타입의 값은 힙 메모리에 저장되며, 힙 메모리의 실제 데이터에 대한 포인터는 스택 메모리에 저장됩니다.

기본 데이터 유형의 변수를 생성하면 스택 메모리에 공간이 할당되고 이 공간에 값이 저장됩니다.

참조 데이터 유형의 변수를 생성하면 스택 메모리에 공간이 할당되고, 이는 힙 메모리에 실제 데이터에 대한 포인터를 저장하고 실제 데이터는 힙 메모리에 저장됩니다.

64. 반응성을 어떻게 이해하나요? 그것을 달성하는 방법은 무엇입니까? 차이점이 뭐야?

1. 반응형 웹사이트는 일종의 네트워크 페이지 디자인 레이아웃으로, 페이지 디자인 및 개발은 사용자 행동 및 기기 환경(시스템 플랫폼, 화면 크기, 화면 방향 등)에 따라 반응하고 조정되어야 합니다.

2. 미디어 쿼리: @media를 사용하여 다양한 화면 크기에 따라 다양한 스타일을 정의합니다.

3. 백분율: 포함 블록의 측정 단위를 기준으로 백분율을 속성에 설정하여 다양한 화면에 적용합니다.

4. vw/vh: 브라우저 창 크기에 따라 조정될 수 있는 뷰포트 단위

5. rem: 루트 요소의 글꼴 크기에 상대적인 단위를 나타냅니다. rem은 상대적인 단위일 뿐입니다.

65. CSS 성능 최적화의 일반적인 방법은 무엇이며 이를 달성하는 방법은 무엇입니까?

1. 과도한 제약을 피하라

2. 자손 선택자를 피하세요

3. 간결한 구문을 사용하세요

4. 불필요한 네임스페이스를 피하세요

5. 불필요한 반복을 피하세요

6. 의미론적 이름을 사용하여 정의하는 것이 가장 좋습니다.

7. !important를 피하세요. 다른 선택자를 선택할 수 있습니다.

8. 규칙을 최대한 간소화하고 다양한 유형의 반복 규칙을 병합합니다.

66. 데이터 유형을 판단하는 방법은 무엇입니까? 차이점이 뭐야?

1、종류 ：

a. 데이터 유형을 판단할 수 있으며, 데이터 유형을 나타내는 문자열을 반환하며, 반환된 결과에는 숫자, 부울, 문자열, 함수, 개체, 정의되지 않음만 포함될 수 있습니다.

b. typeof를 사용하여 변수가 존재하는지 확인할 수 있습니다.

c. typeof 연산자의 문제점은 참조된 객체의 유형에 관계없이 객체를 반환한다는 것입니다.

2, instanceof 방법:

일반적으로 참조 데이터 유형을 감지하는 데 사용되는 표현식은 다음과 같습니다. B 의 인스턴스 , A가 B의 인스턴스인지 확인하기 위해 A가 B의 인스턴스이면 true를 반환하고, 그렇지 않으면 false를 반환합니다. 데이터 유형은 구성에 따라 결정됩니다. 유형

3, constructor 방법:

constructor는 생성자를 가리키는 프로토타입 객체의 속성입니다.

4. 무적의 전능한 메소드: jquery.type()

객체가 정의되지 않았거나 null인 경우 그에 따라 "정의되지 않음" 또는 "null"을 반환합니다.

객체에 브라우저의 내장 객체 [[클래스]]와 동일한 내부 [[클래스]]가 있는 경우 해당 [[클래스]] 이름을 반환합니다.

67. 바인딩, 호출, 적용의 차이점은 무엇입니까? 바인드 메소드를 구현하는 방법은 무엇입니까?

1. call, apply, 의 기능은 bind함수 실행의 맥락을 바꾸는 것, 즉 함수 실행의 this방향을 바꾸는 것입니다.

2. apply두 개의 매개변수를 받습니다. 첫 번째 매개변수는 this포인터이고 두 번째 매개변수는 함수가 허용하는 매개변수로 배열 형태로 전달됩니다. this포인터를 변경한 후 원래 함수가 즉시 실행됩니다. 이 메서드는 일시적으로 this포인터를 한 번만 변경합니다.

3. call메소드의 첫 번째 매개변수도 this포인터이고 매개변수 목록은 나중에 전달됩니다. 포인터를 apply변경한 후 원래 함수가 즉시 실행되며 this이 메소드는 this포인터를 일시적으로 한 번만 변경합니다. 첫 번째 매개 변수 가 이면 null, undefined시간, 기본값은 window(브라우저에서) 를 가리킵니다.

4. 바인드 메소드는 호출과 매우 유사합니다. 첫 번째 매개변수도 this포인터이고 매개변수 목록도 나중에 전달됩니다.(그러나 이 매개변수 목록은 여러 번 전달될 수 있습니다.) this포인터를 변경한 후에는 포인터가 변경되지 않습니다. 즉시 실행되지만 this함수가 가리키는 영구적인 변경 사항이 반환됩니다.

5. 차이점:

세 가지 모두 함수 this가 가리키는 객체를 변경할 수 있습니다.

셋 중 첫 번째 매개변수가 this가리키는 객체인데, 해당 매개변수가 없거나 매개변수가 undefinedor 인 경우 null기본적으로 전역변수를 가리킨다.window

세 가지 모두 매개변수를 전달할 수 있지만 apply배열이지만 매개변수 목록 call이고 apply합계 call는 일회성 들어오는 매개변수이지만 bind여러 개의 들어오는 매개변수로 분할될 수 있습니다.

bind바인딩 후 함수를 반환하는 것, apply, call즉시 실행하는 것

this포인트 수정
매개변수를 동적으로 전달

// 방법 1: 바인드에서 함수 매개변수만 전달 
fn.bind(obj,1,2)() 
//
방법 2: 바인드에서 함수 매개변수를 전달하고 반환 함수 
fn.bind(obj, 1 에도 매개변수 전달 )(2)

호환 new키워드

전체 구현 코드는 다음과 같습니다.

Function.prototype.myBind = function (context) { 
    // 호출 객체가 함수인지 확인합니다. 
    if (typeof this !== "function") { 
        throw new TypeError("Error"); 
    } 
//
    매개변수 가져오기 
    const args = [ ...인수].slice(1), 
          fn = this; 
return
    function Fn() { 
//
        호출 메서드에 따라 다른 바인딩 값을 전달합니다. 
        return fn.apply(이 Fn 인스턴스 ? new fn(... 인수) : 컨텍스트, args.concat(...arguments)); 
    } 
}

68. 폐쇄를 어떻게 이해하나요? 폐쇄 적용 시나리오는 무엇입니까?

1. 함수는 주변 상태(어휘 환경, 어휘 환경)에 대한 참조와 함께 번들로 제공됩니다(또는 함수가 참조로 둘러싸여 있음). 이러한 조합은 클로저(클로저)입니다. 즉, 클로저는 다음을 허용합니다. 내부 함수에서 외부 함수의 범위

2. 적용 시나리오:

개인 변수를 생성하고,

변수의 수명 연장

캐시 데이터

콜백 함수 구현

69. 이벤트 프록시란 무엇인지 간략하게 설명해주세요.

1. 이벤트 위임(Event Delegation), 이벤트 위임이라고도 합니다. JavaScript에서 일반적으로 사용되는 바인딩 이벤트에 대한 일반적인 기술입니다. 이름에서 알 수 있듯이 "이벤트 프록시"는 원래 하위 요소에 바인딩되어야 하는 응답 이벤트(클릭, 키다운...)를 상위 요소에 위임하고 상위 요소가 이벤트 모니터링 역할을 맡도록 하는 것입니다. . 이벤트 프록시의 원리는 DOM 요소의 이벤트 버블링입니다.

70. 흔들림 방지 및 스로틀링이란 무엇입니까? 차이점이 뭐야? 달성하는 방법?

1. 흔들림 방지는 이벤트가 발생한 후 n몇 초 후에 콜백이 실행되는 것을 의미하며, n이 초 내에 이벤트가 다시 트리거되면 타이밍이 다시 시작됩니다.

2. 스로틀링은 이벤트가 n초 후에 실행됨을 의미하며, n초 내에 반복적으로 트리거되면 타이밍이 다시 조정되므로 일정 기간 내에 이벤트의 트리거 빈도를 줄일 수 있습니다.

3. 차이점:

같은 점:

setTimeout다음을 사용하여 달성 할 수 있습니다 .

목적은 콜백 실행 빈도를 줄이는 것입니다. 컴퓨팅 리소스를 절약하세요.

차이점:

손떨림 방지 기능은 일정 기간 동안 연속 작동한 후 콜백을 처리하고 사용 clearTimeout및 setTimeout구현합니다. 기능 조절은 연속 작업에서 일정 시간에 한 번만 실행되며, 성능 향상을 위해 빈도가 높은 이벤트에 사용됩니다.

손떨림 방지 기능은 일정 시간 동안 지속적으로 발생하는 이벤트에 중점을 두고 마지막에 한 번만 실행되는 반면, 조절 기능은 일정 시간에 한 번만 실행됩니다.

예를 들어 시간 빈도를 500ms로 설정하고 2초 이내에 500ms마다 함수가 자주 트리거되어 조절되고 실행됩니다. 흔들림 방지, 메서드를 아무리 호출해도 2초 후에 한 번만 실행됩니다.

4. 적용 시나리오:

지속적인 흔들림 방지 이벤트에서는 다음 시나리오에서 하나의 콜백만 트리거되어야 합니다.

검색 상자 검색 입력. 요청을 보내기 전 마지막 시간을 사용자만 입력하면 됩니다.

휴대폰번호, 이메일 인증 입력 감지

창 크기 resize. 창 크기 조정이 완료된 후 창 크기를 계산하십시오. 다시 렌더링을 방지합니다.

조절이 일정 간격으로 콜백을 실행하는 시나리오는 다음과 같습니다.

스크롤하여 로드하거나, 더 로드하거나, 맨 아래로 스크롤하여 들어보세요.

검색창, 검색연계 기능

71. 스코프체인에 대해 어떻게 이해하고 계시나요?

1. 현재 범위에서 필요한 변수를 찾으십시오. 그러나 该作用域没有이 변수는 이 변수입니다 自由变量. 自己作用域找不到이 변수 에서 去父级作用域查찾아 검색 하면 依次向上级作用域창 객체에 접근할 때까지 종료되는데, 레이어별 관계는 다음과 같습니다.作用域链。

2. 스코프 체인의 역할은 실행 환경이 접근하는 모든 변수와 함수에 순차적으로 접근할 수 있도록 하는 것이며, 스코프 체인을 통해 외부 환경의 변수와 함수에 접근할 수 있다. 범위 체인은 본질적으로 변수 개체에 대한 포인터 목록입니다. 변수 객체는 실행 환경의 모든 변수와 함수를 포함하는 객체입니다. 범위 체인의 프런트 엔드는 항상 현재 실행 컨텍스트의 변수 개체입니다.

72. 프로토타입과 프로토타입 체인에 대한 이해를 말해준다면?

1. 프로토타입:

JS가 생성자(객체를 인스턴스화하는 데 사용되는 함수)를 선언하면 원래 함수의 프로토타입인 해당 객체가 메모리에 생성됩니다. 생성자에는 기본적으로 프로토타입 속성이 있으며 프로토타입 값은 함수의 프로토타입을 가리킵니다. 동시에 프로토타입에는 생성자 속성도 있으며 생성자의 값은 함수 개체를 가리킵니다.

생성자를 통해 인스턴스화된 객체에는 프로토타입 속성이 없고 기본적으로 proto 속성이 있으며 proto 값은 생성자의 프로토타입을 가리킵니다. 프로토타입 객체에 추가되거나 수정된 속성은 인스턴스화된 모든 객체에서 공유될 수 있습니다.

기능: 데이터 공유, 메모리 공간 절약, 상속 실현

2. 프로토타입 체인 :

인스턴스화된 객체의 속성에 접근할 때 먼저 객체 내부(자신의 속성)를 검색합니다. 찾을 수 없으면 proto가 가리키는 프로토타입에서 검색합니다. 그래도 찾을 수 없으면 proto 가 가리키는 상위 프로토타입 에서 Object.prototype.proto ( 값이 null임)를 찾을 때까지 검색합니다 . 이 체인 프로세스가 프로토타입 체인입니다.

기능: 객체의 속성 메소드 찾기

73. vue의 수명주기와 의미는 무엇입니까?

1. vue의 라이프 사이클은 생성 시작, 데이터 초기화, 템플릿 컴파일, DOM에 매달기 및 렌더링, 렌더링 업데이트, 제거까지의 일련의 프로세스를 의미합니다.

2. beforeCreate(): 생성 전, 새로운 vue 인스턴스 이후에는 일부 기본 라이프사이클 후크와 기본 이벤트만 있고 다른 것들은 아직 생성되지 않았습니다. 이 라이프사이클이 실행될 때 데이터 및 메소드의 데이터는 초기화되지 않았습니다. 이 단계에서는 데이터의 데이터와 메소드의 메소드를 사용할 수 없습니다.

3.created(): 생성되었으며, 데이터와 메소드가 초기화되었으며 호출 가능합니다.

4. BeforeMount(): 마운트 전 템플릿이 메모리에 컴파일되었으나 페이지에 마운트되지 않았으며, 이때 페이지는 아직 오래된 상태입니다.

5. Mounted(): 마운트되었으며 Vue 인스턴스가 초기화되었습니다. 이 시점에서 구성 요소는 생성 단계를 떠나 실행 단계로 들어갑니다. 플러그인을 통해 페이지의 DOM 노드를 조작하려는 경우 가장 빠른 이 단계에서 이를 수행할 수 있습니다.

6. beforeupdate(): 업데이트 전, 페이지에 표시된 데이터는 여전히 오래되었고, 데이터의 데이터가 업데이트되었으며, 페이지가 최신 데이터와 동기화되지 않았습니다.

7. update(): 업데이트, 페이지에 표시된 데이터와 데이터의 데이터가 동기화되어 모두 최신 상태로 유지됩니다.

8. beforeDestory(): 소멸 전 Vue 인스턴스는 실행 단계에서 소멸 단계로 들어갑니다. 이때 모든 데이터와 메소드, 명령어, 필터 등을 사용할 수 있습니다. 아직 실제로 파괴되지 않았습니다

9. Destoryed(): Destroyed 상태로 Vue 인스턴스는 실행 단계에서 Destroyed 단계로 들어갑니다. 이때 모든 데이터와 메소드, 명령어, 필터 등을 사용할 수 있습니다. 아직 실제로 파괴되지 않았습니다

74. Vue 사용자 정의 명령어의 후크 기능은 무엇입니까?

바인딩: 지시문이 요소에 처음으로 바인딩될 때 한 번만 호출됩니다. 여기에서 일회성 초기화 설정을 수행할 수 있습니다.

삽입됨: 바인딩된 요소가 상위 노드에 삽입될 때 호출됩니다(상위 노드만 존재한다고 보장되지만 반드시 문서에 삽입될 필요는 없음).

업데이트: 구성 요소의 VNode가 업데이트될 때 호출되지만 해당 하위 VNode가 업데이트되기 전에 발생할 수도 있습니다. 지시어의 값은 변경되었을 수도 있고 변경되지 않았을 수도 있습니다. 하지만 업데이트 전과 후의 값을 비교하여 불필요한 템플릿 업데이트를 무시할 수 있습니다(자세한 후크 기능 매개 변수는 아래 참조).

componentUpdated: 명령이 있는 구성 요소의 VNode와 해당 하위 VNode가 모두 업데이트된 후에 호출됩니다.

unbind: 명령어가 요소에서 바인딩 해제될 때 한 번만 호출됩니다.

75. 자바스크립트 로컬 저장소란 무엇인가요? 차이점과 사용 시나리오는 무엇입니까?

1. javaScript로컬 캐싱의 네 가지 방법을 주로 설명합니다.

쿠키

세션스토리지

로컬스토리지

indexedDB

cookie2. , sessionStorage, 의 주요 차이점은 localStorage다음과 같습니다.

저장소 크기: cookie데이터 크기는 을(를) 초과할 수 없으며 , 4k저장소 크기 제한도 있지만 그보다 훨씬 크며 5M 이상에 도달할 수 있습니다.sessionStoragelocalStoragecookie

유효 시간: localStorage영구 데이터를 저장합니다. 데이터를 적극적으로 삭제하지 않는 한 브라우저를 닫은 후에도 데이터는 손실되지 않습니다. 데이터는 sessionStorage현재 브라우저 창이 닫힌 후 자동으로 삭제됩니다. cookie설정된 cookie만료 시간까지 유효합니다. 창이나 브라우저가 닫혀 있는 경우

데이터와 서버 간의 상호 작용, cookie데이터는 자동으로 서버에 전송되고 서버는 클라이언트 cookie에 기록될 sessionStorage. localStorage데이터는 자동으로 서버에 전송되지 않고 로컬에만 저장됩니다.

3. 잘못된 시나리오에 대한 옵션을 사용하십시오.

사용자를 표시하고 사용자 행동을 추적할 때 사용하는 것이 좋습니다.cookie

로컬 데이터(토큰)의 장기 저장에 적합, 권장localStorage

민감한 계정의 경우 일회성 로그인 권장sessionStorage

대용량 데이터를 저장할 때, 온라인 문서(리치 텍스트 편집기)에 편집 이력을 저장할 때 사용하는 것을 권장합니다.indexedDB

월간 시험 111

76. 재귀에 대한 당신의 이해에 대해 말해주십시오. 재귀를 사용하여 트리 구조 캡슐화를 달성하는 방법을 캡슐화하시겠습니까?

1. 재귀는 자신을 호출하여 문제를 해결하는 알고리즘이나 함수의 구현입니다. 재귀 중에 각 호출은 문제가 직접 해결될 수 있을 만큼 충분히 작은 부분으로 분할될 때까지 문제를 더 작은 하위 문제로 분할합니다.

2. 재귀는 일반적으로 트리 구조 및 그래프 구조와 같은 재귀 구조의 문제를 해결하는 데 사용될 수 있습니다.

77. Link와 @import의 차이점은 무엇입니까?

1. Link와 @import는 모두 외부 리소스를 도입하는 방법이지만 차이점이 있습니다.

차이점:

1. 로딩 시간: 링크 태그는 페이지가 로딩될 때 로딩되고, @import는 페이지가 로딩된 후에 로딩됩니다.

2. 호환성: Link 태그는 호환성이 좋은 HTML 태그이고, @import는 CSS 구문이므로 이전 브라우저와 호환되지 않습니다.

3. 작업 범위: 링크 태그는 CSS, JS, 그림 등 다양한 유형의 파일을 가져올 수 있지만 @import는 CSS 파일만 가져올 수 있습니다.

4. 가중치: Link 태그로 가져온 CSS 파일의 가중치는 @import로 가져온 CSS 파일의 가중치보다 높으므로 스타일이 충돌할 경우 Link 태그로 도입된 스타일이 @import로 도입된 스타일을 재정의합니다.

78. FOUC란 무엇인가? 그것을 피하는 방법?

1. FOUC는 문서 스타일의 일시적인 오류입니다. 즉, 웹페이지가 로드될 때 CSS 파일이 제때 로드되지 않아 페이지에 단기적인 스타일화된 콘텐츠가 표시됩니다.

피하는 방법:

1. CSS 파일을 HTML 문서의 헤드에 배치하여 페이지가 로드될 때 CSS 파일이 먼저 로드되도록 합니다.

2. CSS 가격이 로드될 때 지연을 방지하기 위해 인라인 CSS 스타일을 사용하여 CSS 스타일을 HTML 문서에 직접 삽입합니다.

3. Sass, Less 등 CSS 전처리기를 사용하면 CSS 파일을 단일 CSS 파일로 컴파일하여 HTTP 요청 양을 줄일 수 있습니다.

4. 브라우저 캐시를 사용하여 CSS를 로컬로 캐시하면 페이지 로딩 시간이 단축됩니다.

5. JavaScript를 사용하여 페이지 로드 시 CSS 파일이 로드되었는지 감지합니다. 로드가 완료되지 않으면 CSS 파일이 로드될 때까지 페이지 렌더링이 지연될 수 있습니다.

79. 프리컴파일러에 대해 어떻게 이해하고 계시나요?

1. 프리컴파일러는 소스 코드를 컴파일하기 전에 처리하는 프로그램으로, 매크로 교체, 조건부 컴파일, 헤더 파일 포함 등 일부 전처리 작업을 수행할 수 있습니다. 사전 컴파일러는 컴파일러의 일부로, 컴파일 중에 또는 명령에 의해 자동으로 실행될 수 있습니다.

2. 프리컴파일러의 주요 기능은 소스 코드의 매크로 정의를 실제 코드로 대체하고 헤더 파일의 내용을 소스 코드에 삽입하는 것입니다. 이는 코드 중복을 줄이고 코드 가독성과 유지 관리성을 향상시킵니다.

3. 사전 컴파일러는 조건부 컴파일을 수행하고 다양한 조건부 컴파일 옵션에 따라 다양한 코드를 생성할 수도 있습니다. 이러한 방식으로 다양한 요구 사항에 따라 다양한 코드를 생성할 수 있으며 코드의 유연성과 이식성을 향상시킬 수 있습니다.

80. shouldcomComponentUpdate의 기능은 무엇입니까?

1. shouldComponentUpdate는 구성 요소를 다시 렌더링해야 하는지 여부를 제어하는 데 사용되는 React 수명 주기 메서드 중 하나입니다. 그 기능은 컴포넌트를 다시 렌더링하기 전에 컴포넌트의 props와 상태가 변경되었는지 확인하는 것인데, 변경 사항이 없으면 false를 반환하고 그렇지 않으면 true를 반환하여 컴포넌트를 다시 렌더링해야 한다고 React에 알립니다.

2. shouldComponentUpdate를 사용하면 불필요한 다시 렌더링을 피할 수 있으므로 React 애플리케이션의 성능을 향상시킬 수 있습니다. 컴포넌트의 props나 state가 변경되면 React는 컴포넌트를 다시 렌더링하게 되는데, 컴포넌트의 props나 state가 변경되지 않았다면 다시 렌더링할 필요가 없습니다. 이때 불필요한 re-render를 피하기 위해 shouldComponentUpdate를 사용할 수 있습니다. 표현.

81. React의 트랜잭션 처리 로직 개요?

React의 트랜잭션 처리 로직은 React 컴포넌트의 라이프사이클에서 React가 컴포넌트의 업데이트 프로세스를 관리하기 위해 자동으로 트랜잭션 객체를 생성한다는 것을 의미합니다. 트랜잭션 객체에는 구성 요소 업데이트 중에 특정 작업을 수행하는 일련의 수명 주기 후크 기능이 포함되어 있습니다.

82. React 컴포넌트를 비즈니스 컴포넌트와 기술 컴포넌트로 나누는 것은 무엇입니까?

1. React 컴포넌트는 기능과 용도에 따라 비즈니스 컴포넌트와 기술 컴포넌트로 나눌 수 있습니다.

2. 비즈니스 구성요소란 로그인 상자, 장바구니, 상품 목록 등 비즈니스와 관련된 구성요소를 말합니다. 이러한 구성 요소는 일반적으로 기능적이며 여러 페이지 또는 응용 프로그램에서 공유될 수 있습니다. 비즈니스 구성 요소는 일반적으로 양식, 버튼, 목록 등과 같은 여러 기술 구성 요소로 구성됩니다.

3. 기술구성요소라 함은 양식, 버튼, 목록 등 기술과 관련된 구성요소를 말한다. 이러한 구성 요소는 일반적으로 공통 기능을 가지며 여러 비즈니스 구성 요소에서 공유될 수 있습니다. 기술 구성 요소는 일반적으로 props 및 상태 속성을 통해 상호 작용할 수 있는 HTML, CSS 및 JavaScript 코드로 구성됩니다.

83. React 성능 최적화는 어떤 주기적 기능입니까?

React 성능 최적화는 shouldComponentUpdate 수명 주기 함수에서 수행됩니다. 이 함수는 구성 요소가 업데이트되기 전에 호출되며 false를 반환하여 구성 요소가 다시 렌더링되는 것을 방지하여 애플리케이션의 성능을 향상시킬 수 있습니다. 이 함수에서는 props와 state 전후를 비교하여 컴포넌트를 다시 렌더링할지 여부를 결정할 수 있습니다.

84. Fiber 아키텍처의 이해와 적용 시나리오에 대해 이야기해 주세요.

1. 파이버 아키텍처는 코루틴 기반의 경량 동시성 모델로, 단일 스레드에서 높은 동시 처리 기능을 달성할 수 있습니다.

2. Fiber 아키텍처의 핵심 아이디어는 장기 작업을 여러 개의 작은 작업으로 분해한 다음 이러한 작은 작업 간에 전환하여 동시 처리를 달성하는 것입니다.

Fiber 아키텍처의 적용 시나리오에는 주로 다음과 같은 측면이 포함됩니다.
1. 고도의 동시 네트워크 애플리케이션: 파이버 아키텍처는 단일 스레드에서 많은 수의 네트워크 요청을 처리할 수 있으므로 애플리케이션의 동시 처리 기능이 향상됩니다. 
2. 고성능 데이터베이스 액세스: 파이버 아키텍처는 단일 스레드에서 여러 데이터베이스 요청을 처리할 수 있으므로 데이터베이스 액세스 성능이 향상됩니다. 
3. 대규모 데이터 처리: 파이버 아키텍처는 대규모 데이터 처리 작업을 여러 개의 작은 작업으로 분해하여 데이터 처리 효율성을 향상시킬 수 있습니다. 
4. 실시간 데이터 처리: 파이버 아키텍처는 실시간 모니터링, 실시간 로그 처리 등과 같은 실시간 데이터 처리를 실현할 수 있습니다.

85. React 성능 최적화 솔루션?

PureComponent 또는 shouldComponentUpdate 사용: PureComponent는 React에서 제공하는 성능 최적화 컴포넌트로 자동으로 얕은 비교를 수행합니다. props와 state가 변경되지 않은 경우 해당 컴포넌트는 다시 렌더링되지 않습니다. 공통 구성 요소를 사용하는 경우 shouldComponentUpdate 메서드를 수동으로 구현하여 사용자 정의 비교 논리를 수행할 수 있습니다.

React.memo 사용: React.memo는 React에서 제공하는 상위 컴포넌트로 컴포넌트의 렌더링 결과를 캐시할 수 있으며, props가 변경되지 않은 경우 컴포넌트를 다시 렌더링하지 않고 캐시된 결과를 직접 반환합니다.

렌더링 메소드에서 복잡한 계산 및 작업을 수행하지 마십시오. 렌더링 메소드는 구성 요소가 업데이트될 때마다 호출됩니다. 복잡한 계산 및 작업이 수행되면 구성 요소의 성능에 영향을 미칩니다. 이러한 계산 및 작업은 구성 요소의 수명 주기 방법에 배치되거나 메모 기술을 사용하여 캐시될 수 있습니다.

React.lazy 및 Suspense 사용: React.lazy는 React에서 제공하는 지연 로딩 구성 요소로, 사용해야 할 때까지 구성 요소 로드를 지연시킬 수 있습니다. Suspense는 React에서 제공하는 컴포넌트로, 컴포넌트가 로드될 때 로딩 상태를 표시하고, 컴포넌트를 표시하기 전에 해당 컴포넌트가 로드될 때까지 기다릴 수 있습니다.

shouldComponentUpdate 및 React.memo를 사용한 성능 테스트: React의 성능 테스트 도구를 사용하여 테스트하고 최적화해야 할 구성 요소를 찾은 다음 shouldComponentUpdate 또는 React.memo를 사용하여 최적화할 수 있습니다.

성능 분석을 위해 React의 프로파일러 도구 사용: React는 개발자가 구성 요소의 렌더링 성능을 분석하고 어떤 구성 요소를 최적화해야 하는지 찾는 데 도움이 되는 프로파일러 도구를 제공합니다.

86. Flux와 CSS 렌더링 과정을 간략하게 설명해주세요.

Flux는 확장 가능한 웹 애플리케이션을 구축하기 위한 아키텍처 패턴입니다. 핵심 아이디어는 단방향 데이터 흐름입니다. 즉, 데이터는 한 곳에서 다른 곳으로만 흐를 수 있어 데이터 혼란과 불일치를 피할 수 있습니다.

CSS 렌더링 프로세스는 HTML 문서와 CSS 스타일 시트를 결합하여 시각적 웹 페이지를 생성하는 것입니다. 구체적인 과정은 다음과 같습니다.
1. 브라우저는 HTML 문서를 구문 분석하고 DOM 트리를 구축합니다. 
1. 브라우저는 CSS 스타일 시트를 구문 분석하고 CSSOM 트리를 구축합니다. 
1. DOM 트리와 CSSOM 트리를 결합하여 렌더링 트리를 생성합니다. 
1. 렌더링 트리의 노드 정보에 따라 각 노드의 위치와 크기를 계산합니다. 
1. 렌더링 트리의 노드를 화면에 그려 최종 웹 페이지를 생성합니다.

87. DOM0, DOM2, DOM3 이벤트 처리의 차이점은 무엇입니까?

DOM0, DOM2 및 DOM3은 다양한 버전의 JavaScript DOM(Document Object Model) 이벤트 처리 사양을 나타냅니다.

1. DOM0 이벤트 처리: DOM0 이벤트 처리에서는 DOM 요소의 속성에 이벤트 핸들러를 직접 할당합니다.

2. DOM2 이벤트 처리: DOM2 이벤트 처리 사양에는 동일한 요소에 여러 이벤트 핸들러를 추가할 수 있는 addEventListener() 및 RemoveEventListener() 메서드가 도입되었습니다.

3. DOM3 이벤트 처리: DOM3 이벤트 처리 사양에는 더 많은 이벤트 유형과 더 많은 이벤트 핸들러 옵션이 도입되었습니다.

88. 페이지가 아래쪽으로 스크롤되는지 판단하는 방법과 페이지의 요소가 시각화 영역에 들어가는지 판단하는 방법은 무엇입니까?

페이지가 아래쪽으로 스크롤되는 것으로 판단하는 방법은 다음과 같습니다.

페이지의 스크롤 높이(scrollTop), 페이지의 표시 높이(clientHeight) 및 페이지의 전체 높이(scrollHeight)를 가져옵니다.

scrollTop + clientHeight가 scrollHeight와 같은지 확인하여 같으면 페이지가 아래쪽으로 스크롤되었음을 의미합니다.

페이지의 요소가 시각적 영역에 들어가는지 여부를 판단하는 방법은 다음과 같습니다.

1. 요소의 offsetTop, offsetLeft, offsetWidth 및 offsetHeight를 포함한 요소의 위치 정보를 얻습니다.

페이지 스크롤 높이 scrollTop 및 페이지 표시 높이 clientHeight를 가져옵니다.

요소의 위치 정보가 scrollTop과 scrollTop + clientHeight 사이에 있는지 확인하고, 그렇다면 해당 요소가 시각화 영역에 진입했음을 의미합니다.

89. 브라우저 이벤트 루프와 nodejs의 이벤트 루프의 차이점에 대해 알려주십시오.

1. 브라우저 이벤트 루프와 nodejs의 이벤트 루프의 주요 차이점은 구현 및 운영 환경에 있습니다.

2. 브라우저 이벤트 루프는 JavaScript 코드 실행 및 이벤트 처리를 담당하는 단일 스레드 JavaScript 엔진을 기반으로 구현됩니다.

3. 브라우저의 이벤트 루프에는 주로 매크로 작업과 마이크로 작업이라는 두 가지 유형의 작업 대기열이 포함됩니다. 매크로 작업에는 setTimeout, setInterval, DOM 이벤트 등이 포함되고 마이크로 작업에는 Promise, MutationObserver 등이 포함됩니다. 각 이벤트 루프에서는 모든 마이크로태스크가 먼저 실행되고, 그 다음 매크로태스크가 실행되고, 그런 다음 모든 마이크로태스크가 실행되는 식입니다.

4. nodejs의 이벤트 루프는 JavaScript 코드 실행과 I/O 작업 처리를 담당하는 멀티 스레드 C++를 기반으로 구현됩니다.

5. nodejs의 이벤트 루프는 주로 타이머, 콜백 보류, 유휴, 준비, 폴링 및 확인의 6단계로 구성됩니다. 각 단계에서 이벤트 루프는 모든 작업이 실행될 때까지 해당 작업 큐를 실행합니다.

90. vue-router의 기본 구현 원리에 대해 알려주십시오.

1. Vue-router의 기본 구현 원리는 주로 Vue.js의 반응형 시스템과 라우팅의 해시 모드 또는 히스토리 모드를 기반으로 합니다.

2. Vue.js의 각 구성 요소에는 반응형 상태 개체가 있으며, 상태가 변경되면 Vue.js가 자동으로 보기를 업데이트합니다. Vue-router는 이 기능을 사용하여 응답 상태 객체에 라우팅 정보를 저장합니다. 라우팅이 변경되면 Vue.js는 자동으로 뷰를 업데이트합니다.

3. 해시 모드에서 Vue-router는 브라우저의 해시 변경 이벤트를 수신하며, 해시가 변경되면 Vue-router는 새로운 해시 값에 따라 라우팅 상태 객체를 업데이트하고 뷰 업데이트를 트리거합니다.

4. 기록 모드에서 Vue-router는 HTML5 기록 API를 사용하여 pushState 및 replacementState 메서드를 통해 브라우저의 URL을 변경하고 동시에 라우팅 상태 개체를 업데이트하며 보기 업데이트를 트리거합니다.

5. 사용자가 URL을 수동으로 수정하여 라우팅 상태 객체와 뷰 사이에 불일치가 발생하는 것을 방지하기 위해 Vue-router는 popstate 이벤트를 사용하여 브라우저의 뒤로 및 앞으로 작업을 모니터링하여 라우팅 상태 개체 및 시간별 보기.

6. 또한 Vue-router는 라우팅 가드, 동적 라우팅, 중첩 라우팅 및 기타 기능도 제공하며 이러한 기능의 구현은 Vue.js의 응답 시스템 및 라우팅 모드의 특성을 기반으로 합니다.

91. Vuex의 구현 원리에 대해 알려주세요. 커밋 및 디스패치 메서드는 어떻게 구현되나요?

1. Vuex는 상태 관리 라이브러리로, 구현 원리는 Vue.js의 반응형 시스템과 단방향 데이터 흐름 모드를 기반으로 합니다.

2. Vuex는 store라는 중앙 저장소에 애플리케이션 상태를 저장합니다. 구성 요소는 getter 및 변형을 통해 저장소의 상태에 액세스하고 수정할 수 있으며 작업은 비동기 작업에 사용될 수 있습니다.

4. commit 방식은 mutation을 제출하는 방식으로, mutation 이름과 페이로드(선택 사항)라는 두 개의 파라미터를 받습니다. commit 메소드가 호출되면 Vuex는 스토어에서 해당 변이를 찾아 실행하여 스토어의 상태를 수정합니다.

5. 디스패치 메서드는 작업을 트리거하는 데 사용되며 작업 이름과 페이로드(선택 사항)라는 두 가지 매개 변수를 받습니다. 디스패치 메서드가 호출되면 Vuex는 저장소에서 해당 작업을 찾아 실행하여 비동기 작업이나 기타 부작용을 트리거합니다.

92. A, B, C 세 개의 컴포넌트가 있는데, A 컴포넌트는 B 컴포넌트 캐시로 점프하고, A 컴포넌트는 캐싱 없이 C 컴포넌트로 점프하는데, 어떻게 달성하나요?

1. 라우팅 구성에서 태그를 사용하여 <keep-alive>구성 요소 캐싱을 구현할 수 있습니다.

2. 라우팅 구성에서 캐시해야 하는 구성 요소를 <keep-alive>태그로 래핑하고 include속성을 캐시해야 하는 구성 요소의 이름으로 설정합니다.

3. 구성 요소에서 activated수명 주기 deactivated후크를 사용하여 캐싱이 필요한지 여부를 결정합니다. 캐싱이 필요한 경우 activatedHook 에 $route.meta.keepAlive설정 하고 true, deactivatedHook에 설정합니다.false

4. 점프할 때 캐싱이 필요한 컴포넌트의 이름에 따라 캐싱이 필요한지 여부를 판단합니다. 캐싱이 필요한 경우 점프할 때로 $route.meta.keepAlive설정 되고 true, 그렇지 않으면 다음으로 설정됩니다.false

6학년 둘째 주

93. MVVM에 대한 이해?

1. MVVM은 애플리케이션을 모델 모델, 뷰 뷰, 뷰 모델 ModelView의 세 부분으로 나누는 소프트웨어 아키텍처 패턴입니다. 그 중 모델은 애플리케이션의 데이터와 비즈니스 로직을 나타내고, 뷰는 사용자 인터페이스를 나타내며, 뷰 모델은 모델과 뷰를 연결하는 미들웨어이다.

2. MVVM에서 뷰 모델은 모델의 데이터를 뷰가 사용할 수 있는 형식으로 변환하고, 뷰에서 사용자 작업을 모델이 이해할 수 있는 모드로 변환하는 역할을 담당합니다. 뷰와 모델 간의 통신 처리(예: 데이터 바인딩, 명령 바인딩 등)

3. MVVM의 장점은 무엇인가요?

1. 관심사의 분리: 애플리케이션의 데이터와 비즈니스 로직을 사용자 인터페이스에서 분리하여 코드를 더 명확하고 이해하기 쉽게 만듭니다.

2. 테스트 가능성: 뷰 모델과 뷰 및 모델 간의 통신은 데이터 바인딩 및 명령 바인딩을 통해 구현되므로 뷰 모델의 단위 테스트가 더 쉽습니다.

3. 유지 관리성: MVVM은 애플리케이션을 세 부분으로 나누기 때문에 애플리케이션을 유지 관리하고 확장하기가 더 쉽습니다.

94. Vue 라이프사이클에 대해 어떻게 이해하고 계시는지 자세히 설명해 주세요.

Vue 라이프 사이클은 Vue 인스턴스의 생성부터 소멸까지의 전체 과정을 의미하며, Vue 라이프 사이클은 8단계로 구분됩니다.

1. beforeCreate : 인스턴스가 생성되기 전에 호출되며 이때는 인스턴스의 데이터와 메소드가 초기화되지 않아 데이터, 계산, 메소드 등의 속성에 접근할 수 없다.

2. 생성됨: 인스턴스가 생성된 후 호출되며, 이때 인스턴스의 데이터와 메소드가 초기화되었으나 DOM이 렌더링되지 않아 DOM 요소에 접근할 수 없습니다.

3. beforeMount: DOM이 마운트되기 전에 호출되며, 이때 템플릿이 컴파일되었으나 페이지에 마운트되지는 않았습니다.

4. 마운트됨: DOM 마운트가 완료된 후 호출되며, 이때 인스턴스가 페이지에 마운트되었으며 DOM 요소에 액세스할 수 있습니다.

5. beforeUpdate : 데이터가 업데이트되기 전에 호출되며, 이때 데이터는 업데이트 되었지만 DOM은 다시 렌더링되지 않았습니다.

6. 업데이트: 데이터 업데이트가 완료된 후 호출되며, 이때 데이터가 업데이트되고 DOM이 다시 렌더링됩니다.

7. beforeDestroy : 인스턴스가 파기되기 전에 호출되며 이때는 인스턴스가 파기되지 않았으며 일부 정리 작업을 수행할 수 있습니다.

8. destroy : 인스턴스가 소멸된 후 호출되며, 이때는 인스턴스가 소멸되어 인스턴스의 데이터 및 메소드에 접근할 수 없습니다.

95. Vue 구성 요소 간의 데이터 전송 방법은 무엇입니까?

Vue 구성요소 간에 데이터를 전송하는 방법에는 여러 가지가 있습니다.

상위-하위 구성 요소는 데이터를 전달합니다. 상위 구성 요소는 props를 통해 하위 구성 요소에 데이터를 전달하고 하위 구성 요소는 $emit 트리거 이벤트를 통해 상위 구성 요소에 데이터를 전달합니다.

Brother 구성 요소는 데이터를 전달합니다. 데이터는 중개자로서 공통 상위 구성 요소를 통해 형제 구성 요소에 전달될 수 있습니다.

데이터 관리를 위해 Vuex 사용: Vuex는 전역 저장소에 데이터를 저장할 수 있는 Vue의 상태 관리 라이브러리이며, 각 구성 요소는 getter 및 mutation을 통해 데이터를 얻고 수정할 수 있습니다.

데이터 전송을 위해 이벤트 버스 사용: Vue 인스턴스를 이벤트 버스로 사용하여 $on 및 $emit 메서드를 통해 구성 요소 간에 데이터를 전송할 수 있습니다.

데이터 전송을 위해 제공 및 주입을 사용합니다. 상위 구성 요소는 제공을 통해 하위 구성 요소에 데이터를 제공하고 하위 구성 요소는 주입을 통해 데이터를 주입합니다.

데이터 전송을 위해 $refs 사용: $refs를 통해 하위 구성 요소의 인스턴스를 가져와 하위 구성 요소의 데이터 및 메서드에 직접 액세스할 수 있습니다.

96. vue의 라우팅 구현: 해시 모드와 히스토리 모드의 원리는 무엇입니까?

UE의 라우팅 구현에는 주로 해시 모드와 히스토리 모드의 두 가지 모드가 있습니다.

해시 모드 해시 모드에서는 URL의 # 기호 뒤에 있는 콘텐츠를 해시 값이라고 하며, 이는 서버로 전송되지 않고 클라이언트에서 처리됩니다. URL의 해시 값이 변경되면 브라우저는 hashchange 이벤트를 트리거하고 이 이벤트를 수신하여 경로를 전환할 수 있습니다.

예를 들어, 예제 도메인을 방문하면 브라우저는 # 뒤의 콘텐츠를 해시 값, 즉 /home으로 사용합니다. 다른 경로로 전환하기 위해 페이지의 링크를 클릭하면 실제로 새 요청을 보내는 대신 URL의 해시 값을 수정합니다.

기록 모드 기록 모드에서는 URL에 # 기호가 더 이상 필요하지 않지만 일반 URL 경로가 직접 사용됩니다.

http://example.com/home을 방문하면 브라우저는 서버에 요청을 보내고 서버는 해당 페이지 콘텐츠를 반환합니다. 다른 경로로 전환하기 위해 페이지의 링크를 클릭하면 실제로 HTML5의 히스토리 API를 사용하여 pushState 또는 replacementState 메소드를 통해 브라우저의 히스토리를 수정하고 URL 경로도 수정합니다.

97. Vue 라우팅의 Hook 기능은 무엇인가요?

Vue 라우팅의 후크 기능은 다음과 같습니다.

beforeEach(to, from, next): 라우팅 점프 전에 실행되며 전역 라우팅 차단 및 권한 제어에 사용할 수 있습니다.

afterEach(to, from): 경로 점프 후 실행되며, 페이지 통계, 로그 기록 등의 작업을 수행하는 데 사용할 수 있습니다.

beforeRouteEnter(to, from, next): 경로에 진입하기 전에 실행되며 비동기 데이터 수집 및 페이지 초기화 및 기타 작업에 사용할 수 있습니다.

beforeRouteUpdate(to, from, next): 현재 경로가 업데이트될 때 실행되며 구성 요소를 업데이트하고 데이터를 동기화하는 데 사용할 수 있습니다.

beforeRouteLeave(to, from, next): 현재 경로를 떠나기 전에 실행되며, 데이터 저장 및 페이지 확인에 사용할 수 있습니다.

98. v-if와 v-show의 차이점은 무엇인가요?

v-if와 v-show는 모두 요소의 표시 및 숨기기를 제어하는 데 사용됩니다.

1. v-if는 표현식의 값에 따라 요소를 렌더링할지 여부를 결정합니다. 표현식의 값이 false이면 해당 요소는 페이지에 렌더링되지 않고 표현식의 값이 true이면 요소는 렌더링됩니다. 페이지 중간에 렌더링됩니다.

2. v-if는 전환할 때마다 요소와 해당 하위 구성 요소를 다시 렌더링하므로 전환 시 전환 성능 오버헤드가 높습니다. v-show는 또한 표현식의 값에 따라 요소가 표시되는지 여부를 결정합니다.

3. 그러나 차이점은 v-show는 요소의 CSS 속성 표시 값만 제어한다는 점이며, 표현식의 값이 false인 경우 요소의 표시 속성은 없음으로 설정되고 해당 요소는 여전히 요소에 존재합니다. DOM 표현식의 값이 true인 경우 요소의 표시 속성이 원래 값으로 설정되고 해당 요소는 여전히 DOM에 존재합니다.

4. v-show는 요소가 항상 DOM에 존재하고 표시 및 숨기기만 제어하므로 전환 시 추가 성능 오버헤드가 없습니다.

99. $route와 $router의 차이점은 무엇입니까?

$route와 $router는 모두 Vue.js의 라우팅 관련 객체이지만 기능과 사용법이 다릅니다.

$route는 라우팅 경로, 매개변수, 쿼리 매개변수 등과 같은 현재 라우팅에 대한 일부 정보를 포함하는 Vue.js의 라우팅 정보 개체입니다.

$route 객체는 컴포넌트의 this.$route를 통해 접근할 수 있습니다.

$router는 라우팅 점프 및 탐색 관리를 담당하는 Vue.js의 라우팅 인스턴스 객체입니다.

$router 객체는 컴포넌트의 this.$router를 통해 접근할 수 있습니다. $router 개체를 통해 라우팅 점프 및 탐색과 같은 작업을 수행할 수 있습니다.

100. CSS가 현재 구성 요소에서만 작동하도록 만드는 방법은 무엇입니까?

CSS 모듈화 CSS 모듈화를 사용하면 CSS 파일을 구성 요소 파일과 분리할 수 있습니다.각 구성 요소에는 자체 CSS 파일이 있으므로 CSS 스타일 충돌을 피할 수 있습니다.React에서는 CSS 모듈 라이브러리를 사용하여 CSS 모듈화를 달성할 수 있습니다.

CSS 모듈을 사용하는 단계는 다음과 같습니다. 1. 컴포넌트 파일에 CSS 파일을 도입하고 CSS 파일 이름을 "filename.module.css"로 변경합니다. 2. 컴포넌트에서 CSS 클래스 이름을 사용할 때 "styles.class 이름"을 사용하여 참조해야 합니다.

구성 요소에서 스타일 사용

less 파일을 사용하려면 가장 바깥쪽 컨테이너의 클래스 이름이 동일하지 않은지 확인하면 됩니다.

101. `<keep-alive></keep-alive>`함수의 기능은 무엇입니까?

<keep-alive></keep-alive>Vue.js에 내장된 구성 요소이며 해당 기능은 반복적인 렌더링 및 파괴를 방지하기 위해 구성 요소 인스턴스를 캐시하는 것입니다.

구성 요소가 태그에 래핑되면 해당 구성 <keep-alive></keep-alive>요소는 삭제되지 않고 다시 사용될 때까지 캐시됩니다.

이렇게 하면 구성 요소를 매번 다시 렌더링하고 초기화할 필요가 없으므로 애플리케이션 성능이 향상됩니다.

사용 중에는 설정 및 속성을 통해 캐시해야 할 구성 요소와 캐시하지 말아야 할 구성 요소를 제어 <keep-alive></keep-alive>할 수 있습니다 .includeexclude

102. vue에서 플러그인을 사용하는 단계는 무엇입니까?

Vue에서 플러그인을 사용하는 단계는 다음과 같습니다.

플러그인 설치: npm 또는 Yarn과 같은 패키지 관리 도구를 사용하여 필요한 플러그인을 설치합니다.

플러그인 가져오기: Vue 프로젝트의 항목 파일(예: main.js)에 플러그인을 도입합니다.

플러그인 등록: Vue.use() 메소드를 사용하여 플러그인을 등록합니다.

플러그인 사용: Vue 구성 요소에서 플러그인이 제공하는 기능을 사용합니다.

103. Vue에 세 가지 일반적인 라이프사이클 후크 기능을 나열해 주세요.

Created: 인스턴스 생성 직후 호출되며, 이 단계에서 데이터 초기화, 메소드 정의 등의 작업을 수행할 수 있다.

Mounted: 인스턴스가 DOM 요소에 마운트된 직후 호출되며, 이 단계에서 DOM 작업 및 비동기 요청을 수행할 수 있습니다.

업데이트됨: 데이터가 변경되면 컴포넌트가 다시 렌더링되며, 이때 업데이트된 후크 함수가 호출되며 이 단계에서 DOM 작업, 데이터 업데이트 등의 작업을 수행할 수 있습니다.

104. Vue SSR이란 무엇입니까?

Vue SSR은 서버 측에서 Vue 구성 요소를 HTML 문자열로 렌더링한 다음 표시를 위해 브라우저 측으로 보내는 프로세스를 나타냅니다.

이점

더 나은 SEO: 기존 클라이언트 측 렌더링은 검색 엔진 크롤러가 JavaScript를 실행할 수 없기 때문에 SEO 친화적이지 않습니다. 그리고 SSR은 서버 측에서 완전한 HTML 페이지를 생성할 수 있으며, 이는 검색 엔진의 크롤링 및 색인 생성에 도움이 됩니다.

더 빠른 첫 화면 로딩 속도: 기존 클라이언트 측 렌더링에서는 렌더링하기 전에 JavaScript 파일을 다운로드해야 하므로 첫 화면 로딩 속도가 느려집니다. 그러나 SSR은 서버 측에서 완전한 HTML 페이지를 생성하여 클라이언트 측의 렌더링 시간을 줄여 첫 화면의 로딩 속도를 향상시킬 수 있습니다.

더 나은 사용자 경험: SSR은 서버 측에서 완전한 HTML 페이지를 생성할 수 있으므로 사용자는 페이지 콘텐츠를 더 빠르게 볼 수 있어 대기 시간이 줄어들고 사용자 경험이 향상됩니다.

105. DefinedProperty에 비해 Proxy의 장점은 무엇입니까?

1. 더 유연함: 프록시는 정의된 속성과 같이 개체의 특정 속성만 프록시하는 대신 전체 개체를 프록시할 수 있으므로 프록시가 더 유연해지고 더 많은 시나리오를 처리할 수 있습니다.

2. 더 강력함: 프록시는 함수 호출, 생성자 등과 같은 더 많은 작업을 가로챌 수 있지만 정의된 속성은 개체 속성의 읽기 및 쓰기 작업만 가로챌 수 있습니다.

3. 더 직관적임: 프록시의 API는 더 직관적이고 이해하고 사용하기 쉬운 반면, 정의된 속성의 API는 더 복잡하므로 객체의 내부 메커니즘에 대한 더 깊은 이해가 필요합니다.

4. 더 안전함: 프록시는 객체 속성 변조, 객체 속성 삭제 등과 같은 일부 일반적인 보안 취약성을 방지할 수 있지만 정의된 속성은 이러한 문제를 완전히 해결할 수 없습니다.

5. 더 효율적: 프록시의 성능은 정의된 속성의 성능보다 낫습니다. 왜냐하면 프록시는 기본 구현에서 최적화될 수 있지만 정의된 속성의 구현은 더 복잡하고 성능이 상대적으로 낮기 때문입니다.

106. vuex란 무엇인가요? 사용하는 방법? 어떤 기능적 시나리오에서 이를 사용합니까?

Vuex는 vuejs를 위해 특별히 설계된 상태 관리 라이브러리로, vue 애플리케이션의 모든 구성 요소 상태를 중앙에서 관리할 수 있습니다. vuex의 핵심 개념에는 상태, 변이, 게터, 액션, 모듈이 포함됩니다.

state: this.$store.state를 통해 접근할 수 있는 애플리케이션의 상태 데이터를 저장합니다.

mutations: 상태의 데이터를 수정하는데 사용되며, 동기 연산만 수행 가능하며, this.$store.commit() 메서드를 통해 호출할 수 있습니다.

actions: this.$store.dispatch() 메서드에 의해 호출될 수 있는 비동기 작업을 처리하는 데 사용됩니다.

getters: 상태에서 일부 상태를 파생시키는 데 사용되며 this.$store.getters를 통해 액세스할 수 있습니다.

모듈: 애플리케이션 상태를 여러 모듈로 나눕니다. 각 모듈에는 자체 상태, 변형, 작업 및 게터가 있습니다.

Vuex를 사용하려면 먼저 Vue 애플리케이션에 설치해야 하며, npm 또는 CDN을 통해 가져올 수 있습니다. 그런 다음 Vue 애플리케이션에서 저장소 객체를 생성하고 상태, 돌연변이, 작업, getter 및 모듈과 같은 구성 항목을 전달한 다음 마지막으로 저장소 객체를 Vue 인스턴스의 Vue 인스턴스에 삽입합니다.

Vuex 사용 시나리오는 다음과 같습니다. - 애플리케이션에는 상태 데이터를 공유해야 하는 여러 구성 요소가 있습니다. - 애플리케이션에는 중앙 집중식 관리가 필요한 복잡한 상태 로직이 있습니다. - 애플리케이션에는 균일하게 관리해야 하는 비동기 작업이 많습니다.

107. Vue2.x 반응 원리는 무엇입니까?

vue2.x의 반응 원리는 데이터 하이재킹 및 게시-구독 모드를 통해 실현됩니다.

데이터 하이재킹: Vue2.x는 Object.defineProperty() 메소드를 통해 데이터 하이재킹을 구현합니다. 즉, 데이터에 액세스하거나 수정하면 해당 작업이 트리거될 수 있습니다. Vue2.x에서 각 컴포넌트 인스턴스에는 해당 Watcher 인스턴스가 있으며, 컴포넌트의 데이터가 변경되면 Watcher 인스턴스는 컴포넌트에 다시 렌더링하도록 알립니다.

게시-구독 모드: Vue2.x는 게시-구독 모드를 사용하여 데이터 응답성을 구현합니다. Vue2.x에서 각 구성 요소 인스턴스에는 Watcher 인스턴스를 저장하는 데 사용되는 해당 Dep 인스턴스가 있습니다. 구성 요소의 데이터가 변경되면 Dep 인스턴스는 모든 Watcher 인스턴스에 업데이트하도록 알립니다.

구체적인 구현 과정은 다음과 같습니다.

Vue2.x에서는 Object.defineProperty() 메소드를 통해 데이터 하이재킹이 구현됩니다. 즉, 데이터에 액세스하거나 수정하면 해당 작업이 트리거될 수 있습니다.

컴포넌트 인스턴스가 생성되면 컴포넌트 내의 모든 데이터가 순회되며, 각 데이터마다 해당 Dep 인스턴스가 생성되고, 해당 데이터의 모든 Watcher 인스턴스가 Dep 인스턴스에 저장됩니다.

컴포넌트의 데이터가 변경되면 해당 데이터의 setter 메소드가 트리거되고, setter 메소드는 업데이트할 데이터에 해당하는 Dep 인스턴스에 이를 알립니다.

Dep 인스턴스는 그 안에 저장된 모든 Watcher 인스턴스를 순회하고 업데이트하도록 알립니다. 5. Watcher 인스턴스가 업데이트 알림을 받은 후 구성 요소의 다시 렌더링을 트리거합니다.

108 ES5, ES6, ES2015의 차이점은 무엇입니까?

ES5는 2009년에 출시된 JavaScript의 다섯 번째 버전인 ECMAScript 5의 약어입니다.

ES6은 ECMAScript 6의 약어이며 ES2015라고도 알려져 있으며 2015년에 출시된 JavaScript의 여섯 번째 버전입니다.

ES5와 비교하여 ES6에는 화살표 함수, let 및 const 키워드, 템플릿 문자열, 구조 분해 할당, 클래스 및 모듈 등을 포함한 많은 새로운 구문과 기능이 추가되었습니다.

이러한 새로운 기능은 JavaScript를 더욱 현대적이고, 읽고 쓰기 쉽고, 유지 관리하기 쉽게 만듭니다.

ES2015는 ES6의 또 다른 이름입니다. 출판 당시 ECMAScript 위원회는 출시 연도를 반영하여 ES6의 이름을 ES2015로 바꾸기로 결정했기 때문입니다. ES2015 이후 ECMAScript는 매년 새로운 버전을 출시해왔기 때문에 ES6도 ES2015의 첫 번째 버전이라고 볼 수 있습니다.

109. let의 기능은 무엇이며, var와 함께 let을 사용하는 이유는 무엇입니까?

let과 var는 모두 변수를 선언하는 데 사용되는 키워드이지만 몇 가지 차이점이 있습니다.

범위: var를 사용하여 선언된 변수는 함수 범위 또는 전역 범위이고, let을 사용하여 선언된 변수는 블록 수준 범위입니다. 블록 수준 범위는 if 문, for 루프, 함수 등 중괄호 안에 선언된 변수가 중괄호 안에서만 유효함을 의미합니다.

변수 승격: var를 사용하여 선언된 변수는 변수 승격을 거칩니다. 즉, 선언 전에 변수를 사용할 수는 있지만 값은 정의되지 않습니다. let을 사용하여 선언된 변수는 승격되지 않습니다. 즉, 선언 전에 사용하면 오류가 보고됩니다.

반복 선언: var를 사용하여 선언한 변수는 반복적으로 선언할 수 있으며 후자의 선언이 이전 선언을 재정의합니다. let을 사용하여 선언된 변수는 동일한 범위에서 반복적으로 선언될 수 없습니다.

110. ES6의 문자열 문자열에 대한 몇 가지 일반적인 업그레이드 및 최적화를 제공합니까?

템플릿 문자열: 백틱(`)을 사용하여 변수나 표현식을 삽입할 수 있는 문자열 템플릿을 만들어 쉽게 읽을 수 있습니다.

문자열 확장 메서드: ES6에서는 문자열 작업을 더욱 편리하게 만들기 위해 startWith(), endWith(), include(),peat() 등과 같은 많은 새로운 문자열 메서드를 제공합니다.

구조 분해 할당: 구조 분해 할당을 사용하여 문자열을 개별 문자나 하위 문자열로 분할할 수 있으며 이는 보다 유연합니다.

문자열 탐색 인터페이스: ES6은 for...of 루프를 사용하여 문자열의 각 문자를 탐색할 수 있는 문자열에 탐색 인터페이스를 추가합니다.

유니코드 지원: ES6은 유니코드 문자 집합을 지원합니다. \u 또는 \u{}를 사용하여 유니코드 문자를 나타낼 수 있으며, codePointAt(), String.fromCodePoint() 등과 같은 몇 가지 새로운 유니코드 관련 메서드도 제공합니다.

정규식 업그레이드: ES6는 정규식을 업그레이드하고, u 수정자를 추가하고, 유니코드 문자 처리를 지원하며, 고정, 플래그 등과 같은 새로운 정규식 방법도 제공합니다.

111. ES6의 배열 배열 유형에 대한 몇 가지 일반적인 업그레이드 및 최적화를 제공합니까?

스프레드 연산자(Spread Operator): 배열을 여러 매개변수로 확장하거나 여러 매개변수를 배열로 결합할 수 있습니다.

Array.from() 메서드: 배열 유사 객체나 반복 가능한 객체를 배열로 변환할 수 있습니다.

Array.of() 메서드: 값 집합을 배열로 변환할 수 있습니다.

find() 및 findIndex() 메소드: 배열에서 정규화된 요소를 찾아 해당 값이나 인덱스를 반환할 수 있습니다.

include() 메소드: 요소가 배열에 포함되어 있는지 확인할 수 있습니다.

fill() 메소드: 배열의 모든 요소를 지정된 값으로 채울 수 있습니다.

flat() 및 flatMap() 메서드: 중첩 배열을 1차원 배열로 확장하고 각 요소에 대해 지정된 작업을 수행할 수 있습니다.

Reduce() 메서드의 초기값 매개변수: 배열이 비어 있을 때 오류를 방지하기 위해 Reduce() 메서드의 초기값을 지정할 수 있습니다.

화살표 함수 및 forEach() 메서드: 배열의 순회 작업을 단순화할 수 있습니다. 10. map(), filter() 및 Reduce() 메소드의 반환 값: 이러한 메소드는 코드를 더 간결하고 읽기 쉽게 만들기 위해 체인으로 호출될 수 있습니다.

React 및 일반적인 프론트엔드 면접 질문(이것만 읽어도 충분합니다)은 지속적으로 업데이트됩니다...

버전 1.0

1. React에 대한 이해를 말해달라. 특징은 무엇입니까?