Skip to content

SpringBoot+SpringDataJPA+SpringSecurity+HeidiSQL(MariaDB,MySQL)+BootStrap 웹 게시판 토이프로젝트

Notifications You must be signed in to change notification settings

sangeon22/ToyProject-WebBoard-SpringBoot

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ToyProject-WebBoard-SpringBoot

Springboot + security,JPA + HeidiSQL(MariaDB,MySQL) + BootStrap 웹게시판

‼‼ 2022-07 JSP/Servlet, Mybatis, SQLD, 공부 및 다른 Spring Boot + AWS 프로젝트로 인하여 개발 중단 이후,

‼‼ 2022-12 기존 소스를 리팩토링 및 기능 추가하였으므로, 아래와 상이한 부분이 존재합니다! (커밋기록 참고)

  • Refactor: 디렉토리 구조 리팩토링

  • Refactor: Bean 주입 방식 리팩토링

  • Refactor: Service Method 리팩토링

  • Refactor: AWS EC2 배포 및 OAuth2.0 기능 추가를 위한 properties 보안 변경

  • Refactor: 회원가입 이메일 인증 기능 리팩토링

  • Feat: OAuth2.0 로그인(구글, 네이버) 기능 추가

  • OAuth2.0 가입 로그인 사용자 로그인 후 유저명 Athetication 유저명 숫자로 나오는 문제 디버깅해야함(HttpSession로 풀면 가능할 것 같음)

  • OAuth2.0 비밀번호 DB에 반영 및 내정보 2차로그인 에러(상황 파악 중)

  • 시일 내에, 다른 프로젝트에서 적용해본 AWS EC2를 통해 배포 및 호스팅 예정(RDS는 논외)

  • 시일 내에, CI/CD를 위해 Github Action 적용 예정


ⅰ. 프로젝트 소개 (요구사항)

1. 프로젝트 소개

 CRUD API 설계는 기본적으로 웹 게시판이 가장 적절하다고 생각하여 독학으로 웹 게시판 프로젝트를 만들게 되었습니다. 또한 spring을 활용하여 스프링에 대한 이해를 높이고자 시작하게 되었습니다. Frontend는 BootStrap을 사용한 유튜브를 참고하였고, 이에 따라, Thymeleaf 및 Script, html, css 등은 필요한 부분을 공부하며 추가하였고, Backend의 기능들을 추가하다 보니 더욱 흥미를 느껴 관련 문서, 구글링을 통해 원하는 기능을 구현해나갔습니다. OAuth2를 활용한 SNS 로그인과 댓글 기능은 아직 진행 중에 있습니다. (7월 중단 이후, 12월 OAuth2.0 SNS 로그인 기능추가 완료)


2. 프로젝트 기능

[게시판]

  • CRUD 기능 (하단의 API 설계 참조)
  • 조회 수
  • 페이징 및 검색 처리
  • 페이징 블록 처리
  • JpaAduiding 작성/수정시간
  • FileUpload
  • 업로드 파일 다운로드
  • 댓글(개발 중)
  • 작성자 본인, 관리자 권한이 아니라면 수정, 삭제 API 제한

[관리자]

  • 회원 전체 목록 조회
  • 회원 검색
  • ROLE_ADMIN, ROLE_USER 권한에 따른 수정, 삭제 API 제한 및 UI 차이

[회원]

  • Security 회원가입 및 로그인
  • 회원가입 시 유효성 @Valid 검사 및 중복 검사
  • JavaMailSender 회원가입 시 인증번호 메일 발송 및 검사
  • 마이페이지(나의 회원정보)
  • 내 게시글
  • 회원정보 수정(비밀번호 변경)
  • 회원 탈퇴
  • OAuth 2.0 구글, 네이버 로그인

3. 개발 환경

[Backend]

  • IDE(통합개발 환경) : IntelliJ Ultimate Edition
  • 개발 언어 : Java 11.0.9
  • 프레임워크 : Spring Boot 2.6.7
  • Build : Maven
  • Spring Security
  • OAuth 2.0
  • AWS EC2 (12월 이후 배포 중)
  • CI/CD (배포 완료 이후 Github Action을 사용하여 진행 예정)

[DataBase]

  • DB : MariaDB 10.6.7, MySQL Workbench 8.0 CE
  • DB-GUI-Tool : HeidiSQL 11.3.0
  • DB 접근 기술(ORM) : Spring Data JPA

[Frontend]

  • Thymeleaf
  • Bootstrap
  • Html/Css
  • JavaScript

ⅱ. 구조 및 설계 (설계)

1. API 설계

메인_화면_API_(HomeController)

계정_관련_API_(AccountController)

회원_관련_API_(UserController)

회원_관련_API_(UserApiController)

게시판_관련_API_(BoardController)

게시판_관련_API_(BoardApiController)


2. DB 설계

스프링 웹프로젝트 DB ERD

Board

User

Role

User_Role

Reply


ⅲ. 실행 화면 (구현)

트러블슈팅

  1. https://okky.kr/article/1252519
  2. https://okky.kr/article/1257276

메인화면

1

기능 GIF (아래 보기 클릭)

로그인 로그아웃 GIF 보기

1 로그인, 로그아웃

  • SpringSecurity 로그인, 로그아웃
  • OAuth2 SNS Naver, Kakao 로그인 (개발중) (12월 OAuth2.0 SNS 로그인 기능추가 완료) ‼‼ GIF가 현재와 다릅니다. 일반 로그인 아래 구글로그인, 네이버 로그인 버튼이 존재합니다.

관리자

유저

  • ROLE_ADMIN, ROLE_USER 권한 차이 설정 (API 제한, UI)
  • Header 부분에 권한 표시
  • 관리자의 경우, Header 상단 메뉴에 회원 목록

회원가입 + 메일 인증 GIF 보기

2

image

  • @Valid를 이용한 Form 검증
  • 입력 규칙이 틀리면, Error를 화면에 표시
  • JavaMailSender를 이용한 이메일 인증
  • 사용자가 입력한 이메일로 5자리 인증코드 전송
  • 메일 정상 발송 시, 알림 창 표시 후 인증번호 입력칸 활성화
  • 인증코드 일치 시, 알림 창 표시 후 입력한 이메일 수정 불가능하도록 비활성화
  • 인증코드 일치 시, 가입하기 버튼 활성화
  • 회원가입 성공 시, 알림 창
  • 12월 이후, 기존 네이버 메일에서 구글메일로 리팩토링 및 기능 및 보안 개선

회원가입 @Valid 검사 GIF 보기

3

  • @Valid를 이용한 Form 검증
  • 입력 규칙이 틀리면, Error를 화면에 표시

게시판 리스트 페이징 및 검색 GIF 보기

4  게시판리스트 화면

  • 제목이나 내용을 포함하는 키워드로 게시물 검색 기능
  • 게시글 조회 수 기능
  • 게시판 리스트 작성시간 수정시간 기능 추가 JpaAuditing
  • DB에 등록된 게시글을 최근 작성시간/수정시간 기준 정렬
  • 아래 페이징 처리된 버튼을 통해 분할처리된 페이지들에 등록된 게시글을 확인 가능, 현재 페이지는 회색 표기(게시글 리스트 페이징 처리 기능)
  • 게시글 리스트 페이지 Paging 처리
  • Paging 블록 처리 5단위로 넘어가도록 처리

게시글 조회수 증가 GIF 보기

5,6  게시글 조회수 증가

  • 게시글 클릭 시, 조회 수 증가

게시글 상세 페이지 GIF 보기

5,6  게시글상세

  • 수정폼, 상세 글, 작성폼 모듈 분리 및 JpaAuditing(작성,수정시간)
  • FileUpload 기능
  • 조회 수 기능
  • 업로드된 파일 상세페이지에 출력
  • 업로드한 이미지 출력 및 다운
  • 댓글 기능 (개발 중)

  • 파일다운 버튼 클릭 시, 이미지를 저장 가능한 페이지로 이동
  • 뒤로 가기 버튼 클릭 시, 게시글 리스트 페이지로 이동

  • 수정 버튼 클릭 시, 수정 권한 체크(작성자 본인 OR 관리자 권한)
  • 수정 성공 시, 완료 알림 창을 띄운 후 게시글 리스트 페이지로 이동
  • 수정 실패 시, 권한 에러 알림 창을 띄운 후 해당 게시글로 리다이렉트

  • 삭제 버튼 클릭 시, 삭제권한체크(작성자 본인 OR 관리자 권한)
  • 삭제 성공 시, 완료 알림창을 띄운 후 게시글 리스트 페이지로 이동
  • 삭제 실패 시, 권한 에러 알림창을 띄운 후 해당 게시글로 리다이렉트

게시글 작성 @Valid 및 파일 업로드 GIF 보기

7 작성

  • Validator를 이용한 Form 검증
  • 입력 규칙이 틀리면, Error를 화면에 표시
  • 파일 선택 버튼 클릭 시, 파일 업로드 가능 (파일 업로드 기능)
  • 확인 버튼 클릭 시, 등록 완료 알림 창을 띄운 후 게시글 리스트 페이지로 이동
  • 취소 버튼 클릭 시, 게시글 리스트로 이동

게시글 작성 결과 GIF 보기

7 작성결과


게시글 수정 @Valid 검사 및 성공 GIF 보기

8

  • Validator를 이용한 Form 검증
  • 입력 규칙이 틀리면, Error를 화면에 표시
  • 수정 버튼을 클릭하여 수정폼에 들어오면, 원문 게시글의 내용을 미리 수정폼에 위치시켜둔다.
  • 파일 업로드 기능
  • 확인 버튼 클릭 시, 수정 완료 알림 창을 띄운 후 게시글 리스트 페이지로 이동 (게시글 수정 메세지 기능)
  • 취소 버튼 클릭 시, 이전 게시글로 재이동

게시글 수정 실패 (관리자 권한 OR 작성자 본인이 아니면 수정 불가) GIF 보기

9

  • @PreAuthorize 및 Authentication을 통해 현재 사용자와 게시글 작성자를 비교하여 수정 권한 체크

게시글 삭제 성공 GIF 보기

10

  • 삭제 버튼 클릭 시, 삭제 완료 알림 창을 띄운 후 게시글 리스트 페이지로 이동

게시글 삭제 실패 (관리자 권한 OR 작성자 본인이 아니면 삭제 불가) GIF 보기

11

  • @PreAuthorize 및 Authentication을 통해 현재 사용자와 게시글 작성자를 비교하여 삭제 권한 체크

관리자 메뉴 - 회원 목록 및 회원 검색 GIF 보기

12

  • 관리자 메뉴
  • 키워드를 포함하는 아이디를 가진 회원 검색 기능
  • 전체 회원 수 표시
  • 회원 가입일 JpaAuditing 표시

마이페이지 입장 전 로그인 재검증 GIF 보기

13

  • 현재 로그인한 사용자의 비밀번호를 재검증
  • 현재 로그인한 사용자의 회원 정보
  • 해당 로그인한 사용자가 작성한 게시글 리스트
  • 비밀번호 변경 기능
  • 회원 탈퇴 기능

마이페이지 - 내 작성글 GIF 보기

14

  • 제목이나 내용을 포함하는 키워드로 게시물 검색 기능
  • 전체 게시물 수 표시
  • 게시글 조회 수 기능
  • 게시판 리스트 작성시간 수정시간 기능 추가 JpaAuditing
  • DB에 등록된 게시글을 최근 작성시간/수정시간 기준 정렬
  • 아래 페이징 처리된 버튼을 통해 분할처리된 페이지들에 등록된 게시글을 확인 가능, 현재 페이지는 회색 표기(게시글 리스트 페이징 처리 기능)
  • 게시글 리스트 페이지 Paging 처리
  • Paging 블록 처리 5단위로 넘어가도록 처리

비밀번호 변경 @Valid 검증 GIF 보기

15

  • @Valid를 이용한 Form 검증
  • 입력 규칙이 틀리면, Error를 화면에 표시

비밀번호 변경 - 현재 로그인 계정 비밀번호 불일치 에러 GIF 보기

16

  • 현재 로그인한 사용자의 비밀번호가 불일치 시 에러 알림

비밀번호 변경 - 현재 비밀번호와 새 비밀번호 일치 에러 GIF 보기

17

  • 현재 로그인한 사용자의 비밀번호와 새 비밀번호가 일치 시 에러 알림

비밀번호 변경 - 새 비밀번호 재확인 불일치 GIF 보기

18

  • 새 비밀번호와 새 비밀번호 재확인이 불일치 시 에러 알림

비밀번호 변경 완료 GIF 보기

19

  • 로그아웃 후 변경된 비밀번호로 정상 로그인이 된다.

회원 탈퇴 및 자동 로그아웃 GIF 보기

20

  • 회원 탈퇴 시, 작성한 게시글 전체 삭제
  • 회원 탈퇴 시, 그 즉시 해당 아이디 자동 로그아웃

ⅳ. 테스트 (테스트)

  • 정리 후 업데이트 예정

ⅴ. 후기

1. 앞으로 프로젝트 보완사항

  • DTO 세분화
  • 회원가입 모듈 부분 다시 리팩토링(12월 이메일인증 리팩토링 완료)
  • 코드 정리
  • REST API 디자인 가이드에 맞게 API 리팩토링
  • Doker 사용
  • AWS, Cafe24, GCP 배포 및 호스팅
  • OAuth2 SNS 로그인 (12월 구글,네이버 로그인 기능 추가 완료)
  • 댓글 기능
  • 중복 조회 수 카운트 방지
  • 좋아요 기능 추가

2. 느낀 점

 이번 프로젝트는 누구에게는 간단한 프로젝트이겠지만 그동안 나에게 스프링에 대한 혼란스러웠던 개념들을 정리할 수 있게 만들어준 프로젝트였다. 구현하고 싶은 기능이 동작하지 않는 흔히 말하는 '삽질'을 여러 번 겪었어도 그 끝엔 '성취감'이라는 큰 희열을 느꼈다. 개발자로서의 자질을 의심하던 순간이 생기는 순간이 있었지만 "구글에만 봐도 기능을 구현하는 법이 나오니 불가능하지 않다"라는 생각에 계속 삽질을 했고 마침내 기능을 구현했을 때, 개발은 헬스와 마찬가지로 끈기가 재능이라고 생각했다. 계단식 성장이란 특징으로 인해 보이지 않는 성장 속에서 꾸준히 하다 뒤를 돌아봤을 때, 이전보다 성장한 나를 발견하여 자신감을 갖게 되었다. 기본을 충실히 마스터하고 더 다양하고 신박한 웹, 앱을 재밌게 빨리 만들고 싶다.

 독학을 하며, 구현한 프로젝트이기 때문에 필요한 기술과 개념을 공부해나가며 적용할 수 있어 좋았다. 하지만 부족한 부분에 대한 아쉬움이 많다. 무엇이 부족하고 무엇이 필요한지 알게 되었다. 단순히 기능만 구현해놓고 보니, 내가 만든 로직이 보안상 문제가 될 수 있다는 것과 DTO의 중요성을 OKKY, 카카오톡 개발자 단톡 선배들에게 듣게 되었고 기존 JPA에 직접적으로 Entity로 접근하는 것이 아닌 DTO를 통해 접근하는 리팩토링을 진행했다. 이러한 이슈로 인해 현직에 계시는 선배님들께 이러한 점들을 실무에서 배우는 것이 더 좋겠다는 생각이 들었고 아직 많이 부족하고 써보지 못한 기술들이 많지만 취업을 해야겠다는 생각이 들었다.

 개발을 할 때, API 테스트를 하느라 Postman을 사용하기도 했지만, 서버를 계속 재기동하면서 localhost에서 테스트를 하다 보니 테스트 코드의 중요성을 뼈저리게 느끼게 되었다. 테스트 코드를 통해 테스트를 하면, 시간 절약과 안전성을 갖는다는 것을 느꼈고 짜야 하는 이유를 알게 되었다. 또한 프로젝트를 시작하기 전, Controller, Service, Repository, Annotation 등 스프링 강의를 들으면서도 이해가 잘 가지 않아 개념을 찾아보았지만 이해가 잘 가지 않았었다. 하지만 프로젝트를 시작하고 나서 역시나 백번 보는 것 보다 한번 해보는 것이 더 중요하다는 사실을 느꼈다. 하지만 프로젝트를 진행하면서 OOP에 대한 자바의 기초의 중요성과 컨트롤러와 서비스 로직의 분리 등 신경 써야 할 점이 많다는 것을 알게 되었고 lombok과 같은 Annotaiton, SpringDataJpa와 같은 spring의 기술이 없이 JSP Servlet를 통해 스프링과 같은 프로젝트를 구현해 봐야겠다는 생각 그래야 MVC의 원리를 더 정확히 이해할 수 있을 것이라고 생각이 들었다.

긴 글을 읽어주신 분들께 많은 감사를 전합니다.

About

SpringBoot+SpringDataJPA+SpringSecurity+HeidiSQL(MariaDB,MySQL)+BootStrap 웹 게시판 토이프로젝트

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages