프론트엔드 개발자 면접 질문 정리

면접 대비 용도로 일단 중요한 것만 간단하게 정리.

 

1. 브라우저 랜더링 과정

 

• 주소창에 주소를 입력하면 dns가 실제 서버를 찾아줌
• 랜더링에 필요한 리소스 요청 및 응답함
• 응답받은 html, css 파싱, 렌더트리 생성
• 응답받은 자바스크립트 파싱, 파싱하면서 dom 객체를 변경할 수 있음, 렌더트리 결합
• 렌더 트리 기반으로 브라우저에 페인팅

 

2. 호이스팅

 

 

자바스크립트에서는 변수를 선언하면 선언단계와 초기화 단계를 거친다.

그런데, 이러한 변수가 선언되면 소스코드에서 어디에 위치하든 실행되는 시점이 아니라 제일 먼저 실행된다. 그리고 단순 변수 선언 뿐 아니라 class, function, class 등 모든 식별자가 호이스팅 된다.

 

 

3. let, const를 사용하는 이유

 

 

일단 var 키워드는 같은 변수명으로 중복 선언해도 오류가 발생하지 않는다. 변수 값이 변경된다.

또 함수레벨 스코프가 적용된다. 함수블록이 아닌 곳에서 선언되면 모두 전역변수로 간주한다.

let과 const는 같은 변수명으로 중복 선언을 금지하고, 블록레벨 스코프가 적용되어 이러한 점들을 방지할 수 있다.

let과 const의 차이는 let은 담긴 값을 변경할 수 있지만 const는 선언과 동시에 초기화가 필요하고 값은 변경할 수 없는 상수 개념이다.

 

** const에 담긴 값이 반드시 변경되지 않는 것은 아니다.  객체를 담아 프로퍼티에 접근하는 방식으로 값을 바꿀 수 있다.

 

 

4. DOM 객체

 

 

document object model, 문서 객체 모델이다. html은 하나의 문서이고, dom은 이러한 문서 내의 요소들을 정의하고, 요소에

접근할 수 있게 한다.

 

 

5. 클로저

 

 

함수레벨 스코프를 생각하면 된다. 자바스크립트는 함수가 선언된 시점에서 유효범위를 갖는다. 이것을 활용하면 내부 함수에서 외부 함수의 변수에 접근할 수 있고, 

외부함수는 외부함수의 변수를 사용하는 내부함수가  소멸될때 까지 소멸되지 않는다.

 

 

6. margin padding 차이

 

 

똑같이 여백을 줄때 사용하기는 하지만, margin은 요소와 요소 사이의 간격을 의미한다. padding 요소 자체의 크기가 바뀌는 원리인데, 요소 안에 표시되는 내용의 위치를 설정하게 된다.

 

 

 

7. GET, POST 차이

 

 

 

⭐ GET : 클라이언트에서 서버로 어떤 정보를 요청하기 위해 사용되는 메서드. 데이터를 읽거나 검색하는 용도이다. 오로지 데이터를 읽을 때만 사용하고 수정할 때는 사용하지 않는다. get은 파라미터에 요청하는 내용이 노출되고 북마크에 추가할 수도 있다.

 

⭐ POST : 클라이언트에서 서버로 어떤 정보를 생성 수정 삭제 등 업데이트하기 위해 사용되는 메서드. 데이터가 body로 전송되고 브라우저 기록에 남지 않는다. 북마크에 추가할 수 없다. GET보다는 안전해보이지만 개발자 도구 등을 통해서 데이터를 확인할 수 있기 때문에 민감한 데이터는 암호화해야한다.

 

 

 

8.  display, opacity, visibility 차이

 

속성	영역	이벤트	tap focus
opacity: 0	있음	작동함	가능
visibility: hidden	있음	작동안함	불가능
display:none	없음	작동안함	불가능