첫번째 팀 프로젝트 회고 - Metabook

1. 프로젝트를 시작하면서

---

부트캠프에서 2달 정도 교육을 받고 첫 번째 팀프로젝트를 진행하게 되었다.

프론트엔드는 바닐라JS , 백엔드는 EXPRESS를 활용해 2주간 자유주제로 웹페이지를 제작하는 프로젝트였다.

처음하는 팀프로젝트... ! 너무 기대가 됐다😊

2. 주제 선정 및 기획

---

학원측에서 팀을 매칭해 주었고, 프로젝트 기간 첫 주차에는 주제 선정 및 초기기획을 하게 되었다.

이전부터 만들어 보고 싶었던 웹사이트가 있었던 나는, 팀원들에게 내 생각을 어필했고 !! 투표를 통해 내 아이디어가 채택되었다.

그렇게 메타버스공유 플랫폼인 METABOOK프로젝트를 시작하게 되었다.

이전에 생각해두었던 기획에 팀원들의 의견을 받아 초기기획을 완성했고, 피그마를 활용해 와이어프레임을 제작했다.

3. 프로젝트 소개

---

[ METABOOK 소개 ]

- METABOOK은 회원들이 서로 자신의 메타버스 공간을 공유할 수 있는 플랫폼입니다.

- METABOOK은 자신이 만든 메타버스 공간을 자랑하고, 다른 사람의 메타버스 공간을 탐험할 수 있는 서비스를 제공하고자 기획되었습니다.

[기술 스택]

Vanilla JS, NodeJS, ExpressJS, MongoDB, NGINX , Asure

[ 페이지 레이아웃 ]

메인페이지

게시글작성폼

로그인 및 회원가입

상세보기 모달창

4. 나의 역할 - 프론트엔드

---

1. 프로젝트 기획 및 레이아웃 구상

• 내 아이디어가 채택된 만큼, 프로젝트의 전반적인 기획 및 레이아웃 구상을 맡아서 했다.

2. 로그인, 회원가입 페이지

• 로그인, 회원가입 페이지 레이아웃 제작.
• 회원가입 및 로그인시 사용자가 올바른 데이터를 입력 할 수 있도록 validation을 설정했다.
• axios를 이용한 API통신

3. 상세보기 모달창

• 상세보기 모달창 레이아웃 제작
  • 사용자의 편의성을 고려해 detai l페이지를 모달형식으로 제작.
• 댓글등록 및 삭제기능 구현.
• 게시글 삭제기능 구현.
• 좋아요기능 구현
• 메타버스로 입장하는 기능 구현.
• axios를 이용한 API통신

4. Aginx연결

• Aginx를 사용해 프론트엔드와 백엔드를 연결하는 작업.

5. 프로젝트를 마치며

---

프론트엔드를 공부하고, 처음으로 팀프로젝트를 진행했다.

처음하는 팀프로젝트인 만큼 많이 서툴긴 했지만, 팀원 모두 밤낮가리지 않고 열심히 함께 한 덕분에 원하는 결과물을 낼 수 있어서 너무 좋았다.

프로젝트를 진행하면서, 이렇게 했으면 좀 더 좋았겠다 싶은 생각이 들었던 것들을 정리해 보려고 한다.

 

1. 기능별 Component 단위로 구조화하기

처음하는 프로젝트이다 보니 .. 기능구현 하기에만 급급했던 것 같다.

구조화를 전혀하지 않고, 한 페이지씩 통으로 작업을 진행하다 보니, 공동으로 작업하는데 있어서 어려움이 있었다.

 

2. 직관적인 메서드 네이밍하기.

메서드 네이밍을 명확하게 하지 않아서, 서로의 코드를 이해하는데 어려움이 있었다.

이번 프로젝트를 하면서 느꼈던 부족한 부분들을 보완해서, 다음 프로젝트때는 더 좋은 결과물을 낼 수 있도록 해야겠다. 

 

3. 반복코드 줄이기.

프로젝트를 마치고 보니, 어찌저찌 기능은 구현됐지만 반복되는 코드가 많아 , 코드가 필요 이상으로 길어진 것 같다.

함수형 프로그래밍을 통해 반복된 코드를 줄이는 연습을 해야겠다.

6. 접속링크 및 깃헙

---

MetaBookt
github