Super Kawaii Cute Cat Kaoani
본문 바로가기
👩‍💻 Project

[코드잇 부스트] 데모데이 조각집 프로젝트 회고록

by wonee1 2024. 9. 15.
728x90

 
 

0. 프로젝트 시작 

 
 
코드잇 부스트에서 10주차 동안 진행한 스터디를 끝내고 데모데이 프로젝트를 시작했다! 
 
처음엔 여러 명에서 한 팀이 되어 프로젝트를 진행하는 줄 알았으나,  백엔드 1명 프론트 1명 아님 백엔드 2명 프론트 1명으로 팀원이 구성되었고 나는 프론트엔드 한분과 함께 프로젝트를 진행하게 되었다. 
 
프로젝트의 이름은 조각집으로  자신의 추억을 게시글로 올려 소중한 사람들과 공유할 수 있는 추억 기록 및 공유 서비스이다. 
 
디자인 같은 경우는 본부에서 지원해줬고 페이지 예시 또한 피그마로 제공 받아서 디자인 관련해선 어려움이 없었고 따라서 구현 과정도 쉬울거라고 생각했었지만..역시 웹 프로젝트는 처음이었어서 쉽지 않았다. 
 

 
사용한 기술 스택 👩‍💻
 

 
프론트 엔드& 백엔드
 
      🔹프레임 워크 : Node.js, Express, React
      🔹 언어: Javascript, HTML, CSS
      🔹 데이터베이스: Postgresql
      🔹 ORM: Prisma 
 
 
배포
      🔹 배포 : Render
 
협업 
      🔹 협업: Git, Notion, Discord 
 
 
 
 

📌구현 기능 

 

1) 그룹
 

그룹 등록

  • 그룹명, 대표 이미지, 그룹 소개, 그룹 공개 여부, 비밀번호를 입력하여 그룹을 등록

그룹 수정

  • 비밀번호를 입력하여 그룹 등록 시 입력했던 비밀번호와 일치할 경우 그룹 정보 수정이 가능

그룹 삭제

  • 비밀번호를 입력하여 그룹 등록 시 입력했던 비밀번호와 일치할 경우 그룹 삭제가 가능

그룹 목록 조회

  • 등록된 그룹 목록을 조회
  • 각 그룹의 이미지(한 장), 그룹명, 그룹 소개, 그룹 공개 여부, 디데이(생성 후 지난 일수), 획득 배지수, 추억수, 그룹 공감수가 표시됨
  • 공개 그룹 목록과 비공개 그룹 목록을 구분하여 조회
  • 최신순, 게시글 많은순, 공감순, 획득 배지순으로 정렬 가능
  • 그룹명으로 검색 가능

그룹 상세 조회

  • 그룹 목록 페이지에서 그룹을 클릭할 경우 그룹 상세 조회가 가
  • 비공개 그룹의 경우 비밀번호를 입력하여 그룹 등록시 입력한 비밀번호와 일치할 경우 조회 가능
  • 각 그룹의 대표 이미지, 그룹명, 그룹 소개, 그룹 공개 여부, 디데이(생성 후 지난 일수), 획득 배지 목록, 추억수, 그룹 공감수가 표시됨
  • 공감 보내기 버튼을 클릭할 경우 그룹의 공감수를 높일 수 있으며, 공감은 클릭할 때마다 중복해서 보낼 수 있음.
  • 해당 그룹의 추억 목록 표시 가능

 
2) 게시글(추억)
 

게시글 등록

  • 닉네임, 제목, 이미지(한 장), 본문, 태그, 장소, 추억의 순간, 추억 공개 여부, 비밀번호를 입력하여 추억 등록이 가능

게시글 수정

  • 비밀번호를 입력하여 추억 등록 시 입력했던 비밀번호와 일치할 경우 추억 수정이 가능

게시글 삭제

  • 비밀번호를 입력하여 추억 등록 시 입력했던 비밀번호와 일치할 경우 추억 삭제가 가능

게시글 목록 조회

  • 그룹 상세 조회를 할 경우 그 그룹에 해당되는 추억 목록이 같이 조회
  • 각 추억의 닉네임, 추억 공개 여부, 제목, 이미지, 태그, 장소, 추억의 순간, 추억 공감수, 댓글수가 표시됨
  • 공개 추억 목록과 비공개 추억 목록을 구분하여 조회
  • 최신순, 댓글순, 공감순으로 정렬 가능
  • 제목, 태그로 검색 가능

게시글 상세 조회

  • 추억 목록에서 추억을 클릭할 경우 추억 상세 조회가 가능
  • 닉네임, 제목, 이미지(한 장), 본문, 태그, 장소, 추억의 순간, 추억 공개 여부, 추억 공감수, 댓글수가 표시됨
  • 공감 보내기 버튼을 클릭할 경우 그룹의 공감수를 높일 수 있으며, 공감은 클릭할 때마다 중복해서 보낼 수 있음
  • 해당 추억의 댓글 목록 조회 가능

 

3) 댓글
 

댓글 등록

  • 닉네임, 댓글 내용, 비밀번호를 입력하여 댓글 등록이 가능

댓글 수정

  • 비밀번호를 입력하여 댓글 등록 시 입력했던 비밀번호와 일치할 경우 댓글 수정이 가능

댓글 삭제

  • 비밀번호를 입력하여 댓글 등록 시 입력했던 비밀번호와 일치할 경우 댓글 삭제가 가능

댓글 목록 조회

  • 추억을 조회할 경우 그 추억에 해당되는 댓글 목록이 조회
  • 닉네임, 댓글 생성 날짜, 댓글 내용이 표시

 

4) 배지

  • 그룹은 일정 조건을 달성하면 자동으로 배지를 획득
  • 배지의 종류
    • 7일 연속 추억 등록
    • 추억 수 20개 이상 등록
    • 그룹 생성 후 1년 달성
    • 그룹 공간 1만 개 이상 받기
    • 추억 공감 1만 개 이상 받기
      • 공감 1만 개 이상의 추억이 하나라도 있으면 획득


 
 

1. 설계 과정 

 

User Flow 

 
우선 figma에 올라온 페이지들을 보면서 유저 플로우를 먼저 설계한 다음 프로젝트 구현에 들어가기로 했다. 페이지 수 자체는 많지 않았어서 유저 플로우를 구현하는 과정에서 큰 어려움은 없었다. Figma를 활용하여 유저 플로우를 설계 해봤다. 
 

유저 플로우

 
 
ER 다이어그램 
 
 유저 플로우 설계를 마친 뒤, 주어진 api 명세서를 보면서 ER 다이어그램을 만들었다.

사실 만들기전에 mongo DB를 사용하려고 했었어서 손 놓고있다가 postgresql로 바꾸면서 급하게 만들기 시작했다. 
그룹, 게시글, 댓글, 이미지, 뱃지 기능을 최대한 db로 옮기려고 노력했고 4개의 테이블을 만들고 그 안의 관계를 표시해줬다. 

draw.io로 제작한 er 다이어그램

 
 
 
 

2. 프로젝트 셋팅 및 기능 구현 

 
 
1)  Postgresql, prisma 셋팅
 
처음 Postgresql을 설정해주는 과정에서 계속해서 P1001: Can't reach database server at `localhost:5432` 오류가 발생했다. 비밀번호와 유저 이름이 맞는데도 불구하고 이러한 오류가 계속 발생해서 서치한 결과 직접 수동으로 db를 만들어서연결하면 된다는 것을 알게 되었다. 
 
바로 직접 psql로 들어가서 create 데이터베이스로 데이터베이스를 직접 만들어 준 다음 연결하였다.

psql -h localhost -U postgres

 

CREATE DATABASE jogakzip;

 
 
 
그 다음 ER 다이어그램으로 설계한 데이터베이스를 참고해서 prisma 코드로 옮겨줬다. 
 

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Group {
  id            Int      @id @default(autoincrement())
  name          String   @db.VarChar(255)
  imageUrl      String?  @db.VarChar(255)
  isPublic      Boolean  @default(true)
  password      String?  @db.VarChar(255)
  createdAt     DateTime @default(now())
  badgeCount    Int      @default(0)
  postCount     Int      @default(0)
  likeCount     Int      @default(0)
  introduction  String?  @db.VarChar(255)  // 수정된 필드 이름

  // 관계 설정
  posts         Post[]
  badges        Badge[]
}


model Post {
  id           Int       @id @default(autoincrement())
  groupId      Int
  nickname     String    @db.VarChar(255)
  title        String    @db.VarChar(255)
  content      String
  imageUrl     String?   @db.VarChar(255)
  location     String?   @db.VarChar(255)
  moment       DateTime?
  isPublic     Boolean   @default(true)
  password     String?   @db.VarChar(255)
  createdAt    DateTime  @default(now())
  likeCount    Int       @default(0)
  commentCount Int       @default(0)
  tags         String?   @db.VarChar(255)

  // 외래키 설정 및 관계 설정
  group    Group     @relation(fields: [groupId], references: [id])
  comments Comment[]
}

model Comment {
  id        Int      @id @default(autoincrement())
  postId    Int
  nickname  String   @db.VarChar(255)
  content   String
  password  String?  @db.VarChar(255)
  createdAt DateTime @default(now())

  // 외래키 설정 및 관계 설정
  post Post @relation(fields: [postId], references: [id])
}

model Badge {
  id         Int      @id @default(autoincrement())
  groupId    Int
  badge_type String   @db.VarChar(255)
  createdAt  DateTime @default(now())

  // 외래키 설정 및 관계 설정
  group Group @relation(fields: [groupId], references: [id])
}

 

 
2) Node.js 셋팅 

 
 
일단 기본적으로 npm install 명령어를 사용해서 모듈을 깔아주었고 뱃지 기능에서 10초마다 뱃지 기능을 확인하는 cron 서비스 모듈을 깔아주기 위해 따로 설치했다.
 

npm install

 
 
폴더는 크게 Server, prisma, services, uploads 로 구성하였고 Server안에 controllers와 http, routes 폴더와 app.js, cronJob.js 파일을 위치시켰다. 
 
 
이렇게 프로젝트 셋팅까지 마친 뒤 부터 본격적으로 기능 구현에 들어갔다. 크게는 4개의 기능을 구현해야했고 3주 정도 남은 상황이었어서 최대한 빨리 기능 구현에 집중했다. 
 
 
 
3) 기능 구현 
 

기능 구현 로그

  
 
8월 18일부터 28일까지 총 10일동안 기능 구현을 진행했다. 
 
가장 어려웠던 건 역시 뱃지 기능이었던 것 같다. 직접 prisma studio로 들어가서 db를 수정한 다음 뱃지 기능이 하나하나 작동되는지 확인하는 과정이 수반되어서 그랬던 것 같다. 
 
 
 

 

3. 협업 이슈 

 

프론트 백엔드 연동과정 오류 

 
백엔드까지 구현했을 때는 생각보다 쉽게 구현되었어서 쉽게 프로젝트를 마무리 할 수 있을거라고 생각했다. 하지만 프론트엔드와 백엔드를 연동하는 과정에서 계속해서 오류가 발생했다. 
처음부터 각각 프론트 백을 나눠서 구현 후 깃에 업로드를 했고 전체적으로 합치면서 다시 새로운 깃에다가 푸시할 예정이었다. 
 
 

 
Client 폴더엔 프론트엔드 쪽 코드를 Server엔 백엔드 코드를 넣고 연동하였으나 제대로 화면이 보이지 않았다. 분명 모듈들도 잘 있는데 화면이 뜨지 않아서 의아했는데...알고보니 client 파일쪽에서 build를 해주지 않아서 생긴 오류였다. 

npm run build

 
빌드를 한 후 localhost로 접속했을 때 화면이 잘 보이는 걸 확인할 수 있었다. 
 

실제 구현 페이지

 
 

4. 오류 

 
 
1) 페이지를 넘어가는 과정에서 발생하는 undefined 오류 

undefined 오류

 
 
 
2) 배포과정에서 발생한 P201 오류 

p201 오류

 
 
 
 
3) 그 외 오류들 

 

 

 
 
 
 

5.  배포 과정 

 
배포는 render로 진행했고 진행하는 과정에서 조금 헤맸었다.  원래 프론트엔드와 백엔드를 각각 분리 배포할 계획이었으나 시간이 없던 관계로 합친 상태에서 배포를 진행하기로 했다. 
 
https://github.com/wonee1/demoday_deploy  우선 깃허브에 배포할 코드를 최종으로 업로드했다. 
그 다음 render에서 postgresql 데이터베이스를 만들어 준 다음 그 데이터베이스 링크를 사용해서 최종 웹서비스를 배포하였다. 
 
 
build command

cd client && npm install && npm run build && cd ../server && npm install


 
start command

npx prisma migrate deploy&&Server/app.js


 
 

조각집 시연영상 (youtube.com)

배포 후 시연 영상

 
 
 


 
 

6. 아쉬웠던 부분 

 


 
역시 아쉬웠던 부분도 있다. 원래 구현이 완료 된 뒤 추가로 기능을 더할 예정이었지만 시간이 모자라서 추가하지 못했고,
 또 해결되지 않은 오류가 있었다. 이 부분은 나중에 다시 오류를 수정해보기로 했다. 
 
 
 

 

7. 소감 

 
 첫 웹 개발 프로젝트인만큼 헤맸던 부분도 많았고 힘들었지만 얻어가는 것이 정말 많았던 프로젝트였던 것 같다. 특히 프론트엔드와 연동해보는 과정을 진행해 본게 앞으로 개발에 있어서 큰 도움이 될 것 같다. 

 2등이란 값진 결과를 얻게 됐다!



 
 
 6개월동안 동아리를 하면서 많은 것들은 배우고 얻어가서 뿌듯하다😆
 코드잇 부스트로 활동할 수 있어서 좋았고 다음 기회에 또 러너로 참여하고 싶다! 
 
 

728x90

'👩‍💻 Project' 카테고리의 다른 글

[인공지능응용] 강아지 감정 분석 puppysense 프로젝트 회고록  (1) 2025.07.02
[UMC 7기 회고] 데모데이 프로젝트 회고록  (0) 2025.02.23

관련글

티스토리툴바