[팀프로젝트] 리액트로 뉴스피드 웹사이트 제작하기 - 사전기획

 

리액트로 첫 팀프로젝트가 시작됐다. 뭔가 프로젝트다운 프로젝트를 하는 것 같다. 인스타그램이나 페이스북,  블로그 같이 게시글을 쓰고 읽고 수정하고 삭제할 수 있는 뉴스피드 웹사이트를 구현하는 프로젝트이다. 그리고 처음으로 서버를 사용해서 작업한다!! supabase를 사용하는데 프론트엔드 애플리케이션에 백엔드 서비스를 제공하기 위해 사용하는 모델이다. 

 

 

 

 

 

 

와이어프레임

전직 웹 퍼블리셔 + 디자인을 했었던 터라 디자인은 모두 내가 맡아서 진행했다. 어떤 뉴스피드를 할까 의견이 많이 나왔는데 1. 크림같은 중고거래 웹사이트, 2. 코디한 옷 공유하는 사이트, 3. 아이스크림 후기 공유하는 사이트 세가지가 나왔다. 우리 팀명이 구구콘이라 3번으로 탕탕탕ㅋㅋㅋㅋ 아이스크림 후기를 공유? 뭔가 생소할 수 있지만 정해진 주제이니 완전 열심히 해보았다. 디자인은 아이스크림 공유하는 사이트 답게 뭔가 파스텔 톤의 귀여운 디자인으로 뽑아봤다.

 

차례대로 헤더 -> 배너 -> 게시물 -> 푸터 순이고 우리 팀의 핵심 기능은 카테고리 별 필터링 하는 기능이다. 카테고리는 브랜드별, 맛별, 종류별로 나뉘어진다. 인기 게시물과 최근 게시물 모두 카테고리 별로 확인이 가능하다.

 

 

 

 

 

사전 기획

우리는 맛있는 아이스크림을 추천하는 게시물을 작성하고 다른 사람들의 후기를 통해 아이스크림 정보를 탐색하고 나의 아이스크림 취향을 모으는 마이페이지를 주제로 정하고 구현하기로 했다. 프로젝트 시작 전 와이어프레임 제작과 함께 사전 기획을 했다. 어떤 페이지에 어떤 컴포넌트와 기능이 필요한지. 데이터 형식은 어떤식으로 넣는게 좋을지 의논하여 정하였다. 

 

 

 

 

 

 

 

역할 분담

 

내가 맡은 역할은 마이페이지. 로그인 회원 정보를 가지고 와서 데이터를 뿌려주고 회원정보를 수정한다. 수정하는 데이터는 닉네임과 프로필 이미지이다. 더해서 전체적인 웹페이지의 반응형을 구현하기로 했다.

 

 

 

 

 

 

기술적 의사결정

아래와 같이 어떤 라이브러리를 사용할껀지 팀원들과 사전에 협의하고 진행했다.

 

 

 

 

 

 

 

개발 프로세스