주니어 프론트엔드 개발자 기술면접 예상질문 - CS(1)

- 브라우저 렌더링 작동 원리 
: 홈페이지가 사용자에게 보이는 순서 , 브라우저가 클라이언트에게 보여져주는 원리
: 주소창에 URL을 입력했을 때 어떻게 웹 페이지가 보이는걸까?

일단 간결하게 설명하자면 url을 입력했을 때 브라우저가 서버에게 필요한 자원(HTML,CSS,JS)를 요청합니다. 그렇게 서버가 응답해주면 브라우저는 렌더링 엔진으로 HTML, CSS를 분석해서 화면에 그려내고 JS는 자바스크립트 엔진이 Javascript 파일을 로드하고 분석하여 실행하게 됩니다. 이것이 브라우저가 웹 페이지를 클라이언트에게 보여주게 되는 원리입니다.

렌더링 엔진의 동작 과정을 더 깊게 설명하겠습니다. 먼저 렌더링 엔진이 HTML 문서를 서버로부터 얻으면 그 HTML문서를 분석하여 DOM트리를 구축합니다. 그리고 CSS 파일의 스타일 요소도 분석하여 CSS 객체 트리도 만듭니다. 이렇게 생성된 DOM트리와 CSS객체트리를 합쳐서 또 렌더 트리를 구축하고 각 요소들을 화면에 배치하고 그려내는 것 입니다.

 

- Webpack, Babel, Polyfill

📌 웹팩

웹 애플리케이션을 구성하는 모든 자원, 파일을 하나의 파일로 병합하는 모듈 번들링을 한 것 입니다. 이는 다양한 모듈들을 하나의 자바스크립트 파일로 만들어줍니다. 웹팩에서 지칭하는 모듈이라는 개념은 자바스크립트 모듈에만 국한되지 않고 웹 애플리케이션을 구성하는 모든 자원, 파일을 의미합니다. 웹 애플리케이션을 제작하려면 HTML, CSS, Javascript, Images, Font 등 많은 파일들이 필요한데, 이 파일 하나하나가 모두 모듈입니다. 웹팩은 변수 유효 범위의 문제점을 ES6의 Modules 문법과 웹팩의 모듈 번들링으로 해결합니다. 웹팩을 사용하기 위해서는 Node.js와 NPM이 컴퓨터에서 설치되어 있어야 합니다.

 

📌 바벨 

: 자바스크립트 컴파일러!!!! 모든 실행환경에서 자바스크립트가 정상적으로 동작할 수 있도록

ES6이상에서 사용되는 최신 문법을 브라우저가 인식할 수 없기 때문에 ES6코드를 ES5코드로 변환해주고, 리액트의 JSX, TS까지 변환해주는 자바스크립트 컴파일러이다. 특정 버전 이상에서만 실행되는 코드나 특정 브라우저에서는 실행되지 않는 코드를 정상적으로 동작하게 만들어준다. 웹팩과 같은 모던 프로젝트 빌드 시스템은 코드가 수정될 때마다 자동으로 트랜스파일러를 동작시켜준다. 웹팩이 자동으로 바벨을 해준다.

 

📌 폴리필

브라우저에서 지원하지 않는 최신 자바스크립트 코드를 브라우저가 이해할 수 있게 즉, 렌더링할 수 있게 지원하는 코드이다. 브라우저마다 지원할 수 있는 스펙이 다르다. can i use 사이트에서 확인해보면 css도 속성값에 따라 브라우저가 지원하는 범위가 다르다는 것을 알 수 있다. ES6에서 새롭게 등장한 promise와 같이 ES5에서 변환할 수 있는 대상이 없는 경우에 에러가 발생하기 때문에 폴리필이 사용된다.

이처럼 폴리필은 말 그대로 구현이 누락된 새로운 기능을 메꿔주는 역할을 하고 유명한 폴리필로는 core.js,poltfill.io가 있다.

 

- Babel과 Polyfill 차이 

ES6+ 코드를 ES5로 변환한다고 하는데 그러면 모든 ES6+ 코드가 ES5로 변환될까?
다시 말해 Promise, async, Arrow function, class, Set/Map 등의 문법이 모두 바벨에 의해 컴파일 될까? 아니다.
어떤 것은 바벨에 의해 컴파일 되고, 어떤 것은 컴파일 될 수 없다.
ES5 이하를 지원하는 브라우저에서 Promise나 Set, Array.prototype.includes 를 읽어낼 수 없다.

이때 필요한 것이 바로 폴리필이다.
polyfill은 이전 브라우저에서 기본적으로 지원하지 않는 최신 기능을 제공하는 데 필요한 코드이다.

 

바벨은 최신 ES6+ 문법을 ES5로 바꾸어주는 것 ⇒  문법의 경우 바벨이 컴파일 가능

polyfill은 브라우저가 이해할 수 없는 코드에 대해 이해할 수 있는 코드 소스를 제공하는 것 ⇒ 새로운 객체, 메서드, 함수는 바벨이 컴파일 불가능

 

ex) 바벨이 컴파일 가능한 새로운 문법

const, let / spread operator / 화살표함수 / 구조분해할당

 

ex) 바벨이 컴파일 불가능해서 폴리필이 필요한 새로운 객체, 메서드, 함수

Promise, Set, Map, Array.prototype.includes, Object.entries, fetch

 

⇒ 즉, 트랜스파일러와 함께 폴리필을 사용하면 호환성에 대한 문제를 완벽하게 해결할 수 있을 것 같다.

 

- 이벤트 버블링, 이벤트 캡쳐링, 이벤트 위임 (이벤트 버블링 ↔  이벤트 캡쳐링)

1. 이벤트 버블링 : 하위 요소 → 최상위 요소까지 이벤트 전달

HTML 구조상 자식 요소에 발생한 이벤트가 상위 부모요소에 영향을 미치는 것이다. 이벤트 캡쳐링과 정반대이다. (최상위 부모에서 이벤트 발생 요소까지 이벤트 전달 되는 것)

2. 이벤트 캡쳐링 : 최상위 요소 → 해당 태그를 찾아 내려감

3. 이벤트 위임 ⇒ 하위 요소에 / 각각 이벤트를 붙이지 않고 / 상위 요소에서 / 하위 요소의 이벤트들을 / 제어하는 방식 

이벤트 버블링이나 캡처링을 차단하고 싶을때 e.stopPropagation을 호출

 

- 자바스크립트 실행 컨텍스트

자바스크립트가 실행되고 있는 환경
코드를 딱 시작했을 때 그때 코드 실행하기 위한 여러가지 정보들을 모아놓은 환경, 객체
ex) 어떤 변수가 있는지, 어떤 변수, 함수가 호이스팅 됐는지 스코프는 어떤지… scope chain은 어떻고, this는 어디에 어떻게 binding 되고 등등..

 

- 스코프란? (전역스코프, 블록스코프)

변수, 함수를 선언 ⇒ 변수, 함수가 유효한 범위를 의미 (살아있는 범위), 전역 스코프, 블록 스코프 두가지가 있음

1. 전역 스코프  : 코드 어느 곳에서나 사용가능

2. 블록 스코프 : 특정 블록 내부에서만 사용가능

                        : 블록 = 함수, 중괄호{} 로 구분되는 모든 영역 (코드 블록 내부에서 선연한 변수는 지역변수이다.)

 

- 주의! var와 let, const 블록스코프 차이

var로 선언한 함수의 스코프는 함수 블록 내이다. ({} 블록과 상관이 없다.)

즉, var는 함수에 의해서만 scope가 생성된다. if 문 안에 있으면 var로 선언한 x는 전역변수가 된다. 

 

let, const로 변수를 선언할 때의 scope은 블록({}) 단위이다.

 

- 스코프체인이란 무엇인가요?

스코프는 어떤 변수들에 접근할 수 있는 유효범위이다.

코드 어디서든 참조할 수 있는 전역스코프, 함수 자신과 하위 함수에서만 참조할 수 있는 지역스코프가 있다.

함수안에서 선언된 변수는 해당 함수안에서만 사용할 수 있으니 전역변수에 영향을 끼칠 수 없다.

내부함수는 호출된 변수를 찾기위해 먼저 자신의 스코프에서 찾고 없으면 한단계씩 외부로 나가면서 찾는다.
이렇게 꼬리를 물고 계속 범위를 넓히면서 찾는 관계를 스코프 체인이라고 부른다.

 

- 자바스크립트의 호이스팅에 대해 설명해보세요.

선언 전에 함수, 변수를 끌어올리는 자바스크립트 동작방식 (변수의 선언을 끌어올리는 것)

← 선언은 호이스팅되지만 할당은 호이스팅 안됨 그래서 undefined
자바스크립트는 모든 선언문을 찾아내어 ‘미리 메모리 공간을 할당’ 하는 호이스팅을 한다.

 

var → 선언 전에 접근 가능 - undefined 출력

let, const → 선언 전에 접근 불가능 - 오류 발생

⇒ undefined 출력보다는 오류가 발생하는 것이 코드 디버깅에 좋다.

 

기본적으로 const를 사용하고 재할당이 필요한 경우에만 let을 사용하자. var는 절대 사용하지 말자.

 

- var, let, const 차이점을 설명해주세요.

- var

함수에서 선언한 변수빼고는 모두가 전역 스코프
재선언 가능 : 같은 이름의 변수를 두번 이상 재선언 가능

재할당 가능 : 선언 전에 최상단으로 끌어올려지는 호이스팅 발생 → 선언 전에 접근 가능

⇒ 너무 유연하다. undefined 출력보다는 오류가 발생하는 것이 코드 디버깅에 좋다.

 

- let

블록스코프(함수, 중괄호{} 로 구분되는 모든 영역)

재선언 불가능

재할당 가능

선언 전에 접근 불가능

 

- const

재할당 불가능 → 변하고 싶지 않은 상수값들을 만들고 싶을때 const 쓰기

나머지는 let과 동일

⇒ let, const 쓰기.  **예측 가능한 결과**를 내어 버그를 줄일 수 있기 때문에
(그런데 let이랑 const도 호이스팅이 되긴 되는데 Temporal Death Zone이 있어서 선언문 이후에 써야 호이스팅이 된다.)

 

 

-  클로저는 무엇인가요? 원리와 왜 사용하는지?

자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수다.

함수를 선언할 때 만들어진 scope가 사라진 후에도 / 호출할 수 있는 함수. 계속 접근 가능.

실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상

 

- 자바스크립트 작동원리 = 웹 브라우저 동작원리 = 자바스크립트 런타임(동작 환경) : 이벤트 루프와 스택, 태스크 큐

https://jeongeuni.tistory.com/70

자바스크립트는 어떤 언어?, 브라우저 동작원리, 동기와 비동기

 

- 이벤트 루프란? 

싱글 스레드 기반의 언어인 자바스크립트 - 이벤트 루프를 이용하여 비동기 가능!

 

이벤트 루프 : 콜 스택과 콜백 큐의 상태를 계속 체크 → 콜 스택이 빈 상태 → 콜백 큐의 첫번째 콜백을 콜 스택으로 밀어줌

즉, 자바스크립트 엔진이 코드 조각을 하나씩 처리할 수 있도록 작업을 스케줄함
JS에서 비동기 작업을 처리할 수 있게 해줌

모든 비동기 방식의 API들(setTimeout, ajax 등)은 이벤트 루프를 통해 콜백 함수를 실행한다고 볼 수 있습니다.

 

- 프로세스와 스레드란?

- 프로세스

실행 중인 프로그램

즉, 사용자가 작성한 프로그램이 메모리 공간을 할당받아 실행 중인 것

프로그램에 사용되는 데이터와 메모리 등의 자원 + 스레드로 구성

 

- 스레드

프로세스 내에서 실제로 작업을 수행하는 주체

프로세스에는 한 개 이상의 스레드가 존재하여 작업을 수행

또한, 두 개 이상의 스레드를 가지는 프로세스를 멀티스레드 프로세스(multi-threaded process)

 

⇒ 자바스크립트는 싱글 스레드 언어

 

- DNS에 대해 설명해주세요. : 주소창에 naver.com을 입력하면 생기는 일

Domain Name System - 도메인에 관련된 시스템

문자로 된 인터넷 주소(사용자언어) → 숫자로 바꾸어 주는(=IP) 주소 시스템(컴퓨터언어)

이에 해당되는 IP주소로 번역 그래서 브라우저는 알맞은 웹페이지로 접속할 수 있는 것

 

우리가 웹사이트에 접속하기 위해서는 우리가 입력한 문자로 된 인터넷 주소를 컴퓨터가 알아들을 수 있도록 숫자로 바꾸어 주는 시스템이 필요합니다. 이때 사용되는 것이 DNS입니다.만일 인터넷 브라우저 주소창에 www.naver.com이라고 입력한다면 내 브라우저는 pc에 설정된 로컬 DNS서버에 해당 도메인과 호스트명의 ip를 가지고 있는지 물어보고 없다면 루트DNS서버에다가 이 주소에 해당하는 ip를 찾을 수 있는지 물어보는 시스템입니다. 이렇게 DNS서버는 이에 해당되는 IP주소로 번역해주고 인터넷 브라우저는 번역된 IP주소에 알맞은 웹페이지로 접속할 수 있는 것 입니다. 즉, 사용자가 입력한 인터넷 주소를 컴퓨터 언어로 바꿔주는 시스템입니다.

 

- GET, POST가 어떻게 다른지 설명해주세요.

get과 post는 둘 다 브라우저가 서버에 요청하는 것으로 http method 중 가장 많이 쓰이는 method입니다.

둘의 가장 큰 차이점은 url에 사용자가 입력한 값이 노출되는지 아닌지 입니다.

• GET : 조회 - 항공권 조회 시 사용 : 그저 요청하여 받아오기만 할 때

GET방식은 요청 시 사용자가 입력한 값들이 url에 노출됩니다. 또한 요청을 전송할 때 필요한 데이터를 Body에 담지 않고, 쿼리스트링을 통해 전송합니다. 쿼리스트링으로 url에 이어붙기 때문에 길이제한이 있어서 많은양의 데이터는 보내기 어렵습니다. 또한 이름 그대로 어떠한 데이터를 생성/수정/삭제없이 그저 요청하여 받아오기만 할 때 사용합니다. 예를들어 게시판의 리스트, 글 보기 기능

• POST : 생성 - 장바구니 기능 : 총 수량을 body에 담아 보냈었음 : 서버의 리소스를 새로 생성하거나 업데이트 할 때

POST방식은 요성 시 사용자가 입력한 값들이 url에 노출되지 않습니다. body에 데이터를 담아 보냅니다. 이에 POST는 많은 양의 보내기에도 적합합니다. 그리고 url에 노출되지 않으니 회원가입, 로그인 할 때 POST방식을 사용합니다. 그렇지만 POST 요청도 크롬 개발자 도구, Fiddler와 같은 툴로 요청 내용을 확인할 수 있기 때문에 민감한 데이터의 경우에는 반드시 암호화해 전송해야 합니다. 또한 서버의 리소스를 새로 생성하거나 업데이트 할 때 사용합니다.

 

- Restful API에 대해 아는대로 설명해주세요. (POST, GET, PUT, PATCH, DELETE)

브라우저가 서버에 요청하는 것

Rest한 요청의 API라는 것인데 직역하면 표현적인 상태 전달로 각 요청이 어떤 동적이나 정보를 위한 것인지 그 요청의 모습 자체로 추론이 가능하다는 것입니다.

즉, RESTful하게 만든 API는 요청을 보내는 주소만으로도 대략 이게 뭘 하는 요청인지 파악이 가능합니다.

이렇게 서버로 REST API로 요청을 보낼 때 HTTP라는 규약에 따라 전송하는데 그 중 REST api는 HTTP Method 중 GET, POST, PUT, PATCH, DELETE이 다섯개를 사용합니다.

그냥 post하나로 처리할 수 있지만 누구든 각 요청의 의도를 쉽게 파악하도록 즉, RESTful하게 API를 만들기 위해서는 목적에 따라 구분해서 사용해야합니다.

 

데이터를 처리하는 네가지 방법 HTTP Method → CRUD

Create(생성)새로운 정보 생성하는데 사용 → post , 생성하고자 하는 정보를 body에 객체로 담아서.

Read(조회)하는데 사용 → get , url에 조회하고자 하는 정보 쿼리스트링으로 명시

Update(수정)정보가 변경되었을 때 사용 → put(전체변경) or patch(일부수정), 수정하고자 하는 정보는 body에 객체로 담아서. Delete(삭제)정보를 삭제했을 때 → delete, url에 삭제하고자 하는 쿼리스트링으로 명시