개인 역할 위주로 작성하였습니다.

2022. 05. 26.

파트 분배 및 개인 역할 분담

• 회원 관리 페이지(3명)와 회원 상세 페이지(4명)로 파트를 분배했습니다.
• 회원 관리 페이지를 맡았으며, 그 중에서도 검색 결과 목록 컴포넌트 개발을 맡게 되었습니다.

개발 계획 수립

• 5월 30일부터 7일에 걸쳐 개발하되, 첫 4일간 집중적으로 개발하고 이후 3일 동안 보완할 것이 있으면 수정하는 기간을 두기로 했습니다.

2022. 05. 30.

로컬 DB 구현

• 주어진 JSON 파일의 데이터를 로컬에 어떤 형태로 저장할지에 대한 고민이 있었습니다.
• IndexedDB 구현을 맡아 아래와 같이 유틸리티 함수를 작성했습니다.
  • 앱 내에서 getData 함수 하나로 데이터 접근이 가능하도록 했습니다. getData 함수의 인자로 options를 지정하는데, 이 options는 store type(heartrate 혹은 step)과 필요한 값에 대한 쿼리로 이루어집니다.
  • 만약 접근할 store가 존재하지 않으면, initDB를 호출하여 DB를 생성합니다. JSON 데이터의 key에 맞추어 index를 생성했고, 값을 저장했습니다.
  • 쿼리 구성: Query 타입은 from, to, exact key를 가지며 모두 optional입니다. exact으로 검색하면 정확히 일치하는 값을, from과 to로 검색하면 범위(IDBKeyRange 활용)로 검색하도록 했습니다. 또한 배열 형태로 여러 index를 지정하여 한 번에 조건에 맞는 데이터를 얻을 수 있도록 했습니다.
• 하지만 인터넷 익스플로러(IE)도 지원해야 한다는 조건에 맞추기 위해 indexedDB를 포기하기로 했습니다. indexedDB를 도입하고자 한 가장 큰 이유가 여러 key를 한 번에 검색하는 기능 때문이었는데, 이를 IE에서는 지원하지 않는다는 것을 뒤늦게 확인했기 때문입니다.

2022. 05. 31.

검색 결과 컴포넌트(SearchResult) 구현

• 상태 관리

  • 전체 회원 목록, 검색 결과 목록을 나타내는 Recoil atom을 각각 정의했습니다.
  • 이를 위해 UserInfo 타입을 정의했습니다. UserInfo는 세 개의 키(id, loginId, registerDate)를 가집니다.

• 테이블 형태

  

  • 처음에는 <table> 태그로 검색 목록을 구현하고자 했습니다. 확정된 레이아웃에 맞춰 하나의 흰색 카드 위에 하나의 표에 데이터를 표현했습니다.
  • 첫 구현은 간단했지만, 스타일링에 제약이 있었습니다. 우선 하나의 후보로 남기고 다른 시도를 해 보기로 했습니다.

• 리스트 형태

  

  • <ul> 태그에 개별 항목을 담은 카드를 나열했습니다.
  • 헤더는 별도의 컴포넌트(Header)로 구현했습니다. 각각의 헤더에 의미를 부여하기 위해 dataset에 key라는 항목을 저장했습니다.