나의 첫 면접후기 - 부제 : 브라우저에 url 를 입력했을 때 벌어지는 일

오늘 제가 지원했 던 회사의 면접의 일부 내용을 담고 있습니다.

드디어 코드 스쿼드 6개월을 마치고, 처음 면접을 무사히 끝내면서 나의 취업 준비가 막을 올랐다.

... 라고 하기엔 너무 떨었던 면접이였다.

면접관님께서는 굉장히 친절하고 좋은 분위기로 면접을 진행시켜 주시려고 노력하셨다. 그런 좋은 조건에도 불구하고 나의 심장은 미친 듯이 뛰고 있었고 , 심호흡을 심하게 하고 나서야 시작 할 수 있었다.

처음은 먼저 과제에 대한 질문 시간이 였다.

Q: 컴포넌트를 어떤 식으로 나누었는지 설명을 해주세요.

​ 과제를 구현 한지 6일이 지나서 생생한 기분으로 답변하진 못했지만, 라우터를 보면서 내가 왜 page 를 이렇게 나눴는지에 대해서 집중적으로 이야기가 진행이 되었던 것 같다. 과제에서는 두가지(혹은 세가지) 정도를 지적 받았는데 첫 번째는 네이밍 관련이다. state 라는 광범위한 네이밍을 생각없이 썼는데 가독성이 현저히 떨어지는다는 피드백을 받았다. 두번째로는 라우터 구조인데 , 디테일 페이지를 굳이 두개의 컴포넌트로 나누었어야했나 라는 피드백이다. 하나의 data로 연관되어있는 페이지라면 하나의 컴포넌트로 render 가 되는 것이 더 적절하다고 생각하신다고 피드백 주셨다. (이에 관해서는 내가 왜 이렇게 구조화했는지 이전에 이렇게 한 케이스는 어떤 것인지 따로 설명 드렸더니 제가 이전에 구현한 케이스와 미션에서 생각했던 케이스는 다른 상황이다 라고 설명해 주셨다.)

Q: 미션을 구현하면서 인사이트가 있었던 곳은 어딘가요? (자랑할만 한 곳)

​ 이 질문에 있어서는 바로 떠오르진 않았다. 많이 고민했던 부분으로 인피니티 스크롤 이라고 대답했지만 (본의 아니게 3일이면 라이브러리를 만들수있다고 허세를 부려버렸다..) 면접이 끝나고서야 생각난건데 로딩시간에 ul를 고민한 스켈레톤 UI 를 추가하기도 했고 useAxois의 커스텀훅을 만든걸 좀더 강조했으면 어떨까 싶다.

다음은 기술에 대한 몇가지 질문이 있었다.

Q: 브라우저에 url 를 입력했을 때 벌어지는 일을 설명 해 보세요.

처음 질문은 무난하게 하시려고 이 질문을 던지신 것 같다. 많이 연습하고 공부한 것 일터인데...

A : 브라우저에 url 을 입력하면 브라우저는 url 을 프로토콜 , 포트 , url 로 파싱합니다. 그리고 url 과 매칭되는 ip 주소를 찾기위해 DNS 서버로 보냅니다, 먼저, local DNS 서버에 보내서 찾는 url 이 없으면 .kr 이나 .com 을 담당하는 DNS 로 거기도 없으면 최상위 root DNS 서버로 요청을 보내서 ip를 응답받습니다. 이 ip주소는 라우터를 통해 찾아갈수 있습니다. 컴퓨터의 MAC 주소를 알아낸뒤 (여기서 부터 버벅임) TCP 를 통해 3 Way-Handshak 로 연결됩니다.

Q : TCP? 가 무엇인가요?

A: 어... 음 ... 그게... 클라이언트와 서버를 연결해주는 ... 어물쩍... ;ㅁ;

결국엔 면접관님께서 대답해주셨다.

그래서 TCP 가 뭘까

• TCP 는 물리적인 것이 아니라 Protocol(규약) 이다! , TCP(Transmission Control Protocol)

  왜 필요할까?

• 원래는 1way로 1:1 데이터 주고받았다. (회선 교환 방식)
• 그러나, 회선 교환 방식이 패킷 교환 방식 으로 바뀌면서 어떻게든 네트워크 연결이 되는 환경이 구축되었지만 중간에 데이터가 유실되거나 너무 늦게 전달되는 문제점이 있었다.
• 그것을 해결하기 위해 3 Way-Handshak 로 연결을 설정하고 통신한다. (준비됬니, 준비 됬다, 응답~)
• 신뢰성을 보장할 수 있는 통신 규약!

더 나아가서... UDP 와 TCP

UDP..? 어디서 많이 들어본건데?

맞다 스타크래프트라는 게임을 해 본 사람이라면 한번쯤 UDP 라는 약어를 들어봤을 것이다. UDP 도 TCP 와 같은 Protocol 이다. User Datagram Protocol

UDP 는 TCP 와 다르게 정보를 주고 받을 때 정보를 보내거나 받는다는 신호절차를 거치지 않는다.

그래서 TCP 보다 신뢰성은 낮지만 TCP보다 속도가 빠른 것이다. 그렇기 때문에 TCP 보다는 온라인 1:N 매치에 더 효과적인 연결이라고 볼 수 있다.

그 뒤에는?

그 뒤에는 서버의 응답으로 받은 HTTP 문서를 브라우저에서 읽어내서

1. dom tree 와 cssom tree 를 알맞게 그리고
2. 두가지 를이용해서 렌더트리를 생성하고
3. 렌더 트리의 각 노드가 각 뷰포트 내에 어떤 크기로 배치 되어야하는지 계산한 다음 (→ 리플로우)
4. 렌더 트리의 각 노드를 실제로 화면에 그린다.(→ 리페인트)

Q. 리액트의 virtual dom 이 그려지는 과정에 대해서 설명해 보세요.

A : 이 질문은 제대로 답변하지 못한 질문이다. virtual dom 과 현재 dom 을 비교하면서 virtual dom 이 바뀌면 현재 돔과 차이가 나서 rerendering 이 발생한다는 정도로만 설명했다.

이 답변에 대해서 더 보충하자면,

DOM 노드에 해당하는 객체에 접근하여 DOM 노드를 직접 조작하는 것은 가벼운 연산이 아니다.

const style = document.body.style;
style.padding = '20px';  // reflow, repaint
style.border = '10px solid red';  // reflow, repaint
style.color = 'blue';  // repaint
style.backgroundColor = '#ffa';  // repaint
style.fontSize = '1em';  // reflow, repaint

document.body.appendChild(document.createTextNode('hello world'));  // reflow 

// reflow 4번 , repaint 5번

​ 특정 부분이 리렌더링 되어야 할 때 그 부분에 해당하는 Virtual DOM 트리를 메모리에 새로 생성한다. 그리고 이전에 존재하던 Virtual DOM 트리와 O(n)의 휴리스틱 알고리즘으로 비교하여 차이점을 파악한다. 그리고 그 차이점들을 하나로 모아서 실제 DOM에게 전달해준다. 이로 인해 실제 DOM의 리렌더링 연산(리플로우, 리페인트)은 단 한 번만 일어나게 되어, 큰 성능의 이득을 얻게 된다

소감

면접 질문들 중에서 확실하게 끝맺은 질문이 많지 않다. 면접관님이 편하게 해준 면접이여서 다행이지 압박면접이나 1대 다 면접이였으면 "이것도 몰라?" 라는 눈빛을 피할 수 없었을 것 같다. 그치만 면접 질문들을 공부하면서 한 번씩 답변을 달아보고 생각하다보니, 한 번도 안들어본 개념이 나올 것 같진 않다. (대답을 잘 못하는 경우는 많을 것 같지만 ) 나의 첫 면접이 얼렁 뚱땅 이렇게 넘어갔지만 마지막 질문 시간때, 회사에 대해 어떤 질문도 전부 대답해 주시는 면접관님의 진정성 있는 태도에 너무 감명받았다. 사실 면접이 아니라 배우고 왔다고 해도 과언이 아닐정도... 어떤 결과가 나와도 좀 더 열심히 배웠던 것을 가다듬는 시간이 필요하겠다고 느꼈다.

참조

https://it-eldorado.tistory.com/87