면접

프론트엔드 면접 모아보기1

1. Sync, Async의 차이점(동기, 비동기의 차이점)에 대해서 설명해주세요.Sync는 작업 요청이 이뤄지고, 요청 응답을 기다리는 것을 의미합니다. Async는 특정한 요청의 응답을 기다리지 않고 다음 작업을 수행하는 것을 의미합니다. 자바스크립트는 기본적으로 싱글스레드이기 때문에 요청된 작업을 하나씩 수행하지만 setTimeout이나 fetch과 같은 Web API를 사용하여 비동기로 처리할 수 있게 됩니다. 2. 자바스크립트의 동작 원리에 대해 설명해주세요.자바스크립트는 자바스크립트 엔진 위에서 동작하는데요, 대표적으로 구글의 V8엔진이 있습니다. 자바스크립트 엔진은 메모리힙과 콜스택으로 구성되어 있습니다. 메모리 힙은 변수, 함수 등 메모리 할당이 이루어지는 공간입니다. 콜스택에는 자바스크립..

프론트엔드 면접(배열)

1. 자바스크립트 배열에 대해서 설명해주세요.자바스크립트의 배열은 순서가 있는 리스트 형태의 배열입니다. 따라서 여러 값을 하나의 자료구조에 저장할 수 있습니다. 자바스크립트 배열은 동적 배열이기 때문에 크기를 미리 지정해 놓지 않아도 되며, 요소를 자유롭게 추가하거나 제거할 수 있습니다. 요소를 추가할 때마다 배열의 크기가 자동으로 조절되는 방식으로 동작합니다. 또한 배열은 자바스크립트의 객체와 유사한 방식으로 관리됩니다. 해시 테이블과 같은 형태로 구현되어 있어, 배열 요소들은 메모리 상에서 연속적이지 않아도 되고, 배열 크기를 미리 지정하지 않아도 사용할 수 있습니다.마지막으로 내장된 메소드를 사용하여 배열을 쉽게 조작할 수 있습니다. 예를 들어 reduce, map 등의 메소드가 존재합니다.정리하..

프론트엔드 면접(의존성배열)

1. useEffect 사용 시 의존성 배열에 빈 배열을 넣는 것을 지양해야 하는 이유는 무엇일까요?useEffect는 의존성 배열로 전달한 값의 변경에 의해 실행되야 하는 훅입니다. 그러나 의존성 배열에 값을 전달하지 않고 단순히 최초 렌더링 때 한 번 실행하도록 한다면 이 콜백 함수로 인해 발생하는 부수 효과가 실제로 관찰해서 실행돼야 하는 값과는 별개로 작동한다는 것을 의미하기 때문에 빈 배열을 넣는 것은 useEffect 훅의 취지와 맞지 않습니다.

프론트엔드 기술 면접(heap, CI/CD)

1. 힙에 대해 설명해주세요.힙은 동적 메모리 할당에 사용되며, 프로그램 실행 중에 메모리 크기가 결정됩니다. 힙에 할당된 메모리는 개발자가 직접 관리해야 하며, 사용이 끝난 메모리는 명시적으로 해제해야 합니다.2. CI/CD에 대해 설명해주세요."지속적인 통합/지속적인 서비스 제공 또는 배포 CI(Continuous Integration)/CD(Continuous Delivery, Continuous Deployment)"의 약자입니다.`지속적인 통합(CI)`은 코드 변경사항을 정기적으로 빌드 및 테스트를 거쳐 공유 레포지토리에 통합하는 것을 의미합니다. 협업에서 발생할 수 있는 conflict를 수시로 확인하고 해결이 가능하며, 새로운 업데이트의 테스트와 출시 시간을 단축시킬 수 있습니다.`지속적인 ..

프론트엔드 면접(script 코드의 위치)

1. 코드는 태그와 태그 중에 어디에 들어가는 것이 좋은 것 같은지 본인의 생각을 말해주세요.자바스크립트 파일의 크기와 사용성에 따라 다를 수 있지만 파일의 크기와 사용성이 비슷하다면 태그 제일 하단에 들어가는 것이 좋습니다. 렌더링 엔진은 HTML을 읽어 DOM을 생성합니다. 생성중 script 태그를 만나게 되면 코드 파싱 제어권이 렌더링 엔진에서 자바스크립트 엔진으로 넘어가게 됩니다. (이를 blocking이 일어났다고도 합니다) 이후에 자바스크립트 파싱과 실행이 종료되면 다시 렌더링 엔진으로 제어권이 넘어가 HTML 파싱이 중단된 시점부터 다시 DOM 생성을 시작합니다.결국 코드를 만나게 되면 위에서 아래로 동기적으로 이루어지던 파싱이 중단된다는 의미이고 블로킹되는 것은 DOM 생성을 지연시킬 수..

프론트엔드 면접(render, commit단계)

1. 리액트의 render phase와 commit phase에 대해서 설명해주세요.리액트의 랜더링 과정은 render phase과 commit phase로 나뉩니다. render phase에서는 DOM에 그려질 요소들을 파악하는 단계입니다. 이때 재조정 과정을 거치게 됩니다. 재조정 과정에서 이전에 생성한 가상 DOM 트리와 새로 만든 가상 DOM 트리를 비교해서 실제 DOM 트리에 반영할 변경 사항을 파악합니다. 그리고 상태 업데이트가 발생한 컴포넌트를 호출해 새로운 가상 DOM트리를 만듭니다.다음으로 commit phase에서는 render phase에서 진행한 두 가상 DOM트리의 변화를 실제 DOM에 적용하는 단계입니다. 요약해서 render phase는 변경된 사항을 파악하는 단계이고, com..

프론트엔드 면접(hydrate, render)

1. hydrate란 무엇인지와 render와의 차이점을 설명해주세요.hydrate함수는 생성된 HTML 콘텐츠에 자바스크립트 핸들러나 이벤트를 붙이는 역할을 합니다.render와의 차이점은 다음과 같습니다.hydrate는 이미 렌더링된 HTML이 있다는 가정하에 이 렌더링된 HTML을 기준으로 이벤트를 붙이는 작업만 수행합니다. 하지만 render는 빈 HTML에 정보를 요소들을 렌더링하며 여기에 이벤트를 붙이는 작업까지 모두 한 번에 수행합니다.

프론트엔드 면접(클래스)

1. 자바스크립트 ES6에서 클래스는 무엇인가요?클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성됩니다. 그런데 ES6에서 클래스는 함수의 한 종류입니다. 그렇기 때문에, 함수와 동일하게 클래스 선언(Class declarations)과 클래스 표현(Class expressions)으로 클래스를 만들 수 있습니다.

프론트엔드 면접(브라우저 렌더링)

1. 브라우저 렌더링 파이프라인에 대해서 설명해주세요.- 알고있는 내용 먼저 브라우더는 HTML을 파싱하여 document object model, 즉 DOM을 생성합니다. 이때 css 파일을 만나면 DOM생성을 잠시 중단하고 파싱하여 CSSOM을 생성하고, 자바스크립트 파일을 만나면 역시 DOM생성을 중단하고 자바스크립트를 파싱합니다. 모든 코드를 파싱하면 DOM과 CSSOM을 합쳐 렌더트리를 생성합니다. 마지막으로 레이아웃과 페인트 과정이 진행되며 웹페이지를 그리는 순으로 렌더링이 진행됩니다. - 매일메일로 보충한 내용 브라우저 렌더링 파이프라인은 브라우저가 웹페이지를 화면에 표시하기 위해 거치는 과정을 의미합니다. 저는 이 과정을 5단계로 나눠 설명해보겠습니다. 첫 번째로 DOM트리 생성 단계입니다..