• Feed
  • Explore
  • Ranking
/
/
    회고록🍃

    4차 프로젝트 회고

    데브코스 4차 프로젝트 회고
    회고록프로젝트
    H
    Hyunw00
    2025.03.12
    ·
    10 min read

    프로젝트 기간 : 2025.02.11. ~ 2025.03.11.

    프로젝트 레포지토리

    깃허브 링크

    GitHub - prgrms-web-devcourse-final-project/WEB2_3_CUBE_FE
    Contribute to prgrms-web-devcourse-final-project/WEB2_3_CUBE_FE development by creating an account on GitHub.
    https://github.com/prgrms-web-devcourse-final-project/WEB2_3_CUBE_FE
    GitHub - prgrms-web-devcourse-final-project/WEB2_3_CUBE_FE

    프로젝트 링크

    RoomE
    https://desqb38rc2v50.cloudfront.net/

    🪧 프로젝트 설명

    서비스 RoomE는 자신만의 독특한 디지털 공간을 만들어가는 소셜 플랫폼입니다.

    RoomE는 자신의 취향과 이야기가 담긴 특별한 공간이자 다른 사람들과 소통하고 교류하는 플랫폼입니다. 마치 실제 방이 그 주인의 성격과 취향을 보여주듯, RoomE에서는 음악과 책을 통해 자신만의 이야기를 만들어갈 수 있습니다.

    🌁 선정 배경

    현대인들은 바쁜 일상 속에서 자신의 감정과 취향을 돌아볼 여유 없이 살아가고 있습니다. 
 스트레스의 원인을 알지 못한 채 불안과 우울을 해소할 방법을 찾지 못하며,
 자신이 진정으로 좋아하는 것조차 점점 잊어가고 있습니다.

    RoomE는 “나만의 공간”을 통해 감정을 탐색하고, 취향을 자유롭게 표현할 수 있는 플랫폼을 제공합니다. 단순한 취향 공유를 넘어, 자신을 이해하고 마음의 안정을 찾으며,
 같은 관심사를 가진 사람들과 자연스럽게 연결될 수 있는 디지털 힐링 공간을 지향합니다.

    ⚒ 기술 스택

    • pnpm

    • React

    • Typescript

    • TailwindCSS

    • Zustand

    • Three.js

    • tanstack query

    • Websoket

    🗣 협업 툴

    • Git/Github

    • Figma

    • Notion

    • Slack

    💻 담당 구현 기능

    • 인증 관련 기능

    • 음악 관련 기능

    • 포인트 내역 페이지

    • 이벤트 페이지


    🍃 KPT 회고

    💪Keep

    1) 팀 멤버 모두가 규칙을 준수하여 소통이 원활하게 됐고, 체계적인 일정 및 작업 관리로 기간 내 일정을 모두 소화할 수 있었습니다.

    3965

    2) 코어타임 기준(09:00~18:00) 기준으로 시작과 끝에 스크럼을 진행함으로서 프로젝트의 전반적인 진행상황을 대략적으로 확인할 수 있어서 앞으로의 프로젝트에서 지속하면 좋을것 같습니다.

    3) 이번 프로젝트는 백엔드와의 협업을 본격적으로 진행한 경험이었습니다. 이를 통해 API 요청 방식과 에러 코드에 따른 적절한 대응 방법을 익혔으며, 백엔드 개발자와의 원활한 소통 방식도 배우게 되었습니다.


    ❗ Problem

    1) 전체적인 컨벤션에 대해 단순히 적용하자고만 이야기하고, 세부 사항을 구체적으로 정하지 않아서 개발이 진행될수록 코드 분리나 폴더 구조의 경계가 모호해졌습니다. 또한, 커밋 컨벤션, PR 컨벤션, 네이밍 컨벤션 등이 일관되지 않게 되어, 팀 내에서 혼란이 발생하는 문제도 있었습니다.

    1-1) 특정 폴더의 역할 파악 부족

    constants, utils, hooks 폴더의 정확한 역할에 대해 명확히 정하지 않고 각자가 판단하여 사용한 결과, 팀 내에서 혼란이 발생했습니다.

    1-2) 커밋 컨벤션, PR 컨벤션이 다른 모습

    39693966


    2) 백엔드에서 배포 환경에 대한 CI/CD를 직접 구축하면서 발생한 이슈에대한 지연 처리

    백엔드에서 배포 서버에 대한 CI/CD를 구축하면서, 서버에 이슈가 발생할 경우 배포 서버에도 문제가 발생하여 프론트 코드 반영 결과를 즉시 확인하지 못하는 경우가 많았습니다.

    만약 배포 환경을 FE에서 직접 구축했다면 이슈에 대해서 빠르게 대처할 수 있었을 것 같습니다.


    🚀 Try

    1) 프론트엔드와 백엔드가 함께 진행 상황을 확인할 수 있는 보드를 만들어 진행 상황을 공유하는 방식을 도입하면 좋을 것 같습니다.

    -> 백로그를 작성하긴 하지만 한눈에 들어오지 않아 현재 백엔드 팀원이 어느정도까지 진행하였는지 직접 물어보지 않고 알기가 힘듭니다.

    2) API 관련 이슈가 발생했을 때 담당자끼리 직접 소통하는 방식 대신, 노션 페이지에 과정을 정리하여 기록으로 남기는 방식을 도입하면 좋을 것 같습니다.

    -> 기록을 남기면 나중에 트러블슈팅 시 더 쉽게 기억하고 참조할 수 있고 다른 팀원들도 어떤 이슈가 있었는지 인지할 수 있습니다.

    3) 추가적인 취향 아이템 설정

    현재는 도서와 음악만 취향으로 선택할 수 있는데 추후에는 사진앨범이나, 영화,게임 같은 취향을 추가해보고 싶습니다.

    3968

    4) 폴더 구조 방식 변경

    현재는 pages폴더안에 각각의 페이지에서만 사용되는 컴포넌트들을 components 폴더안에 넣어두었습니다.

    3967

    다음 프로젝트 때에는

    가장 바깥의 components 폴더 안에 도메인으로 구분된 폴더를 만들고 그안에 컴포넌트들을 정리하고

    pages 폴더 안에는 오직 해당 페이지 컴포넌트만 넣어두는 방식으로 시도해볼 예정입니다.

    5) 코드 리팩토링

    1. 컴포넌트 내 코드가 길어 가독성이 좋지 않은 경우, 세부 컴포넌트로 분리하여 관리

    2. 컴포넌트 내에서 데이터 패칭을 담당하는 코드를 hooks 폴더로 분리하여 컴포넌트를 간결하게 만들고, UI를 담당하는 코드와 데이터 패칭을 관리하는 코드를 명확하게 분리

    3. utils 폴더와 constants 폴더로 분리할 수 있는 코드는 해당 폴더로 이동시켜, 코드의 재사용성과 관리성을 높이는 방향으로 수정

    4. 구현한 페이지에서 리렌더링이 자주 일어나 성능이 좋지 않은 부분들을 최적화


    마무리

    백엔드 개발자들과 처음으로 협업하는 프로젝트였고, 프론트 팀원과 백엔드 팀원 모두 처음 배우면서 진행하는 프로젝트였기 때문에 초반에는 소통이 쉽지 않았습니다. 하지만 시간이 지나면서 서로 적응하고 협업 방식을 배우면서 점차 원활해졌습니다.

    프론트엔드 입장에서 이번 프로젝트는 인터렉션이 많이 들어간 프로젝트였기 때문에 퍼블리싱 과정에서 어려움을 겪었고, 기초를 더 탄탄히 다져야겠다는 생각이 들었습니다.







    - 컬렉션 아티클