import { useCallback } from "react"; // ... Your imports and other code ... export default function DayPage() { // ... Your state declarations ... // Function to fetch data using useCallback const handleFetchData = useCallback(() => { dayRender(userId, month, date) .then((response) => { // 데이터 처리 로직 //console.log(response.data.data); setDayConsumptionData(response.data.data.paymentResponses); //..
전체 글
서버에서 데이터는 들어왔는데, 렌더링이 안되는 경우가 있다 useEffect(() => { const handleFetchData = () => { dayRender(userId, month, date) .then((response) => { // 데이터 처리 로직 console.log(response.data); console.log(response.data.data) setDayConsumptionData(response.data.data.paymentResponses); setDaySumData(response.data.data.daySummary); }) .catch((error) => { // 에러 처리 로직 console.log(error); }); }; handleFetchData(); },..
서버와 데이터를 연결하다 보면, 가장 먼저 마주하는 에러는 cors 에러이다. CORS는 보안 상의 이유로 인해 브라우저에서 실행 중인 웹 애플리케이션이 다른 출처(도메인, 프로토콜, 포트)의 리소스에 접근하는 것을 제한하는 정책이다. 따라서, 요청을 보내는 클라이언트에서 CORS 에러를 피하려면 올바른 CORS 헤더를 포함하는 요청을 보내야 합니다. 이를 위해 요청 헤더에 필요한 정보를 추가하여 CORS 정책을 준수해야 합니다. 예를 들어, Access-Control-Allow-Origin 헤더를 설정하여 허용된 출처를 명시할 수 있습니다. 하지만, Access-Control-Allow-Origin 헤더를 설정하였음에도 불구하고 안되는 경우가 있다. 위의 코드에서는 "ngrok-skip-browser-..
초기세팅을 하기 위해서, setting 브랜치를 dev(팀원들이랑 같이 쓰는 브랜치)로 merge 하는 pr을 날리려고 했는데, 문제가 생겼다. There isn't anything to compare. dev and setting are entirely different commit histories. 비교할 것이 없다. dev와 setting 은 완전히 다른 커밋내역을 가지고 있다 원인을 찾지 못하다가, 각 브랜치가 서로 다른 폴더구조를 가지고 있어서 비교자체를 못하는 것 같다는 팀원의 말에 각 브랜치의 폴더구조를 살펴보았다 아예 상위폴더 구조 부터 달라서 pr이 불가능했던 것이다. 아마 깃 클론을 받을때 원격 main 브랜치(아무것도 없던)에서 가져와서 setting의 폴더구조가 dev와 다르게 나..
git push origin 본인이름/작업내용을 입력하면? 지금 위치해있는 로컬브랜치의 내용을 복사해서, 원격에서 ‘본인이름/작업내용’ 라는 이름으로 새로운 브랜치가 생긴다 즉, 로컬에서 만든 브랜치를 원격 브랜치로 옮기는 것이다! 올바른 가이드라인은 작업한 내용을 식별 가능한 방식으로 로컬 브랜치를 명명하고, 해당 로컬 브랜치를 원격저장소로 푸시하는 것입니다. 로컬저장소의 현재 브랜치를 원격저장소에 푸시하기 위해서는 다음과 같은 단계를 따를 수 있습니다: 1. 새로운 로컬 브랜치를 생성하고 현재 로컬 브랜치의 내용을 해당 로컬브랜치로 이동시킵니다. git branch 본인이름/작업내용 git checkout 본인이름/작업내용 이 명령어는 본인이름/작업내용이라는 이름의 새로운 브랜치를 생성하고, 해당 브..
메인 프로젝트에서 템플릿을 사용할때, 왜 사용하는지 정리하는 중에 알게 된 사실이다. 왜 fetch 보다 axios를 쓰는 것이 좋을까? axios와 fetch는 모두 HTTP 요청을 보내는 데 사용되는 도구입니다. 하지만 axios는 fetch보다 편리한 API와 기능을 제공하며, 프로미스 기반으로 비동기 작업을 처리하는 데 있어서 더 직관적이고 편리한 방법을 제공합니다. 아래 예시 코드를 통해 axios가 fetch보다 어떻게 편리한지 알아보겠습니다. 1. GET 요청 axios로 GET 요청을 보내는 예시 코드는 다음과 같습니다: axios.get('/api/users') .then(response => { // 응답 데이터 처리 console.log(response.data); }) .catch(..
Pre-project 44기 삼땡오버플로우 팀 깃허브: https://github.com/codestates-seb/seb44_pre_033 노션: https://www.notion.so/codestates/f93bef9f78744dc8a362e8e58f22a005 피그마: https://www.figma.com/file/rZQ9dlYffNx9ynTCKaqPtC/pre_project_033?type=design&node-id=2%3A19&mode=design&t=94ODJ6UaRZwP6CFm-1 요약회고 1. api 명세서 (어떤 데이터가 어디에 쓰일것인지, 어떤 데이터를 어떻게 저장할건지, 어떻게 가져올지) 기획이 중요하구나... api 명세서를 자세하게 적어야 하는구나 swagger api 문서화 h..
json 서버 설치와 여는방법 https://www.npmjs.com/package/json-server json-server Get a full fake REST API with zero coding in less than 30 seconds. Latest version: 0.17.3, last published: 3 months ago. Start using json-server in your project by running `npm i json-server`. There are 316 other projects in the npm registry using json-ser www.npmjs.com npm install -g json-server npx json-server --watch posts..