반응형
Q. 재귀를 활용하기 좋은 상황
// Q. 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해 주세요.
A. 1. 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우
2. 중첩된 반복문이 많거나 반복문의 중첩 횟수(number of loops)를 예측하기 어려운 경우Q. UI / UX의 개념과 관계
// Q1. UI, UX의 개념과 두 개념의 관계에 대해서 설명해 주세요.
A. UI : User Interface | 사람들이 컴퓨터와 상호작용하는 시스템을 의미합니다.
UX : User Experience | 사용자가 어떤 시스템, 제품, 서비스를 직, 간접적으로 이용하면서 느끼고 생각하는 총체적 경험입니다.
UX > UI | UX는 UI를 포함합니다.
좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않습니다.
하지만, 나쁜 UI는 보통 나쁜 UX를 유발합니다.Q. Styled Components
// Q. Styled Components를 사용해 보면서 느낀 장점을 이야기해 주세요.
A. React와 CSS로 나뉘어 있었는 데 React와 Styled Components로 합쳐서 CSS를 컴포넌트화 시켜주니
원하는 부분을 찾는 데도 쉽게 찾을 수 있었고, class와 id 이름을 작성할 필요가 없었어서 편리하였습니다.Q. Redux의 필요성과 원칙
// Q1. 상태관리 라이브러리(Redux)의 필요성에 대해서 설명해주세요.
A. 1. 전역상태를 위한 저장소를 제공해줍니다.
2. props drilling 문제를 해결해줍니다.
3. 상태의 출처를 파악하기 쉬워지기 때문에 코드의 유지보수가 좋아집니다.
// Q2. Redux(상태관리 라이브러리)의 세 가지 원칙에 대해 설명해주세요.
A. 1) Single source of truth
- 동일한 데이터는 항상 같은 곳에서 가지고 와야 한다는 의미입니다.
즉, Redux에는 데이터를 저장하는 Store라는 단 하나뿐인 공간이 있음과 연결이 되는 원칙입니다.
2) State is read-only
- 상태는 읽기 전용이라는 뜻으로, React에서 상태갱신함수로만 상태를 변경할 수 있었던 것처럼,
Redux의 상태도 직접 변경할 수 없음을 의미합니다.
즉, Action 객체가 있어야만 상태를 변경할 수 있음과 연결되는 원칙입니다.
3) Changes are made with pure functions
- 변경은 순수함수로만 가능하다는 뜻으로,
상태가 엉뚱한 값으로 변경되는 일이 없도록 순수함수로 작성되어야 하는 Reducer와 연결되는 원칙입니다.
Q. Redux의 주요 개념과 동작 순서
// Q1. Redux의 주요 개념들과 연결 관계를 설명해 주세요.
A. Action : 말 그대로 어떤 액션을 취할 것인지 정의해 놓은 객체입니다.
Dispatch : Reducer에게 Action을 전달해 주는 함수입니다. Dispatch의 전달인자로 Action 객체가 전달됩니다.
Action 객체를 전달받은 Dispatch 함수는 Reducer를 호출합니다.
Reducer : Dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수이고,
순수함수이어야 합니다.
Store : 상태가 관리되는 오직 하나뿐인 저장소의 역할을 합니다.
// Q2. Redux 동작 순서에 대해 설명해주세요.
A. Redux에서는 Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐릅니다.
1. 상태가 변경되어야 하는 이벤트가 발생하면,
변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다.
2. 이 Action 객체는 Dispatch 함수의 인자로 전달됩니다.
3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해 줍니다.
4. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경합니다.
5. 상태가 변경되면, React는 화면을 다시 렌더링 합니다.Q. Semantic HTML의 필요성과 예시
// Q. Semantic HTML의 필요성을 예시를 들어 설명해 주세요.
A. 1) 검색엔진(SEO)이 Semantic element를 더 좋아하기 때문입니다.
2) 여러 개발자가 함께 작업할 때 <div> 요소를 탐색하는 것보다
의미 있는 코드 블록을 찾는 것이 훨씬 더 편리하기 때문입니다.
<div>와 <span> 요소로만 화면을 구성했을 때 보다,
semantic한 <header>, <nav>, <main> ... 를 사용하여 화면을 구성하였을 때
각 요소의 이름만 보고도 화면에서 어떤 역할을 하게 될지
그리고 어떤 내용을 담게 될지 보다 정확하게 알 수 있습니다.반응형
Q. IP 프로토콜의 한계
// Q. IP 프로토콜의 한계에 대해서 설명해 주세요.
A. 1) 비연결성: 수신자가 없거나, 서비스 불능 상태여도 전송됩니다.
2) 비신뢰성: 패킷이 유실되거나 차례대로 오지 않을 수 있습니다.
3) 비식별성: 같은 IP를 사용하는 어플리케이션 구분하지 못합니다.
Q. Request 객체
// Q. request 객체에 대해 설명해주세요.
A. request 객체는 클라이언트(사용자)의 요청 정보를 담고 있습니다.
웹 서버는 클라이언트로부터 요청을 받을 때, 이 요청의 세부 사항을 request 객체에 저장합니다.
주요 속성은 다음과 같습니다:
- HTTP Method: GET, POST, PUT, DELETE 등 클라이언트가 서버에 요청한 방식입니다.
- URL: 요청된 리소스의 경로입니다.
- Headers: 클라이언트가 전송한 HTTP 헤더 정보입니다. 여기에는 쿠키, 인증 정보, 사용자 에이전트, 호스트 등 다양한 정보가 포함됩니다.
- Body: POST나 PUT 요청 시 전송된 데이터입니다. 주로 폼 데이터나 JSON 형태로 전송됩니다.
- Query Parameters: URL에 포함된 쿼리 문자열입니다. 예를 들어, ?search=keyword와 같은 형태입니다.
- Cookies: 클라이언트가 전송한 쿠키 정보입니다.
Q. Response 객체
// Q. response 객체에 대해 설명해주세요.
A. response 객체는 서버가 클라이언트에게 보내는 응답 정보를 담고 있습니다.
서버는 클라이언트의 요청을 처리한 후, 그 결과를 response 객체에 담아 전송합니다.
주요 속성은 다음과 같습니다:
- Status Code: 응답의 상태를 나타내는 코드입니다. 200(성공), 404(찾을 수 없음), 500(서버 오류) 등이 있습니다.
- Headers: 서버가 전송하는 HTTP 헤더 정보입니다. 콘텐츠 타입, 쿠키, 캐시 제어 등의 정보를 포함합니다.
- Body: 서버가 클라이언트에게 보내는 데이터입니다. HTML, JSON, XML, 텍스트 등의 형식일 수 있습니다.
- Cookies: 클라이언트에 설정할 쿠키 정보입니다.Q. Cookie의 MaxAge, Expires
// Q. Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해 주세요.
A. 쿠키가 유효한 기간을 정하는 옵션입니다.
MaxAge : 쿠키가 유효한 시간을 초 단위로 설정하는 옵션입니다.
Expires : MaxAge와 비슷하지만 쿠키를 언제 폐기할 것인지 설정하는 옵션입니다.
이때 옵션의 값은 클라이언트의 시간을 기준으로 합니다.
이후 지정된 시간, 날짜를 초과하게 되면 쿠키는 자동으로 파괴됩니다.
MaxAge가 Expires 옵션보다 더 높은 우선 순위로 적용됩니다.
MaxAge와 Expires를 설정하지 않으면 브라우저 종료 시 해당 쿠키가 삭제됩니다.
기술 면접 준비(3)을 알아보는 시간이었습니다.
틀린 내용은 댓글로 알려주시면 감사하겠습니다.
반응형
