[새싹x코딩온] 웹 개발자 부트캠프 과정 1차 팀프로젝트 회고 #0

 

썸네일은 내가 먹은 하이볼 ㅎㅎ

 

 

0. 1차 팀프로젝트가 끝난 후 쓰는 회고록

기간 : 2024.07.05 ~ 2024.07.23

개발인원 : FE 2명 BE 3명

담당 역할 : 프론트엔드

주제 : 하이볼 레시피 공유 웹사이트

깃허브 : https://github.com/drunkenHigh/drunkenHigh-SeSAC

 

 

1. 우리팀의 프로젝트 주제는 하이볼 레시피를 공유하는 웹 사이트

여기서 잠깐! 하이볼을 모르는 사람도 있을 수도 있으니 간단히 설명하자면 칵테일 종류 중 하나인데

위스키와 탄산수(혹은 사이다나 토닉워터같은 탄산음료)를 섞은 것이다.

요즘 식당에 가면 다양한 종류의 하이볼들을 판매한다.(멜론하이볼, 자몽하이볼, 얼그레이 하이볼 등...)

위스키가 집에 있다면 직접 만들어 먹을 수도 있다. 집에서 만들어 먹는 사람들을 대상으로 레시피를 공유하고 볼 수 있는 웹사이트를 기획했다.

 

 

2. 총 5개의 페이지로 기획

메인페이지, 레시피 상세 페이지, 레시피 작성 페이지, 회원가입 페이지, 내정보페이지(마이페이지) 로 구성했다.

넣을 기능들을 정리하고 그걸 기반으로 와이어프레임으로 사이트의 레이아웃을 대략적으로 잡았다.

(이 기능들을 기반으로 백엔드 맡으신 팀원분들이 데이터베이스를 설계해줬다 ㅎㅎ)

 

2주라는 짧다면 짧은 개발기간 때문에 여기서도 구현 1순위, 2순위 이런식으로 나누고 각 맡을 페이지를 분배했다.

저걸 기반으로 API 명세서를 작성해서 백엔드와 데이터를 주고받을 때 참고했다

 

** 여기서 기대한 CRUD 기능

Create : 회원정보 생성, 레시피 작성

Read : 회원 정보 조회하여 로그인 및 마이페이지 보여주기, 레시피 정보 읽어와서 상세페이지 보여주기

Update : 회원 정보 수정, 레시피 수정

Delete : 회원 탈퇴, 레시피 삭제

 

4. 프로젝트의 메인 컬러는 하이볼 색상에서 따왔다.

Adobe Color 라는 사이트를 이용해서 하이볼의 색상을 뽑아주고 거기서 메인컬러를 정했다.

 

5. 프론트에서 백엔드와 데이터를 주고 받을 비동기 통신 방법에는 axios를 사용했다.

ajax 는 제이쿼리를 써야 간단하고 현재 프로젝트에서 왠만하면 제이쿼리의 사용을 지양하고 싶었기 때문이다.(그런데 제이쿼리가 워낙 간단해서 지양한다고 했는데 은근히 많이 썼다 ㅠㅠ)

fetch는 모듈 설치를 따로 안해도 되서 편하지만 상대적으로 axios 에 비해 사용이 익숙하지도 않고 기능이 부족하다 그래서 브라우저 호환성도 뛰어나고 사용도 간편한 axios를 사용했다.

 

 

6. 내가 맡은 곳은 메인페이지와, 공통 UI로 쓸 header, footer, 그리고 쿠키 기능(연령확인), 회원가입, 로그인을 맡았다.

(분배할 때는 몰랐는데 기능을 구현하다 보니 내가 create와 read만 맡은거 같아서 다른 프론트엔드 맡은 팀원에게 좀 죄송했다.. )

 

 

 

 

 

 

각 페이지별 어떤 기능으로 구현했는지는 다음 포스팅에서!

 

1. 공통 UI(Header, Footer, Cookie)

https://daddda3232.tistory.com/64

[새싹x코딩온] 웹 개발자 부트캠프 과정 1차 팀프로젝트 회고 #1 | 공통 UI(Header, Footer, Cookie)

 

2.  회원가입과 로그인

https://daddda3232.tistory.com/65

[새싹x코딩온] 웹 개발자 부트캠프 과정 1차 팀프로젝트 회고 #2 | 회원가입과 로그인

 

 

3. 메인페이지

https://daddda3232.tistory.com/66

[새싹x코딩온] 웹 개발자 부트캠프 과정 1차 팀프로젝트 회고 #3 | 메인페이지

 

4. 서버 배포

https://daddda3232.tistory.com/67

[새싹x코딩온] 웹 개발자 부트캠프 과정 1차 팀프로젝트 회고 #4 | 서버 배포

5. 프로젝트를 마치며

https://daddda3232.tistory.com/68

[새싹x코딩온] 웹 개발자 부트캠프 과정 1차 팀프로젝트 회고 #5 | 프로젝트를 마치며