프론트엔드 면접 질문 리스트 1
[CSS]
position사용 방법에 대해서 설명해주세요
position은 문서 상에 요소를 배치하는 방법을 지정한다. 그리고 top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다.
여기서 5가지 값을 가지는데- static : 요소를 일반적인 문서 흐름에 따라 배치한다.
- relative : 요소를 일반적인 문서 흐름에 따라 배치하고 자기 자신을 기준으로 삼는다.
- absolute : 요소를 일반적인 문서 흐름에서 제거하고 페이지 레이아웃에 공간도 배정하지 않는다. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치하며 없으면 초기 컨테이닝 블록을 기준으로 삼는다.
- fixed : 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다. 이는 뷰포트의 초기 컨테이닝 블록을 기준으로 삼는다.
- sticky : 요소는 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록을 기준으로 삼는다.
margin과padding에 대해서 설명해주세요- margin : 정의된 border 밖의 element 주위에 공간을 만드는데 사용된다.
- padding : 정의된 border 안의 element 주위에 공간을 만드는데 사용된다.
[JavaScript]
- 호이스팅에 대해 설명해주세요
어느 위치에 있든 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 것을 말한다. - 클로저(closure)에 대해 설명해주세요
외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수가 이미 생명 주기가 종료된 외부 함수의 변수를 참조할 수 있는데 이 중첩 함수를 클로저라고 한다. 이는, 외부 함수의 실행 컨텍스트의 생존 여부와 상관없이 자신이 정의된 위치에 의해 결정된 상위 스코프를 기억한다는 것을 이용해 중첩 함수 내부에서는 상위 스코프의 식별자를 참조할 수 있고 식별자의 값을 변경할 수 있다. 또한, 클로저는 상태가 의도치 않게 변경되지 않도록 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하여 상태를 안전하게 변경하고 유지하기 위해 사용한다. this에 대해서 설명해주세요
this 바인딩은 함수 호출 방식에 따라 동적으로 결정된다.- 일반 함수 호출 : 전역 객체
- 메서드 호출 : 메서드를 호출한 객체
- 생성자 함수 호출 : 생성자 함수가 (미래에) 생성할 인스턴스
- apply/call/bind 메서드에 의한 간접 호출 : apply/call/bind 메서드에 첫 번째 인수로 전달한 객체
- JavaScript는 어떤 방식으로 동작하는지 설명해주세요
자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드(single thread) 방식으로 동작한다. - 브라우저가 동작하는 것을 살펴보면 많은 태스크가 동시에 처리되는 것처럼 느껴지는데 어떻게 된 것인지 설명해주세요
브라우저 환경은 태스크 큐와 이벤트 루프를 제공하여 자바스크립트의 동시성을 지원한다. 즉, 자바스크립트 엔진은 싱글 스레드로 동작하지만 브라우저는 멀티 스레드로 동작하기 때문이다. - 비동기 처리 방식를 동기 처리 방식으로 코딩하는 방법을 설명해주세요
ES6에서는 제너레이터를 이용해서 동기 처럼 구현할 수 있다. 제너레이터 함수는 next 메서드와 yield 표현식을 통해 함수 호출자와 함수의 상태를 주고 받을 수 있기 때문이다. 그러나 제너레이터는 코드가 무척 장황해지고 가독성이 나빠지는 단점이 존재하기 때문에 ES8에서는 async/await가 도입되었다. 이를 활용하여 프로미스의 후속 처리 메서드 없이 마치 동기 처리처럼 프로미스가 처리 결과를 반환하도록 구현할 수 있다. - Event Loop에 대해 설명해주세요
이벤트 루프는 브라우저에 내장되어 있는 기능으로 콜 스택에 현재 실행 중인 실행 컨텍스트가 있는지, 그리고 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인한다. 만약 콜 스택이 비어 있고 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적(FIFO)으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킨다. 이때 콜 스택으로 이동한 함수는 실행된다. 즉, 태스크 큐에 일시 보관된 함수들을 비동기 처리 방식으로 동작한다. - 마이크로태스크 큐와 태스크 큐에 대해 설명해주세요
둘다 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역이라는 점이 공통점이지만 마이크로태스크 큐는 프로미스의 후속처리 매서드의 콜백함수가 일시 저장되며 우선순위가 태스크 큐보다 높다는 점이 다르다. - 이벤트 버블링에 대해 설명해주세요
이벤트가 하위 요소에서 상위 요소 방향으로 전파하는 것을 이벤트 버블링이라고 한다. - 이벤트 버블링은 하위 요소에서 상위 요소 방향으로 전파하는데 반대로 구현하는 방법에 대해 설명해주세요
addEventListener메서드의 3번째 인수에 true 값을 넣어주면 캡처링을 구현할 수 있다. - 이벤트 전파를 방지하는 방법에 대해 설명해주세요
이벤트 객체의 stopPropagation 메서드를 사용한다. -
제너레이터에 대해 설명해주세요
ES6에서 도입된 제너레이터(generator)는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수이다. 이는 세가지 특성을 가진다.- 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다.
- 함수 호출자와 함수의 상태를 주고받을 수 있다.
- 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다.
제너레이터 함수를 사용하면 이터레이션 프로토콜을 준수해 이터러블을 생성하는 방식보다 간단히 이터러블을 구현할 수 있으며 비동기 처리를 동기 처리처럼 구현할 수 있다.
-
이터러블 프로토콜, 이터레이터 프로토콜, 이터레이션 프로토콜에 대해 설명해주세요
- 이터레이션 프로토콜 : ES6에서 도입된 이터레이션 프로토콜은 순회 가능한(iterable) 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다.
이터레이션 프로토콜(iteration protocol)에는 이터러블 프로토콜(iterable protocol)과 이터레이터 프로토콜(iterator protocol)이 있다.
- 이터러블 프로토콜 : 이터러블 프로토콜을 준수한 객체를 이터러블이라고 하며 이터러블은 for…of 문으로 순회할 수 있고 스프레드 문법과 배열 디스크럭처링 할당의 대상으로 사용할 수 있다.
- 이터레이터 프로토콜 : 이터레이터 프로토콜을 준수한 객체를 이터레이터라고 하며 이터레이터는 이터러블의 요소를 탐색하기 위한 포인터 역할을 한다.
- 실행 컨텍스트에 대해 설명해주세요
실행 컨텍스트는 식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 매커니즘으로, 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다. 이 때, 식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리하고 코드 실행 순서는 실행 컨텍스트 스택으로 관리한다.
- 브라우저 렌더링 원리 (홈페이지가 사용자에게 보이는 순서)
- HTML 문서를 파싱하고 DOM Tree를 구축한다. 그 다음 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱한 후 CSSOM Tree를 구축한다.
- 구축한 두 트리를 결합하여 렌더 트리를 만든다.
- 렌더 트리를 브라우저의 뷰포트 내에서 화면에 어떻게 배치해야 할 것인지 노드의 정확한 크기와 위치를 계산한다.
- 계산된 값을 이용해 각 렌더 트리의 노드를 화면상의 실제 픽셀로 변환해 화면에 그린다.
- GET, POST가 어떻게 다르게 쓰는지?
- GET : 서버에게 리소스를 달라고 요청하기 위해 쓰인다.
- POST : 서버에 입력 데이터를 전송하기 위해 쓰인다.
- 브라우저 저장소에 대한 차이점이란? (Localstorage, SessionStorage, Cookie)
- Restful API이란? (GET, PUT, POST, PATCH, OPTION, DELETE)
출처 :
댓글남기기