Section 3 마무리 - 기술 면접 질문

재귀

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

  • 재귀 함수는 자기 자신을 호출하는 함수를 의미합니다. 재귀를 활용하기 좋은 상황은 순환 알고리즘을 구현할 때이며, 재귀를 사용하면 코드가 간결해지고 이해하기 쉬워집니다.
    예를 들어 팩토리얼을 구현할 때, 재귀를 사용하면 n! = n * (n-1)!, n <= 1일 때 1을 리턴하는 식으로 코드를 작성할 수 있습니다.
    또 다른 예로 배열의 합을 구현할 때, arr[0] + sum(arr.slice(1))으로 재귀 함수를 호출하여 배열을 잘라나가면서 합을 구할 수 있습니다.
    예시로 든 것 처럼, 재귀를 활용하면 코드가 직관적으로 이해하기 쉽고, 복잡한 문제를 단순한 문제들로 분할하여 해결할 수 있기 때문에 알고리즘을 구현하는데 매우 유용한 기법입니다.

    하지만, 재귀 호출의 깊이가 너무 깊어질 경우 스택 오버플로가 발생할 수 있다는 점과, 재귀 호출이 무한 루프에 빠질 경우 프로그램이 멈출 수 있다는 점을 주의해야 합니다. 이러한 문제를 방지하기 위해선 재귀 호출에서 빠져나올 수 있도록 base case를 명확하게 정의해주어야 합니다.

UI/UX

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

  • UI는 사용자 인터페이스(User Interface)의 약자로, 사용자가 제품을 조작하고 상호작용을 하기 위한 모든 요소들을 의미합니다. 반면 UX는 사용자 경험(User Experience)의 약자로, 사용자가 제품을 사용하는 동안의 경험과 감정을 디자인하기 위한 것을 의미합니다.
    따라서 UI는 UX의 일부분이며 구체적인 화면, 제스처, 효과 등과 관련된 것이고, UX는 사용자의 전체적인 경험을 설계하고 개선하는 것을 다룹니다.

    UX 디자이너는 사용자의 요구와 목적을 파악하고 이를 바탕으로 UI를 디자인하여 최적의 사용자 경험을 제공하고자 합니다.

Custom Component

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

  • Styled Components는 React를 위한 CSS-in-JS 라이브러리 중 하나입니다. React 컴포넌트와 함께 사용되며, CSS 스타일을 작성할 때 JavaScript를 사용합니다. 이를 통해 컴포넌트 기반의 스타일링을 가능하게 하며, CSS를 작성하지 않아도 되기 때문에 코드가 더 깔끔해지고, CSS의 스코프 이슈를 피할 수 있습니다.

    또한 props를 통해 컴포넌트에 동적으로 스타일을 적용할 수 있기 때문에 재사용성이 높아지고 유지보수가 편리해집니다.

  • CSS의 스코프 이슈

    • CSS 스코프 이슈는 CSS 규칙이 어떤 요소에 적용되는지 결정하는 방법에 대한 문제입니다. CSS는 적용될 요소를 선택하는 데 사용되는 선택자를 포함합니다. 선택자는 요소의 클래스, ID, 태그 이름 등과 일치하는지 여부를 기반으로 적용될 요소를 결정합니다.

      그러나 선택자의 범위는 문제가 될 수 있습니다. 예를 들어, h1 요소에 컬러 속성을 적용시키는 코드를 작성했을 때, 이 코드는 페이지의 모든 h1 요소에 적용됩니다.

      만약 다른 부분에서 또 다른 스타일을 적용하고자 한다면 가장 간단한 방법은 다른 클래스나 ID를 사용하여 스타일을 변경하는 것입니다. 그러나 이 경우, 같은 요소에 대해 두 개 이상의 ID를 지정할 수 없습니다. 따라서 두 가지 이상의 스타일을 사용하려면, 더 많은 선택자를 사용해야 합니다.

      다른 해결책은 CSS의 범위를 제한하는 것입니다. 이를 위해 CSS 모듈, CSS-in-JS 라이브러리 등을 사용할 수 있습니다. 이러한 도구들은 CSS 규칙이 어떤 요소에 적용되는지를 더 명확하게 정의할 수 있도록 도와줍니다.

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

  • useRef를 사용하면 컴포넌트가 렌더링 될 때마다 새로운 ref 객체를 생성하지 않고, 같은 ref 객체를 유지할 수 있습니다.
    이는 클래스 컴포넌트의 인스턴스 변수와 유사한 역할을 하는데, 그 참조가 렌더링 사이에도 변경되지 않기 때문에 다음과 같은 경우에 유용하게 사용할 수 있습니다.

    1. DOM 노드에 접근하기: ref 객체는 .current 프로퍼티로 연결된 DOM 노드에 접근할 수 있습니다.
    2. class 인스턴스에 접근하기: ref 객체는 class 컴포넌트의 인스턴스에도 접근할 수 있습니다.
    3. 어떤 값이 변경되었는지 추적하기: ref 객체의 .current 값을 업데이트하여 컴포넌트 렌더링 없이 값을 저장하고 싶을 때 유용합니다.
    4. 애니메이션을 구현하기: 애니메이션을 구현하려면 컴포넌트가 렌더링 되는 동안에도 애니메이션의 진행 상태를 추적해야 합니다. ref 객체를 사용하면 이를 구현할 수 있습니다.

    useRef는 함수 컴포넌트에서도 클래스 컴포넌트의 인스턴스 필드에 접근할 수 있는 메커니즘을 제공하기 때문에 함수 컴포넌트에서도 상태를 유지하고, 렌더링을 건너뛰고, 자식 컴포넌트에게 조회할 수 있는 메서드를 제공할 수 있습니다.

Redux

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

  • 상태관리 라이브러리는 컴포넌트 간에 상태를 전달하고 공유할 수 있게 해주기 때문에 애플리케이션의 복잡성을 줄여줍니다.
    애플리케이션에서 사용되는 상태가 많아질수록 직접 props 들을 통해 상태를 전달하는 것은 Props drilling 문제 등이 발생하여 비효율적이고 유지보수를 어렵게 만듭니다.
    상태관리 라이브러리를 사용하면 애플리케이션의 모든 상태를 중앙에서 관리할 수 있기 때문에 이러한 문제를 해결할 수 있습니다.

    • 중앙 상태관리?

    중앙 상태관리란 어플리케이션의 상태(state)를 하나의 저장소(store)에 모아 놓고, 어플리케이션의 모든 컴포넌트가 이 store에 접근하여 state를 공유하는 방식을 말합니다.
    이러한 중앙 상태관리를 사용하면 다음과 같은 이점이 있습니다.

    1. 상태 변화를 쉽게 추적할 수 있다.
       • 모든 상태가 한 곳에 저장되어 있기 때문에 어디서 상태가 변경되었는지 쉽게 알 수 있습니다.
    2. 컴포넌트가 다양한 계층에 걸쳐 있더라도 쉽게 상태를 전달할 수 있다.
       • props drilling을 통해 상태를 전달할 필요가 없고 store에 접근하여 상태를 공유할 수 있습니다.
    3. 컴포넌트가 어떤 상태에 의존하는지 쉽게 파악할 수 있다.
       • store에 저장된 상태를 subscription하는 컴포넌트를 쉽게 찾을 수 있습니다.
    4. 상태 변화에 따른 컴포넌트 리렌더링을 최적화할 수 있다.
       • 상태가 업데이트 되었을 때 리렌더링 해야 하는 컴포넌트와 그렇지 않은 컴포넌트를 구분하여 리렌더링을 최적화할 수 있습니다.

    중앙 상태관리는 컴포넌트 간의 복잡한 상태 관리를 간소화시켜주고 유지보수를 쉽게 해주는 장점이 있습니다.
    그러나 모든 상태를 store에 저장하는 것이 언제나 좋은 것은 아니며, 상태가 컴포넌트 내에서도 잘 관리되고 있다면 중앙 상태관리를 적용할 필요가 없습니다.
    적절한 상태 관리법을 선택하는 것이 중요합니다.