[면접 스터디] 6회차

📍 HTTP 통신에 대해서 설명해주세요.

• HTTP 는 Hyper Text Transfer Protocol의 약자로 주로 HTML과 같은 Hyper Text 문서를 주고 받기 위해 만들어졌고, 최근에는 HTML 뿐 아니라 모든 웹 관련 API 통신에 이용하고 있는 통신 프로토콜입니다.
• HTTP 프로토콜은 비연결성과 무상태성의 특징을 가지는 통신 프로토콜입니다.
• 그렇다면 비연결성과 무상태성이란 무엇인가요?
  • 비연결성을 가지는 HTTP 에서는 실제로 요청을 주고 받을 때만 연결을 유지하고 응답을 주고 나면 TCP/IP 연결을 끊습니다. 이를 통해 최소한의 자원으로 서버 유지를 가능하게 합니다.
  • 무상태성은 프로토콜에서 클라이언트의 상태를 기억하지 않습니다. 클라이언트의 상태를 보관하기 위해 쿠키나 세션, JWT 토큰 등을 이용하여 클라이언트의 상태를 유지합니다.

 

📍 리덕스가 무엇인지 그리고 장단점을 설명해주세요.

• 리덕스는 자바스크립트 어플리케이션을 위한 예측 가능한 상태 컨테이너입니다. 리덕스는 일관적으로 동작하고, 서로 다른 환경에서 작동하고, 테스트하기 쉬운 어플리케이션을 작성하도록 도와줍니다. 즉, 데이터를 중앙 집권화시켜 데이터 사용 및 관리를 편리하게 만드는 라이브러리입니다.
• 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있고, 여러 컴포넌트를 거치지 않고 손쉽게 상태값을 전달하거나 업데이트할 수 있어서 사용합니다.
• 그렇다면 리덕스의 장점은?
  • 단방향 모델링이므로 action을 dispatch 할 때마다 history가 남아 에러를 찾기 쉽습니다.
  • store를 통해 상태를 한 곳에서 관리하는데, 전역 상태를 관리할 때 굉장히 효과적입니다.
  • 리덕스는 상태를 읽기 전용으로 취급하므로, 이전 상태로 돌아가기 위해서는 그저 이전 상태를 현재 상태에 덮어쓰기만 하면 됩니다.
• 그렇다면 리덕스의 단점은?
  • 리덕스는 아주 작은 기능을 구현할 때도 필수적인 보일러플레이트 코드가 많아 코드량이 늘어난다는 단점이 있습니다.

 

📍 리액트에서 메모이제이션을 어떤 방식으로 활용할 수 있나요?

• 메모이제이션이란?
  • 계산 비용이 높은 연산의 결과를 메모리에 저장해두는 최적화 기법입니다. 동일한 입력에 대한 요청이 있을 때 이전에 저장한 결과를 반환함으로써 연산을 다시 수행하는 비용을 절감합니다.
• 그렇다면 활용 방법은?
  1. useMemo 훅
     • 복잡한 계산 결과를 메모이제이션하여, 종속성 배열에 포함된 값이 변경되지 않는 한 재계산하지 않습니다. 주로 계산 비용이 큰 함수의 결과를 캐싱할 때 유용합니다.
     • 특정 결과값을 재사용할 때 사용
  2. useCallback 훅
     • 함수형 컴포넌트를 렌더링할 때마다 새로운 함수를 생성하는 것을 방지하기 위해 사용됩니다. 종속성 배열에 포함된 값이 변경되지 않는 한 동일한 함수를 반환하므로, 자식 컴포넌트에 전달하는 콜백 함수가 불필요하게 변경되는 것을 막아줍니다.
     • 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용
  3. React.memo 고차 컴포넌트
     • 컴포넌트의 props 가 변경되지 않으면 해당 컴포넌트를 다시 렌더링하지 않도록 메모이제이션할 수 있습니다. 이는 함수형 컴포넌트에 적용할 수 있으며, props가 동일한 경우 렌더링을 건너뛰게 됩니다.

 

📍 TDD와 BDD의 차이점에 대해 설명해주세요.

• TDD는 개발자가 코드를 작성하기 전에 먼저 테스트를 작성하는 개발 방법론입니다.
  • TDD는 Red-Green-Refactor 3가지 사이클로 나눌 수 있는데, 먼저 실패하는 테스트를 작성(Red)하고, 테스트를 통과시키기 위해 최소한의 코드를 작성(Green)한 후, 코드를 개선하는 단계(Refactor)를 거칩니다.
  • TDD는 주로 코드의 유닛 테스트에 집중하고, 코드의 정확성과 안정성을 높이는 것을 목표로 합니다.
• BDD는 소프트웨어의 행동을 정의하는 것에 중점을 둔 개발 방법론으로, 주로 사용자 스토리나 요구사항에 기반하여 테스트를 작성합니다.
  • BDD에서는 Given-When-Then 구조를 사용하여 특정 시나리오에서 시스템의 행동을 설명합니다.
  • 예를 들어, Given 특정 상황이 주어졌을 때, When 어떤 행동이 이루어지면, Then 특정 결과가 발생해야 한다 라는 형태로 테스트를 작성합니다.
  • BDD는 주로 애플리케이션의 전체적인 동작과 사용자 경험을 중심으로 테스트를 작성하며, 이를 통해 요구사항이 제대로 구현되었는지 확인합니다.

 

📍 Context API와 Redux를 비교해주세요.

• Context API는 리액트 내장 기능으로, 컴포넌트 트리 전체에 걸쳐 상태를 공유할 수 있게 합니다.
  • React.createContext 함수는 사용하여 컨텍스트를 생성하고, Provider 컴포넌트를 사용하여 상태를 제공하며, Consumer 컴포넌트를 사용하여 상태를 소비합니다.
• Redux는 외부 라이브러리로, 중앙 집중식 상태 관리를 제공합니다.
  • 리덕스는 애플리케이션의 상태를 하나의 중앙 저장소 Store에서 관리하며, 상태 변경은 Action과 Reducer를 통해 이루어집니다.
• Context API는 간단하고 직관적이지만, 상태가 복잡해지거나 여러 컨텍스트를 사용할 때 코드의 가독성과 유지보수성이 떨어질 수 있습니다. 반면, Redux는 상태 관리의 일관성을 유지하고, 상태 변경을 예측 가능하게 합니다. 그러나 설정이 복잡하고, 보일러플레이트 코드가 많아질 수 있습니다.