대전대학교 개발동아리 '일영' 프론트엔드/백엔드 협업 프로젝트 2팀 무한로딩 입니다.
무한로딩은 Spring Boot와 React를 기반으로 한 간단한 게시판 서비스입니다. 사용자 인증(회원가입, 로그인)과 게시글 CRUD(생성, 읽기, 수정, 삭제) 기능을 제공하며, 마크다운을 지원하는 Tiptap 에디터를 통해 사용성을 높였습니다. 이 프로젝트는 프론트엔드와 백엔드 협업 과정을 학습하고, RESTful API 설계 및 JWT 기반 인증을 구현하는 것을 목표로 합니다.
| 이름 | 포지션 | 담당 역할 |
|---|---|---|
| 조하늘 | PM / PL | 프론트 API(백엔드 연결), 세션(로그아웃), 작성자 권한 제어, 조회수/게시글 번호 기능 구현 |
| 김다은 | Frontend | React 컴포넌트(UI) 설계 및 개발 |
| 남상은 | Backend | 게시판 CRUD 기능, User/Admin 권한 설정 구현 |
| 이현수 | Backend | 회원 기능(로그인, 회원가입, 정보 조회) 및 JWT 인증 구현 |
| 날짜 | 주요 진행 내용 |
|---|---|
| 2025.05.22 | 주제 선정 및 회의 시간 조정 |
| 2025.05.26 | 발표 준비 1차 |
| 2025.05.29 | 발표 준비 2차 |
| 2025.06.02 | 기획 발표 및 문서화 |
| 2025.06.03 ~ 06.23 | 시험 기간으로 활동 일시 중지 |
| 주차 | 기간 | 주요 진행 내용 |
|---|---|---|
| 1주차 | 06.24 ~ 07.01 | 피드백 반영, 기획 수정, 역할 재분배, UI 구성, 개인 과제 부여 |
| 2주차 | 07.02 ~ 07.08 | 개인 과제 점검, CRUD 및 DB 연동, 로그인·로그아웃 기능, 마크다운 및 작성자 검증 로직 구현 |
| 3주차 | 07.09 ~ 07.15 | 조회수 및 관리자 기능, 프론트-백엔드 연동, 버그 수정, 문서화 및 발표자료 준비 |
| 4주차 | 07.16 ~ | 최종 발표 및 프로젝트 마무리 |
| 구분 | 기술 |
|---|---|
| Backend | Java 17, Spring Boot 3.5.3, Spring Security, JPA, MySQL, JWT |
| Frontend | React 19, Vite, Axios, React Router, Tiptap Editor |
| Infra | Git, GitHub |
InfinityLoading/
├── 📁 backend/ # Spring Boot 백엔드 서버
│ ├── build.gradle
│ └── src/
├── 📁 frontend/ # React 프론트엔드
│ ├── package.json
│ └── src/
├── 📁 asset/ # 프로젝트 관련 이미지 및 문서
└── 📜 README.md
backend디렉토리로 이동합니다.src/main/resources/application.properties파일에서 데이터베이스 설정을 확인 및 수정합니다.spring.datasource.url=jdbc:mysql://localhost:3306/your_database spring.datasource.username=your_username spring.datasource.password=your_password
- 아래 명령어를 실행하여 Spring Boot 애플리케이션을 시작합니다.
./gradlew bootRun
frontend디렉토리로 이동합니다.- 아래 명령어를 실행하여 필요한 패키지를 설치합니다.
npm install
- 아래 명령어를 실행하여 개발 서버를 시작합니다.
npm run dev
- 브라우저에서
http://localhost:5173으로 접속합니다.
| Method | URL | 설명 | 인증 |
|---|---|---|---|
POST |
/users/register |
회원가입 | 불필요 |
POST |
/users/login |
로그인 (JWT 발급) | 불필요 |
POST |
/post |
새 게시글 작성 | 필요 (JWT) |
GET |
/post |
모든 게시글 조회 | 불필요 |
GET |
/post/{id} |
특정 게시글 조회 | 불필요 |
PUT |
/post/{id} |
게시글 수정 | 필요 (JWT) |
DELETE |
/post/{id} |
게시글 삭제 | 필요 (JWT) |
| 로그인 | 회원가입 |
|---|---|
![]() |
![]() |
| 게시물 목록 | 게시물 상세 |
![]() |
![]() |
| 게시물 작성 | |
![]() |
기존 README 내용 (팀 정보 및 목표)
팀장: 조하늘
팀원: 송찬의, 이현수, 남상은, 김다은
1. 게시판 제작
- 프론트엔드(FE)와 백엔드(BE) 협업 및 연결
- 주요 게시판 기능 세부 구현
2. GitHub 연동 및 포트폴리오 활용
- GitHub 연동 및 브랜치 협업
README.md작성 → 포트폴리오에 활용
하늘 : 프론트와 백엔드의 연결과 DB구조 이해, 팀워크 향상
상은 : 프로젝트를 통하여 협업 능력을 기르고, 백엔드에 대한 이해도 향상
다은 : 프로젝트를 진행하며 몰랐던 부분과 미숙한 부분을 배우며 실력 향상과 결과물 도출
현수 : 개발자로서 부족한 부분을 현실적으로 인지하고 발전해나가기 위한 목표와 프로젝트 결과물 도출
찬의 : (작성 필요)
- 정기회의 : 월, 목 (주 2회) 14시
- 기능 역할 분담 후, git 연동 - branch로 각자 맡은 파트 개발
📝 게시판
- (메인) 글 목록
- 최소 기능 : 글 작성, 글 조회, 글 목록, 글 삭제, 글 수정,
- 추가 기능 : 검색, 페이지 번호, 필터링, 카테고리, 조회수
🙍♂️ 회원
- 최소 기능 : 로그인, 회원가입, 로그아웃
- 추가 기능 : 내 글 보기/삭제, 작성자검색, 작성자표시
- 권한 정책
- 회원 : 작성/조회 가능
- 비회원 : 조회만 가능
💬 댓글
- 기능 예정 : 댓글 작성/삭제, 작성자 표시 등




