재귀

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

• 재귀는 함수가 자기 자신을 호출하는 것을 의미합니다.
• 예를 들어, 트리 구조나 그래프의 깊이 우선 탐색(DFS)에서는 재귀를 통해 간결하고 이해하기 쉬운 코드를 작성할 수 있습니다.
• 또한, 피보나치 수열이나 팩토리얼 계산 등에서도 재귀를 사용할 수 있습니다.

UI/UX

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

• UI(User Interface)는 사용자가 시스템을 제어할 수 있도록 만든 인터페이스를 의미함.
  : 예를 들어, 버튼, 텍스트, 이미지, 슬라이더, 입력 필드 등 사용자가 직접 조작하는 모든 것을 포함하며, 이들의 배치, 색상, 크기, 폰트 등의 디자인을 말함.
• UX(User Experience)는 제품이나 서비스를 이용하는 과정에서 사용자가 느끼는 경험을 의미합니다.
  : UX는 사용자의 사용 편의성, 만족도, 제품 이용에서 얻는 가치 등을 포함하며, 이는 제품의 기능, 사용자 인터페이스, 서비스, 마케팅, 브랜드 이미지 등 여러 요소에 의해 결정
• 이 두 개념은 서로 밀접하게 관련되어 있습니다. 좋은 UI를 통해 사용자는 편리하고 이해하기 쉬운 제품이나 서비스를 이용할 수 있게 되며, 이로 인해 UX가 향상됩니다.

Custom Component

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

• Styled Components
  : Styled Components는 React를 위한 CSS-in-JS 라이브러리 중 하나입니다. 별도의 CSS 파일을 관리하지 않아도 되는 편리함, 동적 스타일링의 용이성, props를 통한 조건부 스타일링 등이 그 장점으로 꼽힙니다.

1. CSS-in-JS: CSS를 JavaScript 파일 안에 작성할 수 있습니다. 이를 통해 컴포넌트 단위로 스타일을 관리할 수 있어 가독성과 재사용성이 높아집니다.

2. 동적 스타일링: props나 state에 따라 스타일을 동적으로 변경할 수 있습니다. 이를 통해 컴포넌트의 상태에 따라 다양한 스타일을 적용할 수 있습니다.

3. 태그형 문법: ES6의 태그형 템플릿 리터럴 문법을 이용하여 CSS를 작성합니다. 이를 통해 CSS 문법을 그대로 이용할 수 있습니다.

4. 자동 Vendor Prefix 적용: 브라우저 호환성을 위한 vendor prefix를 자동으로 적용해 줍니다.

5. 스타일 재사용: 스타일을 가진 컴포넌트를 생성하고 이를 재사용할 수 있습니다. 이를 통해 중복 코드를 줄일 수 있습니다.

6. 테마 지원: 테마를 정의하고 이를 이용하여 스타일을 적용할 수 있습니다. 이를 통해 일관된 디자인 시스템을 구축할 수 있습니다.

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

• useRef: useRef는 React에서 컴포넌트 내부의 특정 DOM을 직접 선택하고 싶을 때 사용합니다. 예를 들어, 특정 input 엘리먼트에 포커스를 주거나, 스크롤 위치를 얻는 경우 등에 활용할 수 있습니다.

Redux

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

상태관리 라이브러리의 필요성은 주로 대형 프로젝트에서 드러납니다. 컴포넌트 간의 상태 공유가 복잡해지거나, 전역 상태를 관리해야 할 때 Redux와 같은 상태관리 라이브러리를 활용하면 효율적으로 상태를 관리할 수 있습니다.

1. 전역 상태 관리: 큰 프로젝트에서는 여러 컴포넌트에서 공유되는 전역 상태가 존재할 수 있습니다. 이럴 때 상태관리 라이브러리를 사용하면 상태를 중앙에서 관리할 수 있어 편리합니다.

2. 코드의 유지보수: 상태를 중앙에서 관리하게 되면 상태 관련 로직이 특정 위치에 집중되기 때문에, 코드의 유지보수가 쉬워집니다.

3. 비동기 작업 관리: 비동기 작업은 복잡한 상태 변화를 수반하는데, 이런 비동기 작업들을 쉽게 관리할 수 있게 도와줍니다.

4. 중복 코드 제거: 상태를 변경하는 로직을 재사용할 수 있기 때문에 중복 코드를 줄일 수 있습니다.

5. 개발 도구의 지원: Redux 등의 상태관리 라이브러리는 개발 도구를 지원하여 상태의 변화를 추적하고 디버깅하는 데 도움을 줍니다.

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

1. Action: 상태를 변경하는 데 필요한 정보를 가진 객체입니다.
   : 액션은 'type' 필드를 필수적으로 가지고 있어야 하며, 추가적으로 상태 업데이트에 필요한 정보를 담는다. 예를 들어, { type: 'ADD_TODO', text: 'Go to swimming pool' }과 같이 표현됩니다.

2. Reducer: 액션이 어떻게 상태를 변경하는지를 정의한 함수입니다. 리듀서는 현재 상태와 액션을 인자로 받아 새로운 상태를 반환합니다.

3. Store: Redux 앱의 상태를 저장하는 곳입니다. 스토어는 앱의 상태를 조회하거나, 액션을 디스패치하는 API를 제공합니다.

-> 흐름:
1. 앱의 어떤 이벤트가 발생하여 액션을 생성합니다.
2. 이 액션은 store.dispatch() 메소드를 통해 스토어에 전달됩니다.
3. 스토어는 리듀서를 실행시켜 새로운 상태를 생성합니다.
4. 스토어가 업데이트되면, 이를 구독하고 있는 컴포넌트들이 새로운 상태를 받아 다시 렌더링하게 됩니다.
-> 이렇게 Redux의 개념들은 상태 변화의 흐름을 이루며, 상태를 중앙에서 관리하는 역할을 합니다.

웹 표준 & 웹 접근성

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

• Semantic HTML은 의미를 가진 태그를 사용하여 웹 페이지의 구조를 명확하게 나타내는 것을 의미합니다. 이를 사용하면 검색 엔진은 콘텐츠를 더 정확하게 이해할 수 있고, 스크린 리더를 사용하는 사용자에게 웹 페이지의 구조를 더 정확하게 전달할 수 있습니다.

1. 검색 엔진 최적화(SEO): 검색 엔진은 웹 페이지를 분석할 때 semantic 태그를 활용합니다. 예를 들어, <header>, <footer>, <article>, <section> 등의 semantic 태그를 사용하면 검색 엔진은 해당 웹 페이지의 구조와 컨텐츠를 더 잘 이해할 수 있습니다. 이를 통해 웹 페이지의 검색 엔진 순위를 향상시킬 수 있습니다.

2. 접근성 향상: 스크린 리더와 같은 보조 기술은 semantic 태그를 통해 웹 페이지의 구조를 파악하고 사용자에게 정보를 제공합니다. 예를 들어, <nav> 태그는 네비게이션 부분을 나타내고, <main> 태그는 주요 내용 부분을 나타냅니다. 이러한 semantic 태그를 사용하면 스크린 리더를 사용하는 사용자가 웹 페이지를 더 쉽게 이해하고 탐색할 수 있습니다.

3. 코드의 가독성 향상: semantic 태그는 개발자에게도 유익합니다. <div>나 <span> 같은 non-semantic 태그만 사용하는 것보다 semantic 태그를 사용하면 웹 페이지의 구조와 각 부분의 역할을 더 쉽게 파악할 수 있습니다. 이를 통해 코드의 가독성이 향상되고 유지 보수가 용이해집니다.

네트워크 심화

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

• IP 프로토콜은 비연결성과 비신뢰성이라는 한계를 가지고 있습니다.
  : 이로 인해 패킷의 손실이나 순서가 뒤바뀌는 등의 문제가 발생할 수 있습니다. (서비스 품질 보장 불가)
  : 이러한 한계를 극복하기 위해 TCP 등의 프로토콜이 함께 사용됩니다.

-> 비연결성: IP 프로토콜은 패킷을 독립적으로 처리하며, 이전 패킷의 상태를 기억하지 않습니다. 이는 각각의 패킷이 다른 경로를 통해 전송될 수 있다는 것을 의미하며, 패킷의 순서가 변경되거나 패킷이 손실되는 경우를 방지하지 않습니다.

-> 무신뢰성: IP 프로토콜은 패킷이 정확하게 전달되었는지 확인하는 기능이 없습니다. 패킷이 손실되거나 중복되어 도착하거나, 오류가 있는 패킷이 전달될 수 있습니다.

=> 서비스 품질(QoS) 보장 불가: IP 프로토콜 자체는 패킷의 전송 속도, 지연 시간, 패킷 손실 등에 대한 보장을 제공하지 않습니다. 따라서 실시간 서비스나 높은 신뢰성이 필요한 서비스에는 적합하지 않습니다.

이러한 한계점들 때문에, 실제로는 TCP, UDP와 같은 상위 프로토콜을 함께 사용하여 데이터의 순서를 보장하거나, 데이터의 신뢰성을 보장하거나, 특정 서비스의 품질을 보장하는 역할을 수행합니다.

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

HTTP 프로토콜: HTTP는 비연결성, 무상태성, 요청-응답 방식의 특징을 가지고 있습니다. 이로 인해 서버는 클라이언트와의 연결을 유지하지 않아도 되므로 대량의 트래픽을 처리할 수 있지만, 상태 정보를 기억하지 않아 추가 정보가 필요할 때마다 다시 요청해야 합니다.

1. 무상태성(Stateless): HTTP는 클라이언트와 서버 간의 연결을 유지하지 않습니다. 각각의 요청은 서로 독립적이며, 이전 요청에 대한 정보를 기억하지 않습니다. 이는 서버의 부담을 줄이고, 확장성과 성능을 향상시키는 장점을 가지지만, 상태 정보를 유지해야 하는 경우에는 별도의 메커니즘을 사용해야 합니다.

2. 요청-응답 모델: HTTP는 클라이언트가 서버에 요청을 보내고, 서버는 요청에 대한 응답을 반환하는 모델을 따릅니다. 클라이언트가 요청 메서드(GET, POST, PUT, DELETE 등)와 함께 요청 URI(Uniform Resource Identifier)를 지정하고, 서버는 상태 코드와 함께 응답을 반환합니다.

3. 기본 포트: HTTP는 기본적으로 TCP/IP 기반의 통신을 사용하며, 일반적으로 80번 포트를 사용합니다. 보안을 위해 HTTPS(HTTPS는 암호화된 HTTP)는 443번 포트를 사용합니다.

4. 텍스트 기반 프로토콜: HTTP는 ASCII 문자열을 사용하여 요청과 응답을 교환합니다. 이는 사람이 읽을 수 있는 형태로 요청과 응답을 확인할 수 있는 장점을 가지고 있습니다. 그러나 이는 데이터 전송의 효율성 면에서는 단점이 될 수 있습니다.

5. 상태 코드: HTTP 응답에는 상태 코드가 포함되는데, 이는 요청의 처리 결과를 나타냅니다. 대표적인 상태 코드로는 200(성공), 404(찾을 수 없음), 500(내부 서버 오류) 등이 있습니다.

6. 확장 가능성: HTTP는 확장 가능한 프로토콜입니다. 요청과 응답의 헤더를 사용하여 추가적인 정보를 전송하거나, 사용자 정의 헤더를 정의하여 기능을 확장할 수 있습니다. 또한 HTTP/2, HTTP/3와 같은 새로운 버전이나 다른 프로토콜과의 조합을 통해 성능과 보안을 개선할 수 있습니다.

이러한 특징들은 HTTP를 효율적인 웹 통신을 위한 핵심 프로토콜로 만들었으며, 웹서비스의 기반 기술로 널리 사용되고 있습니다. 그러나 HTTP는 보안성과 상태 관리 등 몇 가지 한계를 가지고 있어, 이러한 한계를 보완하기 위해 보다 안전하고 효율적인 프로토콜인 HTTPS, REST, GraphQL 등이 개발되고 사용되고 있습니다.

인증 / 보안

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

• Cookie의 MaxAge, Expires
  : Cookie의 'MaxAge'는 쿠키의 만료 시간을 초 단위로 설정하는 속성
  :'Expires'는 쿠키의 만료 날짜를 명확하게 설정하는 속성
  -> 이 두 속성을 설정하지 않으면, 브라우저가 닫히는 순간 쿠키가 삭제됩니다.
  -> 이를 '세션 쿠키'라고 부릅니다.
  -> 반대로, 이 속성들을 설정하면 브라우저가 닫혀도 쿠키가 유지됩니다. 이를 '영속 쿠키'라고 부릅니다.