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

# AWS를 활용한 배포 전략 개발한 서비스를 사용자가 이용할 수 있도록 하는 것을 배포라고 합니다. 작성한 Client 코드를 사용자들에게 어떻게 제공할지 생각해 봅시다. AWS에서 제공하는 서비스인 S3라는 서비스를 통해 사용자들에게 Client를 제공할 수 있습니다. 로컬 환경에서는 자체 개발 서버 (예, create-react-app)를 이용해서 클라이언트 앱을 실행시키는 것이 보통입니다. 그럼, 클라이언트를 위해서 EC2 인스턴스를 사용해야 할까요? 그렇지 않습니다. 클라이언트 앱을 정적 파일로 빌드하여 제공합니다. 따라서 S3를 이용해서 클라이언트를 배포합니다. 이때 필요한 것이 빌드입니다. 빌드란 쉽게 말해서 불필요한 데이터를 없애고, 여러 갈래로 퍼져있는 데이터들을 통합/ 압축하여 배포하기..

#1. AWS 서비스 회원가입 1. 준비물 이메일 주소: AWS 계정 생성 시 필요한 유효한 이메일 주소가 필요합니다. 인증 과정과 로그인시 아이디로 사용됩니다. 해외 결제가 가능한 신용 카드 혹은 체크 카드: AWS 회원 가입 시 카드 정보가 필요하며, 작은 금액이 결제되지만, 인증 후에 해당 금액은 바로 환불됩니다. 휴대전화: 회원 가입시 AWS는 전화나 문자 메시지를 통한 인증이 요구됩니다. 영문주소: 영문으로 된 주소를 기입해야 합니다. 도로명 주소를 영문으로 변경하여 기입해야 합니다. 2. 주의사항 비밀번호 설정: 강력한 비밀번호(대문자, 소문자, 숫자, 특수문자 포함)를 사용하고, 별도로 안전한 곳에 저장하세요. 프리 티어 사용: AWS는 신규 가입자에게 12개월 동안의 프리 티어 서비스를 제..

JSON Server 개념학습 API를 통해 받아오는 데이터를 기준으로 화면을 구성 해야 합니다. 그런데, API 개발 일정이 늦어지면 어떻게 해야 할까요? API 개발이 지연될 때, 이러한 상황에서 JSON Server와 같은 도구를 사용하는 것이 매우 유익합니다. JSON Server를 사용하면 최소한의 설정으로 가짜 REST API를 만들 수 있고, 실제 API에서 기대하는 데이터 구조를 나타내는 JSON 파일을 정의할 수 있습니다. 이를 통해 프론트엔드 개발자들은 백엔드 API가 준비될 때까지 UI 구축 및 테스트를 계속할 수 있습니다. JSON Server 는 리액트 프로젝트 안에서 다음과 같이 설치할 수 있습니다. 1 npm install json-server --save 이후, JSON Se..

Postman 개요 웹 개발에서 사용하는 대표적인 클라이언트는 브라우저입니다. 브라우저는 서버에 HTTP 요청을 보낼 수 있는 훌륭한 도구이지만, 주로 웹 페이지를 받아오는 GET 요청에 사용합니다. 브라우저의 주소창에 URL을 입력하면, 해당 URL의 root-endpoint로 GET 요청을 보냅니다. 테스트를 위해 GET 요청이 아닌 다른 요청을 보내려면, 개발자 도구의 콘솔 창에서 Web API fetch를 사용해야 합니다. 매번 코드를 작성할 수는 있습니다. 그러나 테스트를 위해 매번 코드를 작성하는 것은 상당히 번거로운 작업입니다. 매번 코드를 작성하는 것 대신에, HTTP 요청을 테스트할 수 있는 다양한 API 테스트 도구들이 있습니다. 이러한 API 테스트 도구는 클라이언트 입장에서 서버 A..

* 레퍼런스 https://github.com/codestates-seb/fe-sprint-cmarket-rquery-reference 알려주신 키워드 : React Query : 리덕스 + thunk 비동기상태를 리덕스와 동기화시키는(?) @@못들음 프론트엔드는 라이브러리가 굉장히 빠르고 많이 나오고있다. 전역상태 관리 관련 라이브러리는 굉장히 많이 나오고있다. 하나만 제대로 이해하면 어떤 라이브러리를 사용해도 큰 틀은 변화하지 않기때문에, 다른것을 사용할 수 있다. 실질적으로 오늘 볼 내용은 이 코드에 들어가 있는 JSON 서버코드에 대해서 같이 볼 예정이다. 일단 우리는 JSON 서버에 대해서만 신경을 쓴다! 전역상태는 꼭 사용해야 하는것은 아니다! 전역상태는 props drilling이 복잡할때 ..

REST API 개요 웹 애플리케이션에서는 HTTP 메서드를 이용해 서버와 통신합니다. GET을 통해 웹 페이지나 데이터를 요청하고, POST로 새로운 글이나 데이터를 전송하고, DELETE로 저장된 글이나 데이터를 삭제할 수 있습니다. 이처럼 클라이언트와 서버가 HTTP 통신을 할 때는 어떤 요청을 보내고 받느냐에 따라 메서드의 사용이 달라집니다. 이런 사용은 아무런 규칙 없이 이루어지는 것이 아닙니다. 요청과 응답을 할 때, '제대로 보내고 받을 수 있는' 일종의 규약이 존재합니다. 이번 챕터에서는 REST API를 학습하고, 이를 통해 어떻게 요청과 응답을 하는 것이 바람직한 방법인지를 이해할 수 있습니다. 1. REST API 디자인 개념학습 REST API에서 REST는 “Representati..

아이템카드에 할인율, 할인가격 등을 추가로 표시할것이다! ✔️ 할인율 표시하기 목표는 할인율을 이미지 위에 표시하는것! # 할인율 표시하기 ✔️ 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..