처음 프로젝트를 진행할 때는 Next.js App Router를 활용하여 각 페이지 마다 공통된 HeaderComponent를 사용하는 경우 layout.tsx 로 분리하여 관리하려고 했습니다. 하지만 HeaderComponent의 개수도 많고 또한 각각의 페이지마다 헤더의 사용이 달라 layout.tsx 생기는 경우도 많아져서 파일들이 여러 곳에 흩어져 유지보수 하기 어렵고 전체 헤더 구조의 일관성을 파악하기 어려워졌습니다.

이러한 비효율성을 해결하기 위해 모든 헤더 관련 로직을 한곳에서 중앙 관리하는 시스템을 구축하기로 결정했습니다.

2. 초기 아이디어: HeaderController

모든 로직을 한 곳에 모으기 위해 HeaderController를 만들고 if (pathname === '/entry')처럼 경로 문자열을 직접 사용하는 대신 유지보수성을 높이고자 헤더 종류별로 경로 규칙을 하나의 상수 객체로 그룹화하고 if/else 문에서 이 객체를 확인하는 방식을 구상했습니다.

// 초기 해결책 구상 코드

// 1. 헤더 종류별로 경로 규칙을 상수 배열로 정의
export const HEADER_PATHS = {
  NO_HEADER: ["/entry", "/signup", "/landing"],
  BACK_HEADER: ["/login", "/alarm", "/profile"],
  LOGO_HEADER: ["/home", "/friend/list"],
  // ...
};

// 2. if/else 문에서 각 상수 배열을 확인하여 분기 처리
const HeaderController = () => {
  const pathname = usePathname();

  // .includes()를 사용하여 경로가 배열에 직접 포함되는지 확인
  if (HEADER_PATHS.NO_HEADER.includes(pathname)) {
    return null;
  } else if (HEADER_PATHS.BACK_HEADER.includes(pathname)) {
    return <BackHeader ... />;
  } else if (HEADER_PATHS.LOGO_HEADER.includes(pathname)) {
    return <LogoHeader ... />;
  }
  // ...
};

3. 문제 발생: 동적 경로의 우선순위 충돌

이 구조는 가독성을 높였지만 /home은 로고 헤더를 /home/[id]는 뒤로가기 헤더를 가져야 한다는 것이었습니다.

그렇다고 해서 /home/[id] 를 /home/ 로 해서 startsWith('/home/') 로 한다고하더라도 /home/[id]/calendar 처럼 뒤에 더있을 수도 있고 또한 다양하게 존재할 수 있었기 때문에 명확하게 보장할 수 있는 방법이 필요했습니다.

4. 해결책 탐색 및 최종 설계: 정적과 동적으로 분리

이 우선순위 충돌 문제를 해결하기 위해 경로 규칙의 성격을 '정적 경로' 와 '동적 경로' 두 가지로 나누어 관리하는 방법을 생각했습니다.

• 정적 규칙: '/home', '/alarm'처럼 정확히 일치하는 경로는 객체로 관리하는 방법으로 구현
• 동적 규칙: '/home/[id]'처럼 패턴 매칭이 필요한 경로는 배열로 관리하여 정규식을 적용

// 1. 정확히 일치하는 경로들만 모아둔 객체
export const EXACT_PATH_CONFIGS = {
  "/home": { component: "LogoHeader", withAlarm: true },
  "/alarm": { component: "BackHeader" },
  "/entry": { component: null },
  // ...
};

// 2. 패턴 매칭이 필요한 경로들을 모아둔 배열
export const PATTERN_PATH_CONFIGS = [
  {
    // /home/[id] 와 같은 동적 경로
    test: (p: string) => /^\/home\/.+/.test(p),
    config: { component: "BackHeader", withAlarm: true },
  },
  // ...
];

5. 완성된 HeaderController

1. 정확한 정적 경로 조회
2. 없으면 동적 경로를 조회

다음과 같은 방법으로 명확한 우선순위 로직을 적용하여 최종 HeaderController를 완성했습니다.

"use client";
import { usePathname, useRouter } from "next/navigation";
import { useAtom } from "jotai";
import { hasNewNotificationAtom } from "@/stores/notificatonAtom";
import { EXACT_PATH_CONFIGS, PATTERN_PATH_CONFIGS } from "@/constants/header.constants";
import BackHeader from "./BackHeader";
import LogoHeader from "./LogoHeader";

const HeaderController = () => {
  const router = useRouter();
  const pathname = usePathname();
  // ... (hooks 및 핸들러 함수)

  // 1. 정확한 경로 객체에서 먼저 조회
  let config = EXACT_PATH_CONFIGS[pathname];

  // 2. 정확한 경로에 대한 설정이 없을 경우, 패턴 경로 배열에서 조회
  if (!config) {
    const patternMatch = PATTERN_PATH_CONFIGS.find(c => c.test(pathname));
    if (patternMatch) {
      config = patternMatch.config;
    }
  }

  // 설정에 따라 최종 헤더 렌더링
  if (!config || !config.component) return null;

  switch (config.component) {
    case "LogoHeader":
      // ...
    case "BackHeader":
      // ...
    default:
      return null;
  }
};

export default HeaderController;

다음과 같은 방법으로 Header를 보다 효율적으로 관리할 수 있게 되었습니다!

현재 진행하는 프로젝트에서는 다음과 같이 카테고리가 존재하게 되는데 순서를 변경하기 위해서는 드래그 앤 드롭으로 해당 순서를 변경할 수 있게 구현해야했습니다.

동작 과정

1. 카테고리 카드를 0.2초이상 누르게 되면 드래그 시작 및 포인터를 따라다니고 리스트에서는 포인터에 위치에 따라 밑에 공간이 생김
2. 드래그를 하면서 블럭 과 블럭 사이에 드래그 중인 카드를 놔두면 자연스럽게 밀리면서 애니메이션
3. 드래그를 놓는 순간 순서 변경 및 요청

그렇다면 어떻게 구현할 수 있을까?

1. 일단 드래그에 관련된 이벤트부터 알아보자 다음과 같은 드래그에 관한 이벤트가 있다는 것을 알 수 있다.

내가 생각한 구현 설계

1. 마우스 클릭 및 터치가 몇초 이상 눌렀을 때 dragStart 이벤트 발생할 수 있도록 구현
2. dragstart가 발생하면 원래 있던 컴포넌트(카트 컴포넌트 안보여야하므로 삭제
3. drag이벤트? dragover이벤트? 로 각 아이템들의 사이에 마우스가 오게 되면 자연스럽게 애니메이션으로 밑으로 내려가도록 설정
4. dragend시 해당 순서로 변경 및 요청

이정도로 생각해보았습니다. 물론 부가적으로 리스트 밖으로 놨을때라 던지 다양한 부분에 대해서도 생각해 봐야하지만 일단 이정도로 생각해보았습니다.

그래서 처음에는 일단 처음 구현은 0.2초정도의 시간동안 마우스를 누르게 되면 draggable한 생태로 바꾸도록 구현했습니다.

import { useCallback, useEffect, useRef } from "react";

interface UseLongClickOptions {
  duration?: number;
  onLongClick: () => void;
}

export const useLongClick = ({
  duration = 200,
  onLongClick,
}: UseLongClickOptions) => {
  const timerRef = useRef<number | null>(null);

  const start = useCallback(() => {
    timerRef.current = window.setTimeout(onLongClick, duration);
  }, [onLongClick, duration]);

  const clear = useCallback(() => {
    if (timerRef.current !== null) {
      clearTimeout(timerRef.current);
      timerRef.current = null;
    }
  }, []);

  // 언마운트 시 타이머 정리
  useEffect(() => {
    return () => clear();
  }, [clear]);

  return {
    onMouseDown: start,
    onMouseUp: clear,
    onTouchStart: start,
    onTouchEnd: clear,
  };
};

다음과 같이 DOM API인 onMouseDown, onTouchStart 를 사용하여 디바운싱 방법처럼 setTimeout을 통해 duration 기간후에 drag상태로 들어가도록 구현하고 onMouseUp, onTouchEnd 일때 clearTimeout을 사용하여 실행을 취소 하도록 구현했습니다.

하지만 다음과 같이 구현했을 때 문제가 발생하였습니다.

1. draggable 하게 바뀌었지만 onDragStart API를 실행 시키기 위해서는 포인터를 조금이라도 움직여야 변경된 컴포넌트가 보임
2. 즉 draggable 한 상태가 되면 자동으로 onDragStart 가 실행 되는 형태를 원했습니다.

그렇 다면 일정 시간동안 눌렀을 때 어떻게 dragStart에 들어갈 것인가???

찾아보니… 네이티브 DnD에서는 따로 onDragStart를 트리거 할 수 있는 방법은 없다고.. 합니다 ..

그래서 필요하다면 커스텀 드래그 로직을 직접 구현해야 합니다..

Pointer Events

일단 들어가기에 앞서 커스텀 DnD에 대해서 찾아보다가 Pointer라는 event에 대해서 알게되었는데 PointerEvnet는 mouse와 touch 둘다 합쳐서 하나로 관리할 수 있고 setPointerCapture(pointerId) 라는 메서드를 통해 드래그 중 포인터가 요소 바깥으로 나가더라도 해당 요소가 계속해서 포인터 이벤트를 받을 수 도 있어서 PointerEvent를 사용하여 구현하기로 했습니다.

그렇다면 직접 어떻게 구현해야할까?(내가 생각한 방법)

1. 드래그 시작 단계 (Initiation)

• ghost image (드래그 할때 생기는 이미지 )를 사용하는 것이 아닌 직접 컴포넌트 자체를 움직이는 방법으로 사용하는 방법
• 트리거: onPointerDown 이벤트가 발생하면 이전과 같이 setTimeout을설정하여 누루고 있음을 감지하고 사용자가 그전에 포인터를 떼면 타이머를 취소
• 아이템 띄우기: 트리거 이후 해당 아이템의 CSS를 position: absolute, z-index를 높게 설정하여 다른 요소들 위로 떠오르게 구현
• 자리 유지 (Placeholder): 띄움과 동시에 원래 아이템이 있던 자리가 비면서 레이아웃이 무너지지 않도록 원래 크기만큼 비어있도록 구현

2. 드래그 이동 단계 (Dragging)

• 포인터를 움직일 때 해당 아이템이 따라오게 하고 다른 아이템들의 위치를 조정하는 단계
• 위치 갱신: onPointerMove 이벤트가 발생할 때마다 시작 좌표와 현재 포인터 좌표의 차이를 계산하여 아이템의 transform 값을 계속 업데이트
• 실시간 순서 변경: 현재 포인터의 위치를 기준으로 다른 리스트 아이템들과의 위치를 비교하여 순서 변경

3. 드롭 및 순서 확정 단계 (Finalization)

• 사용자가 포인터를 놓았을 때 최종 위치에 아이템을 안착시키고 상태를 정리하는 단계

다음과 같이 구현을 설계하였고 플로우 대로 구현하려고 했습니다. 그래서 첫번째로 드래그 시작 단계인 onPointerDown에 대한 함수를 먼저 구현했습니다.

1. PointerDown (드래그 시작 단계)

const handlePointerDown = (
    e: React.PointerEvent<HTMLDivElement>,
    index: number
  ) => {
    e.preventDefault();
    longPressTimeout.current = window.setTimeout(() => {

    const el = e.currentTarget;
    const pid = e.pointerId;
    const rect = el.getBoundingClientRect();

    // 2) 포인터 캡처
    el.setPointerCapture(pid);

    // 3) 드래그 상태 진입
    setDragIndex(index);
    setDragInfo({
      pointerId: pid,
      origin: { x: e.clientX, y: e.clientY }, // e의 속성에 직접 접근
      elementStart: { x: rect.left, y: rect.top },
      size: { width: rect.width, height: rect.height },
      el,
    });
      // 3) 드래그하면서 움직일 상대 위치를 0,0으로 초기화
      setPos({ x: 0, y: 0 });
    }, 200);
  };

하지만... e.currentTarget이 null이 나와서 캡쳐링이 되지않는 현상이 나타났다…

왜 그럴까?

currentTarget 자체가 이벤트 핸들러가 실행되는 동안에만 유효한 값이기 때문입니다.

currentTarget은 "현재 이벤트 핸들러가 부착된 요소"를 의미하므로, 이벤트 dispatch가 끝난 뒤 비동기 콜백에서 이벤트 객체를 통해 접근하면 null이 될 수 있습니다. 따라서 비동기 콜백 안에서 event 객체를 직접 참조하지 않고, 핸들러가 실행되는 시점에 필요한 값들을 로컬 변수로 분리해 저장했습니다.

// 꾹 누르고 200ms 후에 드래그 시작
  const handlePointerDown = (
    e: React.PointerEvent<HTMLDivElement>,
    index: number
  ) => {
    e.preventDefault();

    const el = e.currentTarget; // 드래그할 요소 참조
    const pid = e.pointerId; // 포인터 식별자
    const startX = e.clientX; // 뷰포트기준 포인터 좌표
    const startY = e.clientY;
    const rect = el.getBoundingClientRect();

    const elementStartX = rect.left;
    const elementStartY = rect.top;
    const elementWidth = rect.width;
    const elementHeight = rect.height;

    longPressTimeout.current = window.setTimeout(() => {
      // 1) 포인터 캡처
      el.setPointerCapture(pid);

      // 2) 드래그 상태 진입
      setDragIndex(index);
      setDragInfo({
        pointerId: pid,
        origin: { x: startX, y: startY },
        elementStart: { x: elementStartX, y: elementStartY },
        size: { width: elementWidth, height: elementHeight }, // ← 저장
        el,
      });
      // 3) 드래그하면서 움직일 상대 위치를 0,0으로 초기화
      setPos({ x: 0, y: 0 });
    }, 200);
  };

2. onPointerMove (드래그 이동 단계)

계산로직

    // 다음 move를 위한 origin 갱신
    setDragInfo(
      (info) => {
          ...info,
          start: { x: e.clientX, y: e.clientY },
          origin: { x: info.start.x, y: info.start.y },
        }
    );

다음과 같이 DrageInfo의 start와 origin을 계속해서 갱신하여 absolute된 해당 아이템을 top,left 값을 갱신하는 방식으로 구현했습니다.

*하지만 구현을 하다보니 다음과 같은 문제점이 발생하였습니다. *

1. 현재 dragInfo를 state로 관리하고 있기 때문에 pointerMove마다 너무 많은 리렌더링이 발생한다.
2. 드래그 시 아이템의 사각형의 왼쪽 위가 포인터를 향하게 변경된다.
3. 드래그하는 아이템은 포인터를 잘 따라왔지만 나머지 아이템들의 transform을 정하는데에 어려움이 있다.

(ex. 처음 long push 이후 드래그상태 진입 시 absolute로 변경되어 빈공간이 생겨서 나머지 아이템들이 transform, 위치 조정 문제 )

그래서 이러한 문제를 해결하기 위해 다음과 같은 방법을 사용했습니다.

1. absolute제거와 ref사용

먼저 dragInfo를 ref변경하고 pointerMove의 handler함수가 동작할 때 ref의 저장된 값과 현재 포인터 위치와의 거리를 계산해여 absolute를 사용하여 top,left값을 갱신하는 것이 아닌 transform을 직접 함수안에서 적용하는 방식으로 구현했습니다.

// 얼마나 이동했는지 계산(실제 이벤트가 발생한 좌표 - 원래 위치)
const dx = e.clientX - dragInfoRef.current.start.x;
const dy = e.clientY - dragInfoRef.current.start.y;

const containerRect = containerRef.current!.getBoundingClientRect();
const originX = dragInfoRef.current.origin.x;
const itemWidth = dragInfoRef.current.size.width;
const minDx = containerRect.left - originX;
const maxDx = containerRect.right - originX - itemWidth;
const clampedDx = Math.max(minDx, Math.min(dx, maxDx));

dragInfoRef.current.el.style.transform = `translate(${clampedDx}px, ${dy}px)`;

또한 드래그 하는 영역을 넘지 못하도록 부모 contianer를 넘지 못하도록 다음과 같이 아이템이 이동할 수 있는 최소값과 최대값(minDx,maxDx)을 설정했습니다.

2. placeholder 로직 구현 및 transform 개선

updatePlaceholderIndex

const updatePlaceholderIndex = (pointerY: number) => {
    if (!containerRef.current || !dragInfoRef.current) return;

    const { top } = containerRef.current.getBoundingClientRect();
    const { height: itemHeight } = dragInfoRef.current.size;

    const itemSlotHeight = itemHeight + GAP;
    const offsetY = pointerY - top;
    const calculatedIndex = Math.floor(offsetY / itemSlotHeight);

    // 인덱스가 배열 범위를 벗어나지 않도록 제한
    const newIndex = Math.max(
      0,
      Math.min(calculatedIndex, categories.length - 1)
    );
    if (newIndex !== placeholderIndex) {
      setPlaceholderIndex(newIndex);
    }
  };

getTransformStyle

const getTransformStyle = (index: number): string => {
    if (dragIndex === null || placeholderIndex === null) return "none";

    const itemHeight = dragInfoRef.current?.size.height ?? 0;
    const totalShift = itemHeight + GAP;

    // 아래로 내리는 경우
    if (dragIndex < placeholderIndex) {
      if (index > dragIndex && index <= placeholderIndex) {
        return `translateY(-${totalShift}px)`;
      }
    }
    // 위로 올리는 경우
    if (dragIndex > placeholderIndex) {
      if (index >= placeholderIndex && index < dragIndex) {
        return `translateY(${totalShift}px)`;
      }
    }
    return "none";
  };

하나의 아이템이 차지하는 높이값(실제 아이템 높이+갭)으로 드래그앤 드랍이 되는 container의 시작점과 현재 포인터의 Y 좌표(offsetY)를 나눠서 현재 포인터가 몇번째 index에 위치를 계산하여 드래그를 위로 올리는 경우 아래로 내리는 경우를 나눠서 다른 아이템들을 transform 되도록 구현했습니다.

3. onPointerDown (드롭 및 순서 확정 단계)

const handleDragEnd = () => {
    clearLongPress();

    if (dragInfoRef.current) {
      // 캡처 해제
      dragInfoRef.current.el.releasePointerCapture(
        dragInfoRef.current.pointerId
      );
    }

    // 드래그가 실제로 일어났을 때만 실행
    if (
      dragIndex !== null &&
      placeholderIndex !== null &&
      dragIndex !== placeholderIndex
    ) {
      const newList = [...categories];
      const [moved] = newList.splice(dragIndex, 1);
      newList.splice(placeholderIndex, 0, moved);
      setCategories(newList);
      handleReorder(newList);
    }

    dragInfoRef.current = null;
    setDragIndex(null);
    setPlaceholderIndex(null);
    setIsMoving(false);
  };

다음과 같이 setTimeout으로 설정된 롱클릭 타이머를 제거하고releasePointerCapture를 통해 포인터를 해제했습니다.

이후 드래그가 실제로 일어났을 경우에 (아이템이 실제로 다른 위치로 이동했을 때 :dragIndex !== placeholderIndex)만 순서 변경 로직을 실행하도록 구현했습니다. 이후에는 다음 드래그 동작을 위해 드래그와 관련된 모든 ref와 state 값을 초기화 하였습니다.

결과

dragIndex및 placeholder가 변경될 때만 리렌더링이 되는것을 확인할 수 있었다.

*다 구현한 줄 알았지만 몇가지 테스트를 하면서 한가지 더.. 문제가 발생하였습니다. *

만약 아이템(카테고리)들이 많이 있는 상황이라 viewport밖으로 드래그앤 드롭을 해야하는 상황이라면?

사용자는 다음과 같은 상황에 최소 두번동안 드래그앤 드롭을 해야하는 불편한 상황에 놓이게 된다.

그렇다면 이 문제를 해결을 어떻게 할 수 있을까요?

제가 생각한 방법

viewport기준으로 일정부분 최상단과 최하단으로 드래그중에 포인터가 위치하게 되면 자동으로 스크롤이 되는 방법을 생각해보았습니다.

그래서 handlePointerMove 함수에 viewport기준으로scrollThreshold값을 정하여 e.clientY가 해당 부분에 위치할 때 스크롤이 되도록 다음과 같은 코드를 추가했습니다.

// 페이지 위로 스크롤
if (e.clientY < scrollThreshold) {
  window.scrollBy(0, -scrollSpeed);
}

// 페이지 아래로 스크롤
if (e.clientY > viewportHeight - scrollThreshold) {
  window.scrollBy(0, scrollSpeed);
}

하지만 역시나 이렇게 간단하게 끝날일이 아니었습니다.

• 드래그 중 스크롤이 되는 부분으로 마우스 및 터치를 옮기면 스크롤은 되지만 해당 아이템(드래그 중인 컴포넌트)은 마우스를 따라오지 않는다는 문제가 발생하였습니다.

• 또한 handlePointerMove 함수는 포인터가 움직여야 실행되는 함수이므로 자동 스크롤이 되는 범위에서 포인터를 계속 움직여야 scroll이 발생하는 문제가 발생하였습니다.

결국

• ** 드래그 중 포인터를 움직이지 않아도 자동 스크롤 위치(최상단,최하단)에 포인터가 위치하면 자동 스크롤을 트리거**
• 자동 스크롤이 진행되면 포인터가 움직이지 않아도 드래그 중인 컴포넌트가 포인터를 따라오도록 구현

이러한 문제들을 해결해야 한다는 점이었다.

해결방안

1. 아무래도 드래그 중 움직이지 않고 해당위치에 pointer가 위치하면 계속해서 스크롤을 트리거 해야하기 때문에 드래그 상황에 들어갈 때 requestAnimationFrame을 사용하여 주기적으로 부르는 형식으로 해결했습니다.
2. 자동 스크롤 시 포인터가 움직이지 않아도 드래그 중인 컴포넌트가 포인터를 따라오도록 구현하기 위해서 handlePointerMove에서 드래그의 transform하는 부분을 따로 분리하여 pointerMove와requestAnimationFrame으로 자동 스크롤 한 경우에 사용하도록 구현했습니다. 또한 자동 스크롤 할 때 스크롤한 거리를 더해줘서 컴포넌트도 transform하도록 구현했습니다.

   //움직인 거리 + 스크롤 거리 (드래그 컨테이너가 움직여야 하는 거리 )
   const dy = clientY - startClient.y + (window.scrollY - startScroll.y);

hook으로 분리

프로젝트 내에서 이 부분 말고 다른부분에도 Drag and Drop을 적용해야하기 때문에 hook으로 분리해보았습니다.

최종코드

export const useDragAndDrop = <T>({
  items,
  onReorder,
  longPressDuration = DEFAULT_LONG_PRESS_DURATION,
  gap = DEFAULT_GAP,
  transition = "transform 200ms ease",
}: DragAndDropOptions<T>) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const longPressTimeout = useRef<number | null>(null);
  const dragInfoRef = useRef<DragInfo | null>(null);
  const animationFrameRef = useRef<number | null>(null);
  const lastPointerPos = useRef<Pos>({ x: 0, y: 0 }); // 마지막 포인터 위치(clientY) 저장

  const [dragIndex, setDragIndex] = useState<number | null>(null);
  const [placeholderIndex, setPlaceholderIndex] = useState<number | null>(null);
  const [isMoving, setIsMoving] = useState(false);

  // 아이템 위치 업데이트 로직을 별도 함수로 분리
  const updateDragPosition = useCallback((clientX: number, clientY: number) => {
    if (!dragInfoRef.current || !containerRef.current) return;
    const { startClient, startScroll, origin, size } = dragInfoRef.current;

    const dx = clientX - startClient.x;

    //움직인 거리 + 스크롤 거리 (드래그 컨테이너가 움직여야 하는 거리 )
    const dy = clientY - startClient.y + (window.scrollY - startScroll.y);

    const containerRect = containerRef.current.getBoundingClientRect();
    const minDx = containerRect.left - origin.x;
    const maxDx = containerRect.right - origin.x - size.width;
    const clampedDx = Math.max(minDx, Math.min(dx, maxDx));

    dragInfoRef.current.el.style.transform = `translate(${clampedDx}px, ${dy}px)`;
  }, []);

  const updatePlaceholderIndex = useCallback(
    (pointerY: number) => {
      if (!containerRef.current || !dragInfoRef.current) return;

      const { top } = containerRef.current.getBoundingClientRect();
      const { height: itemHeight } = dragInfoRef.current.size;

      const itemSlotHeight = itemHeight + gap;
      const offsetY = pointerY - top;
      const calculatedIndex = Math.floor(offsetY / itemSlotHeight);

      const newIndex = Math.max(0, Math.min(calculatedIndex, items.length - 1));
      if (newIndex !== placeholderIndex) {
        setPlaceholderIndex(newIndex);
      }
    },
    [gap, items.length, placeholderIndex]
  );

  const scrollLoop = useCallback(() => {
    if (!dragInfoRef.current) return;

    const pointerY = lastPointerPos.current.y;
    let scrollAmount = 0;

    if (pointerY < SCROLL_THRESHOLD) {
      scrollAmount = -SCROLL_SPEED;
    } else if (pointerY > window.innerHeight - SCROLL_THRESHOLD) {
      scrollAmount = SCROLL_SPEED;
    }

    if (scrollAmount !== 0) {
      window.scrollBy(0, scrollAmount);
      // 스크롤이 발생했으므로, 현재 포인터 위치를 기준으로 드래그 아이템 위치를 다시 계산하고 업데이트
      updateDragPosition(lastPointerPos.current.x, lastPointerPos.current.y);
      // 플레이스홀더 위치도 업데이트
      updatePlaceholderIndex(lastPointerPos.current.y);
    }

    animationFrameRef.current = requestAnimationFrame(scrollLoop);
  }, [updateDragPosition, updatePlaceholderIndex]);

  const handlePointerDown = useCallback(
    (e: React.PointerEvent<HTMLDivElement>, index: number) => {
      e.stopPropagation();
      const el = e.currentTarget;
      const pid = e.pointerId;
      const rect = el.getBoundingClientRect();
      lastPointerPos.current = { x: e.clientX, y: e.clientY };

      longPressTimeout.current = window.setTimeout(() => {
        el.setPointerCapture(pid);
        setDragIndex(index);
        dragInfoRef.current = {
          pointerId: pid,
          startClient: { x: e.clientX, y: e.clientY },
          startScroll: { x: window.scrollX, y: window.scrollY },
          origin: { x: rect.left, y: rect.top },
          size: { width: rect.width, height: rect.height },
          el,
        };
        setPlaceholderIndex(index);
        animationFrameRef.current = requestAnimationFrame(scrollLoop);
      }, longPressDuration);
    },
    [longPressDuration, scrollLoop]
  );

  const handlePointerMove = useCallback(
    (e: React.PointerEvent<HTMLDivElement>) => {
      if (!dragInfoRef.current || e.pointerId !== dragInfoRef.current.pointerId)
        return;

      if (!isMoving) setIsMoving(true);
      e.preventDefault();
      // 마지막 포인터 위치(clientY 기준)를 계속 기록
      lastPointerPos.current = { x: e.clientX, y: e.clientY };

      updateDragPosition(e.clientX, e.clientY);
      updatePlaceholderIndex(e.clientY);
    },
    [isMoving, updatePlaceholderIndex, updateDragPosition]
  );

  const getDragState = useCallback(
    (index: number): DragState => {
      if (dragIndex === index) return "dragging";
      if (dragIndex !== null) return "others";
      return "idle";
    },
    [dragIndex]
  );

  const clearLongPress = useCallback(() => {
    if (longPressTimeout.current) {
      clearTimeout(longPressTimeout.current);
      longPressTimeout.current = null;
    }
  }, []);

  const handleDragEnd = useCallback(() => {
    if (animationFrameRef.current) {
      cancelAnimationFrame(animationFrameRef.current);
      animationFrameRef.current = null;
    }

    clearLongPress();

    if (dragInfoRef.current) {
      dragInfoRef.current.el.releasePointerCapture(
        dragInfoRef.current.pointerId
      );
    }

    if (
      dragIndex !== null &&
      placeholderIndex !== null &&
      dragIndex !== placeholderIndex
    ) {
      onReorder(dragIndex, placeholderIndex);
    }

    dragInfoRef.current = null;
    setDragIndex(null);
    setPlaceholderIndex(null);
    setIsMoving(false);
  }, [clearLongPress, dragIndex, onReorder, placeholderIndex]);

  const getTransformStyle = useCallback(
    (index: number): string => {
      if (dragIndex === null || placeholderIndex === null) return "none";

      const itemHeight = dragInfoRef.current?.size.height ?? 0;
      if (itemHeight === 0) return "none";

      const totalShift = itemHeight + gap;

      if (dragIndex < placeholderIndex) {
        if (index > dragIndex && index <= placeholderIndex) {
          return `translateY(-${totalShift}px)`;
        }
      }
      if (dragIndex > placeholderIndex) {
        if (index >= placeholderIndex && index < dragIndex) {
          return `translateY(${totalShift}px)`;
        }
      }
      return "none";
    },
    [dragIndex, placeholderIndex, gap]
  );

  // 컨테이너에 적용할 props
  const containerProps = {
    ref: containerRef,
    onPointerMove: handlePointerMove,
    onPointerUp: handleDragEnd,
    onPointerCancel: handleDragEnd,
  };

  // 각 드래그 아이템에 적용할 props를 반환하는 함수
  const getItemProps = (index: number) => ({
    onContextMenu: (e: React.MouseEvent) => e.preventDefault(),
    onPointerDown: (e: React.PointerEvent<HTMLDivElement>) =>
      handlePointerDown(e, index),
  });

  const getItemStyle = (index: number) => ({
    transform: getTransformStyle(index),
    transition: isMoving ? transition : "none",
  });

  return {
    containerProps,
    getTransformStyle,
    getDragState,
    isMoving,
    getItemProps,
    dragIndex,
    getItemStyle,
  };
};

최종 결과

Reference

https://inpa.tistory.com/entry/%EB%93%9C%EB%9E%98%EA%B7%B8-%EC%95%A4-%EB%93%9C%EB%A1%AD-Drag-Drop-%EA%B8%B0%EB%8A%A5

자바스크립트는 프로토타입 기반 언어라서 ‘상속’개념이 존재하지 않습니다! 그래서 다른언어에 익숙한 개발자들을 혼란스럽게 만들었고 이를 해결하기 위해 ES6에서 클래스 문법이 추가 되었습니다.

하지만! 이부분도 프로토타입을 활용하여 구현한것입니다! 그래서 이번 정리는 클래스가 어떤식으로 구현이 되었는지 한번 확인해 보겠습니다!

예를들어 생성자 함수 Array를 new를 통해 arr라는 인스턴스를 만들었다고 생각해 보겠습니다.

• 이때 Array 를 일종의 class로 본다면 Array의 prototype 객체 내부 요소들이 arr로 상속된다고 보는 것입니다. 물론 프로토타입 체이닝에 의한 참조입니다.
• 또한  Array의 prototype을 제외한 메서드는 arr에 상속되지 않습니다.

또 다른 예제를 통해 확인 해보겠습니다.

// 생성자
const Rectangle = function (width, height) {
  this.width = width;
  this.height = height; 
};

// (프로토타입) 메서드
Rectangle.prototype.getArea = function() {
  return this.width * this.height;
};

// 스태틱 메서드
Rectangle.isRectangle = function(instance) {
  return instance instanceof Rectangle &&
      instance.width > 0 && instance.height > 0;
};

const rect1 = new Rectangle(3,4);

console.log(rect1.getArea()); // 12
console.log(rect1.isRectangle()); // TypeError: rect1.isRectangle is not a function
console.log(Rectangle.isRectangle(rect1)); // true

• 다음과 같이 인스턴스 rect1에서 프로토타입 체이닝을 통해 getAreat()를 바로 호출할 수 있는 메서드를 프로토타입 메서드입니다.
• 인스턴스 rect1에서 프로토타입 체이닝으로 직접 접근할 수 없는 메서드 isRectangle()가 스태틱 메서드 입니다.

클래스 상속

그래서 ES5에서는 클래스가 없기 때문에 이런 프로토타입 체이닝을 통해 클래스 상속을 구현한 것입니다.

직접 확인하면서 클래스를 직접 구현했을때 어떤 문제가 있는지 확인해 보겠습니다.

const Grade = function() {
  const args = Array.prototype.slice.call(arguments);
  for (var i = 0; i < args.length; i++) {
    this[i] = args[i];
  }
  this.length = args.length;
};
Grade.prototype = [];
const g = new Grade(100, 80);

g.push(90);
console.log(g); // Grade { 0: 100, 1: 80, 2: 90, length: 3 }

delete g.length;
g.push(70);
console.log(g); // Grade { 0: 70, 1: 80, 2: 90, length: 1 }

• 처음 90을 push 한것은 정확하게 나왔지만
• length 속성이 수정 가능한 점과 Grade.prototype가 빈배열을 참조 한다는 점이 문제가 발생하게 된 원인입니다.*
• 원래 배열은 length 속성이 삭제가 안되지만 삭제가 가능하게 되어 g.length 읽어올라 했지만 사라져서 프로토타입 체이닝을 통해 g.__proto__.length를 읽어 왔기때문에 빈배열(Grade.prototype)의 length 0을 읽게되 잘못되게 push가 된 것 입니다.

이렇기 때문에 클래스에 있는 값이 인스턴스의 동작에 영향을 미치면 안됩니다!!

또다른 예제를 확인해 보겠습니다.

const Rectangle = function (width, height) {
  this.width = width
  this.height = height
}

Rectangle.prototype.getArea = function () {
  return this.width * this.height
}

const rect = new Rectangle(3,4);
console.log(rect.getArea()); // 12

const Square = function (width) {
  Rectangle.call(this, width, width) 
}

Square.prototype = new Rectangle()

const sq = new Squeare(5);
console.log(sq.getArea()); // 25

다음과 같이 직사각형과 정사각형 클래스를 만들어서 공통된 메서드를 사용하기 위해 Squre 의 프로토타입 객체에 Rectangle의 인스턴스를 부여했습니다. (마치 클래스 상속)

물론 동작은 제대로 하지만 문제점이 있습니다!

클래스의 값때문에 인스턴스에 영향이 미치는것을 확인할 수 있습니다!

sq 의 구조를 보게 되면 sq.__proto__ 는 Rectengle의 인스턴스를 바라보게 되어 width와 height가 undefined로 되어있는것을 확인 할 수 있습니다. 즉 Square.prototype 에 값이 존재 하여 임의로 Square.prototype.width 에 값을 부여하여 sq.width를 지워 버리면 프로토타입 체이닝에 의해 이상한 값이 나오게 될 것입니다!

그렇기 때문에 이러한 문제를 해결하기 위해 클래스가 구체적인 데이터를 지니지 않게 해야합니다!

클래스가 구체적인 데이터를 지니지 않게 하는 방법

1) 인스턴스 생성 후 프로퍼티 제거하기

const extendClass1 = function(SuperClass, SubClass, subMethods) {
  SubClass.prototype = new SuperClass();
  for (const prop in SubClass.prototype) {
    if (SubClass.prototype.hasOwnProperty(prop)) {
      delete SubClass.prototype[prop];
    }
  }
  if (subMethods) {
    for (const method in subMethods) {
      SubClass.prototype[method] = subMethods[method];
    }
  }
  Object.freeze(SubClass.prototype);
  return SubClass;
};

const Rectangle = function(width, height) {
  this.width = width;
  this.height = height;
};
Rectangle.prototype.getArea = function() {
  return this.width * this.height;
};
const Square = extendClass1(Rectangle, function(width) {
  Rectangle.call(this, width, width);
});
const sq = new Square(5);
console.log(sq.getArea()); 

간단하게 설명하자면

• extendClass1에서 SuperClass의 인스턴스를 SubClass.prototype으로 설정하여 상속을 구현했습니다. 이후 SubClass.prototype 에 직접 정의된 프로퍼티를 삭제하여 subMethods 객체를 받아 SubClass.prototype에 원하는 메서드를 추가합니다. 마지막으로 Object.freeze(SubClass.prototype)를 사용하여 SubClass.prototype을 변경할 수 없도록 만들었습니다.

2) 빈 함수(Bridge)를 활용하기

const extendClass2 = (function() {
  const Bridge = function() {};
  return function(SuperClass, SubClass, subMethods) {
    Bridge.prototype = SuperClass.prototype;
    SubClass.prototype = new Bridge();
    if (subMethods) {
      for (const method in subMethods) {
        SubClass.prototype[method] = subMethods[method];
      }
    }
    Object.freeze(SubClass.prototype);
    return SubClass;
  };
})();

const Rectangle = function(width, height) {
  this.width = width;
  this.height = height;
};
Rectangle.prototype.getArea = function() {
  return this.width * this.height;
};
const Square = extendClass2(Rectangle, function(width) {
  Rectangle.call(this, width, width);
});
const sq = new Square(5);
console.log(sq.getArea()); 

• Bridge라는 빈 함수를 만들어서 Bridge.prototype이 Rectangle.prototype을 바라보게끔 한 다음 Square.prototype에 Bridge의 인스턴스를 할당하여 Rectangle 자리에 Bridge가 대체하게 되어 구체적인 데이터가 남아 있지 않습니다.

3)Object.create 이용하기

const Rectangle = function(width, height) {
  this.width = width;
  this.height = height;
};
Rectangle.prototype.getArea = function() {
  return this.width * this.height;
};
const Square = function(width) {
  Rectangle.call(this, width, width);
};
Square.prototype = Object.create(Rectangle.prototype);
Object.freeze(Square.prototype);

const sq = new Square(5);
console.log(sq.getArea());

• SubClass의 prototype의 __proto__가 SuperClass의 prototype을 바라보되 SuperClass의 인스턴스가 되지 않아서 해결하는 방법입니다.

constructor 복구하기

• 위에 방법은기본적인 상속은 성공했지만 SubClass 인스턴스의 constructor는 SuperClass를 가르키는 상태입니다. 즉 constructor가 다른 부분을 가르키고 있기 때문에 수동으로 올바르게 연결해야 합니다.

const extendClass1 = function(SuperClass, SubClass, subMethods) {
  SubClass.prototype = new SuperClass();
  for (const prop in SubClass.prototype) {
    if (SubClass.prototype.hasOwnProperty(prop)) {
      delete SubClass.prototype[prop];
    }
  }
  SubClass.prototype.consturctor = SubClass; // 수동으로 올바르게 가르키게 변경 
  if (subMethods) {
    for (const method in subMethods) {
      SubClass.prototype[method] = subMethods[method];
    }
  }
  Object.freeze(SubClass.prototype);
  return SubClass;
};

• 클래스 기반 언어에서는 상속을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형 으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻습니다.

아래의 그림을 보면 프로토타입에 대해서 알 수 있습니다.

왼쪽 꼭짓점에는 Constructor(생성자 함수)를

오른쪽 꼭짓점에는 Constructor.prototype 이라는 프로퍼티를

왼쪽 꼭짓점으로부터 아래를 향한 화살표 중간에 new가 있고 종점에는 instance가 있고

오른쪽 꼭짓점에서 대각선 아래향하는 화살표 종점에는 instance.__proto__라는 프로퍼티가 있습니다.

• 어떤 생성자 함수를 new 연산자와 함께 호출하면 Constructor에서 정의된 내용을 바탕으로 새로운 인스턴스가 생성된다.
• 이때 instance에는 __proto__라는 프로퍼티가 자동으로 부여되는데 이 프로퍼티는 Constructor의 prototype이라는 프로퍼티를 참조한다.

여기서 prototype과 __proto__가 등장하는데 이 둘의 관계가 프로토타입의 핵심 개념입니다.

prototype와 이를 참조하는__proto__는 모두 객체이고 prototype 객체 내부에는 인스턴스가 사용할 메서드를 저장합니다. 그러면 instance 에서도 숨겨진 프로퍼티인 __proto__ 를 통해 이 메서드들에 접근할 수 있습니다.

코드예시

const Person = function (name) {
    this._name = name;
};
Person.prototype.getName = function() {
    return this._name;
};

const suzi = new Person('Suzi');
suzi.__proto__.getName(); // undefined

다음과 같은 코드를 보시면 Person 함수 를 통해 인자로 받은 name 값을 _name 속성값으로 가지고, Person.prototype 프로퍼티에 getName 함수를 추가했습니다.

이후 Person 함수를 생성자로 사용해서 suzi 라는 인스턴스를 생성하여

suzi.__proto__.getName(); 을 했을때 에러가 아닌 undefined가 출력되는것을 볼 수 있습니다.

그 이유는 suzi 인스턴스에는 __proto__라는 프로퍼티가 자동으로 부여되어 Person.prototype 이라는 프로퍼티를 suzi.__proto__가 참조하고있지만 this 바인딩이 잘못되어 있기 때문입니다.

그럼 만약에 __proto__ 객체에 name프로퍼티가 있으면?

    const suzi = new Person('Suzi');
    suzi.__proto__.name= 'suzi__proto__'
    suzi.__proto__.getName(); //suzi__proto__

예상대로 나오는것을 볼 수 있습니다.

그렇다면 this를 인스턴스로 하는 방법은 없을까요?? 그 방법은 __proto__ 없이 인스턴스에서 곧바로 메서드를 사용하는것 입니다.

    const suzi = new Person('Suzi');
    suzi.getName(); //Suzi
    const iu = new Person('IU');
    iu.getName(); //IU

다음과 같이 나오는 이유는 __proto__ 가 생략 가능한 프로퍼티이기 때문입니다.

그래서 다음과 같은 그림이 나오게 된것입니다.

이미지 출처 :https://d-sup.github.io/core%20javascript/TIL-prototype/

결론

자바스크립트는 함수에 자동으로 객체인 prototype 프로퍼티를 생성해 놓는데 new 연산자와 함께 함수를 호출할 경우 __proto__ 가 자동으로 생성되며 prototype 참조합니다. __proto__ 프로퍼티는 생략이 가능하도록 구현돼 있기 때문에 생성자 함수의 prototype에 어떤 메서드나 프로퍼티가 있다면 인스턴스에서도 마치 자신의 것처럼 접근할 수 있습니다.

프로토타입 체인

메서드 오버라이드

만약 프로토타입 객체와 인스턴스가 동일한 이름의 프로퍼티 또는 메서드를 가지는 상황이라면 어떻게 될까요??

const Person = function(name){
    this.name = name;
}
Person.prototype.getName = function(){
    return this.name;
}

const iu = new Person('지금');
iu.getName = function(){
    return '바로' + this.name;
}
console.log(iu.getName()) // 바로 지금

iu.__proto__getName이 아닌 iu 객체에 있는 getName 메서드가 호출되었습니다. 이러한 현상을 메서드 오버라이드라고 합니다.

가장 가까운 대상인 자신의 프로퍼티를 검색하고 없으면 그 다음으로 가까운 대상인 __proto__를 검색하는 순서로 진행되는 것입니다.

이런식으로 단계가 하나만 있는것이 아니라 여러개도 가능하여 __proto__ 에서 __proto__ 로 연쇄적으로 이어진 것이 프로토타입 체인 입니다.

객체 전용 메서드의 예외사항

• 어떤 생성자 함수든 prototype은 반드시 객체이기 때문에 Object.prototype이 언제나 프로토타입 체인의 최상단에 존재합니다.
• 그렇기 때문에 객체에서만 사용할 메서드는 다른 데이터 타입처럼 프로토타입 객체 안에 정의할 수 없다. 왜냐하면 객체에서만 사용할 메서드를 Object.prototype 에 정의한다면 다른 데이터 타입도 해당 메서드를 사용할 수 있기 때문입니다!

그래서 객체만을 대상으로 동작하는 객체 전용 메서드들은 Object.prototype 이아닌 Object 스태틱 메서드로 되어있습니다.

ex) Object.freeze

예외적으로 Object.create(null)을 사용하면 __proto__ 가 없는 객체를 생성합니다!

• 함수를 선언할 때 만들어지는 유효범위가 사라진 후에도 호출할 수 있는 함수
• 이미 생명 주기상 끝난 외부 함수의 변수를 참조하는 함수
• 자신이 생성될때의 스코프에서 알 수 있었던 변수들 중 언젠가 자신이 실행될때 사용할 변수들만을 기억하여 유지시키는 함수

라고 다양한책에서 말하고 있습니다.

클로저는 함수와 그함수가 선언될 당시의 렉시컬 환경의 상호관계에 따른현상 - MDN

여기서 선언될 당시의 렉시컬 환경은 outerEnvironmentReference 에 해당합니다. 렉시컬환경은 outerEnvironmentReference 과 environmentRecord 에 의해 변수의 유효범위인 스코프가 결정되고 스코프 체인이 가능합니다.

*(1) 외부 함수의 변수를 참조하는 내부 함수 *

let outer = function () {
    let a = 1;
    let inner = function () {
        console.log(++a); // 2
    };
    inner();
};

outer();

• inner 함수 내부에서는 a를 선언하지 않았기 때문에 environmentRecord 에서 값을 찾지못하므로 outerEnvironmentReference 에 지정된 상위 컨텍스트인 outer 의 LexicalEnvironment 에 접근하여 a를 찾습니다.
• outer 의 실행 컨텍스트가 종료되면 LexicalEnvironment 의 식별자들 (a, inner) 참조를 지웁니다. ⇒ 참조가 없어지므로 가비지 컬렉터 수집 대상이 됩니다.

(2)외부 함수의 변수를 참조하는 내부 함수

let outer = function () {
    let a = 1;
    let inner = function () {
        return ++a; 
    };
    return inner; // inner 함수 자체를 반환
};

let outer2 = outer();  
console.log(outer2);  // 2 
console.log(outer2); // 3

• inner 함수는 outer 함수의 내부에 선언되었으므로 outer 함수의 LexicalEnvironment 가 담길 것입니다. 스코프 체인을 통해서 outer 에서 선언한 변수 a 에 접근해서 1만큼 증가 시킬것입니다.

하지만 inner 함수의 실행 시점에서 이미 outer 함수는 이미 실행 종료된 상태인데 어떻게 outer 함수의 LexicalEnvironment 에 접근할 수 있을까요?

바로 가비지 컬렉터의 동작 방식 때문입니다!

가비지 컬렉터는 어떤 값을 참조하는 변수가 하나라도 있다면 수집대상에 포함시키지 않기 때문입니다.

그래서 다음과 같이 outer 의 실행이 종료 되더라도 inner함수는 outer2 가 참조하고 있으므로 가비지 컬렉터 수집대상에서 제외 되는 것입니다!

클로저 정리

클로저란? 어떤함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상!

클로저와 메모리 관리

• 클로저는 메모리 누수의 위험이 있어서 지양해야 한다고 주장하는 사람들이 있습니다.
• 하지만 메모리 소모는 클로저의 본질적인 특성일 뿐입니다. 오히려 이러한 특성을 정확히 이해하고 잘 활용하도록 해야합니다.

클로저의 메모리 관리 방법

• 어떤 필요에 의해 의도적으로 함수의 지역변수를 메모리를 소모하도록 함으로써 발생하는데 필요성이 사라진 시점에는 더는 메모리 소모하지 않게 하면 됩니다.
• 참조 카운트를 0으로 만들면 GC가 수거할것이고 메모리는 회수 될것입니다.

참조 카운트를 0으로 만드는 방법은?

식별자를 참조형이 아닌 기본형 데이터(null이나 undefined)를 할당하면 됩니다.

코드예시

let outer = (function () {
    let a = 1;
    let inner = function () {
        return ++a;
    }
    return inner;
})();

console.log(outer());
console.log(outer());
outer = null; // outer 식별자의 inner 함수 참조를 끊음

클로저 사용 사례

1. 콜백 함수 내부함수로 선언해서 외부변수를 직접 참조

const fruits = ['apple', 'banana', 'peach'];
const $ul = document.createElement('ul'); // (공통 코드)

fruits.forEach(function (fruit) { // (A) 
    var $li = document.createElement('li');
   $li.innerText = fruit;
   $li.addEventListener('click', function() {// (B) 
      alert('your choice is ' + fruit); // 클로저 fruit 외부 변수 참조 
   });

   $ul.appendChild($li);
});

document.body.appendChild($ul);

• forEach 를 사용하여 fruits의 개수만큼 실행 컨텍스트 생성
• A의 실행 종료 여부와 무관하게 클릭 이벤트에 의해 각 컨텍스트의 B가 실행될 때는 B의 outerEnvironmentReference가 A의 LexicalEnvironment를 참조하게 됩니다. 따라서 B가 참조할 예정인 변수 fruit에 대해서는 A가 종료된 후에도 GC대상에서 제외되고, 계속 참조가 가능합니다.

2. bind 메서드를 활용한 클로저 - bind를 사용하여 함수의 this와 인자를 고정한 후, 클로저를 사용하지 않고 변수에 접근할 수 있습니다.

var alertFruit = function (fruit) { 
   alert('your choice is ' + fruit);
}

fruits.forEach(function (fruit) {
   const $li = document.createElement('li');
   $li.innerText = fruit;
   $li.addEventListener('click', alertFruit.bind(null, fruit)); 
   $ul.appendChlid($li);
});

document.body.appendChild($ul);

• alertFruit.bind(null, fruit)를 호출하면, alertFruit의 this를 null로 설정하고, 첫 번째 인자로 fruit을 고정한 새로운 함수가 반환됩니다.
• 그렇게 반환된 함수가 addEventListener의 핸들러로 등록이 되고 클릭시 alertFruit이 실행되며 fruit이 전달이 됩니다.
• 하지만 내부의 this가 원래의 this와 달라지기때문에 다른방식으로 해야합니다.

3. 고차함수 사용

const alertFruitBuilder = function (fruit) {
     return function () { 
      alert('your choice is ' + fruit);
   };
};

fruits.forEach(function (fruit) {
   const $li = document.createElement('li');
   $li.innerText = fruit;
   $li.addEventListener('click', alertFruitBuilder(fruit)); 
   $ul.appendChild($li);
});

• alertFruitBuilder라는 함수 내부에서는 익명함수를 반환합니다.
• 이 함수의 실행 결과가 다시 함수가 되며, 이렇게 반환된 함수를 리스너에 콜백 함수로써 전달하게됩니다.
• 이후에 클릭 이벤트가 발생하면 이 함수의 실행 컨텍스트가 열리면서 alertFruitBuilder의 인자로 넘어온 fruit를 outerEnvironmentReference에 의해 참조할 수 있게 됩니다.  즉, alertFruitBuilder의 실행 결과로 반환된 함수에는 클로저가 존재하게 됩니다.

접근 권한 제어(정보 은닉)

• 정보 은닉 : 어떤 모듈의 내부 로직에 대해 외부로의 노출을 최소화해서 모듈간의 결합도를 낮추고 유연성을 높이고자 하는 현대 프로그래밍의 중요한 개념입니다.
  • public : 외부에서 접근 가능
  • private: 내부에서만 사용하며 외부에 노출 않되는 것

이러한 부분을 자바스크립트에서는 직접 부여하지 못하기 때문에 클로저를 이용하면 구분이 가능합니다!

const outer = function () {
   let a = 1;
   const inner = function () {
      return ++a;
   };
   return inner;
};

const outer2 = outer();
console.log(outer2());
console.log(outer2());

• 클로저를 활용해 외부 스코프에서 함수 내부의 변수들 중 선택적으로 일부의 변수에 대한 접근 권한을 부여 가능하게 됩니다.
• 즉 outer라는 변수를 통해 outer함수를 실행은 가능하지만 outer함수 내부에는 개입이 불가능합니다!
• outer함수가 return한 정보에만 접근할 수 있는 것입니다.
• 즉 외부에 제공하고자 하는 정보들을 모아서 return하고 내부에서만 사용할 정보들은 return 하지 않는 것으로 접근 권한 제어가 가능한 것입니다. return한 변수들은 public 이되고, 그렇지 않으면 private가 되는 것입니다.
• 또한 덮어쓰기가 가능할 수 있기 때문에 object.freeze() 를 사용해서 접근권한은 제어할 수 있습니다.

부분 적용 함수

n개의 인자를 받는 함수에 미리 m개의 인자만 넘겨 기억시켰다가 (n-m)개의 인자를 넘겨서 원하는결과 얻게 하는 방법입니다.

코드예시

var partial = function() {
  var originalPartialArgs = arguments;
  var func = originalPartialArgs[0];
  if (typeof func !== 'function') {
    throw new Error('첫 번째 인자가 함수가 아닙니다.');
  }
  return function() {
    var partialArgs = Array.prototype.slice.call(originalPartialArgs, 1);
    var restArgs = Array.prototype.slice.call(arguments);
    return func.apply(this, partialArgs.concat(restArgs));
  };
};

var add = function() {
  var result = 0;
  for (var i = 0; i < arguments.length; i++) {
    result += arguments[i];
  }
  return result;
};
var addPartial = partial(add, 1, 2, 3, 4, 5);
console.log(addPartial(6, 7, 8, 9, 10));      // 55

var dog = {
  name: '강아지',
  greet: partial(function(prefix, suffix) {
    return prefix + this.name + suffix;
  }, '왈왈, '),
};
dog.greet('입니다!');                          // 왈왈, 강아지입니다.

커링 함수

커링함수란 여러개읜 인자를 받는 함수를 하나의 인자만 받는 함수로 나눠서 순차적으로 호출될 수 있게 체인 형태로 구성한것

• 커링은 한번에 하나의 인자만 전달하는 것을 원칙으로 합니다.
• 중간 과정상 함수를 실행한 결과는 그다음 인자를 받기 위해 대기만 할 뿐으로 마지막 인자가 전달되기 전까지는 원본 함수가 실행 되지 않습니다.

코드 예시

var curry3 = function(func) {
  return function(a) {
    return function(b) {
      return func(a, b);
    };
  };
};

var getMaxWith10 = curry3(Math.max)(10);
console.log(getMaxWith10(8));            // 10
console.log(getMaxWith10(25));           // 25

var getMinWith10 = curry3(Math.min)(10);
console.log(getMinWith10(8));            // 8
console.log(getMinWith10(25));           //10 

• 필요한 인자 개수만큼 함수를 만들어 계속 return합니다.
• 다만 인자가 많아질수록 가독성이 떨어지지만 화살표함수를 사용하여 해결할 수 있습니다.

• 다른 코드의 인자로 넘겨주는 함수 입니다.
• 콜백함수를 넘겨받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에 실행할 수 있습니다.
• 즉 인자로 넘겨줌으로써 제어권도 함께 위임한 함수입니다.

콜백함수의 this

• 콜백함수도 함수이기 떄문에 this는 기본적으로 전역객체를 참조하지만, 제어권을 넘겨받은 코드에서 콜백함수에 별도로 this가 될 대상을 지정할 수있습니다.

Array.prototype.map = function (callback, thisArg) {
  let mappedArr = [];
  for (let i = 0; i < this.length; i++) {
    let mappedValue = callback.call(thisArg || window, this[i], i, this);
    mappedArr[i] = mappedValue;
  }
  return mappedArr;
};

다음과 같이 this 를 명시적으로 바인딩하기 때문에 this 에 다른값이 담기는것을 확인할 수 있습니다.

콜백함수는 함수다

당연한 소리라고 생각할 수 있지만 만약 객체의 메서드를 전달하더라도 메서드가 아닌 함수로 호출되는것을 확인할 수 있습니다.

let obj = {
  vals: [1, 2, 3],
  logValues: function (v, i) {
    console.log(this, v, i);
  },
};
obj.logValues(1, 2); // {vals: [1, 2, 3], logValues: f} 1 2
[4, 5, 6].forEach(obj.logValues); // Window {...} 4 0 ...

• obj.logValues(1, 2) 로 호출했을때는 this는 obj를 가리키지만 forEach 를 사용하여 콜백함수로 불렀을때는 메서드로서 호출이 아닌 함수로 호출되었기 때문에 this가 전역객체를 바라보게 됩니다.

콜백 지옥과 비동기 제어

콜백지옥이란?

콜백함수를 익명함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들정도로 깊어지는 현상

비동기

동기의 반댓말로 현재 실행 중인 코드의 완료 여부와 무관하게 다음 코드로 넘어가는 것입니다.

• setTimeout : 사용자의 요청에 의해 특정시간 경과까지 실행 보류
• addEventListener : 사용자의 개입이 있을때 함수실행하도록 대기
• XMLHttpRequest : 별도의 대상에 요청하고 응답이 왔을때 실행하도록 대기

콜백지옥 예시

setTimeout(function (name) {
    var coffeeList = name;
    console.log(coffeeList);

    setTimeout(function (name) {
        coffeeList += ", " + name;
        console.log(coffeeList);

        setTimeout(function (name) {
            coffeeList += ", " + name;
            console.log(coffeeList);

              setTimeout(function (name) {
                coffeeList += ", " + name;
                console.log(coffeeList);
              },500,"카페라떼");
        },500,"카페모카");
    },500,"아메리카노");
},500,"에스프레소");

• 비동기 제어를 위해 콜백함수를 사용하다 보면 콜백 지옥에 빠지기 때문에 Promise, Generator, async/await를 사용해서 벗어날 수 있습니다. 이부분은 다음에 조금더 깊게 다뤄보겠습니다.

this란?

this 는 기본적으로 실행 컨텍스트가 생성될 때 결정됩니다. 즉 함수가 호출될 때 실행컨텍스트가 생성되므로 this는 함수를 호출할 때 결정됩니다.

어떤 방식으로 호출하느냐에 따라서 this의 값이 달라집니다.

전역 공간에서의 this

• 전역컨텍스트를 생성하는 주체가 전역 객체이기 때문입니다.
• 브라우저에서는 window이고 node.js 환경에서는 global입니다.

여기서 잠깐!

전역변수를 생성하게 되면 자바스크립트 엔진은 이를 전역 객체의 프로퍼티로도 할당하게 되는데 그 이유는?

자바스크립트의 모든 변수는 실은 특정 객체(렉시컬 환경)의 프로퍼티로서 동작합니다.

즉 실행 컨텍스트는 변수를 수집해서 렉시컬 환경의 프로퍼티로 저장하고 이후 어떤 변수를 호출하게 되면 렉시컬환경을 조회해서 있으면 반환하는 형식입니다.

메서드로서의 this

함수 vs 메서드

둘의 차이점은 독립성입니다.

• 함수: 독립적인 기능을 수행
• 메서드: 자신을 호출한 대상 객체에 관한 동작을 수행

자바스크립트의 메서드란 ?

일반적으로 객체의 프로퍼티에 할당된 함수로 이해하곤 하는데 틀립니다. 어떤 함수를 개체의 프로퍼티에 할당한다고 해서 그 자체로서 메서드가 되는 것이 아니라 객체의 메서드로서 호출한 경우만 메서드로 동작하고 아니면 함수로 동작합니다.

let func = function(x){
    console.log(this,x)
}

func(1). // Window{...} 1

let obj = {
    method:func
};

obj.method(2) // {method: f} 2 

다음과 같이 결괏값을 보면 함수는 그대로인데 어디서 부르냐에 따라 this가 달라지는 것을 볼 수 있습니다.

어떻게 함수로서의 호출과 메서드로서의 호출을 구분할까요?

함수 앞에 점(.)이 있는지만으로 구분할 수 있습니다. 있으면 메서드, 없으면 함수입니다. 물론 대괄호 표기법에 따른 경우도 메서드로서 호출한 것입니다!

아래의 예시를 보면 마지막 점 앞에 명시된 객체가 this(호출한 주체)가 되는 것을 볼 수 있습니다!

let func = function(){
    console.log(this)
}

let obj = {
    methodA:func,
    inner: {
        methodB: func
    }
};

obj.methodA() // obj
obj.inner.methodB() // obj.inner

그렇다면 함수로서 호출한 경우의 this는?

this는 호출한 주체에 대한 정보가 담기는 것이므로 함수를 호출하는 것은 호출 주체를 명시하지 않고 개발자가 코드에 직접 관여해서 실행한 것이기 때문에 주체 정보를 알 수 없는 것입니다. 자바스크립트 특성상 함수 같은 경우는 그래서 this는 전역 객체를 바인딩하게 됩니다.

문제점

let obj1 = {
    outer: function() {
        console.log(this);   
        var innerFunc = function() {
            console.log(this);    
        }
        innerFunc(); // Window{...}

        let obj2 = {
            innerMethod : innerFunc
        };
        obj2.innerMethod();  //{innerMethod: f}
    }
}
obj1.outer(); // {outer: f}

다음과 같은 상황을 보면 알 수 있듯이 outer 내부에 있는 innerFunc를 함수로 호출한 경우와 메서드로 호출한 경우가 다른 거를 확인 할 수 있습니다. 이렇게 되면 this에 대한 구분은 명확해지지만 this가 주는 인상이 달라질뿐더러 자연스러워지지 않아집니다.

화살표 함수

• 이러한 문제를 해결하고자 this를 바인딩 하지 않는 화살표 함수가 등장했습니다.
• 화살표 함수는 실행컨텍스트를 생성할 때 this를 바인딩하는 과정 자체가 빠져서 상위스코프의 this를 활용하게 됩니다.

let obj = {
    outer: function() {
        console.log(this);    
        let innerFunc = () => {
            console.log(this); 
        };
        innerFunc();//  { outer: f}
    }
}
obj.outer();//  { outer: f}

그 밖에 방법으로 call,apply등의 메서드를 활용해서 명시적으로 this를 바인딩할 수 있습니다.

콜백함수에서의 this

setTimeout(function () {
  console.log(this);
}, 300) // window
  [(1, 2, 3, 4, 5)].forEach(function (x) {
    console.log(this, x); // window
  });

document.body.innerHTML += '<button id="a">클릭</button>';
document.body.querySelector("#a").addEventListener("click", function (e) {
  console.log(this, e); // this 상속 
});

1. setTimeout함수에서는 전역 객체인 Window가 출력
2. forEach함수에서도 전역 객체인 Window가 출력
3. addEventListener 에서는 자신의 this를 상속하도록 정의

따라서 콜백함수에서의 this는 콜백함수의 제어권을 갖는 함수(메서드)가 this를 결정

생성자 함수에서의 this

• 자바스크립트는 함수에 생성자 역할을 함께 부여했습니다.
• new 명령어를 통해 함수를 호출하면 생성자로서 동작하게 됩니다.
• 일반적인 객체지향프로그래밍 언어처럼 this가 인스턴스 자신이 됩니다.

명시적 this 바인딩

• call

Function.prototype.call(thisarg [, arg1[, arg2[, ...]]])

• apply

Function.prototype.apply(thisarg [, argsArray])

메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령어로 this를 바인딩할 수 있습니다.

둘의 기능은 완전 동일하지만 call은 첫 번째 인자를 제외한 모든 인자를 호출할 함수의 매개변수로 지정 apply는 두번째인자를 배열로 받아 호출할 함수의 매개변수로 지정

call/apply 메서드의 활용

let obj = {
  0: "a",
  1: "b",
  2: "c",
  length: 3,
};

Array.prototype.push.call(obj, "d");
console.log(obj); // { '0': 'a', '1': 'b', '2': 'c', '3': 'd', length: 4 }

let arr = Array.prototype.slice.call(obj);  // [ 'a', 'b', 'c', 'd' ]
console.log(arr);

• 객체에는 배열 메서드를 적용할 수 없는데 다음과같이 배열의 구조와 유사한 경우(유사 배열 객체) call과 apply메서드를 사용하여 배열 메서드를 사용할 수 있습니다.
• slice 경우 시작 인덱스와 마지막 인덱스값을 받아 시작부터 마지막 인덱스 앞부분까지 배열요소를 추출하는 메서드인데 매개변수가 없는 경우 원본 배열의 얕은 복사본을 반환합니다.

하지만 call/apply를 사용하여 형변환하는것은 ‘this를 원하는 값으로 지정해서 호출한다’라는 본래의 메서드의 의도와는 다소 동떨어진 활용법이라 ES6에서는 Array.from으로 배열로 전환하는 메서드가 생겼습니다.

bind

Function.prototype.bind(thisArg[, arg1[, arg2[, ...]]])

call과 비슷하지만 즉시 호출하지 않고 넘겨받은 this 및 인수들을 바탕으로 새로운 함수를 반환

bind 예시

let func = function (a, b, c, d){
  console.log(this, a, b, c, d);
}
func(1, 2, 3, 4);   // Window{...} 1 2 3 4

let bindFunc1 = func.bind({ x: 1 });
bindFunc1(5, 6, 7, 8);  // { x: 1 } 5 6 7 8

let bindFunc2 = func.bind({ x: 1 }, 4, 5);
bindFunc2(6, 7);     // { x: 1} 4 5 6 7
bindFunc2(8, 9);     // { x: 1} 4 5 8 9

예시와 같이 다시 새로운 함수를 호출할 때 인수를 넘기면 그 인수들은 기존 bind메서드를 호출할 때 전달했던 인수들의 뒤에 이어서 등록됩니다.

별도의 인자로 this를 받는경우(콜백함수 내의 this)

let report = {
  sum: 0,
  count: 0,
  add: function () {
    let args = Array.prototype.slice.call(arguments); // 배열로 변환 
    args.forEach(function (entry) {
      this.sum += entry;
      ++this.count;
    }, this); // 콜백 함수 내부에서의 this가 해당 this로 바인딩
  },
  average: function () {
    return this.sum / this.count;
  },
};
report.add(60, 85, 95);
console.log(report.sum, report.count, report.average()); // 240 3 80

• 콜백 함수를 인자로 받는 메서드 중 일부는 추가로 this로 지정할 객체(thisArg)를 인자로 지정할 수 있는 경우가 있습니다.
• 배열에서는 forEach, map, filter, some, every, find, findIndex, flatMap, from
• Set, Map

실행할 코드에 제공할 환경 정보들을 모아놓은 객체

즉 동일한 환경에 있는 코드들을 실행할때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아 올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장합니다.

실행컨텍스트에 담기는 정보들

• VariableEnvironment : 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경정보 + 선언시점의 LexicalEnvironment의 스냅샷( 즉 변경사항 반영되지않음)
• LexicalEnvironment: 처음에는 VariableEnvironment와 같지만 변경사항이 실시간으로 반영
• ThisBinding: 식별자가 바라봐야할 대상 객체

VariableEnvironment 와 LexicalEnvironment

VariableEnvironment와 LexicalEnvironment는 처음에는 같은 내용을 담고 있지만, VariableEnvironment는 변경되지 않는 반면 LexicalEnvironment는 실시간으로 변경됩니다.

VariableEnvironment 에 먼저 정보를 담은 다음 그대로 복사해서 LexicalEnvironment 를 생성하고 실행 시 활용합니다.

VariableEnvironment 와 LexicalEnvironment 의 내부에는 다음과 같이 구성되어 있습니다.

• EnvironmentRecord : 현재 컨텍스트의 식별자 정보 저장
• OuterEnvironmentReference: 외부 환경 정보 참조

왜 VariableEnvironment와 LexicalEnvironment를 분리할까?

• ES6 이전에는 var만 존재했으며, VariableEnvironment에서 변수(var)와 함수 선언(function)을 관리하면 충분했습니다.
• ES6 이후 let과 const가 도입되면서 블록 스코프 가 추가되었습니다.
• 하나의 실행 컨텍스트에서 여러 블록 스코프를 관리하려면, 실행 중에 변할 수 있는 환경(LexicalEnvironment)이 필요해졌습니다.

아래의 예시를 확인하겠습니다.

1. var와 let/const의 스코프 차이

function example() {
    console.log(a); // undefined 
    console.log(b); // ReferenceError

    var a = 1;
    let b = 2;
}
example();

• var는 함수 스코프이고, 호이스팅될 때 undefined로 초기화가됩니다.
• let은 블록 스코프이고, TDZ(Temporal Dead Zone)가 존재해 접근 시 오류가 발생합니다.
• 따라서 var는 VariableEnvironment, let과 const는 LexicalEnvironment에서 관리해야 합니다.

여기서 잠깐! TDZ란?

let과 const 변수는 선언되었지만 초기화되기 전까지 접근할 수 없는 구간으로 TDZ라고 합니다. 자바스크립트에서 let과 const도 var처럼 호이스팅되지만 초기화되지 않기 때문에 접근하면 ReferenceError가 발생하게 됩니다.

2. 블록 스코프 관리 필요성

function outer() {
    var x = 1;  // VariableEnvironment에 저장
    let y = 2;  // LexicalEnvironment에 저장

    if (true) {
        let y = 3;  // 새로운 LexicalEnvironment 생성(블록 스코프)
        console.log(y);  // 3
    }

    console.log(y);  // 2 (if 블록 내부의 y와 다름)
}
outer();

• if 블록이 실행되면서 새로운 LexicalEnvironment가 생성됩니다.
• 블록이 끝나면 if 블록의 LexicalEnvironment는 제거됩니다.
• y의 값이 if 블록 안과 밖에서 다르게 유지됩니다.

여러 블록 스코프를 동적으로 관리하려면 LexicalEnvironment가 필요합니다.

EnvironmentRecord( 변수 및 함수 정보 저장)

environmentRecord 는 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장 되어있습니다

• 컨텍스트를 구성하는 함수에 지정된 매개변수 식별자
• 선언된 함수 자체
• 변수의 식별자

변수정보를 수집하는 과정이 끝나더라도 실행 컨텍스트가 관여할 코드들은 실행되기 전 상태이기 때문에 코드가 실행되기 전에도 불구하고 자바스크립트엔진은 이미 해당 환경의 변수들을 모두 알고있는 것입니다.

즉 자바스크립트 엔진은 식별자들을 최상단으로 끌어올려놓은 다음 코드를 실행 한다라고 봐도 무방한것입니다.

이것이 호이스팅 입니다.

호이스팅 규칙

• 변수 : 변수명만 끌어올리고 할당과정은 원래자리에서
• 함수선언: 함수 전체를 끌어올림
• 함수표현: 변수만 끌어올림

함수 선언문과 함수 표현문

아래와 같이 함수 선언문과 표현문을 표현했을때 호이스팅으로 인해 각각 다르게 동작합니다.

console.log(sum(1,2))
console.log(multiply(3,4))

function sum(a,b){
    return a+b;
}

var multiply= function (a,b){
    return a*b;
}

호이스팅이 된 상태

var sum = function sum(a,b){
    return a+b;
}

var multiply;
}

console.log(sum(1,2)) // 3
console.log(multiply(3,4))// ReferenceError

multiply= function (a,b){
    return a*b;
}

다음과 같이 함수 선언문은 자체로 호이스팅이 되지만 함수 표현식 은 변수만 호이스팅이 되어 함수 표현식에서 에러가 나오게 됩니다.

그렇다면 어떤것을 써야할까?

• 함수 선언문을 쓰게 되면 물론 호이스팅이 되어 순서에 상관없이 사용할 수 있어서 편할 수 있다고 생각할 수 있지만 개발은 사람이 하는것 이기 때문에 선언된 후에 호출 할 수 있는 방법이 자연스러울 것 같습니다.
• 또한 함수 선언문을 쓰게 되면 다음과 같은 문제가 발생 할 수 있습니다.

console.log(sum(3,4)) 

function sum(a,b){
    return a+b;
}

var a = sum(1,2)
console.log(a)
...

function sum(a,b){
    return a+'+'+b + ' = ' +(a+b);
}

var c = sum(1,4)
console.log(c)

다음과 같이 동일한 함수를 2개 선언해 버리면 호이스팅 때문에 마지막에 할당한 함수, 즉 마지막에 선언된 함수만 실행되어서 문제가 발생할 수 있습니다.

개발은 협업이기때문에 물론 잘 정해서 사용하면 될 수 있지만 이러한 부분을 사전에 차단하여 작성하는것도 중요하다고 생각합니다

스코프,스코프 체인, outerEnvironmentReference

스코프란?

** 식별자에 대한 유효범위 ** 어느 범위에서 변수를 참조할 수 있는지를 결정합니다. 경계 밖에서 선언한 변수는 외부 뿐 아니라 내부에서도 접근이 가능하지만 경계 내부에서 선언한 변수는 내부에서만 접근이 가능합니다 .

스코프 체인과 outerEnvironmentReference

outerEnvironmentReference는 현재 호출된 함수가 선언될 당시의 LexicalEnvironment 를 참조합니다.

• 코드상에서 어떤 변수에 접근하려고 하면 현재 컨텍스트의 LexicalEnvironment 를탐색해서 발견되면 그값을 반환하고, 못하면 outerEnvironmentReference 에 담긴LexicalEnvironment 를 탐색합니다.

• 전역 컨텍스트의 LexicalEnvironment 가지 없으면undefined 를 반환합니다.

스코프 체인 예제

var globalVar = "I am global";

function outer() {
    var outerVar = "I am outer";

    function inner() {
        var innerVar = "I am inner";
        console.log(innerVar);  // I am inner
        console.log(outerVar);  // I am outer
        console.log(globalVar); // I am global
    }

    inner();
}

outer();
console.log(outerVar);  // ReferenceError

스코프 체인 동작 방식:

1. inner() 실행 시, 먼저 innerVar를 찾고, 없으면 outerVar를 찾고, 그래도 없으면 globalVar를 찾게됩니다.
2. outerVar는 outer() 내부에서 선언되었으므로 inner()에서 접근 가능하지만, outer() 바깥에서는 접근할 수 없습니다.
3. 전역 변수 globalVar는 어디에서든 접근 가능 합니다.

• 원시형(number,string,boolean,null,undefined,symbol)
• 참조형(object,array,function,date,regexp,map,weakmap,set,weakset)

원시형과 참조형을 어떤 기준으로 구분하는것일까??

원시형은 할당이나 연산시에 복제되고 참조형은 참조된다고 말을 하지만 엄밀히 말하면 둘 모두 복제를 하지만 원시형은 값이 담긴 주솟값을 복제하는 반면 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다는점

원시형은 불변성??

숫자 10을 담은 변수 a에 다시 숫자 15를 담으면 a의 값은 문제없이 15로 변하는데 불변성이라는것은 무엇일까요??

자바스크립트에서 변수 선언

var a;

위와 같이 변수를 선언하게 되면 메모리에 비어있는 공간 하나를 받게됩니다. 그 공간에 대한 식별자를 a로 지정합니다.

a = abc;

이후 데이터를 할당하게 되면 메모리에서 a라는 이름을 가진 주소를 검색해 그곳에 데이터가 할당 됩니다.

하지만 실제로 해당 위치에 abc가 직접 저장되는것이 아니라 데이터를 저장하기 위한 별도의 메모리 공간을 다시 확보해서 문자열을 저장하고, 그주소를 변수 영역에 저장하는 식으로 이뤄 집니다.

왜? 한단계를 더 거쳐가야 하는 것 일까?

• 데이터 변환을 자유롭게 하기 위함
• 메모리를 더욱 효율적으로 관리하기 위함

만약 미리 확보한 공간 내에서만 데이터 변환을 할 수 있다면 변환한 데이터를 다시 저장하기 위해서는 확보된 공간을 변환된 데이터 크기에 맞게 늘리는 작업이 선행되어야합니다!

물론! 해당 공간이 메모리 마지막에 있다면 뒤로 늘리기만 하기 때문에 상관없지만 중간에 있으면 해당 공간을 늘리고 뒤에 저장된 데이터를 뒤로 옮겨야하기 때문에 이동시킨 주소를 각 식별자에 대해 다시 연결해야하는 작업을 해야되는 불상사가 일어납니다!

결국 효율적으로 문자열 데이터의 변환을 처리하려면 변수와 데이터를 별도의 공간에 나누어 저장하는것이 최적!

문자열 abc에 def를 추가한다고 했을때도 이미 abc가 저장된 공간에 abcdef를 넣는것이 아니라 abcdef라는 문자열을 새로 만들어 별도의 공간에 저장하고 그 주소를 변수공간에 연결합니다. 제거도 마찬가지입니다.

불변성

var b = 5;
var c = 5;
b = 7;

b 에 숫자 5를 할당합니다. 그러면 컴퓨터는 5가 데이터영역에 있는지 확인하고 없으면 데이터 공간을 하나 만들어서 5를 저장합니다. 그리고 그 주소를 b에 저장합니다

그다음 줄에서는 c를 같은 수인 5를 할당하려고 하는데 컴퓨터는 데이터 영역에서 5를 찾고 이미 만들었으니 그 주소를 재활용합니다.

그다음 변수 b의 값을 7로 바꾸고자 하는데 그러면 기존에 저장된 5 자체를 7로 만드는 것이아니라 기존애 저장했던 7을 찾아서 있으면 재활용하고 없으면 새로 만들어서 b에 저장 합니다.

즉 5와 7을 모두 다른값으로 변경할 수 없습니다!

그래서 값 자체를 다른값으로 변경할 수 없고 변경은 새로 만든 동작을 통해서만 이루어지기 때문에 불변성입니다

가비지 컬렉팅을 당하지 않는한 영원히 변하지 않습니다!

가변성

원시값은 불변값이면 참조값은 가변값인가?

• 기본적인 성질은 가변값인경우가 많지만 설정에 따라 불가능한 경우도 있고 아예 불변값으로 활용하는 방안도 있습니다

참조형 데이터

var obj1 ={
    a:1,
    b:'bbb'
};

1. 변수영역의 공간을 확보하고 주소의 이름은 obj1으로 설정
2. 데이터 저장공간에 여러개를 프로퍼티들을 등록해야하니 별도의 변수 영역을 마련하고 그 주소를 저장
3. 각각의 영역의 주소에 a와 b라는 프로퍼티 이름을 지정
4. 데이터영역에 값이 있는지 확인 후 없으면 추가 있으면 그 주소에 있는값을 사용

위와 같이 형성이 되기 때문에 원시값 데이터와 달리 객체의 변수(프로퍼티) 영역이 별도로 존재한다는 점

즉 원시값과 같이 데이터 영역은 그대로 사용하고 값은 불변의 값이지만 객체의 변수 영역 에는 다른값을 대입할 수 있기 때문에 참조형 데이터는 가변값이다라고 하는것입니다

즉 다음과 같이 적용하게 된다면

var obj1 ={
    a:1,
    b:'bbb'
};

obj1.a=2 

데이터 영역에서 2를 찾게 되고 없다면 새로운 데이터 영역에 2를 저장하고 해당 객체의 변수 영역의 값에 2의 주소를 저장합니다.

즉 새로운 객체가 만들어 진것이 아니라 기존의 객체 내부의 값만 바뀌게 되는것입니다

또한 만약 중첩된 참조일 경우에는 만약 내부 참조가 원시값으로 바뀌게 되어 아무도 참조하지 않는다면 GC로 인해 처리되어집니다.

그렇다면 복사를하게 되면 어떻게 될까??

원시값

var b = 5;
var c = b;

c=10

1. 변수에 대한 영역을 생성후 식별자를 b로 만듬
2. 데이터 영역에 5가있는지 확인 후

*있으면 -> * 5에 대한 주소를 참조하게 만들고 *없으면 -> * 데이터영역을 만들고 5를 넣은다음 그값을 변수에서 참조하게 만듬 3. 똑같이 변에 대한 영억을 생성후 식별자를 c로 만듬 4. b에대해 알아보고 그값을 찾아옴 즉 b가 참조하는 주소값을 참조함 5. c = 10 데이터 영역에 10이 있는지 찾고 *있으면 -> * 그것을 c가 참조하게 만들고 *없으면 -> *새로 데이터영역에 똑같이 생성 후 참조

결론 값이 달라짐

참조값

var obj1 ={
    a:1,
    b:'bbb'
};
var obj2 = obj1

obj2.a=2 

1. 변수에 대한 영역 생성후 obj1을 식별자로지정

2. 데이터 영역의 빈공간을 확보하고 여러개가 담겨야 하기때문에 별도의 변수 영역을 확보하고 주소 저장

3. 각각의 영역에 a와 b를 식별자로 하고 데이터영역에 값이 있는지 보고 똑같이 수행

4. var obj2 =obj1 변수에 대한 영역 생성후 obj2로 지정

5. obj1에 대해 알아보고 그값을 참조함

6. obj2.a=2 데이터 영역에 2가 있는지 확인 후 똑같이 처리 하게 되는데 별도의 변수영역에 2에대한 값을 참조하게 변경

   결론 같은 값이 참조되게됨

즉 변경되는 메커니즘은 똑같지만 참조형은 한단계 더 거치게 되어 같은값을 참조되게 되고 원시값은 값이 변경되는것 처럼 보이는것!!!!

그래서 기본형은 값을 복사하고 참조형은 주솟값을 복사하는것이 아니라 결국 모두다 주솟값을 참조하는것!

만약 객체의 프로퍼티가 아니라 객체 자체를 변경해버린다면??

• 원시값의 변경과 같이 똑같이 변경됨
• 즉 가변 은 객체의 내부의 프로퍼티를 변경할때만 적용된다는 것

객체 끼리 값 비교

const obj1 = { a: 1 };
const obj2 = { a: 1 ,b:1};

console.log(obj1 === obj2) //false
console.log(obj1.a === obj2.a) //true
console.log(obj1.a === obj2.b) //true

이것도 마찬가지로 똑같이 동작해서 다음과같이 나오는 것입니다.

• 변수 영역 생성: obj1이라는 식별자를 위한 변수를 생성
• 객체 참조 영역 생성: 객체를 저장할 새로운 메모리 공간을 확보하고, obj1이 이 공간을 참조하게 함
• 객체 내부 프로퍼티 처리: 객체 내부에서
  • a라는 프로퍼티를 위한 별도의 변수 영역을 생성
  • 데이터 영역에서 숫자 1이 있는지 확인하고, 없으면 새로 저장 후 참조
• 변수 영역 생성: obj2라는 식별자를 위한 변수를 생성
• 새로운 객체 참조 영역 생성: obj1과는 별개로 새로운 객체를 저장할 메모리 공간을 다시 확보하고, obj2가 이 공간을 참조하게 함 ( 이 부분 때문에 false)
• 객체 내부 프로퍼티 처리:
  • a라는 프로퍼티를 위한 별도의 변수 영역을 생성
  • 데이터 영역에서 숫자 1이 이미 존재하는지 확인하고, 기존의 1을 참조 (이것 때문에 true)

이번 프로젝트에서 react-query를 적용해 보면서 공부한 내용에 대해 적어보려고 합니다.

react-query란?

비동기 데이터를 패칭,캐싱,동기화,업데이트 하는 작업을 쉽게 해주는 라이브러리

react-query의 장점

• 캐싱 및 리패칭을 통해 최신의상태의 데이터를 참조
• 고유한 쿼리의 키만 가지고 어디서든 데이터 접근 가능
• 서버상태의 데이터관리

캐싱이란?

자주 사용하는 데이터나 연산 결과를 임시로 저장해 두고, 필요할 때 빠르게 접근할 수 있도록 하는 기술

• 캐싱을 통해 동일한 데이터의 반복적인 호출을 줄여 서버의 부하를 낮춤
• 최신데이터를 사용자에게 보여줄때 단순히 로딩창을 보여주는것이 아닌 이전상태의 화면을 보여줌으로써 더나은 경험을 제공

그렇다면 언제 캐싱을 통해 데이터를 재사용하고 언제 서버에 요청을 하는것인가??

react-query에서는 stale(오래된)데이터와 fresh(신선한)데이터로 구분지어 stale한 데이터로 간주되면 필요할때 refetch가 됩니다.

여기서 필요할때란?

• 쿼리의 새로운 인스턴스가 마운트 될때(refetchOnMount)
• 창이 refocuse 될때(refetchOnWindowFocus)
• 네트워크가 다시 연결될때(refetchOnReconnect)

그렇다면 stale데이터와 fresh데이터는 어떻게 구분하는가?

바로 staleTime을 통해 구분합니다.

staleTime이란?

데이터가 fresh라고 간주되는 시간입니다.

즉 staleTime만큼은 앞에서말한 필요할때(위에서 말한refech가 되는 조건)여도 refetch가 일어나지 않습니다(즉 fresh하다는것)

staleTime의 기본값은 0이기때문에 데이터를 받자마자 stale한 데이터로 간주된다 따라서 따로 설정을 통해 변경해주어야합니다

또한, cacheTime을 통해 데이터가 캐시에 남아 있는 기간을 정의할 수 있습니다.

react-query의 데이터 관리

react-query는 ContextAPI를 기반으로QueryClientProvider라는 컴포넌트를 통해 전역적으로 Query Client를 제공합니다.

Query Client란?

query(비동기 데이터)를 관리하는 주요 객체입니다. Query Client는 모든 쿼리 상태를 관리하고, 데이터를 가져오고, 캐싱하고, 동기화하며, 데이터를 업데이트하는 등의 작업을 수행합니다.

따라서 react-query는 데이터를 전역상태로 관리하면서 여러 컴포넌트에서 비동기 데이터를 쉽게 공유할 수 있게 설계 되었습니다.

사용 방법

GET 요청일경우에는 useQuery를 사용하고 POST,PUT,DELETE와 같은 요청인 경우에는 useMutation을 사용합니다.

useQuery

useQuery는 쿼리의 unique key값과 promise 반환하는 함수가 인자로 들어갑니다.

unique key : 애플리케이션 전체에서 쿼리를 다시 가져오고,캐싱하고,공유하는데 내부적으로 사용하는값입니다.

useQuery의 반환값은 API요청에 대한 성공 및 실패 등 다양한 상태와 데이터를 포함하는 객체를 반환합니다. ex) data,error,isLoading,isError,isSuccess,isFetching, refetch,status

코드예시

function Todos() {
  const { isPending, isError, data, error } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodoList,
  })

  if (isPending) {
    return <span>Loading...</span>
  }

  if (isError) {
    return <span>Error: {error.message}</span>
  }

  // We can assume by this point that `isSuccess === true`
  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}

** 조건부 실행 **

또한 useQuery에서 세 번째 인자로enabled에 값을 넣어 특정조건(값이 true가 될때)이 만족할때만 쿼리를 실행시켜 동기적으로 사용 가능합니다.

** 코드예시**

import { useQuery } from 'react-query';

const fetchUser = async (id) => {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
};

function UserProfile({ userId }) {
  const { data, isLoading } = useQuery(['user', userId], () => fetchUser(userId), {
    enabled: !!userId // userId가 존재할 때만 쿼리를 실행
  });

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>User Profile</h1>
      <p>{data?.name}</p>
    </div>
  );
}

useMutation

• useQuery와 달리 데이터를 생성/업데이트/삭제하거나 서버 사이드 이펙트를 수행하는 데 사용됩니다.
• useMutation으로 mutation 객체를 정의하고, mutate메서드를 사용하면 요청 함수를 호출해 요청이 보내집니다.

function App() {
  const mutation = useMutation({
    mutationFn: (newTodo) => {
      return axios.post('/todos', newTodo)
    },
  })

  return (
    <div>
      {mutation.isPending ? (
        'Adding todo...'
      ) : (
        <>
          {mutation.isError ? (
            <div>An error occurred: {mutation.error.message}</div>
          ) : null}

          {mutation.isSuccess ? <div>Todo added!</div> : null}

          <button
            onClick={() => {
              mutation.mutate({ id: new Date(), title: 'Do Laundry' })
            }}
          >
            Create Todo
          </button>
        </>
      )}
    </div>
  )
}

invalidation

• 쿼리의 데이터가 mutation과 같은 요청으로 인해 서버에서 바뀌었다면 백그라운드에 남은 데이터는 stale상태가 되어 쓸모가 없어지는 상황이 발생할 수 있습니다.
• invalidateQueries 메소드를 통해 query가 stale되었다고 처리하여 refetch가 진행됩니다.
• 쿼리에 해당 키가 공통적으로 들어가있다면 모두 invalidation이 가능합니다.

코드예시

// 캐싱된 쿼리 모두 invalidtate
queryClient.invalidateQueries()
// 키에 todos가 들어간 쿼리 모두 invalidtate
queryClient.invalidateQueries({ queryKey: ['todos'] })

react-query vs SWR

그렇다면 비동기 데이터를 관리해주는 라이브러리인 SWR이 있음에도 react-query를 선택한 이유가 무엇인지 알아보겠습니다.

react-query, SWR

react-query는 서버상태를 받아 캐싱하고, 동기화하고, 업데이트하는 것을 쉽게 해줍니다.

SWR은 먼저 캐시에서 데이터를 반환한 다음, 서버에 데이터를 가져오는 요청을 보내고, 마지막으로 최신 데이터를 제공하는 라이브러리입니다.

문법차이

//react-query
const { data, isLoading, error } = useQuery('myData', fetchMyData, { cacheTime: 10000 });

//SWR
const { data, error } = useSWR('myData', fetchMyData, { dedupingInterval: 5000 });

문법에서는 크게 차이가 없는것을 확인할 수 있습니다.

Devtools

React-Query에서는 공식적으로 react-query/devtools 를 통해 devtool을 지원합니다. 하지만 SWR 또한 devtools를 사용할 수 있지만, 서드 파티 라이브러리를 이용해야합니다.

무한 스크롤 구현

SWR과 react-Query 모두 무한 스크롤을 구현하는 데 필요한 기능들을 제공하지만 SWR은 부가적인 코드를 작성해야 합니다. 그에 반해 react-Query에는 getPreviousPageParam, fetchPreviousPage, hasPreviousPage, isFetchingPreviousPage기능을 통해 좀 더 간단하게 구현할 수 있습니다.

Selectors

SWR과 달리 react-Query에서는 select를 통해 원하는 데이터를 추출하여 반환할 수 있습니다.

import { useQuery } from 'react-query'

function User() {
  const { data } = useQuery('user', fetchUser, {
    select: user => user.username,
  })
  return <div>Username: {data}</div>
}

Data Optimization

SWR과 다르게 react-query는 쿼리가 업데이트될 때만 refetch를 진행한다. 또한 여러 컴포넌트에서 동일한 쿼리를 사용하는 경우 한번에 묶어 업데이트합니다.

Garbage Collection

SWR 와 달리 react-Query는 지정된 시간(기본 5분)동안 쿼리가 사용되지 않는다면 자동으로 메모리 해제를 하는 Garbage Collection을 통해 메모리를 관리해줍니다.

느낀점

다음과 같이 react-query를 제대로 사용하게 된다면 SWR보다더 편리하고 좋은 성능으로 사용할 수 있겠다라고 판단되어서 react-query를 사용하게 되었습니다.

이번 프로젝트의 주제는 그래프를 활용한 영화 추천 서비스인 CINEMATE입니다.

최근 온라인 스트리밍 플랫폼의 성장과 다양한 디지털 콘텐츠의 생산이 영화 소비 경험을 새로운 수준으로 끌어올렸습니다. 이렇게 다양한 볼거리가 존재함에 불구하고 사용자들은 오히려 선택의 어려움을 겪고있습니다. 이러한 문제를 해결하기위해 유의미한 영화 추천과 함께 관련영화 정보를 제공하는 서비스를 만들어보았습니다.

팀구성

프론트엔드 1명, 백엔드 1명 , AI 1명

기술 스택

• React
• TypeScript
• React-query
• Styled-compont
• React-Router
• Recoil
• Storybook
• ...

구현 기능

• 로그인/회원가입(중복확인)
• 영화 추천을 위한 영화 설문받기
• 회원기반,장르별 영화추천 페이지 (영화 좋아요 및 상세 페이지 이동)
• 영화 상세정보페이지 (별점작성,수정기능 리뷰 작성,수정,삭제 기능)
• 영화 검색 기능(인풋값 변경마다 요청)
• 최근 검색 기록
• 마이페이지 (좋아요누른 영화 목록,내가쓴댓글)

2. 프론트엔트 진행계획

이번 프로젝트를 통해 기존에 했던 방식보다 새로운 라이브러리, 폴더구조 등 추가 해보면서 공부하고 싶었습니다.

2-1. 폴더구조

저는 지금까지 프로젝트를 하면서 폴더 구조를 컴포넌트와 페이지로만 분류하고 컴포넌트도 페이지별,기능별로 뚜렷한방법이 있는게 아니라 그때그때마다 추가해서 만들었습니다. 앞으로 팀원들과 협업을 하게되면 이러한 부분은 문제가 되기때문에 고쳐나가고 싶어서 폴더구조에대해 알아보았습니다.

아토믹디자인

폴더구조에 대해 구글링을 해보니 아토믹 디자인 패턴이라는 방식에 대해 알게 되었습니다. 아토믹 디자인 패턴 방식은 화학적 관점에서 영감을 얻은 디자인 시스템이며 아래와 같이 이루어져 있습니다.

• 원자(atom)
• 분자(molecule)
• 유기체(organism)
• 템플릿(template)
• 페이지(page)

Atom

atom은 label,input, button과 같이 더이상 분해할 수 없는 컴포넌트입니다.

Molecule

molecule은 인터페이스에서 하나의 단위로 함께 작동하는 단순한 UI요소 그룹입니다. 원자(atom)가 결합되면 다음과 같이 목적을 갖게됩니다.

Organism

organism은 molecule보다 좀더 복잡한 UI요소 그룹입니다. atom, molecule, organism으로 구성될 수 있습니다. 한가지 목적이 아닌 다양한 목적을 갖게됩니다.

Template

template는 component들을 layout에 배치하고 디자인의 기본 컨텐츠 구조를 명학화게 표현하는것입니다. 즉 페이지의 뼈대를 나타낼 수 있습니다.

Page

page는 template에서 실제 컨텐츠들이 추가된 것입니다. 즉 완성본이라고 볼 수 있습니다.

아토믹 디자인 패턴에 대해 공부하다보니 구성을 보다 정확하고 쉽게 구현할 수 있을거같아서 선택하게 되었습니다.

적용하면서 어려웠던 점

어느정도까지 분리해야하는가

다음과 같이 search창의 input과 로그인 page의 input이 있습니다.
저의 고민은 다음과 같았습니다.

• input창안에 값을 입력하는부분의 input을 atom으로 분리해야 하는가?
• 만약 atom으로 분리하게 되면 서로 같은 input태그를 사용하기 때문에 재사용성을 고려해 같은 component로 분리 해야 하는가??
• 그렇다면 하나의 input component안에 너무 많은 역할을 맡아서 혼란을 야기 하지 않을까??
• 만약 다른 atom으로 분리하면 다른 input을 만들때마다 계속 따로 만들어야할텐데 굳이 atom으로 만들어야하는가?? 까지 고민했습니다.

그래서 저의 결론으로는 재사용성을 고려해 같은 atom으로 분리하면 하나의 input-component에 너무많은 기능을 담당해야하고, 또한 따로 분리하면 굳이 component의 개수만 많아지기만하고 재사용성이 없다고 판단해서 따로 atom으로 분리하지 않고 form component마다 따로 선언해서 사용했습니다.

이렇게 처음 적용하다보니 헷갈리는것도 많고 어떤게 효율적인지가 구분이 안되는경우가 조금 있었습니다.

2-2. 데이터 관리

지금까지 데이터를 받을때 따로 처리나 관리를 하지 않았습니다. 하지만 많은 개발자분들이 데이터 관리를 해야한다고해서 정리해서 적용해 보았습니다.

client state 와 server state

• client state : 모달과 같은 데이터, input value를 보고 button 비활성화와 같은 데이터

• server state : 서버에서 넘어오는 state(사용자 정보,각종 데이터)

왜 client state와 server state를 분리해야하는가??

사실 이것에 대해 정말 잘 이해가 되지 않았습니다..
도대체 분리하지 않으면 어떠한 문제가 생기는거지..? client state는 recoil,jutai, Zustand...를 쓰고 server state는 react-query,swr... 을 써야하는거지??에 대한 의문점이 들어서 공부해보았습니다.

• client 와 server state는 성질이 달라서입니다. server state는 클라이언트에서 관리하지 않고 서버에서 관리하기 때문입니다. 만약 client에서 관리하게 된다면 보안적인 문제와 server state는 모든 사용자와 공유되어야되는데 성능에 문제가 될 수 있습니다.

• 또한 여러 클라이언트가 동시에 server state를 변경할 수 있습니다. 클라이언트 상태는 독립적이며 서버 상태와 동기화되지 않을 수 있습니다. 즉 예를 들어 온라인 쇼핑몰의 재고 수량 server state인데 client state로 분리하지 않아서 여러 클라이언트가 동시에 이 데이터를 수정하려고 하면 수량에서 문제가 발생할 수 있기때문에 분리해야합니다.

react-query

• 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 매우 쉽게 만들어주는 라이브러리

• React의 ContextAPI를 기반으로 동작합니다.
• 전역상태를 관리하는 QueryClient가 존재하는데, 해당 QueryClient는 우리가 Query를 사용할 때 명시하는 unique key를 기반으로 데이터를 저장합니다.

캐싱

• 캐싱이란 특정 데이터의 복사본을 저장하여 이후 동일한 데이터에 접근 할때 보다 빠르게 접근하는 방법입니다.
• react-query에서는 캐싱을 통해 데이터에 대한 반복적이고, 불필요한 API 호출을 줄여 서버에 대한 부하를 줄입니다.

useQuery

• Get 요청을 할때 사용합니다.
• 첫번째 파라미터로 unique key가 들어가고, 두번째 파라미터로 비동기 함수(fetch 함수)가 들어갑니다.
• return 값은 api의 성공, 실패 , api return 값을 포함한 객체입니다.

function Todos() {
  const { isPending, isError, data, error } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodoList, //
  })

  if (isPending) {
    return <span>Loading...</span>
  }

  if (isError) {
    return <span>Error: {error.message}</span>
  }

  // We can assume by this point that `isSuccess === true`
  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}

• useQuery의 반환값을 보면 isPending, isError,data,error 를 통해 각각의 상태에 맞게 확인 할 수 있습니다.

아직은 Get요청인 useQuery에 대해서만 공부해서 추후에 다른 요청에 대해서 공부한다음 react-query에 대해 자세하게 정리해보겠습니다.

2-3. storybook

storybook은 UI 구성요소와 페이지를 독립적으로 구축하기 위한 tool입니다. 이번 프로젝트를 진행하면서 storybook을 추가한 이유는 다음과 같습니다.

• 추후에 디자이너와의 협업을 위해 storybook을 활용해서 디자이너 분도 component 어떻게 동작하는지,보이는지 바로바로 확인할 수 있습니다.
• component를 개발할때 불필요하게 코드를 추가해서 일일이 확인할 필요없기때문입니다.

storybook 사용방법

storybook을 설치하게 되면 .storybook폴더가생성되며, 이 폴더 내에는 main.ts, preview.ts가 있습니다. 이 두개의 팡일로 storybook설정을 할 수 있습니다.

main.ts

• 스토리의 위치와 사용할 애드온을 정의하는 설정이 포함됩니다.

  import type { StorybookConfig } from "@storybook/react-webpack5";
  

const config: StorybookConfig = { stories: ["../src//*.mdx", "../src//*.stories.@(js|jsx|mjs|ts|tsx)"], //storybook 경로 addons: [ //addons 배열은 Storybook에 추가 기능을 제공하는 플러그인 목록입니다. "@storybook/preset-create-react-app", "@storybook/addon-onboarding", "@storybook/addon-links", "@storybook/addon-essentials", "@chromatic-com/storybook", "@storybook/addon-interactions", ], framework: { name: "@storybook/react-webpack5", options: {}, }, docs: { autodocs: "tag", }, staticDirs: ["../public"], }; export default config;

#### preview.ts
- 프로젝트의 모든 스토리에 글로벌하게 적용될 설정을 정의하며, 스토리의 매개변수와 데코레이터를 설정할 수 있습니다.
```typescript
import type { Preview } from "@storybook/react";
import { withThemeFromJSXProvider } from '@storybook/addon-themes';
import { theme } from './../src/styles/theme';
import { ThemeProvider } from 'styled-components';
import GlobalStyle from '../src/styles/GlobalStyle'


const preview: Preview = {
  parameters: { // storybook global parameter 설정 
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    backgrounds: { // storybook 배경 설정 
      default: 'dark',
      values:[
        {
          name: 'dark',
          value: '#211F1F'
        },
      ]  
  },
  },
};

export default preview;

export const decorators = [
  withThemeFromJSXProvider({
  themes: {theme},
  Provider: ThemeProvider, //Provider: ThemeProvider를 설정하여 테마를 제공하게 합니다.
  GlobalStyles: GlobalStyle //GlobalStyles: GlobalStyle을 설정하여 전역 스타일을 적용합니다.
})];

이후 main.ts에서 설정한 폴더에서 해당 component에 맞는 storybook 파일을 생성하면됩니다.

//PrimaryButton.stories.ts
import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test'; // 클릭 이벤트 핸들러
import PrimaryButton from '../components/atoms/PrimaryButton'; //해당하는 component import

// 메타 데이터
const meta: Meta<typeof PrimaryButton> = {
  title: 'Components/Button', // 어디로 분류 할건지 
  component: PrimaryButton,  // 렌더링 할 컴포넌트
};

export default meta;
type Story = StoryObj<typeof meta>; // story 객체 타입 정의 

export const PrimaryBtn: Story = { // 각각의 props 초기값 설정 
  args: {
    type: 'button',
    children: '회원가입',
    onClick: fn(),
    state: true,
    size: 'large',
  },
};

storybook은 component 분류 및 화면에 나타내는 정도인 기본적인 기능만 구현해보았습니다.

3. 프로젝트중 트러블 슈팅 및 구현 🔥

프로젝트를 진행하면서 별거아니지만,,, 제가 겪었던 문제상황에 대하여 적어보려고합니다.

3-1. react-hook-form

문제상황

💡 react-hook-form을 사용하여 공통 컴포넌트에 validation을 적용하려고했는데 register를 사용하여 validation을 적용할 경우 동작하지 않습니다.

• onChange,required등 ref도 포함되어있어서 결국 props로 ref를 넘기고 있기 때문에 에러가 발생합니다.

ref를 props로 못넘기는이유

_💡 ref는 react에서 DOM에 직접 접근하기 위해 사용되기 때문입니다. 따라서 일반적인 props로는 사용불가능합니다 _

에러 해결 방법

• forwardRef를 이용해서 컴포넌트를 한 번 감싸주는 방법을 사용하여 ref를 props로 넘겨주었습니다.

export interface FormInputProps {
  type: 'nickName' | 'password' | 'email';
  value?: string;
  placeholder?: string;
  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
  validationStatus: 'default' | 'error' | 'success';
  register?: UseFormRegisterReturn;
  duplicatedStatus?: boolean;
}

const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
  (
    {
      type,
      placeholder,
      value,
      onChange,
      validationStatus,
      register,
    }: FormInputProps,
    ref,
  ) => {
    let image;
    if (type === 'nickName') {
      image = nameSvg;
    } else if (type === 'email') {
      image = emailSvg;
    } else if (type === 'password') {
      image = passwordSvg;
    }

    return (
      <InputContainer $validationStatus={validationStatus}>
        <InputImg src={image} />
        <InputField
          ref={ref}
          type={type}
          placeholder={placeholder}
          value={value}
          {...register}
          onChange={onChange}
        />
        {validationStatus !== 'default' && (
          <CheckImg
            src={validationStatus === 'error' ? errorSvg : successSvg}
          />
        )}
      </InputContainer>
    );
  },
);
FormInput.displayName = 'FormInput';

export default FormInput;

3-2. input state

문제상황

💡 최근검색어 기능을 구현하기 위해 검색어를 로컬스토리지에 저장하였습니다. 검색창이 header로 구성되어있어서 검색어 값을 전역상태로 두어야하는 상태여서 검색어를 전역상태 + 로컬스토리지에 저장하려고 recoil-persist 사용했습니다. submit 버튼을 누르자 input의 state값이 초기화 되는 에러가 발생했습니다.

에러 해결 방법

1. recoil-persist를 처음 사용하는거라 무언가를 잘못설정했나 생각했지만 설정에서 틀린것을 발견하지 못했습니다.
2. 그렇다면.. 혹시.. event.preventDefault()에서 문제가되나...? 그럴리가...? 역시나 아니였습니다.
3. 그래서 console을 찍으면서 하나하나 value값이 어디서 사라지는지 확인했습니다.
4. onChange가 되었을때는 값이 존재하는것을 확인하였고, onSubmit을 하자 값이 사라진것을 확인했습니다.
5. 따라서 submit이 되었을때 문제가 되는것을 확인하였고 form태그를 다시 확인해보니 form태그안에 form을 제출하는 버튼과 input의 value값을 지우는 cancel 버튼이 있는데 cancel버튼의 type을 지정을안해서 type이 submit으로 설정이되어버려서 submit이 되었을때 cancel버튼까지 같이 동작해버려서 생기는 에러였다......

버튼의 type설정을 잘하자...

3-3. 회원가입 input의 validation오류

문제상황

💡 회원가입할때 input의 value값이 이메일,닉네임의 중복확인(API)과 정규식(react-hook-form)에 부합하는지를 onChange가 될때마다 확인했어야합니다 . 하지만 어째서인지 onChange될때 react-hook-form의 validation 확인은 되지만 중복확인API요청을 보내지 않는 error가 발생했습니다.

에러 해결 방법

1. 디바운싱을 적용하지 않아 onChange가 될때마다 중복확인API 요청을 짧은 시간안에 빠르게 보내는 문제로 인해 단순 느려짐인줄 알았지만...아니였습니다.

2. 네트워크 창을 확인해보니 요청자체가 보내지지 않아서 API자체에 문제인줄 알았는데 아니였습니다...

3. react-hook-form은 동작하는데 그러면 왜..? API요청만 동작이 되지않는지 모르겠어서 찾아보니 원인을 알게되었습니다.

4. react-hook-form은 기본적으로 input의 필드를 ref로 비제어 컴포넌트로 관리하기때문에, onChange로 input의 value값을 react상태로 관리하려면 input의 field가 일관성이 사라져 충돌하는 문제가 발생한다는것을 알게되었습니다.

5. react-hook-form 의 Controller를 사용하면 비제어 컴포넌트와 제어 컴포넌트를 같이 사용할 수 있다는것을 알게 되었습니다.

따라서 다음과같이 구현하였습니다.

export interface FormInputProps {
  type: 'nickName' | 'password' | 'email';
  value?: string;
  control: Control<SignupInput>;
  placeholder?: string;
  onInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
  validationStatus: 'default' | 'error' | 'success';
  duplicatedStatus?: boolean;
}

const CustomFormInput = ({
  type,
  placeholder,
  control,
  onInputChange,
  validationStatus,
  duplicatedStatus,
}: FormInputProps) => {
  let image: string;
  if (type === 'nickName') {
    image = nameSvg;
  } else if (type === 'email') {
    image = emailSvg;
  } else if (type === 'password') {
    image = passwordSvg;
  }

  return (
    <Controller
      control={control}
      name={type}
      render={({ field: { onChange, value } }) => (
        <InputContainer $validationStatus={validationStatus}>
          <InputImg src={image} />
          <InputField
            name={type}
            type={type}
            placeholder={placeholder}
            value={value || ''}
            onChange={(event) => {
              onChange(event.target.value);
              onInputChange(event);
            }}
          />
          {validationStatus !== 'default' && (
            <CheckImg
              src={validationStatus === 'error' ? errorSvg : successSvg}
            />
          )}
        </InputContainer>
      )}
    />
  );
};

export default CustomFormInput;

3-4. 별점 구현(트러블 슈팅 보단 구현 방법)

문제상황

💡 별점을 아래의 사진같이 색이 없는 별을 클릭하게 되었을때 별점이 등록되도록 설정하려고 하였고 별점을 0.5점 단위로 구현하려했습니다. 하지만 0.5점이면 클릭했을때를 어떻게 구별할 수 있을까..?

구현 방법

1. 위에 보이는 별위에 가운데를 짤라서 세로로 button을 반개씩 두개 만들었습니다.
2. 왼쪽을 클릭하면 현재 index보다 작은 index의 별들을 다 색칠하고 현재 index의 별은 반개만 색칠(점수는 현재 index-0.5점으로)
3. 오른쪽을 클릭하면 현재 index까지 별들을 색칠(점수는 현재 index)

코드는 다음과 같습니다.

const GradeStar = ({
  score,
  movieId,
  index,
  setScore,
  onRatingClick,
}: GradeStarProps) => {
  const handleLeftClick = () => {
    const rating = index - 0.5;
    setScore(rating);
    onRatingClick({
      movieId: movieId,
      rating,
    });
  };

  const handleRightClick = () => {
    setScore(index);
    onRatingClick({
      movieId: movieId,
      rating: index,
    });
  };

  const renderStar = () => {
    if (index - score === 0.5) {
      return <HalfStar />;
    } else if (score >= index) {
      return <FillStar />;
    } else {
      return <EmptyStar />;
    }
  };

  return (
    <StarContainer>
      <ButtonContainer>
        <LeftButton onClick={handleLeftClick} />
        <RightButton onClick={handleRightClick} />
      </ButtonContainer>
      {renderStar()}
    </StarContainer>
  );
};

export default GradeStar;

4. 프로젝트를 진행하면서 느낀점

초반설계가 굉장히 중요하다

디자인의 초반설계를 하게되면서 초반 설계가 얼마나 중요한지 깨달았습니다. 아무래도 캡스톤디자인겸으로 만들어서 시간이 많지않아서 급하게 하다보니 대략 적으로만 설계하고 디테일한 부분들은 잘 고려하지 않았는데 그러한 부분때문 에 개발과정에서 계속적으로 수정해야하는 부분들이 늘어났습니다.

ex)회원가입할때 닉네임과 이메일같은 부분들은 중복확인이 필수인데... 생각을못해서 디자인적으로 버튼을 넣기가 애매해져서.... input의 value값이 onChange 될때마다 중복확인API요청을 보냈습니다... 물론 잘못된 방법은 아니지만 조금더 깔끔하게 진행할 수 있지 않았을까 생각이 들었습니다.

그리고 저희 서비스의 header가 총 3개로

• 뒤로 가는 버튼이 있는 header
• logo가 있는 header
• searchInput이 있는 header 다음과 같이 있습니다.

제일 처음에는 main-layout에서 3개의 header를 page에 맞게 각각 불러왔지만, 한번의 header만을 불러서 header-component 안에서 각각의 page에 맞게 하는것이 더 가독성의 측면에서나 성능에서나 좋다고 생각했습니다. 하지만 search-input값을가지고 최근검색어 구현 및 각각의 page에 따른 뒤로가기 버튼 구현은 공통component로 구현하기에는 다소 복잡함이 있었습니다.

이러한 경험을 통해 초반에 어떠한기능이 정확하게 있고 어떤식으로 구현할지에 대해서 시간이 오래걸리더라도 정확하게 설계하고 들어가는것이 중요하다고 느꼈습니다.

PR메시지 및 Issue 활용

이번 프로젝트를 마치고 PR창을 다시 보니 생각보다 가독성이 떨어진 느낌이 들었습니다... 중구난방이고 한번에 어떤 기능을 구현했고 어떤것을 만들었는지 불명확한 느낌이 들었습니다. PR을 작성할때 이것도 마찬가지로 초반에 어떤식으로 작성할지에 대해 조금더 고민하고 많은 레퍼런스들을 참고해서 작성해 보도록 하겠습니다. 또한 Issue는 정말 어떠한 error나 issue가 생겼을때 작성하는거로 알고있었는데.... 알고보니 작업단위로도 나타낼 수 있어서 좀 더쉽게 볼 수 있는 기능인걸 알았습니다...
다음프로젝트를 진행할때는 이러한 부분도 조금더 공부해서 적용해 보도록 하겠습니다.

아토믹 디자인 패턴

사실 아토믹디자인 패턴을 사용할때 초반에는 atom,molecule,organism로 나눴을때 정말 분리가 잘되는 느낌을 받았었습니다. 하지만 컴포넌트의 개수가 점점 많아지다보니 각각의 폴더에서 원하는것을 찾기가 어려워졌습니다. 그렇다 보니 폴더구조의 패턴을 정해놓는것이 좀더 쉽게 파일을 찾기위해서인데 이렇게 찾기 어려우면 굳이 원칙대로 사용을 해야될까?? 라는 생각이 들었습니다. 그래서 앞으로는 아토믹 디자인 패턴을 사용한다면 아래와같이 아토믹 디자인 패턴 + 컴포넌트의 종류로 사용할거 같습니다.

5. 이후 보완할점

사실아직 캡디기간내에 기본적으로 구현할 수 있는 부분만 구현했습니다. 팀원들과 상의를 해보니 다들 7월까지는 정해진 일정이 있어서 7월말에서 ~8월에 추가기능 및 보완할점들을 구현할거 같습니다.

추가로 구현 해야 할 점

• 무한스크롤
• 회원가입 중복,검색창(debounce적용)
• react-query(post요청)
• 에러,로딩 핸들링
• 등등 ...

이후에 서비스를 완성하고 다시 회고록을 작성해 보도록 하겠습니다.

타입 체크를 통과 하더라도 런타임에 오류가 발생 할 수 있음

const names = ['Alice', 'Bob'];
console.log(names[2].toUpperCase());

• 타입 스크립트는 앞의 배열이 범위 내에서 사용될거라 가정했지만 실제로도 그러지 않았고 오류가 발생했습니다.
• 타입스크립트가 이해하는값의 타입과 실제값과 차이가 존재하기때문
• 타입시스템이 정적 타입의 정확성을 보장 할거 같지만 꼭 그러지않음

타입스크립트 설정

• 타입 스크립트 컴파일러는 매우 많은 설정을 가지고 있다
  • 커맨드라인을 통해 설정할 수 있고 tsconfig.json 파일로도 가능하다
    • 가급적 설정파일을 사용해서 어떻게 사용할 것인지 프로젝트할 동료들과 정하는것이 좋다
  • noImplicitAny 와 strickNullChecks
    • noImplicitAny : 변수들이 미리 정의된 타입을 가져야 하는지 여부 제어
    • strickNullChecks: null과 undefined가 모든타입에서 허용 되는지 확인하는 설정

코드 생성과 타입이 관계없음을 이해하기

타입 스크립트 컴파일러는 두가지 역할을 독립적으로 수행

• 최신 타입스크립트/자바스크립트를 브라우저에서 동작할 수 있도록 구버전의 자바스크립트로 트랜스파일 합니다.
• 코드의 타입 오류 체크 합니다.

독립적으로 수행되기때문에 타입오류가 있는 코드도 컴파일이 가능하다

런타임에는 타입 체크가 불가능하다

interface Square {
  width: number;
}
interface Rectangle extends Square {
  height: number;
}
type Shape = Square | Rectangle;

function calculateArea(shape: Shape) {
  if (shape instanceof Rectangle) {
                    // 'Rectangle' only refers to a type,
                    //  but is being used as a value here
    return shape.width * shape.height;
                    // Property 'height' does not exist
                    // on type 'Shape'
  } else {
    return shape.width * shape.width;
  }
}

• instanceof 체크는 런타임에 일어나지만 Rectangle은 타입이기 때문에 런타임 시점에 아무런 역할을 할 수 없습니다.
• 타입 스크립트의 타입은 “제거 가능”이다 실제로 자바스크립트로 컴파일 되는 과정에서 모든 interface,type은 제거된다.
  

그래서 명확하게 하기 위해서는 아래 코드와 같이 런타임에 타입 정보를 유지하는 방법이 필요합니다 .

1. 속성 체크

interface Square {
  width: number;
}
interface Rectangle extends Square {
  height: number;
}
type Shape = Square | Rectangle;
function calculateArea(shape: Shape) {
  if ('height' in shape) {
    shape;  // Type is Rectangle
    return shape.width * shape.height;
  } else {
    shape;  // Type is Square
    return shape.width * shape.width;
  }
}

• 속성 체크는 런타임에 접근 가능한 값에만 관련되지만 타입 체커 역시도 shape의 type을 Rectangle로 보정하기 때문에 오류가 사라짐
  

2. 태그 기법

interface Square {
  kind: 'square';
  width: number;
}
interface Rectangle {
  kind: 'rectangle';
  height: number;
  width: number;
}
type Shape = Square | Rectangle;

function calculateArea(shape: Shape) {
  if (shape.kind === 'rectangle') {
    shape;  // Type is Rectangle
    return shape.width * shape.height;
  } else {
    shape;  // Type is Square
    return shape.width * shape.width;
  }
}

class Square {
  constructor(public width: number) {}
}
class Rectangle extends Square {
  constructor(public width: number, public height: number) {
    super(width);
  }
}
type Shape = Square | Rectangle; // 타입으로 참조

function calculateArea(shape: Shape) {
  if (shape instanceof Rectangle) { // shape instanceof Rectangle 값으로 참조
    shape;  // Type is Rectangle
    return shape.width * shape.height;
  } else {
    shape;  // Type is Square
    return shape.width * shape.width;  // OK
  }
}

• 인터페이스는 타입으로만 사용가능하지만 Rectangle을 클래스로 선언하면 타입과 값으로 모두 사용할 수 있습니다.
  
  

  런타임 타입은 선언된 타입과 다를 수 있습니다

interface LightApiResponse {
    lightSwitchValue : boolean;
}

async function setLight(){
    const response = await fetch('/light');
    const result : LightApiResponse = await response.json();
  setLightSwitch(result.lightSwitchValue);
}

function setLightSwitch(value: boolean) {
  switch (value) {
    case true:
      turnLightOn();
      break;
    case false:
      turnLightOff();
      break;
    default:
      console.log(`I'm afraid I can't do that.`);
  }
}

• 만약 lightSwitchValue의 값이 boolean이 아니라 문자열이라면 default가 발생하게 됩니다.

• Typescript에서는 런타임타입과 선언된타입이 맞지 않을 수 있습니다.
  
  

  타입스크립트 타입으로는 함수를 오버로드할 수 없습니다.

• 타입 스크립트가 함수 오버로딩 기능을 지원하기는 하지만 온전히 타입수준에서만 동작합니다

• 하나의 함수에 대해 여러개의 선언문을 작성할 수 있지만 구현체는 오직 하나뿐입니다

function add(a: number, b: number): number;
function add(a: string, b: string): string;

function add(a, b) {
  return a + b;
}

• 두개의 선언문은 타입 정보만 제공 자바스크립트로 변환시 제거 되며 구현체만 남습니다.
  
  

  타입스크립트 타입은 런타임 성능에 영향을 주지않습니다

• 타입과 타입 연산자는 자바스크립트 변환시점에 제거되기 때문에 런타임의 성능에 아무런 영향을 주지 않는다.
  
  

구조적 타이핑에 익숙해지기

• 자바스크립트는 본질적으로 덕 타이핑 기반입니다
  • 덕 타이핑이란? 객체가 어떤 타입에 부합하는 변수와 메서드를 가질 경우 객체를 해당 타입에 속하는 것으로 간주하는것 (상속 관계에 관계없이 타입 호환을 허용)

interface Vector2D {
  x: number;
  y: number;
}
function calculateLength(v: Vector2D) {
  return Math.sqrt(v.x * v.x + v.y * v.y);
}
interface NamedVector {
  name: string;
  x: number;
  y: number;
}
const v: NamedVector = { x: 3, y: 4, name: 'Zee' };
calculateLength(v);  // OK, result is 5

//NamedVector를 위한 calculateLength를 구현할 필요가 없음

interface Vector2D {
  x: number;
  y: number;
}
function calculateLength(v: Vector2D) {
  return Math.sqrt(v.x * v.x + v.y * v.y);
}
interface NamedVector {
  name: string;
  x: number;
  y: number;
}
interface Vector3D {
  x: number;
  y: number;
  z: number;
}
function calculateLengthL1(v: Vector3D) {
  let length = 0;
  for (const axis of Object.keys(v)) {
    const coord = v[axis];
    // 타입 호환때문에 v[axis]의 타입은 어떤 속성이 될 지 모르기때문에 number라고 확정지을 수 없음
    // 따라서 coord는 any type
    length += Math.abs(coord);
  }
  return length;
}
const vec3D = {x: 3, y: 4, z: 1, address: '123 Broadway'};
calculateLengthL1(vec3D);  // OK, returns NaN

• 이러한 문제로 정확한 타입으로 객체를 순회하는것은 어렵기때문에 모든속성을 각각 더하는 구현이 더 낫습니다.
  

테스트를 작성할때는 구조적 타이핑이 유리합니다

interface Author {
  first: string;
  last: string;
}
interface DB {
  runQuery: (sql: string) => any[];
}
function getAuthors(database: DB): Author[] {
  const authorRows = database.runQuery(`SELECT FIRST, LAST FROM AUTHORS`);
  return authorRows.map(row => ({first: row[0], last: row[1]}));
}

• getAuthors함수는 DB 인터페이스를 통해 데이터 베이스에 접근하므로 어떤 특정 데이터베이스에 종속적이지않아서 여러 종류의 데이터베이스와 동작할 수 있습니다.

any 타입 지양하기

• any는 타입 안정성이 떨어진다.
• any는 함수 시그니처를 무시해 버린다.
  • 호출하는쪽은 약속된 타입의 입력을 제공하고 함수는 약속된 타입의 출력 을 반환 합니다.
• any타입은 언어 서비스가 적용되지 않는다.

아래와 같이 자동완성으로 속성이 나타나지 않는다.

• any타입은 코드 리팩터링때 버그를 감춥니다.

interface ComponentProps {
  onSelectItem: (item: any) => void;
}
function renderSelector(props: ComponentProps) { /* ... */ }

let selectedId: number = 0;
function handleSelectItem(item: any) {
  selectedId = item.id; 
}

renderSelector({onSelectItem: handleSelectItem});

handleSelectItem의 매개변수 item이 any로 설정했기때문에 id의 유무에 상관없이 문제가 없다고 할것입니다. 하지만 id의 값이 존재하지 않는다면 타입체커를 통과함에도 불구하고 런타임에는 오류가 발생할 것입니다. 만약 any가 아닌 구체적인 타입을 사용했다면, 타입체커가 오류를 발견했을 것입니다.

이번 포스트에서는 github action을 사용해 dockerhub에 푸시 -> EC2에서 self-hosted로 docker pull 받아서 CI/CD를 구축해보겠습니다.

들어가기에 앞서 간단하게 docker에 대해서 알아보겠습니다.

Docker란??

도커는 컨테이너 기술을 기반으로 한 일종의 가상화 플랫폼입니다. 여기서 컨테이너는 코드, 런타임, 시스템 도구, 시스템 라이브러리 등 애플리케이션을 실행하는 데 필요한 모든 것을 포함하는 표준화된 유닛입니다.

즉 쉽게 말해서 도커는 독립된 환경을 만들어서 충돌없이 사용할 수 있게 만드는 프로그램이라고 할 수 있습니다.

Docker를 쓰는이유는??

• 애플리케이션을 구동하기 위한 환경을 어떤 pc에서도 동일하게 구동하기 위해서 사용합니다.

• vm과 달리 추가적인 os를 올리는것이 아니라 container engine을 설치해서 훨씬 가볍게 사용 할 수 있습니다.

Docker를 사용해 CI/CD

위의 이미지에 보이는거와같이 github repo에 push 될때마다 자동으로 CI/CD를 구축해보려고 합니다.

1. DockerFile 만들기

• 프로젝트 root 디렉토리에 Dockerfile을 만듭니다.
• Docker 이미지를 빌드하기 위해 Dockerfile 작성합니다.

# 가져올 이미지를 정의
FROM node

# 경로 설정하기
WORKDIR /app

# package.json 워킹 디렉토리에 복사 (.은 설정한 워킹 디렉토리를 뜻함)
COPY package.json .

# 명령어 실행 (의존성 설치)
RUN yarn

# 현재 디렉토리의 모든 파일을 도커 컨테이너의 워킹 디렉토리에 복사한다.
COPY . .


# 3000번 포트 노출
EXPOSE 3000

# yarn start 스크립트 실행
CMD ["yarn", "start"]

# 그리고 Dockerfile로 docker 이미지를 빌드해야한다.
# $ docker build . 이미지 생성 

docker run -d -p 3000:3000 --name <container-name> <image-name>

명령어를 보면 -p 3000:3000을 볼 수 있는데 이 명령어는 로컬의 3000번 포트로 접근하는 모든 트래픽을 도커 컨테이너의 3000번 포트로 보낸다는 뜻으로 연결해준다고 볼 수 있습니다.

2. github action작성

이후 github action을 통해 CI/CD를 구축해야하기때문에 아래와 같이 작성해 보았습니다.

name: Test workflow                    # Workflow 이름
on:                                  # Event 감지
  push:
    branches:
      - develop
jobs:
  CI:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: docker login
        uses: docker/login-action@v2
        with:
          username: ${{secrets.DOCKER_USERNAME}}
          password: ${{secrets.DOCKER_PASSWORD}}

      - name: docker image build
        run: docker build -t ${{ secrets.DOCKER_USERNAME }}/${{secrets.IMAGE_NAME}}:${{secrets.IMAGE_TAG}} .

      - name: push image to Docker Hub
        run: docker push ${{secrets.DOCKER_USERNAME}}/${{secrets.IMAGE_NAME}}:${{secrets.IMAGE_TAG}}


  deploy:
        needs: CI
        name: CD
        runs-on: self-hosted
        defaults:
          run:
              working-directory: ../..

        steps:
        - name: Log in to Docker Hub
          uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
          with:
            username: ${{ secrets.DOCKER_USERNAME }}
            password: ${{ secrets.DOCKER_PASSWORD }}


        - name: docker stop container
          run: |
            sudo docker stop $(sudo docker ps -aq) || true
        - name: pull image from docker hub
          run: |
            docker pull ${{ secrets.DOCKER_USERNAME }}/${{secrets.IMAGE_NAME}}:${{secrets.IMAGE_TAG}}
        - name: docker run
          run: |
            docker run -d -p 3000:3000 ${{ secrets.DOCKER_USERNAME }}/${{secrets.IMAGE_NAME}}:${{secrets.IMAGE_TAG}}

• secrets 설정은 github 레포지토리에서 Settings > Secrets and variables > Actions > New repository secret을 눌러서 생성 할 수 있습니다.

yml파일을 하나하나 뜯어서 보자면

jobs:
  CI:
    runs-on: ubuntu-latest     

• CI는 github-action에서 제공해주는 ubuntu로 진행

- name: docker login
        uses: docker/login-action@v2
        with:
          username: ${{secrets.DOCKER_USERNAME}}
          password: ${{secrets.DOCKER_PASSWORD}}

      - name: docker image build
        run: docker build -t ${{ secrets.DOCKER_USERNAME }}/${{secrets.IMAGE_NAME}}:${{secrets.IMAGE_TAG}} .

      - name: push image to Docker Hub
        run: docker push ${{secrets.DOCKER_USERNAME}}/${{secrets.IMAGE_NAME}}:${{secrets.IMAGE_TAG}}

• docker hub 이미지를 push 하기위한 로그인
• docker image build 및 push

deploy:
        needs: CI
        name: CD
        runs-on: self-hosted
        defaults:
          run:
              working-directory: ../..
        steps:
        - name: Log in to Docker Hub
          uses: docker/login-action@f054a8b539a109f9f41c372932f1ae047eff08c9
          with:
            username: ${{ secrets.DOCKER_USERNAME }}
            password: ${{ secrets.DOCKER_PASSWORD }}

• self-hosted로 CD 수행
• docker hub 에서 image를 받아오기 위해 로그인

        - name: docker stop container
          run: |
            sudo docker stop $(sudo docker ps -aq) || true
        - name: pull image from docker hub
          run: |
            docker pull ${{ secrets.DOCKER_USERNAME }}/${{secrets.IMAGE_NAME}}:${{secrets.IMAGE_TAG}}
        - name: docker run
          run: |
            docker run -d -p 3000:3000 ${{ secrets.DOCKER_USERNAME }}/${{secrets.IMAGE_NAME}}:${{secrets.IMAGE_TAG}}

• 기존에 실행중인 컨테이너 중지
• docker hub에서 image pull 받아서 container 실행

이후 self-hosted로 실행되는 ec2에 docker를 설치하고 도커를 실행할 권한을 줘야합니다.

1. 우분투 시스템 패키지 업데이트
sudo apt-get update

2. 필요한 패키지 설치
sudo apt-get install apt-transport-https ca-certificates curl gnupg-agent software-properties-commonsudo apt-get install apt-transport-https ca-certificates curl gnupg-agent software-properties-common

3. Docker의 공식 GPG키를 추가
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

4. Docker의 공식 apt 저장소를 추가
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

5. 시스템 패키지 업데이트
sudo apt-get update

6. Docker 설치
sudo apt-get install docker-ce docker-ce-cli containerd.io

#docker 로그인 할때 오류 발생
sudo usermod -a -G docker $USER

이후에는 EC2에서 docker hub에 login 해보고 image를 pull 받아서 실행시켜봐서 잘 동작하게 된다면 github-action에서 작성한 workflow도 실행 해 보면 시간이 오래 걸렸지만 아래와같이 성공적으로 배포가 완료됩니다.

이번 포스트에서는 docker를 사용해서 CI/CD를 구축해 보았습니다.

이번에는 저번포스트에서 말했던데로 github action과 self-hosted를 사용해서 ec2에 CI/CD를 구축할것입니다.

github action이란?

Github가 공식적으로 제공하는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD 플랫폼입니다. 레포지토리에 대한 모든 pull request를 빌드, 테스트하는 workflow를 생성하거나 merge된 pull request를 프로덕션에 배포할 수 있습니다.

즉 쉽게 말해서 pull request가 생성되거나 코드가 merge,push와 같은 이벤트가 발생 했을때 미리 작성한 작업들을 실행 시켜줄 수 있게하는 것입니다.

github action 구성요소

• Workflow
• Event
• Job
• Action
• Runner

위와 같이 구성되어있습니다.

Workflow

• workflow는 하나 이상의 job으로 구성되고 event에 의해 트리거될 수 있는 자동화된 프로세스입니다.

• repository에는 여러 workflow를 가질 수 있으며 각 workflow는 서로 다른 작업을 수행할 수 있습니다.

• Workflow 파일은 YAML으로 작성되고, Github Repository의 .github/workflows 폴더 아래에 저장됩니다.

Event

• workflow 실행을 발동시키는 특정한 활동입니다.

• 깃허브에 소스코드를 푸시하면 발생하는 push event, pull request event, issue event 등 깃허브에서 발생하는 대부분의 작업을 event로 정의할 수 있습니다.

Job

• Job은 여러 Step으로 구성되고, 가상 환경의 인스턴스에서 실행됩니다.

• 다른 Job에 의존 관계를 가질 수 있고, 독립적으로 병렬 실행도 가능합니다.

step

• Job에서 실행되는 개별 작업입니다.

• 명령어를 실행하거나 action을 실행할 수 있습니다.

Action

• workflow의 가장 작은 블럭으로 job을 만들기 위해 step들을 연결할 수 있습니다.

• 재사용이 가능한 Component이고 개인적으로 Action을 만들거나 Marketplace의 Action을 사용할 수 있음

Runner

• runner는 workflow가 실행될때 사용하는 서버입니다.

• 각 runner는 한번에 한개의 job을 실행할 수 있습니다.

• Github에서 호스팅해주는 Github-hosted runner와 직접 호스팅하는 Self-hosted runner로 존재합니다.

self-hosted로 github action

1.runner 설치

• 일단 처음에는 runner를 설치해야합니다.

• github repository > settings > actions > runners > new self-hosted runner 클릭

• 아래단계 대로 진행하면됩니다.

# Create a folder
$ mkdir actions-runner && cd actions-runner
# Download the latest runner package

$ curl -o actions-runner-linux-x64-2.311.0.tar.gz -L https://github.com/actions/runner/releases/download/v2.311.0/actions-runner-linux-x64-2.311.0.tar.gz
# Optional: Validate the hash

$ echo "29fc8cf2dab4c195bb147384e7e2()93b346a6175435265aa278  actions-runner-linux-x64-2.311.0.tar.gz" | shasum -a 256 -c
# Extract the installer

$ tar xzf ./actions-runner-linux-x64-2.311.0.tar.gz

# Create the runner and start the configuration experience
$ ./config.sh --url https://github.com/wwweric12/test-chatUniv --token AX2PVGRK7JIAATFQRRKW

# Last step, run it!
$ nohup ./run.sh & > nohup.out #백그라운드로 실행

2.runner 확인

• Offline : 서버에 설치는 되었으나 listen상태가 아닐 경우
• Idle : 서버에 설치되었고 listen 상태인 경우
• Active : 서버에 설치되었고 workflow가 실행 중인 경우

위의 과정을 거치게 되면 보통의 경우 위의 사진과 같이 Idle의 상태입니다. 이렇게 된다면 runner 설치 및 확인까지 완료하였습니다.

github action 작성

다음으로 github repository에 들어가서 yml 파일을 작성해 보았습니다. github action workflow는 github/workflows아래에 작성해야 합니다.

아래의 코드는 제가 작성한 yml파일입니다. 한번에 보여주고 하나하나 뜯어서 확인해 보도록 하겠습니다.

name: Test workflow                    # Workflow 이름
on:                                  # Event 감지
  push:
    branches:
      - develop
jobs:                                # Job 설정
   build:
      name: CI
      runs-on: self-hosted
      defaults:
          run:
              working-directory: ../..
      steps:
      - name: Use Node.js 18.x
        uses: actions/setup-node@v1
        with:
          node-version: 18.x

      - name: Stop old server (ignore error)
        run: |
            pm2 stop test

      - name: build univ
        run: |
            cd test-chatUniv
            git pull origin develop
            yarn install
            yarn run build 

   deploy:
      needs: build
      name: CD
      runs-on: self-hosted
      defaults:
          run:
              working-directory: ../..
      steps:    
      - name : run new server
        run : |
            cd test-chatUniv
            pm2 serve build 3000 --spa --name "test"

workflow 실행 조건입니다. develop 브랜치에 push 될때마다 실행됩니다.

name: Test workflow                    # Workflow 이름
on:                                  # Event 감지
  push:
    branches:
      - develop

jobs:                                # Job 설정
   build:
      name: CI
      runs-on: self-hosted
      defaults:
          run:
              working-directory: ../..

• self-hosted로 설정
• 처음 시작할때 working-directory 변경

 steps:
      - name: Use Node.js 18.x
        uses: actions/setup-node@v1
        with:
          node-version: 18.x

      - name: Stop old server (ignore error)
        run: |
            pm2 stop test

      - name: build univ
        run: |
            cd test-chatUniv
            git pull origin develop
            yarn install
            yarn run build 

• node 버전 확인
• 이전에 실행중인 pm2 stop
• 변경사항 최신화 후 build

이후에는 배포 입니다.

deploy:
      needs: build
      name: CD
      runs-on: self-hosted
      defaults:
          run:
              working-directory: ../..
      steps:    
      - name : run new server
        run : |
            cd test-chatUniv
            pm2 serve build 3000 --spa --name "test"

• pm2 serve를 통해 배포 및 이름 test로 설정

시작하기에 앞서

이번 사이드프로젝트를 진행하면서 백엔드파트분께서 CI/CD공부를 하셔서 백엔드와 같은 방법으로 프론트도 CI/CD 구축하는게 어떻겠냐고 하셨다

처음에는 그냥 vercel로 하면 편하게 CI/CD를 구축할 수 있는데 굳이… 라는 생각이 들었지만 다시 생각해보니

언제까지 외부의도움(??)에만 기대어서 할 수 도없다고도 생각이들기도하고 언젠간 나도 공부해서 EC2에 배포 해봐야지라는 생각을 드디어(?) 실천할 수 있는 기회가 생겨서 이번 기회에 CI/CD를 구현해볼 생각이다

최종 목표로는 aws+ githubAction+Docker를 사용해서 무중단배포를 할 계획이다...

일단은 한번도 배포를해보지 않았기 때문에 갈길이 멀기때문에 차근차근 하나하나 아래의 순서로 할생각이다

1. EC2에 수동으로 배포해보기
2. github action을 사용해 EC2에서 self-hosted로 CI/CD
3. github action을 사용해 dockerhub에 푸시 -> EC2에서 self-hosted로 docker pull 받아서 CI/CD

총 이렇게 3단계로 나눠서 연습해볼 것이다

이 이후에는 사이드 프로젝트에서 서버에서 배포하는 방법까지 알아보고 배포하는과정까지 이어 나갈것이다 이왕 해보는거 차근차근 빌드,배포,EC2,docker 등등 왜 필요하고 이걸 사용하는 이유에 대해서도 알아보려고 한다

빌드?

** 컴파일 된 코드를 실행할수 있는 상태로 만드는 작업**

배포

빌드가 완성된 실행 가능한 파일을 사용자가 접근할 수 있는 환경에 배치시키는 일

CI/CD

CI는 지속적인 통합으로 간단히 말하자면 빌드/테스트 자동화 과정이다.

즉 깃허브에서 특정 브랜치에 commit이나 push 될때 해당 코드를 바탕으로 빌드하고 테스트코드를 실행하여 문제가 있는지 없는지 자동화하는 과정이다.

CI를 성공적으로 구현할 경우 애플리케이션의 코드의 변경사항이 있을 경우 정기적으로 빌드 및 테스트되어 공유 레포지토리에 통합되므로 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결할 수 있다.

CD는 지속적인 배포로 간단히 말하면 배포의 자동화 과정이다.

CI가 문제없이 진행이 된다면 자동으로 배포하는 과정이 CD이다.

그래서 CI/CD가 왜 필요한데??

• 개발 편의성 증가
• 테스트 코드를 통과한 코드만 레포에 올라 가기때문에 좋은 코드 퀄리티를 유지 할 수 있다
• 한번 구축하고 나면 개발에만 신경쓸 수 있도록 도와준다

굳이 필요한 작업인가 라는 생각이 들 수 도있지만 처음에 하고나면 프로젝트를 진행하면서 자동화 구축으로 인해 편리하다고 느낄 수있다

CI/CD의 툴로는 Jenkis 와 github action 등등이 있다

AWS vs Vercel

지금까지 배포를 Vercel로 해봤는데 정말 간편하고 CI/CD도 자동으로해주고 시간도 안들이고 정말 잘 사용했다 하지만… 많은 사람들의 이야기를 들어보면 Vercel과 netlify와 같은 사이트를 이용해 배포를 하지않는다고 한다

이유는 무엇일까?
이유로는 자유도가 떨어진다 라고 말을한다

사실 Vercel과 netlify를 사용하면 내가 선택한 기준이 아닌 정해준데로 배포를 해야되는것때문이다 그리고 현엽에서는 직접 배포하는 경우도 많기때문에

이번기회에 AWS를 사용해서 배포를 해보자

일단처음으로 AWS에 접속하여 인스턴스를 빌려보자

인스턴스란??

서버를 돌리기위해 내 컴퓨터를 계속 켜놓으면서 서버를 돌릴 수 는 없기때문에 컴퓨터 한대를 빌린다고 생각하면 된다

1. AWS에 접속하여 EC2에들어가 인스턴스를 빌려보자

처음에는 os설정 해야하는데 ubutu로 선택했다.

2. 인스턴스 유형

인스턴스 유형은 아래 그림과 같이 종류가 있는데 일단 프리티어라고 되어있는 공짜인걸 사용했다.

3.키페어 생성

키페어 생성은 내가 빌린 인스턴스에 들어갈때 필요한 키라고 생각하면 된다

기존에 있는 키페어를사용하거나 키페어를 생성하면된다

• 키페어는 한번만 발급 받을 수 있어서 잃어버리지 않게 조심하자

4.네트워크 설정

vpc와 서브넷을 따로 사용 한다면 해당정보를 선택하고 없다면 기본값으로 설정하면된다. 보안 그룹은 어떤 포트로 들어오게 할지 보안을 담당하는곳이라고 보면된다

보안그룹 규칙을 추가해서 포트 443(https)와 80(http)를 추가했다

5.스토리지 설정

스토리지는 인스턴스의 디스크 용량이다

프리티어(공짜)는 최대 30GB여서 30으로 설정했다.

이러한 과정을 완료했으면 인스턴스 시작버튼을 누르면 끝이다.

6. 터미널에서 인스턴스 접속

이후에는 터미널에서 아래와같은 예시를 입력하되 디렉토리를 잘 확인하고 키의 위치에 맞게 입력하면 된다

ssh -i "test-key.pem" ubuntu@ec2-1-11-11-11.ap.northeast-2.compute.amazonaws.com

성공적으로 된다면 아래와같이 접속될것이다

처음 빌린 인스턴스는 아무것도 없는 컴퓨터라고 보면 되서

우리가 실행할 프로젝트의 필요한 패키지들과 노드를 아래와 같이 설치 해주면 된다

$ sudo apt-get update #update 진행 
$ sudo apt-get install -y build-essential 
$ sudo apt-get install curl #node.js 다운로드 하기위해 사용 
$ curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -- #Node.js의 공식 배포판인 Nodesource에서 Node.js를 설치하기 위한 설정을 수행하는 스크립트를 다운로드하고 실행합니다. 이 명령어는 Node.js 18.x 버전을 설치하도록 구성합니다.
$ sudo apt-get install -y nodejs
$ sudo npm install yarn --location=global #yarn 전역 설치

그다음 우리가 실행할 프로젝트를 깃에서 클론받아서

yarn install
yarn start 

해주면 된다

성공적으로 된다면 아래와같이 뜰것이다

*하지만 여기서 끝난게 아니다 *

우리가 배포한 프로젝트는 리액트기반의 프로젝트라 보이는 거와 같이 3000번 포트로 실행 되어 있어서 들어갈 수 가 없을것이다

우리가 앞서 aws에서 설정한 보안그룹에서 80번 포트와 443번 포트 다 열어 놔서 된거아닌가? 라는 생각이 들 수 있다

하지만 우리가 설정한 포트는 ec2서버의 포트이다 우리는 내부적으로 3000번포트를 운영해서 서버를 돌리고 있기 때문에 이포트를 연결시켜 놓을 작업이 필요하다

만약 ec2서버에서 3000번 포트도 열어 놓았다면 입력할 주소에 :3000을 붙이면 자동으로 연결은 시켜줘서 들어갈 수는 있다

하지만 매번 들어갈때마다 :3000을 뒤에 입력할 수는 없으니 80번 포트와 연결 시켜 보도록 하자

아래와 같이 입력하면 80포트로 들어온 사용자를 3000번 포트로 보내준다

sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 3000

이렇게 까지 한다면 인스턴스에 서버 띄우기 성공이다

다음으로는 github action을 사용해서 ec2에 ci/cd를 구축해서 띄우기를 해볼예정이다

시작하기전에

다른사람들과 개발을 하면서 느꼈던건 내가 자바스크립트의 동작원리에대해 알고있다고 생각했지만 개발을 하면서 아는게 아닌거라고 느껴서 이렇게 처음 정리를 해보게 되었다.

자바스크립트란 무엇일까?

간단하게 말하자면 자바스크립트는 싱글 스레드언어이다

싱글스레드란?

그럼 자바스크립트는 어떤작업이 너무 오래걸리는경우에는 다음 작업이 끝날때까지 계속 기다려야되는건가?

정답은 아니다. 이것은 자바스크립트의 어떻게 동작을하는지 알게되면 해결된다.

자바스크립트는 어떻게 동작할까?

출처: https://medium.com/sessionstack-blog/how-does-javascript-actually-work-part-1-b0bacc073cf

그림을 보면 알 수 있듯이 자바스크립트 엔진에는 하나의 Call Stack과 MemoryHeap이 있는걸 확인할 수 있다. 그리고 함께 동작하는 요소로는 Web APIs, Callback Queue, EventLoop가 있다.

자바스크립트 엔진이란?

자바스크크립트 코드를 실행하게 해준다고 보면된다. 대표적으로는 구글에서 만든 V8이 있다.

Call Stack이란?

코드가 실행될때 함수의 호출을 스택형식으로 쌓이는 공간

자바스크립트에서는 함수를 호출하면 Call Stack이라는곳에 하나씩 순서대로 쌓이게되는데 쌓이게되면 맨마지막에 Call Stack에 들어온 함수가 제일 먼저 반환된다. 예를들어 엘레베이터에 사람이타게되면 가장 마지막에 탄사람이 가장먼저 내리게되는 구조라고 보면 된다. 아래 예시코드를 보면 쉬울 것이다.

function a(){
  b();
  console.log("a");
}

function b(){
  c();
  console.log("b");
}

function c(){
  console.log("c");
}

a();

/*출럭
c
b
a
*/

위와같은 코드에서의 결과값은 c->b->a가 나올것이다. 아래의 그림을 보면 쉽게 이해할 수 있다.

출처:https://frontj.com/entry/8-Javascript%EC%9D%98-%EC%BD%9C-%EC%8A%A4%ED%83%9D%EA%B3%BC-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84

위에 그림에서 나와 있듯이저렇게 쌓이게 되는데 순서를보면

1. a함수를 호출
2. 호출된 a함수를 CallStack에 추가
3. a함수의 코드를 읽기 시작
4. b함수 호출
5. 호출된 b함수를 CallStack에 추가
6. b함수의 코드를 읽기 시작
7. c함수 호출
8. 호출된 c함수를 CallStack에 추가
9. c함수의 코드를 읽기 시작
10. console.log("c")실행
11. c함수의 코드를 전부 실행하였기에 CallStack에서 제거
12. CallStack 제일 위에있는 b를 실행
13. console.log("b")실행
14. b함수의 코드를 전부 실행하였기에 CallStack에서 제거
15. CallStack 제일 위에있는 a를 실행
16. console.log("a")

따라서 결과는 c -> b -> a 로 나오게된다.

Memory Heap이란?

자바스크립트에서 사용되는 메모리공간이다. 프로그램에서 선언한 변수,함수,객체등 메모리 할당을한다

여기까지가 자바스크립트의 엔진인데 앞에서 말한것처럼 자바스크립트는 싱글스레드 언어라 한번에 한가지일 즉 동기적으로 작업을 수행 할 수 있다. 그래서 비동기적으로 수행하기위해 Web APIs, Event Queue(Task Queue),Event Loop를 사용한다.

Web API란?

자바스크립트 엔진 밖에서 동작하는, 웹 브라우저에 내장된 API이다. Ajax 요청, setTimeout(), 이벤트 핸들러의 등록과 같이 웹 브라우저에서 제공하는 기능들을 말한다. 비동기 처리를 Web ApI에서 한다음 결과를 Task Queue로 이동시킨다

Task Queue란?

Web API 결괏값을 쌓아 두는 큐 전달 받은 함수들을 먼저들어오면 먼저나가는 구조이다 Task Queue에는 3가지의 종류가 있는데 이것은 나중에 다루어 보도록 하자!

Event Loop

이벤트 루프는 Call Stack 과 Task Queue를 주시하다가 Call Stack이 비워져 있을때 우선순위에 따라 Task Queue에서 하나씩 빼서 Call Stack에 넣어주는 역할을 한다

각각의 하는 역할들에 대해서 알았으니 이제 동작을 어떻게 하는지 간단하게 요약해보면 비동기 동작 의 수행과정은

Call Stack에서 비동기 함수가 호출되면 Call Stack에 먼저 쌓였다가 Web API로 이동한 후 해당 함수가 등록되고 Call Stack에서 사라진다.

Web API에서 비동기 함수의 이벤트가 발생하면 해당 콜백 함수는 Callback Queue로 옮겨진다.

이제 Call Stack이 비어있는지 이벤트 루프가 확인을 하는데 만약 비어있으면 Call Stack에 Callback Queue에 있는 콜백 함수를 넘겨준다.

Call Stack에 들어온 함수는 실행이 되고 실행이 끝나면 Call Stack에서 사라진다.

아래 그림을 보면 쉽게 이해할 수 있을것이다.

결론

참조 https://prefer2.tistory.com/entry/Javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%94%EC%A7%84-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%9F%B0%ED%83%80%EC%9E%84