본격적으로 프로젝트가 시작되는 주차다. 처음해보는 프론트와 백엔드의 콜라보!
기획하기
- 주제 정하기
- 와이어 프레임 만들기
- ERD 그리기
- API 설계하기
와이어 프레임
아직 Figma가 익숙하지 않아 급하게 Whimsical이라는 툴을 사용하여 협업을 진행하였다. Whimsical도 간단히 빠르게 협업하기는 좋은 것 같은데, 결국은 Figma로 좀 더 구체적인 그림을 그려야할 것 같다.
ERD
항해에서 백엔드 잘하시는 어떤 분은 AQueryTool을 쓰시던데 우리조는 Draw.io를 사용하였다. 딱히 이유도 없고, 불편 사항도 없었다.
→ 역시 테이블 최적화 및 관계 설정이 중요한 단계라고 느꼈다.
👉 정규화 같은 중요한 키워드를 다시 한 번 찾아보고 정리해야 겠다!
API
ERD를 먼저 그리고 API 설계에 들어가니까 request, response 포맷을 정하기가 훨씬 수월했다.
항상 URL 정하는 부분이 애매하다.
👉 URL 정하는 베스트 프랙티스에 대해 좀 더 찾아보고 정리해야 겠다!
API 설계를 하다보면 기능을 빼먹는 부분이 항상 생기는 것 같다.
👉 와이어 프레이밍 단계에서 기능과 필요한 데이터를 좀 더 꼼꼼히 살펴야겠다!
결론
와이어프레임(화면) → ERD(데이터) → API(연결) 순서로 구상해나가는 게 가장 편했던 것 같다.
역할 분담
일정 관리
일정 관리를 어떻게 할까 서칭해보다가 1기 어떤 분이 다소 특이한 방식?으로 일정 관리를 하시길래 검색해보니 Jira, 스크럼, 칸반, 스프린트 같은 용어들이 나왔다.
👉 최종 프로젝트 때 한 번 적용해봐야겠다! 이 개념들을 알게 되면 역할 분담에도 도움이 되지 않을까 짐작해본다.
버전 관리
이번에 조심스럽게 Git Flow 를 적용해보았다. 프론트에서는 main 브랜치를 release 브랜치로 사용하고, 개발은 develop 브랜치를 기준으로 merge해가는 식으로 개발하기로 했다.
👉 Git Flow 에 대해 좀 더 찾아보고 정리해서, 다음엔 더 잘 적용해봐야겠다! Git 기능도 더 스마트하게 사용하도록 공부하자!
프론트 개발 환경 설정하기
- CRA를 기본적인 프레임으로 사용
- 폴더 구조 정하기
- 큰 페이지 단위 컴포넌트 생성
