본문 바로가기
Pre학습 기록

Pre 기획

2분학습 기록티스토리에서 옮긴 글

제로베이스 프론트엔드 스쿨 10기 수강생 엄성준입니다. 처음으로 대학교 캡스톤 프로젝트를 제외한 첫 번째 프로젝트를 진행하게 되었습니다.

먼저 저희 팀원은 백엔드 개발자 4명, 프론트 엔드 개발자 2명으로 구성되었습니다.

기획 배경은 코로나 방역이 완화되고 날씨가 따듯해지는 지금 여행을 떠나고 싶으신 분들에게 도움을 줄 수 있는 커뮤니티 웹 사이트입니다.

먼저 와이어프레임을 통해서 팀원들과 어떤 페이지들로 구성할지 정했습니다. ()=> 요소는 정확하게 결정되지 않은 요소

  • 로그인, 회원가입(카카오), (아이디 찾기), (비밀번호 찾기)

  • 전체 리스트 페이지 - 메인

  • 카테고리별 페이지

  • 글 상세 페이지

  • 마이 페이지(작성한 글(수정, 삭제), 추천한 글)

프론트엔드 팀원과 상의를 통해서 구현할 기능에 대해서 미리 생각해 보았습니다.

  • 무한스크롤, 반응형 웹, 검색바 필터, 카테고리 필터, 캐러셀 기능, 댓글 팝업, 공유하기(카카오), light/dark모드 지원

  • 검색바 옆에 제목, 내용을 통해서 1차 필터링을 하고 입력된 값을 통해서 2차 필터링

또한 멘토님들께 질문 리스트 또한 작성해 보았습니다.

  • 메인페이지에서 무한스크롤을 통해서 데이터를 갱신할지 pagenation을 통해서 갱신할지

  • CRA를 추천하시는지 VITE를 추천하시는지

  • typescript를 이용하는 게 좋을지

  • styled-components보다 더 간편한 css library를 추천하시는 게 있는지

기술 스택

  • React, typescript, redux, react-router-dom, styled-components

디자인 벤치마킹 사이트 : https://www.airbnb.co.kr/

메인페이지 구상
그림 1. 메인페이지 구상

프로젝트를 앞둔 마음가짐

  • 제대로 된 협업 프로젝트는 처음이라 걱정도 되지만 여러 사람들이 협업을 통해서 효율적으로 맡은 일을 하면 얼마나 빠른 시간에 좋은 결과물을 얻을 수 있을지 기대가 큽니다. 또한 전역 상태관리툴 Redux사용이 완벽하지 않은데 이번 기회를 통해 완벽하게 마스터 한 뒤 다음 프로젝트에서는 Recoil을 이용해 보고 싶습니다.
  • #3월 협업 프로젝트 4조
  • #제로베이스 프론트엔드 스쿨

학습 기록의 다른 글