프론트와 백앤드의 협업 프로젝트!
에코펀딩은 친환경 제품들을 펀딩하는 사이트 입니다. 항해99 미니프로젝트로 프론트앤드와 백앤드가 처음으로 합작한 프로젝트 입니다.
이번 주 프로젝트 : 에코펀딩 (와디즈 컨셉)
📆 Schedule
-
기획 : 2021/12/06 ~ 2021/12/06 (1일)
- 사이트 아이디어 기획
- API 작성
- DB schema 작성
- Wireframe 작성
-
개발 : 2021/12/07 ~ 2021/12/11 (5일)
-
프론트 스케줄 :
월: element, components, page, view 완성 (상세페이지/작성페이지/로그인/회원가입)화: 메인페이지 view 완성, axios 공부하기, item, user 리덕스 필요한 부분 연결하기수: axios mock api 만들어서 메인페이지, 상세페이지 연결하기 (get/post), 배포된 real API 메인, 상세페이지 연결하기,목: 회원가입 데이터 서버에 저장하기, 회원가입 중복체크 버튼, 로그인 API 연동하기, 토큰 local storage, 로그인 유무 헤더 변환하기 등금: 댓글 등록하기, 펀딩하기 버튼, 랭크 리스트 제작, 로그인버튼 에러잡기, 게시물 저장, 수정하기, 삭제하기 부분, 상세페이지 새로고침 시 오류 잡기토: 최종 디자인 수정, 자잘한 사용성 에러 잡기(알럿띄우기), 최종 배포하기, 최종 제출하기
🎈 LINK
👀 사이트 링크 : http://ecofunding.s3-website.ap-northeast-2.amazonaws.com/
📺 유튜브 링크 : https://www.youtube.com/watch?v=7lWQJ02-1N4
🔗 개발 노션 : https://www.notion.so/joo-page/1-50891e8907b44b24868f73df72692cd8
🥇 Developers
-
Front-end
- 서민지 / 이준명
-
Back-end : https://github.com/JooYoung2274/Eco_funding
- 김주영 / 김금동 / 전익현
💯 느낀점
항해 시작하고 처음으로 Node.js 백앤드와 협업한 프로젝트였다. 첫 협업이니 기대 반 걱정 반으로 시작했으니, 우리들의 결과물은 나름 성공적이였다고 생각한다.
우리 조는 이렇게 진행했었다.
사전 기획단계
- 백엔드 분들과 다 같이 어떤 서비스를 만들기 하나씩 이야기 해보기
: '와디즈'라는 펀딩사이트처럼 우리도 친환경 아이템만 펀딩하는 방식의 기능을 가진 홈페이지를 만들어보자고 결정.- 페이지 구성 짜기
: 메인페이지 / 상세페이지 / 작성페이지 / 로그인 / 회원가입- API 구성 짜기
: 페이지 구성에 따라 필요한 내용이 무엇인지 어떤 데이터가 필요한지 얘기하며 프론트는 이 페이지에서 어떤 데이터가 어떻게 뿌려질 것인지 내용 전달하고, 백엔드분들은 그러면 프론트가 사용하기 편리하게 어떻게 데이터형식을 구성해서 보내주면 될 지에 대해서 이야기 해보며 API 구성도를 작성. get/post/put/delete 와 보낼 데이터 이름 다같이 정하기.- -1 짜여진 API정보를 바탕으로 DB 테이블 구성하기 (백엔드)
-2 짜여진 API정보를 바탕으로 와이어 프레임 구성하기 (프론트엔드)
제작단계 (프론트엔드) : 서민지, 이준명
- 협업 할 깃허브 / 리액트 프로젝트 만들기 / 브랜치 만들기
: 준명님이 깃허브와 리액트 프로젝트 폴더구조 기본 세팅 후 공유
: 그룹 깃허브에 올라온 프로젝트 클론 받아 각자 브랜치 생성 후 진행- element 단위 컴포넌트 만들기 (Grid / Input / Button / Text / Image)
: 준명님이 로그인/회원가입 페이지, 저는 메인/상세페이지/제작페이지를 중점으로 맡기로 임시 분담 후, 각 페이지에 어떤 컴포넌트들이 많이 사용되는지에 따라 각자 만들 컴포넌트 분담제작 후 git 에 merge 후 pull 받기
- 민지 : Grid / Text / Image (메인/상세에 제일 필요한 컴포넌트 및 컨텐츠 영역 지정grid)
- 준명 : Input / Button (로그인 회원가입에 제일 많이 쓰임)
- 정해진 page단을 서로 만든 element 컴포넌트를 이용하여 만들기
- 페이지단 제작 후 다시 merge and pull 후 디자인 한 사람이 전체적으로 레이아웃 다듬기
- Vscode Live share 을 이용하여 둘이 같이 페이지 기능 추가하기
우리 조 프론트의 협업방법
각자 페이지 분담한대로 각자 페이지에 기능을 만드는 방식으로 진행 할 수 도 있었지만, 우리가 만들어야 할 페이지는 5페이지밖에 안되고, 로그인, 회원가입부분을 백엔드에서 넘겨주는 토큰을 받아와 만들어야 하기 때문에 둘 다 이 부분에 대해서 공부하고 실습 할 필요성이 있기 때문에 둘이 한 페이지 한 페이지씩 같이 진행.
로그인 페이지를 만들더라도, 이 페이지에 필요한 리덕스와 API 등 기능에 대해 서로 이야기하며, 같이 구성한 로직으로 페이지를 하나씩 완성해 나가다 보니 모든 페이지에 서로가 모르는 코드가 없고, 서로 하나씩 빠트린 부분 오류 바로바로 피드백해가며 같이 코드를 짜니까 혼자서 2-3시간 고민하면서 만들었을 수도 있을 법한 기능을 길어도 1시간 이상 고민하지 않고 바로바로 오류찾고 기능구현이 가능했습니다.
다음주에 클론코딩 하다가 막히는 부분 생기면 이번 주 코드 보면서 아 이때는 내가 이런 로직으로 이렇게 짰었지? 하면서 참고할 수 있는 나만의 참고자료가 생긴것 같아서 뜻깊은 주 였습니다.
