프론트엔드 개발자 면접 정리

1달동안의 구직을 마치고, 프론트엔드 개발자로 취업을 했다.
그동안 내가 수많은 블로그 글을 보며 도움을 얻은 것 처럼, 내 글 또한 취업을 준비하는 누군가에게 도움이 되길 바라는 마음으로 글을 작성해본다.

참고로, 나의 경우 D3.js를 사용해서 진행한 프로젝트가 있었기에 D3.js 관련 질문이 좀 있으며, 리액트를 사용하는 회사에만 지원했다.

기술 면접을 진행할 때, 질문을 받았지만 대답을 하지 못한 경우가 종종 있었다. 이럴 때는 "모르겠다"고 솔직하게 말했다. 그리고 면접이 끝나거나, 혹은 바로 "죄송하지만 정답을 알 수 있을까요?"라고 정중하게 물어봤다. 대부분의 면접관님들은 친절하게 설명해주셨다. 그리고 면접이 끝난 뒤, 나의 부족한 점 혹은 좋게 봐주신 점에 대해서 물어보고 피드백을 받아서 다음 면접을 볼때는 그 부분을 보강했다. 이러한 부분이 면접을 진행하는 동안 큰 도움이 되었던 것 같다.

면접 질문

기술

• CSR와 SSR의 차이점은?
• 평소에 가장 자신있는 언어와 그 이유는? 장단점에 대해서도 말해주세요.
• 효율적인 코드를 작성하는 법에 관심이 많다고 하셨는데, 코드를 작성하실 때 신경쓰는 부분이 어떤 것들이 있나요?
• 서버와 데이터 통신을 해본 경험이 있나요?
• D3.js와 리액트는 각각의 생명주기가 있고 그것을 맞춰주는 것이 어려운데, 이러한 부분은 어떻게 해셜하셨나요?
• Svelt를 사용해본 경험이 있나요?
• 라이브러리를 선택할 때, 특정 라이브러리를 선택하게 된 이유가 있나요?
• 캔버스 관련 작업을 해보신 적이 있나요?
• Closure를 currying과 함께 사용한 예시 코드를 작성해주세요.
• 원시값과 참조값(array, object)의 차이점을 메모리 관점에서 설명해주세요.
• Static 웹사이트를 만들 때, 주로 gatsby를 사용하셨는데, 이유가 있나요?
• 서버에서 1초 단위로 바뀌는 많은 양의 동적 데이터를 받아올 때, 실시간으로 바뀌는 데이터를 프론트단에서 어떻게 시각적으로 업데이트 할까요?

Html

• 버튼을 <a>태그로 감싼 경우(버튼을 눌렀을 때 특정 링크로 이동) 웹접근성이 저하가 되는데, 그 이유에 대해서 설명해주세요.
• 버튼의 타입 속성에 대해서 알고 계신가요?

CSS

• margin과 padding의 차이점은 무엇인가요?
• 어떤 요소에 width 100px, 양측에 padding 20px을 줬습니다. 이 경우 의도했던 100px이 아니라 140px이 나왔습니다. 이경우 의도했던 100px로 만들려면, css의 어떤 속성을 사용할 수 있나요?

Javascript

• Function 키워드로 사용하는 일반 함수와 화살표 함수의 차이점은 무엇인가요?
• 화살표 함수를 사용했을 때는 new 생성자를 사용해서 새로운 객체고 상속등을 할 수 없습니다. 그 이유에 대해서 설명해주세요.
• Event Bubbling에 대해서 설명해주세요.
• 아래의 코드는 어떠한 차이가 있나요?

const add = function() { ... }
const add = () => { ... }

• strict mode 를 사용했을 때의 구체적인 특징은?

React

• useCallback/useMemo에 대해서 설명해주세요.
• 리액트에서 setState는 비동기 동작인가요, 동기동작인가요?
• setState가 비동기 동작을 취했을 때 얻을 수 있는 이점은 무엇인가요?
• 리액트의 useCallback, useEffect등을 사용할 때 의존성 배열을 받게 됩니다. 이 배열의 역할은 무엇인가요?
• 의존성 배열은 shallow equal, deep equal중 무엇을 하게 되나요?
• props로 전달받은 함수는, props나 상태가 업데이트될 때마다 새로 생성이 됩니다. 이 때 최적화할 수 있는 방법은 어떤게 있나요?
• 아래 코드의 경우, useCallback을 사용을 하더라도 isClicked 의존성을 가지고 있습니다. 이 경우, 아예 의존성이 없게 만드는 방법이 있나요?

const handleToggle = useCallback(() => setIsClicked(!isClicked), [isClicked]);

• 다이나믹한 데이터를 받아올 때, useEffect에서 의존성배열을 어떻게 하실건가요?
• Next.js에서 getStaticProps, getServerSideProps의 차이점은?
• useLayoutEffect는 무엇인가요?
• 리액트를 사용할 때, 최적화에 신경쓰는 부분은 어떤 것이 있는지 구체적인 예시가 있나요?
• 아래와 같이 자식 컴포넌트를 React.memo로 감쌌을 때 props를 통해서 전달되어지는 함수에 useCallback을 사용한 경우와 사용하지 않은 경우에 차이가 있나요?

function Parent(){
	const handleClick = useCallback(() => { ... }, []); // (1)
	const handleClick = () =>{ ... } // (2)

	return <Child onClick={handleClick} />
}

function Child({ onClick }) {
	return <div onClick={onClick} />
}
export default React.memo(Child); 

• React.memo의 특징에 대해서 설명해주세요.
• 얕은 비교(Shallow Equal)와 깊은 비교에 대해서 설명해주세요.
• React의 hook에 대해서 설명해주세요.
• 주로 어떤 경우에 custom hook을 사용했고, 그로 인해서 얻은 장점이 무엇인가요?
• Styled-components의 퍼포먼스에 대한 이슈에 대해서 경험해보신 적이 있나요?
• 리액트의 성능개선 방법에 대해서 설명해주세요.
• 상태 관리에 대해서 설명해주세요.

Typescript

• enum과 object의 차이점은?
• type과 interface의 차이점은?
• 타입스크립트를 사용하는 이유와 장점을 느꼈던 구체적인 사례가 있나요?

기타/인성

• 재택근무에 대한 관점은?
• 회사를 어떻게 알게 되었고, 이 회사에서 어떠한 성장을 할 수 있는지 궁금해요.
• Domain knowledge의 특성때문에 엔지니어링 관점에서 어려웠던 점 혹은 재미있었던 에피소드가 있었나요?
• 어떻게 개발을 시작하게 되셨나요?
• 공부한 기간을 얼마이고, 어떻게 공부하셨나요?
• 자신이 만든 작품을 되돌아봤을 때 아쉬운 부분은 무엇인가요?
• 요새 중요하다고 생각되어지는 기술은(언어 및 프레임워크등)?
• 테스트 코드를 작성해보셨나요?
• 함수형 프로그래밍의 장점은 무엇인가요? (테스트 코드와 연관)
• "나는 회사에 들어오면 ~를 기여할 수 있다" 한가지만 말씀해주세요.
• 앞으로 개발자로써 커리어에 대한 계획이 어떻게 되나요?
• 스타트업에 대해서 어떤 관점을 갖고 계신가요?
• 최근 진행했던 프로젝트중 어려웠던 부분은, 그리고 어떻게 해결했나요?
• 주변에서 잘만들었다고 칭찬해준 프로젝트가 있다면 어떤 프로젝트인지, 그리고 그 이유는 무엇인가요?
• 본인의 장점과 단점은?
• 본인의 단점이 있다면, 그리고 그 단점을 극복하기 위한 현재의 노력은?
• 프로덕트를 개발했는데, 고객이 마음에 안들어할 경우 어떻게 대처하셨나요?
• 작년에 가장 인상깊게 읽었던 책과 그 이유는?
• 협업을 할 때 어떤 갈등을 겪었고, 어떻게 해결하셨나요?
• 프론트엔드 도메인에 대한 지식이 없는 타직군 동료와 협업을 할 때, 어떻게 커뮤니케이션을 하시나요?

---

코딩 테스트

1. 알고리즘 문제
2. 사전 과제

를 통해서 진행하거나, 특정한 과제 없이 바로 면접을 진행한 회사들도 있었다.
알고리즘은 잘 풀지 못했기 때문에 생략하겠다. 😅
과제는, 1시간동안 해결할 수 있는 간단한 과제를 주고, 실시간 모니터링을 통해서 과제를 구현하거나, 7일~3주기간동안의 과제를 주고 코드를 제출한 뒤, 작성한 코드에 대한 리뷰를 하면서 면접이 진행되었다.

간혹 알고리즘 테스트/실시간 과제를 해결(통과)하지 못한 경우가 있었는데, 감사하게도 다른쪽으로 어필할 수 있도록 기회를 주시거나 다음 기술 면접을 진행할 수 있도록 기회를 주셨다. 그러니 테스트에서 망했다고 하더라도 낙담하지 말고, 끝까지 어떻게든 최선을 다해서 임하자!

사전 과제

장바구니 구현, api활용(데이터 받아와서 뿌린뒤, infinite scrolling등 적용), 서버에서 받아온 데이터로 table구성 및 정렬 기능, Searching기능 구현, 데이터 시각화 차트 구현, 로그인 화면 구현, Voice Record기능 구현(라이브러리 사용)등이 있었다.

난이도는 크게 어렵지 않았다. 따라서 기능은 완벽하게 구현하되 코드의 퀄리티에 신경을 쓰는 것이 중요하게 느껴졌다.

과제를 진행하면서 느꼈던, 가장 크게 신경써야할 부분은 아래와 같다.

• 우선 순위 잘 세우기
• 최적화작업
• 컴포넌트의 재활용성
• 타입스크립트 적용
• Structure 설계 (어떻게 컴포넌트를 나눌 것인가)
• 리액트 Hook 사용

우선순위의 경우, 예를들면 A회사는 시간내에 과제를 완벽하게 구현하지 못해도 그 과정에서 이 사람이 어떻게 해결해나가는지, 혹은 코드를 작성하는 스타일등을 중요하게 본다. 반면 B회사는 코드가 완벽하지 않더라도 제 시간안에 기능을 구현하는게 더 중요하다. 이 처럼 회사마다 추구하는 우선순위가 다르기 때문에 잘 파악해서 우선순위를 정해서 진행하는 것이 중요하다.

과제를 제출하고 코드 리뷰를 받을 때, 버그가 있었다면 그 버그가 무엇인지 혹은 부족한 부분이 무엇이였는지 실례가 되지 않는다면 꼭 물어봤다. 그리고 현재 내 코드에서 더 개선할 수 있는 점이 어떤게 있는지도 꼭 물어봤다. 물어본다고 귀찮아하거나 하시지 않으니 꼭 물어보자! 그리고 다음 면접때는 그 부분을 신경써서 더 나은 코드를 작성하면 도움이 정말 많이 된다.

---

회사 질문 리스트

면접을 진행하면서 내가 회사에 했던 질문은 대략 아래와 같다.

• 내가 하게 될 구체적인 일은?
• 어떤 프레임워크, 라이브러리, 언어를 주로 사용하는가?
• 회사에 들어가서 내가 성장할 수 있는 부분은?
• 코드 리뷰를 진행하는가?
• 협업은 어떤식으로 진행하는가?
• 어떤 문화를 가지고 있는가?
• 개발팀이 어떻게 구성되어있는지?
• 사수가 있는지?
• 팀 분위기가 어떤지?
• 회사는 어떤 비전을 가지고 있는지?
• 문제에 대해 답을 한 다음에는 혹시 이 외에 다른 풀이법이 있는지 물어보기
• 제가 어떤 부분을 보강해야할까요?