profile
Software engineer at Sendbird
태그 목록
전체보기 (67)react native(12)typescript(7)git(6)React(5)JavaScript(3)node.js(2)Picker(2)promise(2)npm(2)axios(2)Time Picker(2)latest(1)private(1)로또 구매(1)android(1)expo module(1)non-blocking i/o(1)task queue(1)x86(1)wireless debugging(1)iOS background debug(1)setImmediate(1)fabric(1)npm tag(1)회고(1)iOS audio(1)expo 3rd party library(1)arch -x86_64(1)worker pool(1)API(1)background play(1)Event Queue(1)PackageManager(1)push(1)private package(1)merge(1)rebase(1)Flatlist(1)커스텀 액션(1)queue(1)typescript conditional function(1)2021(1)타입스크립트 조건부 함수(1)Pull Request(1)yarn3(1)moduleResolve(1)Interceptor(1)Request(1)Response(1)로또(1)yarn-berry(1)connect()(1)get type(1)types(1)unhandled rejection(1)yarn(1)jsi(1)사이드 프로젝트(1)javascript interface(1)중첩된 쿼리(1)blocking i/o(1)npm package(1)ESM(1)Module(1)axios type(1)이직(1)adb wireless(1)process.nextTick()(1)micro task(1)event loop(1)wifi debugging(1)RN(1)nextTick(1)bridge module(1)Worker Thread(1)silent notification(1)flipper(1)타입스크립트(1)react-native-codegen(1)macrotask(1)arm64(1)npm private(1)query(1)setupFiles(1)apple silicon(1)깃허브 액션(1)xcode wireless(1)android maven(1)M1 MacBook(1)CI/CD(1)macro task(1)react-native fabric(1)moduleResolution(1)conditional-typing(1)libuv(1)npm latest(1)gpg(1)post type(1)github action(1)반공변성(1)eslint ignore js(1)iOS(1)has no upstream branch(1)corepack(1)large feature(1)공변성(1)오브젝트 쿼리(1)github actions(1)react-native turbomodule(1)이변성(1)commit(1)squash merge(1)npm latest tag(1)Wheel Picker(1)submodule(1)automations(1)voip notification(1)setInterval(1)setTimeout(1)expo install without eject(1)M:1(1)로또 자동화(1)ListEmptyComponent(1)background(1)eslint split rules(1)VoIP(1)github packages(1)maven injection(1)playlist(1)query-params(1)microtask(1)Native Module(1)type(1)custom environment(1)eslint-typescript ignore js(1)v8(1)package latest(1)turbomodule(1)real-device(1)monorepo(1)중첩된 오브젝트 쿼리(1)Query String(1)wifi debug(1)jest(1)CJS(1)jest config(1)reactnative(1)app(1)expo npm module(1)queueMicrotask(1)Side Project(1)nested object query(1)squash(1)expo npm library(1)signing(1)axios params(1)params(1)eslint various rules(1)gpg sign(1)autoSetupRemote(1)background process(1)remote(1)npm publish(1)interceptor type(1)eslint rules by files(1)wireless debug(1)조건부함수(1)

Axios 에서 쿼리 파라미터 제대로 쓰기

Axios 를 사용하다 보면, GET 형식에 params 를 사용할때가 종종 생긴다. 이는 단순한 형태로는 잘 동작하지만, 아래와 같이 중첩되기 시작하는 순간 제대로 stringify 처리를 하지 못한다. 이를 해결해주기 위해서는 params 에 직접 한땀한땀 적어서 넣어주어야 할까? 아니다, 역시나 해결책은 이미 준비돼있다. Axios 에는 paramsSerializer 라는 인터페이스를 열어주고 있다. 이곳에 내가 처리하고 싶은 방식으로 함수를 넘겨주면, 기본적으로 제공되는 serializer 대신 실행된다. 우리는 중첩된 오브젝트를 넣는게 목표이기 때문에, qs 라는 강력한 모듈을 사용해서 처리해줄 수 있다. 참고로 query-params 에서 배열, 오브젝트는 아래와 같은 컨벤션을 가지고 있다.

2021년 7월 29일
·
2개의 댓글
·