HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🧚
[1기]최종 프로젝트 데브코스
/
💫
[팀16] YAS
/
⭐
16조 프로젝트 수행 결과
⭐

16조 프로젝트 수행 결과

 
💙
고용 노동부 제출 자료 노션에 작성해서 PPT로 옮겨보죠~~~
 

01. 프로젝트 개요

프로젝트 주제 및 선정 배경

  • 프로젝트 주제
    • 일상 속 나의 루틴을 즐겁게 수행하고, 다른 사람들과 루틴을 공유하며 소통할 수 있는 서비스
  • 프로젝트 선정 배경
    • 문제 상황
      • 성인 남녀 10명 중 9명은 노잼 시기 경험
      • 노잼 시기를 겪는 이유의 56.8% ⇒ 매일 반복되는 일상에 지쳐서
      (* 성인남녀 1322명 대상 설문조사, 자료제공: 잡코리아)
    • 해결 아이디어
      • 평범한 일상 속 루틴에 즐거움을 부여해줄 수는 없을까?
        • ⇒ 일상의 루틴에 재미있는 요소를 더해 특별한 일상을 만들어보자!
      • 모두가 겪고있는 노잼시기를 함께 극복해나가면 좋지 않을까?
        • ⇒ 다른 사람들과 루틴을 공유하고 소통해보자!

프로젝트 개요 (프로젝트 구현 내용, 컨셉)

  • 프로젝트 구현 내용
    • 사용자는 자신이 원하는 루틴과 루틴에 해당하는 세부 미션들을 생성 및 수정할 수 있다
    • 각 미션별 시간에 따른 루틴 진행이 가능하다
    • 자신의 루틴을 커뮤니티에 공유 가능하며 댓글과 좋아요를 통해 소통이 가능하다
    • 자신의 월별, 일별 완료 루틴 현황을 분석 페이지에서 확인할 수 있다
  • 스토리 보드
      1. 이메일, 이름, 닉네임, 비밀번호를 이용해 회원가입을 진행한다
      1. 가입한 이메일과 비밀번호로 로그인을 진행한다
      1. 나의 루틴 페이지(메인)로 접속 후 새로운 루틴을 추가한다
      1. 루틴 생성 페이지에서 루틴 제목, 요일, 시작 시간, 카테고리를 입력 후 루틴을 생성한다
          • 루틴 제목 : 집 앞 공원 산책하기 / 요일 : 월, 수, 금 / 시간 : 오전 11시 / 카테고리 : 운동
      1. 루틴 생성 완료 후 해당 루틴을 클릭해 세부 미션 페이지로 이동한다
      1. 루틴에 해당하는 세부 미션들을 생성한다
          • 샤워하기 15분, 옷 갈아입기 5분, 공원으로 이동하기 10분 등등
      1. 세부 미션 생성 완료 후 플레이 버튼을 클릭하여 루틴을 진행한다
      1. 루틴 진행 중 멈추기 버튼을 클릭하여 시간을 멈출 수 있으며, 패스를 이용해 특정 미션을 넘어갈 수 있다
      1. 루틴 완료 후 루틴 요약 페이지에서 루틴의 세부 내용을 확인하고 후기를 남긴다
      1. 마이 페이지로 이동해 자신의 루틴 완료 현황을 한눈에 확인한다
      1. 커뮤니티 페이지로 이동해 다른 사람들의 루틴을 확인 후 댓글과 좋아요를 남긴다

활용 장비 및 재료 (기술 스택)

  • 프론트엔드
    • Framework : React, React BoilerPlate(create-react-app)
    • Route: react-router-dom
    • State Management Tool: recoil or redux
    • Network: Axios
    • Convention: ESLint, Prettier
    • Style: Emotion, styled component
    • etc: formik + Yup, momentjs, react-dnd, emoji-picker-react
  • 백엔드
    • Framework : SpringBoot
    • Language : Java 11
    • Persistence Framework : JPA
    • Build Tool : Gradle
    • DB : MySQL
    • Infra : S3,RDS,ELB

프로젝트 구조

  • 흐름도
    • notion image
       

기대효과

  • 반복되는 일상 속 주어지는 미션을 하나씩 해결하면서 스트레스 해소
  • 아무 의미가 없다고 생각했던 평범한 행동들도 특별하게 느껴짐
  • 사람마다 노잼 시기를 어떻게 극복하는지 YAS를 통해 알게 되고, 사람들의 미션 수행 정도를 보면서 YAS 內 소속감, 공감대 형성

02. 프로젝트 팀 구성 및 역할

notion image
팀원 별 담당 업무
훈련생
역할
담당 업무
김다슬
프론트엔드
팀장
배준형
프론트엔드
팀원
프로젝트 세팅 아토믹 컴포넌트 루틴, 루틴 세부 페이지 루틴 프로그레스 페이지
정윤호
프론트엔드
팀원
UI 기획 API, Store, 라우팅 셋업 아토믹 컴포넌트 유저관련 페이지 커뮤니티 관련 페이지
이수형
백엔드
팀장
프로젝트 세팅 CI/CD 구축 회원 도메인(스프링 시큐리티, JWT), 댓글 및 게시글 좋아요 도메인 API 인프라 구축(S3,RDS) SSL 적용(HTTPS)
김채원
백엔드
팀원
프로젝트 세팅 루틴 , 루틴 진행 도메인 미션 , 미션 진행 도메인 게시믈 조회 API
변민지
백엔드
팀원
게시물 API

03. 프로젝트 수행 절차 및 방법

notion image
프로젝트 수행 절차
구분
기간
활동
비고
사전 기획
UI 와이어 프레임
API 모델 설계
아토믹 컴포넌트 구현
페이지 컴포넌트 구현
API 연동
배포
리팩토링
백엔드 프로젝트 진행 절차

04. 프로젝트 수행 결과

예시

notion image
백엔드 수행 결과

05. 자체 평가 의견

예시

notion image
자체 평가 의견
훈련생
잘한점
아쉬운점
추후 계획
정윤호
- UI설계시 재상용이 용이하도록 컴포넌트를 구성하여 설계 - 템플릿, 라우팅, 모델을 구조화하여 일관성있고 유지보수가 편한 코드를 작성하려고 노력함 - 기획을
- 컴포넌트를 유지보수하기 편하도록 더욱 디테일하게 리팩토링 필요 - 일관성 있게 데이터가 흐르도록 재설계 필요
- 스토어를 적극적으로 도입하여 컴포넌트와 데이터 그리고 api를 분리하여 유지보수하기 편하도록 리팩토링 - 페이지별 API 요청이 아닌 전체 데이터를 받고 스토어에서 꺼내쓰는 방식으로 리팩토링
이수형
- 인프라 부분에 대한 학습 및 적용 - 코드를 사용하며 근본적인 원인과 이유를 고민 - 지난 프로젝트 경험을 토대로 배웠던 부분, 공부했던 부분을 적용
- 시간적 제한으로 인해 효율성과 확장성에 대해 충분한 생각이 부족했으며 이에 대한 리팩토링 필요(N+1문제 등) - DB에 대한 정규화 이해 부족 - 일정관리에 대한 아쉬움 - 시큐리티 및 JWT에 대한 기술활용 아쉬움(슬라이딩 세션 등)
- 구현을 하며 아쉽다고 생각한 부분에 대한 리팩토링 예정(컨벤션에 대한 부분, 예외처리에 대한 구조, 시간 timezone에 대한 수정 등) - OAuth2.0 에 대한 도입 필요(JWT에 대한 슬라이딩 세션 도입) - 프로젝트를 진행하며 부족하다고 생각한 부분 추가 학습 진행 - 통합테스트 코드 작성 - 무중단 배포를 위한 nginx 도입
배준형
- 팀: 컴포넌트, 페이지 및 그 외 폴더를 구분하고, 로직이 index 파일을 위주로 작성되어 유지보수하기 수월함 - 팀: 기획 단계에서 디자인, 데이터 모델 등을 구체적으로 설정하여 프로젝트 기간 동안 개발 집중력 향상 - 팀원의 코드도 읽고 배움
- 프로젝트의 기능이 일상 속 노잼 시기를 타파한다는 프로젝트 기획 의도에 완전히 부합하다고 보기 어려움 - 의도했던 기능이 동작하는 것을 확인한 후 성능 향상을 위한 리팩토링을 후순위로 미룬 것
- 사용자가 과거에 수행한 루틴에 대한 정보를 보여주는 분석 페이지 제작 - API 연결 후 정상 동작하는 것과는 별개로 성능 향상을 위한 담당 페이지 코드 리팩도링 진행
김채원
- 엔티티들에 대해 각각에 맞는 양방향 단방향 관계를 적절히 설계 - 조회시 스트림의 필터기능을 이용해 좀 더 간결한 코드를 작성하려고 노력함 - 코드리뷰를 반영해 문제점 발견시 적극적으로 수용하여 코드 리팩토링
- 디비에서 조회할때 성능적으로 코드를 리팩토링할 필요가 있어보임 - 메서드명이나 변수명등을 좀더 명확하게 네이밍을 못한것 같음
- 각각의 API에 대한 통합 테스트 작성 - 디비에서 조회시 좀더 성능적으로 코드 리팩토링