오늘은 모 기업에서 프론트엔드 기술 면접을 보았다. 기술면접을 잘 준비해왔기에 기술면접만큼은 자신이 있었다고 생각했다.
하지만 의외로 정말 기본 내용이면서.. 프론트엔드라면 반드시 알아야 하는 지식에 대해서 답변을 못하는 상황이 일어났다 ㅠㅠ 더 깊고 어려운 질문들은 잘 대답했는데 오히려 기본 지식이 왜 갑자기 생각이 안났을까.. 반성하며 블로그를 작성하기로 하였다…!!
받았던 모든 질문에 대해서 다 블로깅하기 보다는 면접 당시 생각이 안났던 것, 그리고 애매하게 대답했던 것 위주로 블로깅을 할 생각이다!
Virtual DOM이라면 당연히 모든 프론트엔드 개발자 그리고 React를 한 번이라도 다뤘던 개발자라면 누구나 아는 개념이다. 그래서 나도 물론 개념과 장점에 대해서는 잘 알고 있고, 잘 설명할 자신이 있다.
하지만 단점에 대해서 생각이 나질 않았다. 그동안 너무 좋은 것만 생각했었나..?
function WelcomeBlog(props) {
return <div className="welcomeBlog">Welcome {props.name}</div>;
}
위의 짧은 React 코드를 보면서 단점을 찾아보려고 한다. 만약 부모 컴포넌트 상태값의 변경에 따라 name값이 변경된다면 React는 재조정을 할 것이다. 그렇다면 name값이 변경했다고 생각해보자.
전체 코드에서 변경된 부분을 찾기 위해 DOM 노드 또는 div 태그안의 속성까지도 다 비교하는 과정을 거칠 것이다. 하지만 위의 코드에서는 name의 값만 비교해주면 되는데 불필요한 요소까지 다 비교를 해주어야 한다는 것이다. 이것이 바로 Virtual DOM의 단점이라고 할 수 있다.
즉, 모든 요소의 비교를 통해 Virtual DOM은 높은 메모리 사용량이 문제가 될 수 있다. 만약 면접에서 Virtual DOM의 단점에 대해서도 묻는다면 이렇게 위의 내용대로 답변하면 완벽할 것이다.
먼저 paint와 SSR의 개념에 대해 알아야 이 질문에 대답할 수 있다. 간단하게 paint는 렌더링 과정에서 요소의 색깔이나, 그림자 등을 결정할 때 하는 과정이라고 생각하면 된다. SSR은 서버 사이드 렌더링 방식으로 서버에서 렌더링을 통해 리소스를 다 생성하고 클라이언트에 보내주는 방식이다.
나는 이 질문에 대해 답변을 했지만 애매하다고 생각했기에 블로그에 적기로 했다.
SSR은 사용자와 인터랙션이 일어날 때마다 서버에 데이터를 요청하고, 필요한 데이터뿐만 아니라 모든 리소스를 받아와야 한다. (SSR의 단점) 그러면 데이터를 요청할 때마다 매번 새로고침 현상이 일어난다. 그래서 데이터를 요청할 때마다 리로드가 되고, 그 때마다 paint 과정을 다시 하게 되는데 이때 DOM API를 통해 색깔이나 그림자의 변경이 일어난다면 repainting 현상이 일어난다고 면접 당시에 이렇게 답변을 하였다.
사실 이게 정확한 답변일지는 아직까지도 모르겠지만 그동안 공부해 온 내용을 최대한 살려서 답변을 했었다. 좋은 답변이였길 바란다..
사실 이 질문을 받았을 때는 너무 기본적인거여서 당황했는데, 설명을 하는 나의 모습을 보고 또 당황했다. 박스를 기준으로 margin은 바깥 너비이고 padding은 안쪽 너비인데, 처음에 이렇게 말하고 다시 margin을 설명할 때 웹 끝에서 박스의 여백을 정할때라고 재차 설명하면서 실수를 범했다.
대답이 애매했다. 웹의 끝이 아니라 요소와 외부 여백이라고 말했어야 했는데.. 살짝 애매하게 말해서 아쉬움이 남는다.
긴장을 심하게 했는지.. 아는 것도 이상하게 말하는 병에 걸린 듯한 기분이 들었다.
나는 CSS reset을 브라우저에 기본 margin, padding이 있기 때문에 프론트엔드 개발자가 개발하는데에 있어서 오차를 없애기 위해 초기화한다고 답변을 하였다.
하지만 이또한 완벽한 답변이 아니였음을 면접이 끝나고 복기하면서 깨달았다. CCS reset의 가장 큰 이유는 크로스 브라우징이다.
브라우저마다 HTML 시맨틱 태그에 대한 기본값이 다르므로 그 차이를 없애는 데에 reset이 필요한 것이다.
즉 크롬, 사파리, 파이폭스 등등 각 브라우저마다 태그에 대한 다른 기본값을 한 쪽에 치우치지 않도록 공통 요소를 사용하여 제작하기 위함이다.
이 질문은 내가 완전히 잘못알고 대답한 질문이다. 나는 적응형과 반응형은 단순히 픽셀값이 고정값이냐 백분율 값이냐의 차이라고 생각했다… 정말 큰 착각이었음을 면접이 끝나고 나서야 알았다.
먼저 적응형과 반응형에 대해 알기전에 왜 알아야 하는지가 중요하다. 웹 사이트의 정보를 다양한 화면 크기에서 원활한 사용자 경험을 제공하기 위한 방법의 차이라고 할 수 있다. 프론트엔드 개발자가 다양한 화면에서 사용자에게 정보를 제공하기 위해 적응형과 반응형의 차이는 반드시 알고 넘어가야 한다고 생각한다.
적응형 웹은 모바일, PC 등 제공하고자 하는 n개의 디바이스에 대해 n개의 독립적인 템플릿을 적용한다. 즉, 기기마다 다른 템플릿을 적용한다.
독립적인 템플릿을 가지고 있기 때문에 모바일로 접속하면 모바일 리소스만 다운받고, PC로 접속하면 PC 리소스만 다운받는다. 그렇기 때문에 로딩 속도가 빠르다.
하지만 기기별로 템플릿을 작성해야 하기 때문에 개발이 복잡해질 수 있다. 그리고 서버 또는 브라우저에서 기기를 감지할 수 있다.
반응형 웹은 하나의 템플릿으로 현재 해상도에 맞는 화면으로 렌더링된다. 그렇기 때문에 처음 접속 시에 모든 콘텐츠를 다운받는다. 그래서 모든 리소스를 다운 받으므로 로딩 속도가 느리다.
하지만 하나의 템플릿으로 다양한 사용자와 기기에 대응할 수 있어 개발이 간편하다는 장점이 있다. 그리고 Media Query를 통해 기기 감지 및 개발할 수 있다.
이 부분에 대해서는 따로 블로깅을 한 적이 있음에도 긴장 한 탓에 면접에서 제대로 기억이 나질 않았다. 정말 처참했다.. 블로깅을 성심성의껏 작성해서 자신 있었던 부분이였는데.. 다음부턴 이런 실수를 하지 않아야겠다.
작동 원리는 호출 스택과 이벤트 루프를 연관지어서 비동기 함수의 실행 방법을 설명하면 충분하다고 생각한다.
호출 스택과 이벤트 루프에 대한 이해만 있다면 충분히 답변할 수 있다고 생각되는 질문이다.
참고자료: useong’s blog - Event loop
그동안 면접 준비를 많이 해왔음에도 실수를 할 수 있다고 생각이 되는 면접이였다. 아무래도 긴장을 최대한 덜 하는것이 가장 중요한 것 같다. 그래야 내가 알고 있는 지식을 잘 설명할 수 있을 것 같다. 이번을 계기로 더 공부하면서 기술 면접 준비를 잘 해봐야겠다. 퐈이팅~!!