🖋️ Frontend 를 위한 면접 CS 지식 정리

Q. React 에서 상태관리 하는 방법?

• Answer

* 가벼운 애플리케이션의 경우 상태관리는 
  React 내장된 "useState" 와 "useContext" 로 충분합니다.

* 보다 복잡한 애플리케이션의 경우 상태관리는 
  전역 상태관리를 하기위해 Redux 또는 Recoil 라이브러리를 이용합니다.

Q. Redux 혹은 Recoil 을 통한 전역상태를 언제 어떻게 예시?

• Answer

1. 사용자 인증 상태, 토큰, 프로필 정보를 전역 상태로 저장
2. 전자 상거래에서 장바구니 기능, 여러 페이지에서 장바구니에 항목을
   추가하고 품목, 수량, 총 비용등 추가/제거/업데이트 쉽게 가능
3. 실시간 데이터 업데이트, 웹 소캣을 사용하는 경우 최신 정보로 자동 리렌더링

Q. React 의 라이프사이클에 대해?

• Answer

* Class 로 컴포넌트를 설계할 때

 [Mount]
 - constructor(props)
    컴포넌트가 마운트되기 전에 생성자 호출
    여기에서 상태를 초기화하고 이벤트 처리기를 바인딩
    
 - static getDerivedStateFromProps
    렌더링 직전에 호출, props 기반으로 상태를 설정할 때 사용
    
 - render()
    구성 요소를 DOM 으로 렌더링, 클래스 컴포넌트에서 유일 필요 메서드
    
 - componentDidMount()
    구성 요소가 마운트된 직후 호출됨
    네트워크 요청, 이벤트 리스너 추가 또는 구독 설정에 적함
 
 [Update]
 - static getDerivedStateFromProps(props, state)
    컴포넌트를 리렌더링 할 때마다 호출
    
 - shouldComponentUpdate(nextProps, nextState)
    구성 요소를 업데이트해야 하는지 여부를 결정
    false를 반환하면 다시 렌더링할 수 없음
 
 - render()
    새 props 또는 state로 UI를 다시 렌더링하기 위해 다시 호출
 
 - getSnapshotBeforeUpdate(prevProps, prevState)
    가상 DOM의 변경 사항이 DOM에 반영되기 직전에 호출
    componentDidUpdate 에 전달되는 값을 반환
  
 - componentDidUpdate(prevProps, prevState, snapshot)
    업데이트가 발생한 후 호출
    DOM 작업 또는 추가 네트워크 요청에 적합
 
 [Unmount]
 - componentWillUnmount()
    구성 요소가 DOM에서 제거되기 전에 호출
    타이머 무효화 및 이벤트 리스너 제거와 같은 정리 작업에 유용

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

* Function 으로 컴포넌트를 설계할 때
 
  - useState / useReducer
     기능 구성 요소의 상태를 관리
     
  - useEffect
     componentDidMount, componentDidUpdate, 
     componentWillUnmount 및 수명 주기 메서드가 결합된 용도로 사용

     > Mounting
      첫 번째 렌더링 후에 효과를 실행
      >> useEffect(() => { ... }, [])
         == componentDidMount
     
     > Update
      두 번째 인수가 없거나 종속성이 있는 경우 
      종속성이 변경된 모든 렌더링 후에 효과가 실행
      >> useEffect(() => { ... }, [deps])
        == componentDidUpdate
     
     > Unmount
      useEffect 정리, 효과에서 함수를 반환하면 
      정리를 수행할 수 있는 방법이 제공
      >> useEffect(() => {
  		 	// Setup code
  			return () => {
    			// Cleanup code
  			};
		}, []);
        == componentWillUnmount

Q. React 의 Hook 언제 어떻게 사용?

• Answer

• useState
  • 기능적 구성 요소에서 상태를 유지하고 설정해야 할 때마다

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

• useEffect
  • 데이터 가져오기
  • 구독 또는 DOM 수동 변경과 같은 기능 구성 요소의 부작용
  • comComponentDidMount, comComponentDidUpdate, comComponentWillUnmount를 결합

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }); 

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

• useContext
  • 컨텍스트의 현재 값에 액세스하고 해당 변경 사항을 구독
  • 프롭 드릴링을 방지하는 데 유용

import React, { useContext } from 'react';
import { ThemeContext } from './themeContext';

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

• useReducer
  • 여러 하위 값을 포함하는 더 복잡한 상태 로직의 경우
  • 다음 상태가 이전 상태에 따라 달라지는 경우
  • 리듀서에서 상태 로직을 관리하면 더 예측 가능해지기 때문에 편리

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </>
  );
}

• useCallback
  • 불필요한 렌더링을 방지하기 위해
  • 참조 동일성에 의존하는 구성 요소에서 불필요한 다시 렌더링을 방지하기 위해 콜백을 메모

import React, { useCallback, useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  const memoizedCallback = useCallback(
    () => {
      console.log(count);
    },
    [count], 
  );

  return <button onClick={memoizedCallback}>Log count</button>;
}

• useMemo
  • 비용이 많이 드는 계산을 메모하여 렌더링할 때마다 다시 계산되지 않도록 함

import React, { useMemo, useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  const expensiveValue = useMemo(() => {
    return computeExpensiveValue(count);
  }, [count]);

  return <div>{expensiveValue}</div>;
}

• useRef
  • 다시 렌더링하지 않고 렌더링 간에 값을 유지
  • DOM 요소를 직접 참조하는 데에도 사용

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

Q. SSR 에 대해서 설명/기능/효과 그리고 동작방식?

• Answer

@ 설명
  클라이언트(예: 웹 브라우저)의 탐색 요청에 대한 응답으로 
  서버의 페이지에 대한 전체 HTML을 생성하는 작업이 포함

  서버는 완전히 렌더링된 페이지를 클라이언트에 전송
  
  페이지 콘텐츠를 작성하기 위해 JavaScript를 
  먼저 실행할 필요 없이 페이지를 즉시 볼 수 있도록 함

@ 기능과 효과
  초기 로드 성능 / 검색 엔진 최적화(SEO) / 소셜 미디어 공유
  SEO 및 사용자 경험을 개선하기 위한 강력한 전략

@ 동작방식
  - 요청 : 사용자가 웹 페이지로 이동하거나 브라우저를 새로고침
  
  - 서버 처리 
     - 페이지를 렌더링하는 데 필요한 데이터를 준비
       여기에는 DB, 외부 API에서 데이터 가져오는 작업 포함
     - 서버 환경에서 페이지의 콘텐츠를 렌더링하는 데 필요한 애플리케이션 로직을 실행 
     - 서버는 앱의 초기 상태를 포함하여 페이지의 최종 HTML을 생성하여 클라이언트로 보냄
     
  - 클라이언트 렌더링
     - 클라이언트(브라우저)는 HTML을 수신하고 사용자에게 즉시 콘텐츠를 표시
     - 브라우저는 페이지와 연결된 JavaScript 파일을 다운로드
     - 페이지가 대화형이 되어 클라이언트측 프레임워크가 후속 탐색 
       또는 상호 작용을 대신할 수 있으므로 SPA 환경을 사용

Q. RestFul API 대해서?

• Answer

HTTP와 같은 웹 표준을 사용하여 API를 만드는 방법을 정의하는 일련의 원칙

상태 비저장 통신 프로토콜(주로 HTTP)을 사용하여 
인터넷 또는 다른 네트워크를 통해 서로 통신

> 클라이언트-서버 아키텍처
   클라이언트와 서버는 독립적으로 작동
   
> 상태 비저장 작업
   [클라이언트 => 서버] 의 각 요청에는 요청을 이해하고 
   완료하는 데 필요한 모든 정보가 포함하지만 저장 X
   
> 캐시 가능한 응답
   자신을 캐시 가능한지 또는 명시적으로 정의해야 함
   
> 균일한 인터페이스
   클라이언트와 서버 간의 인터페이스는 균일하고 표준화되어 
   아키텍처를 단순화하고 분리하여 각 부분이 독립적으로 발전

> 계층화된 시스템
   클라이언트는 일반적으로 최종 서버에 직접 연결되어 있는지 아니면 
   중간에 중개자에 연결되어 있는지 알 수 없음


GET: 리소스에 대한 정보를 검색합니다.
POST: 새 리소스를 만듭니다.
PUT: 기존 리소스를 업데이트합니다.
DELETE: 리소스를 제거합니다.
PATCH: 기존 리소스를 부분적으로 업데이트합니다.

장점 => 확장성, 단순성, 유연성 및 이식성, 가시성, 안전성

Q. HTTP 와 HTTPS 의 차이

• Answer

@ 공통점
  인터넷을 통해 정보를 전송하고 수신하는 데 사용되는 프로토콜

@ 차이점
  HTTP - 보안되지 않습니다. 
       - 즉, 클라이언트와 서버 간에 
         교환되는 데이터가 일반 텍스트로 전송
       - 이는 제3자가 쉽게 가로채서 읽을 수 있음
       - 기본 포트는 80
       
  HTTPS- 보안됨
       - 즉, 클라이언트와 서버 간에 
       - HTTPS는 TLS(전송 계층 보안) 또는 이전에는 SSL
         을 사용하여 통신을 암호화하는 HTTP의 보안 버전
       - 기본 포트는 443

Q. Cors-Header 의 설명과 어떻게 사용하는지

• Answer

@ Cors 정의
 하나의 원본(도메인)에서 실행되는 웹 애플리케이션이 다른 원본에서 
 리소스를 요청하는 것을 허용하거나 제한하는 메커니즘

@ Cors Header 는?
 다른 출처의 웹 애플리케이션이 리소스에 액세스하도록 
 허용하는 것이 안전하다는 것을 브라우저에 알리는 데 사용
 
 - Access-Control-Allow-Origin
    리소스에 대한 액세스가 허용되는 원본을 지정
    
 - Access-Control-Allow-Methods
    리소스에 액세스할 때 허용되는 메서드(GET, POST, DELETE 등)
    
 - Access-Control-Allow-Headers
    실제 요청 중에 사용할 수 있는 헤더를 지정
   
 - Access-Control-Allow-Credentials
    자격 증명이 있을 때 요청에 대한 응답이 노출될 수 있는지 여부를 나타냄
 
 > 사용법
 Node.js 의 Express 에서 
 'cors' 미들웨어를 사용하여 
 CORS 헤더를 쉽게 추가

Q. CSS 에서 Flex 와 Grid 설명하고 어떻게 사용?

• Answer

@ Flex 박스 vs Grid 박스
  - Flex 행 또는 열과 같은 단일 차원의 레이아웃 디자인에 이상적입니다. 
    응용 프로그램 내의 더 작은 레이아웃과 구성 요소에 적합합니다.
    
  - Grid 행과 열을 동시에 처리하는 2차원 레이아웃에 적합합니다. 
    전체 페이지 구조와 같은 더 큰 배율의 레이아웃에 유용합니다

Q. CSS 에서 가상 클래스와 가상 요소는?

• Answer

- 가상 클래스 및 가상 요소는 추가 마크업 없이 
  스타일을 향상할 수 있는 강력한 방법을 제공

- 불필요한 클래스나 JavaScript를 피함으로써 
  CSS를 깔끔하고 유지 관리 가능하게 유지

- 의사 요소 "::before" 및 "::after" 는 
  무엇이든 표시하려면 content 속성이 필요
  비어 있더라도(content: "") 선언 필요


가상 클래스와 가상 요소는 동적이고 반응성이 뛰어나며 
시각적으로 매력적인 웹 페이지를 만들기 위한 CSS의 기본 도구

이를 통해 개발자와 디자이너는 간단하고 우아한 솔루션으로 
복잡한 스타일링 효과를 얻을 수 있음

Q. 이벤트 버블링과 캡쳐링의 차이?

• Answer

@ 이벤트 버블링
  이벤트는 특정 대상 요소에서 시작하여 문서의 
  루트(일반적으로 document 객체)에 도달할 때까지 
  DOM 트리의 상위 요소를 통해 하나씩 버블링됩니다)
  
  즉, 대상 요소에 연결된 이벤트 핸들러가 먼저 실행되고 
  그 다음 상위 요소의 이벤트 핸들러가 루트까지 실행
  
@ 이벤트 캡처
  이벤트 버블링의 반대, 이벤트는 문서의 루트에서 시작하여 
  DOM 트리를 따라 대상 요소로 전파되어 내림차순으로 이벤트 핸들러를 트리거
  
  즉, 루트 요소의 이벤트 핸들러가 먼저 실행되고 
  그 다음 하위 요소의 이벤트 핸들러가 대상 요소까지 실행
  
@ 주요 차이점
   방향: 버블링은 대상에서 DOM 트리 위로 이동하고, 
        캡처는 대상을 향해 아래로 이동합니다.
   기본 동작: 버블링은 대부분의 브라우저에서 이벤트의 기본 단계
            캡처를 명시적으로 사용하도록 설정해야 합니다.
   사용 사례: 캡처는 이벤트가 특정 대상에 도달하기 전에 가로채는 데 유용한 반면
            버블링은 각 요소에 이벤트 리스너를 연결하지 않고 여러 중첩 요소의 이벤트를 
            처리하는 데 실용적입니다.

// For bubbling (default)
element.addEventListener('click', function(event) {
  // Handle the click event
}, false); // false or omitted specifies bubbling

// For capturing
element.addEventListener('click', function(event) {
  // Handle the click event
}, true); // true specifies capturing

Q. 공통 CSS 관리 하는 법?

• Answer

  • CSS 변수 사용
    • 색상, 글꼴 크기, 간격과 같은 전ㅇ역 값의 경우
      CSS 사용자 정의 속성 사용
      => 공통 스타일을 더 쉽게 유지하고 업데이트 가능

      :root {
         --primary-color: #007bff;
         --font-size: 16px;
      }

  • CSS 모듈화
    • "_header.css", "_footer.css" 모듈식 파일로 분할
  • 전처리기 사용
    • SASS, LESS 는 변수, 믹스인, 중첩 규칙과
      같은 기능 효과로 관리
  • CSS 프레임워크 활용
    • Bootstrap 또는 Tailwind CSS와 같은 프레임워크는
      일관된 기반과 구성 요소를 제공
  • BEM 방법론 구현
    • 명명 규칙을 사용하면 더 쉽게 HTML, CSS 이해 가능

Q. 페럴렉스를 어떻게 만들 수 있는지?

• Answer

@ 시차 효과를 만드는 방법
  - "background-attachment: fixed;" 사용해서 시차효과 생성

.parallax {
  background-image: url('image.jpg');
  height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Q. 시맨틱 HTML 태그 및 사용법

• Answer

  • <header>
    • 문서 또는 섹션의 헤더를 정의합니다.
  • <nav>
    • 사이트에 대한 탐색 링크가 포함되어 있습니다.
  • <main>
    • 문서의 주요 내용을 지정합니다.
  • <article>
    • 독립적으로 배포하거나 재사용할 수 있도록 의도된 문서, 페이지 또는 사이트의 독립적인 구성을 나타냅니다.
  • <section>
    • 장, 머리글, 바닥글 또는 문서의 기타 섹션과 같은 문서의 섹션을 정의합니다.
  • <footer>
    • 문서나 섹션의 바닥글을 지정합니다.
  • <aside>
    • 배치된 콘텐츠 이외의 콘텐츠를 표시합니다(예: 사이드바).

Q. CSS 에서 박스란

• Answer

  • class 와 id 차이는?

    • class 는 문서에서 여러번 재사용, 마침표 . 접두사로 사용
    • id 는 고유하며 문서의 단일 요소만 적용, 해시 # 접두사로 사용

  • 마진 과 패딩은??

    • 마진은 여백이며 테두리 외부 공간, 다른 요소를 테두리에서 밀어냄
    • 패딩은 요소 내부에서 콘텐츠와 테두리 사이 공간

  • css 상자 모델은?

    • 문서 트리의 요소에 대해 생성
    • 여백, 테두리, 패딩 및 실제 콘텐츠로 구성된 직사각형 상자

  • CSS에서 테두리 반경을 어떻게 생성?

    • border-radius 속성을 사용

  • CSS 애니메이션을 어떻게 만들 수 있나요?

    • @keyframes 규칙과 animation 속성을 사용하여 생성
    • animation 속성 내에서 애니메이션의 이름, 기간,
      타이밍 기능, 채우기 모드를 정의
    • @keyframes를 사용하여 애니메이션의 시작 및 종료 상태 표현 가능

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

.animate {
  animation: example 5s infinite;
}

Q. React 에서 Intersection Observer 에 대해서 알아보기

• Answer

* Intersection Observer API 는 대상 요소와 조상 요소 
  또는 뷰포트의 교차 변경 사항을 비동기적으로 관찰하는 방법을 제공

* 지연 이미지 로드 또는 무한 스크롤과 같은 작업에 사용

• 사용법
  • 관찰자 만들기
    • useEffect 사용하면 컴포넌트 마운트 될 때 관찰자 생성
    • Intersection Observer API 를 사용하여 관측된 요소의
      가시성이 변경될 때 콜백 지정
  • 관찰자를 요소에 연결
    • 관찰하려는 DOM 요소에 대한 참조를 가져오는데 useRef 를 사용
    • useEffect 내부 observer.observe(ref.current) 를 호출하여
      요소 관찰을 시작

import React, { useEffect, useRef } from 'react';

const LazyImage = ({ src, alt }) => {
  const imgRef = useRef();
  useEffect(() => {
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.src = src;
          observer.unobserve(entry.target);
        }
      });
    });
    if (imgRef.current) {
      observer.observe(imgRef.current);
    }
    return () => observer.disconnect();
  }, [src]);

  return <img ref={imgRef} alt={alt} />;
};

Q. React-Query 의 캐시사용과 stale & cache

• Answer

* 서버 상태를 가져오고, 캐싱하고, 동기화하고, 
  업데이트하기 위한 라이브러리

* API에서 가져온 비동기 데이터를 자동으로 
  캐시하고 필요한 경우 무효화

• stale-time
  • 캐시된 데이터가 부실한 것으로 간주될 때까지 시간
  • 오래된 데이터는 백그라운드 다시 가져오기를 트리거
  • "최신 상태" 로 유지되는 기간을 제어

useQuery('todos', fetchTodos, { staleTime: 5000 }) // 5 seconds

• cache-time
  • 캐시된 데이터가 비활성화된 후 메모리에 남아 있는 시간
  • 사용되지 않는 / 비활성 캐시 데이터가
    가비지 수집되기 전에 메모리에 남아 있는 기간을 지정
    

useQuery('todos', fetchTodos, { cacheTime: 30000 }) // 30 seconds

Q. var 사용의 문제, const 와 let 의 사용

• Answer

* var : 함수 범위, 변수 호이스팅으로 인해 예기치 않은 동작 발새 가능
  let : 블록 범뮈, 벙뮈 지정 문제 해결, 변경 가능
  const : 블록 버뮈, 재할당할 수 없지만 객체인 경우 해당 내용이 변경 가능 

Q. 사용자가 URL 검색할 때 브라우저 동작 (네트워크)

• Answer

  • DNS 조회, 도메인 이름을 IP 주소로 변환
  • TCP 연결, 서버에 대한 연결을 설정
  • HTTP 요청, 서버에 HTTP 요청을 전송
  • 서버 응답, 서버는 요청을 처리하여 HTTP 응다블 다시 전송
  • 렌더링, 브라우저는 HTML, CSS 및 JS 를 사용하여 콘텐츠 렌더링
  • PayLoad, 추가 자산(CSS, JS, 이미지) 요청되고 로드

Q. 콜스택과 이벤트 루프에 대해서 설명 (+ setTimeout)

• Answer

  • Call Stack (호출스택)

    • JS 프로그램에서 함수 실행 순서를 추적하는 데이터 구조
    • 스크립트가 함수를 호출하면 인터프리터는 이를 호출 스택에 추가 후 실행을 시작
    • 현재 함수가 완료되면 스택에서 제거되고 이전 스택 프레임에서 실행이 다시 시작
    • 이 프로세스는 빌 때까지 계속
      
      
    • LIFO 로 가장 나중에 호출된 함수부터 반환 (POP)

  • Event Loop (호출스택)

    • 단일 스레드 호출 스택이 있음에도 불구하고 JS가 비차단 비동기 작업을 수행
    • 호출 스택과 콜백 대기열을 모니터링하여 수행
    • 호출 스택이 비어 있으면 이벤트 루프는 큐에서 첫 번째 이벤트를 가져와
      호출 스택에 푸시하여 효과적으로 실행
      
      
    • 콜백 대기열은 실행을 기다리는 비동기 작업(예: 'setTimeout', AJAX 호출)의
      콜백을 보관하는 FIFO(선입선출) 대기열

• +@ setTimeout

* 지정된 지연 후 코드 실행을 비동기적으로 지연시키는 함수

* setTimeout을 호출하면 콜백 함수를 등록한 후 완료되어 
  호출 스택이 다음 작업을 계속 가능

* 지연 매개변수는 정확한 실행 시간을 보장하지 않지만 
  오히려 콜백이 실행될 수 있는 최소 시간을 보장