Project#1 | 4bsop 회고 | feat.검색기능, Total Price

 

시작할 때 아직 준비되있지 않다는 생각에 두려움이 컸지만 내가 오히려 배워가는 부분들이 많았던 포비솝 프로젝트다.
처음으로 팀 프로젝트 해봤는데 이번 경험을 바탕으로 앞으로도 프로젝트에 적극적으로 참여해야겠다.
 
우리 팀은 git branch에서 의미를 가져와 4개의 branch가 함께한다는 뜻으로 4branch라 팀명을 정했다.

 

4bsop 뷰티 브랜드 웹서비스

Aesop 온라인 사이트를 모티브

 

기간 & 4branch 멤버

• 2023.04.03 ~ 2023.04.14 (2주)
• 김영운(FE), 박지연(FE), 장다희(BE, Project Manager), 왕광현(BE, Product Manager)

 

프로젝트 선정 이유

• Aesop은 배경이 없는 상품 이미지를 활용하여 마치 제품을 오프라인에서 쇼핑하고 있는 듯한 경험을 제공한다.
• 사용자에게 브랜드 경험을 제공하는 부분들을 벤치하며, 쇼핑에 필수적인 기능들을 중점으로 구현해보고 싶어 선택

 

사용한 기술

우리가 클론한 Aesop 웹사이트는 로딩이 길고, 로그인할 때도 기다리는 시간이 많아 불편하게 느껴졌었는데, 
이번 프로젝트에서 빠르게 화면을 렌더링 해줄 수 있는 기술들을 사용하여 작업하여 우리가 연습했던 기술들의 빠른 속도를 경험할 수 있었다.

• SPA(Single Page Application) 방식으로 프로젝트를 작업했는데, 여러 web page 를 하나의 Html 에 담기 때문에 화면 UI 가 빠르게 렌더링 된다. 
• React는 화면 변화를 가상으로 계산하고 실제 DOM으로 결과를 전달하여 웹브라우저에서의 연산 양을 줄여주어 효율적이고 생산적인 작업이 가능하다. JSX문법을 사용해 컴포넌트 단위로 쪼개어 파일을 구성할 수 있어 재사용이 가능하다.
• SCSS는 기존 CSS에서 더 가독성과 재활용성을 높여주는 전처리기 언어로 페이지작업이 많을 경우 효율적이다.

 

 

내가 구현한 주요 기능

• 제품 검색
• 제품 상세페이지
• 주문 내역

 
이 중에 제품검색과 주문내역에서 다시 되짚어보고 싶은 코드들이 있어 정리해보았다.
 

❶ 검색

 

구현했던 페이지 중에 비교적 시간을 많이 쏟은 검색

 

검색에서는 총 2개의 풀어야 할 과제가 있었는데

1. 검색 화면 진입 시, default 로 검색리스트가 노출되지 않게 하자

2. 검색리스트를 호버하면 측면에 해당하는 상품의 이미지와 상품 상세로 이어지는 버튼이 나오게 하자

 

먼저 검색리스트가 default로 출력된다는 문제가 있었다.
 

const [searchKeyword, setSearchKeyword] = useState('');

function itemSearch(e) {
  setSearchKeyword(e.target.value);
}

<input value={searchKeyword} onChange={itemSearch}/>

<SearchList/>

 
input 의 value는 searchKeyword,
검색한 결과값 리스트는 <SearchList/>로 컴포넌트로 묶어줬다.

이런저런 방법을 시도해봤지만 존재감이 확연,,😱
처음에 조건문을 써야할 거 같긴한데.. 하다가

SearchList컴퍼넌트가 searchKeyword의 길이가 0보다 클 때 나타날 수 있도록 &&연산자를 썼다.
그랬더니 처음에 검색어가 안 나오는 상태에서 input에 검색어를 입력할 때마다 상품이름 리스트가 뜨는 형태를 마주할 수 있었다!
 

{searchKeyword.length >0 && <SearchList/>}

 
이제 2번 문제로 넘어가보면,
검색리스트의 검색어들을 호버할 때마다 해당하는 상품 이미지와 버튼을 출력하는 거였는데
호버하면 상품이지와 버튼이 뜨긴 하지만 다른 검색어를 호버하면 상품이미지와 버튼이 사라지지 않고 그 위에 계속 누적되는 문제가 있었다.

 

불로그글 쓸 때를 위해서 에러 화면을 미리미리 찍어놔야겠다는 생각이..
 
 

    <div className="searchList">
      {searchList.length ? (
        searchList.map(item => {
          return (<SearchItem className="searchItem" key={item.id} item={item} />)})) 
          : (<p className="noResult">검색결과가 없습니다.</p>)}
    </div>
  );
}

 
먼저 <SearchList />를 map 돌려 검색어 하나가 <SearchItem /> 컴포넌트가 된다.
 

function SearchItem({ item }) {
  const [isHover, setIsHover] = useState(false);
  
  return (
    <div className="searchItem" onMouseEnter={()=>{setIsHover(true)}}>
      <div id={item.id}>
        {isHover && <HoverItemView item={item}}
        {item.name} //상품검색어 리스트의 하나의 상품이름
      </div>
    </div>
  );
}

 
item을 props로 받은 <SearchItem />에서 
각각의 item 의 이름을 호버하면, 해당하는 상품이미지와 버튼이 있는 <HoverItemView /> 컴포넌트가 나타나게 해주었다.
 

function HoverItemView({ item, showProduct }) {
  const { name, url } = item;

  return (
    <div className="hoverItemView">
      <img />
      <button />
    </div>
  );
}

 
<SearchList />안에 <SearchItem />,
<SearchItem /> 안에  <HoverItemView />컴포넌트가 있다.
 
여기서 먼저 
onMouseRemove 이벤트를 써서 누적되지 않고 상품이미지와 버튼이 하나씩만 출력되도록 할 수 있었다.
 

<div className="searchItem" onMouseEnter={()=>{setIsHover(true)}} onMouseLeave={() => {setIsHover(true)}}>//onMouseLeave이벤트 추가

 
근데 그렇게 하니까 또 문제가 발생했다ㅠ
상품 이미지와 버튼쪽으로 마우스를 옮겨가면 사라진다는 거였다.
HoverItemView 컴포넌트의 영역을 검색결과 상품이름이 뜨는 곳까지 차지하게 해보고 이상하게 뒤엉켜버린 코드와 화면을 마주하다가
onMouseEnter이벤트를 호버한 상품이미지와 버튼이 있는 곳에도 걸어주어 해당 이미지에 가도 호버한 상태가 되게끔 해줄 수 있었다.
 

<div onMouseEnter={()=>{setIsHover(true)}} onClick={moveItemPage}>
  <img />
  <button />
</div>

 
 
 

❷ 주문내역서

주문 내역서에서는  주문한 유저의 데이터를 받아 내용을 출력하는 거였다. 

여기서 JSON파일로 되면서 스트링으로 되어 들어온 배열/객체를 원래의 배열/객체로 형변환 해줘야 하는 문제 하나,
(랩탑의 문제였던 거 같은데, 나중엔 백엔드 분들이 고쳐서 스트링없는 배열 형태로 들어옴  )
배열 안에 들어있는 각 주문 상품 목록의 가격과 수량을 계산해서 합계를 출력해야 하는 문제가 있었다.

 
백엔드에서 들어올 데이터의 형태이다.

"orderInfo": {
	"orderItems": "[{\"size\": null, \"price\": null, \"quantity\": null, \"productName\": null}]",
}

 
아이템의 가격과 수량은 orderInfo 객체 안에 oderItems 배열 안에 각각의 상품을 나타내는 객체의 price와 quantity 로 되어 있다.
데이터를 가져오는 과정에서 useEffect를 사용하여 데이터를 패치하고 있었기 때문에 계속해서 빈 객체로 뜨는 문제가 있었다. 
나는 이럴 때마다 값이 안 나오니까 맵핑을 돌렸던 거 같다… 그러면 일단 뜨기라도 하는데 이건 임시방편일뿐이라고 함…🫠

그러다가 팀원에게 얻은 꿀팁이 있는데 optional chaining
'?' 앞에 있는 요소가 undefined/ null 이면 일단 오류가 아닌 undefined를 반환해준다. 
렌더링이 끝나고 난 후 orderInfo 데이터가 있을 때는 '?' 뒤에 있는 대상을 실행한다.
&&연산자와 비슷한데 더 쉽게 쓸 수 있게 해주는 거 같다.
 

orderinfo?.orderItems

 
저렇게 가져온 orderItems 가 스트링으로 묶여 있어 객체형태로 다시 형변환하는 작업이 필요하다.
orderItems를 orderItemString 이라는 변수에 저장하고 JSON.parse() 를 써서 형변환을 시켰다. 
그리고 orderItemsArray라는 빈 객체를 만들어서 형변환시킨 orderItems 배열을 나열시킨다.
 

let orderItemsArray = [];
const orderItemsString = orderInfo?.orderItems;

if (orderItemsString) {
  [...orderItemsArray] = JSON.parse(orderItemsString);
}

 
 
여기서 이제 계산을 해야 한다.
상품 목록에 따라 가격과 구매하는 수량이 다르기 때문에 여러 객체에서 각각의 price와 quantity를 곱하고,
곱한 값을 모아 더해주어야 한다.
처음에 총 합계 구하는 방법으로 map 을 생각했는데 total을 구하는데 최적화되어 있는 함수가 있었다.
.reduce() 인데, 배열의 각 요소에서 계산하여 누적된 값 하나를 출력할 수 있다.
 

배열.reduce(누적값, 현재값) => {return 결과}, 초기값);

 
이걸 내가 작업하고 있는 총합을 구하려면 아래와 같이 써야 했다.
 

let totalAmount = [];

totalAmount = orderItemsArray.reduce(
  (accumulator, currentValue) =>
    accumulator + currentValue.price * currentValue.quantity,
  0
);

 
초기값을 먼저 0원으로 설정하고, accumulator라는 누적값에  현재 계산할 값을 더한다.
여기서 도출된 결과값 배열은 totalAmount 라는 변수에 저장한다. 
 
그리고 여기서 totalAmount가 '000.00'의 소수점 형태로 되있기 때문에
정수로 바꾸고 앞에 '₩'을 붙이고 toLocaleString() 함수를 사용하여 알맞은 금액 형태의 문자열로 반환해준다.
그럼 성공
 

 {`₩ ${Math.floor(totalAmount).toLocaleString()}`}

 
일단 내가 했던 기능들에 대해선 익숙해졌는데 써보지 못한 기능들이 있어서
다음 프로젝트를 위해서도 내가 해보지 않았던 페이지에 대해서도 연습해봐야겠다는 생각이 들었다.
 
 
 
아래에 프로젝트 하면서 느낀 점을 좋았던 점 , 아쉬운 점, 다음에 시도해보고 싶은 부분 3가지로 나누어보았다.
 
 

좋았던 점

• 아침마다 stand-up meeting으로 30분 정도 짧게 어제 한 일, 오늘 할 일을 회의한 것
• 1주차 sprint 회고하며 프로젝트가 어느 정도 진행됐는지 다시 한 번 리마인드함. (trello가 도움이 많이 되었다.)
• 백엔드와 통신하면서 백엔드에서 만든 데이터가 만든 화면에 들어와지는 것을 눈으로 확인할 수 있음.
• 동적라우팅을 사용하여 여러 상품들을 화면에 구현할  수 있었던 점.
• 로고와 상품을 제작하면서 우리만의 상품과 서비스를 만들 수 있었던 점.
• 라이브러리를 최대한 사용하지 않고 이렇게 만들어낼 수 있구나를 깨달을 수 있었던 점.
• 통신이 필요한 페이지는 화면 구현이 될 때마다 통신을 계속 시도했던 점

 

아쉬운 점

• 백엔드 팀원과 소통의 부재

검색페이지에서 백엔드가 작업한 검색 API가 있는지 모르고, 전체 상품 API를 패치하고 있었다.
백엔드가 준비해두는 데이터에 대해 잘 파악하자
 

• 처음에는 빨리 해야한다는 급한 마음에 역할 분담이 제대로 안 되어서 진행되었던 점.

역할 분담이 잘 안 되어 있어서 다른 팀원분에게 작업할 부분들이 몰려 있었다.
처음부터 각자 맡아서 할 페이지를 정해서 해야겠다는 생각이 들었다.
 

•  구현 과정을 미리미리 찍어놓지 못한 점

블로그에 내가 마주했던 상황을 쓰려고 하니까 에러와 해결에 대해 말로만 설명하기보다 더 쉽게 이해할 수 있도록 보여줄 수 있는 중거물이 있어야겠다.

시도해보고 싶은 점

• 장바구니 기능이나 필터 기능을 시도해보지 못해서 다음 프로젝트에서는 어렵더라도 도전해보고 싶다.
• 동적라우팅과 fetch 에 대한 이해가 아직 부족하여 공부를 더 해봐야겠다.

 

마무리

같이 팀프로젝트하면서 서로 주고 받는 데이터 통신이 다른 무엇보다 중요하다는 것을 느꼈다.
우리 팀이 잘했던 건 API가 있는 화면이 다 만들어지고 나면 통신을 서로 그 때 그 때 해보았다는 거다. 그래서 나중에 화면을 다 하나로 모아 처음부터 끝까지 잘 통신되는지 확인해봤을 때 대체로 순조로웠다. 
같이 작업하면서 더 필요한 게 없는지 수시로 물어봐주었던 다희 프매님,
중간중간 우리가 프로젝트를 진행하면서 개선점을 얘기해주고 세세하게 PT했던 광현 프매님,
화면 구현이나 통신에 있어서 헤매고 있을 때 방법을 찾아쥬는 프론트엔드 리더인 영운님이
캐리 해줘서 프로젝트 결과물을 만들어 낼 수 있었다.
다음 프로젝트도 화이팅~