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..

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

우와 구리다!!

#구현시작 개발자도구를 열어본다 체크로 풀수도있고 바로바로 설정할수있음 vscode가서 max-width지워 근데 리액트 슬릭의 화살표가 안보이는중! 오른쪽 옆에 틈이있음 배경이 하얀색이라서 화살표가 티가 안나는중 개발자도구에서 블랙설정 하니까 잘보임 코드로 다시가서 스타일을 수정하러간다. 코드의 104줄부터 수정했음! 왼쪽 화살표는 전체 폭때문에 안나옴 그래서 아이템 슬라이더에 가서 width 80줌 슬라이더에 마진을 준다 그러니까 중간으로 랭킹어쩌고가 중간으로 와짐 근데 마진 지우고 84줄 어라인 어쩌고 적으면 중앙정렬됨 # 아이템 슬라이더 지금은 요소들이 하드코딩이 되어있는데 프롭스를 받아서 표현할것! 프롭스를 받아서 재사용 가능하게 설계할것이다. 1. 슬라이더의 제목과 2. 맵핑 리스트 이렇게 두..

랭킹별 데이터랑 추천 아이템 자동 스크롤 되게 할거야 혹은 클릭시에 보여주게하거나... 직접 알고리즘을 짜서 슬라이더 구현을 해도 되고 라이브러리 사용을 권장함 리액트로 슬라이더를 어떻게 구현? 검색하면됨 리액트 슬릭! npm 에 들어가서 패키지에서 다운로드 수를 본다.. 인기없는건 라이브 버전별 호환성이나 이슈관리가 제대로 안될수도 있음.. 많이 쓰는거 선택해야지 코드 버저닝 및 호환성 업데이트 될 수 있다. 리액트 슬릭을 꼭 써라! 이건 아니지만 라이브러리 쓰는 경험도 익숙해져야 하니까 리액트 슬릭으로 슬라이드를 쓰라고 권장 슬라이더 구현은 직접하기 어려우면 리액트슬릭 사용하면 된다! 라이브러리는 어떤 슬라이딩에 대한것을 하나하나 짤 필요가 없이 옵션값만 넣으면 된다. 해당 라이브러리 개발자가 추상화..