기술나눔

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

프론트 엔드 JS 인터뷰에서 자주 묻는 질문은 기본 구문, 데이터 구조 및 알고리즘, DOM 작업, 비동기 프로그래밍, 모듈화, 프레임워크/라이브러리 사용 등을 포함한 다양한 측면을 다룹니다. 다음은 몇 가지 일반적인 프런트엔드 JS 인터뷰 질문과 이에 대한 간략한 분석입니다.

1. 기본 문법

• 데이터 유형 및 스토리지 차이점 :JavaScript에는 어떤 데이터 유형이 있나요? 메모리에 저장되는 방식의 차이점은 무엇입니까? (예: 원시 데이터 유형과 참조 데이터 유형의 차이점)
• 변수 선언：var、let、const 차이점이 뭐야? 범위와 수명주기는 무엇입니까?
• 운영자：i++그리고++i차이점이 뭐야?break그리고continue루프에서 사용될 때 어떻게 다릅니 까?

2. 데이터 구조 및 알고리즘

• 어레이 작업 : 배열에 일반적으로 사용되는 방법은 무엇입니까? (좋다push、pop、shift、unshift、splice、slice、join、sort기다리다)
• 깊은 복사와 얕은 복사 :깊은 복사와 얕은 복사란 무엇인가요? 구현하는 방법은 무엇입니까? (사용하는 경우JSON.parse(JSON.stringify(obj)), 확산 연산자, 재귀 및 기타 방법)
• 정렬 알고리즘: 정렬 알고리즘(버블 정렬, 퀵 정렬 등)을 이해하고 구현합니다.

3. DOM 작업

• 일반적인 DOM 작업: DOM 요소 선택, 추가, 삭제, 수정, 확인 등의 작업을 어떻게 수행합니까?
• innerHTML 및 innerText: 둘 사이의 차이점과 적용 가능한 시나리오는 무엇입니까?
• 이벤트 처리 :JavaScript의 이벤트 모델이란 무엇입니까? 이벤트 프록시를 구현하는 방법은 무엇입니까?

4. 비동기 프로그래밍

• 약속하다 : 약속이란 무엇입니까? 세 가지 상태는 무엇입니까?사용하는 방법Promise.all그리고Promise.race？
• 비동기/대기 : 비동기 작업을 처리하기 위해 async/await를 사용하는 방법은 무엇입니까? Promise와 어떤 관련이 있나요?
• 콜백 함수 및 이벤트 루프: JavaScript 이벤트 루프 메커니즘과 콜백 함수의 작동 방식을 이해합니까?

5. 모듈성

• ES6 모듈식: ES6의 모듈식 구문을 이해합니다(import/export), 그 장점은 무엇입니까?
• CommonJS 및 AMD/CMD: CommonJS, AMD, CMD 모듈 사양의 차이점과 적용 가능한 시나리오를 이해하고 비교합니다.

6. 프레임워크/라이브러리 사용법

• 리액트/뷰/앵귤러: 이러한 프런트 엔드 프레임워크/라이브러리의 특성, 장점 및 적용 가능한 시나리오를 이해하고 비교합니다.
• 수명주기: React, Vue 등의 프레임워크에서 컴포넌트의 라이프사이클은 어떻게 되나요?
• 현황관리: React에서 Redux나 Vuex와 같은 상태 관리 도구를 어떻게 사용하나요?

7. 기타 고주파 문제

• 프로토타입 및 프로토타입 체인: 자바스크립트의 프로토타입 및 프로토타입 체인 메커니즘과 그 기능을 이해합니다.
• 이 키워드: 자바스크립트 이해this다양한 시나리오에서 규칙과 성능을 지적합니다.
• 폐쇄: 클로저의 개념, 기능 및 사용 시나리오를 이해합니다.
• 쓰레기 수집 메커니즘: JavaScript의 가비지 수집 메커니즘(예: mark-sweep 방법, 참조 계산 방법 등)을 이해합니다.

샘플 질문 및 분석

샘플 질문: JavaScript의 프로토타입 체인 메커니즘을 설명해주세요.

분석하다：

• 프로토타입 체인은 JavaScript에서 상속을 구현하기 위한 메커니즘입니다.
• 모든 객체에는__proto__속성(ES6에서 권장됨)Object.getPrototypeOf()메서드), 이 속성은 생성자의prototype속성.
• 개체의 속성이나 메서드에 액세스할 때 해당 속성이나 메서드가 개체 자체에 존재하지 않으면 이를 찾거나 프로토타입 체인의 맨 위에 도달할 때까지 프로토타입 체인을 따라 검색됩니다(Object.prototype）。
• 프로토타입 체인의 상단은 다음과 같습니다.null, 더 이상 찾을 프로토타입 개체가 없음을 나타냅니다.
• 프로토타입 체인을 통해 객체 간 속성 공유 및 메서드 상속이 가능합니다.

1. JavaScript의 데이터 유형은 무엇입니까? 그들 사이의 차이점은 무엇입니까?

답변：
JavaScript에는 기본 데이터 유형(기본 유형)과 참조 데이터 유형(참조 유형)을 포함하여 8가지 데이터 유형이 있습니다.

• 기본 데이터 유형：
  • 한정되지 않은: 정의되지 않음, 변수가 선언되었지만 할당되지 않은 경우의 값입니다.
  • 없는: 빈 개체 참조를 나타내는 Null 값입니다.
  • 부울: true와 false의 두 가지 값만 갖는 부울 유형입니다.
  • 숫자: 정수 및 부동 소수점 숫자를 포함한 숫자 유형입니다.
  • 끈: 텍스트 데이터를 나타내는 데 사용되는 문자열 유형입니다.
  • 상징: 고유 식별자를 생성하는 데 사용되는 고유 값 유형입니다.
  • 빅인트: 임의 정밀도의 정수를 나타내는 데 사용되는 큰 정수 유형입니다.
• 참조 데이터 유형：
  • 물체: 배열(Array), 함수(Function), 날짜(Date) 등을 포함하여 JavaScript의 모든 복잡한 데이터 유형에 대한 기본 클래스인 객체 유형입니다.

기본 데이터 유형과 참조 데이터 유형의 주요 차이점은 저장 및 할당 방법입니다. 기본 데이터 유형의 값은 스택 메모리에 저장되고 할당 중에 값이 직접 복사되는 반면 참조 데이터 유형의 값은 힙 메모리에 저장되고 스택 메모리는 값에 대한 참조(즉, 주소)를 저장합니다. ​​할당 중에 복사되는 힙 메모리는 참조입니다.

2. JavaScript의 범위와 폐쇄에 대해 이야기하시겠습니까?

답변：

• 범위 : 코드 블록 내 변수, 함수 등 식별자의 유효한 범위를 나타냅니다. JavaScript에는 주로 전역 범위와 로컬 범위(함수 범위, 블록 수준 범위 등 포함)의 두 가지 범위가 있습니다. 전역 범위의 변수는 스크립트 전체에서 볼 수 있는 반면, 로컬 범위의 변수는 해당 변수가 정의된 코드 블록 내에서만 액세스할 수 있습니다.

• 폐쇄 : 함수가 어휘 범위 밖에서 실행되더라도 함수가 어휘 범위를 기억하고 이에 액세스할 수 있음을 의미합니다. 클로저의 주요 용도는 개인 변수를 캡슐화하고 모듈을 만드는 것 등입니다. 클로저를 사용하면 함수가 함수 외부의 변수에 액세스하고 조작할 수 있으며 이러한 변수는 함수 외부에서도 쉽게 오염되거나 변경되지 않습니다.

3. JavaScript의 비동기 프로그래밍과 Promise에 대해 설명해주세요.

답변：

• 비동기 프로그래밍 : 코드의 실행 순서가 쓰기 순서에 따라 결정되는 것이 아니라 특정 조건(예: 네트워크 요청, 파일 읽기 및 쓰기 등)의 완료에 따라 결정된다는 의미입니다. JavaScript는 단일 스레드이지만 이벤트 루프와 콜백 함수를 통해 비동기 프로그래밍을 구현합니다.

• 약속하다 : ES6에 도입된 새로운 객체로, 비동기 작업을 처리하는 데 사용됩니다. Promise 객체는 지금은 완료되지 않을 수 있지만 나중에 완료(또는 실패)될 작업과 해당 결과 값을 나타냅니다. Promise에는 보류(진행 중), 이행(성공), 거부(실패)의 세 가지 상태가 있습니다. Promise를 통해 비동기식 코드를 동기식으로 작성할 수 있으므로 코드가 더욱 간결해지고 이해 및 유지 관리가 쉬워집니다.

4. JavaScript의 이벤트 버블링 및 이벤트 캡처에 대해 이야기하시겠습니까?

답변：

• 이벤트 버블링 : 이벤트가 대상 요소에서 시작된 다음 DOM 트리의 최상위 수준(즉, 문서 개체)까지 전파된다는 의미입니다. 이벤트 버블링 프로세스 중에 모든 수준의 DOM 요소가 이벤트를 캡처하고 처리할 수 있습니다.

• 이벤트 캡처 : 이벤트 버블링과 달리 이벤트 캡처는 DOM 트리의 맨 위에서 시작한 다음 대상 요소까지 전파됩니다. 이벤트 캡처 프로세스 중에 모든 수준의 DOM 요소가 이벤트를 캡처하고 처리할 수 있습니다.

JavaScript에서는 addEventListener 메소드의 세 번째 매개변수를 통해 이벤트 처리 방식, 즉 이벤트 버블링이나 이벤트 캡처를 사용할 수 있습니다. 세 번째 매개변수가 true이면 이벤트 캡처를 사용한다는 의미이고, false이거나 생략되면 이벤트 버블링을 사용한다는 의미입니다.

5. ES6+에는 어떤 새로운 기능이 도입되었나요?

답변：
ES6(ECMAScript 2015) 및 후속 버전에는 다음을 포함하되 이에 국한되지 않는 많은 새로운 기능이 도입되었습니다.

• 하자와 const: 블록 수준 범위의 지역 변수 및 상수를 선언하는 데 사용됩니다.
• 화살표 기능: 함수를 작성하는 보다 간결한 방법을 제공하며 자체 this, 인수 등을 바인딩하지 않습니다.
• 템플릿 문자열: 포함된 표현식을 허용하고 여러 줄 문자열을 지원합니다.
• 구조분해 할당: 배열이나 개체에서 데이터를 추출하여 선언된 변수에 할당할 수 있습니다.
• 기본 매개변수 값, 나머지 매개변수 및 확산 연산자: 함수 매개변수 처리 기능이 강화되었습니다.
• 약속 및 비동기/대기: 비동기 작업을 처리하는 데 사용되어 비동기 코드를 더욱 간결하고 이해하기 쉽게 만듭니다.
• 클래스 구문: 기존 객체 지향 프로그래밍에 더 가까운 클래스에 대한 구문 설탕을 제공합니다.
• 모듈: ES6 모듈 구문을 지원하고 JavaScript의 모듈식 프로그래밍을 구현합니다.