DEVELOPE-sther

[ORM] Prisma 개념, ERD -> Prisma schema로 변환해보자.

Ea스더 — Thu, 23 Apr 2026 23:52:17 +0900

Prisma 란

Prisma는 Node.js / TypeScript 환경에서 DB를 다루기 위한 ORM(Object Relational Mapper) 이다.

쉽게 말하: SQL을 직접 짜는 대신, JavaScript/TypeScript 코드로 DB를 다룰 수 있게 해주는 도구다.

// SQL 없이 이렇게 쓸 수 있다
const users = await prisma.user.findMany();

그러면 여기서 ORM이 뭔지 알아보자.

DB는 SQL이라는 언어로 소통한다. 그런데 백엔드 코드는 JavaScript로 쓰고 있으니, 이 둘이 직접 대화하기가 어렵다.

ORM은 이 둘 사이의 통역사 역할을 한다.

내 코드 (JS/TS)  →  ORM (Prisma)  →  DB (PostgreSQL 등)

	SQL 직접	Prisma(ORM)
코드 스타일	SELECT * FROM users WHERE id = 1	prisma.user.findUnique({ where: { id: 1 } })
타입 안정성	❌ 없음	✅ TypeScript 자동완성 지원
실수 감지	런타임에 발견	컴파일 타임에 발견

Prisma의 구성 요소

Prisma는 크게 3가지로 이루어진다.

1️⃣ Prisma Schema (schema.prisma)
- DB 구조를 정의하는 파일. 테이블, 컬럼, 관계를 여기에 적는다.
2️⃣ Prisma Client
- schema를 바탕으로 자동 생성되는 쿼리 라이브러리.
  npx prisma generate를 실행하면 만들어진다.
3️⃣ Prisma Migrate
- schema 변경사항을 실제 DB에 반영해주는 도구.
  npx prisma migrate dev를 실행하면 마이그레이션 파일이 만들어지고 DB에 적용된다.

schema.prisma  →  (generate)  →  Prisma Client  →  DB 쿼리
             ↘  (migrate)   →  실제 DB에 테이블 생성

schema.prisma 파일 뜯어보기

schema.prisma는 3개의 블록으로 구성된다.

datasource : 어떤 DB를 쓸지!

datasource db {
  provider = "postgresql"  // mysql, sqlite 등도 가능
  url      = env("DATABASE_URL")  // .env 파일에서 DB 주소를 읽어옴
}

generator : 뭘 생성할지!

generator client {
  provider = "prisma-client-js"  // Prisma Client를 JS로 생성
}

model : 테이블 정의!

model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  nickname  String?  // ?는 null 허용 (optional)
  createdAt DateTime @default(now())
}

각 줄은 필드명 / 타입 / [어트리뷰트들] 구조로 이루어진다.

Prisma 타입

String	문자열 (varchar, text 모두)
Int	정수
Boolean	true / false
DateTime	날짜+시각
Json	JSON 객체
String[]	배열 (PostgreSQL만 지원)

어트리뷰트

@id	Primary Key
@default(autoincrement())	자동 증가 ID
@default(now())	현재 시각 기본값
@unique	유니크 제약
@map("컬럼명")	실제 DB 컬럼명 지정
@@map("테이블명")	실제 DB 테이블명 지정
@updatedAt	업데이트 시 자동으로 현재 시각 저장

5-1. 기본 테이블 변환

DBML

Table users {
  id         integer [primary key, increment]
  email      varchar [unique, not null]
  password   varchar
  nickname   varchar
  created_at timestamp
}

Prisma

model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  password  String?           // not null 없으면 ? 붙여서 optional
  nickname  String?
  createdAt DateTime @default(now()) @map("created_at")

  @@map("users")
}

포인트:

DBML의 [not null]이 없는 필드 → Prisma에서 ? (nullable)
snake_case 컬럼명 → camelCase 필드명 + @map()으로 실제 DB 컬럼명 유지
테이블명도 @@map()으로 소문자 복수형 유지

ERD -> Prisma scheme 변환하기

이미 dbdiogram으로 작성한 ERD가 있어서, 이걸 Prisma로 옮겨 보면서 공부해보았다.

// 1. Auth & User Management (김가영 담당)
// 유저 기본 정보 및 활동 점수 관리
Table users {
  id integer [primary key, increment]
  email varchar [unique, not null]
  password varchar [note: '소셜 로그인 유저는 비어있을 수 있음']
	name varchar
  profile_img text
  provider varchar [default: 'local', note: 'local, github']
  provider_id varchar [note: '깃허브 고유 ID']
  created_at timestamp
}

// 점수 변동 이력 (잔디 그래프 및 히스토리용)
Table score_logs {
  id integer [primary key, increment]
  team_member_id integer [ref: > team_members.id]
  amount integer // +50, +10 등
  reason varchar // ADOPTED_COMMENT, DAILY_CHECKIN 등
  created_at timestamp
}

// 2. Team Workspace (정애리 담당)
// 팀 생성 및 멤버십/권한 관리
Table teams {
  id integer [primary key, increment]
  name varchar [not null]
  description text
  slack_webhook_url text [note: '슬랙 알림 연동용']
  created_at timestamp
}

Table team_members {
  id integer [primary key]
  team_id integer [ref: > teams.id]
  user_id integer [ref: > users.id]
  role varchar // LEADER, MEMBER
  status varchar [default: 'PENDING', note: 'INVITED, JOINED, BANNED'] // 상태 추가
  score integer [default: 0]
  joined_at timestamp
}

// 3. Troubleshooting & Error Logs (김병성, 한재민 담당)
// 에러 포스팅 및 기술적인 로그 데이터 저장 -> 알림갈 사람 지정하게 해야할까요
Table error_issues {
  id integer [primary key, increment]
  user_id integer [ref: > users.id]
  team_id integer [ref: > teams.id]
  title varchar [not null]
  content text [note: '사용자가 작성한 상황 설명 (마크다운)']
  tag varchar[] [note: 'Frontend, Backend, DB 등']
  is_public boolean [default: false, note: '팀 외 전체 공개 여부']
  status varchar [default: 'unsolved', note: 'solved']
  created_at timestamp
  updated_at timestamp
}

Table error_logs {
  id integer [primary key, increment]
  issue_id integer [ref: > error_issues.id] // 게시글 하나에 2개 로그 연결가능
  log_type varchar [note: 'SENT(내 로그), RECEIVED(상대방 로그)']
  source varchar [note: 'Client, Server, DB, ExternalAPI 등']
  message text [note: '에러 메시지 요약']
  stack_trace text [note: '전체 스택 트레이스']
  request_data json [note: '요청 페이로드']
  response_data json [note: '응답 데이터']
  captured_at timestamp [note: '실제 에러 발생 시각']
}


// 4. Comments (정영호 담당)
Table comments {
  id integer [primary key, increment]
  issue_id integer [ref: > error_issues.id] 
  user_id integer [ref: > users.id]       
  parent_id integer [ref: > comments.id, note: 'null이면 원본 댓글, 값이 있으면 대댓글']
  content text [not null]
  is_adopted boolean [default: false]     
  reward_score integer [note: '채택 시 부여된 점수 기록']
  created_at timestamp
}

// 5. System Notifications 
Table notifications {
	id integer [primary key, increment]
  user_id integer [ref: > users.id]
  resource_id integer [note: '이동할 issue_id 등']
  type varchar [note: 'comment, adopt, team_invite']
  content text
  is_read boolean [default: false]
  created_at timestamp
}

// 그룹화 (시각적 구분용)
TableGroup Auth_User {
  users
  score_logs
  notifications
}

TableGroup Team_Management {
  teams
  team_members
}

TableGroup Core_Feature {
  error_logs
  error_issues
  comments
}

1. 기본 테이블 변환

Table users {
  id         integer [primary key, increment]
  email      varchar [unique, not null]
  password   varchar
  nickname   varchar
  created_at timestamp
}

model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  password  String?           // not null 없으면 ? 붙여서 optional
  nickname  String?
  createdAt DateTime @default(now()) @map("created_at")

  @@map("users")
}

DBML의 [not null]이 없는 필드 → Prisma에서 ? (nullable)
snake_case 컬럼명 → camelCase 필드명 + @map()으로 실제 DB 컬럼명 유지
테이블명도 @@map()으로 소문자 복수형 유지

2. 관계(Relation) 변환

Prisma는 FK(외래 키)를 단순히 숫자 ID로 끝내지 않고, 관계 필드도 함께 선언해야 한다.

Table team_members {
  id      integer [primary key]
  team_id integer [ref: > teams.id]
  user_id integer [ref: > users.id]
  role    varchar
}

model TeamMember {
  id     Int    @id @default(autoincrement())
  teamId Int    @map("team_id")
  userId Int    @map("user_id")
  role   String

  // 관계 필드 — 실제 DB 컬럼은 아니지만 Prisma가 JOIN을 처리해줌
  team Team @relation(fields: [teamId], references: [id])
  user User @relation(fields: [userId], references: [id])

  @@map("team_members")
}

// 반대편 모델에도 역방향 관계를 선언해야 함
model Team {
  // ...
  teamMembers TeamMember[]  // Team 하나에 여러 TeamMember
}

model User {
  // ...
  teamMembers TeamMember[]
}

@relation(fields: [FK필드], references: [상대PK])
반대편 모델에도 반드시 역방향 배열 필드 추가 (TeamMember[])
관계 필드 자체는 실제 DB에 컬럼으로 생성되지 않음

3. 자기참조 관계 (ex 댓글 → 대댓글)

대댓글 구조처럼 같은 테이블끼리 관계를 맺을 때

Table comments {
  id        integer [primary key, increment]
  parent_id integer [ref: > comments.id]
  content   text    [not null]
}

model Comment {
  id       Int     @id @default(autoincrement())
  parentId Int?    @map("parent_id")  // null이면 원본 댓글
  content  String

  // 자기참조 — 관계 이름을 따옴표로 명시해야 함
  parent  Comment?  @relation("CommentReplies", fields: [parentId], references: [id])
  replies Comment[] @relation("CommentReplies")

  @@map("comments")
}

자기참조 관계는 반드시 "관계이름" 을 명시해야 한다
parent는 optional(?), replies는 배열([])

배열 타입 (PostgreSQL)

Table error_issues {
  category varchar[]
}

model ErrorIssue {
  category String[]  // PostgreSQL에서만 사용 가능
}

마이그레이션

sschema를 수정했다고 DB가 자동으로 바뀌지 않는다.
마이그레이션은 schema 변경사항을 실제 DB에 반영하는 과정이다.

# 개발 환경에서 마이그레이션 실행
npx prisma migrate dev --name init

# 마이그레이션 후 Prisma Client 재생성
npx prisma generate

# DB 현재 상태를 GUI로 확인
npx prisma studio

마이그레이션을 실행하면 prisma/migrations/ 폴더에 SQL 파일이 자동으로 생성된다.
이 파일들은 Git에 커밋해서 팀원과 공유해야 DB 구조를 동기화할 수 있다.

[BookShop-FE] 비밀번호 초기화 페이지 구현, 로그인 상세 구현 - Zustand

Ea스더 — Tue, 21 Apr 2026 11:33:16 +0900

비밀번호 초기화 페이지 구현

app.tsx

/reset 페이지 추가

const router = createBrowserRouter([

  {
    path: "/reset",
    element: <Layout><ResetPassword/></Layout>
  }
])

ResetPassword.tsx

UI 조건부 렌더링, 버튼 텍스트 변경

import styled from "styled-components";
import Title from "../components/common/Title";
import InputText from "../components/common/InputText";
import Button from "../components/common/Button";
import { Link, useNavigate } from "react-router-dom";
import { useState } from "react";
import { useForm } from 'react-hook-form';
import { signup, resetRequest, resetPassword } from "../api/auth.api";
import { useAlert } from "../hooks/useAlert";
import { SignupStyle } from "./Signup";

export interface SignupProps {
    email: string;
    password: string;
}
function ResetPassword() {
    const navigate = useNavigate();
    const showAlert = useAlert();
    const [resetRequested, setResetRequested] = useState(false);
    // const [email, setEmail] = useState("");
    // const [password, setPassword] = useState("");
    
    // const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    //     event.preventDefault(); //페이지 이동을 막아줌

    // }

    const { register, handleSubmit, formState:{errors}} = useForm<SignupProps>();


    const OnSubmit = (data: SignupProps) => {
        if (resetRequested){
            // 초기화
            resetPassword(data).then(() => {
                showAlert("비밀번호가 초기화되었습니다.");
                navigate("/login");
            });

        } else {
            // 요청
            resetRequest(data).then(() => {
                setResetRequested(true);
            });
        }
    }

    return (
        <>
            <Title size="large">비밀번호 초기화</Title>
            <SignupStyle>
                <form noValidate onSubmit={handleSubmit(OnSubmit)}>
                    <fieldset>
                        <InputText placeholder="이메일" inputType="email" {...register("email", {required: true})} />
                        {errors.email && <p className="error-text">이메일을 입력해주세요.</p>}
                    </fieldset>
                    {resetRequested && (
                        <fieldset>
                            <InputText placeholder="비밀번호" inputType="password" {...register("password", {required: true})}/>
                            {errors.password && <p className="error-text">비밀번호을 입력해주세요.</p>}
                        </fieldset>
                    )}
                    <fieldset>
                        <Button type="submit" size="medium" scheme="primary">
                            {resetRequested ? "비밀번호 초기화" : "초기화 요청"}
                        </Button>
                    </fieldset>
                    <div className="info">
                        <Link to="/reset">비밀번호 초기화</Link>
                    </div>
                </form>
            </SignupStyle>
        </>
    )
}


export default ResetPassword;

auth.api.ts

export const resetRequest = async(data: SignupProps) => {
    const response = await httpClient.post("/users/reset", data);
    return response.data;
}

export const resetPassword = async(data: SignupProps) => {
    const response = await httpClient.put("/users/reset", data);
    return response.data;
}

1단계: 초기화 요청

이메일 입력
서버에 비밀번호 초기화 요청 보냄 -> 비밀번호 입력 단계로 전환

2단계: 비밀번호 재설정

비밀번호 입력창 추가로 노출
새 비밀번호 전송해서 실제 변경

로그인 구현

로그인 성공 -> 토큰 획득 -> 전역 상태(isLoggedIn: true)
                    -> 토큰 저장(localstorage) <- http client(headers.Authrization)

현재 프론트 코드

const login = (req, res)=>{
   const {email, password} = req.body;

   let sql = 'SELECT * FROM users WHERE email = ?';
   conn.query(sql, email,
    (err, results) => {
        if(err){
           console.log(err);
           return res.status(StatusCodes.BAD_REQUEST).end(); 
        }

        const loginUser = results[0];

        // salt값 꺼내서 날 것으로 들어온 비밀번호 암호화 해보고
        const hashPassword = crypto.pbkdf2Sync(password, loginUser.salt, 1000, 10, 'sha512').toString('base64'); 

        // => DB 비밀번호랑 비교 
        if(loginUser && loginUser.password == hashPassword){
            const token = jwt.sign({
                id : loginUser.id,
                email : loginUser.email
            }, process.env.PRIVATE_KEY, {
                expiresIn : '60m',
                issuer : "kayoung"
            })
            
            //토큰 쿠키에 담기
            res.cookie("token", token, {
                httpOnly : true
            });
            console.log(token);

            return res.status(StatusCodes.OK).json({...results[0], token: token});
        } else {
            return res.status(StatusCodes.UNAUTHORIZED).end() //401 : Unauthorized
        }

    })
};

user 정보 배열 + 토큰값을 가져오고 있습니다.

app.tsx

라우트 등록

const router = createBrowserRouter([
    {
    path: "/login",
    element: <Layout><Login/></Layout>
  }
])

auth.api.ts

interface LoginResponse {
    token: string;
}

export const login = async(data: SignupProps) => {
    const response = await httpClient.post<LoginResponse>("/users/login", data);
    return response.data;
}

LoginResponse에서 일단 필요한 토큰만 가져와서 login API 에서 받아와줍니다.

import styled from "styled-components";
import Title from "../components/common/Title";
import InputText from "../components/common/InputText";
import Button from "../components/common/Button";
import { Link, useNavigate } from "react-router-dom";
import { useState } from "react";
import { useForm } from 'react-hook-form';
import { login, signup } from "../api/auth.api";
import { useAlert } from "../hooks/useAlert";
import { SignupStyle } from "./Signup";

export interface SignupProps {
    email: string;
    password: string;
}
function Login() {
    const navigate = useNavigate();
    const showAlert = useAlert();

    const { register, handleSubmit, formState:{errors}} = useForm<SignupProps>();


    const OnSubmit = (data: SignupProps) => {
        login(data).then((res)=>{
            console.log(res.token);
            showAlert("로그인 완료되었습니다.");
            navigate("/");
        })
    }

    return (
        <>
            <Title size="large">로그인</Title>
            <SignupStyle>
                <form noValidate onSubmit={handleSubmit(OnSubmit)}>
                    <fieldset>
                        <InputText placeholder="이메일" inputType="email" {...register("email", {required: true})} />
                        {errors.email && <p className="error-text">이메일을 입력해주세요.</p>}
                    </fieldset>
                    <fieldset>
                        <InputText placeholder="비밀번호" inputType="password" {...register("password", {required: true})}/>
                        {errors.password && <p className="error-text">비밀번호을 입력해주세요.</p>}
                    </fieldset>
                    <fieldset>
                        <Button type="submit" size="medium" scheme="primary">
                            로그인
                        </Button>
                    </fieldset>
                    <div className="info">
                        <Link to="/reset">비밀번호 초기화</Link>
                    </div>
                </form>
            </SignupStyle>
        </>
    )
}


export default Login;

우선은 API 연결 후 로그인 성공 시에 홈으로 이동밖에 구현되지 않은 상황입니다.

이때 zustand를 써보고자 합니다.

Zustand

: 전역 상태를 간단하게 관리하는 라이브러리 (Redux보다 훨씬 가벼움)

- 보통 상태 관리: useState → 컴포넌트 안에서만 사용 가능 가능, props로 전달 → 깊어지면 지옥

-> Zustand 쓰면 어디서든 코드 짧고, 설정 거의 없이 어디서든 상태를 접근 가능하게 해줍니다.

https://github.com/pmndrs/zustand

GitHub - pmndrs/zustand: Bear necessities for state management in React

Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub.

github.com

npm i zustand --save

store/authStore.ts 생성

import {create} from "zustand";

interface StoreState {
    isloggedIn: boolean;
    storeLogin: (token: string) => void;
    storeLogout: () => void;
}

const getToken = () => {
    const token = localStorage.getItem('token');
    return token;
}

const setToken = (token: string) => {
    localStorage.setItem('token', token);

};

const removeToken = () => {
    localStorage.removeItem("token");
}

export const useAuthStore = create<StoreState>((set) => ({
    isloggedIn: getToken() ? true : false, //초기값
    storeLogin: (token: string) => {
        set({isloggedIn:true});
        setToken(token);
    },
    storeLogout: () => {
        set({isloggedIn: false});
        removeToken();
    }
}))

[로그인]
→ storeLogin(token)
   → 상태 true
   → localStorage 저장

[새로고침]
→ getToken() 실행
   → 있으면 로그인 유지

[로그아웃]
→ storeLogout()
   → 상태 false
   → localStorage 삭제

function Login() {
    const navigate = useNavigate();
    const showAlert = useAlert();

    const { isloggedIn, storeLogin, storeLogout } = useAuthStore();
    const { register, handleSubmit, formState:{errors}} = useForm<SignupProps>();


    const OnSubmit = (data: SignupProps) => {
        login(data).then((res)=>{
            // 상태 변화
            storeLogin(res.token);
            
            showAlert("로그인 완료되었습니다.");
            navigate("/");
        })
    }

    return (
        <>
            <Title size="large">로그인</Title>
            <SignupStyle>
                <form noValidate onSubmit={handleSubmit(OnSubmit)}>
                    <fieldset>
                        <InputText placeholder="이메일" inputType="email" {...register("email", {required: true})} />
                        {errors.email && <p className="error-text">이메일을 입력해주세요.</p>}
                    </fieldset>
                    <fieldset>
                        <InputText placeholder="비밀번호" inputType="password" {...register("password", {required: true})}/>
                        {errors.password && <p className="error-text">비밀번호을 입력해주세요.</p>}
                    </fieldset>
                    <fieldset>
                        <Button type="submit" size="medium" scheme="primary">
                            로그인
                        </Button>
                    </fieldset>
                    <div className="info">
                        <Link to="/reset">비밀번호 초기화</Link>
                    </div>
                </form>
            </SignupStyle>
        </>
    )
}


export default Login;

로그인할 때 이렇게 가져와 사용합니다.

그러면 개발자 도구의 local storage에서 token값이 잘 저장되는 것을 볼 수 있습니다.

Header.tsx

Header에서도 isloggedIn를 사용해 카트 / 로그인&회원가입 여부를 판단해주었습니다. 또, storeLogout를 로그인 button에 적용시켰습니다.

위(로그인 전) / 아래(로그인 후)

            <nav className="auth">
                {
                    isloggedIn && (
                        <ul>
                            <li><Link to="/cart">장바구니</Link></li>
                            <li><Link to="/orderlist">주문 내역</Link></li>
                            <li><button onClick={storeLogout}>로그아웃</button></li>
                        </ul>
                    )
                }
                {
                    !isloggedIn && (
                        <ul>
                            <li>
                                <a href="/login">
                                    <FaSignInAlt />로그인
                                </a>
                            </li>
                            <li>
                                <a href="/signup">
                                    <FaRegUser />회원가입
                                </a>
                            </li>
                        </ul>
                    )
                }
            </nav>

http client 에 headers.Authorization

헤더에 Authorization 추가된 것을 볼 수 있습니다.

또한 로그인 실패 후 401 에러를 내게 되면, 권한이 없기 때문에 removeToken() 처리해주어야합니다.

401에러가 나면 auth.api.ts에서 /login으로 가는건 auth.api.ts의 interceptors로 이미 구현을 해놓았기 때문에


    axiosInstance.interceptors.response.use(
        (response) => {
            return response;
        },
        (error) => {
            //로그인 만료 처리
            if(error.response && error.response.status === 401) {
                removeToken();
                window.location.href = "/login";
                return;
            }
            return Promise.reject(error);
        }
    )

    const OnSubmit = (data: SignupProps) => {
        login(data).then((res)=>{
            // 상태 변화
            storeLogin(res.token);

            showAlert("로그인 완료되었습니다.");
            navigate("/");
        }, (error) => {
            showAlert("로그인이 실패했습니다.");
        })
    }

login의 then에 error경우를 추가해주면 됩니다.

[BookShop-FE] 비밀번호 초기화 페이지 구현, 로그인 상세 구현 - Zustand

Ea스더 — Tue, 21 Apr 2026 04:09:57 +0900

비밀번호 초기화 페이지 구현

app.tsx

/reset 페이지 추가

const router = createBrowserRouter([

  {
    path: "/reset",
    element: <Layout><ResetPassword/></Layout>
  }
])

ResetPassword.tsx

UI 조건부 렌더링, 버튼 텍스트 변경

import styled from "styled-components";
import Title from "../components/common/Title";
import InputText from "../components/common/InputText";
import Button from "../components/common/Button";
import { Link, useNavigate } from "react-router-dom";
import { useState } from "react";
import { useForm } from 'react-hook-form';
import { signup, resetRequest, resetPassword } from "../api/auth.api";
import { useAlert } from "../hooks/useAlert";
import { SignupStyle } from "./Signup";

export interface SignupProps {
    email: string;
    password: string;
}
function ResetPassword() {
    const navigate = useNavigate();
    const showAlert = useAlert();
    const [resetRequested, setResetRequested] = useState(false);
    // const [email, setEmail] = useState("");
    // const [password, setPassword] = useState("");
    
    // const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    //     event.preventDefault(); //페이지 이동을 막아줌

    // }

    const { register, handleSubmit, formState:{errors}} = useForm<SignupProps>();


    const OnSubmit = (data: SignupProps) => {
        if (resetRequested){
            // 초기화
            resetPassword(data).then(() => {
                showAlert("비밀번호가 초기화되었습니다.");
                navigate("/login");
            });

        } else {
            // 요청
            resetRequest(data).then(() => {
                setResetRequested(true);
            });
        }
    }

    return (
        <>
            <Title size="large">비밀번호 초기화</Title>
            <SignupStyle>
                <form noValidate onSubmit={handleSubmit(OnSubmit)}>
                    <fieldset>
                        <InputText placeholder="이메일" inputType="email" {...register("email", {required: true})} />
                        {errors.email && <p className="error-text">이메일을 입력해주세요.</p>}
                    </fieldset>
                    {resetRequested && (
                        <fieldset>
                            <InputText placeholder="비밀번호" inputType="password" {...register("password", {required: true})}/>
                            {errors.password && <p className="error-text">비밀번호을 입력해주세요.</p>}
                        </fieldset>
                    )}
                    <fieldset>
                        <Button type="submit" size="medium" scheme="primary">
                            {resetRequested ? "비밀번호 초기화" : "초기화 요청"}
                        </Button>
                    </fieldset>
                    <div className="info">
                        <Link to="/reset">비밀번호 초기화</Link>
                    </div>
                </form>
            </SignupStyle>
        </>
    )
}


export default ResetPassword;

auth.api.ts

export const resetRequest = async(data: SignupProps) => {
    const response = await httpClient.post("/users/reset", data);
    return response.data;
}

export const resetPassword = async(data: SignupProps) => {
    const response = await httpClient.put("/users/reset", data);
    return response.data;
}

1단계: 초기화 요청

이메일 입력
서버에 비밀번호 초기화 요청 보냄 -> 비밀번호 입력 단계로 전환

2단계: 비밀번호 재설정

비밀번호 입력창 추가로 노출
새 비밀번호 전송해서 실제 변경

로그인 구현

로그인 성공 -> 토큰 획득 -> 전역 상태(isLoggedIn: true)
                    -> 토큰 저장(localstorage) <- http client(headers.Authrization)

현재 프론트 코드

const login = (req, res)=>{
   const {email, password} = req.body;

   let sql = 'SELECT * FROM users WHERE email = ?';
   conn.query(sql, email,
    (err, results) => {
        if(err){
           console.log(err);
           return res.status(StatusCodes.BAD_REQUEST).end(); 
        }

        const loginUser = results[0];

        // salt값 꺼내서 날 것으로 들어온 비밀번호 암호화 해보고
        const hashPassword = crypto.pbkdf2Sync(password, loginUser.salt, 1000, 10, 'sha512').toString('base64'); 

        // => DB 비밀번호랑 비교 
        if(loginUser && loginUser.password == hashPassword){
            const token = jwt.sign({
                id : loginUser.id,
                email : loginUser.email
            }, process.env.PRIVATE_KEY, {
                expiresIn : '60m',
                issuer : "kayoung"
            })
            
            //토큰 쿠키에 담기
            res.cookie("token", token, {
                httpOnly : true
            });
            console.log(token);

            return res.status(StatusCodes.OK).json({...results[0], token: token});
        } else {
            return res.status(StatusCodes.UNAUTHORIZED).end() //401 : Unauthorized
        }

    })
};

user 정보 배열 + 토큰값을 가져오고 있습니다.

app.tsx

라우트 등록

const router = createBrowserRouter([
    {
    path: "/login",
    element: <Layout><Login/></Layout>
  }
])

auth.api.ts

interface LoginResponse {
    token: string;
}

export const login = async(data: SignupProps) => {
    const response = await httpClient.post<LoginResponse>("/users/login", data);
    return response.data;
}

LoginResponse에서 일단 필요한 토큰만 가져와서 login API 에서 받아와줍니다.

import styled from "styled-components";
import Title from "../components/common/Title";
import InputText from "../components/common/InputText";
import Button from "../components/common/Button";
import { Link, useNavigate } from "react-router-dom";
import { useState } from "react";
import { useForm } from 'react-hook-form';
import { login, signup } from "../api/auth.api";
import { useAlert } from "../hooks/useAlert";
import { SignupStyle } from "./Signup";

export interface SignupProps {
    email: string;
    password: string;
}
function Login() {
    const navigate = useNavigate();
    const showAlert = useAlert();

    const { register, handleSubmit, formState:{errors}} = useForm<SignupProps>();


    const OnSubmit = (data: SignupProps) => {
        login(data).then((res)=>{
            console.log(res.token);
            showAlert("로그인 완료되었습니다.");
            navigate("/");
        })
    }

    return (
        <>
            <Title size="large">로그인</Title>
            <SignupStyle>
                <form noValidate onSubmit={handleSubmit(OnSubmit)}>
                    <fieldset>
                        <InputText placeholder="이메일" inputType="email" {...register("email", {required: true})} />
                        {errors.email && <p className="error-text">이메일을 입력해주세요.</p>}
                    </fieldset>
                    <fieldset>
                        <InputText placeholder="비밀번호" inputType="password" {...register("password", {required: true})}/>
                        {errors.password && <p className="error-text">비밀번호을 입력해주세요.</p>}
                    </fieldset>
                    <fieldset>
                        <Button type="submit" size="medium" scheme="primary">
                            로그인
                        </Button>
                    </fieldset>
                    <div className="info">
                        <Link to="/reset">비밀번호 초기화</Link>
                    </div>
                </form>
            </SignupStyle>
        </>
    )
}


export default Login;

우선은 API 연결 후 로그인 성공 시에 홈으로 이동밖에 구현되지 않은 상황입니다.

이때 zustand를 써보고자 합니다.

Zustand

: 전역 상태를 간단하게 관리하는 라이브러리 (Redux보다 훨씬 가벼움)

- 보통 상태 관리: useState → 컴포넌트 안에서만 사용 가능 가능, props로 전달 → 깊어지면 지옥

-> Zustand 쓰면 어디서든 코드 짧고, 설정 거의 없이 어디서든 상태를 접근 가능하게 해줍니다.

https://github.com/pmndrs/zustand

GitHub - pmndrs/zustand: Bear necessities for state management in React

Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub.

github.com

npm i zustand --save

store/authStore.ts 생성

import {create} from "zustand";

interface StoreState {
    isloggedIn: boolean;
    storeLogin: (token: string) => void;
    storeLogout: () => void;
}

const getToken = () => {
    const token = localStorage.getItem('token');
    return token;
}

const setToken = (token: string) => {
    localStorage.setItem('token', token);

};

const removeToken = () => {
    localStorage.removeItem("token");
}

export const useAuthStore = create<StoreState>((set) => ({
    isloggedIn: getToken() ? true : false, //초기값
    storeLogin: (token: string) => {
        set({isloggedIn:true});
        setToken(token);
    },
    storeLogout: () => {
        set({isloggedIn: false});
        removeToken();
    }
}))

[로그인]
→ storeLogin(token)
   → 상태 true
   → localStorage 저장

[새로고침]
→ getToken() 실행
   → 있으면 로그인 유지

[로그아웃]
→ storeLogout()
   → 상태 false
   → localStorage 삭제

function Login() {
    const navigate = useNavigate();
    const showAlert = useAlert();

    const { isloggedIn, storeLogin, storeLogout } = useAuthStore();
    const { register, handleSubmit, formState:{errors}} = useForm<SignupProps>();


    const OnSubmit = (data: SignupProps) => {
        login(data).then((res)=>{
            // 상태 변화
            storeLogin(res.token);
            
            showAlert("로그인 완료되었습니다.");
            navigate("/");
        })
    }

    return (
        <>
            <Title size="large">로그인</Title>
            <SignupStyle>
                <form noValidate onSubmit={handleSubmit(OnSubmit)}>
                    <fieldset>
                        <InputText placeholder="이메일" inputType="email" {...register("email", {required: true})} />
                        {errors.email && <p className="error-text">이메일을 입력해주세요.</p>}
                    </fieldset>
                    <fieldset>
                        <InputText placeholder="비밀번호" inputType="password" {...register("password", {required: true})}/>
                        {errors.password && <p className="error-text">비밀번호을 입력해주세요.</p>}
                    </fieldset>
                    <fieldset>
                        <Button type="submit" size="medium" scheme="primary">
                            로그인
                        </Button>
                    </fieldset>
                    <div className="info">
                        <Link to="/reset">비밀번호 초기화</Link>
                    </div>
                </form>
            </SignupStyle>
        </>
    )
}


export default Login;

로그인할 때 이렇게 가져와 사용합니다.

그러면 개발자 도구의 local storage에서 token값이 잘 저장되는 것을 볼 수 있습니다.

Header.tsx

Header에서도 isloggedIn를 사용해 카트 / 로그인&회원가입 여부를 판단해주었습니다. 또, storeLogout를 로그인 button에 적용시켰습니다.

위(로그인 전) / 아래(로그인 후)

            <nav className="auth">
                {
                    isloggedIn && (
                        <ul>
                            <li><Link to="/cart">장바구니</Link></li>
                            <li><Link to="/orderlist">주문 내역</Link></li>
                            <li><button onClick={storeLogout}>로그아웃</button></li>
                        </ul>
                    )
                }
                {
                    !isloggedIn && (
                        <ul>
                            <li>
                                <a href="/login">
                                    <FaSignInAlt />로그인
                                </a>
                            </li>
                            <li>
                                <a href="/signup">
                                    <FaRegUser />회원가입
                                </a>
                            </li>
                        </ul>
                    )
                }
            </nav>

http client 에 headers.Authorization

헤더에 Authorization 추가된 것을 볼 수 있습니다.

또한 로그인 실패 후 401 에러를 내게 되면, 권한이 없기 때문에 removeToken() 처리해주어야합니다.

[BookShop-FE] 회원가입 페이지 구현, React Hook Form

Ea스더 — Sun, 19 Apr 2026 16:14:53 +0900

라우터 등록

라우터에 경로를 등록해야 합니다.

import Signup from "./pages/Signup";  

const router = createBrowserRouter([
  { path: "/", element: <Layout><Home /></Layout> },
  { path: "/books", element: <Layout><div>도서 목록</div></Layout> },
  { path: "/signup", element: <Layout><Signup /></Layout> }, 
])

/signup 경로로 접근하면 Layout 안에 Signup 컴포넌트가 렌더링됩니다.

컴포넌트 Props 확장 (Button, InputText)

Button — React.ButtonHTMLAttributes 확장

// 변경 전
interface Props {
  children: React.ReactNode;
  size: ButtonSize;
  scheme: ButtonScheme;
  disabled?: boolean;
  isLoading?: boolean;
}

// 변경 후
interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  // 기존 Props는 동일하되, HTML button의 모든 속성을 추가로 사용 가능
}

extends React.ButtonHTMLAttributes<HTMLButtonElement>를 추가하면 type="submit", onClick, onFocus 같은 HTML 기본 속성을 별도 선언 없이 그냥 쓸 수 있습니다. Signup 폼에서 <Button type="submit"> 처럼 쓸 수 있는 이유입니다.

InputText — inputType과 ...props 전달

interface Props extends React.InputHTMLAttributes<HTMLInputElement> { 
	//기존 input이 가지고 있는 속성들 그대로 사용가능
    //추가로
  placeholder?: string;
  inputType?: "text" | "email" | "password" | "number";  // 타입 제한
}

const InputText = React.forwardRef(
  ({ placeholder, inputType, onChange, ...props }: Props, ref) => {
    return (
      <InputTextStyle
        placeholder={placeholder}
        ref={ref}
        type={inputType}       // ← inputType을 type으로 연결
        onChange={onChange}
        {...props}             // ← 나머지 HTML 속성 전부 전달
      />
    );
  }
);

forwardRef를 쓰는 이유는 부모 컴포넌트에서 ref로 input DOM에 직접 접근할 수 있게 하기 위해서입니다. (e.g. 자동 포커스, 유효성 검사)

회원가입 페이지 (Signup.tsx)

상태 관리 — useState

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

email과 password를 각각 상태로 관리합니다. input이 바뀔 때마다 상태가 업데이트되는 제어 컴포넌트(Controlled Component) 패턴입니다.

폼 제출 — handleSubmit

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();  // 브라우저 기본 동작(페이지 새로고침) 차단
  // 여기서 API 호출 예정
};

event.preventDefault()가 없으면 폼 제출 시 페이지가 새로고침되어 상태가 초기화됩니다.

import styled from "styled-components";
import Title from "../components/common/Title";
import InputText from "../components/common/InputText";
import Button from "../components/common/Button";
import { Link } from "react-router-dom";
import { useState } from "react";

function Signup() {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    
    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault(); //페이지 이동을 막아줌

    }
    return (
        <>
            <Title size="large">회원가입</Title>
            <SignupStyle>
                <form onSubmit={handleSubmit}>
                    <fieldset>
                        <InputText placeholder="이메일" inputType="email" value={email} onChange={(e) => setEmail(e.target.value)}/>
                    </fieldset>
                    <fieldset>
                        <InputText placeholder="비밀번호" inputType="password" value={password} onChange={(e) => setPassword(e.target.value)}/>
                    </fieldset>
                    <fieldset>
                        <Button type="submit" size="medium" scheme="primary">
                            회원가입
                        </Button>
                    </fieldset>
                    <div className="info">
                        <Link to="/reset">비밀번호 초기화</Link>
                    </div>
                </form>
            </SignupStyle>
        </>
    )
}

const SignupStyle = styled.div`
    max-width: ${({theme}) => theme.layout.width.small};
    margin: 80px auto;

    fieldset {
        border: 0;
        padding: 0 0 8px 0
        .error-text {
            color: red;
        }
    }
    
    input {
        width: 100%;
    }

    button {
        width: 100%;;
    }

    .info {
        text-align: center;
        padding: 16px 0 0 0;
    }
`;

export default Signup;

React Hook Form 사용해 onChange 간단화하기

현재의 방식은 onChange를 하나하나 만들고 있습니다.

그런데 이렇게되면 onChange가 불필요하게 많아지고, 길어질 수 있습니다.

사용자 입력
    ↓
onChange → setEmail / setPassword (상태 업데이트)
    ↓
버튼 클릭 → form의 onSubmit 발동
    ↓
handleSubmit → event.preventDefault() → API 호출 (예정)

이걸 방지하기 위해 React Hook Form 이라는 라이브러리를 사용해보고자합니다.

https://react-hook-form.com/

React Hook Form - performant, flexible and extensible form library

Performant, flexible and extensible forms with easy-to-use validation.

react-hook-form.com

npm install react-hook-form

npm 설치해준 후,

import { useForm } from 'react-hook-form';

useForm을 사용해보겠습니다.

useForm 기본 사용

const { register, handleSubmit, formState: { errors } } = useForm<SignupProps>();

useForm에서 꺼내 쓰는 세 가지입니다.

register : input을 React Hook Form에 등록. {...register("email")} 형태로 spread하면 onChange, onBlur, ref 등이 자동으로 연결됩니다.
handleSubmit : 유효성 검사를 통과했을 때만 콜백을 실행해줍니다. 통과 못 하면 콜백 자체가 호출되지 않습니다.
formState.errors : 유효성 검사 실패 시 어떤 필드가 왜 실패했는지 담겨 있습니다.

이전에는 useState로 각 필드를 따로 관리하고, onChange도 직접 작성했는데, register를 spread하는 것만으로 그 과정이 전부 대체됩니다.

// 변경 전
<InputText value={email} onChange={(e) => setEmail(e.target.value)} />

// 변경 후
<InputText {...register("email", { required: true })} />

noValidate

<form noValidate onSubmit={handleSubmit(OnSubmit)}>

noValidate를 추가한 이유는 브라우저 기본 유효성 검사(말풍선 팝업)를 끄기 위해서입니다. React Hook Form의 errors로 직접 에러 메시지를 렌더링하기 때문에, 브라우저 기본 UI와 충돌하지 않도록 비활성화합니다.

{errors.email && <p className="error-text">이메일을 입력해주세요.</p>}

errors.email은 해당 필드가 유효성 검사를 통과하지 못했을 때만 존재합니다. 단락 평가(&&)로 간단하게 조건부 렌더링할 수 있습니다.

auth API 연동

auth.api.ts

export const signup = async (userData: SignupProps) => {
    const response = await httpClient.post("/users/join", userData);
    return response.data;
};

SignupProps 타입을 Signup.tsx에서 export해서 여기서도 그대로 재사용하고 있습니다. API 함수와 페이지 컴포넌트가 같은 타입을 공유하기 때문에 타입 불일치 실수를 방지할 수 있습니다.

회원가입 성공 처리 흐름

const OnSubmit = (data: SignupProps) => {
    signup(data).then((res) => {
        showAlert('회원가입이 완료되었습니다.');
        navigate('/login');
    });
};

성공 시 두 가지를 순서대로 처리합니다.

Alert로 완료 메시지를 보여줍니다.
useNavigate로 로그인 페이지로 이동합니다.

useAlert 커스텀 훅

hooks/useAlert.ts

export const useAlert = () => {
    const showAlert = useCallback((message: string) => {
        window.alert(message);
    }, []);

    return showAlert;
};

지금 당장은 window.alert를 그냥 써도 동작은 동일합니다. 그런데 별도 훅으로 분리한 이유는, 나중에 브라우저 기본 alert 대신 커스텀 모달이나 토스트 UI로 교체할 때 useAlert만 수정하면 전체 적용되기 때문입니다. 컴포넌트 코드는 건드리지 않아도 됩니다.

useCallback : 함수를 메모이제이션해서 리렌더링 시 새로 생성되지 않게 하는 훅, 의존성 배열이 []이므로 처음 만든 함수 계속 재사용

전체 흐름 정리

사용자 입력
    ↓
register로 연결된 input이 값을 추적 (useState 불필요)
    ↓
버튼 클릭 → handleSubmit 발동
    ↓
유효성 검사 통과 실패 → errors 업데이트 → 에러 메시지 렌더링
유효성 검사 통과 성공 → OnSubmit 호출
    ↓
signup API 호출 → 성공 시 Alert + 로그인 페이지로 이동

CORS의 개념, 주의점에 대해 알아봅쉬다

Ea스더 — Sun, 19 Apr 2026 16:07:34 +0900

https://ilove-ya.tistory.com/215

[Axios] Axios Network Error & CORS 오류 해결

문제 상황프론트에서 Axios 요청을 보냈을 때 다음과 같은 에러가 발생했다. AxiosError: Network Error개발자 도구 콘솔에서는 추가로 아래 에러가 확인되었다.Access to XMLHttpRequest at 'http://localhost:9999/cate

ilove-ya.tistory.com

프론트에서 Axios 요청을 보냈을 때 이런 에러가 발생했다.

Access to XMLHttpRequest at 'http://localhost:9999/category' from origin 'http://localhost:3000' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present

처음엔 서버 문제인 줄 알았다. 그런데 서버는 멀쩡히 돌아가고 있었고, Postman으로 요청하면 정상 응답이 왔다. 브라우저에서만 막히는 상황이었다.

이 오류를 해결하면서 CORS라는 개념을 처음 알게 되었고, 정확히 무엇인지 이해하고자 이 글을 작성하게 되었다.

CORS(Cross-Origin Resource Sharing)란?

: 다른 출처(Origin)에서 오는 요청을 브라우저가 허용할지 말지를 결정하는 보안 정책

CORS는 Cross-Origin Resource Sharing의 약자로, 번역하면 교차 출처 리소스 공유다.

출처(Origin)란?

출처는 프로토콜 + 도메인 + 포트 세 가지가 모두 같아야 같은 출처다.

URL같은 출처?이유

http://localhost:3000 → http://localhost:3000/api	✅ 같음	셋 다 동일
http://localhost:3000 → http://localhost:9999	❌ 다름	포트가 다름
http://localhost:3000 → https://localhost:3000	❌ 다름	프로토콜이 다름
http://localhost:3000 → http://myserver.com	❌ 다름	도메인이 다름

내 상황이 딱 이 경우였다. 프론트는 localhost:3000, 백엔드는 localhost:9999로 포트가 달라서 다른 출처였다.

왜 브라우저는 다른 출처 요청을 막는가?

이건 브라우저의 기본 보안 정책인 SOP(Same-Origin Policy, 동일 출처 정책) 때문이다.

브라우저는 "내가 열어준 사이트가 다른 서버에 몰래 요청 보내는 걸 기본으로 막겠다"는 원칙을 갖고 있다.

예를 들어, 악의적인 사이트가 당신이 로그인된 상태를 이용해서 은행 서버에 몰래 요청을 보낼 수 있다. SOP는 이런 공격을 브라우저 레벨에서 원천 차단한다.

Postman은 브라우저가 아니기 때문에 SOP 정책 자체가 없기때문에, Postman에서는 잘 작동한다. CORS는 순전히 브라우저의 보안 정책이다. 서버가 막은 게 아니라, 브라우저가 막은 것이다.

CORS는 어떻게 동작하는가?

브라우저는 다른 출처로 요청을 보낼 때, 서버에게 먼저 물어본다.

단순 요청 (Simple Request)

GET, POST 같은 단순한 요청은 바로 보내고, 서버 응답 헤더를 확인한다.

[브라우저] → 요청 전송
[서버]     → 응답 + Access-Control-Allow-Origin 헤더
[브라우저] → 헤더 확인 후 허용 / 차단 결정

사전 요청 (Preflight Request)

PUT, DELETE나 커스텀 헤더가 포함된 요청은 본 요청 전에 OPTIONS 메서드로 먼저 물어본다.

[브라우저] → OPTIONS 요청 (이 요청 보내도 돼?)
[서버]     → 허용 여부 응답
[브라우저] → 허용됐으면 본 요청 전송

내 경우처럼 withCredentials: true를 쓰면 무조건 Preflight가 발생하고, CORS 설정이 더 엄격하게 적용된다.

서버에서 CORS 설정하는 법 (Express 기준)

CORS를 해결하는 주체는 서버다. 서버가 응답 헤더에 이 출처는 허용한다고 명시해줘야 브라우저가 요청을 통과시킨다.

1. cors 패키지 설치

npm install cors

2. 미들웨어 등록 (라우터보다 반드시 먼저!)

const cors = require("cors");

app.use(cors({
  origin: "http://localhost:3000",  // 허용할 출처
  credentials: true                 // 쿠키 허용 여부
}));

// 라우터는 항상 cors 아래에
app.use("/users", userRouter);
app.use("/books", bookRouter);
app.use("/category", categoryRouter);

옵션설명예시

origin	허용할 출처	"http://localhost:3000"
credentials	쿠키/인증 허용 여부	true
methods	허용할 HTTP 메서드	["GET", "POST", "PUT"]
allowedHeaders	허용할 요청 헤더	["Content-Type", "Authorization"]

origin을 여러 개 허용하고 싶을 때에는 이렇게 적용할 수 도 있다.

app.use(cors({
  origin: ["http://localhost:3000", "https://myapp.com"],
  credentials: true
}));

모든 출처 허용 (개발 환경에서만!)

app.use(cors()); // 운영 환경에서는 절대 사용 금지

withCredentials: true 쓸 때 주의할 점

프론트에서 withCredentials: true를 설정하면 쿠키나 인증 정보를 요청에 포함시킨다. 이 경우 CORS 설정이 더 엄격해진다.

// 프론트 (Axios)
const axiosInstance = axios.create({
  baseURL: "http://localhost:9999",
  withCredentials: true
});

이 때 서버에서 origin: "*" (전체 허용)으로 설정하면 브라우저가 무조건 에러를 낸다. 반드시 출처를 구체적으로 명시해야 한다.

// ❌ 안 됨
app.use(cors({ origin: "*", credentials: true }));

// ✅ 됨
app.use(cors({ origin: "http://localhost:3000", credentials: true }));

[BookShop-FE] Route 틀 짜고, 백엔드와 연결해보자.

Ea스더 — Fri, 17 Apr 2026 03:24:03 +0900

Route

1. React Router 사용

npm install react-router-dom @ types/react-router-dom --save

Endpoint

1. 로그인 /login

2. 회원가입 / signup

3. 비밀번호 초기화 /reset

4. 도서 목록 /books

5. 도서 상세 /books/{id}

6. 장바구니 /cart

7. 주문서 작성 /order

8. 주문 목록 /orderlist

Route 지정해주기

react-router-dom의 createBroserRouter, RouterProvider 을 사용해 route를 지정해줄 수 있습니다.

createBrowserRouter: 라우트 설정을 자바스크립트 객체 배열 형태로 생성, 어떤 경로(path)에서 어떤 컴포넌트(element)를 보여줄지 정의하는 리스트
RouterProvider: 위에서 생성한 라우터 객체를 실제 React 앱에 주입하는 역할, 앱의 최상단에서 한 번만 사용합니다.

App.tsx

import Layout from "./components/layout/Layout";
import Home from "./pages/Home";
import ThemeSwitcher from "./components/header/ThemeSwitcher";
import { useContext } from "react";
import { BookStoreThemeProvider, ThemeContext } from "./context/themeContext";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "./books",
    element: <div>도서 목록</div>
  }
])

function App() {
  const {themeName, toggleTheme} = useContext(ThemeContext);  
  return (
    <>
      <BookStoreThemeProvider>
        <Layout>
            <RouterProvider router={router} />  
        </Layout>
      </BookStoreThemeProvider>
    </>
  );
}

export default App;

현재에는 예상하지 못한 url 로 들어오면 에러페이지가 뜨는 상태. 이 공통적인 에러 페이지를 만들어보겠습니다.

Error.tsx

import { useRouteError } from "react-router-dom";

interface RouteError {
    statusText?: string;
    message?: String;
}
function Error() {
    const error = useRouteError() as RouteError;
    return (
        <div>
            <h1>오류가 발생했습니다.</h1>
            <p>다음과 같은 오류가 발생했습니다. </p>
            <p>{error.statusText || error.message}</p>
        </div>
    )
}

app.ts

path: "/"의 errorElement 추가합니다.

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
    errorElement: <Error />
  },
  {
    path: "/books",
    element: <div>도서 목록</div>
  }
])

Header.tsx

                    {
                        CATEGORY.map((item) => (
                            <li key={item.id}>
                                <a href={item.id === null ? `/books` : `/books?category_id=${item.id}`}>
                                {item.name}</a>
                            </li>
                        ))
                    }

<a> 태그는 '새로고침'을 발생시키고, <Link>는 '컴포넌트 교체'만 발생시키기 때문에, Link 로 수정해야지 화면깜빡임 없이 화면이동하는 걸로 보여집니다.

구분	<a> 태그 (Standard HTML)	<Link> 컴포넌트 (React Router)
동작 방식	브라우저가 서버에 새로운 HTML을 요청함	브라우저 주소창의 URL만 변경하고 JS로 화면을 그림
상태 유지	앱 전체가 새로고침되어 모든 상태(State)가 초기화됨	기존 상태(State)가 유지됨 (예: 입력 중인 텍스트 등)
속도/사용성	화면 깜빡임이 발생하고 속도가 상대적으로 느림	필요한 부분만 갈아끼우므로 부드럽고 빠름 (SPA 방식)

                    {
                        CATEGORY.map((item) => (
                            <li key={item.id}>
                                <Link to={item.id === null ? `/books` : `/books?category_id=${item.id}`}>
                                {item.name}</Link>
                            </li>
                        ))
                    }

function App() {
  const {themeName, toggleTheme} = useContext(ThemeContext);  
  return (
    <>
      <BookStoreThemeProvider>
      	<Layout>
        <RouterProvider router={router} />
        </Layout>
      </BookStoreThemeProvider>
    </>
  );
}

export default App;

그러나 여기서 Router를 관리하는 주체(RouterProvider)가 Layout의 하위에 있기 때문에 오류가 발생합니다 .

function App() {
  const {themeName, toggleTheme} = useContext(ThemeContext);  
  return (
    <>
      <BookStoreThemeProvider>
        <RouterProvider router={router} />  
      </BookStoreThemeProvider>
    </>
  );
}

export default App;

import { useRouteError } from "react-router-dom";
import Layout from "../layout/Layout";

interface RouteError {
    statusText?: string;
    message?: String;
}
function Error() {
    const error = useRouteError() as RouteError;
    return (
        <Layout>
            <h1>오류가 발생했습니다.</h1>
            <p>다음과 같은 오류가 발생했습니다. </p>
            <p>{error.statusText || error.message}</p>
        </Layout>
    )
}

export default Error;

이렇게 수정해주어야합니다.

프로젝트 모델 정의

book.model.ts

export interface Book {
    id: number;
    title: string,
    img: 7,
    category_id: 0,
    form: string;
    isbn: string;
    summary: string;
    detail: string;
    author: string;
    pages: number;
    contents: string;
    price: number;
    likes: number;
    pubDate: string;
}

export interface BookDetail extends Book {
    categoryName: string;
    liked: boolean;
}

cart.model.ts

export interface Cart {
    id: number;
    bookId: number;
    title: string;
    sumamry: string;
    quantity: number;
    price: number;
}

category.model.ts

export interface Category {
    id: number | null;
    name: string;
}

order.model.ts

export interface Order {
    id: number;
    createdAt: string;
    address: string;
    receiver: string;
    contact: string;
    bookTitle: string;
    totalQuantity: number;
    totalPrice: number;
}

pagination.model.ts

export interface Pagination {
    currentPage: number;
    totalNumber: number;
}

user.model.ts

export interface User {
    id: number;
    email: string;
    password?: string;
}

데이터 흐름

View(Header.tsx) -> Hooks(useCategory) -> Query Library(optional) -> Fetcher (category.api.ts(http.ts)) -> API server

처음으로 백엔드 서버와 연결을 해보겠습니다. 제 인생 처음이에요 ㅎㅎ

Docker, MySQL 포함 백엔드 서버를 실행을 시켜주고 실행을 해주어야하고,

CORS 관련 문제도 해결해야 연결이 됐습니다 .

https://ilove-ya.tistory.com/215

[Axios] Axios Network Error & CORS 오류 해결

ilove-ya.tistory.com

연결 중에 발생했던 오류도 첨부합니다..

http.ts

import axios, {Axios, AxiosRequestConfig} from 'axios';

const BASE_URL = "http://localhost:9999";
const DEFAULT_TIMEOUT = 30000;

export const createClient = (config?: AxiosRequestConfig) => {
    const axiosInstance = axios.create({
        baseURL: BASE_URL,
        timeout: DEFAULT_TIMEOUT,
        headers: {
            "content-type": "application/json",
        },
        withCredentials: true,
        ...config
    })

    axiosInstance.interceptors.response.use(
        (response) => {
            return response;
        },
        (error) => {
            return Promise.reject(error);
        }
    )
    return axiosInstance;
}

export const httpClient = createClient();

카테고리 연결해보자.

category.api.ts

import { Category } from "../models/category.model";
import { httpClient } from "./http";

export const fetchCategory = async () => {
    const response = await httpClient.get<Category[]>("/category");
    return response.data;
}

Header.tsx

function Header() {
    const [category, setCategory] = useState<Category[]>([]);

    useEffect(() => {
        fetchCategory().then((category)=> {
            setCategory(category);
        });
    },[])

    return (
        <HeaderStyle>
            <h1 className="logo">
                <Link to="/"><img src={logo} alt="book store"/></Link>
            </h1> 
            <nav className="category">
                <ul>
                    {
                        category.map((item) => (
                            <li key={item.category_id}>
                                <Link to={item.category_id === null ? `/books` : `/books?category_id=${item.category_id}`}>
                                {item.category_name}</Link>
                            </li>
                        ))
                    }
                </ul>
                
                ....

[Axios] Axios Network Error & CORS 오류 해결

Ea스더 — Fri, 17 Apr 2026 03:11:01 +0900

문제 상황

프론트에서 Axios 요청을 보냈을 때 다음과 같은 에러가 발생했다.

AxiosError: Network Error

개발자 도구 콘솔에서는 추가로 아래 에러가 확인되었다.

Access to XMLHttpRequest at 'http://localhost:9999/category' 
from origin 'http://localhost:3000' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present

원인 추론 — 서버 문제인가?

아예 백엔드 서버가 실행되지 않았을 때와 같이 보이는 오류였고, Network Error라는 메시지 때문에 다음과 같은 가능성을 우선적으로 의심했다.

서버가 실행되지 않음
포트 번호 불일치
잘못된 URL 요청

그러나 서버는 정상 실행 중이고, http://localhost:9999 도 포스트맨이나, 브라우저로 잘 접속 되어 단순 네트워크 문제는 아니었다.

원인 추론 — Axios 설정 문제?

개발자도구의 콘솔 에러에서 핵심 메시지를 발견했다.

No 'Access-Control-Allow-Origin' header is present

서버가 CORS 허용 헤더를 보내지 않음
브라우저가 요청 자체를 차단

Axios 설정을 점검했다.

const axiosInstance = axios.create({
  baseURL: "http://localhost:9999",
  timeout: 30000,
  withCredentials: true
});

withCredentials: true 이 옵션은 쿠키를 포함한 요청을 보내는 설정이며 CORS 정책이 더 엄격하게 적용된다.

→ 이 시점에서 “CORS 문제 가능성”을 의심했다.

Axios 문제가 아니라 브라우저 보안 정책에 의해 차단된 상황

최종 해결

npm install CORS

CORS 다운로드 후

CORS 미들웨어 최상단에 추가하였다.

const cors = require("cors");

app.use(cors({
  origin: "http://localhost:3000",
  credentials: true
}));

app.use(express.json());

app.use("/users", userRouter);
app.use("/books", bookRouter);
app.use("/category", categoryRouter);

Network Error 해결
CORS 에러 사라짐
/category API 정상 응답 확인

알게 된 것

withCredentials: true 사용 시 CORS 설정은 반드시 구체적으로 해야 한다
Express에서는 CORS 미들웨어를 라우터보다 먼저 등록해야 한다

[BookShop-FE] 본격적인 UI 작업 시작 - 헤더와 푸터

Ea스더 — Fri, 17 Apr 2026 01:36:41 +0900

Footer.tsx

import styled from "styled-components";
import logo from "../../assets/images/logo.png"

function Footer() {
    return (
        <FooterStyle>
            <h1 className="logo">
                <img src={logo} alt="book store"/>
            </h1> 
            <div className="copyright">
                <p>copyright(c), 2026, Book Store.</p>
            </div>
        </FooterStyle>
    )
    
}

const FooterStyle = styled.footer`
    width: 100%;
    margin: 0 auto;
    max-width: ${({theme}) => theme.layout.width.large};
    border-top: 1px solid ${({theme}) => theme.color.background};
    padding: 20px 0;
    display: flex;
    justify-content: space-between;

    .logo{
        img {
            width: 140px;
        }
    }
    
    .copyright {
        p {
            font-size: 0.75ren;
            color: ${({theme}) => theme.color.text};
        }
    }
`;

export default Footer;

Header.tsx

원래에는 백엔드에서 카테고리를 가져와야된는데, 아직 연결 전이기 때문에 우선은 배열을 하드코딩해서 넣어주었습니다.

https://ilove-ya.tistory.com/213

[React] icons/fa import 불가 및 사용 문제 (CRA + React 19 문제)

문제 상황프로젝트 실행 중, 동일한 코드인데도 특정 라이브러리가 정상적으로 동작하지 않는 문제가 발생했다.import { FaSignInAlt, FaRegUser } from "react-icons/fa";위 코드에서 아이콘이 정상적으로

ilove-ya.tistory.com

이때, react-icons/fa 를 사용하는데에 오류가 발생하여 많이 해맸습니다. .

import { styled } from "styled-components";
import logo from '../../assets/images/logo.png';
import { FaSignInAlt, FaRegUser } from "react-icons/fa";

const CATEGORY = [
    {
        id: null,
        name: "전체"
    },
    {
        id: 0,
        name: "동화"
    },
    {
        id: 1,
        name: "소설"
    },
    {
        id: 2,
        name: "사회"
    }
]

function Header() {
    return (
        <HeaderStyle>
            <h1 className="logo">
                <img src={logo} alt="book store"/>
            </h1> 
            <nav className="category">
                <ul>
                    {
                        CATEGORY.map((item) => (
                            <li key={item.id}>
                                <a href={item.id === null ? `/books` : `/books?category_id=${item.id}`}>
                                {item.name}</a>
                            </li>
                        ))
                    }
                </ul>
            </nav>
            <nav className="auth">
                <ul>
                    <li>
                        <a href="/login">
                            <FaSignInAlt />로그인
                        </a>
                    </li>
                    <li>
                        <a href="/signup">
                            <FaRegUser />회원가입
                        </a>
                    </li>
                </ul>
            </nav>           
        </HeaderStyle>
    ) 
}

const HeaderStyle = styled.header`
    width: 100%;
    margin: 0 auto;
    max-width: ${({theme}) => theme.layout.width.large};

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid ${({theme}) => theme.color.background};

    .logo {
        img {
            width: 200px;
        }
    }

    .category {
        ul {
            display: flex;
            gap: 32px; 
            li {
                a{
                    font-size: 1.5rem;
                    font-weight: 600;
                    text-decoration: none;
                    color: ${({theme}) => theme.color.text};

                    &:hover {
                        color: ${({theme}) => theme.color.primary}
                    }
                }
            }
        }
    }

    .auth {
        ul {
            display: flex;
            gap: 16px;
            li {
                a {
                    font-size: 1rem;
                    font-weight: 600;
                    text-decoration: none;
                    display: flex;
                    align-item: center;
                    line-height: 1;

                    svg {
                        margin-right: 6px;
                    }
                }
            }
        }   
    }
`;

export default Header;

Layout.tsx 수정

import styled from "styled-components";
import Footer from "../common/Footer";
import Header from "../common/Header";


interface LayoutProps {
    children: React.ReactNode;
}

function Layout({ children }: LayoutProps) {
    return (
        <LayoutStyle>
            <Header />
            <main>{children}</main>
            <Footer />
        </LayoutStyle>
    )
}

const LayoutStyle = styled.main`
    width: 100%;
    margin: 0 auto;
    max-width: ${({theme}) => theme.layout.width.large};
    padding: 20px 0;
`
export default Layout;

[React] icons/fa import 불가 및 사용 문제 (CRA + React 19 문제)

Ea스더 — Thu, 16 Apr 2026 03:24:07 +0900

문제 상황

프로젝트 실행 중, 동일한 코드인데도 특정 라이브러리가 정상적으로 동작하지 않는 문제가 발생했다.

import { FaSignInAlt, FaRegUser } from "react-icons/fa";

위 코드에서 아이콘이 정상적으로 import되지 않거나, 이를 사용하는 부분에서 에러 발생

다른 사람 코드에서는 정상 동작
내 환경에서만 오류 발생

처음에는 단순히:

react-icons 설치 문제
node_modules 문제

를 의심했지만, package.json을 동일하게 맞춰도 해결되지 않음

➡️

문제는 단순 라이브러리가 아니라
React / react-scripts / TypeScript 버전 충돌 이었음

특히 CRA 환경에서:

최신 React (19)
최신 TypeScript (5)

조합이 들어가면서

일부 라이브러리 (react-icons 포함)가 정상적으로 동작하지 않는 상황 발생

즉, 실제로는 빌드 환경 문제

❌ 시도했던 것들

1. package.json 통일

같은 코드 작성자의 환경과 동일하게 맞춤

실패

2. node_modules 재설치

rm -rf node_modules package-lock.json
npm install

실패

3. Vite 전환 고민

React 19 지원
TypeScript 5 지원

하지만 프로젝트 진행 중이라 보류

✅ 해결 방법

CRA와 호환되는 안정 버전으로 정리:

"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-hook-form": "^7.72.0",
"react-icons": "^4.11.0",
"react-router-dom": "^7.13.2",
"react-scripts": "5.0.1"

이 문제는 단순한 라이브러리 문제가 아니라: “환경이 라이브러리를 못 받아주는 상태”였음.

import 에러가 나면 무조건 라이브러리 문제가 아니라 환경(React / 빌드툴 / TS)부터 의심해야 봐야되고,
CRA는: 최신 스택과 충돌이 쉽게 난다

[Trello 클론 해보기] Firebase Hosting으로 배포해보자.

Ea스더 — Tue, 14 Apr 2026 17:41:44 +0900

저번에는 Firebase를 통해 로그인/로그아웃 구현을 진행하였는데요,

https://ilove-ya.tistory.com/201

[Trello 클론 해보기] Firebase로 로그인/로그아웃 구현

Firebase란?`Firebase` 는 Google 이 제공하는 백엔드 플랫폼(BaaS)!서버를 직접 만들지 않아도 인증, DB, 스토리지 등을 바로 쓸 수 있습니다. 즉, 백엔드 서버를 직접 구축하지 않아도 기본적인 서비

ilove-ya.tistory.com

이번에는 배포를 진행해보려고 합니다. Firebase Hosting을 사용하면 별도의 서버 없이도 React 앱을 간단하게 배포할 수 있습니다.

Firebase Hosting으로 배포하기

1. Firebase CLI 설치

Firebase를 통해 배포하기 위해서는 CLI 도구를 먼저 설치해야 합니다.

npm install -g firebase-tools

Firebase CLI는 프로젝트를 Firebase와 연결하고 배포를 진행할 수 있도록 도와주는 도구입니다.

2. Firebase 로그인

firebase login

브라우저가 열리면서 Google 계정으로 로그인하게 됩니다. 이 계정은 Firebase 콘솔에서 생성한 프로젝트와 연결됩니다.

3. 프로젝트 초기화

firebase init

프로젝트 루트 경로에서 실행합니다.

설정과정

Hosting 선택
- [Hosting: Configure files for Firebase Hosting and (optionally) set up Github Action deploys]
- GitHub와 Firebase가 연동되어 코드를 푸시할 때마다 자동으로 빌드 및 배포가 진행되도록 했습니다.
Use an existing project → 기존 Firebase 프로젝트 선택
Public directory → dist (Vite 기준) / build (CRA 기준)
Single-page app → Yes (React 필수)
SPA(Single Page Application) 설정을 해야 React Router 사용 시 새로고침해도 페이지가 깨지지 않습니다.

4. 빌드

배포 전에 반드시 빌드를 진행해야 합니다.

npm run build

React 프로젝트를 실제 배포 가능한 정적 파일로 변환하는 과정입니다. 결과물은 dist 또는 build 폴더에 생성됩니다.

5. 배포

firebase deploy

배포가 완료되면 URL이 생성되어 보여줍니다.

https://프로젝트이름.web.app

예) 제가 이번에 직접 진행하며 배포했던 사이트입니다.

https://trello-clone-b1b07.web.app/

trello-clone

trello-clone-b1b07.web.app

해당 URL로 접속하면 실제 서비스가 동작하는 것을 확인할 수 있습니다.

Firebase Hosting은 기본적으로 HTTPS가 적용된 상태로 배포되기 때문에, 별도의 SSL 설정 없이도 안전하게 서비스를 제공할 수 있습니다.

또한 CDN(Content Delivery Network)을 기반으로 동작하기 때문에 전 세계 어디서 접속하더라도 빠른 속도로 서비스를 이용할 수 있습니다.

6. 배포 후 수정 사항 반영

코드를 수정한 후에는 다시 배포해야 합니다.

npm run build
firebase deploy

Firebase는 자동 배포가 아니기 때문에 수정 후에는 반드시 다시 빌드 + 배포 과정을 거쳐야 합니다.

✅ GitHub Actions 자동 배포

저는 이 전에 깃허브 액션 배포 설정을 해두었기 때문에,

일일이 빌드 + 배포과정을 거치지 않아도, 깃허브에 push만 하면 자동으로 Actions가 생성되며 빌드 -> 배포가 진행됩니다.

이 과정에서 github/workflows 폴더가 생성되고, Firebase에서 자동으로 배포 스크립트를 만들어줍니다.

왜 이 프로젝트에서 Firebase를 선택했는가?

이번 기회에 처음으로 Firebase에 대해 학습하면서, 복잡한 서버 설정 없이도 로그인 기능과 배포까지 빠르게 구현할 수 있다는 점이 편하고 흥미롭게 느껴졌습니다.

그리고 무엇보다 프론트엔드 공부를 하면서, 백엔드없이 편리하게 서버와 연결하고, 관리할 수 있다는 점이 편리헀던 것같습니다.

다만, 제가 팀 프로젝트를 진행하면서는 한 번도 고려해본 적이 없었어서 왜 이렇게 편리한 것을 적용하지 않았던 것인지 궁금증이 생겼었습니다. 비용, 용량 등의 문제라면, 실제 서비스에서 Firebase를 쓰는 서비스가 있는지도 궁금했습니다.

찾아보니 Firebase는 빠르게 개발할 수 있다는 장점이 있지만, 복잡한 비즈니스 로직 처리나 확장성 측면에서는 한계가 있어 상황에 따라 선택적으로 사용된다는 점을 알게 되었습니다.

또한 실제 서비스에서도 Firebase를 사용하는 경우는 존재하지만, 주로 초기 서비스(MVP)나 소규모 프로젝트에서 많이 활용되며,
서비스가 커질수록 별도의 백엔드 서버로 전환하는 경우가 많다는 점도 알게 되었습니다.

이번 프로젝트에서는 로그인과 배포 흐름을 빠르게 경험해보는 것이 목적이었기 때문에, Firebase를 사용하는 것이 적절한 선택이었다고 느꼈습니다.