- WORKWAVE는 팀 스페이스에서의 적응률을 높이고, 워크플로우를 잘 따라갈 수 있도록 도움을 주는 웹 서비스 입니다. 팀 별 달력과 투두리스트를 통해 중요한 일정을 팀원끼리 공유하고, 수정할 수 있습니다. 익명 게시판을 통해 다른 팀원과도 자유롭게 소통하고, 댓글과 대댓글을 작성할 수 있습니다. 점심 메이트 게시판을 통해 특정 팀에 국한되지 않고 자유롭게 점심 모임을 등록하고 참여할 수 있습니다.
| 주우빈 | 이승연 | 황준원 | 조경곤 | 신윤종 |
|---|---|---|---|---|
 @binwoojoo |
 @seungyeonlee2 |
 @junwon-hwang |
 @ckk914 |
 @Maybaba |
- Front : HTML, JSP, vanilla JS, styled-components,
- Back-end : Java, spring boot, mybatis, mariadb
- 버전 및 이슈관리 : Github, Slack
- 협업 툴 : Slack, Notion, Github
- 서비스 배포 환경 : 준비중
-
Spring MVC Spring MVC(Model-View-Controller)는 웹 애플리케이션을 개발할 때 사용되는 아키텍처 패턴으로, 데이터를 모델로 관리하고, 뷰로 렌더링하며, 사용자 입력을 처리하는 컨트롤러를 통해 애플리케이션의 유지보수성과 재사용성을 높입니다. 또한 서버사이드 렌더링을 통해 클라이언트에 완성된 HTML을 전달하여 초기 로딩 속도를 개선하였습니다.
-
RESTfulAPI RESTful API는 REST 원칙을 따르는 웹 서비스로, 클라이언트와 서버 간의 통신을 간단하고 일관되게 만들어줍니다. HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용하여 자원(데이터)을 처리하며, URL을 통해 자원을 식별합니다. 이를 통해 클라이언트 데이터 처리 부분에서 손쉽게 데이터를 전달하고 가져올 수 있도록 하여 코드의 유지보수성을 높였습니다.
- 정해진 규칙에 따라 자동적으로 코드 스타일을 정리해 코드의 일관성을 유지하고자 했습니다.
- 구글 스타일 가이드의 코딩 컨벤션을 참고해 사용했고, 예외 규칙은 팀원들과 협의했습니다.
- 협업 시 매번 컨벤션을 신경 쓸 필요 없이 빠르게 개발하는 데에 목적을 두었습니다.
- main, test, Feat 브랜치로 나누어 개발을 하였습니다.
- main 브랜치는 배포 단계에서만 사용하는 브랜치입니다.
- test 브랜치는 개발 단계에서 git-flow의 master 역할을 하는 브랜치입니다.
- Feat 브랜치는 기능 단위로 독립적인 개발 환경을 위하여 사용하고 merge 후 각 브랜치를 삭제해주었습니다.
- 기능
- 익명 게시판 목록, 익명 게시물 CRUD, 댓글과 대댓글 CRUD, 조회수 처리와 좋아요 기능, 페이지네이션 구현
- UI
- 익명 게시판 목록, 익명 게시물 상세 조회 페이지, 헤더 디자인
- 기능
- 게시글 등록, 게시글 생성 기능, 페이지네이션 구현
- UI
- 점심 메이트 게시판 페이지
- 기능
- 교통정보 API를 통한 실시간 교통정보 확인 기능
- 현재 서울 날씨 확인 기능
- 이전 조회내역 및 베스트 조회내역 TOP5 기능
- UI
- 실시간 교통정보 페이지, 메인 & 교통 페이지 현재날씨 , 이전 조회내역 페이지, 베스트 조회내역 모달창
- 기능
- 회원가입, 로그인, 비밀번호 찾기 구현
- UI
- 회원가입, 로그인, 비밀번호 찾기 페이지
- 기능
- api : 팀 공유 및 개인달력 CRUD api 개발 , 팀 공유 및 개인 투두리스트 CRUD api 개발
- UI
- 메인페이지 디자인 및 uri 연결, 에러페이지 404, 500 에러페이지 인터셉터 개발 및 디자인
- 전체 개발 기간 : 2024-06-10 ~ 2022-07-08
- api 구현 : 2024-06-10 ~ 2024-06-28
- UI 구현 : 2024-06-29 ~ 2024-07-07
- GitHub와 slack을 사용하여 진행 상황을 공유했습니다.
- 주간회의를 진행하며 작업 순서와 방향성에 대한 고민을 나누고 notion, slack에 회의 내용을 기록했습니다.
- 서비스 접속 초기화면으로 메인에서 다양한 서비스에 바로 접근할 수 있습니다.
- 로그인이 되어 있지 않은 경우 : 서비스 접근 시 로그인 필요 알림창 및 로그인 창 리다이렉션
- 로그인이 되어 있는 경우 : 달력, 투두리스트, 점심메이트, 교통현황, 익명게시판 서비스에 바로 접근 가능합니다.
| 초기화면 |
|---|
- 로그인 되어있을 시 바로 달력 아이콘을 눌러 팀 달력에 접근 가능합니다.
- 자신의 팀이 작성한 일정을 달력에서 달별로 확인할 수 있습니다.
- 일정 추가 시, 색 인덱스를 선택하여 다른 일정과 차별화 할 수 있으며, 기본값은 회색으로 제공됩니다.
- 공유달력은 일정 수정 시 수정자가 화면에 렌더링됩니다.
- 자신의 팀이 작성한 투두리스트 공유일정을 화면 하단에서 확인할 수 있습니다.
- 공유 투두리스트는 조회, 작성, 체크, 삭제 모두 가능하며 새로고침 하지 않아도 비동기로 변경사항이 적용됩니다.
- 개인 투두리스트는 공유 투두리스트 바로 옆에 위치하고 있고, 토글기능을 사용하여서 개인정보 보호 및 사생활 보호에 용이합니다.
| 팀 공유 달력 및 투두리스트 화면 |
|---|
- 회원가입을 위한 정보 입력
- 입력 데이터 유효성 검사 - 비동기 처리 (실시간 유저에게 피드백 제공)
- 유효성 검사가 전체 통과 되어야 ‘회원가입’ 버튼이 활성화 되도록 함
- 이미지를 추가하여 서버의 날짜별 폴더 관리하여 관리할 수 있도록 함
- 동일 이미지여도, randomUUID()를 활용하여 중복 방지
- null 이면 익명 사진 사용하도록 함
- 중복 검사 진행(DB 테이블에 가입된 아이디가 있는지 검사), 4-14글자의 아이디 인지 판별, NULL 검사
- 영문과 특수문자를 합한 최소 8자, 비밀번호 확인 입력 창과 일치 여부도 판별
- 한글인지, 최대 6자만 입력 가능하게 함, NULL 검사
- 이메일 형식이 맞는지 검사, NULL 검사
- 중복 검사 (데이터 베이스 확인하여 피드백 전송)
- 데이터베이스에서 읽어온 부서를 표시
- select 태그를 통해 부서를 선택
- 확장성을 위해 현재 입력 제한이 없음
- 가입 시에 중복 체크만 진행 = 직책
- 입력하도록 설정
- 추후 select로 변경 예정
| 회원가입 기능 |
|---|
- 입력 데이터 유효성 검사 진행
- 문제 있을 경우 알림창을 띄워서 알려주도록 구현
- 자동 로그인 설정 후 로그인 시 세션에 값 저장해서, 창을 다시 열어도 로그인 되도록 함
| 로그인 |
|---|
- 회원 ID 존재 유무 검사
- 이름,사번,이메일 입력
- 문제 있을 경우 모달창을 띄워서 알려주도록 구현
- 문제 없을 경우 새로운 비밀번호 입력 모달창 팝업 입력한 비밀번호와 비밀번호 확인 입력한 데이터 검증 일치한 경우 서버로 전송하여 변경하도록 구현
- 서버에서 문제 없을 경우 변경 완료 메시지를 주고, 문제 있을 경우 에러를 메시지로 전달
| 비밀번호 찾기 |
|---|
- 교통정보 API를 이용하여 출/도착지 선택하면 지도에 경로 표시되며, 총 역수 및 소요시간 확인 기능
- 출발지 기준 현재역에 도착 예정 정보 텍스트 및 이미지 렌더링
- 날씨 API를 사용하여 현재 서울 날씨 화면 렌더링
| 교통 및 날씨 API를 통한 실시간 정보 기능 |
|---|
- 이전에 조회한 교통내역 조회 기능
- 최초 4개만 화면 노출하고 나머지는 페이지로 렌더링
- 출발지 / 등록일 정렬 기능
| 이전 기록 조회 기능 |
|---|
- 신규 조회 기록 과 이전 출발/도착지 비교 후 동일한 조회 기록 서버에 저장되어 있으면 조회 수 +1
- 전체 조회수 비교하여 BEST5 까지의 기록만 화면에 노출
- X or 모달창 밖 누르면 사라짐
| 이전 기록 조회 기능 |
|---|
- 제목+내용으로 검색, 조회순, 좋아요순, 내가 쓴 글을 정렬과 페이징하여 조회합니다.
- 게시물에 들어간 첫번째 이미지가 썸네일로 표시됩니다.
- 작성날짜, 수정날짜, 조회수, 좋아요와 싫어요를 각 게시물마다 표시됩니다.
| 게시판 목록 |
|---|
 |
- 게시물을 작성할때는 익명의 닉네임과 고유 비밀번호를 받아 해싱합니다.
- 게시물이 수정되면 수정된 날짜가 표시됩니다.
- 게시물을 수정 및 삭제할때는 입력한 비밀번호 검증을 통해 수정,삭제 가능합니다(관리자는 모두 가능).
- 각 게시물마다 좋아요와 싫어요를 비동기 처리하고 상태 관리합니다.
- 세션에서 조회한 시간을 기록해 30분마다 1번만 조회 가능하게 상태 관리합니다.
| 게시물 조회와 작성, 수정 및 삭제 |
|---|
 |
- 댓글과 대댓글을 작성할때는 익명의 닉네임과 고유 비밀번호를 받아 해싱합니다.
- 댓글 수과 댓글 CRUD는 비동기 처리하여 실시간으로 상세 페이지에 반영됩니다.
- 댓글이 수정되면 수정된 날짜가 표시됩니다.
- 게시글 작성자와 댓글 작성자가 동일할 경우 댓글 옆 별표 아이콘이 표시됩니다.
- 댓글을 수정 및 삭제할때는 입력한 비밀번호 검증을 통해 수정,삭제 가능합니다(관리자는 모두 가능).
| 댓글과 대댓글 |
|---|
 |
- NEW! 버튼을 클릭하면 게시글을 작성하는 모달창이 출력됩니다.
- 모달의 입력 칸에 모든 데이터를 입력해야 add버튼을 클릭해서 게시글 등록이 가능합니다.
- 식사 일정 달력에서 이전 날짜는 선택이 불가합니다.
- 참가 인원은 본인 포함 2명부터 선택이 가능합니다.
| 점심 게시판 |
|---|
 |
- 새글이 게시판에 올라오면 참가상태가 자동으로 등록되고 작성자가 포함되야 해서 1명으로 자동 입력됩니다
- 참석 인원과 참가상태가 같아지면 join버튼이 close버튼으로 바뀌고 더이상 버튼을 클릭할 수 없습니다
| 참여 기능 |
|---|
 |
문제 상황
- auto login 처리 후 해당 인터셉터가 동작할 URL을 설정 .addPathPatterns("/login", "/join","/");"/"로 하면 메인 페이지가 리다이렉션이 너무 많이 되어, 페이지가 에러 발생됨
해결 방법
- 작성오류. "/" 제거 후 에러 해결
[트러블슈팅]
문제 상황
- 비 로그인 상태에서 게시물 수정, 삭제 요청 시 로그인 화면으로 이동 후 로그인 했을때, 해당 게시물이 아닌 홈 화면으로 리다이렉트 됨
- 사용자 편의성 감소, 불필요한 화면 이동이 필요
해결 방법
- 팀원이 만든 userController에 있는 리다이렉트 URI를 검사하는 기능을 이용
- 인터셉터가 발동될 시 URI가 /detail을 포함하고 있다면 해당 URI를 저장, 로그인 이후 리다이렉트할 때 사용
문제 상황
- 게시글을 새로 등록해서 join버튼을 클릭하면 db에서는 참가 상태 숫자가 올라가는데 게시판 화면에서는 새로고침을 해야 숫자 변화가 업데이트 되는 문제
해결 방법
- 새로고침 해야 숫자 변화가 업데이트 되는 문제를 화면 비동기 처리하여 오류 해결
문제 상황
- MIME 유형을 "application/json" 으로 인식하고 있다는 문제
- 서버 재설정등 여러가지 방법을 시도 해봤으나 해결되지 않았음
해결 방법
- 경로 문제였고 JS 파일을 상대경로에서 절대경로로 수정하여 오류 해결
- type="application/javascript" 타입 명시하여 문제 해결
- API 모듈화 : API를 불러오는 코드의 반복이 많아 모듈화할 예정
- lighthouse Performance 증진
- 모든 페이지에서 특히 Best Practices & SEO 점수는 90~100으로 우수
- Performance 점수가 대체적으로 미흡한 문제
- 23-01-17 성능 개선 내용
- 이미지 최적화
<img>요소에width,height속성값을 명시해 불필요한 Reflow를 방지했습니다.- browser-image-compression 라이브러리를 사용해 유저가 업로드하는 이미지를 압축했습니다.
- Intersection Observer API를 사용해 Lazy Loading 기법을 적용하여 홈 피드의 게시글 이미지가 viewport 내에 들어오는 순간 로딩되도록 변경했습니다.
- 웹폰트 최적화
- WOFF2 포맷을 추가하고 가장 우선적으로 적용되도록 선언했습니다.
- 서브셋 폰트로 교체해 용량을 줄였습니다.
- 이미지 최적화
처음에는 프로젝트의 규모가 이전보다 컸기 때문에 걱정이 많았지만, 팀원들과의 협업을 통해 하나씩 문제를 해결해 나갈 수 있었습니다. RESTful API를 구현하고, 프론트엔드와 백엔드 간의 데이터 연동 부분을 더 많이 이해할 수 있었습니다. 또한 데이터베이스와 초기 설계의 중요성도 크게 느꼈습니다. 무엇보다 좋은 팀원들과 즐겁게 작업하면서 서로 성장해나가고 하나가 되어 결과물을 만들었을 때 큰 성취감을 느꼈습니다. 아쉬운 점, 힘든 점도 많았지만 앞으로도 이 과정 자체를 즐기도록 노력해야겠다고 생각했습니다. 다들 정말 고생많으셨습니다.^^
그동안 배운 내용들로 우리 팀만의 프로젝트를 구현할 수 있어서 어렵지만 의미있는 시간이였습니다. 혼자서는 할 수 없었던 일들을 팀원들의 도움을 통해 해결해 낼 수 있어서 감사했고, 이번 프로젝트를 진행하면서 부족하다고 생각했던 부분을 채우는 시간을 갖고 다음 프로젝트는 좀 더 다양한 기능을 구현해야겠다고 생각했습니다.
프로젝트 시작전 강사님께서 DB 및 초기 설계가 매우 중요하다고 말씀 주셨는데 개발진행하면서 그 이유를 알 수 있었고 많은 시간을 줄일 수가 있었습니다. 프로젝트를 진행하며, 강사님께서 강조하신 DB 및 초기 설계의 중요성을 실감했습니다. 사전에 철저한 설계를 통해 개발 중 발생할 수 있는 많은 문제를 사전에 방지할 수 있었고, 이를 통해 많은 시간을 절약할 수 있었습니다. 또한, 체계적인 설계를 통해 기존 프로젝트보다 효율적이고 안정적인 시스템을 구축할 수 있었습니다. 이번 프로젝트는 팀원들과의 협업을 통해 많은 것을 배울 수 있었고, 실무에서의 다양한 상황을 대비할 수 있는 좋은 경험이 되었습니다. 앞으로도 이러한 경험을 바탕으로 더 나은 시스템을 개발할 수 있도록 노력하겠습니다.
자신의 파트만이 아닌 모두가 어우러져야 완성되는 팀프로젝트를 하며, 어렵기도 하고 시간에 쫓기기도 했지만, 잘 구현되어 제대로 동작하는 프로그램을 보며 뿌듯함을 느꼈습니다. 기존에 익혔던 기술들을 복기하며, 다시 한번 점검하는 시간이었습니다. 팀원들과 프로젝트를 완성해 가는 뜻깊은 시간이었고, 다음 프로젝트에서는 좀 더 새로운 기능들을 개발하고 싶다는 생각을 했고, 다음에도 새로운 기능을 정확하고 꼼꼼하게 해서 완성하고 즐겁게 프로젝트를 하고 싶다고 생각이 들었습니다.
이번 프로젝트에서는 GitHub 브랜치 전략을 통해 기능 통합을 수월하게 하고, 초기 팀 내 코딩 컨벤션을 설정하여 각자의 코드를 확인하고 유지보수하기 쉽게 했습니다. 이러한 컨벤션 덕분에 효율적인 워크플로우를 유지하며 작업을 진행할 수 있었습니다.
팀의 업무 워크플로우에 빠르게 적응할 수 있도록 돕는 서비스를 개발하게 되었고, 다양한 기능과 아이디어를 추가하고 싶었지만, 한 달이라는 짧은 기간 안에 모든 아이디어를 구현하지 못해 아쉬움이 남습니다. 그럼에도 불구하고, 팀원들의 적극적인 소통과 협력 덕분에 초반에 기획했던 서비스를 거의 완성할 수 있었습니다. 함께 한 달 동안 열심히 뛰어준 팀원들께 진심으로 감사드립니다.