엘리스 면접 특강을 돌아보며 (feat. 백엔드)

엘리스에서 진행한 면접 특강을 오프라인으로 참관하고 왔습니다.

잔뜩 쫄아서(?) 면접 참가자로는 신청하지 못했습니다... 참 좋은 기회였을텐데 바보같은..

아쉬움을 뒤로 하고... 면접 특강은 1차 백엔드, 2차 프론트엔드로 진행이 되었습니다. 전 일찍 가서 백엔드부터 쭉 듣게 되었는데, 오프라인 참관자가 우리 5팀 손생님에서 참관자로 3명, 백엔드 면접자 2명, 프론트 면접자 1명... 😢 총 6명... 아무래도 온라인으로도 참가가 가능했던 특강이라 생각보다 적게 참석 했습니다.
그렇게 시작된 특강은!

우와! 생각보다도 좋고 유익한 시간이었고, 그만큼 아주 많은 과제를 다시 안게 되는 시간이었습니다.😂
이 포스트에서는 특강에서 다뤘던 키워드를 좀 나열하고 정리 해 보려고 합니다.

참여 전 공개 문제

🔥 NoSQL과 CAP theorem

🔥✅ 브라우저의 주소에 www.google.com을 입력하고 엔터를 입력하면 일어나는 일들을 설명

🔥 멱등성이란? 멱등성을 보장하는 REST method?

🔥✅ HTTP와 HTTPS의 차이?

🔥✅ HTTP를 사용하는 REST API 서버에게 HTTPS를 사용하게 하기 위해서는 어떠한 절차를 거쳐야 하는지?

많은걸 알수록 좋다는 것을 알지만, 그만큼 모든 걸 공부할 수 있을만큼 시간이 많지도 않으니, 그냥 저의 흥미를 끌었던 질문들을 좀 골라보자면

• 브라우저의 주소창에 URL을 입력하고 무슨일이 벌어지는지?
• HTTP와 HTTPS

정도가 있겠네요!

이 질문들에 대한 면접자들의 답변들을 들으시고 코치님께서 피드백 주신 내용들은 다음과 같습니다. (전체적인 디테일한 답변이 아닌 부족한 부분들에 대한 내용)

브라우저의 주소창에... 질문은 상당히 단골 질문이다. 프론트 분들은 더 자주 접할 수 있는 질문이고, 백엔드 분들도 알아두면 좋다. 브라우저-서버 간의 통신에 대해 얼마나 알고 있는지에 대한 열린 질문이기도 하고, 네트워크에 대해 얼마나 알고 있는지 가늠이 가능한 문제이기도 하다.
열린 질문이라는 의미는 아주 깊수히 파고 들 수도 있다는 것을 의미한다. HTTP -> TCP -> 패킷의 흐름까지 이해하고 설명 할 수 있으면 훌륭하다. (면접관으로 참석하신 분은 신입분들에게 이 정도까지 원하지는 않는다고 하심)
추가적인 키워드 : Cache, DNS, CDN, HTTPS의 암호화, 복호화 과정... 아는 만큼 설명 해 주면 좋다.

HTTPS는 서버쪽 공개키와, CA 인증서가 필요하다. 클라이언트는 인증기관이 인증해주는 인증서여야만 믿고 통신할 수 있다. 클리이언트가 신원을 확인하고 나서야 HTTPS 통신을 맺는다.
HTTP 버전이 3.0까지 나왔다. 3.0은 UDP를 채택했다. 따라서 HTTPS가 무조건 TCP를 사용한다고 하면 안된다. 추가적으로 왜 UDP를 사용하는지도 알면 좋다. (QUIC protocol)
HTTP 연결을 맺을 때 수행되는 TCP Three-way-handshake와 HTTPS 연결을 맺을 때 수행되는 TLS handshake를 설명할 수 있으면 좋다.

만약 지금의 저라면(프론트 입장에서) 다음과 같이 대답 했을 거 같습니다.

클라이언트는 서버에 HTML파일을 요청(request)합니다. 서버는 클라이언트에게 HTML파일을 보내줍니다(response).
브라우저는 HTML 파일을 loading 하고, HTML파일을 scripting 합니다. 이 과정에서 DOM(Document Object Model) 트리가 만들어 집니다.
그리고 CSS파일을 파싱하면서 CSSOM(CSS Object Model) 트리가 만들어집니다.
DOM과 CSSOM을 합쳐 Render Tree가 만들어지고, 이 Render Tree를 기반으로 layout, 즉 각각의 요소가 어디에 배치되어야 하는지를 계산합니다.
이후 실제로 그려지는 파트인 painting이 일어나고, composition으로 마무리 됩니다.

composition이라는 파트는... 솔직히 잘 모르겠습니다! 답변을 적고 난 후 좀 찾아봤지만 MDN에서도 딱히 언급이 없고...
MDN critical render path
또한 각 파트별로 더 디테일한 설명이 들어가면 좋으련지... 궁금하네요.
답변을 적고 나니 질문의 의도에 맞는 답변인지에 대해서도 의문이 생겼는데.. 관점에 따라 달라질 수 있는 답변이라고 하셨으므로, 다양한 관점에서 알고 있는게 중요하겠네요.

HTTP는 hyper text transfer protocol의 약자로, 두 기기간의 데이터 통신을 위한 통신 규약입니다. HTTPS는 HTTP에 Secure가 추가 되었습니다. HTTP는 데이터를 주고받을 때 정말 텍스트 그대로 보냅니다. 그렇기 때문에 보안에 매우 취약합니다. 그렇지만 HTTPS는 공개키, 개인키 암호화 방식을 사용하기 때문에 중간에 탈취를 당해도, 이를 열어볼 수 없습니다.

공개키와 개인 키 암호화 방식에 대해서 좀 더 설명할 수 있으면 좋을 거 같다는 생각이 드네요.

비공개 문제

🔥✅ stack과 queue의 차이를 설명하고, 각자의 use case를 설명해보세요.

🔥✅ hash에 대해서 설명하고, 각자의 use case를 설명해보세요.

🔥 DB transaction이란 무엇인가요?

🔥✅ TCP와 HTTP에 대해서 설명하고, 두 가지를 아는 대로 비교해보세요.

🔥✅ 브라우저와 서버 간 통신에서의 Same-origin policy와 CORS에 대해 비교하면서 설명해보세요.

🔥 Three Tier architecture

🔥✅ 비동기 처리 방식과 동기 처리 방식에 대해서 설명해보세요.

🔥 어떤 REAT API 기반 서비스가 있다. 만약 이 서비스의 트래픽이 많아졌을 때 적용해볼 수 있는 전략들을 설명해보세요.

✅한 질문들에서 제가 했을 법한 답변입니다.

stack은 LIFO, 가장 나중에 들어간 요소가 가장 먼저 나오는 특징이 있습니다. queue가 FIFO로 가장 먼저 들어간 요소가 가장 먼저 나오는 특징이 있습니다.
use case는 ...

hash는 요소의 접근이 O(1)로 상수의 시간을 가진다... 어...

... 아 ... TCP.. HTTP 완벽 가이드에서 곧 나오는 주제니까 보자..

Same-origin policy 정책으로 인해 API를 날리는 주소와 받는 주소가 같아야 합니다. 그렇기 때문에 별도의 설정을 해 주지 않는다면, 즉 API를 요청하는 주소와 받는 주소가 다르기 때문에 CORS에러가 나게 됩니다.

동기 처리 방식은 main thread 흐름 안에서 순서에 맞게 진행되는 것을 의미합니다. 비동기 처리 방식은 main thread에서 뻗어나온 sub thread에서 따로 자기 할일을 수행합니다.

정말 얕은 지식을 맘껏(?) 뽐내고 있습니다... usecase같은 경우는 센스를 좀 보는 지점이라고 하셨는데 아쉽게도 전 현장에서 딱! 떠오르는게 없었습니다. 코치님께서 짚어주신 부분으로는

stack은 브라우저의 뒤로가기
queue는 알림 메시지
추가적으로 알면 좋은거는 (특히 대기업) 시간 복잡도와 공간 복잡도 설명할 수 있으면 더 좋다.

JS에서 Object도 hash map의 일종이다. 탐색 시간 복잡도가 빠른 것이 특징.
주로 특정 데이터를 임시 공간에 저장하고, 나중에 데이터의 키로 해당 데이터를 빠르게 찾으려고 할 때 많이 사용된다. 대표적으로 캐싱이 있고, NoSQL이 대표적인 예이다.
hash에서 발생할 수 있는 collision 상황을 어떻게 해결 하는지도 알면 좋다.

TCP와 HTTP는 레이어가 다르다. HTTP는 application layer, TCP는 transport layer.
OSI 7계층, 그리고 이를 4단계로 줄인 TCP/IP 모델을 알고 있는가?
TCP는 신뢰성이 있는 연결을 하기 위해 데이터가 유실되지 않음을 보장한다. 반드시 순서대로!
TCP는 커넥션을 맺는 행위 자체가 리소스를 잡아먹기 때문에 맺을 수 있는 커넥션 개수에 제한이 있고 그렇기에 커넥션 관리를 잘 해줘야 한다.(서버 부담)
반면 UDP는 유실 여부와 상관없이 일단 뿌린다. 주로 영상 스트리밍에서 사용한다.

비동기 방식은 event loop를 동반하는 경우가 대부분이다. 이는 싱글 스레드의 단점을 보완하고자 함이다. event loop를 사용해야만 하는 이유를 공부해 보자. JS의 Node.js, Java의 Netty가 있다.
JS는 언어 자체가 실행되는데는 JS 엔진만 있으면 되는데(V8) 이 친구는 비동기에 대해서 모른다.
브라우저의 API, 또는 Node.js runtime의 외부 API + event loop까지 있어서 비동기가 가능하다.

...
글이 길어져서 front-end 파트는 다음 포스팅에서 정리 해야겠습니다.

면접... 잘 할 수 있을까?

질문을 듣는 순간 조금이라도 모르는 질문이 나온다면 바로 뇌가 굳어 버리는..! 이래서 면접 스터디를 하는건가...?
질문들을 듣고 그 질문들을 글로 적어보려는 것도 잘 나오지 않는데 말하는건 오죽할까라는 생각이 듭니다.
프론트 때 면접관으로 도움주신 코치님께서 테트니컬 면접을 두려워하지 말고 많이 깨져보고, 두드려 보고, 시도 해 보라고 하셨습니다. 진짜... 반드시 실천 해야겠어요...! 면접에서 화려하게 겨뤄볼 수 있는 날이 올 수 있도록 모두 화이팅!