inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

[32-07] RCC와 RSC 합성

fetchTravelproductsIPicked 관련 질문 드립니다

81

mh

작성한 질문수 7

0

image.pngimage.png

해당 API 요청 시

image.png

사진처럼 $regex 오류 때문에 data를 받아오지 못하고 있습니다.

백엔드 문제일까요?

react react-native 하이브리드-앱 graphql next.js

답변 2

0

노원두

안녕하세요! mh님!

search 키워드 부분에 전달된 값을 백엔드에서 검색하는 과정에서 실패한 것 같아요!
search 키워드가 문자열 형태로 제대로 넘어가고 있는지 확인해 주세요!

* 만약, 제대로 넘어가고 있는데 검색이 안되는 경우라면, 해당 search 키워드를 알려주시면 더 상세히 답변드릴게요!

0

mh

  1. fetchTravelproductsIPicked

image.png스크린샷 2025-08-20 180128.png

search 키워드랑 page 없이 요청하고 있습니다.

useQuery-picked 부분에

variables : { search: "" }

를 추가 시켜주면 정상적으로 받아와지는데 없을 경우 $regex 오류가 발생합니다.

 

  1. fetchPointTransactionsOfBuying

image.png

'마이페이지 - 포인트 사용 내역 - 구매내역'에서 해당 API를 요청하고 있습니다.

상품 판매자의 이름을 가져오려고 seller.name을 요청했는데

image.png

해당 오류가 발생합니다.

1번, 2번 오류 원인이 제가 잘못 작성해서 발생하는 것인지 궁금해서 여쭤봅니다..!

 

0

노원두

안녕하세요! mh님!

정말 열심히 하고 계시는군요!
바로 답변 드려볼게요!


1. 먼저 위에 search: "" 부분이 없으면 에러가 나는 것은, 보통은 백엔드단에서 api를 만들 때, null값에 대한 처리를 해주게 되는데, 이러한 처리과정이 빠진 것 같아요!

따라서, 현재는 search: 가 없을 때 "" 비어있는 값이라도 문자열 형태로 넣어줘야 작동하고 있어요!
이는 백엔드 api의 보완이 필요한 점으로 보입니다!
이번달 내로 업데이트를 예정하고 있습니다.



2. 이 부분은 API 설계 과정에 따라서 달라져요!
graphql의 경우, 프론트엔드에서 요청을 어떻게 하느냐에 따라서, 공격으로 변질될 수도 있는데요!
쿼리 깊이에 제한을 두지 않는 경우, 무한한 depth 로 들어가는 요청을 만들어서 공격하면, 서버에서 한 번에 방대한 양의 데이터를 조회하게 되어 다운되게 됩니다.

따라서, 보통 백엔드 개발자는 프론트엔드와 협의하에 어느 깊이에서 쿼리를 강제 중단할지 설계한답니다!


아래는 해당 공격과 관련된 출처를 남겨드립니다!

image.png

참고) https://graphql.org/learn/security/?utm_source=chatgpt.com#depth-limiting


만약, 실무에서 이러한 상황에 마주치게 되시면 백엔드 개발자분과 협의하에 쿼리 깊이를 조정해 주세요!



0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.
mh님, 질문해주신 내용을 살펴보니, fetchTravelproductsIPicked 요청 시 $regex has to be a string 오류가 발생하고 있다는 점에서 문제가 발생하고 있는 것 같습니다. 이 오류는 GraphQL 쿼리나 백엔드 로직에서 정규표현식이 문자열이 아닌 형태로 전달되고 있음을 나타냅니다.

이 문제는 주로 백엔드 쪽에서 쿼리를 처리하는 부분에서 발생할 수 있습니다. 특히, MongoDB나 다른 데이터베이스에서 필터링을 할 때 $regex 연산자가 올바른 문자열 형태의 정규표현식을 기대하는데, 다른 타입의 값이 전달되고 있는 경우입니다. 다음과 같은 방법으로 문제를 해결할 수 있을 것 같습니다:

  1. 백엔드 코드 점검: fetchTravelproductsPicked.service.js 파일의 53번째 줄 근처에서 $regex를 사용하는 부분을 확인해 보세요. 인자로 전달되는 값이 문자열인지, 올바른 정규표현식인지 점검해 보세요.

  2. 프론트엔드 코드 확인: GraphQL 쿼리를 보낼 때 search 인자가 문자열형태로 잘 전달되고 있는지도 점검해야 합니다.

  3. 디버깅: $regex 오퍼레이션을 사용하는 백엔드 코드를 디버깅하여 어떤 값이 입력되고 있는지 로그를 통해 확인해 보는 것도 좋습니다.

더 자세한 디버깅과 해결책은 서버 쪽의 코드나 로그를 보면서 판단해야 할 것 같습니다. 문제 해결에 도움이 되셨길 바랍니다. 추가 질문이 있으면 언제든지 문의하세요!

관련 이미지:
- GraphQL 오류 이미지

더 궁금하신 내용이 있다면 말씀 주세요!

11강 23:35부터 막혀서 질문 드려요.

0

72

2

API 주소

0

83

1

하이브리드앱 과제 레퍼런스 코드

0

107

2

조건문, 반복문 너무 어려움

0

94

1

고농축 백엔드와 완벽한 프론트 강의 차이?

0

113

2

flex를 grid 처럼 만들기 질문드립니다.

0

93

2

유저 포인트 관련해서 질문 드립니다

0

69

1

npx create-react-app

0

93

1

강의에서 사용하는 api 접속 불가

0

102

2

강의 커리큘럼에 대해 질문이 있습니다.

0

102

2

윈도우 -> 맥 파일 옮기기 / 실행

0

125

1

fetchUser 요청시 userPoint.amount

0

62

2

npm 배포 후 import 시 오류사항

0

90

2

koreanjson 관련 사이트가 접속이 안되요

0

66

2

17강 질문

0

84

2

tailwinde-css

0

72

2

04-02 Next 페이지 이동

0

78

2

[CSS&JS 마스터]공부하는 속도, 코드 리뷰

0

80

2

GRAPHQL 활용 과제

0

79

2

노란색 경고줄

0

51

1

181. [02-04] setState의 원리 질문

0

60

2

graphql 관련 질문입니다

0

62

2

node.js 설치방법

0

160

1

[JS 10-2-3] 트렌드 및 방향 - 3단계 강의 질문

0

53

2