8 React Front-End Developer Interview Questions (With Answers) | Kambu
Front End Developer is a very coveted role in IT. We share eight of our preferred React Front End developer interview questions and answers.
www.kambu.pl
상단의 블로그에서 발췌하여 번역한 글입니다.
프론트엔드 디벨로퍼는 회사에서 매우 중요한 역할을 맡고 있고 그렇기 때문에 기술적으로 앞서 있어야하며 최신 트렌드에 민감해야 합니다. 지원자들의 이해하기 위해 우리는 몇가지 특정 질문들을 뽑아 보았고, 이 블로그에서 프론트엔드 디벨로퍼의 인터뷰 질문과 그 대답들을 정리했습니다.
프론트엔드 디벨로퍼는 무엇을 하며 왜 그것이 중요할까요? 그들의 역할은 많은 디바이스에서 작동하는 우아하고, 편리하며 반응형이면서 사용자와 상호교환이 가능한 것들을 만들어주는 것입니다. 그들은 우리가 웹사이트를 열거나 웹 응용프로그램 또는 모바일의 어플을 쓰는데 필요한 모든 것들을 심어둡니다.
일반적으로 대부분의 지원자들은 프론트엔드 직군의 면접을 위해서 어떻게 준비해야하는지 어떤 타입의 질문들을 기대해야하는지를 헷갈려합니다.
이 기사는 이러한 인터뷰들을 위한 몇가지 충고와 설명들을 덧붙힙니다.
8가지 프론트엔드 인터뷰 질문들
1. Flux에 대해서 무엇을 아시나요? 사용해본적이 있나요?
왜 이러한 질문을 묻나요?
우리는 애플리케이션 상태를 유지하기 위해서 어디에서든 리덕스를 사용하고 있습니다. 그렇기때문에 Flux에 대한 개념을 알고 있다면 프로젝트들을 이해하기가 쉬워집니다.
대답: Flux는 단방향 데이터 흐름 모델의 개념을 따르는 아키텍처로서 리액트를 view로서 사용하게 해주는 아키텍처입니다. 이러한 패턴은 애플리케이션 내에서 동시에 데이터의 사용을 서로의 방해없이 안전하게 사용하게 만들어줍니다. 이 패턴은 Action, Dispatcher, Store, 그리고 View로 구성되어 있습니다.
Best Answer: 지원자가 이 패턴의 각 컴포넌트와 그들의 관계에 대해서 디테일하게 이야기할 수 있다면 좋습니다.
Flux에 대해서 좀 더 쉽고 자세히 알고 싶다면 아래의 블로그글을 참고해볼 수 있습니다.
2. 리덕스에서 미들웨어를 쓰는 이유는 뭔가요? redux-thunk는 무엇인가요?
왜 이러한 질문을 묻나요?
redux-thunk 미들웨어는 모든 애플리케이션에서 쓰이기 때문입니다.
대답: 미들웨어의 가장 흔한 유스케이스는 보일러플레이트 코드나 Rx와 같은 라이브러리의 의존도를 피해 비동기적인 액션을 서포트하기 위해서입니다. 이것은 비동기 액션을 노멀 액션에 더하여 dispatch를 할 수 있게 만들어줍니다. 예를 들면 redux-thunk는 액션 객체가 아닌 함수를 dispatch 해줍니다. 제대로된 redux-thunk의 사용은 컴포넌트 레벨에서부터 서비스와 액션까지 애플리케이션의 상태 로직을 추상화할 수 있게 합니다.
Best Answer: 지원자가 redux-thunk에 대해서 실생활의 예제를 더해서 설명을 해줄 수 있다면 좋습니다.
3. 클래스와 함수형 컴포넌트의 차이는 무엇인가요? 둘은 같은 목적으로 쓰일 수 있나요?
왜 이러한 질문을 묻나요?
과거에는 이런 타입들은 다른 목적을 위해 쓰여졌습니다. 하지만 지금은 더이상 그렇지 않습니다. 그렇지만 이런 종류의 질문은 지원자가 새로운 라이브러리 API와 우리가 아직도 유지보수하고 있는 예전 라이브러리들과 비교할 수 있는 지식들을 가지고 있는지를 파악하게 해줍니다. 새로운 API에 익숙한 사람들은 클래스 컴포넌트를 만났을 때 곤욕스러움을 느끼곤 합니다.
대답: 함수형 컴포넌트는 props를 인자로 받아들여 React의 요소로 반환하는 평범한 자바스크립트 함수입니다. 클래스 컴포넌트는 React. Component로부터 조금 더 확장시키고, render 함수를 생성해 유효한 요소를 반환해야 합니다.
Best Answer: 이상적으로는 지원자는 라이브러리 API에 일어난 변화로 인해 함수형과 클래스형의 경계가 허물어지는 것을 이야기할 수 있어야 합니다. 당여한 이야기이지만 이것은 Hooks의 등장으로 컴포넌트의 생명주기에 plug가 가능해짐을 이야기합니다.
4. 리액트에서 Hook은 무엇인가요? 어떤 리액트 hook을 쓰고 있나요?
왜 이러한 질문을 묻나요?
지원자가 이 새로운 리액트 API와의 경험이 있으면 매우 좋기 때문입니다.
대답: Hook은 React의 상태와 생명주기에 파고 들어갈 수 있는 함수입니다. 리액트는 useState와 같은 몇가지 미리 만들어진 Hook을 제공합니다. 또한 사용자가 자신의 훅을 만들어 각각 다른 컴포넌트의 상태변화에 재사용할 수 있도록 합니다.
Best Answer: 이 질문은 그 전 질문과 이어집니다. 새로운 리액트 API에 대한 지식과 어떻게 사람들이 React에서 hook을 쓰는지에 대해서 묻습니다. 그러므로 Hook이 쓰이는 예시와 어떻게 쓰이고 있는지 말할 수 있다면 좋습니다.
5. 컴포넌트의 생명주기에 대해서 설명해보세요.
왜 이러한 질문을 묻나요?
컴포넌트 생명주기와 메소드는 리액트에서 애플리케이션을 생성하는데 매우 중요한 부분입니다. 프로그래머들이 컴포넌트들이 생명주기에서 어떠한 변화들이 일어나는지 이해하고, 미리 만들어진 메소드들을 정확하게 쓰는 것은 컴포넌트의 생명주기 중 알맞는 시간에 로직을 실행시킬 수 있도록 합니다.
대답: 리액트 컴포넌트는 생명의 여러 주기들을 거쳐갑니다: Mounting, Updating, Unmounting
생명주기는 컴포넌트들의 생명의 각 단계에서 작동되는 메소드들의 연장이라고 설명할 수 있습니다. 마운팅의 단계에서는 컴포넌트가 생성이되고, DOM에 입혀집니다. 업데이트되는 단계는 컴포넌트의 상태가 바뀌거나 props의 변화가 생길때 일어납니다. 마지막 단계-언마운팅-에서는 컴포넌트가 DOM 트리에서 파괴되고 제거되는 단계입니다.
Best Answer: 컴포넌트 생명 각 단계의 메소드에 대해서 열거하고, 사용 방법의 예시를 들 수 있어야합니다. 마지막으로, 훅을 사이클에 맞는 방법으로 사용할 수 있어야 합니다. 이 새로운 라이브러리 API는 생명주기 메소드에 꽤 커다란 변화를 가져왔습니다. 이 중 몇가지는 더 나은 보충안으로 인하여 deprecated되었기 때문에, 새로운 API와 오래된 API의 차이점을 알고 있는 것이 좋지만 반드시 필요한 것은 아닙니다.
6. 리액트에서 고차 컴포넌트가 무엇인지 예를 들수 있나요? HOC를 사용하는 다른 예시를 들 수 있나요?
왜 이러한 질문을 묻나요?
이 질문은 지원자의 경험을 판단하기에 적당합니다. 신입단계에서는 HOC에 대해 매우 적은 경험을 가지고 있기 때문입니다.
대답: 고차 컴포넌트는 리액트 API에 속하지 않습니다. 이것은 리액트의 구성적인 환경에서 나오는 흐름입니다. 고차 컴포넌트는 컴포넌트는 다른 컴포넌트로 전환시킵니다. HOC의 한 예로는 Redux의 connect이 있습니다.
Best Answer: 고차 컴포넌트(HOC)이 반복적인 로직을 하나의 장소에서 정의하도록 하여 많은 컴포넌트 내에서 사용할 수 있도록 한다는 것을 명시해야 합니다. HOC의 대안점으로는 커스텀 훅을 만들어 재사용 가능한 로직을 만들어 쓸 수 있습니다.
7. Virtual DOM은 무엇인가요? 리액트에서 리스트를 최적화는 어떻게 하나요?
왜 이러한 질문을 묻나요?
리액트를 실무에서 쓰는 모든 사람들이 알아야 하는 UI 업데이트 메커니즘입니다.
대답: Virtual DOM은 실제 Document Object Model의 인메모리 형상입니다. 리액트는 VDOM을 컴포넌트 상태에서 변화가 있을 때마다 업데이트를 합니다. 그리고 '비교 알고리즘'을 통해 현재 Virtual DOM과 예전 버전을 차이점을 비교합니다.
리스트를 최적화하려면 요소에 안정적인 독자성을 부여하는 특별한 "키" prop을 사용합니다. 키들은 리액트에서 어떤 아이템들이 바뀌었는지, 추가되었는지, 또는 제거되었는지를 구분시킬 수 있도록 도와줍니다.
Best Answer: 왜 VirtualDOM이 처음 시작이 되었는지, 사용한다면 어떤 베네핏이 있는지 설명할 수 있다면 좋습니다.
8. 비동기 코드를 어떻게 처리하나요?
왜 이러한 질문을 묻나요?
이 질문은 지원자가 어떻게 비동기 작업을 처리하는 지에 대한 질문입니다.
대답: 자바스크립트에서는 비동기 코드를 처리하기 위한 몇 가지 방식이 있습니다: 콜백, 프로미스, 그리고 async/await 입니다. 초기에 이러한 작업들은 콜백들로 처리되었습니다. (콜백은 비동기 작업이 준비된 이후의 결과물을 불러오는 방식) 불행히도 이러한 코드들은 비동기적인 처리가 계속 이어지는 것과 같은 실행이 필요했을때 읽혀지지 않는 문제점을 가지고 있었습니다.
프로미스는 콜백과 비슷하게 작동되지만 몇 가지 다른점이 있습니다. 먼저, 프로미스에 콜백을 추가할 필요는 없습니다. 프로미스는 자체적인 함수이기 때문에 처리가 성공을 했거나 실패를 할 시 불러오게 됩니다. 두번째 차이는 연속적인 콜백을 배치시켜주어야 하는 첫번째 방법과는 달리 서로 연계되는 비동기 처리들을 이을 수 있습니다.
Async/await은 프로미스의 Syntactic sugar로 비동기적인 코드를 좀 더 동기적으로 보이게 하여 프로그래머들의 가시성을 높인 것입니다. 이 코드는 사실 프로미스와 같은 방법으로 처리되어 집니다.
Best Answer: 지원자들은 비동기 처리과정의 예를 들수 있어야 하며, 비동기 처리 과정에서 나오는 에러처리에 대한 방법 등을 알고 있어야 합니다. 이 처리들을 동시에 핸들링 할 수 있는 있다면 가장 좋습니다.
결론 - 기술적인 문제를 넘어서
이 프론트엔드 면접 질문과 대답이 좋은 힌트가 되었길 빕니다. 항상 기술적인 실력이 중요한 게 아니란 걸 기억하시고, 인터뷰에서의 성공은 마음가짐과 좋은 첫인상에도 달려 있습니다. 테크니컬한 질문이외에도 소프트 스킬, 동기와 기대에 관해서도 질문을 할 수 있습니다. 최고의 답을 찾으려고 애를 쓰지는 마세요-아무도 모든 걸 잘 할 수는 없습니다. 회사와 당신의 역할에 관해서 질문들을 만들어가는 것도 좋습니다. 당신의 흥미와 동기를 보여주세요. 행운을 빕니다!
'React & React Native' 카테고리의 다른 글
| 15가지 리액트 프론트엔드 인터뷰 대비 질문과 답변 (0) | 2022.06.15 |
|---|---|
| REST api를 이용한 리액트 로그인 구현 (1) | 2022.01.20 |
| 리액트 개발자라면 알아야한 15가지 커스텀 훅스 (번역) (0) | 2021.09.01 |
| JavaScript 문자열 반으로 나누기 && 특정 문자 포함시 들여쓰기 (\n) (0) | 2021.08.09 |
| 생활코딩 - Redux (0) | 2021.08.04 |
