멋쟁이 사자처럼 11기 팀 프로젝트 회고

블로그가 정말정말 오랜만이다! ㅋㅋㅋㅋㅋ 상반기 회고 하고 지금 글을 쓰는 거니까 2달 넘게 블로그 글을 안 쓴 것 같다.

7월-8월 동안은 학교도 마쳤겠다, 방학을 제대로 만끽해보고자 잘 놀면서 지냈다.

 

간단히 7-8월동안 회고해보자면,

우선은 멋쟁이 사자처럼 팀 프로젝트를 두 번 진행했다.

하나는 해커톤을 대비하기 위함이었고, 나머지 하나는 해커톤 프로젝트였다. 건강상의 이슈로 아쉽게 해커톤 당일에는 참여하지 못했지만 ㅠㅠ 프로젝트 하면서 많이 배웠다.

 

그리고 사이드 프로젝트를 하나 시작했다!

백엔드랑 협업을 해보면서, 다른 프로젝트를 해보고자 여기저기 찾아보고 지금의 팀원 분들을 만났다.

8월 초에 시작해서 현재는 디자이너 분이 디자인하는 중이고, 백엔드 팀원 분이 API를 구현하고 있다.

프론트 파트는 아마 9월부터 본격적으로 하지 않을까 싶다.

 

다시 돌아와서,

이번에는 멋쟁이 사자처럼 팀 프로젝트를 회고해보고자 한다.

 

 

 

 

 

 

 

백엔드와의 첫 협업

 이번에 팀 프로젝트를 진행하면서 가장 설레고 재밌었던 점은 바로 백엔드와의 협업이었다...!

캠프를 진행하면서는 백엔드 파트를 firebase로 대체했었고, 한 번도 협업을 해본 적이 없어서 이번에 걱정을 좀 많이 했다. 이미 firebase의 아주 편리한 method에 익숙해져서 실제로 서버를 연동하는 대에 많이 애를 먹었던 것 같다 ㅋㅋㅋㅋ

 

 

백엔드와 협업하기 위해서 jar 파일을 실행하고, mysql workbrench를 보고...등등은 따로 글로 작성해두었다.

https://daydream-sy.tistory.com/274

백엔드 서버와 연결하기 (jar 파일 공유)

 

 

CORS를 위한 proxy 설정

보통 react 서버는 localhost:3000 을 사용한다.

그렇지만 백엔드 서버는 localhost:8082를 사용하기 때문에 따로 CORS설정을 해놓지 않은 이상, api request를 날리면 CORS 오류가 뜬다.

 

물론!

우리 프로젝트도 이 오류가 났었다. 그래서 이를 간단하게 해결하기 위해 proxy 설정을 해주었다.

 

react-script 공식 홈페이지에 이를 해결하는 방법이 있다.

 

간단하게 package.json에 위의 문구를 추가하고 해결하였다.

 

 

 

 

 

 

백엔드와 repository 같이 사용해보기

 첫 번째 프로젝트에서는 깃허브 레파지토리를 같이 사용했었다. 브랜치 충돌이 날까봐 얼마나 조심을 했었는지...PR 날리거나 커밋 메시지 하나 작성할 때도 3번 이상 확인하고 작성했던 기억이 난다.

백엔드 브랜치와 프론트 브랜치를 혼동하지 않기 위해 엄청나게 노력했었다.

 

 

 

 

 

 

 

 

 

 

 

팀 노션 / 슬랙 으로 협업하기

 멋쟁이 사자처럼 슬랙도 있고, 팀 노션도 있었다. 프론트와 백엔드 협업이 처음인 사람들이 많아서 (나도 포함), 두 파트를 나누고 기능 구현하는 과정이나 팀 회의, 각자 회의 등을 상세히 기록해두었다.

 

 API 명세서나 jar 파일 사용법 등도 전부 노션에 담겨 있다. 그리고 매주 회의를 하면서 열심히 소통했던 것 같다. 이 프로젝트에서는 내가 팀장이 아니었기에 팀원 입장에서 열심히 참여하려고 노력했다.

 

 

 

 

 

 

 

 

 

 

구현한 기능들

첫 번째 프로젝트는, 공통적인 주제를 가진 프로젝트였다. 강의 평가 사이트를 만드는 프로젝트였다.

에브리타임에 있는 강의 평가와 비슷하게 만들었고, 디자인은 그다지 진지하게(?) 고민하지 않아서 별로지만...ㅋㅋㅋㅋㅋ

백엔드와 협업한 첫 프로젝트라 기억이 남는다.

 

이 프로젝트에서 나는 아래의 기능들을 구현했다.

• 로그인/회원가입
• 강의 평가 글 작성
• 강의 평가 글 수정/삭제 (다른 팀원과 같이 했음)
• 글 추천

 

 

원래 로그인/회원가입은 내가 맡지 않았었는데, 글을 작성하는 기능을 구현하기 위해서는 로그인이 필수여서 그냥 한번에 구현했다. 이전에는 axios를 사용할 때 get만 사용했었는데 이제서야 http 요청을 한 번씩 다 써본 것 같다.

 

솔직히 개발하는 건 늘 항상 재밌기 때문에 서버 연동하고 axios error 나올 때만 멘붕이었고 기능 구현할 때는 굉장히 재미있게 개발했던 기억만 있다. 마감 기한에 내가 가족여행이 잡혀 있어서 마감 기한보다 좀 더 일찍 내가 맡은 기능을 마무리 해야 해서 조금 더 다급했던 정도...? ㅋㅋㅋㅋ

 

아래는 첫 번째 프로젝트의 깃허브 링크이다.

https://github.com/CUK-LikeLion-Common/Evaluation-Lecture-team10

GitHub - CUK-LikeLion-Common/Evaluation-Lecture-team10: 방학 공통 강의평가 웹사이트 제작 과제입니다. 팀별

 

 

 

두 번째 프로젝트는 해커톤을 위한 프로젝트였다.

주제가 디지털 약자들을 위한 서비스여서 기획 단계에서 회의를 엄청 했었다.

다양한 의견이 나왔고 그 중 하나를 선택해서 기획을 하고 디자인을 했다. 디자인은 피그마를 통해 내가 했었다.

프로젝트 이름은 효자손이었다.

 

디자인을 간단하게 하고 API 명세서를 통해 개발하기 시작했었다.

여기서 나는

 

• [도움 주는 사람] 메인 페이지
• [도움 주는 사람] 도움 요청 글 detail page
• [도움 주는 사람] 도움 수락

 

이 두 가지 기능을 중점으로 개발했다.

이렇게 정리하면 이게 뭔가, 싶긴 한데 효자손에는 도움을 받는 사람과 도움을 주는 사람의 화면이 다르다.

 

도움을 주는 사람은 설정한 지역 기반으로 도움을 요청하는 글들을 메인페이지에서 볼 수 있다.

그리고 그 중 하나를 선택하면 디테일 페이지가 나오고, 그걸 보고 도움을 수락할 수가 있다.

 

이 기능들을 구현하는데, 해커톤을 하는 해당 주에 내가 건강이 별로 안 좋아서 완벽하게 마무리 하지 못해서 아쉬움이 남는다. 충분한 시간이 주어지고 제대로 구현했으면 좋은 프로젝트였을 텐데 너무 아쉽다.

그렇지만 이 프로젝트를 하면서 모바일 반응형으로 구현하기 위해 미디어쿼리를 사용해봤다는 점이 인상깊었다.

 

근데 사실 이런 프로젝트는 앱으로 만들어보고 싶은데, 나중에 같이 해보자고 제안해볼까 싶다.

 

아래는 효자손 깃허브 링크이다.

https://github.com/HyoZaSon/FrontEnd

GitHub - HyoZaSon/FrontEnd

 

 

 

 

 

 

 

 

 

 

 

 

---

한동안 블로그를 방치하다가 갑자기 새롭게 글을 쓰니까 뭔가 새삼스럽다.

두 달동안 뭐했나 싶었는데 생각해보면 두 가지 프로젝트를 진행했었는데, 역시 기록을 안 하니까 증명이 쉽지 않다.

프로젝트를 하면서 메모장을 애용했는데, 다시 캠프 때처럼 블로그를 애용해야겠다 싶다.

 

아무튼!

두 달동안 방학을 만끽하면서 보냈으니까 상반기 회고에 적었던 것처럼 다시 공부를 시작해야겠다.

 

그리고 멋쟁이 사자처럼 동아리를 하면서 한 학기 동안 스터디도 하고 프로젝트를 해보니까 역시 동아리가 최고다 싶다 ㅋㅋㅋㅋ 캠프에서 하지 못했던 백엔드와의 협업 경험도 해보면서 좀 더 많이 배운 듯 하다.

혹시라도 이런 동아리가 있다면, 그리고 이 글을 읽었다면...꼭 동아리 추천이다.