프론트엔드 면접 질문

1. 브라우저 렌더링 원리

브라우저가 화면에 나타나느 요소를 렌더링 할 떄, 웹킷이나 게코 등과 같은 렌더링엔진을 사용합니다. 렌더링 엔진이 HTML,CSS,Javascript로 렌더링할 때 CRP라는 프로세스를 사용하며 다음 단계로 이루어진다.

1. HTML를 파싱 후 DOM트리를 구축

2. CSS를 파싱 후, CSSOM트리를 구축

3. Javascript를 실행 -> HTML 중간에 스크립트가 있다면 HTML 파싱이 중단

4. DOM과 CSSOM을 조합하여 렌더트리를 구축 -> display:none은 화면에서 보이지도 않고 공간을 차지않은 것은 렌더트리로 구축X

5. 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확하 위치와 크기를 계산(Layout 단계)

6. 계산한 위치/크기를 기반으로 화면에 그림

 

CRP: 화면에 픽셀로 변화하는 일련의 단계를 나타남

파싱: 하나의 프로그램을 런타임 환경이 실제로 실행할 수 있는 내부 포맷으로 분석하고 변환한는 것, 문서의 내용을 토큰으로 분석하고, 문법적 의미와 구조를 적용한 파스 트리(parse tree)를 생성하는 과정

DOM: 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미

CSSOM: CSS 내용을 파싱하여 자료를 구조화 한 것 CSSOM

Layout: 뷰포트 내에서 노드의 정확한 위치와 크기를 계산

Paint: 렌더 트리의 각 노드를 화면의 실제 픽셀로 변환하는 마지막 단계에 이러한 정보 전달

 

2. Reflow와 Repaint가 실행되는 시점

Reflow: 생성된 DOM 노드의 레이아웃 수치 변경 시 영향 받은 모든 노드의 수치를 다시 계산하여 렌더 트리를 재생성하는 과정

Repaint: 가시성이 변경되는 순간(opacity, background-color,visibility,oultine) Reflow가 실행된 순간 뒤에 실행

 

3. 주소창에 google.com을 입력하면 일어나는 일

사용자가 웹 브라우저를 통해 google.com을 입력하면 URL주소 중 도메인 네임 부분을 DNS서버에 검색

DNS서버에서 해당 도메인 네임에 해당하는 IP주소를 찾아 사용자가 입력한 URL 정보와 함께 전달

브라우저는 HTTP 프로토콜을 사용하여 요청 메시지 생성하고 HTTP 요청 메시지는 TCP/IP 프로토콜을 사용하여 서버로 전송

서버는 response메시지를 생성하여 다시 브라우저에게 데이터를 전송

브라우저는 response를 받아 파싱하여 화면에 렌더링

 

DNS: 사람이 읽을 수 있는 도메인 이름을 머신이 읽을 수 있는 IP주소로 변환

URL:인터넷의 리소스를 가리키는 표준 명치으로 서버의 자원을 요청할 떄 사용

 

HTTP:

HTTP(HyperText Transfer Protocol)은 TCP 기반의 클라이언트와 서버 사이에 이루어지는 요청/응답 프로토콜입니다. HTTP는 Text Protocol로 사람이 쉽게 읽고 쓸 수 있습니다. 프로토콜 설계상 클라이언트가 요청을 보내면 반드시 응답을 받아야 합니다. 응답을 받아야 다음 request를 보낼 수 있습니다.

 

TCP:

TCP (전송 제어 프로토콜)은 두 개의 호스트를 연결하고 데이터 스트림을 교환하게 해주는 중요한 네트워크 프로토콜입니다. TCP는 데이터 전송을 제어하고 데이터를 어떻게 보낼 지, 어떻게 맞출 지 정합니다. 또한 데이터와 패킷이 보내진 순서대로 전달하는 것을 보장해줍니다.신뢰성과 연결성을 책임지기 위한 프로토콜이 TCP입니다. 호스트와 호스트간의 데이터 전송은 IP(인터넷 계층 프로토콜)에 의지하면서 동시에 신뢰성 있는 전송에 대해서는 TCP가 책임지는 구조입니다.

 

4. 호이스팅(hoisting)이란

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 뜻함

자바스크립트에서 모든 선언(함수, var, let, const, class ..)은 hoist된다.
var 선언이 undefined로 초기화되는 반면, let과 const 선언은 uninitialized로 남아있다.

5. 클로저(Closure)란

함수와 함수가 선언된 어휘적 환경의 조합, 함수가 속한 렉시컬스코프를 기억하며 함수가 렉시컬 스코프 밖에도 실행될 떄도 그 스코프에 접근할 수 있게 하는 기능

자바스크립트에는 없는 캡슐화라는 개념을 구현할 수 있고 정보 은닉과 캡슐화가 가져다주는 이점들을 얻을 수 있다.

- 렉시컬스코프

함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정. 자바스크립트는 렉시컬 스코프를 따르므로 함수를 선언한 시점에 상위 스코프가 결정된다. 함수를 어디에서 호출했는지는 스코프 결정에 아무런 의미 안둠

 

6. this의 용법

호출 패턴에 따라 다른 객체를 참조. 실행 컨텍스트(EC)가 생성될 떄마다 this의 바인딩이 일어나며 우선순위 순으로 나열해보면 다음과 같습니다.

- call : call을 사용하면 함수를 실행하고 함수의 첫 번쨰 인자로 전달하는 값에 this를 바인딩

-apply: call과 마찬가지로 apply를 사용하면 함수를 실행하고 함수의 첫 번 째 인자로 전달하는 값에 this를 바인딩 => 인자를 배열로 바인딩

- bind: 함수의 첫 번째 인자에 this를 바인딩한다는 점은 같지만, 함수를 실행하지 않으며 새로운 함수 반환

 

7. 브라우저 저장소의 차이점

LocalStorage:

로컬 스토리지는 저장한 데이터를 지우지 않는 이상 영구적으로 보관이 가능

SessionStorage:

세션 종료 시 클라이언트에 대한 정보가 삭제

Cookie:

웹 사이트에서 쿠키를 설정하면 모든 웹 요청에는 쿠키 정보가 포함됩니다.

1. 쿠키 (Cookies):
   • 쿠키는 웹 브라우저와 웹 서버 간의 데이터 교환을 위한 작은 텍스트 파일입니다.
   • 쿠키는 클라이언트 측에서 저장되며, 일반적으로 브라우저 세션 간에 유지되거나, 설정된 만료 날짜/시간에 따라 영구적으로 저장될 수 있습니다.
   • 쿠키는 주로 사용자 세션 추적, 사용자 설정, 장바구니 정보 및 기타 선호도 저장에 사용됩니다.
   • 보안과 개인 정보 보호에 제한이 있으며, 중요한 데이터를 저장할 때 암호화 및 안전한 방법을 사용해야 합니다.
2. 로컬 스토리지 (Local Storage):
   • 로컬 스토리지는 클라이언트 측에서 데이터를 저장하는 데 사용되는 HTML5 웹 스토리지 메커니즘 중 하나입니다.
   • 로컬 스토리지는 브라우저 세션 간에 데이터를 영구적으로 저장할 수 있습니다.
   • 주로 온라인 및 오프라인 애플리케이션에서 사용자 데이터, 설정, 캐시 및 기타 정보를 저장하는 데 활용됩니다.
   • 데이터는 브라우저에서 별도의 지속성을 요구하거나 수동으로 지우지 않는 한 계속 보존됩니다.
3. 세션 스토리지 (Session Storage):
   • 세션 스토리지는 로컬 스토리지와 유사하지만 데이터가 브라우저 세션 동안만 지속되는 차이가 있습니다.
   • 브라우저 세션은 사용자가 웹 사이트에 접속하는 동안 지속하며, 브라우저를 닫거나 탭을 닫으면 데이터가 삭제됩니다.
   • 주로 웹 애플리케이션 내에서 일시적인 데이터를 저장하는 데 사용되며, 사용자가 세션 동안 상호작용하는 동안 데이터 유지가 필요한 경우 유용합니다.

8. Restful API

Representational State Transfer 아키텍처 스타일을 따르는 웹 서비스 

클라이언트와 서버 간의 통신을 위한 표준화된 방법 제공

RESTful API는 자원(resource)과 그 자원을 조작하기 위한 HTTP메서드를 사용하여 데이터를 요청,전송 및 변경하는 방식

자원(Resources):

RESTful API는 자원이라고 불리는 것을 URL로 나타냄. 이러한 자원은 데이터, 서비스 또는 기타 객체 포함

• RESTful API는 자원의 상태를 JSON, XML 또는 다른 형식의 데이터로 표현합니다.
• 클라이언트는 이러한 표현을 통해 자원의 현재 상태를 이해하고 조작할 수 있습니다.

9. Javascript는 어떤 언어

- 싱글스레드 논 블로킹: 자바스크립트는 비동기 처리를 통해 싱글 스레드이지만 블로킹 되지 않게 합니다. 하나의 요청이 완료될 때까지 기다리지 않고 동시에 다른 작업을 수행함으로써 문제를 해결

10. 비동기와 Javascript

async,await

11. Event Loop

Javascript의 런타임 모델은 코드의 실행, 이벤트의 수집과 처리, 큐에 대기 중인 하위 작업을 처리하는 이벤트 루프에 기반

bar을 호출할 때, bar의 인수와 지역 변수를 포함하는 첫 번째 프레임이 생성됩니다.

https://talkwithcode.tistory.com/89

12. 마이크로태스크 큐, 태스크 큐

둘 다 우선순위 큐

Web API의 setTimeout()의 콜백함수가 태스크 큐에 들어가고 Promise의 콜백함수가 마이크로태스크 큐에 들어감

마이크로태스크 큐가 먼저들어가서처리함

13. 이벤트 버블링,캡처링

- 이벤트 버블링: 이벤트가 하위 요소에서 상위 요소 방향으로 전파

- 이벤트 캡처링: 이벤트가 상위 요소에서 하위 요소 방향으로 전파

- 이벤트 위임: 비슷한 방식으로 여러 ㅇ소를 다뤄야할 떄 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를  단 하나마 할당해도 여러 요소를 한꺼번에 다룰 수 있음

14. 타입스크립트

 

15 실행문맥(실행 컨텍스트)

 

16. SPA,CSR,SSR의 차이

 

17. null,undefined,undeclared,NaN

 

18.HTML 렌더링 중에 JavaScript 실행되면 렌더링이 멈추는 이유

 

19. require와 import의 차이점

 

20. var, let,const 차이점

 

21. sass,scss의 장점

 

22. CORS에 대처하는 방법과 우회하는 방법

 

23. React의 라이프사이클

 

24. ES6에서 Arrow 함수를 언제,쓸까

 

25. 스켈레톤 UI