First Team Project

코드스테이츠 SW engineer 20주과정, 설레는 마음으로 반복문을 배우던게 엇그제 같은데 벌써 첫번째 팀 프로젝트를 마쳤습니다. 처음으로 하나하나 밑바닥부터 무언가를 내손으로 만든다는 기대와 함께 과연 내가 팀원으로써 제몫을 해낼 수 있을까하는 걱정들로 시작한 프로젝트, 중간중간 버벅거리고 헤메는 부분도 있었지만 든든한 팀원들과 으쌰으쌰해서 만든 결과물을 보니 꾀나 뿌듯했습니다!

                                  by team CAPYBARA

ABOUT

MOVIE-BARA는 영화 리뷰 블로그 입니다.
내가 재미있게 본 영화에 대한 감상을 기록하고 다른 사람들과 공유할 수 있습니다. 
다른 사람이 쓴리뷰 중 마음에 드는 글이 있다면 내 공간에 담아둘 수도 있습니다.

project bare minimum

+ 제목으로 영화정보 검색
+ CRUD: 리뷰 작성 / 수정 / 삭제,  리뷰 스크랩 / 스크랩취소, 회원정보 수정
+ 회원가입, 로그인, 로그아웃, 소셜로그인, 비회원로그인




           

배포된 웹페이지 작동모습

Build with

협업을 위해서는 GIT을 이용하였습니다.

저는 이번 프로젝트에서 프론트엔드를 맡아
React hooks 를 사용하여 동적 웹페이지를 만들어보았습니다.

• 헤더 컴포넌트
• 메인 페이지
• 특정 영화에 대한 리뷰목록 페이지
• 검색 결과 컴포넌트
• 리뷰 작성 페이지
• 리뷰 수정 페이지
• 유저 홈 페이지 (내가쓴 글/ 스크랩 목록을 따로 볼 수 있다) 구현

프로젝트를 통해 좀 더 공부하게 된 내용은
사이드이펙트 관리(useEffect), api요청시 비동기 처리, 화면 라우팅 이었습니다.

react-dom-router패키지 사용에 익숙하지 않아 눈에 익히는 시간이 좀 필요했지만 useRouteMatch, useHistory, useParams등의 hook들을 유용하게 사용하여 라우팅에 따라 하나의 컴포넌트 안의 일부분에서만 다른 컴포넌트를 렌더하는 구조를 구현할 수 있었습니다.

와이어 프레임 , 컴포넌트/라우팅 설계

크게 보기

프로젝트 회고와 팀원들의 피드백

추후에 보충하고 싶은 점

첫 프로젝트에 임하는 팀원들과 저의 욕심에 비해 기획과 화면 디자인시간을 포함한 2주는 결코 충분한 시간이 아니었고,
시간내 완성을 위해 몇가지 기능구현을 포기했습니다. 
이후에 프로젝트를 좀더 보강하기로했는데 다음과 같은 기능들을 추가해볼까합니다.

+ 프로필 아이콘을 통해 다른 유저 홈 페이지 방문하기( 다른 유저가 쓴 리뷰와 스크랩한 리뷰를 볼 수 있다)
    --> 이미 만들어진 컴포넌트들을 재사용해서 구현 가능

+ 유저 홈페이지에서 영화 장르로 유저가 쓴 리뷰 필터링
    -->리뷰가 렌더되는 컴포넌트에 'filtered posts' state를 추가
+ 영화 평점
+ 리뷰 평점

다음 프로젝트에서는..?

컴포넌트 구조를 짜면서 하나의 컴포넌트를 재사용하기도 했지만 여러개의 컴포넌트에서 동일한 스테이트가 반복되는 경우도 있었습니다. 다음 4주 프로젝트에서는 Redux를 사용하여 좀더 효율적인 상태관리에 도전해보고자 합니다.

프로젝트 기획에(와이어프레임, api doc에 대해 팀원들과 구체적으로 의논하고 작성하기!)좀더 시간을 투자하여 이후에 세부적인 코드를 작성할때 낭비되는 시간을 줄여보고자 합니다.

UX디자인을 좀 더 고려하여 매력적인 웹페이지를 만들어보고 싶습니다.