• 코딩 스터디부터 러닝 크루까지 다양한 모임을 만들고 찾을 수 있는 서비스입니다.
• 프로젝트 기간 : 24년 12월 6일(금) ~ 24년 12월 23일(월) (약 2주)

프로젝트 깃허브 프론트 깃허브 백엔드 깃허브 팀 노션 페이지

Team

Cho SeungYeon @layout-SY	@chaesunbak	damhyeong @damhyeong	@Kim-Hyunhee
프론트엔드	프론트엔드	백엔드	백엔드

• 유저 페이지
• 글, 댓글 페이지

• 모임찾기, 모임 상세보기 페이지
• 반응형 레이아웃

• 유저 CRUD API 제작
• CI / CD 제작
• AWS 인프라 관리

• 모임, 게시글, 댓글 CRUD API 제작

flowchart BT
    

    subgraph FrontGitHubRepo ["Frontend GitHub Repository"]
        direction BT
        subgraph feature ["Feature Branch"]
            Github-Branch-feat1("Feature1")
            Github-Branch-feat2("Feature2")
        end

        Github-Branch-main("main")
        feature -- Pull Request --> Github-Branch-main
    end

GithubAction

Github-Branch-main --> GithubAction

subgraph Firebase ["Firebase Hositng"]
    subgraph Node.js ["Node.js Web Server"]
        subgraph ReactApp ["React Application"]
    
    end
end
end

GithubAction --> Firebase


Node.js <-- HTML,CSS,JS --> User["Client(or Browser)"]

User <-- API Request & Response --> Backend["Backend Server"]

flowchart TB
    
subgraph GitHubRepo ["GitHub"]
    direction BT
    subgraph feature ["Feature Branch"]
        Github-Branch-feat1("Feature1")
        Github-Branch-feat2("Feature2")
    end
    
    Github-Branch-main("main")
    
    feature -- Pull Request --> Github-Branch-main
end

subgraph GithubAction ["Github Actions"]
    direction TB
    Env("환경 변수")
    SSL("RSA 키")
    Cmd("어플리케이션 명령어")
end

Github-Branch-main --> GithubAction

subgraph AWS ["AWS"]
    direction TB
    subgraph VPC ["보안 네트워크 그룹(VPC)"]
        subgraph EC2
            PM2
            Nest("Nest Application")
            PM2 --> Nest
            Nginx("Nginx\n (https 구현 위함)")
            Nginx <---> Nest
        end
        subgraph RDS
            MariaDB
        end
        EC2 <---> RDS
    end
    subgraph Route53
        nest-aws.site("https nest-aws.site 도메인 \n (public IPv4)")
    end
    
    Nginx <--> Route53
    
end

GithubAction --> PM2

Route53 <----> Client

• 모임 찾기 기능 : 주제와 키워드별로 원하는 모임을 찾을 수 있어요.

• 모임 생성 기능 : 내 모임을 만들 수 있어요.

• 모임 찾기 기능 : 원하는 모임에 참여할 수 있어요.

• 모임 게시판 기능 : 모임 게시판에 글과 댓글을 남길 수 있어요.

• 내 정보 관리 기능 : 내 정보를 관리할 수 있어요

로딩중, 서버에러, 데이터가 없는 경우 사용자에게 올바른 피드백을 제공하기 위해, 코드를 작성하면서, 코드가 복잡해짐을 느낌. 따라서, 훅에서 { data, loading, error } 를 반환하고 페이지에서는 이에 따라 조건부 렌더링을 하는 식으로 로직과 마크업을 분리할 수 있었음. 이에따라, 가독성이 좋아지고 재사용성이 높아짐.

• CRUD만 하면 된다는 단순한 생각으로 시작했지만 그 무엇보다 기본에 충실한 프로젝트 였다고 생각합니다. 유효성 검사와 예외 처리를 통해 UX에 부정적인 영향을 끼치지 않게끔 사용자 관점에서 생각해보려 노력했고 이를 통해 다양한 방식으로 개발을 진행하며 각종 라이브러리와 기술의 필요성을 느끼며 그 사용의 목적성이 뚜렷해지는 시간이었습니다.

이번 경험으로 다름 많은 기술을들을 알아보고, 배우며 나에게 직면한 상황에 알맞는 기술을 만들어보고 싶단 목표가 생겼습니다.

• 그저 CRUD는 단순할 것이라고 얕보았지만, 실제 개발 과정에서는 여러 예외 상황들을 마주하면서, 로딩중, 데이터 없음, 에러, 권한없음 같은 다양한 상황에서 유저에게 올바른 피드백을 제공하는 것이 중요하다는 것 배우는 소중한 경험을 했습니다. 또한, 바로 코드를 치기보다는, 사전에 구체적인 계획을 세우고 어떤 어려움이 있을지 정리하고, 어떤 부분에 있어서 학습이 필요할지 파악하는 것이, 성장하고 생산성을 높이는데에서 중요하다고 느꼈습니다. 프로젝트 초반에는 여유가 있었는데 이때, 예상되는 문제들을 파악하고, React Query를 통한 Optimistic Update 같은 개념들을 미리 학습하였다면 이를 적용할 시간이 충분하였을 것 같다는 아쉬움이 남습니다. 처음으로 풀스택 팀 프로젝트를 진행해보면서, 공유해야될 정보가 많았는데 이를 어떻게 하면 효율적으로 전달하고 관리할수 있을까 고민할 수 있었습니다. 문서로 효과적으로 소통하는 법을 시도해보면서 팀 전체의 생산성을 올리기 위한 방법을 고민해볼 수 있었던 좋은 경험이었습니다.

• CRUD에 관한 것만 있는 프로젝트였음에도 불구하고 생각보다 많은 변수를 만나게 되면서 조금 당황스러웠지만, 다른 분들께서 아이디어도 엄청 많으시고, 잘 도와주시고 이끌어주셔서 마무리를 잘 할 수 있었습니다. 팀으로 하다보니 조금 더 소통을 잘 했어야 됐는데 그 부분이 부족했던 것 같아 다음 프로젝트 시에는 소통을 조금 더 열심히 하여 변수 발생을 줄이고 싶습니다.

• NestJS 를 처음 사용하게 된 프로젝트라서 프로젝트 도중에 발생한 문제에 대한 브레이크스루에 집중했으며, 그 과정에서 NestJS 와 TypeORM 의 사용법을 굉장히 빠르게 흡수하게 된 프로젝트였습니다.
• 이번 프로젝트에서는 서버의 로그 관찰과 그로 인한 트러블 발생 이유를 역추적 하는데 집중했으며, 프로젝트 중간에 무너진 데이터 무결성을 해결하기 위해 FK 의 설정을 꼼꼼히 확인후 재설계 하였습니다.
• 2주간의 짧은 시간으로 인해, 이미지를 업로드하고, 생성된 S3 오브젝트의 접근 URL 을 알려줄 수 있는 S3 버킷의 사용을 못한 것이 아쉬웠습니다.