웹 개발자로의 한걸음

토이프로젝트에서 결제 기능을 카카오페이로 구현하고자 했다. 카카오페이 온라인 결제는 단건 결제뿐만 아니라 정기결제 등등이 있는데, 단건결제가 현재 서비스에 적합하다고 판단해 단건결제를 구현했다. 카카오페이 API는 다음과 같이 온라인 결제에 대한 공식 문서를 제공한다. 카카오페이 | 개발자센터 새로운 기회와 가치를 함께 만들어봐요 developers.kakaopay.com { "cid": "TC0ONETIME", "partner_order_id": "2", "partner_user_id": "family1", "item_name": "스위트케어 간병 결제 (간병 메이트 변철수)", "quantity": 1, "total_amount": 6034320, "tax_free_amount": 0, "approv..

ESLint 설정 탓에 alert를 쓸 때마다 no-alert 에러가 발생했다. 에러를 없애기 위해, 사용자 지정 모달 알림창으로 변경을 시도했다. 다음 사항을 고려했다. 1. 애니메이션 아래에서 위로 슬라이딩되며 나오고, 위에서 아래로 슬라이딩되며 사라지기를 원했다. 이를 위해 컴포넌트가 생기고 일정 시간이 지나면 active 클래스가 on/off되게 했다. opacity와 transform으로 효과를 주고, transition으로 연속적인 애니메이션이 되도록 했다. .Alert { /**중략**/ position: fixed; top: 75%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all 0.5s ease-in-ou..

이런 식으로, 간병 예약 페이지에서 카카오맵 API를 이용해 병원 주소 검색을 하려고 했다. 그런데 테스트 페이지에서는 정상작동하던 컴포넌트가.. 실사용 페이지에 불러오니까 자꾸 페이지가 새로고침되는 문제가 발생했다. 컴포넌트 구조는 똑같은데 대체 왜 테스트 페이지에서만 정상작동하는 것인지 머리를 싸맸다. 확인 1. useEffect 때문인가? -> X 확인 2. state를 이용해 지도 컴포넌트 on/off를 하기 때문인가? -> X 확인 3. form에 감싸여 있기 때문인가? => O!! 확인 3-1. e.preventDefault가 누락됐는가? -> X 모달 내부에서 검색을 위해 form을 제출하는데, 이 페이지는 예약을 위한 페이지이므로 form으로 감싸여 있다는 것이 문제였다. 그래서 검색 버튼..

처음에 Next.js의 내장 기능인 API Routes를 사용하여 서버 사이드에서 API 요청을 처리하기 위한 프록시 설정을 했다. /** @type {import('next').NextConfig} */ module.exports = { async rewrites() { return [ { source: '/api/:path*', destination: 'http://localhost:8080/api/:path*', }, ]; }, }; 그리고 이후 react-query 도입을 위해 axios instance 설정파일을 다음과 같이 설정했다. import axios from 'axios'; const localServer = 'http://localhost:8080'; // 로컬 서버 const pro..

한 페이지에 모달 2종류를 띄워야 한다. 버튼이 2개 있고, 각각 다른 모달을 띄우도록 하고 싶었다. 한 종류일 때는 다음과 같이 코드가 간단하지만.. const { isModalVisible, openModal, closeModal } = useModal(); 2개일 때는 어떻게 해야 할 지 헷갈렸다. 먼저 다음과 같이 구조분해할당 코드를 수정했다. const { isModalVisible: isPatientModalVisible, openModal: openPatientModal, closeModal: closePatientModal } = useModal(); const { isModalVisible: isMateListModalVisible, openModal: openMateListModal, ..

React에서 불변성 이해하기: 상태 업데이트 문제 해결 데이터 검색 기능을 구현하기 위해 검색조건 숫자 범위를 state에 저장하고 서버에 전달하려고 했다. 먼저 해당 값을 저장하는 state를 선언하고, const [wages, setWages] = useState([9860, 9860]); 다음과 같이 focus out 되면 state를 업데이트하는 코드를 작성했다. 시급 최소 handleWageChange(e, 0)} onBlur={updateWage} min={9860} max={1000000} /> 원 ~ 최대 handleWageChange(e, 1)} onBlur={updateWage} min={9860} max={1000000} /> 원 const updateWage = () => { if..