기술면접 준비하기 - 3

강성일·2023년 7월 6일
TIL코드스테이츠
0

[코드스테이츠] SEB FE 45 Students

목록 보기
62/82
post-thumbnail

💡 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해 주세요.

재귀(Recursion)는 함수 내에서 자기 자신을 호출하는 것을 의미한다.
재귀를 활용하는 가장 좋은 상황은 작업이 동일한 패턴을 가지고 반복되는 경우이다.

예를 들어, 트리(Tree) 구조에서 노드를 순회하거나 문제를 분할하여 해결하는 등의 상황에서 재귀를 사용할 수 있다.

재귀의 대표적인 예시

간단한 예시로는 팩토리얼 계산이 있다.

팩토리얼은 양의 정수 n에 대해 n부터 1까지의 모든 정수를 곱하는 연산을 의미한다.

예를 들어, 5!은 5 × 4 × 3 × 2 × 1로 계산된다.
이를 재귀적으로 표현하면 5!은 5 × 4!로 표현될 수 있다.

이렇게 작은 문제로 분할하여 자기 자신을 호출하여 문제를 해결하는 것이 재귀의 핵심 아이디어이다.

💬 요약하면, 재귀는 작업이 반복적으로 동일한 패턴을 가지고 있는 경우 유용하다.
팩토리얼 계산과 같이 작은 문제로 분할하여 해결하는 경우 재귀를 활용할 수 있다.



💡 UI, UX의 개념과 두 개념의 관계에 대해서 설명해 주세요.

UI와 UX는 모두 사용자 중심의 디자인을 위해 중요한 개념이다.

UI

UI는 사용자 인터페이스(User Interface)의 약자로,
사용자가 소프트웨어나 웹 애플리케이션과 상호작용할 때 마주하는 시각적인 요소들을 포함한다.

이는 버튼, 메뉴, 폼 등과 같은 디자인 요소, 레이아웃, 색상, 아이콘 등을 포함한다.

UI는 사용자가 애플리케이션을 쉽게 이해하고 사용할 수 있도록 시각적인 요소들을 구성하는 역할을 한다.

UX

UX는 사용자 경험(User Experience)의 약자로,
사용자가 제품 또는 서비스를 이용하는 동안 느끼는 전반적인 경험을 의미한다.

이는 사용자가 제품을 어떻게 인지하고, 상호작용하는지, 사용하는 과정에서 어떤 감정과 인상을 받는지를 포함한다.

UX는 사용자의 요구사항을 충족시키고, 사용자의 만족과 편의성을 개선하는데 초점을 둔다.

UI와 UX는 서로 긴밀한 관계를 가지고 있다.

UI는 UX를 형성하는 중요한 요소 중 하나로, 사용자들이 직접적으로 인터랙션하는 시각적인 부분을 담당한다.

UI 디자인의 품질은 사용자의 경험에 직결되며, 훌륭한 UI는 사용자가 제품 또는 서비스를
보다 쉽게 이해하고 사용할 수 있도록 도움을 주므로 둘은 연관되어 있다고 할 수 있다.

💬 요약하면, UI는 사용자 인터페이스를 디자인하여 시각적인 요소를 구성하는 역할을 하며,
UX는 사용자가 제품 또는 서비스를 이용하는 동안 느끼는 전반적인 경험을 개선하는데 초점을 둔다.
UI는 UX를 형성하는 중요한 요소 중 하나이며, 둘은 긴밀한 관계를 가지고 있다.



💡 Styled Components를 사용해 보면서 느낀 장점을 이야기해 주세요.

Styled Components는 JavaScript 기반의 CSS-in-JS 라이브러리로,
컴포넌트 단위에서 스타일을 작성하고 적용할 수 있게 해준다.

Styled Components 장점

  • 캡슐화와 재사용성: Styled Components는 컴포넌트와 스타일을 함께 정의하므로 스타일과 해당 컴포넌트가 강력하게 결합된다. 이는 스타일이 다른 컴포넌트로 쉽게 재사용될 수 있음을 의미한다. 또한 스타일이 컴포넌트와 함께 캡슐화되어 스타일 간의 충돌을 방지하고, 코드의 가독성과 유지보수성을 향상시킨다.

  • 동적 스타일링: Styled Components는 JavaScript를 활용하여 동적으로 스타일을 조작할 수 있는 힘을 제공한다. 조건부 렌더링이나 상태 변화에 따라 스타일을 동적으로 변경할 수 있으며, props를 활용하여 스타일을 다르게 적용할 수도 있다. 이는 유연하고 동적인 UI 개발을 가능하게 한다.

  • CSS-in-JS의 이점: CSS-in-JS 방식으로 스타일을 작성하면 CSS 클래스 이름 충돌을 걱정할 필요가 없다. Styled Components는 고유한 클래스 이름을 동적으로 생성하여 각 컴포넌트에 적용한다. 이로 인해 전역 스코프의 CSS 규칙 충돌을 방지하고, 스타일 관련 버그를 최소화한다.

  • 편리한 스타일 관리: Styled Components는 CSS의 기능을 모두 활용할 수 있기 때문에 CSS의 선택자, 상속, 애니메이션 등을 쉽게 사용할 수 있다. 또한 편리한 문법과 기능을 제공하여 스타일 작성과 관리를 용이하게 만들어준다.

  • 생태계와 커뮤니티: Styled Components는 널리 사용되는 CSS-in-JS 라이브러리 중 하나로, 다양한 문서, 자료, 예제, 커뮤니티 등이 존재한다. 이는 학습과 지원에 있어서 유용하며, 개발자들 간의 지식 공유와 협업을 도모한다.

💬 요약하면, Styled Components를 사용하면 스타일과 컴포넌트가강력하게 결합되어 캡슐화와 재사용성을 높일 수 있다. 동적 스타일링을 지원하여 유연하고 동적인 UI 개발이 가능하며, CSS 클래스 이름 충돌을 걱정할 필요가 없어 편리한 스타일 관리가 가능하다. 또한 다양한 문서, 자료, 커뮤니티가 존재하여 학습과 지원에 도움이 된다.



💡 useRef가 필요한 상황을 예시를 들어 설명해 주세요.

useRef는 React에서 DOM 요소나 다른 값을 참조하는 데 사용되는 Hook이다.

useRef 사용 예시

  • DOM 요소에 접근: useRef를 사용하여 특정 DOM 요소에 접근할 수 있다. 예를 들어, 특정 버튼을 클릭할 때 해당 버튼의 스타일을 변경하고 싶을 때 useRef를 사용하여 버튼 요소에 접근하여 스타일을 변경할 수 있다.

  • 이전 값 비교: useRef를 사용하여 이전 값을 저장하고, 현재 값과 비교할 수 있다. 이를 통해 이전 값과 현재 값의 변화를 감지하거나, 값의 변경에 따른 추가적인 작업을 수행할 수 있다.

  • 값의 변경 추적: useRef를 사용하여 값의 변경을 추적하고, 컴포넌트의 렌더링 사이클에서 값을 유지할 수 있다. 이는 일반적으로 컴포넌트 내에서 변경 가능한 변수를 유지하고 싶을 때 유용하다.


💬 요약하면, useRef가 필요한 상황은 다음과 같을 수 있다.
DOM 요소에 접근하거나, 이전 값과 현재 값을 비교하고, 값의 변경을 추적할 수 있다는 것을 알 수 있다.



💡 상태관리 라이브러리의 필요성에 대해서 설명해 주세요.

상태관리 라이브러리는 대규모 또는 복잡한 애플리케이션에서 발생할 수 있는 상태 관리에 대한 도구이다.
일반적으로 React와 함께 사용되며, 여러 컴포넌트 간의 상태를 효율적으로 공유하고 관리할 수 있도록 도와준다.

상태관리 라이브러리의 필요성

  • 컴포넌트 간의 데이터 공유: React 애플리케이션에서 여러 컴포넌트 간에 데이터를 공유해야 할 때가 많다. 이를 위해 상위 컴포넌트로부터 props를 통해 데이터를 전달하거나, 컴포넌트 계층 구조를 거쳐 props를 전달하는 것은 번거롭고 복잡할 수 있다. 상태관리 라이브러리는 중앙 상태 저장소를 통해 컴포넌트 간에 데이터를 효율적으로 공유할 수 있도록 해준다.

  • 복잡한 상태 관리: 애플리케이션이 복잡해지고 상태 관리가 어려워질 때 상태관리 라이브러리는 효과적이다. 예를 들어, 여러 컴포넌트에서 동일한 데이터를 업데이트하거나, 비동기 작업의 상태를 관리해야 할 때, 상태관리 라이브러리는 간단한 API를 통해 복잡한 상태 관리를 처리할 수 있다.

  • 글로벌 상태 관리: 일부 데이터는 애플리케이션 전체에서 공유되어야 하는 글로벌 상태가 있을 수 있다. 예를 들어, 사용자 로그인 정보, 테마 설정 등은 여러 컴포넌트에서 접근해야 할 수 있다. 상태관리 라이브러리를 사용하면 글로벌 상태를 쉽게 관리하고, 필요한 컴포넌트에서 필요한 데이터를 손쉽게 가져올 수 있다.

  • 상태 업데이트 관리: React에서 상태를 업데이트할 때는 불변성을 유지해야 한다. 이는 상태를 직접 수정하는 대신 새로운 상태 객체를 생성해야 함을 의미한다. 상태관리 라이브러리는 업데이트 로직을 추상화하고, 상태의 불변성을 자동으로 관리하여 상태 업데이트를보다 쉽게 관리할 수 있게 해준다. 예를 들어, 일부 상태를 변경할 때 불필요한 렌더링을 방지하거나, 이전 상태와의 차이를 효율적으로 계산하여 최적화된 업데이트를 수행할 수 있다.

💬 요약하면, 상태관리 라이브러리는 이러한 필요성을 충족시키고, 개발자에게 편리한 API와 도구를 제공하여 상태 관리를 간편하게 처리할 수 있도록 도와준다. 대표적인 상태관리 라이브러리로는 Redux, MobX, Recoil 등이 있다. 이러한 라이브러리들은 컴포넌트 간의 상태 관리를 표준화하고, 코드의 가독성, 유지보수성, 확장성을 향상시킨다.



💡 Redux의 주요 개념들과 연결 관계를 설명해 주세요.

Redux는 JavaScript 애플리케이션의 상태를 관리하기 위한 예측 가능한 상태 컨테이너이다.

Redux의 주요 개념

  • 액션 (Actions): 액션은 상태 변경을 일으키는 객체이다. 일반적으로 상태 변경의 원인이 되는 사용자 이벤트 또는 비동기 작업의 결과를 나타낸다. 액션은 type 필드를 가지며, 필요에 따라 추가적인 데이터를 포함할 수 있다.

  • 액션 생성자 (Action Creators): 액션 생성자는 액션 객체를 생성하는 함수이다. 주로 액션 객체를 반환하는 함수로써, 액션 생성자를 사용하여 액션을 생성할 수 있다.

  • 리듀서 (Reducers): 리듀서는 액션을 기반으로 이전 상태와 액션을 받아 새로운 상태를 생성하는 순수한 함수아다. 상태 변경 로직을 담고 있으며, 현재 상태와 액션을 받아 새로운 상태를 반환한다.

  • 스토어 (Store): 스토어는 상태를 담고 있는 객체이다. 애플리케이션의 전체 상태를 저장하고, 리듀서에 의해 상태가 업데이트된다. 스토어는 액션을 디스패치하고, 리듀서를 호출하여 새로운 상태를 생성하며, 상태를 구독할 수 있는 메서드를 제공한다.

  • 디스패치 (Dispatch): 디스패치는 스토어에 액션을 전달하는 메서드이다. 액션을 디스패치하면 리듀서가 호출되어 상태를 업데이트한다.

  • 구독 (Subscription): 구독은 상태의 변경을 감지하여 특정 작업을 수행할 수 있도록 스토어에 등록하는 메서드이다. 상태가 변경될 때마다 등록된 구독자들에게 알림을 보내어 작업을 처리할 수 있게 한다.

개념 간의 연결 관계

  • 액션 생성자는 액션 객체를 생성하여 반환하고, 액션 객체는 상태 변경의 원인을 표현한다.
  • 디스패치를 통해 액션을 스토어에 전달하면, 스토어는 액션을 받아 리듀서를 호출한다.
  • 리듀서는 현재 상태와 받은 액션을 기반으로 새로운 상태를 생성하고 반환한다.
  • 스토어는 리듀서가 반환한 새로운 상태를 저장하고, 상태 변경을 구독하고 있는 컴포넌트들에게 알림을 보내어 업데이트될 수 있도록 한다.

💬 요약하면, 이렇게 상호작용하는 액션, 액션 생성자, 리듀서, 스토어, 디스패치, 구독은 Redux의 핵심 개념이며, 함께 사용하여 예측 가능하고 일관된 상태 관리를 구현할 수 있다.



💡 Semantic HTML의 필요성을 예시를 들어 설명해 주세요.

Semantic HTML은 웹 문서의 구조와 의미를 명확하게 전달하기 위해 의미론적인 요소를 사용하는 것을 의미한다.
이는 웹 페이지의 접근성, 검색 엔진 최적화(SEO), 유지보수성 등에 긍정적인 영향을 미친다.

Semantic HTML의 필요성

  • 제목과 섹션 요소: <h1>, <h2>, <h3> 등의 제목 요소와 <section>, <article>, <aside> 등의 섹션 요소는 문서의 구조와 계층을 명확하게 표현한다. 예를 들어, <h1>은 페이지의 주요 제목을 나타내고, <section>은 주요 콘텐츠 영역을 감싸는 역할을 한다. 이를 사용하면 스크린 리더 등의 보조 기술을 사용하는 사용자는 문서 구조를 더 쉽게 이해할 수 있고, 검색 엔진은 페이지의 구조와 의미를 더 잘 파악할 수 있다.

  • 목록 요소: <ul>, <ol>, <dl> 등의 목록 요소는 관련 항목들을 목록 형태로 나타낸다. 이는 정보를 구조화하고 시각적인 표현과는 독립적으로 의미를 전달한다. 또한, 스크린 리더 사용자는 목록 요소를 인식하여 목록의 구조를 파악할 수 있다.

  • 시맨틱 폼 요소: <form> 요소와 그 안에 포함된 <input>, <select>, <textarea> 등의 시맨틱 폼 요소는 사용자 입력과 관련된 의미를 제공한다. 이는 스크린 리더 사용자가 폼을 쉽게 이해하고 작성할 수 있도록 도와주며, 개발자는폼 처리를 위해 JavaScript 코드를 작성할 필요 없이 브라우저가 기본 동작을 처리할 수 있다.

💬 요약하면, Semantic HTML을 사용하면 웹 문서의 구조와 의미를 명확하게 표현할 수 있고, 접근성을 향상시키고, 검색 엔진 최적화를 개선할 수 있다. 또한, 개발자와 유지보수를 위해서도 읽기 쉽고 유지보수 가능한 코드를 작성하는 데 도움이 된다.



💡 IP 프로토콜의 한계에 대해서 설명해 주세요.

IP (Internet Protocol) 프로토콜은 인터넷에서 데이터를 전송하기 위한 주요 프로토콜 중 하나이다.

하지만 IP 프로토콜은 몇 가지 한계점을 가지고 있다.

IP 프로토콜의 한계

  • 주소 공간의 한계: IP 주소 체계인 IPv4는 32비트로 구성되어 약 43억 개의 주소를 제공한다. 그러나 인터넷 사용자와 기기의 수가 급격히 증가함에 따라 IPv4 주소 고갈 문제가 발생했다. 이로 인해 IPv6라는 새로운 주소 체계가 개발되었지만, 여전히 IPv4 주소를 사용하는 네트워크와의 호환성 문제가 있다.

  • 보안의 한계: IP 프로토콜은 기본적으로 데이터의 신뢰성과 보안을 제공하지 않는다. IP 패킷은 송신자와 수신자 사이를 통과하는 동안 변경되거나 손상될 수 있다. 또한 IP 주소 위조나 중간자 공격과 같은 보안 위협에 취약하다. 이러한 이유로 IP 프로토콜은 추가적인 보안 기능을 위해 다른 프로토콜과 함께 사용되는 경우가 많다.

  • 품질 관리의 한계: IP 프로토콜은 데이터 전송에 대한 품질 관리를 제공하지 않는다. 데이터 패킷은 최단 경로로 전달되는 경향이 있으며, 중간의 네트워크 혼잡이나 패킷 유실에 대한 처리가 부족하다. 따라서 실시간 음성이나 비디오 스트리밍과 같은 실시간 통신에는 제한이 있을 수 있다.

  • 네트워크 주소 변환 (NAT) 문제: IPv4 주소 부족 문제를 해결하기 위해 NAT라는 기술이 사용되고 있다. NAT는 개인 네트워크에서 공용 IP 주소와 사설 IP 주소를 변환하는 데 사용된다. 하지만 NAT는 일부 응용 프로그램에서 문제를 일으킬 수 있으며, 피어 투 피어(P2P) 통신이나 IP 주소 기반의 보안 및 신원 확인과 같은 기능에 제한을 가할 수 있다.

💬 요약하면, IP 프로토콜은 주소 공간, 보안, 품질 관리, 네트워크 주소 변환의 한계가 있으며,
이를 극복하기 위해 IPv6의 도입과 같은 대안들이 제시되고 있다.



💡 HTTP 프로토콜의 특징에 대해 설명해 주세요.

HTTP (Hypertext Transfer Protocol)는
클라이언트와 서버 간의 데이터 통신을 위한 프로토콜로, 웹에서 가장 일반적으로 사용되는 프로토콜이다.

HTTP의 주요 특징

  • Stateless 프로토콜: HTTP는 Stateless 프로토콜이다. 이는 서버가 클라이언트의 상태를 기억하지 않고 각 요청을 독립적으로 처리하는 것을 의미한다. 각 요청은 이전 요청과 상관없이 독립적으로 처리되며, 클라이언트와 서버 간의 연결을 유지하지 않는다. 이를 통해 서버의 확장성과 성능을 향상시킬 수 있다.

  • 요청-응답 모델: HTTP는 요청(Request)과 응답(Response)으로 이루어진 요청-응답 모델을 따른다. 클라이언트가 서버에 요청을 보내면, 서버는 해당 요청에 대한 응답을 반환한다. 이를 통해 클라이언트와 서버 간의 상호작용이 이루어지며, 클라이언트는 서버에게 필요한 정보를 요청하고 응답을 받아 처리한다.

  • 상태 코드: HTTP 응답은 상태 코드(Status Code)를 포함한다. 상태 코드는 해당 요청의 처리 결과를 나타내는 세 자리 숫자이다. 예를 들어, 200은 "성공"을 나타내고, 404는 "찾을 수 없음"을 나타낸다. 상태 코드를 통해 클라이언트는 요청이 성공했는지 또는 어떤 문제가 발생했는지 등을 알 수 있다.

  • 요청 메서드: HTTP는 다양한 요청 메서드(Method)를 제공하여 클라이언트가 서버에게 원하는 동작을 명시할 수 있다. 가장 일반적으로 사용되는 메서드는 GET, POST, PUT, DELETE 등이 있으며, 각각 데이터의 조회, 생성, 수정, 삭제 등의 역할을 수행한다. 요청 메서드를 통해 클라이언트는 서버에게 어떤 동작을 수행해야 하는지 명확하게 전달할 수 있다.

  • 헤더와 바디: HTTP 요청과 응답은 헤더(Header)와 바디(Body)로 구성된다. 헤더는 요청이나 응답에 대한 추가적인 정보를 포함하며, 바디는 요청이나 응답에 대한 본문 데이터를 포함한다. 헤더는 요청/응답의 속성을 제어하고, 바디는 실제 데이터를 전송한다.

  • 확장 가능성: HTTP는 확장 가능한 프로토콜로써, 다른 프로토콜과 함께 사용되거나 확장되어 기능을 추가할 수 있다. 예를 들어, HTTPS는 HTTP에 보안 기능을 추가한 프로토콜이다. 또한, HTTP/2와 HTTP/3는 기존의 HTTP/1.1보다 더 효율적인 데이터 전송을 위한 프로토콜로 개발되었다.

💬 요약하면, HTTP는 웹 데이터 통신을 위한 프로토콜로, 요청-응답 모델을 따르며,
텍스트 기반의 상태 코드, 요청 메서드, 확장 가능성과 같은 특징을 가지고 있다.



💡 Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해 주세요.

Cookie의 MaxAge와 Expires 옵션은 쿠키의 유효 기간을 설정하는 데 사용된다.

Cookie의 옵션

  • MaxAge: MaxAge는 쿠키의 유효 기간을 초 단위로 설정하는 옵션이다.
    예를 들어, Max-Age=3600은 쿠키가 생성된 후 1시간 동안 유효하다는 것을 의미한다.

  • Expires: Expires는 쿠키의 유효 기간을 날짜/시간으로 설정하는 옵션이며, 문자열이어야 한다.
    예를 들어, Expires=Sat, 31 Dec 2023 23:59:59 GMT은 쿠키가 2023년 12월 31일 자정까지 유효하다는 것을 의미한다.

이 두 옵션 중 하나를 설정하지 않으면,
클라이언트의 메모리에만 저장되는 세션 쿠키로 취급되며, 브라우저 세션이 종료되면 삭제된다.

💬 요약하면, MaxAge는 쿠키의 유효 기간을 초 단위로 설정하고, Expires는 날짜/시간으로 설정한다.
설정하지 않으면 쿠키는 세션 쿠키로 처리되어 브라우저 세션 종료 시 삭제된다.

profile
강성일
아이디어가 넘치는 프론트엔드를 꿈꿉니다 🔥
이전 포스트

CRUD 기획 & 나만의 ToDo 애플리케이션 만들기

다음 포스트

🌟 [SEB FE] Section 3_회고

0개의 댓글