onboarding ( 로그인 , 회원가입 ) 세팅

세팅 목표

• Vite + Typescript 기반 프로젝트 설치
  • zustand, tanstack query, tailwind css(또는 styled-components), react-router-dom 세팅
  • 환경변수 세팅 및 폴더구조 구성하기
  • json placeholder를 이용하여 외부 통신 테스트 하기
  • JWT 기술분석 : access, refresh token의 개념과 관리전략 blog 작성
  • 회원가입, 로그인, 마이페이지 페이지 컴포넌트 구현
    • 필수기능 : 회원가입, 로그인, 프로필 변경
  • tailwind 또는 styled-components를 이용한 스타일링
  • JWT 인증서버를 활용하여 access token 기반 페이지 권한 처리(라우팅 제어)

 

vite를 ts로 설정

yarn create vite . --template react-ts

 

패키지 다운로드

yarn install

 

관련 라이브러리 다운로드

yarn add zustand @tanstack/react-query react-router-dom
yarn add @tanstack/react-query-devtools

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init

yarn add axios

 

tailwind.config.js 수정

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

 

index.css 수정

@tailwind base;
@tailwind components;
@tailwind utilities;

 

기본 폴더 구조

📦src
 ┣ 📂api
 ┣ 📂assets
 ┣ 📂components
 ┣ 📂hooks
 ┣ 📂pages
 ┃ ┣ 📜Home.tsx
 ┃ ┣ 📜Login.tsx
 ┃ ┗ 📜SignUp.tsx
 ┣ 📂routes
 ┃ ┗ 📜Router.tsx
 ┣ 📂types
 ┣ 📂zustand
 ┃ ┗ 📜userStore.ts
 ┣ 📜App.css
 ┣ 📜App.tsx
 ┣ 📜index.css
 ┣ 📜main.tsx
 ┣ 📜QueryProvider.tsx
 ┗ 📜vite-env.d.ts

 

App.tsx

import { RouterProvider } from "react-router-dom";
import Router from "./routes/Router.tsx";

function App() {
  return <RouterProvider router={Router} />;
}

export default App;

 

Router.tsx 기본 설정

import { createBrowserRouter } from "react-router-dom";
import Home from "../pages/Home";

const Router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
]);

export default Router;

 

.env.local

VITE_JSON_PLACEHOLDER_URL=https://jsonplaceholder.typicode.com
VITE_MONEYFUL_PUBLIC_POLICY_URL=https://moneyfulpublicpolicy.co.kr

 

main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import QueryProvider from "./QueryProvider";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <QueryProvider>
      <App />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryProvider>
  </React.StrictMode>
);

 

QueryProvider.tsx

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactNode } from "react";

const queryClient = new QueryClient();

type QueryProviderProps = {
  children: ReactNode;
};

const QueryProvider = ({ children }: QueryProviderProps) => {
  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
};

export default QueryProvider;