4일차 - 프론트엔드 환경 세팅 & 구조 설계

오늘은 프론트엔드 프로젝트 환경을 새로 구성하고, 전체 구조를 정의했다.
기존 백엔드(Spring Boot) 프로젝트와 독립적으로 실행되며, (서버 : Local:   http://localhost:5173/ )
API 및 WebSocket을 통해 연동되는 구조다.

 

 

---

기본 설정

새폴더 frontend/를 생성하고, Vite 기반 React + TypeScript 프로젝트를 초기화했다. 

 

사용 기술 스택 :

- React : UI 프레임 워크

사용 이유 : 전체 화면을 재사용 가능한 컴포넌트로 분리하여 유지보수를 쉽게하며,
상태 변화에 따라 자동으로 화면을 갱신(Virtual DOM 기반)하기 때문.
또한 페이지 이동 없이 화면 전환이 가능한 SPA(Single Page Application) 구조를 구축하기 위해 사용함.

 

- TypeScript : 정적 타입 언어

사용 이유 : 코드의 안정성 향상 및 자동 완성 지원을 위해 사용.
런타임 오류를 사전에 방지하고, IDE 자동완성과 타입 체크를 통해 협업 효율을 높임.
또한 대규모 프로젝트에서도 일관성 있는 코드 유지가 가능하여 선택함

 

- TailwindCSS : CSS 프레임 워크

사용 이유 : 유틸리티 클래스 기반으로 빠르고 일관된 스타일링을 제공하기 때문.
별도의 CSS 파일 작성 없이 클래스 이름으로 즉시 디자인을 적용할 수 있으며,
반응형 디자인을 쉽게 구현할 수 있어 프로토타이핑과 유지보수 모두 효율적임.

 

 

- FullCalendar : 캘린더 UI 라이브러리
사용 이유 : 작업(Task)과 이벤트(CalendarEvent)를 한 화면에 시각적으로 표시하기 위함.
드래그·리사이즈 등 상호작용을 지원하며,
자동 생성된 스케줄(Assignment)을 시각화하는 데 최적화되어 있음.

 

- Zustand: 상태 관리 라이브러리
사용 이유 : React 전역 상태를 간단하고 가볍게 관리하기 위해 사용.
Redux보다 코드가 단순하고, 전역 로그인 상태나 JWT 토큰, WebSocket 연결 정보를 관리하기에 적합함.
리렌더링이 최소화되어 성능도 우수함.

 

- Axios : HTTP 클라이언트
사용 이유 : 백엔드(Spring Boot) API와의 통신을 담당하기 위해 사용.
JWT 토큰을 자동으로 헤더에 첨부하도록 인터셉터를 구성할 수 있고,
401 응답 시 /api/auth/refresh를 통해 토큰을 갱신하도록 설정 가능함.
비동기 요청을 단순한 코드로 처리할 수 있어 유지보수가 용이함. 

 

- SockJS/STOMP : WebSocket 클라이언트
사용 이유 : 팀 단위 실시간 협업 기능을 구현하기 위해 사용.
Spring Boot의 /ws/** 엔드포인트와 연결하여
일정 수정·생성·삭제 시 즉시 모든 팀원 화면에 반영하도록 함.
STOMP 프로토콜을 사용하여 주제 기반 구독(team/{id}/schedule)이 가능하고,
연결 끊김 시 자동 재시도 로직도 제공함.

---

라우팅 :

• /login
• /register
• /dashboard
• /team/:id/{calendar|tasks|workhours|settings}

공통 구성 :

• JWT 인터셉터
• API 클라이언트
• WebSocket 클라이언트

캘린더 뷰 :

• Task/Event 병합 표시, 모달 CRUD

작업 보드 :

• 테이블 + Kanban 토글 

---

설치 명령어

cd C:\Users\sowon\Documents\workspace-spring-tools-for-eclipse-4.31.0.RELEASE\sbb

mkdir frontend
cd frontend

# React + TypeScript 프로젝트 생성
npm create vite@latest . -- --template react-ts

# 주요 패키지 설치
npm i axios zustand @headlessui/react @heroicons/react \
  @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction \
  sockjs-client @stomp/stompjs

# FullCalendar React 패키지
npm i @fullcalendar/react

# Tailwind CSS 설정
npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

---

프로젝트 구조 설계

- 라우팅 구조

• /login, /register → 사용자 인증
• /dashboard → 팀 목록
• /team/:id/{calendar|task|workhours|settings} → 팀별 페이지 구성

- 주요 폴더

• src/pages - 화면별 페이지 컴포넌트
• src/store - Zustand 상태 관리
• src/lib/api.ts - Axios 클라이언트 (JWT 자동 헤더 첨부)
• src/lib/ws.ts - WebSocket 클라이언트(SockJS/STOMP)
• src/components - UI 컴포넌트 모듈화 

---

현재까지 진행 상황 요약

 

Vite + React + TypeScript 초기 세팅 완료

Tailwind CSS / Headless UI / Heroicons 도입

Zustand, Axios, WebSocket 클라이언트 세팅

FullCalendar 라이브러리 추가 및 테스트 렌더링

JWT 인증 흐름 설계 (Axios 인터셉터)

---

내일은 

캘린더 화면에 실제 데이터(Task + Event)를 병합 표시하고,
모달을 통한 CRUD 기능을 구현할 예정이다.
또한 WebSocket 구독을 연결하여 팀 단위 실시간 일정 반영을 완성할 계획이다... + 프론트도 조금씩 예쁘게 ㅠㅠ