1. "==" 와 "==="의 차이는 무엇인가요?

키워드

• ==는 동등 연산자, 자동으로 형변환, 데이터 타입이 다르면 True
• ===는 일치 연산자, 형변환 없음, 데이터 타입이 다르면 False

답변

• ==는 동등 연산자라고 합니다. 값을 자동으로 형변환 해줍니다
• 그래서 값은 같고 테이터 타입이 달라도 True를 반환합니다.
• ===는 일치 연산자입니다. 형변환이 없습니다.
• 그래서 값이 같고 데이터 타입이 다르면 False를 반환합니다.

2. 클로저란 무엇인가요?

import React, { useState } from 'react';

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

  function increment() {
    setCount(prevCount => prevCount + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

키워드

• 함수 안에 함수를 정의해서 만든 조합
• 함수가 렉시걸 스코프 밖에서 호출, 변수 접근 가능
• 리액트 함수 안에 set 상태관리 함수 쓰는게 예시

답변

• 클로저는 함수 안에 함수를 선언하여 만든 조합입니다.
• 함수 안에 함수가 렉시컬 스코프 밖에서 호출되어도 접근이 가능합니다.
• 리액트를 사용할 때, useState의 set상태관리함수를 특정 함수 안에 넣고 사용할 때, 클로저의 원리가 적용됩니다.

3. 클래스형 컴포넌트와 함수형 컴포넌트의 차이는 무엇일까요?

키워드

• 생명주기 다루는 방식 차이
• 클래스형은
  • this.state로 상태 정의하고 참조
  • componentDidMount 등으로 생명주기 다룸
• 함수형은
  • useState로 상태 정의하고 참조
  • useEffect로 생명주기 다룸

답변

• 두 개의 차이는 생명주기와 컴포넌트의 상태가 기준입니다.
• 클래스형은 ComponentDidMount 등으로 생명주기를 다루고
• this.state로 상태를 정의하거나 참조합니다.
• 함수형은 useEffect롤 생명주기를 다루고
• useState를 통해서 상태를 정의하고 참조합니다.

4. 이벤트 버블링에 대해서 설명해주세요

키워드

• 상위 요소 이벤트 전파
• 2번 이상의 이벤트를 실행 시키려고
• 하위 요소 이벤트 전파는 이벤트 캡쳐링
• stopPropagation() 이라는 메서드로 전파 중지

답변

• 이벤트 버블링은 특정 요소에 이벤트가 동작할 때, 상위 요소의 이벤트까지 전파합니다.
• 하나의 동작으로 2번 이상의 이벤트 발생시키기 위해서 사용합니다.
• 반대의 원리는 이벤트 캡쳐링이라는게 있습니다.
• 이벤트 버블링과 캡쳐링 전파를 막기 위해서 stopPropagation() 메서드를 사용합니다.

5. 스토리북에 대해서 설명해주세요

키워드

• 시나리오 관련 각 컴포넌트 개별 테스트
• 테스트 관련해서 문서화 가능

답변

• 스토리북은 시나리오에 따라서 컴포넌트를 개별적으로 테스트하는 툴입니다.
• 피그마에서 못하는 컴포넌트 동작 테스트를 진행할 수 있고
• 이를 문서화하여 다양한 예제 제공을 할 수 있다고 알고있습니다.

6. TDD란 무엇인가요?

키워드

• 소프트웨어 개발 방법론 중 하나
• 테스트를 개발 중심으로
• 구현할 함수를 작성하고, 테스트 파일에 toBe 메서드에 예상한 값 작성

답변

• TDD는 테스트 주도 개발로 테스트가 위주로 개발하는 것을 말합니다.
• 구현할 함수를 먼저 작성하고, module.exports 로 함수를 노출합니다.
• 이 함수의 결과값이 toBe 메서드에 작성된 예상값과 같다면, true 출력합니다.
• 이렇게 테스트를 중심으로 서비스 안정성을 추구하는 방법론이라고 생각합니다.

7. Static Site Generator에 대해서 아시나요?

키워드

• 정적으로 HTML, CSS, JS 파일을 생성하는 소프트웨어
• 빌드와 배포를 자동화 할 수 있음
• 정적인 파일이라서 보안 걱정이 줄어듬
• 웹 브라우저에 의해서 빠르게 다운로드되어 로딩 속도가 향상
• Next.js

답변

• SSG는 정적 사이트를 만드는 것입니다.
• HTML, CSS, JS 파일을 생성합니다.
• Next.js와 같은 SSG 라이브러리를 사용하면 빌드와 배포를 자동화 할 수 있습니다.
• 그리고 정적인 웹사이트를 웹 브라우저가 다운로드할 때 빠릅니다.
• 그래서 로딩 속도가 빠릅니다
• 정적인 파일이라서 모든 데이터가 화면에 담기고 렌더링 되는 것이라서 보안 걱정도 없습니다.