1. MBTI 테스트

• 리액트 심화주차 과제로 MBTI테스트 만들기가 주어졌다.
  스크롤 압박으로 자세한 설명은 생략한다.

• 이번 프로젝트의 목표는 Intro에 자세히 나와있다.

---

2. 진행과정

진행과정중 어려웠던것만 적어보자.

2-1. Tailwind CSS 설치 및 설정

npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

• 패키지 설치 및 명령어를 입력하면,

---

• 이렇게 두 가지 파일이 생긴다.

---

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

• tailwind.config.js에 이렇게 설정해주고,

---

//index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

• 이렇게 셋팅해주면 끝!

---

2-2. ProtectedRoute 구현

components 폴더 내에 파일을 만들고,

import { Navigate, Outlet } from "react-router-dom";
>
const ProtectedRoute = () => {
  // 로컬 스토리지에서 사용자 데이터 가져오기
  const user = JSON.parse(localStorage.getItem("user"));
  const isAuthenticated = !!user; // 사용자 데이터가 존재하면 인증됨
>
  // 인증 여부에 따라 Outlet 또는 로그인 페이지로 리다이렉트
  return isAuthenticated ? <Outlet /> : <Navigate to="/login" />;
};
>
export default ProtectedRoute;

• 로그인 여부에 따라 권한을 설정해주고,

---

//Router.jsx
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Login from "./pages/Login";
import Profile from "./pages/Profile";
import Signup from "./pages/SignUp";
import Test from "./pages/Test";
import TestResult from "./pages/TestResult";
import ProtectedRoute from "./components/ProtectedRoute";

const AppRouter = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
        <Route element={<ProtectedRoute />}>
          <Route path="/profile" element={<Profile />} />
          <Route path="/test" element={<Test />} />
          <Route path="/result" element={<TestResult />} />
        </Route>
      </Routes>
    </Router>
  );
};
export default AppRouter;

• Router.jsx에 셋팅해면 끝!

---

3. 트러블슈팅

JWT 인증 API 연결

오늘 나를 가장 고생시켰던 부분이다.
일단 오늘 얻은 교훈은 '가이드'를 잘 확인하자...

---

3-1. BaseURL

서버 API_URL : https://moneyfulpublicpolicy.co.kr

• 이걸로 하라고 나와있는데, 괜히 로컬로 해가지고ㅜ
  정말 수 시간동안 고생했다...

---

• 위 이미지와 같이 서버마다 정해진 URL PATH가 있고,
  반드시 그 규칙에 따라서 로직을 작성해야 한다.

• 난 이것을 제대로 알지 못해서 계속해서 404에러가 떴다. (진짜 멍청하다)

• 다행히도 튜터님께 질문을 하고나서 문제를 파악했고
  정확한 URL PATH과 Method를 사용하여 문제를 해결 할 수 있었다.

---

이해를 돕기위한 "auth.js"로직이다.

import API from "./api";

// 회원가입
export const register = async (userid, password, nickname) => {
  try {
    // 서버로 회원가입 데이터 전송
    const response = await API.post("/register", {
      id: userid,
      password,
      nickname,
    });
    return response.data;
  } catch (error) {
    console.error(
      "Registration failed:",
      error.response?.data || error.message
    );
    throw error;
  }
};

// 로그인
export const login = async (userid, password) => {
  try {
    // 서버에 로그인 요청
    const response = await API.post("/login", {
      id: userid,
      password,
    });

    // 서버 응답에서 데이터 가져오기
    const { accessToken, userId, nickname } = response.data;

    // 로컬 스토리지에 사용자 데이터와 토큰 저장
    localStorage.setItem("user", JSON.stringify({ userId, nickname }));
    localStorage.setItem("token", accessToken);

    // 사용자 데이터 반환
    return { userId, nickname, token: accessToken };
  } catch (error) {
    console.error("Login failed:", error.response?.data || error.message);
    throw error;
  }
};

// 프로필 정보 조회
export const getProfile = async () => {
  try {
    const response = await API.get("/user");
    return response.data;
  } catch (error) {
    console.error("Failed to fetch profile:", error.response.data);
    throw error;
  }
};

// 프로필 정보 업데이트
export const updateProfile = async (nickname) => {
  try {
    // FormData 생성
    const formData = new FormData();
    formData.set("nickname", nickname); // 닉네임 설정

    // PATCH 요청
    const response = await API.patch("/profile", formData, {
      headers: {
        "Content-Type": "multipart/form-data", // multipart 설정
      },
    });
    return response.data; // 응답 데이터 반환
  } catch (error) {
    console.error(
      "Failed to update profile:",
      error.response?.data || error.message
    );
    throw error;
  }
};

• 지금은 URL PATH가 제대로 설정이 되어있기 때문에
  회원가입/로그인/프로필수정 모두 정상 작동된다.

• 발제 문서를 제대로 확인하지 않아서 얼마나 고생했는지 참...
  정말 힘겨웠다...
  다행이라면 앞으로 절대로 안까먹을것 같다는거?

---

회고

• 오늘은 이것으로 하루를 마무리 하기로 했다.
  생각치도 못한곳에서 너무 고생했기 때문에 매우 힘들다.

• 그런데, 분명 에러를 해결하는 과정에서 얻은것이 있기 때문에
  그것들을 자양분으로 삼아 더욱더 발전해보자!!! 화이팅!!!

그럼이만