지수의 블로그

3 분 소요

Course

Wanted Pre Onboarding FE Course

study

팀 프로젝트

오드컨셉 과제

간단한 서비스 소개

구현 과제 소개

상세 기능

사용 스택

React: 자유 스택이었지만 팀의 러닝커브 고려 선택 tailwind: commerce 관련 UI가 이미 있고, Card 컴포넌트를 깔끔한 형태로 빠르게 쓸 수 있었기 때문에 사용. styled-components 사용 시 컴포넌트 당 코드가 길어지고 한 눈에 어떤 스타일이 적용되었는지 알기 어려웠지만 className으로 적용된 스타일을 알 수 있어 편리했다.

배포

주제별 발표

캐시 사용 http header에 default 사용하면 캐시 가능

검색 키워드

검색 후 매칭되는 결과들에 대한 조건은 별도로 주어지지 않았기 때문에 이 부분을 먼저 고려해야 했습니다.

저희가 생각했던 조건은 먼저,

  1. 검색하면 먼저 이미지 url인지, 숫자인지, 키워드인지 판단해야 합니다.

url과 숫자, string 모두 검색할 수 있기 때문에 이를 각각 구분해서 필터링해주었습니다.

const checkNum = /^-?\d+$/;
const checkUrl = /^http[s]?\:\/\//i;

위와 같이 정규표현식을 사용해서 숫자인지, url인지 판단하였습니다.

그래서 조건문을 url일 경우, 숫자일 경우, 나머지 키워드일 경우를 나누어서 각각 조건에 맞게 필터링하여 필터링된 아이템 배열들을 setState 해주었습니다.

  1. 만약 키워드로 검색했을 시 그 키워드에 대해 매칭되는 category_names를 미리 만들어두고 그것을 사용했습니다.

예를 들어

{
	"드레스" : [ "dresses", "onepiece"]
	"dress" : [ "dresses", "onepiece"]
	"onepiece" : [ "dresses", "onepiece"]
	"원피스" : [ "dresses", "onepiece"]
}

category에는 dresses와 onepiece가 있습니다. 이는 주어진 데이터에 정해져 있는 값입니다.

그래서 이때 드레스라고 검색했을 때도, dress라고 검색했을 때에도 카테고리가 dresses와 onepiece인 아이템들을 추출해내고 싶은 것이기 때문에

json 파일을 따로 만들어 왼쪽에는 검색이 될 만한 키워드 : 오른쪽에 검색 키워드와 유사한 category들을 넣었습니다.

  1. url이나 숫자 검색 시 정확히 일치하는 아이템을 찾고, 그 아이템의 category와 유사한 product들을 오른쪽에 나열했습니다.

디테일 결과

또한, 이미지 url과 숫자로 입력했을 경우에만 왼쪽 detail을 보여주도록 함.

따라서 필터링해주는 함수에서 dataType을 지정해주었습니다.

dataType에 따라 detail display 여부를 결정해주었습니다.

케어닥 과제

간단한 서비스 소개

구현 과제 소개

이번에 저희는 케어닥 과제를 수행했습니다.

케어닥 과제는 케어닥 서비스 돌보미 신청하기의 기능을 간소화한 형태를 진행하는 것이었습니다.

시작화면에서 신청하기를 누르면 총 4단계로 이루어져 돌봄 유형, 날짜, 시간, 주소, 전화번호를 입력받아 종료화면에서 한꺼번에 데이터들을 보여주고 제출하여 종료하는 것입니다.

상세 기능

시작하기에는 신청하기 버튼만 존재합니다.

버튼을 누르면 단계가 시작이 되고

첫번쨰 돌봄 유형 선택에서는 24시간 상주와 시간제 돌봄 둘 중의 하나를 선택하여 다음 단계로 넘어가도록 합니다.

각 단게에서는 선택을 안했을 시에는 다음으로 넘어가지 않도록 합니다.

스케쥴에서는 날짜와 시간을 선택할 수 있습니다. 날짜는 달력을 디스플레이하여 시작일과 종료일을 선택하고, 돌봄 시작 시간에서 시작 시간을 선택하고, 하루 돌봄 시간에서 시간을 선택합니다.

이 때 돌봄 날짜가 오늘일 경우 시작 시간은 현재 시간에서 특정 시간이 지난 이후부터 선택이 가능하도록 합니다.

또한, 24시간 상주인 경우 하루 돌봄 시간을 선택하지 못하도록 합니다.

다음은 주소를 검색하여 상세주소까지 입력을 받고, 다음으로 넘어가도록 합니다.

마지막에는 신청 내역에 지금까지 선택했던 데이터들을 나타내고, 전화번호를 입력받아 종료합니다.

사용 스택

react : 자유 스택이었지만, 컴포넌트 단위 개발이 쉽고 팀원들이 바로 적용할 수 있는 스택인 React를 사용하여 개발하였습니다.

styled-components : css는 Figma에 스타일이 명시가 잘 되어 있고, 컴포넌트 단위 개발을 위해 styled-components를 사용하였습니다.

추가적으로 기능 명세 정리 및 컨벤션은 노션을 이용하였습니다.

배포

netlify 자동 배포

주제별 발표

State 관리 및 Routing

먼저 State 관리와 Routing입니다.

처음에 각 단계를 페이지로 생각했고 router와 useContext를 이용해서 구현했습니다.

각 단계가 넘어갈 때마다 Routing이 되도록 하고 페이지 마다의 state를 전역으로 관리하도록 설계했습니다.

하지만, 구현 도중 라우팅으로 처리를 한다면 사용자가 중간 단계에 들어 올 수 있게 되므로 useContext와 Router를 remove했습니다.

그러고 나서 하나의 부모 컴포넌트에서 (App.js) 단계마다 맞는 layout을 보여주도록 변경, state 또한 App에서 한꺼번에 관리했습니다.

또한 이를 이용해서 이전으로 돌아가도 state에 있는 값을 이용해서 로컬 state의 초기값으로 설정하여 이전에 선택했던 값이 기억되도록 구현했습니다.

Layout 통일

그 다음 설계 후 공통으로 사용 가능한 Layout을 생성했습니다.

Header와 Bottom buttons, 돌봄 title과 step을 나타내주는 부분이 단계들이 모두 동일했기 때문에 Layout을 컴포넌트로 제작하여 children을 받아 유형 선택, 스케쥴 선택 등을 넣으면 되도록 구성하여 통일성을 높이고 효율성 높였습니다.

UX 향상

  • Alert 창 추가

    각 단계마다 선택이 되지 않았을 경우 즉, state가 set이 되어 있지 않을 경우 Alert창을 띄워 UX를 향상

  • Toast message 추가 달력은 따로따로 input 을 생성하여 날짜를 선택하도록 하는 것이 아닌 div로 마크업. div를 클릭했을 때 달력을 가진 모달을 띄우도록 함. 따라서 시작일 혹은 종료일을 클릭하더라도 모두 같은 곳으로 이동. 그렇기 때문에 시작일을 선택하고 나가고, 종료일을 선택하고 나가는 경우 동작하지 않음. 따라서 모달이 떴을 때 시작일과 종료일을 모두 한꺼번에 선택할 수 있도록 Toast message를 추가하여 UX를 향상.

회고 (TIL)

2022.03.04 Daily 회고

✏오늘 한 일

  • 팀 과제 수행
  • 팀 과제 제출
  • 팀 과제 발표 준비 및 발표

⁉느낀 점

과제에 대해서 부분적으로만 알고 지식도 얇다 보니 질문도 제대로 답 못하고 너무 속상하다. 문제에 대해서 파악하고 딥 다이브하는 습관을 들여야 할 것 같다.

다른 조 분들도 너무 잘 하신다. 이럴 때 배우지 언제 배울까 생각든다.

오늘 다른 분들 블로그 보고 충격. 나는 쓰고 있던 것도 아닌.. 오늘 과제 중 어려운 부분 다시 보면서 블로그 잘 정리해야겠다.

🎃현재 나의 상태

한 건 많이 없지만 그래도 발표는 힘들어서 좀 지친다. 주말에 보상심리가 나를 덮치지 않기를 바라는

일어나.. 면접 대비 공부해야지..

댓글남기기

참고