app

root 의 _component

• 헤더 푸터 등을 넣을 컴포넌트

여기 아래 Header와 관련 컴포넌트를 넣을 디렉토리

Header

HeaderNav

headerNavItem 은 이름, 주소(레이블)

---

components

---

root 의 _providers

---

context

import { createContext, useContext, useState } from "react";

type AuthContextValue = {
  isLoggedIn: boolean;
};

const initialValue: AuthContextValue = {
  isLoggedIn: false,
};

const AuthContext = createContext<AuthContextValue>(initialValue);

export const useAuth = () => useContext(AuthContext);

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);

  const value: AuthContextValue = { isLoggedIn };

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

_provider index 에 설정

---

---

modal

프로바이더스를

---

redux

slice

import { createSlice } from "@reduxjs/toolkit";

type UtilsStore = {
  modal: React.ReactElement | null; //컴포넌트 x 엘리먼트임
};

const initialState = {
  modal: null,
};

const utilsSlice = createSlice({
  initialState,
  name: "utils",
  reducers: {
    setModal: (
      state,
      action: { type: string; payload: UtilsStore["modal"] }
    ) => {
      state.modal = action.payload;
    },
  },
});

---

리액트 query

• 리액트 쿼리는 사용할때 Provider 를 지정해줘야함

<QueryClientProvider client={}>

---

import 할때 안쓰는거 있으면 저장할때 삭제됨.

  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
  }

---

서버사이드 렌더링

• 이게 클라이언트 사이드보다 검색에서 유리함.

• 서버사이드에서 그리고 보내주는 방식. 넥스트는 이걸 그 안에 있는 컴포넌트 구조로 사용할 수 있게해서 좋아.

• use client 를 지워주고 작성.

---

로그인 로그아웃

로그아웃

1. setIsLoggedIn false로 바꾸고
2. 엑세스 토큰 뺏기.