Last Project 회고록

두번째 프로젝트 홈 카페 큐레이션 서비스

Picaff [Pick your Coffee]

1. 간단하게 시작할 수 있는 홈 카페의 시작

2. 간단한 성향 테스트

3. 성향 맞춤 원두 및 커피 용품 추천

4. 결과의 세부설명(시장 가격, 특성, 이미지, 태그 등)

Role & Stack

• 역할 : Front-end
• 작업 :
  • 유저 상태 관리, Sign-up, Sign-in, Sign-off, logout 등
  • 성향 테스트 진행 페이지
  • 아이템 페이지
  • 결과 페이지
  • 메인 페에지
  • 전반 적인 로직 전반
• Stack : React, React-hooks, Styled-components

프로젝트 주안점

가장 중요하게 생각한 것 : 모듈화, Flow의 자연스러움, 반응형

1. 모듈화 : 컴포넌트 파일의 이해를 돕기 위하여 파일의 모듈화를 진행하여

로직과 뷰단의 파일 디렉토리에서 구분을 하기 위하여 노력하였다

2. Flow의 자연스러움 : 에니메이션과 트렌지션을 이용하여 뷰의 흐름이 끊김없이

이어질 수 있도록 작성하였습니다.

3. 반응형 : 사용자가 모바일에서나 PC에서 성향 테스트나 결과 페이지를 확인할 때, 문제가 없는 것이 중요한 서비스라고 판단되어 모든 뷰에 반응형 적용

구현에 대한 자세한 내용

1. Redux없이 Context로만 유저 상태 관리하기

이 부분은 여기서만 다루기에는 양이 꽤나 될 것임으로 주요 컨텐츠로 따로 작성하겠지만 간단히 적어보겠다.

우선 Redux와 Context의 가장 큰 차이는 State를 업데이트하는 방법에 있고, 공통점은 전역에 상태를 내려줄 수 있는 것입니다.

자세한 내용은 컨텐츠(링크)에서 확인

2. MVVM 모델을 이용한 코드 구현

Container, Component, Module, Instance로 디렉토리 구조화

• View(Component) : 파일로 작성되야하는 부분

• View Model(Container) : 로직의 흐름을 위해 반드시 필요한 State, Props를 집적 다루는 로직을 작성

• Model(Module) : 모듈파일에서 은닉화할 메소드를 작성

• Style(Common Style) : 공통스타일 등을 작성하여 코드의 반복성 제거

• Interface(Type) : Typescript에서 공통으로 다뤄질 상태들의 타입과 인스턴스 정의

3. 사용자를 생각한 디자인

전체 페이지 반응형 구현

페이지 변경, 버튼 클릭, 스크롤 등에 UX를 고려한 에니메이션 트렌지션 효과 추가

styled-components를 이용한 함수형 스타일 적용

아쉬운 내용

1. 컴포넌트의 구분

컴포넌트로 작성될 부분과 컨테이너로 작성될 부분을 세세하게 구분한다고 하였지만, 팀원과의 공유가 미흡하였는지 부분부분적으로 컴포넌트로 작성되야할 부분들이 컨테이너에 포함되어 있는 부분들이 있어서 완벽하게 하지 못한 느낌이 들어 아쉽다.