Name	Name	Last commit message	Last commit date
Latest commit History 13 Commits
backend	backend
frontend	frontend
.gitignore	.gitignore
LICENSE	LICENSE
README.md	README.md

Bulletin Board System

게시판 웹 애플리케이션 프로젝트 입니다.

2022年08月04日 ~ 2022年08月07日 동안 Spring Boot 와 React 를 사용해 구현했습니다.

이 프로젝트를 통해 이루고자 한 목표는 Spring에서 제공하는 프레임워크를 직접 사용해 보기 였습니다. 프로젝트 구현 과정 동안 회원 인증/인가, 예외처리를 고민하며 코드를 작성했습니다.

📚 목차

프로젝트 구조
사용 기술
구현 기능
기능 실행화면
API 명세서
ERD 설계
트러블슈팅

🎃 프로젝트 구조

📌 Backend

backend-project-structure

🥕 Frontend

frontend-project-structure

🕹 사용 기술

📌 Backend

기술	버전
Spring Boot	2.7.2
Spring Security	2.7.2
Bean Validation	2.7.2
JSON Web Token	0.9.1
MyBatis	2.1.3
MySQL Connector J	8.0.28
Swagger	3.0.0

🥕 Frontend

기술	버전
NodeJS	16.16.0
React	18.2.0
axios	0.27.2
react-axios	2.0.6
react-dom	18.2.0
react-js-pagination	3.0.3
react-router	6.3.0
react-router-dom	6.3.0
react-scripts	5.0.1

🎢 구현 기능

게시판 기능
- 모든 게시글 및 특정 게시글 조회
- 게시글 검색 (제목, 내용, 작성자)
- 게시글 작성 [회원]
- 게시글 수정 [회원, 게시글 작성자]
- 게시글 삭제 [회원, 게시글 작성자]
- 게시글 답글 작성 [회원]
댓글 기능
- 댓글 조회
- 댓글 작성 [회원]
- 댓글 수정 [회원, 댓글 작성자]
- 댓글 삭제 [회원, 댓글 작성자]
회원 기능
- 회원가입
- 로그인/로그아웃

🍭 기능 실행화면

게시판 기능

모든 게시글 및 특정 게시글 조회

모든 게시글을 조회할 수 있습니다. 페이징 기능을 통해 한 페이지에서 최대 10개의 게시글이 조회됩니다.

bbslist1

bbslist2

게시글의 제목을 클릭하면, 게시글의 상세 내용을 조회할 수 있습니다.

bbsdetail1

bbsdetail2

게시글 검색

게시글의 제목과 내용 또는 작성자로 게시글을 검색할 수 있습니다.

bbs-search

게시글 작성

로그인한 사용자는 게시글을 작성할 수 있습니다.

bbs-write

bbs-write-success

bbs-write-result

로그인하지 않았을 경우 글 작성이 제한됩니다.

bbs-write-auth

게시글 수정

게시글 작성자는 게시글을 수정할 수 있습니다.

bbs-update

bbs-update2

bbs-update-success

자신이 작성한 게시글에만 수정, 삭제 버튼이 활성화됩니다. bbs-update-delete-btn-deactive

bbs-update-delete-btn-active

게시글 삭제

게시글 작성자는 게시글을 삭제할 수 있습니다.

bbs-delete

bbs-delete-result

게시글 답글 작성

하나의 게시글에 대한 답글을 작성할 수 있습니다. 게시글 작성 과 마찬가지로 로그인한 사용자만 답글을 작성할 수 있습니다.

댓글 기능

댓글 조회

게시글 상세 에서 관련된 댓글을 조회할 수 있습니다. 페이징 기능을 통해 한 페이지에서 최대 5개의 댓글이 조회됩니다.

comment1

comment2

댓글 작성

로그인한 사용자는 댓글을 작성할 수 있습니다.

comment-write1

comment-write2

댓글 수정

자신이 작성한 댓글을 수정할 수 있습니다.

comment-update1

comment-update2

comment-update3

댓글 삭제

자신이 작성한 댓글을 삭제할 수 있습니다.

comment-delete

comment-delete2

회원 기능

회원가입

회원가입 시 아이디 중복을 체크합니다.

signup-idcheck

회원가입을 통해 서비스에 사용자 정보를 저장합니다.

signup-success

로그인/로그아웃

로그인

로그인을 완료하면 브라우저의 Local Storage 에 사용자 id 와 JWT 토큰 정보를 저장합니다.

로그아웃

logout

로그아웃을 완료하면 브라우저의 Local Storage 의 내용도 삭제합니다.

logout-after-devtool

🤙🏻 API 명세서

HTTP 메서드를 통해 행위를 명시할 수 있도록 RESTful 방식으로 설계했습니다.

api-definition

🕸 ERD 설계

erd

👾 트러블슈팅

회원 인증 및 인가 기능 구현 (Spring Security + JWT)

회원 및 비회원에 따라 가용한 기능에 제약을 두기 위해 Spring Security + JWT 토큰 방식으로 구현했다.

bbs/backend/src/main/java/me/hellonayeon/backend/security/WebSecurityConfig.java

Lines 35 to 56 in aede584

@Bean

public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {

http

.csrf().disable()

.cors()

.and()

.authorizeRequests()

.antMatchers(HttpMethod.POST, "/bbs", "/comment").authenticated()

.antMatchers(HttpMethod.PATCH, "/bbs", "/comment").authenticated()

.antMatchers(HttpMethod.DELETE, "/bbs", "/comment").authenticated()

.anyRequest().permitAll();

http.exceptionHandling().authenticationEntryPoint(jwtAuthenticationEntryPoint)

.and()

.sessionManagement()

.sessionCreationPolicy(SessionCreationPolicy.STATELESS);

http.addFilterBefore(jwtRequestFilter, UsernamePasswordAuthenticationFilter.class);

return http.build();

}

bbs/backend/src/main/java/me/hellonayeon/backend/jwt/JwtAuthenticationFilter.java

Lines 35 to 70 in aede584

@Override

protected void doFilterInternal(HttpServletRequest req, HttpServletResponse res, FilterChain chain) throws IOException, ServletException {

String header = req.getHeader(HEADER_STRING);

String userId = null;

String authToken = null;

if (header != null && header.startsWith(TOKEN_PREFIX)) {

authToken = header.replace(TOKEN_PREFIX,"");

try {

userId = jwtTokenUtil.getUsernameFromToken(authToken);

} catch (IllegalArgumentException e) {

System.out.println("JwtAuthenticationFilter: token error (fail get user id) !");

e.printStackTrace();

} catch (ExpiredJwtException e) {

System.out.println("JwtAuthenticationFilter: expired token !");

e.printStackTrace();

} catch(SignatureException e){

System.out.println("JwtAuthenticationFilter: invalid member !");

e.printStackTrace();

}

} else {

System.out.println("JwtAuthenticationFilter: request that do not require authorization.");

}

if (userId != null && SecurityContextHolder.getContext().getAuthentication() == null) {

UserDetails userDetails = userDetailsService.loadUserByUsername(userId);

if (jwtTokenUtil.validateToken(authToken, userDetails)) {

UsernamePasswordAuthenticationToken authentication = new UsernamePasswordAuthenticationToken(userDetails, null, Arrays.asList(new SimpleGrantedAuthority("ROLE_ADMIN")));

authentication.setDetails(new WebAuthenticationDetailsSource().buildDetails(req));

logger.info("authenticated user " + userId + ", setting security context");

SecurityContextHolder.getContext().setAuthentication(authentication);

}

chain.doFilter(req, res);

}

간단한 BBS 시스템을 만드는 것을 목표로 했으나, Spring Security 를 사용하니 인증 로직을 구현하기 복잡했다. Spring Security 의 동작 원리를 정확하게 모르는 상태에서 구현하려 하니 어려움이 있었다. (배보다 배꼽이 더 커진 느낌 🫤)

Spring 에서 제공하는 Interceptor 기능과 ArgumentResolver, Annotation 기능을 사용하고 사용자 아이디만을 받아 인가 체크를 했다면 간단하게 구현 가능했을 것 같다.

요청을 보낸 사용자를 판별하기 위해 @AuthenticationPrincipal 을 사용하여, 로그인 시 인증한 후 저장한 사용자 정보인 UserDetails 의 username(Id) 를 가져와 글 작성자와 비교했다.

bbs/backend/src/main/java/me/hellonayeon/backend/comment/controller/CommentController.java

Lines 61 to 68 in aede584

/* [PATCH] /comment/{seq} 댓글 수정 */

@PatchMapping("/{seq}")

public ResponseEntity<UpdateCommentResponse> updateComment(@AuthenticationPrincipal UserDetails userDetails,

@PathVariable Integer seq,

@RequestBody UpdateCommentRequest req) {

return ResponseEntity.ok(service.updateComment(userDetails.getUsername(), seq, req));

}

bbs/backend/src/main/java/me/hellonayeon/backend/comment/service/CommentService.java

Lines 52 to 68 in aede584

/* 댓글 수정 */

@Transactional

public UpdateCommentResponse updateComment(String id, Integer seq, UpdateCommentRequest req) {

Comment comment = dao.getCommentBySeq(seq);

if (!comment.getId().equals(id)) {

System.out.println("작성자만 댓글을 수정할 수 있습니다.");

return null;

}

Integer updatedRecordCount = dao.updateComment(new UpdateCommentParam(seq, req.getContent()));

if (updatedRecordCount != 1) {

System.out.println("댓글 수정에 실패했습니다.");

return null;

}

return new UpdateCommentResponse(updatedRecordCount);

}

사용자 로그인 요청 데이터 검증과 사용자 인증 예외 처리

사용자가 회원가입과 로그인을 위해 입력한 데이터에 대해 Bean Validation 을 사용해 검증 기능을 구현했다.

템플릿 엔진으로 서버에서 뷰를 그리는 방식이 아닌, 데이터만 전송하는 API 서버에서 입력값 검증에 대한 오류 메시지를 어떻게 전달해야 할지 고민했었다.

Bean Validation 에서 던진 예외를 받아서 처리한 다음 오류 메시지를 응답으로 내려주도록 구현했다.

회원가입 요청 폼 데이터

bbs/backend/src/main/java/me/hellonayeon/backend/member/dto/request/JoinRequest.java

Lines 5 to 21 in aede584

public class JoinRequest {

@NotBlank

private String id;

@NotBlank

private String name;

@NotBlank

private String pwd;

@NotBlank

private String checkPwd;

@NotBlank

private String email;

회원 가입 요청 처리 컨트롤러

bbs/backend/src/main/java/me/hellonayeon/backend/member/controller/MemberController.java

Lines 57 to 71 in aede584

/* 요청 DTO 검증 예외처리 핸들러 */

@ExceptionHandler(MethodArgumentNotValidException.class)

public ResponseEntity<?> handleMethodArgumentNotValidException(MethodArgumentNotValidException e) {

System.out.println("UserController handleMethodArgumentNotValidException " + new Date());

BindingResult bs = e.getBindingResult();

StringBuilder sb = new StringBuilder();

bs.getFieldErrors().forEach(err -> {

sb.append(String.format("[%s]: %s.\n입력된 값: %s",

err.getField(), err.getDefaultMessage(), err.getRejectedValue()));

});

// Map 으로 보낸다면 프론트에서 사용하기 더 편리할 듯 !

return new ResponseEntity<>(sb.toString(), HttpStatus.BAD_REQUEST);

}

또한 사용자 관련 예외를 처리하기 위해 커스텀 예외를 만들어서 예외를 발생시키고 핸들러에서 처리할 수 있도록 구현했다.

bbs/backend/src/main/java/me/hellonayeon/backend/member/service/MemberService.java

Lines 95 to 106 in aede584

private void isExistUserId(String id) {

Integer result = dao.isExistUserId(id);

if (result == 1) {

throw new MemberException("이미 사용중인 아이디입니다.", HttpStatus.BAD_REQUEST);

}

private void checkPwd(String pwd, String checkPwd) {

if (!pwd.equals(checkPwd)) {

throw new MemberException("비밀번호가 일치하지 않습니다.", HttpStatus.BAD_REQUEST);

}

bbs/backend/src/main/java/me/hellonayeon/backend/member/controller/MemberController.java

Lines 73 to 79 in aede584

/* 사용자 관련 요청 예외처리 핸들러 */

@ExceptionHandler(MemberException.class)

public ResponseEntity<?> handleUserException(MemberException e) {

System.out.println("UserController handlerUserException " + new Date());

return new ResponseEntity<>(e.getMessage(), e.getStatus());

}

@AdviceController 를 더 많이 사용한다고 했는데, 이 프로젝트에서는 회원 관련된 예외 처리만을 작성하기 위해 전역 예외처리를 사용하지 않았다. 또한 평소에도 컨트롤러별로 처리하는 예외를 세분화 하는게 좋지 않을까? 라는 생각을 가지고 있었다.

하지만 결국 어떤 예외처리든 서버에서 발생한 예외를 처리한 다음 요청을 보낸 프론트 쪽으로 상태 코드든 오류 메시지든 내려줘야 한다. 따라서 커스텀 예외와 예외 메시지를 범용성 있게 작성하면 오히려 전역에서 예외처리 하는게 일관성 있을 것이라는 깨달음을 얻었다.

DTO 클래스 분리

요청과 응답으로 주고받는 데이터를 한 눈에 확인하기 위해 요청 데이터와 응답 데이터를 각각의 DTO로 분리했다.

요청으로 받은 데이터를 바탕으로 SQL 쿼리를 수행할 때 필요한 데이터만을 넘겨주기 위해 Service에서 Dao로 넘기는 파라미터도 DTO로 분리했다.

project-structure

이렇게 구현했을 때의 장점은 컨트롤러 메서드의 파라미터로 많은 인자를 넘겨주지 않아도 된다는 점, 주고받는 데이터를 확인하고 수정해야하는 경우 DTO 클래스 만을 수정해야 하는 점이었다.

하지만 단점은 기능이 추가될 때마다 클래스 파일이 늘어나 관리가 힘들어졌고, 데이터를 한 눈에 확인할 수 있지만 확인하기 위해서는 직접 클래스 파일을 열어봐야 한다는 점 이었다.

요청 파라미터가 많지 않은 경우 (2-3개) 굳이 클래스 파일로 따로 작성하지 않고 컨트롤러 메서드에 어노테이션으로 매핑하는 것이 코드의 가독성과 유지보수 측면에서 좋은 방법이 될 것이라 생각된다.

조회수 중복 카운팅 예방

게시글 조회수 중복 카운팅 예방을 위해 read_history 테이블을 두어 구현했다.

Cookie 의 경우 하나의 도메인 당 사용할 수 있는 개수가 제한되기 때문에, 여러 게시글을 조회하면 제한 개수를 넘어버릴 것이라 예상했다. 그래서 사용자가 이미 읽은 게시글인지 확인할 수 있도록 서버에서 사용자 아이디 게시글 조회 시간 을 두어 체크했다.

bbs/backend/src/main/java/me/hellonayeon/backend/bbs/service/BbsService.java

Lines 45 to 58 in aede584

/* 특정 글 */

/* 조회수 수정 */

public BbsResponse getBbs(Integer seq, String readerId) {

// 로그인 한 사용자의 조회수만 카운팅

if (!readerId.isEmpty()) {

CreateReadCountParam param = new CreateReadCountParam(seq, readerId);

Integer result = dao.createBbsReadCountHistory(param); // 조회수 히스토리 처리 (insert: 1, update: 2)

if (result == 1) {

Integer updatedRecordCount = dao.increaseBbsReadCount(seq); // 조회수 증가

}

return new BbsResponse(dao.getBbs(seq));

}

스케쥴러를 구현해 24시간 단위로 조회수를 초기화 시켜서 다음날이 되면 조회수가 다시 카운팅 될 수 있게끔 구현하면 좋을 것 같다. 아니면 조회수라는 데이터를 관리하지 않고 읽은 글, 읽지 않은 글 로 관리될 수 있도록 구현하는 것도 하나의 좋은 방법이라 생각한다.

License

hellonayeon/bbs

Folders and files

Latest commit

History

Repository files navigation

Bulletin Board System

📚 목차

🎃 프로젝트 구조

📌 Backend

🥕 Frontend

🕹 사용 기술

📌 Backend

🥕 Frontend

🎢 구현 기능

🍭 기능 실행화면

게시판 기능

모든 게시글 및 특정 게시글 조회

게시글 검색

게시글 작성

게시글 수정

게시글 삭제

게시글 답글 작성

댓글 기능

댓글 조회

댓글 작성

댓글 수정

댓글 삭제

회원 기능

회원가입

로그인/로그아웃

🤙🏻 API 명세서

🕸 ERD 설계

👾 트러블슈팅

회원 인증 및 인가 기능 구현 (Spring Security + JWT)

사용자 로그인 요청 데이터 검증과 사용자 인증 예외 처리

DTO 클래스 분리

조회수 중복 카운팅 예방

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Uh oh!

Languages