자기소개
만나뵙게 되어서 반갑습니다.
저는 네오사피엔스 프론트엔드 개발 직무에 지원한 권기홍입니다.
저는 프론트엔드 개발자가 되기 위해서
자바스크립트와 리액트를 중심으로 꾸준히 학습해왔습니다.
또한 두 번의 팀 프로젝트를 통해서
서비스를 기획, 개발, 배포, 그리고 유지보수했던 경험을 가지고 있습니다.
이 과정에서 프론트 및 백엔드 동료들과
효과적으로 협업하는 방식에 대해 배울 수 있었습니다.
또한, 서비스를 배포한 후 유저의 피드백을 받아
성능을 안정화하는 등 서비스의 완성도를 높여나간 경험이 있습니다.
제가 학습해 온 지식과 길러온 협업 역량을 바탕으로
네오사피엔스의 서비스에 기여하고, 또 함께 성장하고 싶어서
지원하게 되었습니다.
(고개 인사)
서비스
인공지능 나레이션 서비스, “타입캐스트”
어떻게 알게 되었지?
학교를 다닐 때, 온라인 발표에서 한 팀원이 타입캐스트를 통해서
발표를 하는 것을 듣고 처음 알게 되었다.
처음에는 당연히 사람이 말을 한다고 생각했는데,
AI인 것을 알고 깜짝 놀랐던 기억이 있다.
캐릭터들마다 다양하고 생생한 목소리가 너무 인상적이었고 놀라웠다.
사이트의 UI도 무척이나 깔끔하고
처음 사용하는데도 무리가 없을 정도로 직관적이었다.
전화 면접 복기
- 자기소개
- 지원 동기 (네오사피엔스를 어떻게 알게 되었는지?)
- 입사 후 회사에 기대하는 것이 있는지?
⇒ 유저와 최전선에서 만날 수 있는 UI를 맡고 싶다.
그러나 후방도 괜찮아. (내부 플랫폼, 백오피스)
- Vue.js를 배워본 적이 있는지? 학습할 수 있겠는지?
- 맡았던 프로젝트 중 하나 소개하기
⇒ 아트집
비제어 컴포넌트 방식, ref의 사용은 리액트의 일반적인 방식이 아니다. (공감)
- 리팩토링의 정의는 무엇인지?
- 리팩토링 후 기능에 문제가 없음을 어떻게 확인하는지?
⇒ 수동적으로 기능 체크. 안 좋은 방식.
Jest나 React-Testing-Library를 통해 테스트를 자동화.
테스트 코드를 작성한 핵심 기능은 문제가 없기 때문에 안심하고 리팩토링 가능.
- 테스트 코드를 작성해 본 적이 있는지?
Form 컴포넌트. 솔직히 깊게 들어가지는 못하였다.
입력값이 적절하게 반영되는지,
유효성 검사에 따라 오류 메시지를 적절하게 표시하는지,
폼이 제출되었을 때 데이터가 제대로 들어있는지 확인하였다.
- 성능이 최적화되었음을 어떻게 확인하는지?
1) LightHouse를 통해서 확인
쉽고 간단하기 때문.
LCP, CLS, TTI, Speed Index, SEO 등의 지표를 주로 보는 편이다.
2) Performance
UI를 조작하면서 성능을 프로파일링한다.
주로 Total Blocking Time과 Frame Time을 확인하는 편.
병목 현상을 일으키는 함수, 코드가 있다면 그것을 확인하기도.
(메인 스레드를 오래 잡아먹는)
3) React devTools
컴포넌트의 리렌더링 범위를 주로 확인한다.
- SEO가 판단되었음을 어떻게 확인하는지? SEO의 어떤 측면을 개선했는지?
Lighthouse를 통해서 판단.
초록집사는 CRA이기 때문에 Lighthouse를 통해 측정했을 때 SEO가 아주 나빴다.
반면에 아트집은 Next.js를 사용해서 SSR을 사용하므로 SEO 점수가 아주 높았다.
또한, _document.tsx를 직접 작성하여 크롤러가 수집할 메타 태그를 작성.
점수가 10점 높아졌고, 총점은 100점을 받았다.
- 기술 질문: 자바스크립트, 브라우저, CS
- setTimeout의 1초를 두면, 정말로 1초 뒤에 실행될까?
⇒ 1초라는 것은 콜백 함수가 태스크큐에 들어가는 시간. 따라서 1초 이상이다.
- 타이머 함수의 콜백 함수, 프로미스의 후속 처리 메서드의 콜백 함수,
RequsetAnimationFrame의 개념과 우선순위는?
⇒ Requset Animation Frame Queue도 존재한다.
- 리스트가 10000개일 때, 이벤트를 거는 방법
⇒ 이벤트 위임 기법을 사용할 것이다.
- 브라우저의 렌더링 과정에 대한 설명 (Critical Rendering Path)
- 화살표 함수와 일반 함수의 차이는?
- 리플로우와 리페인트의 사례
⇒ position absolute top left right bottom가 아닌 transform tarnslate를 사용할 것.
⇒ getBoundingClientRect는 리플로우를 일으키므로 주의.
- Restful API란 무엇인가요?
특히 무엇이 장점이라고 생각하는지?
- CORS가 무엇이고 에러를 경험해 본 적 있는지?
(브라우저에서 Preflight를 통해 헤더를 가져온 뒤,
잘못된 출처라면 처음부터 요청을 하지 않는 것이 더 좋다)
GET, HEAD와 같은 메소드는 리소스를 변경하지 않으므로 안전하다.
쿠키의 same-site 속성
- for 문과 forEach의 차이
⇒ for 문은 중간에 break나 continue를 사용해서 멈출 수 있다.
for 문은 블록 레벨 스코프, forEach의 콜백은 함수다.
- 어떤 회사에 입사하고 싶은지?
첫째, 개발 문화를 중요시. 팀 동료, 시니어 개발자.
앞으로 더 성장하기 위해서.
둘째, 코드를 어떻게(HOW) 작성하는가도 중요하지만,
어떤 결과물(WHAT)을 구현하느냐도 대단히 중요하게 생각한다.
그 결과물은 나의 성향에 맞아야 하고,
그 서비스가 다른 사람에게 실질적으로 도움을 줄 수 있는 서비스이길 원한다.
나의 가치관에 부합해야만 한다.
나의 질문
- 라이브 코테는 크게 어렵지는 않다. 알고리즘 문제는 아니다.
유형이 좀 다르다.
- 대면 면접에서는 PPT 발표와 질문이 있을 예정(기술 질문)