인터뷰를 위한 최고의 JavaScript 및 React 치트 시트

다음 인터뷰 준비: 주요 JavaScript 및 React 주제

자바스크립트 주제

1. 호이스팅

호이스팅은 코드가 실행되기 전 컴파일 단계에서 변수 및 함수 선언을 포함 범위의 맨 위로 이동하는 JavaScript의 메커니즘입니다. 즉, 코드에서 실제로 선언되기 전에 변수와 함수를 참조할 수 있습니다. 그러나 초기화는 아닌 선언만 호이스팅됩니다. var로 선언된 변수의 경우 호이스팅되고 undefound로 초기화되는 반면, let 및 const는 호이스팅되지만 초기화되지 않으므로 선언 전에 액세스하면 "일시적 데드존" 오류가 발생합니다. 함수 선언은 완전히 호이스팅됩니다. 즉, 코드에 나타나기 전에 호출할 수 있습니다.

예:

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

함수 선언도 끌어올려집니다:

greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

2. 폐쇄

클로저는 함수가 해당 범위 밖에서 실행될 때에도 어휘 범위에 대한 액세스를 유지하는 JavaScript의 기능입니다. 이를 통해 함수는 주변 범위의 변수를 "기억"할 수 있습니다. 클로저는 종종 데이터 캡슐화, 상태 유지 또는 JavaScript에서 개인 변수 생성에 사용됩니다. 함수가 다른 함수 내부에 정의되고 내부 함수가 외부 함수의 변수를 참조할 때마다 형성됩니다.

예:

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2

3. 약속

약속은 미래에 사용할 수 있는 값에 대한 자리 표시자를 나타냅니다. 이는 기존 콜백 함수보다 비동기 작업을 더 효과적으로 처리하는 데 사용되어 "콜백 지옥"을 줄입니다. Promise는 보류 중, 이행됨, 거절됨의 세 가지 상태 중 하나일 수 있습니다. 약속이 이행되거나 거부되면 변경할 수 없게 됩니다. Promise는 코드 가독성을 향상시키고 비동기 작업 연결을 더 쉽게 만듭니다.

예:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 1000);
});

fetchData.then(data => console.log(data)); // "Data fetched!"

4. 함수 커링

함수 커링은 여러 인수를 갖는 함수를 각각 단일 인수를 취하는 일련의 함수로 변환하는 기술입니다. 이 접근 방식은 함수형 프로그래밍에서 원래 함수의 일부 인수를 수정하여 재사용 가능한 함수를 만드는 데 널리 사용됩니다. Currying을 사용하면 코드 가독성, 재사용성 및 모듈화가 향상됩니다.

예:

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

const add5 = add(5);
console.log(add5(3)); // 8

5. 실행 컨텍스트

실행 컨텍스트는 JavaScript 코드가 실행되는 환경을 정의합니다. 여기에는 특정 시간에 액세스할 수 있는 변수, 개체 및 함수가 포함됩니다. 실행 컨텍스트에는 세 가지 유형이 있습니다.

• 전역 실행 컨텍스트: 스크립트가 처음 실행될 때 생성됩니다. 전역 범위에 선언된 변수와 함수는 이 컨텍스트의 일부입니다.
• 함수 실행 컨텍스트: 함수가 호출될 때마다 생성되며 해당 지역 변수와 매개변수를 포함합니다.
• 평가 실행 컨텍스트: 거의 사용되지 않으며 eval()이 호출될 때 생성됩니다. 실행 컨텍스트는 또한 이것의 값을 결정하고 스코프 체인의 생성을 포함합니다.

예:

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

6. 호출, 신청, 바인딩

함수 호출 시 this의 값을 명시적으로 설정하는 방법입니다.

• Call: 주어진 this 컨텍스트와 개별적으로 전달된 인수를 사용하여 함수를 호출합니다.
• 적용: 호출과 유사하지만 인수가 배열로 전달됩니다.
• 바인드: 즉시 호출하지 않고 특정 this 컨텍스트와 인수가 미리 설정된 새 함수를 반환합니다.

예:

greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

7. 일반적인 방법을 위한 폴리필

폴리필은 기본적으로 사용할 수 없는 환경에서 기능을 구현하는 코드 조각입니다. 이를 통해 구형 브라우저나 런타임 환경에서 Array.map, Promise 또는 Object.sign과 같은 최신 JavaScript 기능을 지원할 수 있습니다. 폴리필은 호환성을 보장하기 위해 자주 사용되며 누락된 기능의 동작을 모방하는 대체 논리를 사용하여 구현됩니다.

예: Array.prototype.map 폴리필:

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2

반응 주제

1. 화해

조정은 가상 DOM과 일치하도록 DOM을 업데이트하는 React의 프로세스입니다. React는 diffing 알고리즘을 사용하여 필요한 최소한의 업데이트 수를 결정하여 렌더링을 효율적으로 만듭니다. 상태나 props가 변경되면 React는 새로운 가상 DOM을 생성하고 이전 DOM과 비교하여 변경된 부분만 업데이트합니다.

2. 후크

후크는 기능적 구성 요소가 이전에는 클래스 구성 요소에서만 사용할 수 있었던 상태 및 수명 주기 메서드와 같은 기능을 사용할 수 있게 해주는 함수입니다. 예에는 상태 관리를 위한 useState와 부작용을 위한 useEffect가 포함됩니다. 후크는 React 코드를 더욱 간결하게 만들고 기능적 구성 요소를 더욱 강력하게 만듭니다.

예:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 1000);
});

fetchData.then(data => console.log(data)); // "Data fetched!"

3. 클래스와 기능적 구성요소

클래스 구성 요소는 이를 상태 및 수명 주기 메서드에 사용하는 ES6 클래스입니다. 기능적 구성 요소는 UI를 렌더링하는 간단한 기능입니다. 후크가 도입되면서 기능적 구성 요소는 클래스 없이도 상태와 수명 주기를 관리할 수 있습니다. 기능적 구성 요소는 단순성과 더 나은 성능 때문에 선호됩니다.

클래스 구성요소의 예:

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

4. 메모하기

메모이제이션은 불필요한 재계산이나 재렌더링을 방지하기 위해 사용되는 성능 최적화 기술입니다. React에서 메모이제이션은 props나 상태가 변경될 때만 구성 요소가 다시 렌더링되도록 보장합니다. 이는 계산 비용이 많이 들거나 업데이트가 자주 발생하는 구성 요소에 특히 유용합니다.

예:

greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

5. 고차 성분(HOC)

HOC는 함수가 구성 요소를 입력으로 사용하고 해당 구성 요소의 향상된 버전을 반환하는 React의 디자인 패턴입니다. HOC는 일반적으로 코드 재사용, 상태 관리, 로깅이나 인증과 같은 기능 추가에 사용됩니다.

예:

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2

6. 공연

React 성능을 개선하려면 불필요한 재렌더링 방지, 구성요소 지연 로딩, React.memo 또는 useMemo를 사용한 렌더링 최적화와 같은 기술이 필요합니다. 개발자는 병목 현상을 식별하기 위해 React Profiler와 같은 도구도 사용합니다.

7. 리액트 라우터

React Router는 React 애플리케이션에서 탐색을 관리하기 위한 라이브러리입니다. 이를 통해 개발자는 경로를 정의하고 URL을 기반으로 구성 요소를 동적으로 렌더링할 수 있습니다. 기능에는 중첩 경로, 경로 매개변수 및 탐색 가드가 포함됩니다.

예:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 1000);
});

fetchData.then(data => console.log(data)); // "Data fetched!"

8. 캐싱

React의 캐싱에는 자주 사용하는 데이터를 다시 가져오는 것을 방지하기 위해 저장하는 작업이 포함됩니다. 이는 반응 쿼리, Redux 또는 localStorage와 같은 라이브러리를 사용하여 달성할 수 있습니다. 캐싱은 로드 시간을 줄여 성능과 사용자 경험을 향상시킵니다.

9. 보안

React 애플리케이션을 보호하려면 개발자는 사용자 입력을 검증 및 삭제하고, HTTPS를 사용하고, XSS 공격을 방지하기 위해 인라인 JavaScript를 피해야 합니다. 헬멧과 같은 라이브러리는 안전한 HTTP 헤더를 설정하는 데 도움이 됩니다. 인증 및 승인도 안전하게 구현되어야 합니다.

10. 성능 향상

다음을 통해 성능을 향상할 수 있습니다.

• 코드 분할로 번들 크기 줄이기.
• 불필요한 상태 업데이트를 방지합니다.
• 지연 로딩을 위해 React.lazy를 사용합니다.
• 이미지 및 자산 최적화.
• 계산 작업에 효율적인 알고리즘을 사용합니다.

11. 메모리 누수

객체가 더 이상 사용되지 않지만 가비지 수집되지 않을 때 메모리 누수가 발생합니다. React에서는 이벤트 리스너, 타이머 또는 구독을 부적절하게 정리하여 누출이 발생하는 경우가 많습니다. 정리 기능과 함께 useEffect를 사용하면 적절한 정리가 보장되어 이러한 문제를 방지할 수 있습니다.

사용 중인 구독 또는 타이머 정리효과:

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

결론적으로, 강력하고 효율적인 애플리케이션을 구축하려는 모든 개발자에게는 JavaScript와 React의 핵심 개념을 익히는 것이 중요합니다. 이러한 원칙은 웹 개발의 기초를 형성할 뿐만 아니라 복잡한 문제를 자신 있게 해결할 수 있도록 준비시켜 줍니다. 클로저 이해, React를 통한 성능 최적화, 보안 모범 사례 구현 등 이러한 주제에 대한 깊은 이해는 인터뷰와 경력에서 귀하를 돋보이게 할 것입니다. 계속해서 탐구하고, 연습하고, 기술을 연마하세요. 끊임없이 진화하는 프로그래밍 세계에서는 배움의 여정이 결코 끝나지 않기 때문입니다.

위 내용은 인터뷰를 위한 최고의 JavaScript 및 React 치트 시트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!