며칠동안 손을 못대서.. 어디까지 만든지 잊어버렸다. 🤔 그래서 그냥.. Day6으로하기로... 😄 기본적인건 구현했기 때문에 Advanced 까지 구현해볼것이다. 그리고 내가 추가적으로 넣어보고 싶었던 기능들도 넣어볼 예정! # 페이지 보기 css 선 다 지운 모습! 뭐야 왜이렇게 밋밋해 카테고리 탭 이동 슬라이더 구현 # 추가할 기능 API 요청 시, 쿼리 파라미터를 사용하여 좋아요 또는 만족도 순에 따른 상품 데이터를 보여주도록 정렬 옵션을 슬라이더 상단에 추가할 수 있습니다. 사용자의 시각적 편의성을 고려하여, 모든 상품 슬라이더가 일관된 너비와 여백을 갖도록 레이아웃을 조정할 수 있습니다. 데이터 로딩 중에는 사용자에게 로딩 상태를 알리는 UI 요소(e.g., 스켈레톤, 로딩 인디케이터)를 표시..

아이템카드에 할인율, 할인가격 등을 추가로 표시할것이다! ✔️ 할인율 표시하기 목표는 할인율을 이미지 위에 표시하는것! # 할인율 표시하기 ✔️ ItemCard.jsx 코드 // ItemCard.jsx import React from 'react'; export default function ImageCard({ imageUrl, title, price, discountPercentage }) { return ( {title} {price}원 {discountPercentage && ( {discountPercentage}% 할인 )} ); } ✔️ CategoryBox.jsx 코드 //CategoryBox.jsx import React from 'react'; import ItemCard from '...

slide효과는 리액트 슬릭 라이브러리를 이용해서 구현한다. * 사이트 주소 https://www.npmjs.com/package/react-slick react-slick React port of slick carousel. Latest version: 0.29.0, last published: 2 years ago. Start using react-slick in your project by running `npm i react-slick`. There are 1981 other projects in the npm registry using react-slick. www.npmjs.com https://react-slick.neostack.com/ Neostack The last react carou..

Git...? PR...? Clone...? 아직도 어떻게 하는지 모른다. ...ㅎㅎ;; * 참고 블로그 https://inpa.tistory.com/entry/GIT-%E2%9A%A1%EF%B8%8F-%EA%B9%83%ED%97%99-PRPull-Request-%EB%B3%B4%EB%82%B4%EB%8A%94-%EB%B0%A9%EB%B2%95-folk-issue [GIT] ⚡️ 깃헙 Pull Request 보내는 방법 - 알기 쉽게 정리 코드 기여 원리 (Fork 와 Pull Request (PR)) 다음과 같이 Gildong와 Minji 라는 깃헙 리포지토리가 있다고 하자. 이때 Minji가 GIldong 개발자의 프로젝트가 마음에 들어, 같이 프로젝트에 참여해 기여자(Contrib inpa.tist..

이번에는 CategoryTab을 만들것이다. 메인 제일 위, 이전에 만든 CategoryBox위에 위치하게 한다. CategoryTab은 화면이 전환되어도 고정되어 있어야한다. CategoryTab도 서버에서 받아오는것이다. CategoryTab안의 Tab요소들도 각각의 컴포넌트로 분리해서 클릭했을때 효과를 부여한다. # CategoryTab.jsx 초반코드 ✔️ CategoryTab.jsx 만들기 components안에 만들어준다. 기본코드 입력해준다. export default function CategoryTab () { return CategoryTab; } ✔️ MainPage.jsx import CategoryTab from '../components/CategoryTab'; ... retur..

📋 구현목표 가장 작은 단위인 ItemCard를 먼저 만들어준다. ItemCard에 서버의 데이터를 넣어준다. ItemCard의 CSS를 적절하게 수정한다. # ItemCard 컴포넌트 만들기 ✔️ ItemCard.jsx 파일 만들기 export default function ItemCard(){ return ItemCard; } 기본 코드 입력한다. export default 구문은 이 함수형 컴포넌트를 다른 파일에서 불러와 사용할 수 있도록 내보내는 역할. ✔️ MainPage.jsx 기본코드 export default function MainPage() { return Main Page; } 기본코드안에 ItemCard.jsx를 넣어준다. import ItemCard from '../componen..

저번 노답코드는 놔두고 새로 코드를 받아서 다시 처음부터 작성할 예정이다. 📋 주의사항 CSS를 한곳에서 수정하기 너무 여러 페이지에서 CSS를 수정하다 보니 화면이 엉망이 되었다.🥲 수정을 위해서 최소한의 페이지에서 CSS를 수정하기 컴포넌트 구분을 파일단위로 하기 저번 코드에서는 제일 최소한의 컴포넌트 파일위에 슬라이드를 겹쳐서 작성해서 재사용을 할수가 없게 되었다. 많은 요소들을 만든 이후에 이 사실을 알게되어서 난감했다. 🤯 미리 요소들을 구상하기 구현할 요소들을 미리 생각해두고 개발을 진행해야겠다. 피그마에 러프하게 먼저 스케치하기 코드 작성중에 필요한 다른 요소들을 떠올렸을때는 어디에 들어가야하는지 정한 후에 개발을 이어나가기 저번 파일을 작성하면서 느낀 주의사항은 일단 이정도가 있다. 레퍼런..

우와 구리다!!

# 메인 페이지 용어 설명 미션(Mission): 페이즈 내에서 완수해야 할 구체적인 목표나 과제를 의미합니다. 각 미션은 수행해야 할 주요 작업들을 포괄합니다. 서브젝트(Subject): 미션 안에서 다루어야 할 개별적인 주제나 과제를 의미합니다. 각 서브젝트는 미션의 일부를 이루며, 구체적인 기능 개발이나 컴포넌트 구축과 같은 작업들로 구성됩니다. 여기에는 미션을 완수하기 위한 세부적인 단계들이 포함됩니다. 활동: 서브젝트를 달성하기 위해 수행하는 구체적인 행동이나 작업을 말합니다. 이는 프로젝트를 진행하면서 실제로 해야 할 작업들을 포함하며, 프로젝트의 세부 구현 사항에 초점을 맞춥니다. 세부 지침: 활동을 수행하는 데 필요한 구체적인 지시사항을 제공합니다. 특정 기술이나 방법론, 코드 예시 등이 ..