Practice) React Shop 회고

 

// 최종수정 23.04.22

페이지 바로가기 : https://zb-react-shop-ne5x.vercel.app
 

# 회고

처음 프로젝트를 마주했을 때, '이틀이면 되겠네'라는 말도 안 되는 생각을 했다. 
신입은 자신이 예상한 시간의 딱 3배가 걸린다던데 거의 그 정도 걸렸다.
(여유롭게 주말에 미술관에 다녀왔는데... ^^)
어제(마감일) 과제를 제출하고 오늘 다시 동영상 녹화를 위해 페이지를 열어 보니 몇몇 에러가 있어 추가로 수정했다. 
역시, 마음이 급하면 에러가 잘 안 보인다.
 
이번 과제는 React 와 Typescript를 사용한 첫 프로젝트였다. 
강의를 들으며 typescript을 사용해 클론코딩을 하며 열심히 익혀 보려 했지만, 쉽지 않았다. 
과제를 끝낸 지금도 부족함을 많이 느낀다. 
부족한건 채우면 되니, 열심히 배우자. 

 
 

## 기술적인 문제점 1 - css

styled component를 겉핥기식으로 배운 채로 프로젝트에서 사용하니 정말... 너무 난감했다. 
조건에 따라 스타일을 어떻게 핸들링해야 할지 몰랐다.
열심히 구글링도 해보고 chatGPT를 사용하여 방법을 찾아 사용할 수 있었다. 
이번에 느낀 건, styled component라는 게 말 그대로 컴포넌트이므로 export, import 하여 사용할 수 있을 텐데 이 부분을 이용하지 못했다. 단지 스타일링 하려고만 했지 export / import 하여 사용할 생각을 못했다. 덕분에 CSS 코드가 다소 장황해졌을 뿐. 
다음 주부터 시작되는 개인 프로젝트 전에 emotion 사용 방법을 익혀 보다 효율적으로 styled component를 사용해보고 싶다. 

// emotion

const Main = ({ isDarkMode }: { isDarkMode: boolean }) => {
	return (
		<Wrapper isDarkMode={isDarkMode} />
	);
};

const Wrapper = styled.main<{ isDarkMode: boolean }>`
	position: relative;
	width: 100%;
	min-height: 170rem;
	background: ${(props) => (props.isDarkMode ? "#272d37" : "#ffffff")};
	color: ${(props) => (props.isDarkMode ? "#a6adba" : "#1f2937")};
    
    @media screen and (max-width: 940px) {
     // style
    }
`;

// emotion 사용 예

import styled from '@emotion/styled';

export const Button = styled.button`
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
`;


import { Button } from './Button';

function MyComponent() {
  return (
    <div>
      <Button>Click me!</Button>
    </div>
  );
}

 

## 기술적인 문제점 2 - 상태관리

 상태관리. 이번 과제에서 가장 어려웠던 부분이다.
이번에는 시간이 여유롭지 않아 클론코딩한 내용을 혼자 만들어 보지 않았다. 
그 상태에서 과제를 시작했으니, 뭐부터 시작해야 하는지 모른 채 목업만 짜보고 바로 과제를 시작했다. 
그리고 그게 실수였다. 
무슨 데이터가 필요하고 어떤 데이터를 전역으로 관리할지를 전혀 고려하지 않았다. 
해당 데이터를 어떤 페이지에서 쓸지 생각하지 않은 채 무작정 만들기 시작했다.
결국 꼬여버려서 상태관리에 대한 코드를 다시 짜야했다. 
recoil 사용을 권해주셨지만 경험이 없고 시간도 없었으며, 어중간하게 전역으로 끌어올려 상태관리 할 거면 그냥 useState() 사용을 권하기에 익숙한 useState()를 사용해 상태관리를 했다. 
다행히 복잡한 프로젝트가 아니라서 페이지 section 컴포넌트당 최대 2개의 props를 전달하여 상태관리를 했다. 
하지만, 코드가 깔끔하지 않아 다소 아쉽다. 
뭐, 내가 부족해서 그런 거고, 부족한 건 이제 채워나가면 되니, 파이팅!ㅋ
다음에 프로젝트를 하게 되면 처음부터 상태관리 부분을 계획하여 프로젝트를 시작할 것이다. 
 
 

## 기술적인 문제점 3 - 에러 핸들링

잘못된 경로가 들어왔을 때, 404페이지를 띄우기 위해 들어온 data가 없는 경우 404페이지가 반환되도록 예외처리를 해주었다.
그렇지 않으면 넣어준 'Loading'이라는 문구가 계속 뜨기 때문이다.  
하지만 문제가 생겼다. data를 받아오는 과정에서 404페이지를 띄운 후 data를 받아오면 원래 페이지가 띄워지는 문제이다. 
해당 부분은 구글링을 해도 모르겠다... 오늘 강사님께 해당 부분은 추가적으로 여쭈었고 오늘 답변을 주신다고 했으니 내일 해당 부분에 관련해 posting 하려 한다. 
 
 

## 기술적인 문제점 4 - useParams

useState로 상태관리 하며 state를 경로에 넣어 이동하게 했다. 정상적으로 이동은 하지만, 문제는 새로고침시 데이터를 받아오지 못하는 문제가 생겼다. 

<Route path={`/product/${selectedItem}`} element={<ProductDetailPage selectedItem={selectedItem} />} />

 
구글링 하니 역시 나만 겪은 문제가 아니었다. 
그래서 관련 라이브러리도 설치해서 처리하려고 하였지만, 해결되지 않았고 결국 생각해 낸 해결책이 localStorage를 사용하는 것이었다.
혹시나 해서 강사님 찬스를 썼다. 
강사님께 해당 문제가 있는데 어떻게 해야 하는지에 관해 문의했고 다음날 답변을 확인하였다. 
9시쯤 죄송한 마음으로 DM을 남겼는데 새벽 1시 반에 답변을 주셨다... (김영민 강사님 정말 감사합니다!)
해결책은 useParams였다. 
클론코딩하면서 써본 경험은 있는데, 직접 사용해보지 않으니 생각이 안 났다. 
강사님 덕분에 다음날 바로 문제를 해결했다. 

 

## 새로 배운 stack - react-tooltip

SNS 링크에 hover 하면 tootip이 나오는 것을 확인했다. 과제를 제출한 후 목요일부터 못했던 부분이나 깜빡했던 부분을 수정하면서 처음 사용해본 기능이다. typescript 지원이 되고 weekly  Downloads 수도 많아 사용하게 되었다. 사용방법은 props로 필요한 부분만 전달하여 사용할 수 있어 간단하고 쉬웠다. version에 따라 사용 방법이 상이하니 사용 전에 상세페이지에서 확인이 필요하다. 

Getting Started | React Tooltip

 

## 새로 배운 stack - usehooks

dark-mode 를 지원하기 위해 처음 사용해보았다. 상위 컴포넌트에서 상태관리를 하고 하위 컴포넌트에 props로 넘겨주어 관리하였다. import해서 사용하면 되니 쉽고 편리했다.

 

## 새로 배운 stack -react-responsive-carousel

스타일링에 꽤 고생했던 부분 중 하나다. 스타일 넣는다고 괜히 혼자 이것저것 건드렸더니 prev/next bar가 화면 밖으로 나오는 이슈가 발생했다. web에서 스타일을 잡으면 mobile이나 tablet에서 스타일이 깨져 혼자 이것 저것 건드리니 오히려 스타일이 더 깨지는 것이다. 결국 어제 캐러셀 부분만 다시 스타일링 하면서 height 와 같이 넣어준 스타일들을 지우고 나니 정상 동작하였다. 해당 라이브러리는 말 그대로 responsive 이니 화면 크기에 따라 줄어들거나 요소가 컨테이너 밖으로 나온다면 적용해준 스타일을 지우면 해결할 수 있다.

 

 

## 관련 포스트

# 첫날

지난 수요일 과제를 시작하며 제일 먼저 샘플 페이지의 화면을 캡처해 어떻게 나눌지 생각하며 구획화했다. 

청록색: 버튼 컴포넌트
노란색 : sector로 나눠 만들 컴포넌트 - main, footer, category, detail, cart
빨간색, 네이비 : 공통으로 사용할 컴포넌트 - productFrame, cart frame
이후 내용은 다음 블로그 참조

Practice) React Shop - Day 1

 

# 둘째 날

Practice) React Shop - Day 2

 

# 셋째 날

Practice) React Shop - Day 3

 
 

## Repository

GitHub - Ryomi-j/ZB_React_Shop