⚛️ 전역 상태 관리의 이해 + 프론트엔드 앱의 테스트/배포 흐름 경험

다음주 준비해와야 할 것
1.  오늘 만든 것에 전역 상태 관리 라이브러리를 사용한 기능 추가 해오기

추가할만한 것
1. 로그인
2. 토스트/스낵바 알림
3. 다크모드 지원

2. 이를 배포해오기(Vercel / Netlify / Cloudflare / Github pages / Firebase 중 택 1)

 

 

---

 

전역 상태

- 컴포넌트 간에 공통으로 사용되는 데이터를 관리하는 공간

- 예: 로그인 정보, 다크모드 설정, 장바구니 등

 

 

props drilling

: 부모 → 자식 → 손자까지 props를 계속 전달해야 함 (깊은 구조에서는 매우 비효율적)

🆚

전역 상태

: 여러 컴포넌트가 공통된 store에서 직접 상태를 읽고 쓸 수 있음

- 예: Context, Redux, Recoil, Zustand 등

---

 

useContext & useReducer

useContext를 사용하여 전역 상태를 공유하고, useReducer를 통해 상태 변화를 관리하는 방식

 

 

자 공식 문서를 복붙하며 읽어봅시다

 

 

useContext

: 컴포넌트에서 컨텍스트를 읽고 데이터를 공유할 수 있는 방법을 제공

- 주로 전역 상태, 테마, 사용자 인증 정보 등을 다룰 때 사용

const value = useContext(SomeContext)

 

레퍼런스 

useContext(SomeContext) 

useContext를 컴포넌트의 최상위 수준에서 호출하여 Context를 읽고 구독합니다.

import { useContext } from 'react';

function MyComponent() {
  const theme = useContext(ThemeContext);
  // ...

 

매개변수 

• SomeContext: createContext로 생성한 Context입니다. Context 자체는 정보를 담고 있지 않으며, 컴포넌트에서 제공하거나 읽을 수 있는 정보의 종류를 나타냅니다.

반환값 

useContext는 호출하는 컴포넌트에 대한 Context 값을 반환합니다. 이 값은 트리에서 호출하는 컴포넌트 상위의 가장 가까운 SomeContext에 전달된 값으로 결정됩니다. Provider가 없으면 반환된 값은 해당 Context에 대해 createContext에 전달한 defaultValue가 됩니다. 반환된 값은 항상 최신 상태입니다. Context가 변경되면 React는 자동으로 해당 Context를 읽는 컴포넌트를 다시 렌더링합니다.

 

사용법 

트리의 깊은 곳에 데이터 전달하기 

컴포넌트의 최상위 수준에서 useContext를 호출하여 Context를 읽고 구독합니다.

import { useContext } from 'react';

function Button() {
  const theme = useContext(ThemeContext);
  // ...

useContext는 전달한 Context에 대한 Context Value를 반환합니다. Context 값을 결정하기 위해 React는 컴포넌트 트리를 탐색하고 특정 Context에 대해 상위에서 가장 가까운 Context Provider를 찾습니다.

Context를 Button에 전달하려면 해당 버튼 또는 상위 컴포넌트 중 하나를 해당 Context Provider로 감쌉니다.

 

function MyPage() {
  return (
    <ThemeContext value="dark">
      <Form />
    </ThemeContext>
  );
}

function Form() {
  // ... 내부에서 버튼을 렌더링합니다. ...
}

 

Provider와 Button사이에 얼마나 많은 컴포넌트 레이어가 있는지는 중요하지 않습니다. Form 내부의 Button이 어디에서나 useContext(ThemeContext)를 호출하면,"dark"를 값으로 받습니다.

 

🚨 useContext()는 항상 호출하는 컴포넌트 상위에서 가장 가까운 Provider를 찾습니다. 위쪽 방향으로 찾고 useContext()를 호출하는 컴포넌트 안의 Provider는 고려하지 않습니다.

 

---

 

useReducer

: useState와 동일하게 state를 관리하는 훅!

- useState보다 더 복잡한 상태 로직을 관리할 때 사용

- 액션을 기반으로 상태 업데이트 로직을 외부 함수에 위임하여 컴포넌트 외부에서 상태 변경 로직을 관리할 수 있게 해줌]

 

import { useReducer } from 'react';

function reducer(state, action) {
  // ...
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, { age: 42 });
  // ...

 

매개변수 

• reducer: state가 어떻게 업데이트 되는지 지정하는 리듀서 함수입니다. 리듀서 함수는 반드시 순수 함수여야 하며, state와 action을 인수로 받아야 하고, 다음 state를 반환해야 합니다. state와 action에는 모든 데이터 타입이 할당될 수 있습니다.
• initialArg: 초기 state가 계산되는 값입니다. 모든 데이터 타입이 할당될 수 있습니다. 초기 state가 어떻게 계산되는지는 다음 init 인수에 따라 달라집니다.
• 선택사항 init: 초기 state를 반환하는 초기화 함수입니다. 이 함수가 인수에 할당되지 않으면 초기 state는 initialArg로 설정됩니다. 할당되었다면 초기 state는 init(initialArg)를 호출한 결과가 할당됩니다.

반환값 

useReducer는 2개의 엘리먼트로 구성된 배열을 반환합니다.

1. 현재 state. 첫번째 렌더링에서의 state는 init(initialArg) 또는 initialArg로 설정됩니다 (init이 없을 경우 initialArg로 설정됩니다).
2. dispatch 함수. dispatch는 state를 새로운 값으로 업데이트하고 리렌더링을 일으킵니다.

 

dispatch 함수 

useReducer에 의해 반환되는 dispatch 함수는 state를 새로운 값으로 업데이트하고 리렌더링을 일으킵니다. dispatch의 유일한 인수는 action입니다.

 

const [state, dispatch] = useReducer(reducer, { age: 42 });

function handleClick() {
  dispatch({ type: 'incremented_age' });
  // ...

 

React는 현재 state와 dispatch를 통해 전달된 action을 제공받아 호출된 reducer의 반환값을 통해 다음 state값을 설정합니다.

매개변수 

• action: 사용자에 의해 수행된 활동입니다. 모든 데이터 타입이 할당될 수 있습니다. 컨벤션에 의해 action은 일반적으로 action을 정의하는 type 프로퍼티와 추가적인 정보를 표현하는 기타 프로퍼티를 포함한 객체로 구성됩니다.

반환값 

dispatch 함수는 어떤 값도 반환하지 않습니다.

 

 

사용법 

컴포넌트에 reducer 추가하기 

state를 reducer로 관리하기 위해 useReducer를 컴포넌트의 최상단에서 호출합니다.

import { useReducer } from 'react';

function reducer(state, action) {
  // ...
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, { age: 42 });
  // ...

 

useReducer는 정확히 2개의 항목이 포함된 배열 반환합니다.

1. state 변수의 현재 state. 최초에는 사용자가 제공한 초기 state로 초기화됩니다.
2. dispatch 함수. 상호작용에 대응하여 state를 변경합니다.

화면을 업데이트하려면 사용자가 수행한 활동을 의미하는 action 객체를 인수로하여 dispatch 함수를 호출하세요.

function handleClick() {
  dispatch({ type: 'incremented_age' });
}

 

React는 현재 state와 action을 reducer 함수로 전달합니다. reducer는 다음 state를 계산한 후 반환합니다. React는 다음 state를 저장한 뒤에 컴포넌트와 함께 렌더링 하고 UI를 업데이트 합니다.

 

 

 

네 . ..... 대강 이해 한듯? 

 

 

 

https://ko.react.dev/reference/react/useReducer

useReducer – React

 

 

 

⬇️ useContext와 useReducer를 사용한 다크 모드 예제 (오직 자바스크립트로만 적힌,,^^;)

// ThemeContext.js
import React, { createContext, useContext, useReducer } from 'react';

const ThemeContext = createContext();

const themeReducer = (state, action) => {
  switch (action.type) {
    case 'TOGGLE_THEME':
      return { ...state, theme: state.theme === 'light' ? 'dark' : 'light' };
    default:
      return state;
  }
};

export const ThemeProvider = ({ children }) => {
  const [state, dispatch] = useReducer(themeReducer, { theme: 'light' });

  return (
    <ThemeContext.Provider value={{ state, dispatch }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);

// App.js
import React from 'react';
import { ThemeProvider, useTheme } from './ThemeContext';

function ThemedButton() {
  const { state, dispatch } = useTheme();

  return (
    <button
      onClick={() => dispatch({ type: 'TOGGLE_THEME' })}
      style={{ background: state.theme === 'light' ? 'white' : 'black', color: state.theme === 'light' ? 'black' : 'white' }}
    >
      Toggle Theme
    </button>
  );
}

function App() {
  return (
    <ThemeProvider>
      <div>
        <h1>Hello, useContext and useReducer!</h1>
        <ThemedButton />
      </div>
    </ThemeProvider>
  );
}

export default App;

 

1. Context 생성:

- createContext를 사용하여 Context를 생성

- 생성된 Context는 Provider와 Consumer 컴포넌트를 제공

 

2. Provider 설정:

- Provider 컴포넌트를 사용하여 상태와 dispatch 함수를 하위 컴포넌트에 전달

- 예를 들어, ThemeContext.Provider와 같이 사용

 

3. useReducer를 이용한 상태 관리:

- useReducer를 사용하여 상태와 reducer 함수를 정의

- useReducer는 상태 업데이트 로직을 컴포넌트에서 분리하여 관리하게 해줌 

 

4. useContext를 이용한 상태 접근:

- 하위 컴포넌트에서 useContext를 사용하여 Context에 접근

-  전역 상태를 읽고 업데이트할 수 있음!

 

 

https://velog.io/@nike7on/useReducer와-useContext-React의-강력한-상태-관리-조합

useReducer와 useContext: React의 강력한 상태 관리 조합

https://reactnext-central.xyz/blog/react/state-context-reducer

리액트 상태 관리: useState, useContext, useReducer 활용하기

 

---

 

[ 상태 관리 라이브러리 ]

# 보일러플레이트란? 

: 반복적으로 작성해야 하는 코드 틀이나 구조

 

#서드파티 미들웨어란?

: 공식이 아닌 외부(Third-Party) 개발자나 라이브러리 제작자가 만든 미들웨어

(미들웨어 : 액션이 리듀서에 도달하기 전에 중간에서 가로채 **특정 작업(비동기 처리, 로깅 등)을 수행하는 함수)

 

 

Zustand

- 구조: 간단한 함수 기반 store 사용

- 보일러플레이트: 거의 없음 – provider 없이 훅 하나로 바로 사용 가능

- 비동기 처리: 자체 지원 (store 안에 async 액션 작성 가능)

- 사용 난이도: 가장 쉬움

- React 의존성: 약함 (Vanilla JS도 사용 가능)

- 사용 예: 소규모 앱, 빠른 개발, Redux보다 간편한 개선 형태로 적합

 

장점

- 구조가 단순하고 코드가 매우 짧음 → 가장 가벼운 상태관리 도구 중 하나

- Redux처럼 store, DevTools, Immer 등을 지원하면서도 보일러플레이트가 거의 없음

- Provider 없이 상태를 전역으로 사용할 수 있어 설정 없이 바로 사용 가능

- 훅 기반 API로 React와 자연스럽게 통합

- 상태 변경 시 필요한 컴포넌트만 리렌더링되어 성능적으로도 우수

 

단점

- 상태를 명확히 분리하는 구조적 가이드가 부족하여 대규모 프로젝트에서 구조화가 어려울 수 있음.

- 공식 문서가 다소 간략하고, 커뮤니티 규모는 Redux보다 작음.

- 상태가 많아질수록 전역 스토어 관리 전략을 스스로 구성해야 하므로 체계가 약함.

 

---

 

Recoil (헉 Facebook이 개발했대요)

- 구조: atom + selector 기반의 React 전용 설계  

- 보일러플레이트: 적음 – useState처럼 직관적  

- 비동기 처리: selector를 통해 비동기 처리 가능 

- 사용 난이도: 쉬움

- React 의존성: 강함 – atom 단위로 세분화된 React 전용 구조

- 사용 예: 중규모 앱, 상태 분산 및 리렌더링 최적화에 유리  

 

장점

- useState와 유사한 간단하고 직관적인 구조

- Redux 대비 보일러플레이트 코드가 적고, 학습 난이도가 낮음

- selector를 통한 비동기 처리 내장 지원. 별도 미들웨어 없이 비동기 상태 구성 가능

- selector는 캐싱을 지원하여 중복된 API 호출을 막고 성능 최적화에 유리

- 여러 비동기 쿼리를 waitForAll API로 병렬 처리 가능

 

단점

- Redux와 달리 안정적인 DevTools가 부족해 디버깅이 불편할 수 있음

- 어떤 컴포넌트든 전역 상태를 직접 업데이트할 수 있어, 상태 변경 추적이 어렵고 유지보수가 복잡해질 수 있음

- 전역 상태가 많아질수록 상태 흐름 파악이 어려워지고 예측성이 낮아짐

- 기본적으로 Recoil 상태는 새로고침 시 초기화됨 (단, recoil-persist로 해결 가능)

 

 

---

Redux

- 구조: action → reducer → store 흐름, Flux 아키텍처 기반  

- 보일러플레이트: 많음 – action, reducer, 연결 등 반복 코드 다수  

- 비동기 처리: redux-thunk, redux-saga 등의 미들웨어 필요  

- 사용 난이도: 비교적 어려움 – 복잡한 구조와 설정 필요

- React 의존성: 없음 – 다양한 환경에서 사용 가능  

- 사용 예: 대규모 앱, 복잡한 상태 로직 및 팀 협업에 적합

 

장점

- 전역 상태 관리 라이브러리 중 가장 널리 사용됨

- Redux DevTools로 디버깅과 상태 추적에 매우 강력

- 복잡한 상태 구조나 큰 규모의 프로젝트에서 특히 유용함

- 컴포넌트 외부에서도 getState와 dispatch를 사용 가능하여 WebSocket, React Native 등과의 통합도 수월

- 서버 사이드 렌더링(SSR) 지원 가능 → 초기 상태를 서버에서 렌더링 후 전달 가능

 

단점

- 상태 흐름이 명확하지만, 사용법이 복잡하고 구조가 무겁

- action, reducer, store 연결 과정에서 반복 코드가 많고 설정이 번거로움

- 비동기 처리를 위해 Redux-thunk, Redux-saga 등 서드파티 미들웨어 필요

- 새로고침 시 상태가 초기화됨 → redux-persist로 해결 가능
- React Hook 기반이 아니어서 최신 React 패턴과의 통합이 상대적으로 복잡함

 

💡 Redux Toolkit을 사용하면 이러한 복잡한 구조를 함수 기반으로 간결하게 구성할 수 있고, createSlice, createAsyncThunk 등으로 코드량을 크게 줄일 수 있음.

 

React 의존 없이 Vanilla JS 환경이나 외부 시스템과 통합해야 할 경우 (대규모 앱) → Redux

• React 외부에서도 사용 가능하여 범용성이 높음.

 

https://velog.io/@iberis/상태관리-라이브러리-비교-Redux-vs-Recoil-vs-Zustand-vs-Jotai

상태관리 라이브러리 비교: Redux vs Recoil vs Zustand vs Jotai

https://babycoder05.tistory.com/entry/React-상태관리-툴-비교하기-redux-toolkit-vs-recoil-vs-zustand

React 상태관리 툴 비교하기 (redux-toolkit vs recoil vs zustand)

 

 

---

Vitest

: Vite 기반의 테스트 러너 (“테스트를 빠르고 가볍게 돌리고 싶다!“는 개발자를 위한 도구 )

- Vite와 호환되는 빠른 테스트 도구 (HMR 기반 캐시 덕분에 빠름)

- 문법이 Jest와 거의 동일 → Jest 쓰던 사람도 바로 적응 가능

- 테스트 코드에서 describe, it, expect 같은 글로벌 함수 사용 가능

- React, Vue 등 다양한 프레임워크와 함께 사용 가능

- vite.config.js 안에서 바로 설정 가능

- 유닛 테스트, 컴포넌트 테스트를 빠르게 돌릴 때 적합

- Vite 프로젝트에서 가장 추천되는 테스트 러너

 

 

Jest

: 가장 널리 쓰이는 JavaScript 테스트 프레임워크

- Facebook이 만든 강력한 테스트 도구

- React 공식 문서에서도 사용하는 기본 테스트 러너

- describe, it, test, expect 등의 테스트 함수 제공

- 비동기 테스트, 모킹(mock), 커버리지 측정 등 기능 풍부

- jest.config.js 설정으로 다양한 커스터마이징 가능

- React, Node.js 등 거의 모든 JS 프로젝트에서 테스트용으로 사용 가능

- 대규모 프로젝트나 다양한 테스트 시나리오가 필요한 경우 적합

 

 

React Testing Library

: 사용자 입장에서 React 컴포넌트를 테스트하기 위한 도구

- 컴포넌트 내부 구현을 직접 검사하는 대신, 화면에 보여지는 UI를 기준으로 테스트 → 즉, 사용자가 “무엇을 보는지”에 중점을 둠

- DOM API를 기반으로 getByText, getByRole 등으로 요소를 찾음

- fireEvent 또는 userEvent를 통해 실제 클릭이나 입력 시뮬레이션 가능

- Jest, Vitest 등 테스트 러너와 함께 사용됨

- 버튼 클릭, 입력창 입력, 텍스트 렌더링 등 UI 중심 테스트에 최적

- render()로 컴포넌트를 실제처럼 렌더링해서 테스트할 수 있음

 

⬇️

• Vite 프로젝트 → Vitest + React Testing Library
• CRA(Create React App)나 Next.js → Jest + React Testing Library ( 테스트 코드: https://velog.io/@wlwl99/로그인-테스트 읽어보기) - ???

 

ex) 

 

Vitest + React Testing Library

리액트 프로젝트 설치

npm create vite@latest

 

패키지 설치

npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event vitest jsdom

 

 

vite.config.ts 셋팅

• globals: true
  • 이 설정은 테스트 파일에서 전역 함수(예: describe, it, test 등)를 import 없이 사용할 수 있게 합니다.
  • true로 설정하면 이러한 함수들을 매번 import 하지 않아도 됩니다.
• environment: "jsdom"
  • 테스트 환경을 JSDOM으로 설정합니다.
  • JSDOM은 Node.js 환경에서 브라우저와 유사한 DOM 환경을 시뮬레이션합니다.
  • 이는 브라우저 API를 사용하는 컴포넌트나 함수를 테스트할 때 유용합니다.
• setupFiles: "./src/test/setup.ts"
  • 테스트를 실행하기 전에 실행될 설정 파일의 경로를 지정합니다.
  • 이 파일에서는 모든 테스트에 공통적으로 필요한 설정이나 모의(mock) 객체 등을 정의할 수 있습니다.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import type { UserConfig as VitestUserConfig } from "vitest/config";

const vitestConfig: VitestUserConfig = {
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./src/test/setup.ts",
  },
};

export default defineConfig({
  plugins: [react()],
  ...vitestConfig,
});

 

tsconfig.json

{
  "compilerOptions": {
    "types": ["vitest/globals"]
  }
}

setup.ts 셋팅

src/test/setup.ts 파일 생성

import "@testing-library/jest-dom";

공통 컴포넌트 기반의 테스트 케이스 작성

src/test/welcome.test.tsx

import { render, screen } from "@testing-library/react";

import Welcome from "../common/Welcome.tsx";

/**
 * render 랑 screen 을 가지고 컴포넌트를 렌더링 한 뒤, Dom 에 접근함.
 * expect 로 값이 예상한 조건과 일치하는지 확인.
 * toBeInTheDocument 이거는 이제 Dom 에 진짜 있는지 확인 하는거!
 */
describe("Welcome Component Test Start", () => {
  test("GUI Test - Welcome 컴포넌트 name props", () => {
    render(<Welcome name="World" />);
    const welcomeElement = screen.getByText(/Hello, World!/i);
    expect(welcomeElement).toBeInTheDocument();
  });
});

스크립트 작성

"scripts": {
  "test": "vitest"
}

실행

npm run test

 

 

https://white-blank.tistory.com/186

vitest + React Testing Library 사용하여 테스트 케이스 만들기

 

https://velog.io/@wlwl99/Testing-Library-Jest

Testing Library와 Jest에 대해 알아보자

 

---

 

[ Vercel vs Netlify vs Cloudflare Pages ]

 

# 엣지란?

: 클라우드 컴퓨팅에서 사용자와 가장 가까운 네트워크 지점(서버)

 

# 엣지 응답 속도란?

: 사용자의 지리적으로 가까운 서버(엣지 서버)에서 콘텐츠를 제공했을 때, 사용자가 실제로 응답을 받기까지 걸리는 시간

 

 

Vercel

: Next.js에 최적화된 플랫폼, SSR/ISR 지원 중심

- GitHub/GitLab 자동 연동, PR마다 Preview URL 생성

- 빌드 속도: 빠름 (1~2분)

- 엣지 네트워크: 전 세계 약 100개

- 무료 요금제: 월 100GB 대역폭, 하루 100,000 함수 호출 제공

- 동적 기능: Edge Functions, API 라우트 기능 기본 지원

- 확장성/비용: 사용량 증가 시 요금도 빠르게 증가함

 

 

장점

- Next.js에 최적화된 환경과 Zero-config 기능  

- Preview 배포, Edge Functions 등의 고급 기능 지원

 

단점

- 대역폭·빌드 분량 제한으로 트래픽 많아지면 비용 증가

- 정적 호스팅이나 JAMstack 사이트에는 과할 수 있음

 

Next.js 기반 동적 웹앱 및 스타트업 프로젝트 → Vercel 추천: 기본 설정 자동, Preview URL 제공, Edge Functions 지원

 

---

 

 

Netlify

: Jamstack 전반을 지원하는 범용 플랫폼, 다양한 플러그인 및 CI 기능 제공

- Git 연동/CI: Git 기반 자동 빌드 및 PR Preview 자동 생성

- 빌드 속도: 보통 (~2–3분)

- 엣지 네트워크: 멀티 클라우드 CDN 사용

- 무료 요금제: 월 100GB 대역폭, 월 300분 빌드 시간 제공

- 동적 기능: Netlify Functions와 다양한 플러그인으로 확장 가능

- 확장성/비용: 사용량 대비 가격은 중간 수준

- 디벨로퍼 경험: 플러그인, Forms, Identity 등 내장 기능이 풍부함

- 잠재 단점: 빌드 시간 제한, 대역폭 제한이 존재함

 

장점

- Jamstack 중심 풀스택 플랫폼 (Forms, Identity, Plugins)  

- 무료 요금제 기준 꽤 넉넉한 기능 제공

- CLI와 UI 모두 친숙하고 사용 간 편리

 

단점

 - 빌드 시간은 중간 수준

- 고급 기능은 모두 플러그인이나 추가 설정 필요

 

Jamstack형 정적/반정적 사이트 + 빌트인 기능 활용 원할 때→ Netlify 추천: 폼, 아이덴티티, 배경 작업 등 다양한 기능 포함

---

 

 

Cloudflare Pages 

: 정적 파일 + Workers 기반의 초고속 엣지 성능 중심

- Git 연동/CI: GitHub 등과 연동하여 PR마다 자동 Preview 배포

- 빌드 속도: 느림 (3~5분)

- 엣지 네트워크: 전 세계 300개 이상의 PoP로 최강 엣지 분산 제공

- 무료 요금제: 무제한 대역폭, 월 500분 빌드 시간 무료 제공

- 동적 기능: Cloudflare Workers 사용 (SSR도 가능하지만 설정 복잡)

- 확장성/비용: 무제한 대역폭으로 비용 효율이 가장 좋음

 

장점

- 엣지 응답 속도 best!!!!

- Workers를 통한 SSR/동적 작업 가능  

 

단점

- 빌드 속도가 가장 느림...

- 설정이 복잡하여 초반 진입장벽 있음

 

대역폭 많고 엣지 응답 빠른 글로벌 정적 사이트 → Cloudflare Pages 추천: 무제한 대역폭과 빠른 글로벌 캐시

 

https://www.digitalapplied.com/blog/vercel-vs-netlify-vs-cloudflare-pages-comparison?utm_source=chatgpt.com

Vercel vs Netlify vs Cloudflare Pages: 2025 Comparison

---

 

배포해보기.. 나는 일단 딴건 잘 모르겠다.. 가장 쉬워보이는 깃허브로 택...

 

나 어뜩하징.. ai 없인 못살어.................. ㅠㅠㅠㅠㅠㅠㅠㅠ

useSWR 어뜩하지 진짜 

일단 눈이 너무 아프니 나중에 다시 확인하면서 코드 보던가... 일단....너어는 기초부터 다시 한번 봐야 할것 같단다

 

 

그리고!!! 나 왜 자꾸 git init 하면 study 브랜치로 들어가는지 모르겠는데 (UMC 때 study 브랜치 만들었기 때문으로 추정)

혹시 모르니까

git checkout -b main

으로 메인 브랜치로 바꾸고 하세용... 

 

https://github.com/codenameVien/react-atoz

GitHub - codenameVien/react-atoz