프론트엔드 면접 질문 및 답변

Seungmin Shin·2022년 3월 6일
4
* 해당 질문은 구글링 한 블로그에서 가져온 질문들이고 그것에 대한 답변은
스스로 공부하고 정보를 찾아 새롭게 답변한 내용입니다.

출처: https://sunnykim91.tistory.com/121

1. 브라우저 주소창에 www.naver.com 을 치면 일어나는 일

  1. 브라우저 주소창에 www.naver.com 을 친다.
  2. www.naver.com 의 IP 주소를 찾기위해 DNS 서버를 방문한다.
  3. 기존의 탐색한 캐시값이 없다면 ISP 의 DNS 서버가 www.naver.com 의 IP 주소를 찾는다.
  4. 해당 IP 를 가지고 있는 서버봐 TCP 연결을 한다.
  5. 브라우저가 해당 서버에 HTTP 요청을 한다.
  6. 서버가 요청을 받고 response 를 다시 HTTP 에 실어보낸다.
  7. 브라우저가 해당 응답을 받아 HTML 을 파싱하여 브라우저 내에 출력한다.

2. HTTP 와 HTTPS 의 차이?

HTTPS 의 뒤에 붙은 "S" 는 "Secure" 의 약자이다. 그렇다는것은 이 둘은 "보안" 적인 차이가
존재한다는 뜻, 기존의 HTTP 는 서버와 데이터를 주고받는 중 중간자의 개입이 가능하여 사용자의
정보를 중간에 가로채어 확인할 수 있었다. 입력한 데이터가 그대로 전송되었기 때문이다.
하지만, HTTPS 로 인하여 입력한 데이터가 서버로 전달될때 암호화가 되어 전달되기때문에 중간자의
개입이 불가능해졌다. 그 방식은 대칭키, 비대칭키 방식등으로 사용이 되었다.
이러한 기능들이 추가가 되었기 때문에 기존 HTTP 와는 속도면의 차이가 있다고는 하는데 심할정도로
차이가 나는것은 아닌듯 하다. 민감한 정보를 다루는 서비스가 아닌경우 HTTP 를 사용해도 무방하다고 한다.

3. OOP (Object Oriented Programming) 란?

객체지향 프로그래밍 이란 뜻이다. 4가지 특징이 존재하는데,
1. 추상화 - 필요한 정보만을 중심으로 간소화시킨것을 의미한다. 객체들의 공통적인 속성과 기능을
중심으로 추상화시킨다.
2. 캡슐화 - 추상화를 통해 객체를 정의하고 객체에 필요한 데이터나 기능을 해당 객체에 그룹화
시켜주는걸 캡슐화 라고 한다.
3. 상속 - 부모클래스가 자식클래스에게 부여할 수 있는 개념이다. 상속이 필요한 이유는, 여러 객체에서
사용되는 기능을 하나의 클래스로 사용될 수 있도록 하기 위함이다. 쉽게말해, 중복되는 코드를
재 사용하기 위함이다.
4. 다형성 - 객체지향 프로그래밍 이란것이, 객체간의 관계를 디자인하는 프로그래밍인데,
다형성이 이러한 관계를 유연하게 해준다. 사람이 음식을 먹는다 에서 음식치킨 이 될 수도,
피자 가 될 수도 있다. 이러한 특징이 다형성이다.

4. 함수형 프로그래밍 이란?

자료처리를 수학적 함수의 계산법으로 취급하여 상태와 가변데이터를 멀리하는 프로그래밍 패러다임이다.

5. 함수형 프로그래밍에서 순수함수란?

  1. 동일한 입력에는 항상 같은 값을 반환해야하는 함수.
  2. 함수의 실행이 프로그램의 실행에 영향을 미치지 않아야하는 함수.
  3. 함수 내부에서 인자의 값을 변경하거나 프로그램 상태를 변경하는 Side Effect 가 없는것.

6. OOP 와 함수형 프로그래밍의 가장 큰 차이?

궁극적으로 데이터를 다루는 개념과, 간결한 코드작성에 대한 관점의 차이가 있다.
OOP는 함수의 동작부를 캡슐화 하여 코드를 이해할 수 있게 돕는다면,
함수형은 동작부를 최소화 시켜 이해를 돕는다.
OOP는 클래스를 중심으로 객체간의 관계가 긴밀한데 비해, 함수형은 순수함수를 이용하므로, 사이드이펙트
자체도 미연에 방지가되며 독립적으로 운용이 가능하다 (React Hooks로 그 경계선이 모호해지긴 했다.)

7. 웹 프로토콜 이란?

말 그대로 웹에서 쓰이는 통신 규약이다, 프로토콜은 규약이란 의미를 가진다.
"내가 이러이러해서 요청을 할테니, 너는 이러이러 하게 응답을 줘" 라는 형식을 가진다.

8. HTTP 통신이란?

Hyper Text Transfer Protocol 의 약자이다, 웹프로토콜 중 하나로 가장 많이 쓰인다.
인터넷에서 데이터를 주고받을 때 쓰는 통신규약이다, 요청과 응답으로 이루어져 있다.

9. AJAX 란?

JavaScript 라이브러리 중 하나이며, Asynchronous Javascript And Xml 의 약자이다.
브라우저가 가지고있는 XML Http Request 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의
일부만 로드하는 기법이고, 한마디로 정의하자면 JavaScript 를 사용한 비동기통신, 사용자와 서버간에
XML 데이터를 주고받는 기술이다. 쉽게말해 기존의 HTML Form 태그가 아닌 JavaScript 를 통해서
서버에 데이터를 요청하는 것.

10. Promise 와 Callback 의 차이?

기본적으로 알고 있는 정보는 "콜백지옥" 의 문제이다. 콜백지옥으로 가독성이 떨어져 Promise를 사용하는데,
조금 더 딥하게 들어간다면, callback을 사용하면 비동기 로직의 결과값을 처리하기 위해서는 callback
안에서만 처리를 해야하고, 콜백 밖에서는 비동기에서 온 값을 알 수가 없다. 하지만 promise를 사용하면
비동기에에서 온 값이 promise 객체에 저장되기 때문에 코드 작성이 용이해진다.

11. 자바스크립트의 원시타입의 종류는?

Boolean, String, Number, Undefined, Null, Symbol 총 6종류가 있다.
Undefined 는 선언은 되있지만 값이 없는 상태, Null 은 자료형이 객체이며, 의도적 빈값을 의미한다.

12. 실행 컨텍스트란?

실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이라고 정의하면 된다. 쉽게 말하자면
코드들이 실행되기 위한 환경이라고 생각하면 된다. 코드가 실행된다면 실행컨텍스트 안에서 실행되고
있는 것이다. 두가지가 있는데
1. 전역컨텍스트 - 함수 내부에서 실행되는것이 아니라면, 무조건 전역컨텍스트 (Global Context) 에서
실행된다.
2. 함수 컨텍스트 - 선언된 함수가 호출이 될 때를 기점으로 생성이 되고, 모든 동작이 종료되면 소멸된다.

profile
Frontend Developer

0개의 댓글

관련 채용 정보