면접 회고 및 피드백

본고는 내가 면접을 진행하면서 받았던 모든 질문과 이에 대응했던 나의 답변들을 적고, 틀린 부분들을 정정하며 내 자신에게 개선책을 마련하기 위해 작성한다.

일반 공통

1. 본인은 어떤 사람인가요?

2. 본인은 업무 간 소통이 원활하다고 생각하시나요?

3. 소통하기 힘든 사람이 있었나요?

4. 본인이 일하는 기업의 개발자 규모는 어떻게 되시나요?

HTML

1. 마크업을 하는 것에 있어서 표준 혹은 접근성에 대해 semantic한 코드를 만들려고 노력하는 부분이 있었나요? (그러한 경험이 있는지)

• HTML5부터 다양한 마크업을 지원하게 되면서 Semantic한 HTML을 작성하는 것이 가능해졌습니다.
• 이러한 마크업들은 접근성이나 SEO 측면에서 이 점이 있으며, 저는 더욱더 Semantic한 코드를 만들기 위해 Styled-Components를 사용해 각 마크업에 대해 쉽게 식별할 수 있도록 HTML을 작성합니다.

2. Img에서 alt는 어떻게 동작하고 어떠한 attribute인가요?

• Img에서 alt는 이미지를 정상적으로 가져오지 못할 경우 해당 영역을 대체할 텍스트를 나타내는 Attribute입니다.

CSS

1. Layout을 구성할 때 Box Model이 무엇인지 아시나요?

• 모든 HTML 요소는 박스(box) 모양으로 구성되며 이를 박스 모델(box model)이라고 부릅니다.
• 박스 모델은 HTML 요소를 패딩, 테두리, 마진, 그리고 내용으로 구분합니다.

2. 사이드가 고정일 때 메인 컨테이너를 가변적으로 잡기 위해 어떠한 방법을 사용할 것인가요?

• 저라면 flexible한 레이아웃 구성을 위해 display: flex가 적용된 컨테이너 내부에 flex 아이템을 추가한 뒤, 사이드는 고정 width로 주고 메인을 width: 100%로 둘 것 같습니다.

3. GPU 가속을 사용하는 CSS는 뭐가있나요?

• transform은 하드웨어 가속을 사용한다.

-webkit-transform : translate3d
-webkit-transform : translateZ
-webkit-transform : rotate3d
-webkit-transform : scale3d
-webkit-transform-style : preserved-3d

Javascript

1. 자바스크립트의 'use strict'가 정확히 무엇이며 장점과 단점을 설명해줄 수 있나요?

• 자바스크립트 코드 최상단에 위치하는 'use strict'은 해당 스크립트에 엄격 모드를 적용합니다.
• 엄격 모드를 사용하면 자바스크립트를 제한하여 사용할 수 있으며 이러한 처리로 인해 다음과 같은 장단점이 발생합니다

장점
- 안티 패턴과 같이 예외를 발생시키는 몇 가지 일반적인 코딩을 잡아냅니다.
- 실수로 전역 변수를 만드는 것이 불가능합니다.
- 함수의 매개변수 이름을 고유하게 합니다.
- this는 전역 컨텍스트에서 undefined가 됩니다.

단점
- function.caller 와 function.arguments 에 더 이상 접근할 수 없습니다.
- 서로 다른 엄격한 모드로 작성된 스크립트를 병합하면 문제가 발생할 수 있습니다.

2. 엄격 모드를 사용하면서 미리 예방하거나 사전에 방지할 수 있는 오류는 무엇이 있을까요?

• 예외를 발생시키는 케이스를 줄여 오류를 방지할 수 있고, 전역 변수를 만들지 못하도록 하여 메모리 누수를 사전에 방지할 수 있습니다.

3. TDZ가 무엇인가요?

• 실행 컨텍스트 변수 객체의 변수 객체화에 의해 발생하는 변수 선언의 메커니즘으로 인해 발생하는 Dead zone을 의미합니다.
• TDZ란?

4. 블록 스코프는 어떠한 방식으로 적용되나요?

• 말그대로 블록{}이 생성될 때 마다 새로운 스코프가 형성되는 것을 의미합니다.
• 블록 스코프 레벨에서 선언된 변수는 외부에서 사용이 불가능하며 해당 개념은 일반적인 스코프의 개념과 동일합니다.
• 블록 스코프 레벨 변수 생성 키워드로는 let/const가 있습니다.

5. 호이스팅이란 개념에서 let과 const는 호이스팅이 어떻게 동작할까요?

• var 키워드를 통해 선언된 변수 상단에서는 해당 변수에 접근이 가능하지만, let/const는 그렇지 않습니다.
• 이는 각 변수 키워드가 실행 컨텍스트의 변수 객체 상에서 어떻게 변수 선언이 이루어지는지에 따라 다른데, var 키워드는 선언과 동시에 undefined로 초기화되지만, let/const는 선언만 진행되기 때문입니다.
• 따라서 선언 단계에서 메모리에 할당되지 않는 let/const는 해당 변수 상단에서 참조가 불가능한 것입니다.

6. 함수 선언과 함수 표현의 차이점은 무엇인가요?

• 함수 선언식은 function 키워드를 통해 선언된 함수를 뜻하며, 함수 표현식은 ES6의 화살표 함수를 변수 선언 키워드와 함께 사용하여 함수 선언을 표현한 것을 말합니다.
• 위 두 가지에 대한 차이점은 다음과 같습니다.

1. 함수 선언식에는 함수 호이스팅이 적용되지만, 함수 표현식에서는 변수로 선언하기 때문에 변수 호이스팅으로 동작하게 됩니다.
2. 함수 선언식에서의 this는 글로벌 객체와 바인딩 되지만, ES6의 화살표 함수를 통해 선언된 함수 내부에서의 this는 상위 스코프의 this와 바인딩됩니다.

7. 객체를 상수로 만드는 방법은 어떤 것이 있나요?

• Object.freeze, object.defineproperty(writable, configurable) 등이 있습니다.

8. setTimeout을 통해 setInterval을 구현할 경우 어떤 문제점이 생기나요?

React

1. Angular -> React로 마이그레이션하는 이유와 해당 작업으로 인한 장점은 무엇이 있나요?

• Angular는 MVC 디자인 패턴으로 설계되어 뷰가 방대해질 수록 이를 제어하는 모델은 커질 수 밖에 없는 구조를 가지고 있습니다.
• 양방향 데이터 흐름의 단점이 바로 이것입니다. 프로젝트가 커질 수록 유지보수성이 안좋아지기 때문입니다.
• React는 페이스북 팀이 이를 개발하고자 고안할 때, MVC 디자인 패턴의 단점을 극복하고자 FLUX 디자인 패턴을 고안하였습니다.
• FLUX 디자인 패턴은 단방향 데이터 흐름을 통해 프로젝트의 코드를 FLOW 그대로 읽을 수 있으므로 가독성이 좋아지며 기능과 뷰를 컴포넌트 별로 나누어 유지보수성을 높일 수 있다는 커다란 장점이 있습니다.

2. 규모가 큰 어플리케이션에서 FLUX 패턴을 적극적으로 사용하는 이유가 무엇인가요?

• 커다란 어플리케이션의 경우 방대한 기능을 컴포넌트 규격으로 나누어 관리할 수 있음으로 유지보수성이 크게 증가한다는 장점이 있습니다.

3. Virtual DOM에 대해서 설명해주실 수 있나요?

• DOM을 추상화한 가상의 객체를 말합니다.
• DOM과 유사한 객체를 메모리에 올리고, 변경사항이 생기면 메모리에 올라간 Virtual DOM을 수정하고 DOM에 대해 비교 알고리즘을 수행하여 변경 사항에 대해서만 DOM에 반영토록합니다. 이로인해 반응성 빠른 웹을 구현할 수 있게됩니다.

4. useRef는 무엇이고 왜 사용하나요?

• useRef는 인수로 주어진 값을 초기값으로 하는 current 프로퍼티가 있는 객체를 반환하는 리액트 훅입니다.
• useRef를 통해 선언된 데이터는 전 생애주기를 통해 유지됩니다.
• 이 때, 전 생애주기란 컴포넌트가 리렌더링되어도 값이 유지된다는 뜻입니다.

5. useEffect는 의존성 배열 값을 어떻게 비교할까요?

• useEffect는 의존성 배열을 검사할 때 얕은 비교(Shallow Compare)을 진행합니다.
• 원시 타입의 경우 값을 비교하기 때문에 값이 같다면 리렌더링하지 않지만, 참조 타입인 객체, 배열, 함수의 경우 레퍼런스를 비교하기 때문에 내부 프로퍼티가 동일하다하여도 리렌더링이 발생합니다.
• useCallback을 써서 참조 대상인 함수가 리렌더링이 발생할 때 마다 새롭게 생성하지 않도록 하는 이유도 이때문입니다.

6. useEffect 클린업 함수는 최신 프롭에 대해 어떻게 처리할까요?

• useEffect의 클린업 함수는 최신 프롭을 반영하지 않습니다.
• useEffect는 의존성 배열을 통해 해당 훅의 첫 번째 인수인 콜백이 실행될 당시에 참조된 값만을 기억합니다.

7. useEffect와 useLayoutEffect의 차이는 무엇일까요?

• 이 둘은 렌더링 시점이 다릅니다.
• useEffect는 렌더가 화면에 그려진 후 비동기적으로 실행됩니다. 따라서 이벤트 핸들러 설정과 같이 렌더링 이후에 진행해야하는 작업에 적합합니다.
• useLayoutEffect는 렌더링 직후 화면이 업데이트 되기 전에 동기적으로 실행됩니다. 따라서 DOM 변경과 같이 렌더링이 이루어지기 전에 진행해야하는 작업에 적합합니다.

8. 만일 메시지를 컴포넌트를 띄우는 커스텀 훅을 만든다고 가정할 때 애니메이션으로 만들지 않고 훅으로 분리하는 이유가 있을까요?

• 미제 사건 그 자체

9. 컴포넌트 컬렉션에서 Key의 유효범위는 어디까지일까요?

• 아시는 분 !!

10. 훅을 개발함에 있어서 재사용성의 대상은 어떻게 될까요? (엘리먼트, 메소드)

• 어떤 답변을 해야할지...

11. React와 NextJS의 차이가 무엇이라고 생각하시나요?

• NextJS는 React를 기반으로 한 프레임워크로 SSR 웹 어플리케이션을 만들 수 있게 해줍니다.
• 그 이외에도 page, api 디렉토리 내에서 디렉토리 구조를 통한 자동 라우팅이 된다는 점과, 일반적인 SPA와 다르게 NextJS의 경우 코드가 스플리팅되어 로딩 속도를 개선할 수 있습니다.
• 추가적으로 getInitialProps를 통해 서버 사이드로부터 데이터를 가져와 일반적으로 useEffect 나 componentdidmount와 같이 훅 또는 라이프사이클로 처리하는 것 보다 간결하고 리렌더링이 여러번 발생하지 않는 코드 처리가 가능하다.

12. 얕은 복사를 수행한다는 것은 무엇을 의미하는 것일까요?

• 얕은 복사를 수행하면 복사를 수행한 값을 변경하게될 경우 레퍼런스에도 영향을 끼칩니다.
• 말 그대로 레퍼런스와 동일한 객체를 Deep하게 복사하는 것이 아닌 참조되는 주소값인 레퍼런스만 가져오는 것이므로 변경되는 데이터는 레퍼런스의 데이터와 동일합니다.

13. 리액트로 프로덕션을 개발함에 있어 오류가 발생하는 경우 사용자에게는 어떻게 보여지도록 처리할 것인가요?

• 클래스형 컴포넌트의 라이프 사이클 중 componentDidCatch를 사용해 오류를 캐치해내는 최상위 컴포넌트 ErrorBoundary를 만들어 Fallback 대신 사용자에게 보여줄 문구를 지정할 것 같습니다.
• 일반적인 경우에는 예외 처리가 발생하는 로직에 조건문을 통한 jsx 리턴으로 처리하겠습니다.

14. 컴포넌트 컬렉션에서 key가 없을 경우 발생할 수 있는 문제는 무엇이 있을까요?

• 컴포넌트 컬렉션을 렌더링할 때 사용하는 key는 디핑 알고리즘을 최적화하기위한 방법으로 쓰입니다.
• React Reconciliation을 통해 진행하는 리렌더링은 각 컴포넌트에 대해 빠르게 리렌더링 여부를 결정지을 수 있는 키로 쓰이게됩니다.

프로젝트 공통

gitHub Action 자동 배포에 대한 테스크는 어떻게 처리했나요?

개발 공통

1. SEO를 위해 진행한 작업이 무엇이 있나요?

2. Reflow와 Repaint 방식에 대해 자세히 알고 있나요?

3. 사용자 경험성에 의해서나 성능을 올리기 위해 앱을 최적화한적이 있나요?

프로덕션 공통

1. 제품을 잘 만든다는 것은 어떤 것인가요?