[Main-Project] Day 3 - Figma, 개발 환경 정하기 , component 정하기, 소통

fejigu·2022년 11월 10일
1
post-thumbnail

📗 Pre-Project, Day 3

  • Figma userflow와 백엔드 데이터 빌딩 고려하여 수정하기
  • Figma 구체화하여 작업(modal, page, input, button)
  • 메인 로고 컬러, font 결정
  • component 결정하고 css 결정
  • 개발 환경 정하기



📗 개발 환경 정하기

→ 프론트엔드끼리 모여 개발 환경을 정하였다. 각자가 생각하는 프로젝트의 목적과 사용하고자하는 기술들이 달라 조율하는 과정이 필요하였지만, 최종적으로는 아래와 같다. redux toolkit지도 API를 잘 사용하는 것이 중요할 것 같다!

특히나 우리의 서비스의 경우, 유저의 현재 위치를 기준으로 서적으로 보여줘야하기에 우리에게 맞는지도 API를 찾아보는 것에 시간을 투자했다.

🛠 Tools

  • UI Library
    ✅ create-react-app
    ✅ react-router-dom
    ✅ TypeScript

  • CSS
    ✅ styled-component
    ✅ react-icons

  • 상태관리
    ✅ redux-toolkit
    ✅ react-query → map API와 비동기처리를 하기 위해서 + 무한스크롤 지원 + 프리로딩

  • APIs
    ✅ Axios
    ✅ Map:kakao-map
    ✅ Calender: react-calender

  • Dev tool
    ✅ eslint
    ✅ prettier

  • Build
    ✅ webpack

  • CI/CD
    ✅ Github-actions

  • Deployment
    ✅ AWS



📗 Figma 수정 및 구체화

전체 회의를 한 후, userflow백엔드 데이터 빌딩 고려하여 Figma를 수정하였다.

프론트 측에서는 단순히 페이지가 추가하면 된다고 생각했던 부분이 데이터 빌딩에 있어서는 간단하지 않다는 것을 팀원 모두 회의 과정에서 알게 되었다. 프론트엔드 백엔드가 소통하며 우리가 구현하고자하는 기능에 대해 맞춰나가는 것도 생각보다 오랜 시간이 걸리고 힘들었지만, 협업 경험을 할 수 있어 좋았다.

전체 회의를 통해 수정된 사항들.

  • 홈화면의 리스트는 최신순을 기준으로 정렬하기
  • 검색창 검색은 책 제목만으로
  • 유저의 위치는 마이페이지에서 등록 및 수정
  • 찜하기 기능 확정
  • 대여료, 보증금, 수수료 -> 값 하나로 처리하기, 대여료의 개념만 남기기
  • 알림은 알림페이지에 쌓이는 값으로
  • 예약 캘린더 - 대여기간 10일을 디폴트 값으로 설정, 캘린더는 UI의 목적으로
  • 유저가 등록할 수 있는 위치값은 하나로만 설정 가능
  • 대여 로직(대여하기와 예약하기 2가지 로직)



📗 component 정하기

어느정도 피그마가 확정되어, 코드 작성에 들어가기 전에 componet로 지정할 요소들을 따로 정리하고, css까지 확정하였다.

componet를 정해두고 것이 팀원들과 협업할 때도 편하고, 깔끔하고 간결한 코드 작성에 도움이 될 것 같다.




📗 메인 컬러 및 폰트 확정


우리 서비스의 메인 컬러폰트까지 모두 확정되었다.

이렇게 되어 거의 모든 css가 확정되고 있는데 피그마 단계에서 확실하게 정하고 문서화 두는 것이 귀찮을 수도 있지만, 추후에 코드 작성에 들어갔을 때 팀원들끼리 따로 모여 이야기하는 시간도 줄이고 개발에 집중할 수 있다는 것이 우리 팀원들의 생각이다.



🖌 회고 - 소통 능력이 중요하다

→ 점점 프로젝트의 틀이 잡히고, 서비스가 시각화 및 구체화가 되고 있다.

이 과정에서 개발자에게 중요한 역량 중 하나는 소통 능력협업 능력이라는 것을 느꼈다. 우리는 계속 해서 협업을 할 것이기에 단순히 코드만 잘 작성하면 되는 것이 아니다.

그리고 왜 프론트엔드에서 백엔드에 대한 기본적인 이해가 있어야하는 지도 느꼈다. 백엔드에 대한 이해가 전혀 없다면 우리가 만들고자 하는 서비스를 구현하는 데 백엔드와 소통이 필요한데, 이 부분이 되지 않는 것이다.


차일 진행할 사항

  • 피그마 완성 + API 작업(백엔드)
  • 멘토링 질의 리스트
  • 구현해야할 기능들 리스트화 -> R&R
  • 개발환경셋업(초기 파일, 데브툴(린터 등), 디렉토리 구성 세팅)
profile
console.log(frontendjigu( ☕️, 📱); // true

0개의 댓글