자바스크립트

프론트 엔드 기술면접 준비하기(프론트엔드 면접질문)

프론트 엔드 기술면접 질문 20가지를 정리해 보았으며 이번에 정리한 내용은 react, vue 프레임워크 상관없이 프론트엔드 개발자가 필수적으로 알아야 되는 항목들입니다 1. 브라우저 렌더링 원리 HTML 파일을 서버로부터 내려받은 후 파싱하여 DOM 트리를 구축합니다 이후 CSS 파일을 파싱 하여 CSSOM 트리를 구축합니다 이때 HTML중간에 자바스크립트가 있다면 HTML파싱을 중단하고 자바스크립트를 실행합니다 이후 DOM 트리와 CSSOM 트리를 결합하여 렌더트리를 구축합니다 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산하며 이를 Layout 단계라 합니다 계산한 위치/크기를 기반으로 화면에 그리며 이를 Paint 단계라 합니다 2. Reflow와 Repaint 가 실행되는..

자바스크립트 this

오늘은 자바스크립트의 this에 대해서 알아보도록 하겠습니다 자바 혹은 C++와 같은 언어에서 this는 자기 자신을 가리킵니다 그러나 자바스크립트에서 this는 자기 자신을 가리키는 게 아닌 this가 가리키는 대상이 계속 변경이 됩니다 this의 정의를 정리해보면 아래와 같습니다 this this는 '자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수'입니다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조할 수 있습니다 즉 this는 고정된 값에 바인딩되지 않고, 함수가 호출되는 방식에 따라 '동적'으로 결정됩니다 이러한 자바스크립트에서 this가 참조하는 것을 함수가 호출되는 방식에 따라 결정이 됩니다 그리고 이것은 'this bind..

자바스크립트 클로저

자바스크립에 클로저에 대해 알아보도록 하겠습니다 클로저 클로저란 함수와 그 함수가 선언되었을 때의 렉시컬 환경의 조합니다 이런 정의로는 무슨 의미 인지 크게 이해가 되지는 않습니다 저희는 우선 클로저를 알기 전에 렉시컬 환경이라는 것부터 알아보고 클로저를 한번 알아보도록 하겠습니다 렉시컬 환경 렉시컬 환경의 정의는 특정 코드가 작성, 선언된 환경을 의미하며 모든 함수, 코드 블록, 스크립트는 렉시컬 환경을 가집니다 아래 코드로 예시를 보도록 하겠습니다 let test = "a" function study(){ let num = 1; } 자바스크립트 코드를 실행하게 되면 우선 전역 렉시컬 환경이 생성이 됩니다 이러한 전역 렉시컬 환경에는 저희가 작성한 변수와 함수들이 자리 잡게 되는데 저희는 test라는 ..

이벤트 루프 와 마이크로태스크큐 와 매크로 태스크 큐

자바스크립트의 특징 중에 단일 스레드라는 특징이 있습니다 단일 스레드랑 한 번에 하나의 작업만을 처리할 수 있다는 뜻입니다 하지만 실제로 자바스크립트로 코딩을 하고 구동을 해보면 여러 작업을 이 동시에 처리되는 것을 확인할 수 있습니다 그러면 단일 스레드인 자바스크립트가 어떻게 동시성을 구현했을까?라는 의문점이 생기게 됩니다 오늘은 그 의문점을 풀 수 있는 자바스크립트에 이벤트 루프와 마이크로 태스크 큐, 매크로 태스크 큐를 알아보도록 하겠습니다 이벤트 루프를 알기 전 자바스크립트 엔진에 구성에 대해서 먼저 알아보도록 하겠습니다 자바스크립트 엔진 자바스크립트는 위에서 설명했듯이 단일 스레드로 구성되어있는 언어입니다 즉 콜백을 처리할 공간이 한 가지만 존재한다는 뜻입니다 아래 사진에 JS 부분을 보게 되면..

자바스크립트 호이스팅

자바스크립트를 배우다면 호이 스팅이라는 단어가 필수적으로 등장을 합니다 면접을 볼 때도 호이 스팅이 무엇이냐고 질문이 들어올 수도 있습니다 오늘은 자바스크립트에서 중요한 호이 스팅에 대해서 알아보도록 하겠습니다 호이스팅 호이스팅에 대해 정의를 하자면 '자바스크립트 코드가 실행되기 전 변수 선언/함수 선언이 해당 스코프의 최상단으로 올려진 거 같은 현상'을 의미합니다. 여기서 중요한 부분은 최상단으로 올려진 것 이 아니라 최상단으로 올려진 것 같은 현상이 중요합니다 이런 정의로는 이해하기가 쉽지는 않기 때문에 코드로 보도록 하겠습니다 var test = "abc"; console.log(test); //abc 위와 같은 자바스크립트 코드를 실행하면 콘솔에 정상적으로 abc가 찍히게 됩니다 하지만 아래와 같..