23.05.16 웹개발_솔로프로젝트(Productcard 만들기)

Yeondong Choe·2023년 5월 16일
0

회고 Tip
1. 지금 현재, 기분과 느낌을 표현(구체적)
2. 오늘 학습한 내용의 단어를 모두 나열
3. 나열한 단어를 하나씩 설명
4. 설명하기 어려운 단어가 있다면 그 이유를 생각
5. 스스로 설명하기 위해 질문한다면 어떻게 질문할것인가 생각

웹개발_솔로프로젝트 데일리 후기

지금까지 공부하면서 어려움을 느꼇던 서버와의 통신을 오늘 해야만 했기에 오늘은 정말 어려운 부분이 많았다.
플래닝때 세웠던 시간보다 조금더 오래 걸렸리기도 했지만 지금의 상황으로서는 어느정도 구현이 되었기때문에 데일리 후기 작성하고 후다닥 다음 구현으로 넘어가야할거같다.

수정이 필요한 부분

  1. Header 햄버거버튼에 아이콘 넣기
  2. Mainpage 화면 비율 맞추기
  3. price.toLocaleString() 적용안되는 버그

기억해둘 코드

  1. 서버에서 받아온 data를 로컬스토리지에 저장하고 state에 초기값으로 저장해서 사용하는 코드(에러1 참고)
  2. 조건부 랜더링을 하기 위한 자기를 호출하는 익명함수(에러2 참고)
  3. svg파일 저장하고 불러와서 사용하는 법(에러3 참고)
  4. map을 사용해서 data의 key를 변수로 만들어 props로 내려주고 slice메서드를 사용해서 원하는 수만큼 보여지느 코드(기록하고싶은 기능구현1 참고)

Productscard 컴포넌트 요구사항 (6h)

Productscard 컴포넌트 구현 요구사항

  • 서버로부터 데이터를 받아와서 로컬스토리지에 저장

  • 저장한 값을 state로 가져와서 상태 관리

  • data의 key값에 맞게 이미지, 부연설명, 상품이름, 할인률, 가격 보여주기
    : type이 카테고리면 앞에 #추가
    : 기획전은 상품이름과 서브타이틀을 보여줌
    : 브랜드는 이름과 관심고객수 숫자가 있어야함 toLocaleString()으로 설정
    : 할인률은 파란색으로 표시
    : 가격은 toLocaleString()으로 설정 -> 설정하였지만 설정되지 않는 버그가 발생

  • 이미지 우측 하단에 북마크를 선택할 수 있는 버튼

  • 북마크 버튼을 눌렀을때 아이콘이 변경(상태관리로 변경)


마주했던 에러(1)

서버와 통신을 해서 데이터를 가져오는 부분이 어려웠다.
가져온 데이터를 확인해보고싶고 props로 넘겨주고 싶었지만 props로 넘겨줬을때 빈배열이 계속 보여지는 부분이 있었다.
이를 해결하기 위해서 받아온 데이터를 localStorate에 저장했고 state 상태도 localStorate에서 받아오는 식으로 했다.

//초기값으로 로컬스토리지에 'key'라는 이름으로 저장된 값을 JSON형식에서 Javascript 객체나 배열로 변환해서 가져오고 변환된 값이 null or undegined라면 초기값을 빈배열로 할당.
const [items, setItems] = useState(JSON.parse(localStorage.getItem('key')) || []);

//페이지를 처음 랜더링 할때 fetchData함수를 실행
  useEffect(() => {
    fetchData();
  }, []);

//fetchData 변수를 만들고 Fetch API를 통하여 서버에 data를 받아와서 로컬스토리지에 저장 
  const fetchData = () => {
    fetch('http://cozshopping.codestates-seb.link/api/v1/products')
      .then(response => response.json())
      .then(data => {
        // 받아온 데이터를 로컬 스토리지에 저장
        localStorage.setItem('key', JSON.stringify(data));
      })
      .catch(error => {
        console.error(error);
      })
    }

마주했던 에러(2) - Card components

서버에서 받아온 data의 key값이 정말 다양했으며 보여지는 부분도 너무 다양했다. 어떤 data는 이미지가 brand_image_url이거나 image_url이고 제목은 title이거나 brand_name이고 type에 따라 #이 붙을수도 있고 부연설명이 sub_title이거나 price 등등... 조건이 너무 많았다. 삼항연삼자로 구연을 하려고 했으나 조건이 너무 많았다.
그래서 if문으로 조건을 적어주기위해 익명의 함수를 선언했고 즉시 익명함수를 호출 할 수 있게 적었다
가장 밖의 {}는 Javascipt 표현식이고 그 안에 있는 () => {} 는화살표 함수 표현식의 익명 함수다
즉시 자기 자신을 호출하기 위해 화살표 함수 표현식을 ()로 감싸서 그룹화하고 함수를 호출하는 연산자인 ()를 적어 '() => {}' 로 정의 된 익명 함수를 호출하는 것이다.
이처럼 사용하므로 함수를 선언과 동시에 실행할 수 있게 된다.

{(() => {
 if (title) {
  if(type==="Category") {
   return `#${title}`
    } else {
     return title
    };
   } else {
    return brand_name;
   }
  })()}

마주했던 에러(3) - Bookmark icon

처음엔 아이콘을 이미지로 받아와서 사용하려고 했다. 하지만 상품이미지 안에 들어가는 이미지다보니 태그는 자식을 가질 수 없다는 에러가 나타났다. 그래서 고민끝에 svg로 사용해보았다
svg를 public에 저장을 했더니 svg는 퍼블릭에서 불러올 수 없다는 에러가 뜨면서 src내부로 옮겨보라는 메시지가 나타나서 src 폴더로 이동했고 그에 맞게 경로를 수정해서 import했다.
다행이다 불러와졌고 styled components로 디자인 해서 사용하려고 하니 이번에는
"Failed to execute 'createElement' on 'Document': The tag name provided" 에러를 마주하였다 'createElement'를 실행하는 도중 제공된 태그 이름이 유효하지 않다는 에러였다.
그래서 북마크아이콘을 담을 div를 하나 만들어서 디자인 하고 그 안에 불러온 svg를 넣어서 사용했다.
추가로 북마크아이콘을 눌렀을때 아이콘의 변화가 있어야 하며 추후에는 값을 저장해야하기에 useState로 상태를 저장해서 조건문을 통해 코드를 구현하였다.


import BookmarkOn from '../bookmark_on.svg';
import BookmarkOff from '../bookmark_off.svg';

const Bookmarkicon = styled.div`
  display: flex;
  justify-content: end;
  margin-top: -35px;
  margin-bottom: 13px;
  margin-right: 8px;
  cursor: pointer;
`;
 
const [isOn, setIsOn] = useState(false);

const BookmarkClick = () => {
      setIsOn(!isOn);
      }

  return(
      
   <Bookmarkicon onClick={BookmarkClick}>
    {isOn ? (<img src={BookmarkOn} alt="bookmark_on" />) : (<img src={BookmarkOff} alt="bookmark_on" />)}        
   </Bookmarkicon>

(중략)

기록하고싶은 기능구현(1) - Mainpage Preview List

서버를 통해 받아와서 로컬스토리지에 저장한 데이터가 100개인데 메인페이지에서는 4개만 보여줘야 했고 Card 컴포넌트에 받아온 값들의 key를 내려줌으로 Card의 세부사항을 조정할 수 있게 했다.

<PreviewLi>
  //로컬스토리지의 data를 전부 가지고 있는 변수에 map을 사용해서 key별로 변수를 만들어서 Card컴포넌트에 props로 내려주고 slice메서드를 사용해서 0부터 4의앞인 3번째 인덱스까지 화면에 보여주게 함
 {items.map((item, i) => {
  return (
   <Card 
    key={i}
    brand_image_url={item.brand_image_url}
    brand_name={item.brand_name}
    discountPercentage={item.discountPercentage}
    follower={item.follower}
    id={item.id}
    image_url={item.image_url}
    price={item.price}
    sub_title={item.sub_title}
    title={item.title}
    type={item.type}
   ></Card>
  );
 }).slice(0, 4)}
</PreviewLi>    

오늘 서버와 통신하고 가져온 data를 저장하고 사용하느라 거의 하루가 다 갔지만 정말 유익한 시간이였다 오늘과 같은 방법이라면 서버와 통신하는 부분은 어렵지 않을거같다 개발자는 문제를 직면하고 그것을 해결하는 능력이 가장 중요하다고 많이 들었는데 이번 솔로프로젝트를 통해 또 오늘 작업을 통해 피부로 느껴지는 시간이였다. 또한 문제를 해결해나갈때마다 성취감도 느끼고 자신감도 많이 오르는거같아서 뿌듯했다. 개발자가 정말 나랑 잘 맞을까? 라는 의문이 항상 마음속에 있었는데 공부하면서 작업하면서 뿌듯함을 느끼는 나자신을 발견하다보니 나의 목표였던 개발이 즐거운 개발자가 될 수 있을거같다! 이제 프로젝트 마감일까지 이틀남았는데 남은 티켓을 다 구현할 수 있도록 노력해야겠다.

profile
개발자 동동

0개의 댓글