예상질문

한 번 들었을 때, 이해하기 쉬운 답변인가요?
해당 개념 설명이 간단 명료한가요?
개념 설명과 예시가 단순 암기가 아니라 자신의 언어로 충분히 풀어 설명 되었나요?
두괄식으로 개념을 설명하고, 그에 따른 예시를 풀어서 설명하고 있나요?

재귀

• 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해주세요.
  재귀는 자기 자신을 호출하는 함수로서, 반복적인 작업을 해야하는 문제를 풀 때 활용하기 좋습니다.
  구체적으로, 중첩된 반복문이 많아서 계속 파고들어가야 하거나, 어떤 큰 문제가 있을때, 이를 비슷한 구조의 더 작은 문제로 쪼갤 수 있는 경우 재귀를 사용하는데요,
  실례로, 트리 구조를 가진 자바스크립트 객체나 JSON에 재귀를 사용합니다.

  • 트리 구조?
    트리 구조란 노드들이 나뭇가지처럼 연결된 계층적인 구조로, 트리 내에 하위트리가 있고 그 하위 트리 안에 또 다른 하위트리가 있는 재귀적 자료구조를 말합니다.
    자바스크립트 객체와 JSON은 (객체의 값으로 객체를 갖는 구조)이기 때문에 재귀 탐색을 할 수 있습니다..

💡 참고 트리 구조

UI/UX

• UI, UX의 개념과 두 개념의 관계에 대해서 설명해주세요.
  UX는 사용자 경험으로, 사용자가 어떤 제품이나 서비스를 이용하면서 느끼고 생각하는 총체적 경험을 말하는데요. 이때 제품과 관련된 모든 요소, 즉, 광고, 접근성, 사후 처리 등 모든 요소가 UX에 영향을 줍니다.

  이 UX에 영향을 주는 요소 중에 하나가 바로 UI 입니다.
  UI는 사용자 인터페이스로서 사용자가 컴퓨터와 정보를 교환하는 작업 환경을 말하는데요. 쉽게 말해, 어떤 앱을 눌렀을때 사용자가 보는 그 화면이 바로 UI라고 할 수 있습니다.

  즉, UX가 UI를 포함하는 개념인데요.
  일반적으로 UI의 형태에 따라 UX가 결정되는 경우가 많긴 하지만,
  좋은 UI가 항상 좋은 UX를 보장하지는 않습니다.

  계산기 예시를 든다면, 디자인이 이쁜데 계산기의 기본기능을 충족하지 못하는 경우, 좋은 ui가 좋은 ux를 보장하지 않는 경우라고 볼 수 있습니다.
  디자인은 예쁘진 않은데 계산기 기본기능을 제대로 제공하는 경우를
  좋은 ux가 좋은 ui를 의미하지 않는 경우라고 볼 수 잇습니다.

Custom Component

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

• useRef가 필요한 상황을 예시를 들어 설명해주세요.
  useRef는 특정 DOM 엘리먼트를 직접 건드리고자 할때 사용합니다.

  예를 들어, 타자연습 기능을 구현한다고 할때, innput 입력창 3개가 있다면, a입력창에 타자를치고 엔터키를 눌렀을때 b입력창으로 focus가 가도록. b입력창에 타자를치고 엔터키를 눌렀을때 c입력창으로 focus가 가도록. 하는 기능을 useref를 통해 구현할 수 있습니다.

  뿐만아니라 useRef를 통해 값을 저장하면, 리렌더링 되어도 값이 초기화가 되지 않습니다. 따라서 렌더링이 되든말든 값을 유지하고 싶을때 useRef를 사용하기도 합니다.

Redux

• 상태관리 라이브러리의 필요성에 대해서 설명해주세요.
  상태관리 라이브러리는 전역상태를 관리하기 위해서 사용합니다.

  즉, 여러 컴포넌트에 영향을 받는 전역상태를 하나의 저장소에서 관리함으로서, 데이터 무결성 원칙을 준수할 수 있고, 컴포넌트와 상태 변경 로직를 분리 함으로서, 데이터 흐름이 보다 깔끔해집니다.

  이러한 이점으로 인해 상태관리 라이브러리를 사용합니다.

  • 데이터 무결성 원칙이란 "동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다". 즉, 데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정에 제한을 데이터 상태들을 항상 옳게 유지하는 것에 대한 원칙입니다.

• Redux의 주요 개념들과 연결 관계를 설명해주세요.
  Redux는, 크게 4가지 개념을 가지고 상태를 관리한다고 볼 수 있습니다.
  Action → Dispatch → Reducer → Store 순서로 상태가 관리되는데요.

  예를 들어서, 유저가 장바구니에 이미 담아두었던 과자를 한봉지 더 시키기 위해 + 버튼을 눌렀을때, 상태가 변경하는 이벤트가 발생한 것이고, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성이 됩니다.

  그리고 이 Action 객체는 Dispatch 함수의 인자로 전달되고,
  Dispatch 함수는 Action 객체를 Reducer 함수에 전달해줍니다.
  Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경합니다.
  상태가 변경되면, 화면이 다시 렌더링되고 상태가 변경됩니다.

웹 표준 & 웹 접근성

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

네트워크 심화

• IP 프로토콜의 한계에 대해서 설명해주세요.
• HTTP 프로토콜의 특징에 대해 설명해주세요.
• 캐시 검증 헤더의 종류와 사용법에 대해서 설명해주세요.

인증 / 보안

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

---

피드백

• 면접관: "Redux"에 대해 아시나요?, 상태관리 어떻게 하세요?
  • 진의: '너 Redux 알고 쓰니?'
  • 좋은답변1 : 제가 프로젝트의 oo부분에서 프롭스로 상태를 내려줄때, 상태가 변경이 잘 안됐습니다. 그래서 redux를 사용했더니 전역상태 관리가 잘 되었습니다. 하나의 저장소에서 상태를 관리하다보니 데이터 흐름도 더 깔끔해지는 효과를 얻었습니다.
  • 좋은답변2 : 리코일은 이런점도 있긴 하지만, 리덕스의 이런점이 제 프로젝트에 더 적절하다고 판단하여, 리덕스를 사용했습니다. 예를들어, ooo프로젝트에서 oo기능을 구현하는데 ~ 리덕스의 이런 부분을 사용하여 문제를 해결했습니다.

💡 어떤 질문이든 프로젝트에 연결이 된다.
💡 내가 이 부분에서 이 라이브러리를 왜 썼는지 간단명료하게 말하자
💡 오류를 해결한 경험이 녹아든 답변이면 금상첨화
-> 면접관이 "얘가 진짜로 써봤구나" 느낄 수 있는 답변을 하자.
💡 면접관은 완벽한 사람을 뽑는게 아니라 내가 데려와서 키울 사람을 뽑는거임

---

레퍼런스

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

재귀를 활용하기 좋은 상황은 크게 두 가지가 있습니다.

첫 번째는 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우입니다. 예시로는 피보나치 수열의 n번째 수를 구하는 문제가 있습니다. 피보나치 수열의 n번째 수는 n-1번째 수와 n-2번째 수를 합한 값입니다. 몇 번째 수를 구하든 동일한 구조의 작은 문제로 나눌 수 있는 구조인 것입니다. 이런 상황에서 재귀를 활용하면 간결한 코드로 문제를 해결할 수 있습니다.

두 번째는 중첩된 반복문이 많거나 반복문의 중첩 횟수를 예측하기 어려운 경우입니다. 예시로는 객체를 문자열로 바꾸는 함수가 있습니다. 객체는 배열이나 객체도 담을 수 있으며, 얼마나 중첩되어 있을지 예측하기 어렵기 때문에 반복문을 사용하기에는 적합하지 않습니다. 이럴 때 재귀를 활용하면 가장 깊은곳에 있는 배열이나 객체까지 확인할 수 있습니다.

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

UI는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미합니다. 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있으나, 프론트엔드 개발자로서의 UI는 보통 화면상의 그래픽 요소인 GUI를 의미합니다.

UX는 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험을 의미합니다. 제품, 서비스 그 자체에 대한 경험은 물론, 홍보, 접근성, 사후 처리 등 직간접적으로 관련된 모든 경험을 사용자 경험이라고 할 수 있습니다.

UX는 UI를 포함합니다. 또한 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않습니다. 하지만, 나쁜 UI는 보통 나쁜 UX를 유발합니다. 프론트엔드 개발자는 UI를 개선함으로써 UX를 개선할 수 있으며, UX가 좋지 않은 곳에서 UI 개선점을 찾아낼 수도 있습니다.

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

Styled Components는 CSS 파일을 따로 작성할 필요 없이 컴포넌트 단위로 스타일 속성을 작성할 수 있게 해주는 라이브러리입니다.

CSS 파일을 따로 작성할 필요가 없기 때문에 크게 세 가지 장점을 느낄 수 있습니다.

첫째, class, id 이름을 짓느라 고민할 필요가 없습니다. CSS 파일을 따로 작성해야 할 때에는 스타일을 적용할 요소를 특정하기 위해서 class와 id를 작성해야 했습니다. 하지만 Styled Components를 사용하면 CSS 코드가 작성된 컴포넌트가 곧 스타일을 적용할 컴포넌트이기 때문에 class와 id를 사용해서 요소를 특정하지 않아도 됩니다.

둘째, CSS 파일에서 내가 원하는 부분을 찾기위해 시간을 쓰거나 길어진 CSS 파일을 쪼개서 관리할 필요가 없어졌습니다. 앞서 말했듯 Styled Components를 사용하면 애초에 CSS 파일을 작성할 필요가 없기 때문에 CSS 파일을 관리할 필요도 없어졌습니다.

셋째, 스타일 속성이 겹쳐서 내가 원하는 결과가 나오지 않는 일이 줄어들었습니다. CSS 파일을 작성하다보면 같은 종류의 요소에 같은 종류의 스타일 속성을 작성하게 되는 일도 생겼고, 이럴 때에는 뒤에서 작성된 속성이 적용되면서 내가 의도한 바와는 다른 화면이 나오기도 했습니다. 하지만 Styled Components는 컴포넌트 단위로 스타일 속성을 작성하기 때문에 속성이 겹치는 일이 없었습니다.

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

useRef는 특정 요소의 DOM 주소값을 가져오는 React Hook입니다.

React는 기본적으로 DOM에 직접 접근하는 것을 금지하고 있습니다. React는 가상 DOM을 사용해서 SPA를 구현하기 때문에, DOM을 직접 조작하는 것은 React의 작동 방식과도 맞지 않고, 원하는 결과가 나오지 않을 수도 있기 때문입니다.

그럼에도 DOM에 직접 접근해야하는 예외 상황들이 있습니다. 바로 DOM 엘리먼트의 주소값을 활용해야 하는 경우로, 가장 대표적인 예시는 특정 요소에 포커스를 설정해야하는 상황이 있습니다. 이럴 때 useRef를 사용해서 DOM 주소 값을 받아와 사용할 수 있습니다.

하지만 앞서 말했듯 DOM에 직접 접근하는 것은 React의 작동 방식과 맞지 않기 때문에, 이런 예외적인 상황을 제외하고는 useRef를 사용하거나 DOM에 직접 접근해서는 안 됩니다.

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

Redux와 같은 상태관리 라이브러리는 전역 상태 저장소를 제공해줍니다.

기존의 React에서는 자식 컴포넌트에 props를 내려줘서 상태를 전달해줬습니다. 이 경우에는 해당 상태를 사용하지 않는 컴포넌트들도 오로지 상태를 전달해주기 위해서 props를 받아야 했고, 이를 props drilling이라고 합니다.

상태 관리 라이브러리는 전역 상태 저장소를 제공해줌으로써 이 props drilling 문제를 해결해줍니다. 전역 상태 저장소가 있다면 props를 내려줄 필요없이 바로 이 저장소에 접근해서 필요한 상태를 가져다 사용하면 되기 때문입니다.

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

Redux의 주요 개념으로는 Action, Dispatch, Reducer, Store가 있으며, Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐르게 됩니다.

Action은 말 그대로 어떤 액션을 취할 것인지 정의해 놓은 객체입니다. 해당 Action 객체가 어떤 동작을 하는지 명시해주는 type 속성을 가집니다.

Dispatch는 Reducer로 Action을 전달해주는 함수입니다. Dispatch의 전달인자로 Action 객체가 전달되며. Action 객체를 전달받은 Dispatch 함수는 Reducer를 호출합니다.

Reducer는 Dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수로, Reducer가 리턴하는 값이 새로운 상태가 됩니다. 이 때, Reducer는 순수함수여야 합니다. 외부 요인으로 인해 기대한 값이 아닌 엉뚱한 값으로 상태가 변경되는 일이 없어야하기 때문입니다.

Store는 Redux의 전역 저장소로, Redux 앱의 state가 저장되어 있는 오직 하나뿐인 저장소의 역할을 합니다.

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

Semantic HTML은 말 그대로 의미있는 HTML로, HTML이 구조를 만드는 것을 넘어 의미를 갖게 만드는데 필요합니다. 시맨틱 요소의 예시로는 <header>, <main>, <nav>, <footer> 등이 있습니다.

HTML에는 많은 종류의 요소가 있지만, <div>와 <span> 두 가지 요소만 알아도 충분히 화면의 구조를 만들 수 있습니다. 하지만, 이 두 요소의 이름에는 의미가 없기 때문에 요소의 이름으로는 각 요소가 어떤 역할을 하는지 알 수 없습니다. 하지만 시맨틱 요소를 사용하면 요소의 이름만 보고도 해당 요소가 어떤 역할을 하는지, 요소가 가진 의미를 통해 파악할 수 있게 됩니다.

시맨틱한 HTML을 작성하면 개발자간 소통, 검색 효율성, 웹 접근성에 효과를 볼 수 있습니다.

요소의 이름만 봐도 의미를 파악할 수 있기 때문에 그만큼 의미를 전달하기 위한 시간과 id, class 작성에 필요한 시간 소모도 줄어들고 개발자간 소통이 원활해집니다.

또한 검색 엔진은 HTML 코드를 보고 문서의 구조를 파악하기 때문에 시맨틱 요소를 사용함으로써 HTML에 의미를 부여하는 것만으로도 검색 효율성을 높일 수 있습니다.

마지막으로 시맨틱 요소를 사용하면 화면의 구조를 짜는 것을 넘어 구조에 대한 정보를 전달할 수 있어 요소에 담긴 콘텐츠도 더 명확하게 전달할 수 있으므로 웹 접근성을 향상시킬 수 있습니다.

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

IP 프로토콜의 한계로는 비연결성, 비신뢰성이 있습니다.

인터넷 프로토콜(IP)는 패킷 단위로 통신하며, IP 패킷은 소포처럼 출발지 IP 주소, 목적지 IP 주소 정보를 포함하고 있습니다. 패킷은 한 번 전송되면 목적지에 도착할 때까지 인터넷 망의 수 많은 노드를 지나게 됩니다.

이 때, 패킷을 받을 대상이 없거나 서비스 불능 상태여도 클라이언트는 서버의 상태를 파악할 방법이 없기 때문에 패킷을 그대로 전송하게 됩니다. 이걸 비연결성이라고 합니다.

또한 데이터를 전달하던 중 장애가 생겨 패킷이 중간에 소실되더라도 클라이언트는 이를 파악할 방법이 없습니다. 목적지에서도 패킷의 순서가 바뀌거나 소실된 상태로 도착할 수 있습니다. 이걸 비신뢰성이라고 합니다.

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

HTTP는 클라이언트가 서버에 요청을 보내면 서버는 그에 대한 응답을 보내는 클라이언트 서버 구조로 이루어져 있으며, 무상태성, 비연결성이라는 특징을 갖습니다.

무상태성은 서버가 클라이언트의 상태를 기억하지 않는다는 뜻입니다. 즉, 상태 기억의 주체가 클라이언트가 된다는 말이며, 중간에 요청을 처리하는 서버가 바뀌어도 클라이언트가 상태를 잘 담아서 요청을 보내면 응답을 제대로 받을 수 있습니다. 서버가 바뀌어도 응답에 문제가 없다는 뜻은, 필요에 따라 서버를 무한히 증설할 수 있다는 의미입니다. 즉, 무상태성이라는 특성 덕에 서버의 무한한 증설이 가능해집니다.

비연결성은 요청과 응답을 주고 받은 후에 서버와의 연결을 끊는 것을 의미합니다. 서버와의 연결을 지속하지 않고 필요할 때에만 연결하기 때문에 최소한의 자원만 사용하게 된다는 장점이 있습니다. 하지만 HTTP 1.0 버전은 여러 요청을 보내야 할 때에도 매 요청마다 서버 연결과 종료를 반복하는 비효율성이 발생한다는 한계가 있습니다. 이러한 한계점을 HTTP 1.1 버전에서는 지속 연결과 파이프라인, HTTP 2.0 버전에서는 멀티플렉싱을 활용해서 해결합니다.

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

캐시는 다운로드 받은 데이터나 값을 미리 복사해 놓는 임시 장소를 뜻하며, 데이터에 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용합니다.

이 때, 캐시에 있는 데이터나 값을 재사용해도 되는지 확인하는 헤더를 캐시 검증 헤더라고 하며, 캐시 검증 헤더에는 last-modified와 etag가 있습니다. 조건부 요청 헤더인 If-Modified-Since, If-None-Match와 함께 사용됩니다.

If-Modified-Since는 캐시된 리소스의 Last-Modified 값 이후에 서버 리소스가 수정되었는지 확인하고, 수정되지 않았다면 캐시된 리소스를 사용합니다.
If-None-Match는 캐시된 리소스의 ETag 값과 현재 서버 리소스의 ETag 값이 같은지 확인하고, 같으면 캐시된 리소스를 사용합니다.

보통 두 종류의 캐시 검증 헤더와 조건부 요청 헤더를 동시에 사용합니다. 두 종류의 헤더 중 하나만 사용했다가 매칭되는 헤더가 없는 경우에는 재사용할 수 있는 경우에도 리소스를 다시 받아와야 하는 경우가 생길 수 있기 때문입니다.

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

해싱은 임의의 문자열을 넣었을 때 항상 같은 길이의 문자열을 리턴하는 해시함수를 사용해 암호화하는 것을 뜻합니다.
(길이 10짜리 문자열을 반환하는 해시함수라면, 길이 3 문자열을 넣어도 길이 13 문자열을 넣어도 길이 10짜리 문자열을 리턴합니다.)
보통 비밀번호를 암호화하여 저장할 때 많이 사용하며, 복호화가 불가능한 단방향 암호화이기 때문에 데이터 소유자도 사용자의 비밀번호를 알 수 없습니다.

해싱은 동일한 문자열에 동일한 해시 함수를 사용하면 항상 같은 결과값이 나오고, 서로 다른 문자열에 동일한 해시 함수를 사용하면 반드시 다른 결과값이 나온다는 특성을 가집니다.

그런데 항상 같은 결과값이 나온다는 특성을 이용해 해시 함수를 거치기 이전의 값을 알아낼 수 있도록 기록해놓은 표인 레인보우 테이블이 존재합니다. 레인보우 테이블에 기록된 비밀번호의 경우에는 유출이 되었을 때 해싱을 했더라도 해싱 이전의 값을 알아낼 수 있으므로 보안상 위협이 될 수 있습니다.

이 때 활용할 수 있는 것이 솔트(Salt)입니다. 말 그대로 소금을 치듯 해싱 이전 값에 임의의 값을 더해 데이터가 유출 되더라도 해싱 이전의 값을 알아내기 더욱 어렵게 만드는 방법입니다.

솔트는 유저와 패스워드별로 유일한 값을 가져야 하며, 절대 재사용 되어서는 안됩니다. 또한 사용자 계정을 생성할 때와 비밀번호를 변경할 때마다 새로운 솔트를 사용해야 하며, 데이터 베이스의 유저 테이블에 함께 저장되어야 합니다.

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

Cookie는 HTTP 프로토콜의 비상태성을 보완하기 위한 수단으로, 브라우저에 데이터를 저장할 때 사용합니다. Cookie의 MaxAge 옵션은 쿠키를 얼마나 유지할 것인지, Expires 옵션은 언제 폐기할 것인지 지정하는 옵션입니다.

두 옵션을 동시에 설정하면 MaxAge가 더 높은 우선 순위로 적용됩니다. 이 두 옵션중 하나라도 설정하지 않으면, 해당 쿠키는 브라우저가 닫힐 때 폐기 됩니다. 따라서 쿠키를 빠르게 폐기하고 싶다면 옵션을 설정하지 않는 것이 좋고, 쿠키를 계속 사용하고 싶다면 두 옵션 중에 하나라도 설정해주는 것이 좋습니다.

이 때, 브라우저를 종료하면 삭제되는 임시 쿠키를 세션 쿠키(Session Cookie)라고 하고, 설정한 옵션만큼 사용가능한 쿠키를 영속성 쿠키(Persistent Cookie)라고 합니다.