팀. 도라
권채린 김선종 김준회 유순선 최성원
모두의 스터디
이젠 학습도 팀 플레이다!
모두의스터디.메인.한국
같이 스터디하고
지식을 관리하려면?
만든 이유
- 로컬에서 쓰는 옵시디언
2. 스터디 모집에 한정된 홀라
3. 시작하기 쉽지 않던 SSG
4. 구조화, 팀작업이 어려운
스터디 멤버를 관리하자
파편화를 막고 구조화 하자
작성글을 보여주자
그래서
만들었습니다
스터디를 홍보하고
스터디를
관리하고
배운 내용을
함께 작성하고
작성한 내용을공유하자!
모바일도
됩니다!
모바일도
됩니다!
소개
스터디, 위키 - 무한스크롤링
Spring Pageable, js
스터디 검색
위키 검색
회원
OAuth2.0을 적용한 로그인
회원
OAuth2.0 인증 후 회원가입
소개
회원 정보 수정하기
NCP Object Storage, SweetAlert2
소개
회원 탈퇴
modal
소개
회원 글/댓글 목록
Spring Pageable
소개
스터디 모집글 작성하기
Toast UI Editor, NCP Object Storage, DateRangePicker, SweetAlert2
모집글 편집
소개
스터디 참여하기
modal: js, css, Libs: SweetAlert2
소개
스터디 관리하기
스터디원 관리하기
스터디 관리
기능: 상단고정(즐겨찾기), 신청 수락/거절, 가입 스터디 탈퇴
위키 뷰어, 에디터
Libs: TOAST UI editor, jsTree, table of contents
Techs: ajax, 인접트리 자료구조, NCP Object storage
위키 뷰어, 에디터
Libs: TOAST UI editor, jsTree, table of contents
Techs: ajax, 인접트리 자료구조, NCP Object storage
작성한 개별 위키 발행
Pageable 기반의 무한 스크롤링
소개
댓글로 소통하기
실시간 알림받기
스터디, 위키 댓글 기능
Techs: Async Request, RESTful API, Redis, Spring Event, SSE
실시간 댓글 알림
관리자 페이지
Libs: adminlte
공통코드 관리
사이트 소개
구현 상세
이미지 업로드
라이브러리 기본 설정:
이미지 업로드 시, Base64로 인코딩됨.
에디터에서 많은 영역을 차지하여 활용성이 저하됨.
변경 후 :
이벤트 리스너를 통해 NCP Object Storage에 업로드 하도록 변경,
파일이 중복되지 않도록 UUID 생성하여 사용함.
이미지 업로드
이미지 업로드
업로드 이벤트 발생 시 요청
생성된 url이 삽입 된 글 저장
storage/file/upload
이미지 업로드
저장 된 이미지 url 응답
https://kr.object.ncloudstorage.com/~
이미지 이름 UUID로 변환
NCP Object Storage에 이미지 저장
좋아요
좋아요 반정규화 적용
반정규화의 필요성
멤버-좋아요 테이블로 정규화 시
매번 COUNT 필요한 문제
반정규화 적용
좋아요 갯수만 따로 테이블에
저장하여 조인없이 가져오게 적용
인접리스트
id
parent_id
id
parent_id
클라이언트 사이드 정렬
단순 조회 쿼리로 DB 부하 감소
1 요청
5 정렬된 결과 제공
4 깊이우선탐색
3 JSON
인접 리스트
2
단순
조회
custom serializer
라이브러리에서 정의된
키 이름에 맞추기 위해
Custom Serializer 적용
설계/아키텍처
위키 에디터 상세
승인된 스터디원에게만 보이며,
승인된 스터디원만
정상적인 응답을 받습니다.
위키 에디터 상세
위키 생성, 제목 변경, 삭제, 이동은
모두 비동기로 실시간 반영됩니다.
위키 에디터 상세
내용은 자동저장!
단 내용이 변경된 경우에 한정하여..
사용자의 입력이 있거나 (30초마다)
다른 위키로 이동하거나,
창을 닫는 경우에 한정
에디터 네트워크 사용
사이트맵
회원정보입력
소셜로그인
(GitHub, Kakao, Google, Naver)
비회원
위키 보기
스터디 정보
USER
모두의 위키
사이트맵
회원
소셜로그인
(GitHub, Kakao, Google, Naver)
USER
좋아요
댓글 편집/삭제
댓글 등록
메인페이지
스터디정보
대댓글
좋아요
댓글 편집/삭제
위키 보기
댓글 등록
대댓글
댓글 편집/삭제
모집글쓰기
위키 작성
댓글 등록
대댓글
대시보드
자기소개
즐겨찾기
My 스터디
My 스터디 목록
스터디 신청/거절
스터디장
마이페이지
스터디 탈퇴
스터디원
수정
회원정보수정
탈퇴
My 위키 글
스터디 My 댓글
My 위키글/댓글보기
위키 My 댓글
추후 개선할 점
Redis cache를 적용해
조회 성능 개선
테스트 코드를 작성해
코드에 대한 신뢰도 확보
리액트 적용
무중단 배포를 구축해
배포 시 down-time이
없도록 개선
백엔드 프론트엔드
분리
레디스를 통한
DB 동시성제어
스프링 시큐리티를
이용한 권한 관리
예외 처리
기술스택,
툴 소개
기술 스택
프론트엔드
백엔드
VCS
인프라
사용 툴
협업도구
Github Project
협업도구
Github Discussion
협업도구
Github Discussion
협업도구
Github
Pull Request ➡️ Review ➡️ Merge
Trello
for Brainstorming
TASK
for Scheduling
Figma
for Prototyping
Figma
for Prototyping
Canvas
Screen Flow Diagram
Screen Layout Design
erd
DATABASE 구조 설계
NCLOUD DB SERVER
사용
팀원 소개, 소감
Team 도라
MAIN Role | Responsibilities | |
김준회 (팀장) | 위키, 댓글, 에디터 | 팀 회의, 팀 스터디 주관, 일정관리 Screen Flow Layout, Layout Design 작성 위키, 댓글 REST API 및 FE 개발, 트리 구조를 갖춘 마크다운 뷰어 적용 및 편집 기능 개발 (jstree, Toatst UI Editor) |
권채린 | 회원, 스터디 | 카드 ui 무한 스크롤 적용, 즐겨찾기, 좋아요, 스터디 신청기능, 마이페이지, ncp object storage 적용, 이미지 업로드 처리 |
김선종 | 스터디, 알림 | 스터디 작성, OAuth2, 알림, 페이징처리, 예외처리, 스터디 관리, ncp storage 이미지 업로드 처리 |
유순선 | 위키, 검색 | 모두의 위키 CRUD, MY위키 글/댓글보기, 검색 기능, 페이징처리 |
최성원 | 메인화면, CI/CD, Infra | OAuth2 연동,CI/CD 구축, 실시간 알림 구현, DB 이중화, admin 페이지, 메인페이지 |
프로젝트 소감
김준회
R&R을 완전히 분리하기보단 서로 가르쳐주면서 진행했기에,
생각보다 많은 기능을 구현하지는 못했던 것 같습니다.
대신 그만큼 같이 성장하는 게 느껴져서 즐거웠습니다.
시간이 참 빨리 지나갔네요.
참 중요하다고 느꼈습니다. 혼자서는 절대 못했을거에요~
도시락과 라면으로 야간작업한 우리 도라 팀 다들 수고 많으셨습니다! 코드리뷰를 많이 못해본 게 아쉽네요. 계속 연락해요~
@joonhoekim
프로젝트 소감
최성원
실시간 알림과 DB 이중화를 구현해 보면서 스프링 라이프사이클에 대해 좀 더 이해할 수 있었습니다.
테스트 코드를 많이 도입해 보지 못해서 아쉬웠습니다. 여기서 끝내지 않고 계속 다듬어서 개선해 나갔으면 좋겠습니다.
짧은 기간동안 모두 열심히 참여해 결과물을 만들어낸 팀원들 모두 고생하셨습니다.
@zhtmr
프로젝트 소감
김선종
다양한 요구사항들을 구현하면서 스프링 프레임워크에 대해
공부할 수 있어 좋은 시간이었습니다.
테스트 코드를 기반으로 프로그래밍 하지 못해 아쉬웠습니다.
@sunjong0214
프로젝트 소감
권채린
처음에는 많이 부족했지만 수업 시간에 강사님이 가르쳐주신 내용을 활용하고 응용해야할 부분은 서로 찾아보고 가르쳐주면서
함께 성장할 수 있었습니다.
함께 협업하여 뜻깊은 결과물을 만든 좋은 경험이었습니다.
주말에도 만나서 팀플하느라 다들 너무 고생하셨어요.
고생한 만큼 모두 좋은 결과있었으면 좋겠습니다.
@chaexrin
프로젝트 소감
유순선
6개월이라는 짧은 시간 동안 배운 교육 내용을 바탕으로 웹 페이지를 개발할 수 있어서 많은 것을 배울 수 있었습니다. 팀 프로젝트를 통해 협업의 중요성을 깨닫고, 함께 프로젝트를 진행하는 새로운 경험을 쌓을 수 있었습니다. 비록 더 많은 기능을 구현하지 못한 점이 아쉽지만, 이 과정에서 많은 경험을 하였습니다.
팀원들 모두 정말 수고 많으셨습니다!
@yusoonsun
THANK YOU
감사합니다.
TEAM. DORA