2021-08-12(목) 면접

• 1:1 면접 1시간씩 2회 진행

첫 번째 시간

• 성장하는 개발자인지, 협업태도는 어떤지, 기술력은 있는지 다양한 질문을 받음

• 요즘 읽었던 기술 문서에 대해서 이야기

  • 요즘 어떤 기술 문서를 읽으셨나요?
  • 설명해주실 수 있나요?
  • React v16에 대해서 읽었다고 대답
  • 거기에서 어떤 것이 기억에 남나요?
  • Error Boundary 대답
  • 에러 바운더리를 쓰면 어떤 것이 좋나요?
  • 컴포넌트를 감싸서 오류를 처리할 수 있고, 오류가 있는 컴포넌트라면 안보여주는게 대체로 낫다라고 대답
  • 기존에는 에러를 어떻게 처리했나요?
  • setState등을 사용해서 컴포넌트내에 에러 상태를 정의하고 렌더링했을 것이라고 대답

• 이어서 그럼 요즘 읽었던 위클리는 있는지 질문

  • 위클리는 따로없고 궁금한것이 생기거나 공부하고 싶은 것이 생기면 그때그때 찾아본다고 대답

• semantic 태그에 대해서 설명해주세요

  • SEO, Accessibility에 좋다고 대답

• Live Coding

  • 화면을 공유하고 vscode에 semantic 태그를 작성해 봄

  • breadcrumb를 semantic하게 작성해주세요

  • 1차 작성

  <nav>
    <div>root</div>
    <div>고양이</div>
    <div>삼색고양이</div>
  </nav>
  

  • breacrumb에는 depth가 있는데 semantic하게 작성해야 함 어떻게 해야할까요?
  • 잘못 대답함 : div.item에 data-depth를 두고 css를 사용해서 표현한다고 대답 ㅠㅠ
  • 다시 생각하고 유지보수에는 어렵겠으나, item안에 item을 넣겠다고 대답

• 다른 동료와 의견 대립이 생기면 어떻게 할 것인지?

  • 말로만 의견을 주고받으면 장점 단점을 한 눈에 파악할 수 없을 수 있다

  • 따라서 글로 장단점을 나열해보고 의견을 주고받겠다고 대답

  • 그래도 해당 동료가 감정적으로 더 대응한다면?

  • 그렇게 해도 좋은 의견을 주고받는게 어렵다면 일단 수용해주겠다고 대답

  • 흠.. 이것에 대한 좋은 의견을 잘 모르겠음

  • 마지막 질문시간때 혹시 선배님은 이런 경험을 자주겪냐고 물어보게 됨

  • 아 그렇지는 않고, 건강한 의견 나눔은 바람직하며

  • 이러한 경우가 있을 때 어떻게 대처하는지 알아보고 싶었다고 답해주심

두 번째 시간

• 굉장한 기술질문들을 쏟아 내주심, 많이 대답을 잘 못했다..

• HTML은 무엇의 약자인지 말해보세요

  • Hyper Text Markup Language라고 대답

  • 그렇다면 Markup은 무엇인가요?

  • 생각이 안남.. 모르겠다고 대답

• Brower Event에서 Capturing, Bubbling의 차이점을 아시나요?

  • Bubbling은 이벤트가 하위노드에 상위노드로 전달되는 것

  • Capturing은 이벤트가 상위노드에서 하위노드로 전달되는 것이라고 대답

  • Capturing, Bubbling의 순서에 대해서 말해주세요

  • bubbling이 일어나고 capturing이 일어난다고 대답

  • 정답은 반대의 순서였음.. 정정해주심

• Brower에서 HTML이 로드되었을 때 어떤 동작이 일어나나요?

• 이 과정을 brower rendering pipeline라고 부른다고 하심

  • 최근에 읽었던 기술문서를 통해서 답변했는데 어버버했음 ㅠ

  • DOM 트리 구축

  • CSS 트리 구축

  • Layout 트리 구축

  • GPU에 넘겨서 렌더링한다고 대답

  • 고개를 갸우뚱 하심 ㅋㅋㅋㅋ..

  • reflow()를 아시나요?

  • 모른다고 대답

  • repaint()를 아시나요?

  • 모른다고 대답

• 자바스크립트에서 this는 실행시간에 동적바인딩 됩니다. 이것은 어떤 기준에 따라 실행시간에 바인딩되나요?

  • 일반적인 binding => window, process
  • 객체에 바인딩, 객체의 프로퍼티인 경우
  • bind, apply, call등을 이용해서 바인딩한다고 대답

• React에서 중요한 Rendering이 있습니다. 그러면 Rendering 중에서는 Virtual DOM이 중요하다고 생각하는데요. 이것에 대해서 설명해주실수 있나요?

  • DOM의 JS 객체버전으로써

  • DOM의 직접접근을 최소화하고, Virtual DOM의 사본을 만들어서, Virutal DOM을 조작한 뒤 변경된 부분만 최소한으로 DOM을 접근해서 렌더링한다라고 대답

  • 어떻게 변경된 부분을 찾아내나요?

  • 해당 노드의 속성갯수가 다르거나, 속성값이 다르거나, 자식요소가 달라지면 변경됬다고 판단한다고 대답

  • 그럼 Virtual DOM에서 노드가 엄청나게 되면 어떻게 되나요

  • 잘 모르겠다고 대답

  • 엄청난 기술질문을 쏟아내시길래 아실거라고 생각하고 마지막 질문시간에 여쭤봄

  • 면접관님도 궁금해서 질문하셨다고 한다(?)

  • 아.. ㅋㅋㅋㅋ 그냥 논리적인 인과과정을 통해 사고하는지 판단하고 싶으셨을 수도, 아니면 진짜 이것까지 파봤나 체크해본 것 같다

• 자바스크립트에서 비동기 프로그래밍은 어떻게 하는지 질문

  • Promise를 사용해서 한다고 대답

  • Promise에는 어떤 상태가 있는지 질문

  • 3가지 상태, pending, fullfilled, rejected가 있다고 대답

  • Promise의 상태를 변경할 수 있는지?

  • Promise의 상태는 읽기전용으로 변경할 수 없다고 대답

  • Promise에서 Chaining에 대해서 질문하셨는데 정확히 기억은 안남

  • 체이닝 반환 값은 이전 프로미스가 재활용 되는 것이 아닌 새로운 프로미스라고 대답

• React, Vue, Angular에 대해 써본적이 있는지

  • React만 써봤고, Angular에 대해서 알고있는만큼 대답
  • rx에 대해서 물어보심
  • switchMap Operator는 무엇인가?
  • 여기서 망한거같음
  • RxJava를 썼는데 Operator를 zip밖에 안써봤다고 대답 ㅋㅋㅋㄴ

• Firebase를 사용했다고 하니 Firebase 질문도 하심

• Firebase에서 중요한건 실시간성이다 이것을 Promise로 하냐 아니면 다른것을 통해서 하냐라고 질문하심

• Firebase 자체의 API가 있다고 대답

• 이것 저것 정말 많이 물어보셨던거 같은데 한 번 대답이 시원하게 안나오니 그다음 질문부터 계속 버벅거렸던거 같다.

• 너무 아쉬움 조금만 더 공부했으면 다 대답했을텐데..

• 이 외에도 소개해주고 싶은 코드가 있냐고 보여달라고 하심

• 사실 보여드릴게 없었다..!! 젠장..!!!

• 사이드 프로젝트 빨리좀 마무리하자!!! 제발!!!

• 결과는?.... 두구두구두구