SeungMinOh
본문 바로가기

팀 프로젝트

[Bestful] 2차 팀프로젝트 회고

>안녕하세요. 위코드 생활을 시작하고 1차 프로젝트가 끝나고 곧바로 시작한 듯한 2차 팀프로젝트가 끝이났습니다. 
이제 수요일부터 기업협업 첫 출근을 하는데요. 기업협업을 시작하고부터는 또 회고 글을 언제 작성할 수 있을지 모를 것 같아서 부랴부랴 작성하고있습니다. ㅎㅎ 그럼 바로 스타트!

 

 

오늘뭐입지 시현 영상

 

 

포스트 업로드(추가한 사진에 태그 정보 입력)

 

README

 

 

위코드에서 두번 째 팀프로젝트 

2023년 5월 19일 ~ 2023년 6월 2일  총 2주. 위코드에서 1차 프로젝트가 끝나고 Midterm 기간을 한 주가 있었습니다. 잠깐 쉬어가는 타임이었다고 생각하는데 저는 이때 쉬면 2차 팀프로젝트 때 알잘딱깔센(알아서 잘 딱 깔끔하고 센스있게?) 못할 것 같아서 조그마한 투두리스트를 만들어 보았습니다.   ToDoList   

(Styled-components , 외부라이브러리 꼭 사용! , git rebase) 을 접목 시켜야해서 다시 긴장하면서 프로젝트를 시작한 것 같습니다. 

 

Team Name : Bestful 

-Rest API 에 대해서 알고 계신가요 ? 

먼저 Representational State Transfer(REST)는 API 작동 방식에 대한 조건을 부과하는 소프트웨어 아키텍처입니다. REST 기반 아키텍처를 사용하여 대규모의 고성능 통신을 안정적으로 지원할 수 있습니다. 쉽게 구현하고 수정할 수 있어 모든 API 시스템을 파악하고 여러 플랫폼에서 사용할 수 있습니다. REST 아키텍처를 구현하는 웹 서비스를 RESTful 웹 서비스라고 합니다. 

 저희 팀은 이러한 Restful을 넘어서서 Best가 되보자 라는 포부로 Bestful 이라는 패기있는 팀 명이 만들어졌습니다.

 

팀구성

프론트엔드 5명, 백엔드 2명 

  • Project Manager: 연정아(F)
  • Product Manager: 박현아(F)
  • Teammates: 오승민(F), 문유현(F), 이경진(F), 문승종(B), 윤해찬(B)

 

Project Name : 오늘뭐입지

 

1. Project를 진행하며

오늘의집 사이트를 분석하여 커뮤니티 성격의 서비스를 만들어 보고자 했습니다. 오늘의집에서 다른 사이트에서는 잘 보지 못할 수 있는 상 상품 태깅을 기술을 사용해보고자 하였습니다. 그걸 적절하게 나타낼 수 있는 Product를 생각해 보다가 '옷'을 생각했습니다. 매일 학교를 가거나 직장에 출근을해야 하는 주로 10대 ~ 30대 사람들 중 매일 "오늘은 어떤 옷을 입어야할까?" 고민하는 사람들을 End User로 정하고 그 분들을 위해서 내가 어떤 옷을 입었는지 자랑하고 싶은 스타일을 커뮤니티에 게시하여  옷을 '태깅'해야겠다고 생각했습니다. 2주라는 시간이 정해져 있기 때문에 태깅한 상품을 결제까지 하는 이커머스 사이트를 만드는  것과  글을 게시하여 상품을 공유하는 커뮤니티를 만들 것 중 선택을 해야했고 저희는 인스타그램처럼 피드를 게시하여 좋아요도 누르고 댓글도 달고, 팔로우도 하는 커뮤니트를 만들었습니다.

 

 

 

 

제 파트가 로그인 페이지로 정해지자 마자 빠르게 어떻게 개발을 할 것인지 계획을 세워야했습니다. 카카오 로그인 API를 사용해 본 적이 없고 관련 경험도 없어서 정말 막막했지만 좋은 기회라고 생각했습니다. 다행히 주변에 개발자 친구가 있어서 친구에게 조언들 들을 겸 만나서 이것 저것 물어보니 친구는 저에게 먼저 kakao developers 홈페이지에 들어가서 카카오 로그인 공식 문서를 읽어봐라, OAuth 2.0을 공부해 보는게 좋을 것 같다는 말을 남기고 떠났습니다. 😂

저는 이러한 상황이 처음이기에 최대한 빠르게 제가 해야할 것들을 했습니다. 공식 문서도 보고 블로그 글도 읽고 유튜브 강의도 보았습니다. 방대한 내용을 찾아보고 나온 결론이 "나는 javaScript 방식으로 개발해야겠다" 였습니다.

 카카오 공식 문서를 읽다보니 구현하는 방법이 여러가지 있었고 저에게 적합하고 확실한 방법이 JavaScript 방식이었기 때문입니다.

 

카카오 공식 문서 내용

REST API 방식도 PC 와 모바일 웹에서 사용하기 적합한 방식이지만 저는 일단 제가 확실히 할 수 있는 방법으로 일단 짧은 기간 안에  빠르게 개발하고 싶었기 때문에 JavaScript 방식을 선택하였습니다.(프론트, 백엔드 개발에서 좀 더 편리하다고 판단했습니다.)

 

이번 팀프로젝트에서 Follower 로서  개발한 것들

카카오 로그인 API

 

 

 

 

 

통신 첫 성공의 순간(백엔드에 카카오토큰을 전달하고 데이터를 받음 )

1차 프로젝트 때는 useEffect와 통신에 대한 부분에 사전 공부를 거의 못했던 상태였어서 백엔드와 데이터를 주고 받을 때 어려움을 겪었고 팀원들의 도움도 많이 받았었는데 이번에는 제가 준비를 나름대로 잘했고 안해봤던 AXios 방식을 사용해보았습니다.

백엔드 서버 주소를 옳바르게 입력했고 코드에도 오류가 없는 것 같은데 이상하게 서버 쪽으로 요청이 아무 것도 없어서 정말 이상한 상황이 발생했었습니다. 지금 생각하면 되게 원인을 계속 찾고 있으나 해결을 못하고 있어서 힘들었던 것 같습니다. 포기하고 싶을 때 혹시 와이파이? 라는 생각이 머리 속에 스쳤고 바로 확인해보니 와이파이가 특정 와이파이에서만 통신이 되는데 장소를 옮기다가 다른 와이파이로 변경되어 인터넷을 사용하고 있었습니다. 와이파이를 바꾸자마자 서버 쪽에 찍히는 것을 보고 정말 기분이 좋으면서도 슬픈 웃긴 날이었던 것 같습니다. 😂

 

 

 

 

반응형 레이아웃

 

-grid

-Styled-components

-setInterval, setTimeout

로그인 페이지에서는 nav, footer 보이지 않습니다.(라우터 설정 변경)

 

제가 생각한 것 보다도 더 빠르고 큰 어려움 없이 카카오 로그인 API 기능을 구현해서 로그인페이지 레이아웃에 조금 더 신경을 쓸 여유가 있었습니다. 

 

 

로그인 하지 않아 로컬스토리지에 토큰이 없으면 일부 기능들을 사용x, 접근 시 카카오 로그인 모달 창

 

 

 

Modal

 

카카오 API 컴포넌트에 모달로 보이기 위한 스타일 적용

  • 카카오로그인 버튼 컴포넌트를 absolute로 가운데 고정
  • z-index 효과

모달 창 코드

 

 

 

Nav, Footer

 

 

 

 

로그인 후 백엔드에서 프로필이미지 가져오기

 

 

 

 

 

 

글쓰기 페이지에서는 글쓰기 버튼 x

 

 

 

 

로그아웃하면 로컬스토리에서 resToken 토큰 제거

 

 

 

 

 

Footer Layout

푸터는 조금 밋밋할 것 같아서 hover Effect를 주었습니다.

 

 

 

 

 

 

2. 이번 프로젝트를 통해 내가 얻은 것

2차 팀프로젝트가 1차 팀프로젝트와 다른 점은 외부라이브러리를 사용해야 한다는 점입니다. 외부라이브러리를 한 번도 써보지 못하였고 git rebase 사용하여 커밋을 하나씩만 남겨야 했습니다. 
모든게 새로웠던 첫 1차 팀프로젝트에서 고생했던 걸 생각하며 이번엔 1차 때 했었던 실수를 반복하지 않고 더 준비 잘해서 빠르고 정확하게, 퀄리티도 높게 만들어 보고싶어서 개발 전에 공부도 좀 하고 마음을 단단히 먹었었습니다. 

저는 로그인페이지를 맡았고 로그인페이지에서 카카오로그인 API를 사용하여 간편하게 로그인 할 수 있게 구현하였습니다. 
이번 프로젝트를 통해서 저는 자신감이 많이 생긴 것 같습니다. 로그인페이지를 담당하여 프로젝트의 첫 주자라고 할 수 있기 때문에 빠르고 퀄리티있게 먼저 끝내야한다는 부담감을 안고 열심히 개발하다보니 생각보다 빠르게 끝이 났고, 다른 페이지를 맡은 팀원 분들이 기술적으로 막혀있어서 제가 Nav, Footer 부분을 담당해서 더하겠다고 말씀을 드려서 이 부분도 정해진 기간 안에 잘 끝마칠 수 있었습니다.   제가 생각보다 더 많이 할 수 있고 잘할 수 있다는 것을 결과로서 느낄 수 있었고 1차 프로젝트가 끝난 후 다음에는 1인분 그 이상을 해내겠다는 목표를 이루고 팀에 도움이 됐다는 사실과 1차 때에 비해서  많이 성장한 것 같아서 개인적으로 정말 뿌듯했던 프로젝트였습니다. 

 

 

3.  개인적으로 아쉬웠던 점

짧은 프로젝트 기간이었지만 제가 맡은 로그인페이지 카카오 API가 생각보다 빨리 끝났고 내 기능과 레이아웃이 완료가 되었고 작동도 잘되었지만 다른 브랜치와 머지 되었을 때 에러가 발생할까? 라는 생각을 해야겠다는 생각이 들었습니다. 
개인프로젝트가 아닌 팀프로젝트이기 때문에 다음에 팀프로젝트를 할 때에는 이 점까지 고려하면서 개발을 잘해야겠다는 것을 느꼈습니다.

 

감사합니다 :)

 

'팀 프로젝트' 카테고리의 다른 글

[Agile] 1차 팀프로젝트 회고  (0) 2023.05.16