Community FE

Vanilla JavaScript + Spring Boot + MySQL 로 만든 로컬 커뮤니티 게시판 도담도담입니다. 로그인, 회원가입, 게시글 CRUD, 댓글 작성, 프로필·비밀번호 수정, 회원 탈퇴 기능을 제공합니다.
프론트엔드 리포지토리입니다.

---

📌 기술 스택

• Backend
  
  
  
• Frontend
  
  
  
• Database
  
  
  
• 빌드 도구
  

---

🚀 주요 페이지

상세한 기능 조작 동영상은 아래 링크를 참고해주세요.

https://youtu.be/Toc_h0OYZ7E

---

⚙️ 실행 환경 요구사항

• Java 21.0.6 이상
• Gradle 7.0 이상
• VSCode Live Server
• MySQL Server 8 이상

---

🏗️ 로컬 설치 & 실행

1️⃣ 리포지토리 클론

git clone https://github.com/bananackck/emily-community-FE.git
cd community-clone

2️⃣ MySQL 설정 및 웹 서버 실행

CREATE DATABASE community_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

src/main/resources/application.properties 에 DB 접속 정보 입력

spring.datasource.url=jdbc:mysql://localhost:3306/community_db?useSSL=false&serverTimezone=Asia/Seoul
spring.datasource.username=YOUR_DB_USERNAME
spring.datasource.password=YOUR_DB_PASSWORD

3️⃣ jwt 시크릿 키 설정

src/main/resources/application-secret.properties 에 jwt 시크릿 키 입력

jwt.secret=###########################

4️⃣ 백엔드 실행

./gradlew bootRun

▶ http://localhost:8080

5️⃣ 프론트엔드 실행

VSCode → src/pages 폴더에서 Live Server 실행 ▶ http://127.0.0.1:5500/src/pages/login.html

---

📂 프론트엔드 프로젝트 구조

emily-community-FE/
└── src
    ├───assets
    │   ├───img
    │   └───style
    ├───components
    ├───modules
    │   ├───login
    │   ├───password-edit
    │   ├───post
    │   ├───post-edit
    │   ├───post-make
    │   ├───posts
    │   ├───profile-edit
    │   └───signup
    └───pages

---

📄 페이지 설명

페이지	기능
../src/pages/signup.html	회원가입
../src/pages/login.html	로그인
../src/pages/posts.html	전체 게시글 리스트
../src/pages/post.html?id=#	단일 게시글(댓글), 게시글 삭제, 댓글 수정,삭제, 좋아요
../src/pages/make-post.html	새 게시물 작성
../src/pages/edit-profile.html	닉네임·프로필 사진 변경
../src/pages/edit-password.html	비밀번호 업데이트
../src/pages/post-edit.html?id=#	게시물 수정

---

🤝 기여

Pull Request 환영합니다. 이 프로젝트는 개인 학습용으로 제작되었습니다.

---

📄 기타

• 회고 : https://www.notion.so/bananackck/Community-1c3cf2b6ab9380c8b5b2c30e0b0991e6?pvs=4
• 주인장 블로그 : https://bananackck.tistory.com