인터뷰에서 물어볼 수 있는 JavaScript 개요

이 기사에서는 매일 사용하지 않는 몇 가지 중요한 자바스크립트 개념에 대해 자세히 설명하겠습니다.

우리는 ReactJs, Angular와 같은 Javascript 프레임워크를 사용하고 기술 인터뷰 전에 우리에게 익숙한 라이브러리/프레임워크의 개념을 기억하는지 확인하지만 JavaScript의 일부 핵심 개념을 무시합니다.

적어도 전에 나에게 그런 일이 있었는데, 나는 몇 가지 React 인터뷰 질문을 검토하고, " useEffect나는 항상 정리를 잊고 있습니다 . 그들을. 어느 정도까지는 2년 전에 입사 지원을 했고 기술 면접에서 질문할 라이브러리/프레임워크를 몰랐습니다. 면접관은 어떤 언어의 프레임워크에도 관심을 가질 수 있는 JavaScript 엔지니어를 찾고 있었습니다. 잘 되지 않았고 JS의 핵심을 이해하기 위해 노력해야 한다는 것이 분명해졌습니다.useMemouseRef

이 기사와 다음 기사에서는 고급 자바스크립트 엔지니어가 알아야 할 몇 가지 핵심 개념에 대해 간략하게 설명하겠습니다.

자바스크립트 엔진이란?

• 이 엔진은 다른 언어와 마찬가지로 단순히 자바스크립트 파일을 컴퓨터로 번역합니다. 여러 자바스크립트 엔진이 있지만 가장 유명한 엔진은 Chrome에서 사용하는 V8 엔진 으로 C++로 작성되었으며 2008년에 게시되었습니다. 또 다른 유명한 엔진은 Firefox에서 사용되는 Spider Monkey 라고하는 javascript "Brendan Eich"의 제작자가 직접 만든 것입니다 . 브라우저가 HTML뿐만 아니라 javascript도 이해할 수 있게 한 최초의 JavaScript 엔진이었습니다.
• 우리는 엔진에 자바스크립트 파일을 제공 하고 코드를 토큰 으로 분해하여 의미를 식별하는 어휘 분석 을 수행합니다.
• 토큰 은 AST "추상 구문 트리" 로 구성됩니다.
• 그런 다음 인터프리터, 프로파일러 또는 컴파일러로 이동합니다. ⇒ CPU "기계어" 가 이해할 수 있는 0과 1의 코드를 가져옵니다 .

코드를 컴퓨터가 이해할 수 있는 기계어로 변환하는 방법에는 두 가지가 있습니다.

• 인터프리터 ⇒ 한 줄 한 줄 읽어줍니다.
• 컴파일러 ⇒ 전체 코드를 가져와서 우리가 하려는 것을 이해하려고 시도하고 다른 언어로 번역한 다음 결국 동일한 결과를 얻기 위해 한 줄씩 해석합니다. 이 언어는 기계 코드와 같은 하위 수준 언어로 되어 있습니다.

JIT 컴파일러 "Just-In-Time" 컴파일러

브라우저는 엔진을 더 빠르게 만들기 위해 컴파일러를 혼합하기 시작했습니다. 브라우저는 "인터프리터"와 "컴파일러"의 장점을 모두 갖추고 있어 자바스크립트 코드 실행 속도를 향상시킵니다. 이것이 JavaScript 언어가 해석 언어일 뿐만 아니라 컴파일 될 수도 있는 이유 입니다.

호출 스택 및 메모리 힙

호출 스택 은 코드에서 한 줄씩 무슨 일이 일어나고 있는지 추적하고 순서대로 실행하는 곳입니다. 코드가 실행될 때 함수와 변수를 저장하고 First In Last Out 모드에서 실행됩니다. 좋은 점은 호출 스택의 맨 위에 있는 것이 무엇이든 엔진에 코드 파일의 위치를 ​​알려주는 것입니다. 그것이 자바 스크립트가 실행 중이거나 실행 중입니다. 메모리 힙
은 변수와 데이터를 저장할 수 있는 정보를 저장하고 쓰는 동안 모든 종류의 데이터를 정렬되지 않은 방식으로 저장하기 위해 제공되는 무료 저장소 자바스크립트 엔진으로 생각하세요.

그리고 실제 문제는 호출 스택 또는 메모리 힙이 무엇인지 이해하지 못하는 경우 다음과 같은 열악한 엔지니어링 기술을 보여주는 몇 가지 심각한 문제에 직면할 수 있다는 것입니다.

스택 오버플로:
아니요, 매일 방문하는 유명한 사이트가 아니라 콘솔에 표시되는 큰 빨간색 오류입니다. 순서대로 무엇을 잘못했는지 전혀 알 수 없습니다. 서로 내부에 중첩된 함수 를 계속해서 호출
하려고 할 때 발생 합니다. 성공 상태나 반환 상태가 없는 재귀 함수 같은 것.

function inception(){
 inception();
}
// By this way, we would keep adding things to the stack more and more.

let arrayOfTrials = [];
while(1) {
 arrayOfTrials.push("hi");
}

1. 전역 변수가 점점 더 많은 메모리를 추가하므로 환경에 변수를 계속 추가하십시오.
2. 문서의 요소 중 하나에 이벤트 리스너를 추가하고 필요하지 않을 때 제거하지 않으면 메모리가 가득 차게 됩니다.
3. Using setInterval()which는 함수를 지울 때까지 함수를 계속 호출하는 메서드이며 메서드를 사용하여 지우는 것을 잊었습니다 clearInterval().

Javascript는 가비지 수집 언어입니다. 즉, JS가 객체가 있는 함수 내에서 메모리를 할당하면 객체가 메모리 힙에 저장됩니다. 기능을 끝내고 이 객체가 더 이상 필요하지 않으면 JS가 자동으로 정리하고 여전히 유용한 데이터만 남습니다. 메모리를 정리하고 메모리 누수를 방지하기 위해 공간을 절약하는 역할을 합니다.
가비지 수집을 제어하고 메모리의 일부를 제거할 항목을 지정하는 C와 같은 저수준 언어의 경우에는 그렇지 않습니다. 위험하지만 이것이 C의 프로그램이 매우 빠르고 메모리 효율적인 이유입니다.

자바스크립트 엔진 자체는 한 번에 한 가지씩 순서대로 동기화되어 한 번에 한 가지만 발생할 수 있습니다. JavaScript Runtime 과는 다릅니다 .

다음 기사에서는 JavaScript 런타임, JavaScript의 기초 및 훨씬 더 고급 개념에 대해 더 자세히 이야기할 것입니다.

결론

항상 프레임워크나 라이브러리에서 사용하는 언어의 원점으로 돌아가세요. 회사가 React 개발자나 Angular2+ 엔지니어와 같은 프런트엔드에서 특정 분야를 찾고 있다는 것을 알고 있지만 항상 새로운 라이브러리나 프레임워크에 적응하는 것이 좋습니다. 핵심을 이해하지 못하는 언어로 작업하는 것보다

자신을 프레임워크 엔지니어로 여기지 말고 깊이 파고들어 이유를 알고 특정 언어의 개념을 이해하면 강력한 일을 할 수 있습니다!

잊지 마세요. 항상 JavaScript에 의존할 수 있습니다.