캡스톤 디자인 프로젝트 회고

프로젝트 소개

프로젝트 개요

한신대학교 컴퓨터공학부 캡스톤 디자인 팀 프로젝트입니다.

프로젝트 기간은 23.09 ~ 23.11 입니다. 대략 2개월 반 정도 걸린 것 같습니다.

토이 프로젝트 공유 웹사이트 Devfolioh! 와 사이드 프로젝트 및 스터디 팀원 모집 웹사이트 Hola!를 모티브로 하여 한신대학교 학생들을 위한 프로젝트 공유 및 팀원 구인 웹사이트를 개발하였습니다.

Devfolioh! - https://devfolio.kr/
Hola! - https://holaworld.io/

이 프로젝트에서 저는 백엔드와 웹 디자인을 제외한 전체적인 기획 및 프론트엔드를 맡았습니다.

프로젝트 아이템 선정 동기

학교 수업 특성 상 같이 수업을 듣는 친구들과 팀을 이루거나 랜덤으로 팀을 짜거나 둘 중 하나로 진행해야 되었으나 랜덤 팀의 경우 각자 잘하는 것이 무엇인지 모르고 프로젝트의 방향성도 잡기 어렵기 때문에 순조롭게 진행되지 않는 경우가 많은데, 졸업을 위해 필수로 들어야하는 수업에서 이러한 불편한 점이 있다는 것이 이해가 되지 않았습니다.

또한 어렵게 팀을 꾸린 후에도 프로젝트에 대한 아이템 선정 과정에서 아무것도 없이 그저 생각만 하려고 하니 마땅히 좋은 아이디어가 나오지 않아 아이템을 선정하는 것에만 시간을 꽤 할애해야만 했습니다.

그러던 와중에 Devfolioh!와 Hola!를 알게 되었고 제가 느꼈던 불편함들을 해결할 수 있는 웹사이트를 개발하게 되었습니다.

역할 분담

Front-end 1명, Back-end 2명, 웹 디자인 1명으로 진행했습니다.

PM

1. Devfolioh!와 Hola!는 한국 개발자 전체를 대상으로 운영되고 있는 서비스입니다. 개발 기간을 고려하고 대상을 집중하는 것이 맞다고 판단하여 사용자를 한신대학교 학생으로 한정했습니다.

2. 2개월 반이라는 기간 동안 해야하는 필수 구현 사항과 추가 구현 사항을 구분하고, 주 1일 구글 meet를 통해 회의를 진행했습니다.

Frontend

로그인 및 회원가입 페이지
프로젝트 게시판 페이지
프로젝트 작성 페이지
프로젝트 상세 페이지
프로필 페이지
랭킹 페이지
IT 정보 페이지

협업 Tool

Git / Github

버전 관리를 위해 Tool중 하나인 Git과 Github를 사용했습니다.

Git과 Github도 제대로 사용해본 것이 처음이라 Git 명령어를 공부하는 데에 큰 도움이 되었습니다.

Github 레퍼지토리는 다음과 같습니다.

Front-end 레퍼지토리 바로 가기
Back-end 레퍼지토리 바로 가기

기술 스택

Language	Framework	IDE

구현

1. 로그인 및 회원가입 페이지 구현

2. 프로젝트 게시판 페이지 구현

   1) 진행 중인 프로젝트와 완료된 프로젝트 구분

   2) 검색 컴포넌트를 통한 제목 검색 구현

   3) 페이지네이션 및 조회순, 좋아요순, 최신순 정렬 구현

3. 프로젝트 작성 페이지 구현

   1) SummerNote를 활용하여 텍스트 및 이미지, 꾸미기 가능

4. 프로젝트 상세 페이지 구현

   1) 댓글 작성 및 수정, 삭제 기능 구현

   2) 작성자의 경우 프로젝트 수정, 삭제 기능 구현

   3) 다른 사용자가 진행 중인 프로젝트에 프로젝트 참여 신청 기능 구현

   4) 작성자의 경우 프로젝트에 참여 신청한 사용자의 목록 및 프로필 보기/ 프로젝트 참여 신청 승인 or 취소 기능 구현

5. 프로필 페이지 구현

   1) 회원가입 시 적었던 사용자의 정보 보기 기능 구현

   2) 로그인 시 본인의 프로필을 보면 비밀번호가 보이고 다른 사용자의 프로필은 비밀번호가 보이지 않는 기능 구현

   3) 자신이 올린 프로젝트 목록을 볼 수 있는 기능 구현

   4) 자신이 프로젝트 참여 신청한 프로젝트 목록을 보고, 신청 취소 할 수 있는 기능 구현

6. 랭킹 페이지 구현

   1) 활동으로 얻은 포인트에 따라 랭킹 순위 적용 기능 구현

7. IT 정보 페이지 구현

   1) 오직 관리자만이 게시물을 작성 및 수정, 삭제 할 수 있는 기능 구현

   2) 일반 사용자는 게시물을 보기만 할 수 있음

후기

좋았던 점

1. 팀 프로젝트 경험을 해 볼 기회가 많이 없었는데 좋은 경험이 되었습니다.

2. 프론트엔드 개발이 재밌었습니다.

배운 점

1. 프로젝트 진행에 있어서 개발자 뿐 만 아니라 다른 직군도 있다는 것을 배우고 프론트엔드 개발자와 PM의 역할을 해 볼 수 있게 되었습니다.

2. 프론트엔드 기술 스택 중 React와 TypeScript가 무엇이고 어떻게 사용하는 지에 대해 배웠습니다.

3. 협업 Tool 중 하나인 Git과 Github가 무엇인지, 어떻게 사용하는 가에 대해 배웠습니다.

4. Rest API에 대해 알고 백엔드와 통신하는 방법을 배웠습니다.

아쉬웠던 점

1. 팀 프로젝트가 처음이다 보니 팀장으로서 이끌어 나가는 것이 어려웠습니다.

2. 팀원들과 소통에 있어서 원활하게 하지 못한 점이 아쉽습니다.

3. 결과물을 보여주기 위한 코딩을 하다 보니 코드의 완성도가 많이 떨어졌습니다.

4. 개념적인 부분에 대한 이해도가 낮다 보니 코딩을 하고 나서도 비슷한 코드가 필요할 때 헷갈리는 부분이 생겼습니다.