c h e c k

섹션 3 / 기술면접 답변

hee.hee 2022. 7. 20. 13:57

https://www.notion.so/3-b174c638d62c40c6a169ed02c6f93447

 

재귀를 활용하기 좋은 상황

주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우,

중첩된 반복문이 많거나 반복문의 중첩횟수를 예측하기 어려운 경우에 사용하여 코드를 간결하게 만들 수 있습니다.

예시)

 

 

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

UI는 사용자 인터페이스라는 뜻으로, 사용자가 컴퓨터와 상호작용하는 시스템을 말합니다. 마우스, 키보드, 모니터 등 컴퓨터와 의사소통할 수 있는 모든 것이 UI라고 할 수 있으며 특별히 프론트엔드 개발에서는 UI를 그래픽 인터페이스, GUI라고 봐도 무방합니다.

UX는 사용자 경험이라는 의미로, 사용자가 시스템, 제품, 서비스를 직간접적으로 이용하며 느끼는 총체적 경험을 말합니다. 제품과 관련된 모든 경험이 UX에 영향을 미치므로 UI가 UX 포함된 개념이라 할 수 있습니다. 때문에, 프론트엔드 개발자로서 좋은 UI로 사용자 경험을 향상시킬 수 있습니다.

 

 

Custom Component

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

스타일드 컴포넌츠는 CSS in JS 라이브러리 중 하나로, 스타일드 컴포넌츠를 사용하면 HTML, CSS, JS 를 한 컴포넌트 단위로 묶어서 개발할 수 있습니다.

1. 따라서 class, id 이름이나 스타일 속성이 겹칠 일이 없습니다. 

2. 스타일 속성에 props에 따른 조건부 코드를 작성할 수 있습니다.

3. 컴포넌트 단위로 개발하기 때문에 직관적이며, 해당 컴포넌트를 다른 프로젝트에서 사용할 수 있습니다.

 

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

useRef를 사용하면 DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있습니다.

구체적인 상황을 예로 들자면, 화면이 렌더링 되고 자동으로 로그인 input에 포커스 되어 있는 상황에서 쓰일 수 있습니다.

useEffect의 콜백 함수에 ref를 focus 메서드와 함께 할당하고 종속성 배열을 비어둡니다. 접근하고자 하는 요소의 속성으로 ref를 전달하면 첫 마운트 할 때 해당 요소에 포커스가 들어가 있게 됩니다.

 

이렇게 DOM 요소에 접근할 수 있는 useRef를 사용해, 입력값을 읽어올 수도 있습니다. 하지만 useRef 를 남용하는 것은 부적절하고, React의 특징이자 장점인 선언형 프로그래밍 원칙과 배치되기 때문에, 조심해서 사용해야 합니다.

 

 

Redux

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

리덕스를 사용하면 전역 상태 저장소를 사용해 단일출처 원칙을 지킬 수 있으며, props drilling 이슈를 해결할 수 있습니다.

데이터의 단방향 흐름 원칙을 깨지 않고, 데이터를 주고받기 위해 불필요한 과정을 거치지 않아도 됩니다.

리덕스는 전역 상태 관리 저장소인 store를 제공하기 때문에 컴포넌트와 상태를 분리하여, 앱 전반에 영향을 주는 상태를 전역상태를 store로 관리할 수 있습니다. 또, 어느 컴포넌트에서든 store에 접근할 수 있기 때문에 리액트에서의 데이터 단방향 흐름 원칙을 지키는 동시에 props drilling 이슈가 해결됩니다.

 

리액트에서는 데이터의 단방향 흐름 원칙을 지키기 위해 필요한 데이터를 하위 컴포넌트에 직접 보낼 수 없고, props를 이용해야 합니다. 하지만, 데이터 전달만을 위해 여러 컴포넌트에 거쳐 props를 내려주는 것은 비효율 적이며 번거롭습니다. 이러한 현상을 props drilling이라고 합니다. 리덕스를 사용하면 props drilling  현상을 해결할 수 있으며,  리액트 상태관리 라이브러리인 리덕스는, 컴포넌트와 상태를 분리하여, 전역 상태를 관리할 수 있는 저장소인 store를 제공합니다. 따라서 다른 컴포넌트를 거치지 않고도 바로 특정 컴포넌트에 데이터를 전달할 수 있습니다. 

 

 

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

리덕스의 주요 개념으로는, Action, Dispatch, Reducer, Store가 있습니다.

데이터 흐름의 순서대로 말씀드리자면,

컴포넌트에서 상태를 변경시키는 이벤트가 발생하면 변경될 정보가 담긴 Action 객체가 만들어집니다.

이 Action 객체가 Dispatch 함수의 인자로 전달됩니다.

그럼 Dispatch 함수가 Action 객체를 Reducer 함수로 전달해줍니다.

Reducer 함수는 Action 객체의 값으로 전역상태 저장소인 store의 상태를 변경합니다.

그럼 상태가 변경되어 화면이 다시 렌더링됩니다.

 

 

 

 

웹 표준 & 웹 접근성

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

개발자간 소통, 검색 효율성, 웹 접근성을 위해 semantic한 HTML 요소를 사용해야 합니다.

여러 개발자와 협업을 위해서는 div나 sapn 같은 요소 보다는, 요소의 이름만 보고도 기능을 파악할 수 있도록 시맨틱한 태그 이름을 사용해야 합니다.

또, 검색엔진은 HTML 코드를 보고 문서의 구조를 파악하기 때문에 시맨틱한 요소를 사용하면 <div> 와 <span> 만 사용한 문서들 보다 검색 결과에서 우선 순위가 높습니다.

마지막으로, 웹 접근성을 시맨틱한 요소를 잘활용하면, 나이와 성별, 장애여부, 사용환경을 떠나 동일한 수준의 정보를 제공할 수 있어야 함을 의미합니다. HTML이 시맨틱 요소로 잘 짜여져 있다면, 스크린 리더를 사용하는 시각 장애인에게 화면 구조에 대한 정보까지 추가로 전달해줄 수 있어 사용자가 콘텐츠를 좀 더 정확하게 받아들일 수 있습니다.

 

 

 

 

네트워크 심화

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

IP 프로토콜은 패킷을 받을 대상이 없거나 서비스 불능 상태여도 패킷을 전송한다는 점에서 비연결성이라는 한계가 있습니다.

도, 중간에 패킷이 사라질 수 있으며 패킷의 순서를 보장할 수 없기 때문에 비신뢰성을 가집니다.

ㅣㅇ유도 같이 말해주면 좋게싿.

패킷의 유실?? 라우터의 경로를 지나면서 유실이 될 수 있다. 해결 방법이 있긴 하다. 헤더에 순서를 넢

 

 

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

첫째, HTTP 프로토콜은 클라이언트가 서버에 요청을 보내면 응답을 돌려주는 클라이언트 서버 구조로 이루어져 있습니다.

둘째, 무상태 프로토콜이며 비연결성을 가집니다.

서버가 클라이언트의 상태를 보존하지 않는 것을 무상태 프로토콜이라고 합니다. 서버 확장성이 높다는 장점이 있지만 유저의 상태를 유지해야하는 서비스의 경우 브라우저 쿠키, 서버 세션, 토큰 등을 이용해 상태를 유지해야 합니다.

또, HTTP에서는 실제로 요청을 주고받을 때만 연결을 유지하고 응답을 주고 나면 TCP/IP 연결을 끊습니다. 서버 유지에 필요한 자원을 최소화 할 수 있지만 규모가 큰 서비스의 경우 리소스를 보낼 때마다 연결하고 끊기를 반복하기 때문에 비효율적이라는 한계가 있습니다.(지속연결로 해결)

이 외에도 HTTP 메세지를 통해서 요청과 응답을 주고받으며, 무상태 프로토콜이기 때문에 단순하고 확장성이 높다는 특징이 있습니다.

 

 

  • 캐시 검증 헤더의 종류와 사용법에 대해서 설명해주세요.

캐시 검증은 캐시 유효시간이 지났지만 변경이 없기 때문에 해당 데이터를 써도 되는 상황이라면 이를 검증하고 사용하는 방법입니다.

각 헤더의 역할을 설명하기 

Last-Modified와 If-Modified-Since, ETag와 If-None-Match 검증 헤더가 있습니다.

Last-Modified는  데이터가 마지막으로 수정된 시간 정보를 헤더에 포함합니다. 이로 인해 응답 결과를 캐시에 저장할 때 데이터 최종 수정일도 저장됩니다. 그리고, 이 때 서버의 해당 자료의 최종 수정일과 비료해서 데이터가 수정이 안되었을 경우 응답 메세지에 이를 담아서 알려줍니다.

 

 

 

 

인증 / 보안

  • Hashing에 대해서 설명해주세요.

암호화 키가 어떤 방법으로든 공개가 되면 얼마든지 모든 정보가 노출될 수 있습니다. 이를 해결하기 위해 해시 함수를 사용해 암호를 다시 해시로 변환하는 것을 해싱이라고 합니다. 간단하게, 어떠한 문자열에 '임의의 연산'을 적용하여 다른 문자열로 변환하는 것이라 할 수 있습니다.

//

해싱에서 지켜져야 할 점은,

1. 모든 값에 대해 해시 값을 계산하는데 오래걸리지 않아야 한다.
2. 최대한 해시 값을 피해야 하며, 모든 값은 고유한 해시 값을 가진다.
3. 아주 작은 단위의 변경이라도 완전히 다른 해시 값을 가져야 한다.

 

 

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

maxage / expires - 쿠키의 유효기간 설정 브라우저가 닫힐 때 쿠키도 함께 삭제됩니다.