본문 바로가기
728x90

code.camp27

useMutation, useQuery 7/9 주소가 복사된 것! 불편하니까 다른방법은? 라우팅? 이동되는것, 라우트? 이동하는 도구 ’next/router’ compiling successfully 숫자 바뀌는 것 = 동적 라우팅, 다이나믹 라우팅 useMutation = 내가 원할때 등록되는 것 useQuery = 내가 원하든 원치않든 자동으로 불러옴 2021. 10. 20.
비동기와 동기 7/8 숫자 더하기 비동기와 동기 사진에 status(HTTP상태 코드)가 500대면 에러 번호가 많음 aaa.data를 하면 데이터가 나오는걸 알수있음 아래꺼는 화살표 함수 async위치가 다름! uri, url = 페이지 주소에 ?부터가 uri, 전부다가 url —————————다시————————— 게시판 작성하고 데이터 완료 누르면 2021. 10. 18.
데이터 전송! frontend: 이거 줄래? => backend: ok!! 7/5 API이름입력 = 백엔드가 주는 것으로 사용 s = 목록 s, All, List가 있으면 여러개가 있다는것 Count = getPropfile로도 함 [어쩌구저쩌구!] = !임폴턴트랑 같은 뜻 createProduct 2021. 10. 16.
결제 프로세스, imp_uid, 아임포트 웹 훅 노티피케이션 8/11 결제 프로세스 최종적으로 카드결제를 진행하기 위해서, 수많은 카드사 앞단에서 결제를 처리해주는 PG(Payment Gateway)사가 무엇인지 알아야 한다. 이러한 각각의 PG사와 계약해서 결제를 처리해야 하는데, PG사 마다 결제모듈 연동 방식이 모두 다르다. (설명서도 굉장히 복잡하고, 내용도 많다.) 이렇게, 여러 PG사들의 앞단에서 복잡한 연동을 대신 해주고 있는 서비스가 바로 "아임포트" 서비스. 아임포트를 연동하면 결제하는 화면이 나온다. 여기서 결제를 하게되면, 결제ID(imp_uid)라는 데이터를 받게끔 되어 있다. 이 imp_uid를 Backend에 전송하여 데이터베이스에서 결제 정보를 관리할 수 있도록 만들었다. 그런데, 무통장입금(가상계좌)을 하거나, 모바일에서 결제를 하는 .. 2021. 8. 11.
여러가지 쿼리방식, refetch문제점, ApolloState 직접 수정 8/6 🧐 useApolloClient로 원하는 곳에서 쿼리하기 🧐 그동안 데이터를 쿼리해올 때, useQuery를 사용 했다. 그런데, 기존에 openapi를 사용하기 위해 axios를 사용했을 때를 기억하면, axios는 useQuery와 다르게, 내가 원하는 곳에서 원하는 버튼을 클릭했을 때, api요청을 할 수 있었다. 하지만! useQuery는 이렇게 동작하지 않고, 페이지가 렌더링될 때 자동으로 쿼리가 요청됐다. 그렇다면, useQuery를 axios처럼 우리가 원하는 곳에서 api를 요청하기 위해선 어떻게 하면 좋을까? 이를 위해 사용했던 기능이 useApolloClient 👏👏 그렇다면, 왜 useQuery를 이용하여 페이지가 랜더링될 때 fetchUserLoggedIn 이라는 API를 자.. 2021. 8. 8.
폼 라이브러리, 검증 라이브러리, 공통 컴포넌트 8/5 폼 라이브러리는 여러 종류가 있다. react-form, redux-form, formik, react-hook-form 등... 폼 라이브러리란 그동안 스프레드 연산자를 쓰고, onChangeInput, isEvery, state 등을 만들어서 직접 관리했던 폼들을 미리 만들어 놓고, 라이브러리 형태로 제공해 주는 것이 폼 라이브러리. 그 중, 최근에 함수형 컴포넌트에서 가장 많이 사용되는 폼 라이브러리가 바로 react-hook-form 검증 라이브러리 -> 오늘은 yup yup을 사용하여, 기존의 정규표현식 또는 length를 기준으로 한 최소/최대글자수, 등의 조건을 아주 쉽게 추가할 수 있다. 또한, 검증 라이브러리와 폼 라이브러리는 서로간에 독립적으로 사용될 수 있으므로, 반드시 rea.. 2021. 8. 8.
728x90