[2023.02.14]
저희 팀은 먼저 figma를 이용해 구현할 웹페이지와 flow chart를 구성했습니다.
figma를 먼저 구성한 이유는, 팀원들 모두 각 페이지별로 구현해야 할 기능과 페이지 이동에 관해 정확히 이해하기 위해서입니다. 또 백엔드에서 역시 각 페이지별로 어떤 DB가 필요할 지 알 수 있어 소통에 더 효율적이었던 것 같습니다!
이번 프로젝트에서의 담당 페이지 : 도서의 상세페이지, 주문관련 페이지들📌 1. Figma 작성 (flow chart, ERD 작성)
작성한 Figma의 일부입니다. 이를 이용해 백엔드에서는 각 페이지 별 필요한 DB 내용을 알 수 있었고, 이를 기반으로 ERD를 만들어보았습니다.
📌 2. ESLint 에러
Figma를 작성한 후 개발을 시작했는데요, ESLint를 설정한 이후 Props를 사용하면 아래와 같은 에러가 발생했습니다.
에러 내용 : is missing in props validation react/prop-types
검색해보니 ESlint의 유효성 검사에서 props의 타입에 대한 내용이 누락 되어서 발생한 에러인것 같습니다!
저는 .eslintrc.js를 수정함으로써 해결했는데요, 아래의 이미지와 같이 'rules'에 'react/prop-types': 'off', 속성을 추가해주면 에러가 해결됩니다!
📌 3. 오늘의 느낀점
Figma를 작성하며 생각보다 오래걸려서 빨리 끝내고 개발하고 싶다는 생각이 들었었습니다. 하지만, 작성하고보니 Figma를 통해 페이지에 추가해야할 기능과 데이터, 페이지 간의 이동 관계가 한 눈에 보여서 개발할 때 많이 도움이 될 것 같습니다!
또, 팀프로젝트를 진행하며 프로젝트 세팅을 어제부터 진행했는데, 생각보다 오랜 시간이 걸린다는 것을 알게 되었고, 그만큼 앞으로의 프로젝트를 위해 중요한 과정이라는 것을 배울 수 있었습니다. 내일부터는 페이지 구현을 시작하는데, 배운 내용들을 활용하여 팀으로 진행하는 첫번째 프로젝트이다보니 많이 기대됩니다!
