문제상황 프론트엔드라면 서버를 통해 API를 호출하면서 렌더링 문제를 마주하게 된다. useEffect와 useState를 통해 데이터를 설정해놔도 다시 호출하면서 다시 빈 데이터가 등록되거나 데이터가 사라지고 실시간 연동이 안되는 등 너무나도 코드가 지저분해지는 문제가 발생했다. 따라서 깔끔하게 API를 관리하는 방법의 필요성을 느꼈다. 특히 리액트는 컴포넌트별로 관리하기 때문에 개발을 하다보면 내부의 컴포넌트에 API를 호출하면서 중복호출 되는 경우가 생긴다. 깔끔하게 코딩하는 방법에 대해 알아보자. 아래의 글에서 API 요청 관리를 관리하는 사례가 적혀있다. 아래를 참고하여 작성하였다. https://github.com/Ubermensch0608/organize-api-requests GitHub ..

문제상황 아래 글에서 내용이 이어집니다. https://dingx2-story.tistory.com/101 [React] CORS from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is pr문제상황 Access to XMLHttpRequest at 'http://localhost:8080/booking/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource..

문제상황 Access to XMLHttpRequest at 'http://localhost:8080/booking/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 정리 0. 응답 패킷에 Access-Control-Allow-Origin 이 있는지 확인하기 1. package.json이나 setupProxy.js가 작동해서 3000포트가 아닌 것을 네트워크-요청URL에서 확인하기 => domain이 같아서 localhost:3000에서 데이터를 가져올 수 있는 경우가 있다. 이러면 백엔드에서..

문제상황 더보기 Compiled with problems:× ERROR in ./node_modules/body-parser/lib/read.js 19:11-26 Module not found: Error: Can't resolve 'zlib' in 'C:\Users\pourd\haedal-react-client\node_modules\body-parser\lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you w..

프로그래머스 문제풀이 python No. 추억 점수 #파이썬 #프로그래머스 #문제풀이 #추억 점수 https://school.programmers.co.kr/learn/courses/30/lessons/176963 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 이번 글에서는 list to dict 리스트를 딕셔너리로 변환하는데 중점을 둔다. // 알고리즘 가장 중요한 목적이 무엇인지? 리스트를 적절하게 딕셔너리로 변환하는 과정이다. 딕셔너리 키값으로 가능한 것은 변환 불가능한 타입이다. 정수(integers), 부동소수점(floats), 문자열(strin..

프로그래머스 문제풀이 python No. 달리기 경주 #파이썬 #프로그래머스 #문제풀이 #Lv.1 달리기 경주 https://school.programmers.co.kr/learn/courses/30/lessons/178871 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 8,9,10,11,12,13 실패 (시간 초과) 해결 index 검색 최적화 하는 방법에 집중한다. // 알고리즘 가장 중요한 목적이 무엇인지? 일단 .index()함수를 사용하여 간단한 코드를 작성했다. def solution(players, callings): answer = pla..