프로젝트 구상

프로젝트 목표

• 코드숨에서 배운대로 백엔드 애플리케이션 테스트 코드를 작성하는 거에 익숙해 지는거와 그리고 백엔드 API 문서화와 CI/CD를 구축 하는게 주요 목적

• 목적이 코드숨 배운 것을 활용과 익숙해지는거에 목적이 있으므로 프론트엔드는 최소한으로 할 예정임 마크업이나 css를 일절 사용하지 않고 부트스트랩이나 antd같은 프레임워크의 컴포넌트만 사용할거임

• 기존 사이드 프로젝트가 항상 실패한 이유는 너무 많은 것을 하려고 했거나 뚜렷한 목표가 없었음 이번 프로젝트는 너무 큰 욕심을 부리지 않고 위와 말한 코드숨을 배운 것을 활용하는 목적으로 할 예정이고 최소 기능들만 있는 어플리케이션을 개발하는게 목표임

• 또한 항상 사이드 프로젝트를 할 때마다 기한을 정해놓지 않거나 길게 가면 너무 게을러지거나 퍼지는 경향이 있다고 생각해서 최소한으로 데드라인을 잡고 프로젝트를 이어나갈 예정임 (현재 생각한 일정은 3주, 7월 21일 까지 하는게 목표)

무슨 프로젝트를 할까?

• 실제 유용한 제품을 만드는게 베스트지만 그럴 여유도 없고 마땅히 떠오르는 아이디어도 없음

• 웹 사이트를 따라 클론 코딩을 하는 것도 좋지만 클론 코딩을 하면서 느낀점은 html, css에 대부분 시간을 투자하는 경우가 많아서 기각

• 최대한 기획적인거와 디자인 부분을 빼고 기술적인 것을 활용하는 프로젝트를 하고 싶었음

• 그래서 생각한게 그냥 게시판 애플리케이션임 코딩 카타처럼 단순히 프로그래밍 기술만 연습하는 느낌으로 만들 생각 그래서 프로젝트 이름도 생각한게 있는데 Board kata 코드 카타에서 아이디를 얻어 게시판를 이용한 코드 카타 라는 뜻임

목표 기능및 일정

인증

평소 OAUTH2.0을 이용한 소셜 인증 방식을 선호하지만 이번 프로젝트는 가장 기본적인 방식으로 구현하고 싶었음 일단 패스워드 + 세션 방식으로 구현할 예정임

예상 기간 : 3d

• 회원 가입

  • 이메일 + PASSWORD 방식으로 가장 기본적인 회원 가입
    

• 로그인

  • 스프링 시큐리티를 이용한 세션 인증 방식

게시판

이번 프로젝트의 메인 도메인

예상 기간 : 6d

• 게시물 작성

  • quill.js 같은 위지윅 에디터로 게시물을 작성할 수 있도록 만들 예정

  • 그리고 이미지 업로드도 추가적으로 만들 예정 이미지 업로드는 스프링에서 처리하는 것보다 프론트엔드 node.js 서버를 이용해 간단하게 S3 같은 클라우드 스토어로 업로드 하고 이미지 URL만 서버에 보내는 형식으로 구현할 생각

• 게시물 수정

• 게시물 삭제

• 게시물 조회

  • 기본적인 게시판에는 페이징 네이션이 필요함 백엔드는 QuerdDSL의 페이징 네이션 인터페이스를 이용해서 구현할 생각이고 프론트는 무한 스크롤보다 정통적인 번호 페이징네이션을 구현할 생각

  • 그리고 검색 기능도 필요함 검색필드는 유저 이름, 내용, 제목, 날짜를 이용한 검색을 구현할 생각

댓글

예상 기간 : 3d

게시물에는 기본적인 댓글 기능이 있음 대댓글을 달 수 있도록 계층형 구조로 설계할 생각임

• 댓글 작성

  • 기본적인 html의 TextArea를 이용해서 텍스트 댓글만 달 수 있도록 할 생각임

  • 그리고 위에 말했듯이 대댓글을 작성할 수 있도록 구현할 예정

• 댓글 수정

• 댓글 삭제

관리자

예상 기간 : 4d

게시판에는 게시물과 회원을 관리 할 수 있는 관리자가 있음

• 계정 블록

  • 관리자는 게시판에 관리가 안되는 유저를 관리할 수 있어야 됨 악성 유저가 더이상 서비스를 이용하지 못하도록 블록을 할 수 있도록 구현 예정

• 모든 게시판 CRUD 기능에 대한 권한

  • 관리자는 특정 목적에 맞지 않는 게시물이나 댓글을 관리할 의무가 있음 모든 게시판을 관리할 수 있도록 게시물, 댓글에 대한 모든 CRUD 권한을 가지고 있어야함

• 공지

  • 관리자는 게시판의 공지사항을 전달할 수 있어야함 공지사항이 올라오면 게시판 게시판 맨위에 하이라이트 처리할 수 있도록 구현할 예정

CI/CD 구축

예상 기간 : 5d

항상 사이드 프로젝트 할 때마다 aws 우분투 서버 들어가서 한땀 한땀 배포를 어렵게 했던 기억이남 이번 기회에 테스트도 배웠겠다. 실무에서 이런식으로 배포하면 굉장히 많은 문제가 있을거라 생각해서 이번 기회에 CI/CD를 구축 해보자 굉장히 많은 학습 시간에 투자를 해야할 것 같고 기간도 조금 빡빡한 느낌이 있지만 일단 해보자

주요 기술 선택

백엔드

• Spring Boot + MVC

  • 스프링부트 안쓰는 흑우 없제?

• Spring Data JPA

  • Spring Data JPA 를 사용하면 레포지토리의 정말 많은 보일러플레이트를 줄일 수 있고, 메소드 이름으로만 쿼리를 생성할 수 있고, 또한 페이징에 관한 인터페이스 까지 제공해줌 사실상 스프링에서 JPA를 사용하기 위해 필수 의존성이라고 생각함

• QueryDSL

  • 게시판 조회할 때 검색 기능으로 동적 쿼리를 구현해야 함 QueryDSL을 이용하면 깔끔하게 코드를 작성할 수 있고 컴파일 시점에 오류를 쉽게 찾아낼 수 있어 선택

• Spring Security

  • 단순히 인증만 사용하는 간단한 애플리케이션이면 과하다고 생각하는 프레임워크지만 관리자 권한이 필요한 인가 시스템을 구현하기 때문에 스프링 시큐리티를 선택

• Spring RestDocs

  • 스프링 문서 자동화에는 주로 Swagger나 RestDocs가 사용됨 Swagger는 제품 코드에 어노테이션이 덕지 덕지 붙는 단점도 있고 RestDocs는 문서화 하려면 테스트를 강제화 하는 특징이 있음 Swagger의 문서 디자인이 예쁘긴 하지만 코드숨에 배운 기술이기도 하고 테스트 코드를 강제화 한다는게 좋은거 같음

프론트 엔드

• React.js

  • 가장 나한테 익숙한 프론트엔드 프레임워크 사실상 백엔드에 기준이 맞춰진 프로젝트여서 타임리프 같은 템플릿엔진을 쓰는것도 방법이지만 사실상 템플릿엔진보다 나한테 리액트가 더 익숙하고 클라이언트 서버 구조로 설계 하고 싶음 ㅎ;

• React Query

  • 최근 프로젝트에서 swr를 이용해 상태관리를 해 본 경험이 있음 그전에는 리덕스를 이용해서 상태 관리를 해왔는데 최근 리액트 상태관리 추세는 API 데이터를 전역 상태관리로 관리 하지않는게 트랜드인듯 swr 를 사용했을 때 리덕스에 일단 데이터 패칭 부분에서도 로딩, 에러 같은것도 다 핸들링 해주니까 정말 편했고 아무리 reudx-toolkit 이 있다고 해도 특유의 보일러플레이트가 있어 굳이 전역 상태관리가 많이 필요하지 않는 이상 사용하지 않을거 같고 swr을 저번에 사용해봤으니 React-Query를 사용해봐야겠다.

• Antd

  • 내가 가장 좋아하는 리액트 컴포넌트 프레임워크 커스터마이징 하기 까다롭다는 단점이 있지만 커스터마이징 하지 않을생각이기 때문에 선택

인프라및 배포

• GitHub Action

  • 내가 알고있는 대표적인 CI 툴이 두가지가 있는데 젠킨스와 깃허브액션임 둘 다 사용해보진 않았지만 둘의 가장 큰 차이점은 젠킨스는 CI용 서버를 구축해야한다는 문제가 있음 반면에 깃허브 액션은 깃허브 CI 서버를 사용하기 때문에 내가 하는 사이드 프로젝트에는 어울리지 않다고 생각해 깃허브 액션 사용할 예정

• GCP

  • 기존 aws 프리티어를 다 사용해서 저번에 했던 사이드 프로젝트도 배포 했더니 한달에 몇 만원씩 나옴... 그래서 azure랑 gcp 둘 중 고민을 했는데 개인적으로 구글의 인터페이스가 나한테 익숙한 느낌이라서 선택했음