hanghae-plus · q1Lim · Jul 21, 2025 · Jul 22, 2025 · Jul 22, 2025 · Jul 23, 2025
diff --git a/eslint.config.js b/eslint.config.js
@@ -12,4 +12,9 @@ export default tseslint.config([
   ...tseslint.configs.recommended,
   eslintPluginPrettier,
   eslintConfigPrettier,
+  {
+    rules: {
+      "@typescript-eslint/no-unused-vars": "off",
+    },
+  },
 ]);
diff --git a/package.json b/package.json
@@ -1,6 +1,7 @@
 {
   "name": "front-6th-chapter1-3",
   "private": true,
+  "homepage": "https://q1Lim.github.io/front_6th_chapter1-3/",
   "version": "0.0.0",
   "engines": {
     "node": ">=22",

diff --git a/packages/app/404.html b/packages/app/404.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>상품 쇼핑몰</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="/src/styles.css">
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            primary: "#3b82f6",
+            secondary: "#6b7280"
+          }
+        }
+      }
+    };
+  </script>
+</head>
+<body class="bg-gray-50">
+<div id="root"></div>
+<script type="module" src="/src/main.tsx"></script>
+</body>
+</html>
diff --git a/packages/app/src/components/toast/ToastProvider.tsx b/packages/app/src/components/toast/ToastProvider.tsx
@@ -1,52 +1,64 @@
-/* eslint-disable react-refresh/only-export-components */
 import { createContext, memo, type PropsWithChildren, useContext, useReducer } from "react";
 import { createPortal } from "react-dom";
 import { Toast } from "./Toast";
 import { createActions, initialState, toastReducer, type ToastType } from "./toastReducer";
 import { debounce } from "../../utils";
+import { useMemo, useAutoCallback } from "@hanghae-plus/lib/src/hooks";
 
 type ShowToast = (message: string, type: ToastType) => void;
 type Hide = () => void;
 
-const ToastContext = createContext<{
+const ToastStateContext = createContext<{
   message: string;
   type: ToastType;
+}>({
+  ...initialState,
+});
+
+const ToastActionContext = createContext<{
   show: ShowToast;
   hide: Hide;
 }>({
-  ...initialState,
   show: () => null,
   hide: () => null,
 });
 
 const DEFAULT_DELAY = 3000;
 
-const useToastContext = () => useContext(ToastContext);
-export const useToastCommand = () => {
-  const { show, hide } = useToastContext();
-  return { show, hide };
-};
+const useToastStateContext = () => useContext(ToastStateContext);
+const useToastActionContext = () => useContext(ToastActionContext);
+
 export const useToastState = () => {
-  const { message, type } = useToastContext();
+  const { message, type } = useToastStateContext();
   return { message, type };
 };
 
+export const useToastCommand = () => {
+  const { show, hide } = useToastActionContext();
+  return { show, hide };
+};
+
 export const ToastProvider = memo(({ children }: PropsWithChildren) => {
   const [state, dispatch] = useReducer(toastReducer, initialState);
-  const { show, hide } = createActions(dispatch);
+  const { show, hide } = useMemo(() => createActions(dispatch), [dispatch]);
   const visible = state.message !== "";
 
-  const hideAfter = debounce(hide, DEFAULT_DELAY);
+  const hideAfter = useMemo(() => debounce(hide, DEFAULT_DELAY), [hide]);
 
-  const showWithHide: ShowToast = (...args) => {
+  const showWithHide: ShowToast = useAutoCallback((...args) => {
     show(...args);
     hideAfter();
-  };
+  });
+
+  const toastActionValue = useMemo(() => ({ show: showWithHide, hide }), [showWithHide, hide]);
+  const toastStateValue = useMemo(() => ({ message: state.message, type: state.type }), [state.message, state.type]);
 
   return (
-    <ToastContext value={{ show: showWithHide, hide, ...state }}>
-      {children}
-      {visible && createPortal(<Toast />, document.body)}
-    </ToastContext>
+    <ToastActionContext.Provider value={toastActionValue}>
+      <ToastStateContext.Provider value={toastStateValue}>
+        {children}
+        {visible && createPortal(<Toast />, document.body)}
+      </ToastStateContext.Provider>
+    </ToastActionContext.Provider>
   );
 });
diff --git a/packages/lib/src/createObserver.ts b/packages/lib/src/createObserver.ts
@@ -6,6 +6,10 @@ export const createObserver = () => {
   // useSyncExternalStore 에서 활용할 수 있도록 subscribe 함수를 수정합니다.
   const subscribe = (fn: Listener) => {
     listeners.add(fn);
+    // 구독을 정리하는 함수를 반환해야함
+    return () => {
+      unsubscribe(fn);
+    };
   };
 
   const unsubscribe = (fn: Listener) => {

diff --git a/packages/lib/src/equals/deepEquals.ts b/packages/lib/src/equals/deepEquals.ts
@@ -1,3 +1,36 @@
 export const deepEquals = (a: unknown, b: unknown) => {
-  return a === b;
+  // 기본 타입 값들을 정확히 비교
+  if (a === b) return true;
+
+  // a, b 하나라도 객체가 아닌 경우 false return
+  if (a == null || b == null || typeof a !== "object" || typeof b !== "object") return false;
+
+  // 객체가 string key로 접근 가능하다고 명시
+  const objA = a as Record<string, unknown>;
+  const objB = b as Record<string, unknown>;
+
+  if (Array.isArray(objA) && Array.isArray(objB)) {
+    if (objA.length !== objB.length) return false;
+
+    for (let i = 0; i < objA.length; i++) {
+      if (!deepEquals(objA[i], objB[i])) return false;
+    }
+    return true;
+  }
+
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+
+  if (keysA.length !== keysB.length) return false;
+
+  for (let i = 0; i < keysA.length; i++) {
+    if (!Object.hasOwn(objB, keysA[i])) {
+      return false;
+    }
+    // 각 key에 매칭되는 값이 같은지 체크
+    if (!deepEquals(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+  return true;
 };
diff --git a/packages/lib/src/equals/shallowEquals.ts b/packages/lib/src/equals/shallowEquals.ts
@@ -1,3 +1,23 @@
 export const shallowEquals = (a: unknown, b: unknown) => {
-  return a === b;
+  // 기본 타입 값들을 정확히 비교
+  if (a === b) return true;
+
+  // a, b 하나라도 객체가 아닌 경우 false return
+  if (a == null || b == null || typeof a !== "object" || typeof b !== "object") return false;
+
+  // 객체가 string key로 접근 가능하다고 명시
+  const objA = a as Record<string, unknown>;
+  const objB = b as Record<string, unknown>;
+
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+
+  // key 개수 비교
+  if (keysA.length !== keysB.length) return false;
+
+  // 반복문으로 얕은 비교
+  for (const key of keysA) {
+    if (!(key in b) || objA[key] !== objB[key]) return false;
+  }
+  return true;
 };
diff --git a/packages/lib/src/hocs/deepMemo.ts b/packages/lib/src/hocs/deepMemo.ts
@@ -1,5 +1,10 @@
 import type { FunctionComponent } from "react";
+import { memo } from "./memo.ts";
+import { deepEquals } from "../equals";
 
+// deepMemo HOC는 컴포넌트의 props를 깊은 비교하여 불필요한 리렌더링을 방지
 export function deepMemo<P extends object>(Component: FunctionComponent<P>) {
-  return Component;
+  // deepEquals 함수를 사용하여 props 비교
+  // 앞에서 만든 memo도 활용
+  return memo(Component, deepEquals);
 }
diff --git a/packages/lib/src/hocs/memo.ts b/packages/lib/src/hocs/memo.ts
@@ -1,6 +1,22 @@
-import { type FunctionComponent } from "react";
+import { type FunctionComponent, type ReactNode } from "react";
 import { shallowEquals } from "../equals";
+import { useRef } from "../hooks";
 
+// memo HOC는 컴포넌트의 props를 얕은 비교하여 불필요한 렌더링을 방지
 export function memo<P extends object>(Component: FunctionComponent<P>, equals = shallowEquals) {
-  return Component;
+  // 1. 이전 props를 저장할 ref 생성
+  // 2. 메모이제이션된 컴포넌트 생성
+  // 3. equals 함수를 사용하여 props 비교
+  // 4. props가 변경된 경우에만 새로운 렌더링 수행
+
+  return (props: P) => {
+    const prevPropsRef = useRef<P | null>(null);
+    const renderOutputRef = useRef<ReactNode | null>(null);
+
+    if (!equals(prevPropsRef.current, props)) {
+      prevPropsRef.current = props;
+      renderOutputRef.current = Component(props) as ReactNode;
+    }
+    return renderOutputRef.current;
+  };
 }
diff --git a/packages/lib/src/hooks/useAutoCallback.ts b/packages/lib/src/hooks/useAutoCallback.ts
@@ -3,5 +3,13 @@ import { useCallback } from "./useCallback";
 import { useRef } from "./useRef";
 
 export const useAutoCallback = <T extends AnyFunction>(fn: T): T => {
-  return fn;
+  // useCallBack과 useRef를 이용하여 useAutoCallBack 구현
+  const prevRef = useRef(fn);
+  prevRef.current = fn;
+
+  const autoCallBack = useCallback((...args: Parameters<T>): ReturnType<T> => {
+    return prevRef.current(...args);
+  }, []);
+
+  return autoCallBack as T;
 };
diff --git a/packages/lib/src/hooks/useCallback.ts b/packages/lib/src/hooks/useCallback.ts
@@ -1,7 +1,7 @@
-/* eslint-disable @typescript-eslint/no-unused-vars,@typescript-eslint/no-unsafe-function-type */
 import type { DependencyList } from "react";
+import { useMemo } from "./useMemo.ts";
 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 export function useCallback<T extends Function>(factory: T, _deps: DependencyList) {
-  // 직접 작성한 useMemo를 통해서 만들어보세요.
-  return factory as T;
+  return useMemo(() => factory, _deps);
 }
diff --git a/packages/lib/src/hooks/useDeepMemo.ts b/packages/lib/src/hooks/useDeepMemo.ts
@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import type { DependencyList } from "react";
 import { useMemo } from "./useMemo";
 import { deepEquals } from "../equals";

diff --git a/packages/lib/src/hooks/useMemo.ts b/packages/lib/src/hooks/useMemo.ts
@@ -1,8 +1,16 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import type { DependencyList } from "react";
 import { shallowEquals } from "../equals";
+import { useRef } from "./useRef.ts";
 
 export function useMemo<T>(factory: () => T, _deps: DependencyList, _equals = shallowEquals): T {
-  // 직접 작성한 useRef를 통해서 만들어보세요.
-  return factory();
+  const prevDepsRef = useRef<DependencyList | undefined>(undefined);
+  const memoizedValueRef = useRef<T | undefined>(undefined);
+
+  // 이전 deps가 없거나 이전 deqs가 있고, 현재 deps와 다르다면 다시 계산하기
+  if (prevDepsRef.current === undefined || !_equals(prevDepsRef.current, _deps)) {
+    memoizedValueRef.current = factory();
+    prevDepsRef.current = _deps;
+  }
+
+  return memoizedValueRef.current as T;
 }
diff --git a/packages/lib/src/hooks/useRef.ts b/packages/lib/src/hooks/useRef.ts
@@ -1,4 +1,7 @@
+import { useState } from "react";
+
 export function useRef<T>(initialValue: T): { current: T } {
-  // useState를 이용해서 만들어보세요.
-  return { current: initialValue };
+  // 초기값을 함수로 전달해서 한번만 실행될 수 있도록 함
+  const [ref] = useState(() => ({ current: initialValue }));
+  return ref;
 }
diff --git a/packages/lib/src/hooks/useRouter.ts b/packages/lib/src/hooks/useRouter.ts
@@ -8,5 +8,5 @@ const defaultSelector = <T, S = T>(state: T) => state as unknown as S;
 export const useRouter = <T extends RouterInstance<AnyFunction>, S>(router: T, selector = defaultSelector<T, S>) => {
   // useSyncExternalStore를 사용하여 router의 상태를 구독하고 가져오는 훅을 구현합니다.
   const shallowSelector = useShallowSelector(selector);
-  return shallowSelector(router);
+  return useSyncExternalStore(router.subscribe, () => shallowSelector(router));
 };
diff --git a/packages/lib/src/hooks/useShallowSelector.ts b/packages/lib/src/hooks/useShallowSelector.ts
@@ -5,5 +5,13 @@ type Selector<T, S = T> = (state: T) => S;
 
 export const useShallowSelector = <T, S = T>(selector: Selector<T, S>) => {
   // 이전 상태를 저장하고, shallowEquals를 사용하여 상태가 변경되었는지 확인하는 훅을 구현합니다.
-  return (state: T): S => selector(state);
+  const ref = useRef<S>(null);
+  return (state: T): S => {
+    const newValue = selector(state);
+
+    if (ref.current === null || !shallowEquals(ref.current, newValue)) {
+      ref.current = newValue;
+    }
+    return ref.current;
+  };
 };
diff --git a/packages/lib/src/hooks/useShallowState.ts b/packages/lib/src/hooks/useShallowState.ts
@@ -1,7 +1,14 @@
 import { useState } from "react";
 import { shallowEquals } from "../equals";
+import { useCallback } from "./useCallback.ts";
 
-export const useShallowState = <T>(initialValue: Parameters<typeof useState<T>>[0]) => {
-  // useState를 사용하여 상태를 관리하고, shallowEquals를 사용하여 상태 변경을 감지하는 훅을 구현합니다.
-  return useState(initialValue);
+export const useShallowState = <T>(initialValue: T | (() => T)) => {
+  // 임의로 타입 조정 initialValue: T | (() => T)
+  const [state, setState] = useState<T>(initialValue);
+
+  const setShallowState = useCallback((newValue: T) => {
+    // shallowEquals를 통해 상태 변경을 감지
+    setState((prev) => (shallowEquals(prev, newValue) ? prev : newValue));
+  }, []);
+  return [state, setShallowState] as const;
 };
diff --git a/packages/lib/src/hooks/useStorage.ts b/packages/lib/src/hooks/useStorage.ts
@@ -5,5 +5,5 @@ type Storage<T> = ReturnType<typeof createStorage<T>>;
 
 export const useStorage = <T>(storage: Storage<T>) => {
   // useSyncExternalStore를 사용해서 storage의 상태를 구독하고 가져오는 훅을 구현해보세요.
-  return storage.get();
+  return useSyncExternalStore(storage.subscribe, storage.get);
 };
diff --git a/packages/lib/src/hooks/useStore.ts b/packages/lib/src/hooks/useStore.ts
@@ -9,5 +9,6 @@ const defaultSelector = <T, S = T>(state: T) => state as unknown as S;
 export const useStore = <T, S = T>(store: Store<T>, selector: (state: T) => S = defaultSelector<T, S>) => {
   // useSyncExternalStore와 useShallowSelector를 사용해서 store의 상태를 구독하고 가져오는 훅을 구현해보세요.
   const shallowSelector = useShallowSelector(selector);
-  return shallowSelector(store.getState());
+
+  return useSyncExternalStore(store.subscribe, () => shallowSelector(store.getState()));
 };