SPACE RUMI

Hi, I am rumi. Let's Splattack!

[IT] 프로덕트 개발/기타

프론트엔드 면접에 참여하면서 느낀 점, 그리고 리마인드

백루미 2023. 1. 17. 02:43
반응형

약 2주간 프론트엔드 면접에 참여하면서, 면접 지원자들에게 할 질문지 작성을 맡게 되었다.
질문들을 선정하는 작업을 거치면서, 기본개념을 리마인드하는데 도움이 많이 되었다.
나에게도 아주 좋은 경험이였다고 생각한다. 아무래도 함께 일할 동료를 찾다보니, 어떤 질문이 좋을지에 대한 고민을 상당히 많이 한 듯 하다.
추린다고 추린 질문들이 30문항 정도 되는데, 타이트하게 진행했음에도 40분을 훌쩍 넘겼다.

면접은 2년차 이하 대상이였기 때문에, 근본적인 질문과 경험을 물어보는게 좋을것같다고 판단했고,
정리차원에서 핵심 키워드 위주로 적어본다. (FE 기술질문 외, 이력서에 기재한 맞춤 질문들은 모두 생략하였음)

 

Q. 시맨틱 마크업을 왜 준수해야 하는지 설명해주세요.

웹 접근성, 웹표준, SEO, 가독성

 

Q. CSS-IN-JS 의 장단점에 대해 설명해주세요.

의존성증가, 번들 크기, 속도(애니메이션), 리랜더링 발생, 해쉬화
상수,함수 공유, 사용중인것만 DOM에 포함. 
css-in-js, css-in-css 둘중 어느것을 채택할것인지에 대한 본인의 기준이 있는지?
styled component, emotion 사용경험이 있는지?

 

Q. CSS 캐스캐이딩 우선순위에 대해 설명해주세요.

important > inline > id > class, 추상클래스 > tag > 상속

 

Q. 본인이 설계한 UI 구조에 대해 설명해주세요.

스타일 초기화 작업 여부, 에셋 관리, 공통 컴포넌트 관리, 폴더구조
상수값, 컬러값, spacing-helper, mixin,
동료들과 마크업 및 퍼블리싱 관련 작업들을 어떻게 하였는지?

 

Q. 크로스브라우징을 어떻게 대처했는지 설명해주세요. 브라우저마다 viewport가 다른 이슈를 어떻게 해결하였나요?

디버깅 방법, 웹킷, vh계산법, 플랫폼별 다르게 세팅 등

 

Q. UI 라이브러리 사용경험이 있으신가요? 있다면 장단점에 대해 설명해주세요.

속도, 디자인이 중요하지않은 플랫폼에서의 통일감, 확장성 등
tailwind, bootstrap, Ant D, material ui, vuetify 사용경험

 

Q. Email 화면을 작업해보신 경험이 있나요? xhtml의 레이아웃 제한사항에 대해 알고계신가요?

네이버, 아웃룩, 구글 등 이메일 화면. 인라인 스타일밖에 안되는 점, flex 불가, table구조 등 작업 경험이 있는지.

 

Q. 본인이 수행했던 프로젝트 중 가장 어려웠던 문제를 설명하고, 어떻게 해결하였는지 말씀해주세요.

경험을 들어볼수있는 좋은 질문이라고 생각함.

 

Q. 리액트의 메모이제이션에 대해 설명해주세요.

useCallback 함수캐싱, useMemo 값 캐싱, React.memo 컴포넌트 캐싱
메모이제이션을 선택하는 본인의 적용기준이 있으신가요?
무분별한 메모이제이션이 성능면에서 좋지않다는걸 인지하고 있는지?

 

Q. 기억에 남는 커스텀 훅이 있다면 설명해주세요.

경험을 들어볼수있는 좋은 질문이라고 생각함.

 

Q. 자주 사용하는 배열 고차함수 3가지를, 주로 어떤상황에서 사용하는지 설명해주세요.

map, filter, forEach, sort, reduce... 등
고차함수에 대한 이해가 있는지? map forEach 차이점을 인지하고있는지?

 

Q. var를 왜 쓰면 안되는지 설명해주세요.

함수스코프, 블록스코프 차이 (ex: var는 for문이 종료되어도 변수에 접근가능)
의도치않은 중복선언, 전역선언.

 

Q. Promise와 Axios에 대해 설명해주세요.

Promise는 비동기처리에 사용되는 객체. 3가지 상태값 대기(Pending), 이행(Fulfilled), 실패(Rejected).
처리 결과를 then으로 받을 수 있다. 콜백지옥을 해결할수있다.

Axios는 promise기반의 HTTP 통신 라이브러리. return을 Promise로 받는다.
자동으로 JSON데이터 형식으로 변환된다. 

 

Q. api call을 순차적, 병렬적으로 할때 각각 어떻게 할것인지 설명해주세요.

의존성 await async, promise all 에 대한 이해

 

Q. 얕은복사와 깊은복사를 차이점을 설명하고, 어떻게 사용하였는지 설명해주세요.

레퍼런스
spread operator, Object.assign,
Json.parse Json.stringify, lodash, immer, structuredClone(node 17이상) 등등

 

Q. HOC(고차컴포넌트)의 개념에 대해서 설명해주세요.

컴포넌트를 인자로 받아서 컴포넌트를 리턴하는 함수. 

 

Q. REST api를 개념적으로 설명해주세요.

HTTP 통신 규약
메서드 POST, GET, PUT/PATCH, DELETE (CRUD)

 

간단하게 정리해보고 나니 질문의 구체화가 더 필요해 보인다.
개념적인 질문들은 최소한의 면접준비를 했는지나, 기본이 탄탄한지, 경험이 있는지를 판단하는데 좋은 지표가 되었다.

설명할수없다면 알고있는게 아니라는 말을 새기면서.. 나는 잘 설명할 수 있을까 다시한번 되돌아본다.
다음 면접 시즌이 찾아온다면 더 좋은 질문들로 리스트업 해야겠다.

+ ) 면접 시즌동안 힘든면도 있었지만, 덕분에 좋은 동료와 함께할수 있게되어 기쁘다.

반응형