https://github.com/hyp3rflow/frontend-interview
기술면접 뚫기
https://github.com/hyp3rflow/frontend-interview
Last synced: about 1 month ago
JSON representation
기술면접 뚫기
- Host: GitHub
- URL: https://github.com/hyp3rflow/frontend-interview
- Owner: hyp3rflow
- Created: 2021-02-18T12:03:59.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-02-19T15:13:47.000Z (almost 5 years ago)
- Last Synced: 2025-01-29T00:09:51.720Z (11 months ago)
- Size: 3.91 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 프론트엔드 기술면접 대비
## 개발 지식 관련
- 프레임워크와 라이브러리의 차이?
중요한 것은 **flow of the application**. 라이브러리는 라이브러리 사용자가 그 흐름을, 또는 아키텍쳐를 구성해야 하지만 프레임워크의 경우에는 프레임워크에서 주어지는 대로 아키텍쳐를 구성해야만 한다.
예를 들어, React도 컴포넌트 구성 등에 대한 여러 규칙이 존재하지만, 그 규칙만 만족한다면 흐름은 개발자가 짜는 대로 동작하게 된다. 그러나 django 같은 프레임워크의 경우에는 아키텍쳐에 대한 규칙이 존재하며 그 규칙을 따라야만 하는 차이점이 있다.
React를 사용하는 프레임워크 중 SSR로 유명한 Next.js와 React의 차이점에 대해 생각해본다면 쉽게 이해할 수 있을 것이다. Next.js에는 React에서 강제하지 않는 pages 디렉토리와 같은 아키텍쳐 측면의 여러 규약사항들이 존재한다.
- 함수형 프로그래밍(FP)에 대한 설명?
함수형 프로그래밍은 부수 효과(Side effect)가 존재하지 않는 순수 함수(Pure Function)을 이용하는 프로그래밍 패러다임이다. 순수 함수는 값을 반환하는 것을 제외한 값을 변경하거나 입출력과 관련된 부수적인 동작을 하지 않는 함수이다. 객체에 바꿀 수 있는 값을 저장하고 사용하는 객체 지향 프로그래밍(OOP)과 달리, 변할 수 있는 값 자체를 저장하거나 다루지 않는다는 점에서 차이점이 있다고 할 수 있다.
- HTTP의 특징?
HTTP(HyperText Transfer Protocol)은 클라이언트와 서버 사이에서 이루어지는 요청을 처리하는 프로토콜(통신 규약)이다. HTTP의 특징은 요청-응답(request-response) 구조로 이루어져 있다는 것과 무상태성(stateless), 즉 각각의 통신은 독립적이라는 특징이 있다. 따라서 로그인 정보 등을 관리할 때는 쿠키나 세션 등을 사용해야 한다.
- HTTP/3의 특징?
TCP 기반이 아닌 UDP 기반의 QUIC를 이용하며, 클라이언트가 요청하지 않은 정보를 내려주는 서버 푸시가 가능해져 RTT가 절약된다. 한번의 TCP 연결으로 여러 데이터를 전송하는 멀티플렉싱 또한 HTTP/2와 같이 지원한다.
## 자바스크립트 관련
- Ajax 통신 - Axios vs Fetch
Ajax(**Asynchronous Javascript and XML**)는 자바스크립트를 통해 비동기로 서버와 데이터를 주고받는 기술이다. 초기에는 XML 데이터를 전달하였지만, 요즘은 JSON 형태의 데이터를 전달하는 추세이다.
이러한 Ajax 통신을 가능하게 해주는 대표적인 API는 Axios와 Fetch가 있다.
Axios는 JSON 데이터를 자동으로 변환해주는 장점이 있으며, 타임아웃 관련 설정이 존재한다. 이와 달리 Fetch는 IE에서는 지원하지 않는 WebAPI로, 구형 브라우저 지원을 위해서는 별도의 polyfill을 추가해주어야 할 필요가 있다. 두 API 모두 응답으로 Promise 객체를 반환한다는 점은 동일하다.
- 비동기 처리 - Callback, Promise, Async & Await
Callback 함수는 결과가 바로 전달되는 것이 아닌, 딜레이가 존재하는 경우 반환값을 함수로부터 받지 않고 반환될 값을 받아 실행하고자 하는 함수를 인자로 전달하기 위해 사용하는 것이다. 콜백 지옥이라는 코드 가독성을 해치는 유명한 단점이 존재한다.
Promise는 ES6부터 도입된 개념으로, Promise 객체를 반환하는 then, catch 메소드를 체이닝하여 사용하면 된다. Promise.all 같은 메소드를 이용해 Promise 객체를 한번에 resolve하는 방법도 사용할 수 있다. Promise의 처리 과정은 Pending, Fulfilled, Rejected 세 상태로 나뉘어져 있으며, Promise는 resolve와 reject 두 함수 인자를 받는 함수를 이용해 새로운 객체를 만들 수 있다.
Async와 Await은 ES7부터 도입된 개념으로, Promise를 사용하는 개선된 방법인데, Promise를 메소드 체이닝으로 해결할 경우 디버깅이 힘들고 체이닝이 길어지는 경우 코드 구조가 복잡해진다는 단점이 있다. async/await을 통해 비동기 코드를 동기 코드처럼 작성함으로써 그런 단점들을 해소할 수 있다.
- 스코프, 클로저와 호이스팅 - Scope, Closure & Hoisting
스코프는 어떤 변수들이 있고 어떻게 참조하는 지에 관한 것이다. 스코프에는 전역 스코프와 지역 스코프가 존재하는데, 전역 스코프는 말 그대로 어떤 함수나 중괄호에 속한 것이 아닌 바깥에 선언된 경우를 말한다. 지역 스코프는 함수 내부에서 선언했을 때의 함수 스코프와 중괄호를 이용해 선언했을 때의 블록 스코프로 나눌 수 있다.
클로저는 함수와 그 함수가 선언된 어휘적 환경(Lexical Environment)의 조합이다. 클로저는 어휘적 스코프(Lexical Scoping)과 큰 연관이 있는데, 함수 내부에서 함수를 선언할 때, 내부의 함수를 클로저라고 부른다. 이 클로저는 외부 함수에서 생성된 변수들에 접근할 수 있는 권한을 가지고 있다.
호이스팅은 var로 변수를 선언하거나 함수를 선언할 때 어느 위치더라도 가장 위로 끌어올려지는 현상이다. 물론 var 변수 선언과 관련된 내용이지 할당에까지는 일어나지 않는다.
- 프로토타입은 무엇인가?
프로토타입 = 프로토타입 링크 + 프로토타입 오브젝트
ES6 이전에는 클래스가 존재하지 않았으며, OOP와 관련된 기능을 프로토타입을 통해서 구현했다. 클래스와 같은 객체들은 함수로 생성되며, 함수 앞에 new 키워드를 붙임으로써 새로운 인스턴스를 만들 수 있다.
함수가 정의될 때는 해당 함수에 생성자(Constructor)가 부여되어 new 키워드로 객체를 만들 수 있게 되고, 프로토타입 오브젝트도 함께 생기게 된다. 프로토타입 오브젝트는 기본 속성으로 생성자와 \_\_proto\_\_를 가지고 있는데, 생성자는 정의한 함수를 가리키고 \_\_proto\_\_는 프로토타입 링크라고 부르며 객체가 생성될 때 조상이었던 함수의 프로토타입 오브젝트를 가리킨다. 즉, 함수를 이용해 새로운 객체를 만들면 그 객체의 \_\_proto__는 함수와 관련된 프로토타입 오브젝트를 가리키게 되는 것이다.
프로토타입 오브젝트의 프로토타입 링크에 다른 프로토타입 오브젝트가 들어가 있게 되면 상속과 같은 기능이 구현이 되는 것으로, 모든 프로토타입 오브젝트는 Object의 프로토타입 오브젝트를 프로토타입 링크로 가진다. 객체가 가지고 있지 않은 속성을 찾기 위해 프로토타입 링크를 따라 찾아갈 수 있는 형태를 프로토타입 체인이라고 부른다.
## 백엔드 관련
- 대칭 키 암호화와 공개 키 암호화의 특징에 대하여
대칭 키 암호화는 같은 키를 이용해서 암호화와 복호화를 하는 고전적인 방식이고, 공개 키 암호화는 공개된 하나의 키로 암호화를 하고 복호화는 개인 키로 하는 방식이다.
- 해싱과 암호화의 차이점
해싱은 어떤 값을 해시 함수에 대입시켜 얻은 결과를 사용하는 방식으로, 원래의 값을 되돌릴 수 없다는 특징이 있고 낮은 확률이지만 서로 다른 값이 같은 해시 값을 가질 수 있다. MD5, SHA와 같은 알고리즘들이 대표적이다.
암호화는 해싱과 달리 복호화를 통해 암호화된 정보를 복원하는게 가능하다는 특징이 있다. 암호화는 크게 대칭 키 암호화와 공개 키 암호화로 나눌 수 있고, 대표적으로 대칭 키 암호화에는 AES, 공개 키 암호화에는 RSA와 같은 알고리즘이 존재한다.