# querystring

36개의 포스트

Query string vs Path parameter

Query string > /users?id=123 URI 파라미터 영역을 구분하여 사용, ? 뒤에 id라는변수에다 key=value쌍으로 값을 담아 전달하는 방식이다. @RequestParam 어노테이션을 사용한다. Path parameter(variable) > /users/123 URI의 일부로 파라미터 값을 사용한다. @PathVariable 어노테이션을 사용한다. Query string vs Path parameter Path param은 필수로 들어가야하는 요소에 보통 사용 Query string은 선택적인 요소에 사용한다(기본값 지정 가능) 특정 자원을 요청할 때는 Path Param을 사용하고 정렬이나 추가 필터링에는 Query String을 사용한다.

2023년 7월 24일
·
1개의 댓글
·

elasticsearch match vs query_string 의 score 계산법

기존에 match 쿼리를 쓰다가 최근 query_string 쿼리를 사용하는 것을 검토할 일이 생겼다. 그런데 결과가 생각한거랑 다르게 나왔다. > 💁‍♀️사전 테스트 조회 결과 내가 예상했던 결과는, 3번이 먼저 나오는 것이였다. 왜냐하면.. 아직 체리샴푸 소중한시간 라운드카라 맨투맨 에서 라운드카라 , 맨투맨 두 단어가 모두 B에 나왔기 때문이다. 그런데 결과를 보면 1번이 scoring이 가장 높다. 🌿과정 BM25 계산법에 의해서 그렇겠지..? 하다가 문득 기존에 match쿼리로 다시 조회를 해봤다. 조회 결과 에엥? 그랬더니 내가 예상했던 것처럼 1번이 나온다. ㅋㅋㅋ scoring도 달라짐.. 결국 키는 match 쿼리와 query_string 쿼리의 차이였다. 💅match vs query_string 스코어 계산방법 query_string

2023년 6월 18일
·
0개의 댓글
·
post-thumbnail

Controller Querystring and Path Variable Mapping

1. 쿼리스트링과 주소 변수 매핑 구체적인 데이터 요청시 쿼리스트링 또는 주소 변수 매핑 이 필요합니다. 스트링부트에서는 '주소 변수 매핑'이 훨씬 편리해서 주로 사용합니다. 강의에서는 통닭집에 비유해 개념을 설명합니다. 요는, 서버나 데이터베이스에 요청을 할 때 무엇을 원하는지 구체적으로 전달한다는 것입니다. 예를들어 '도메인?type=양념'의 형식으로 요청하는 것이 '쿼리스트링', '도메인/양념'의 형식으로 요청하는 것이 '주소 변수 매핑'이라고 합니다. 실습 지난 프로젝트에 이어 web 패키지에 클래스를 하나 생성합니다. ![](https://velog.velcdn.com/images/k1m2njun/post/244b49f7-c290-4bf8-9323-1d3eeba780db/imag

2023년 2월 21일
·
0개의 댓글
·
post-thumbnail

[TIL] 리액트 쿼리스트링

쿼리스트링이란? URL의 한 부분으로 요청하고자 하는 URL에 부가적인 정보를 포함하고 싶은 경우 사용 쿼리스트링의 사용 예시 http://myhomepage.com/products?sort=popular&sort=new url에서 ?를 통해 쿼리스트링이 시작된다는 표현을 할 수 있다 쿼리스트링은 key=value 형태의 문자열로 표현된다 쿼리스트링 내부에서 key=value 페어를 구분할 때는 & 연산자를 이용한다. 리액트에서 쿼리스트링을 사용하는 경우 navigate("/products?sort=new") 와 같이 사용 가능하며 렌더링은 /products URL에 해당하는 컴포넌트를 그려준다. 리액트에서 쿼리스트링 가져오기 앞선 포스팅과 같이

2023년 1월 11일
·
0개의 댓글
·
post-thumbnail

[React-Router-dom-v.6] useNavigate로 props 전달하기 (Querystring 포함)

토이 프로젝트 진행 중 router를 이용해서 Link to가 아닌, 특정 상황에서 input button을 클릭해서 fetch된 데이터를 전달해야하는 경우가 생겼다. 🍕 샘플 코드 path 설정해주기 데이터를 보낼 컴포넌트 useNavigate를 사용해서 가공된 데이터를 state로 보내준다. 데이터를 받는 컴포넌트 state로 받아온 데이터는 state.XXX로 접근 가능하다. > 데이터가 이동 후 잘 넘어오는지 확인하고 싶은 경우, 데이터를 받는 컴포넌트에서 console.log(state)와 같이 출력해보자.

2022년 12월 12일
·
0개의 댓글
·
post-thumbnail

Query String

개념 사용자가 원하는 정보를 검색하기 위해 요청하는 것 사용자가 입력 데이터를 전달하는 방법 url 주소에 데이터를 파라미터로 통해 넘기는 것 구조 Key = Value 여러개 사용시 '&' 기호 사용

2022년 12월 4일
·
0개의 댓글
·
post-thumbnail

쿼리스트링(Query String)이란?

❓ 쿼리스트링(Query String) 이란 > - URL의 뒤에 입력 데이터를 함께 제공하는 가장 단순한 데이터 전달 방법이다. 웹개발에서 데이터를 요청하는 방식 중 주로 GET방식으로 데이터를 요청할 때 쓰이는 방법. URL주소뒤에 물음표(?)를 붙이고 key1=value1&key2=value2...방식으로 데이터를 요청한다. 나는 선택화면에서 번호를 선택하면 그 번호에 따라 메인 페이지의 url을 www.url.com?id=3 이런식으로 설정해서 id 번호를 받아왔다. 또한 api요청을 보낼때에도 query string에서 가져와서 요청하면 되므로 편하게 사용했다. 사용법 프로젝트에서 router를 사용했기 때문에 useNavigate를 이용해서

2022년 10월 22일
·
1개의 댓글
·

정렬filter, pagenation 쿼리스트링으로 적용하기

팀프로젝트로 상품리스트 불러오기를 구현해 보았다. 데이터베이스의 구조는 items Table의 id(pk)를 기준으로 subcategories Table의 itemid(fk)가 참조하고 있고, subcategories Table의 maincategoryid(pk)를 maincategories의 id(fk)가 참조하고 있다. 홈페이지에서 메인카테고리 중 한가지를 클릭 했을때 그에 해당하는 서브 카테고리들과 해당 아이템들, 태그들이 다 불러와지는 것을 구현해야 했다. 따라서 위 코드를 보면 알 수 있듯이, items 테이블을 기준으로 생각 했을 때 main과 sub를 inner join으로 가져왔고, tags table은 모든 아이템에 tag가 붙어있는게 아니기 때문에 inner join으로 가져오면 null값이 있는 column은 불러와지지 않아서, left join으로 가져왔다.(likes도 마찬가지) 필요한 모든 것을 다 불러온 후 메인 카테고리를 클릭했을 때 그

2022년 10월 2일
·
0개의 댓글
·
post-thumbnail

[React] Link 컴포넌트로 페이지 이동하기

쇼핑몰 사이트를 보면 상세페이지 안에 리스트 페이지로 넘어갈 수 있는 작은 Navigation Bar가 존재한다. Home을 누르면 main 페이지로 이동 모니터를 누르면 모니터 카테고리에 분류되어 있는 제품 리스트 페이지로 이동 일반을 누르면 일반 모니터 제품 리스트로 이동 Navigate 컴포넌트 만들기 Navigate.js라는 파일로 따로 이 부분만 컴포넌트화 시켜 작업했다. ![](https://velog.velcdn.com/images/gamangee/post/09ea32c7-7128-43fd-a5e6

2022년 9월 25일
·
0개의 댓글
·

POST와 GET의 차이

HTTP란? > 웹상에서 클라이언트와 서버 간의 데이터를 주고받을 수 있는 프로토콜 클라이언트가 HTTP프로토콜을 통해서 서버에 요청을 보내면 서버가 이에 맞는 응답을 클라이언트에게 전송 💡HTTP Method 중 POST와 GET방식의 차이 • 클라이언트는 url을 주소창에 입력하고 서버는 클라이언트의 요청에 응답하며 작동 • 클라이언트가 서버로 보내는 데이터를 HTTP패킷이라고 함 • HTTP패킷은 헤더와 바디로 나뉘어짐. • 헤더에는 HTTP METHOD방식, 클라이언트와 브라우저, 접속하고자하는 URL등의 정보를 담고 있음. • 바디는 보통 비어있으며 정보를 담아서 서버에 요청 가능. ☝️GET방식의 특징 • 바디 부분은 비어있고 Content-Type(바디 콘텐츠 타입을 명시하는 헤더필드)

2022년 7월 2일
·
0개의 댓글
·
post-thumbnail

[Udemy] React 실전(감정일기장) - 페이지 라우팅 (3)

React 실전 (Project) Udemy - 한입크기로 잘라 먹는 리액트 📌 감정일기장 만들기 ☑️ React-Router-Dom의 유용한 기능 활용 프로젝트를 더 견고하게 만들기 React-Router-Dom을 활용해 여러가지 기능을 업그레이드 v6 : 버전 체크 Path Variable 경로의 변수를 사용하는 기법 useParams를 사용하여 어떤 페이지를 보여줘야할지 전달 Query String useSearchParams를 사용하여 URL과 함께 데이터를 전달할 수 있는 가장 쉽고 간단한 방법

2022년 5월 18일
·
0개의 댓글
·
post-thumbnail

[Node.js보충수업] 3교시 QueryString

URL에 Input을 할 수 있나요? 네 할수 있습니다. url을 통해서도 정보를 전송할 수 있습니다. 웹 서비스를 이용하다 보면 주소창에 http://www.dss.com/search?sch=nodejs&id=test 위의 형식과 같이 있는 것을 볼 수 있습니다. 여기에서 무엇이 어떤 역할을 하는지에 대해서 알아보겠습니다. QueryString 이전 1교시때 만들었던 app.js 에서 해당 문구를 추가해 봅시다. 해석해보자면 localhost:3000/learnquery에 접속하였을때 test 값을 반환해라가 되겠습니다. 그러면 url에 test 값을 어떻게 보낼까요? Url?key=value 해당 url 뒤에 '?' 를 붙이고 키와 값을 첨가해줍니다. 그래서 localhost:3000/learnquery?test=12345 로 접속하게 된다면 해당 페이지는 12345 값을 반환해줍니다. ![](https://velog.vel

2022년 5월 1일
·
0개의 댓글
·
post-thumbnail

[동적라우팅]다중필터 처리하기 (3편: 카테고리 depth별 서로다른 queryString 만들기)

지난시간까지 했던 다중필터는 의류의 TYPE이라는 카테고리가 지닌 top, bottom, acc라는 속성안에서는 잘 돌아가지만, 카테고리가 바뀌어버리면 백엔드에 올바른 쿼리스트링을 줄 수 없다는 문제가 생겼다. 이에 신박한 접근을 떠올리게 되는데,,, >클릭의 대상이 되는 속성버튼의 id 자체를 쿼리로 입력하면되잖아? 그리하여 상수데이터를 위와같이 변경하게 되는데, 이는 추후에 대카테고리별로 서버에서 카테고리 속성을 달리 가져오는 경우에는 무용지물이 되는 단점이 있고. PR을 올리면 가차없이 철퇴를 맞기에 부족함이 없는 로직이라고 할 수 있겠다... 잠시나마 미쳤었던 마음을 추스리고, 각각의 카테고리속성과 카테고리의 이름을 모두 받아서 switch로 분리하고 처리하는 로직으로 재구현했다.

2022년 4월 2일
·
1개의 댓글
·
post-thumbnail

[동적라우팅]다중필터 처리하기 (2편:Query Parameter를 사용해보자)

이번에는 좌측에 위치한 필터들을 클릭했을 때, 해당 필터에 해당하는 제품들을 보여주는 기능을 구현해보고자 한다. 한 번 클릭하면 필터가 활성화되고, 두 번 클릭하면 해제되는 형태이다. 토글등등 다양한 방법을 고민해보았는데, 결국 아래 3단계로 완료할 수 있었다. 1. 필터리스트 스테이트 관리 필터를 클릭할때마다 state로 선언한 filters에 핕터목록을 배열로 넣어준다. 단 이미 해당 필터가 들어있을때에는 splice로 제거한다. 2. 백엔드에 GET요청할 URL 생성 1번에서 만든 필터를 백엔드와 약속한 형태로 전처리한 후 url이라는 state를 최신화한다. 3. useEffect로 렌더링 요청 url값이 바뀔때마다 바뀐 url로 fetch를 요청하도록 useEf

2022년 4월 2일
·
0개의 댓글
·

[동적라우팅]다중필터 처리하기 (1편:라우팅개념)

1. 라우팅 개념정리하고가실게요~ 1-1.라우팅이란 url주소를 기준으로 다른 view를 보여주는 것 1-2. SPA에서의 라우팅이란 화면을 이동하여 새로고침하지 않고, 동적으로 화면(뷰)를 그려주는 기술 -react에서는 recat-router-dom을 활용하여 SPA라우팅을 구현 1-3.정적라우팅과 동적라우팅 1)정적라우팅 : /, /users , /products와 같이 정해진 경우에 대해서만 경로를 표현 2)동적라우팅 : url마지막에 특정 id값이 들어감. id값에 따라 무수히 많은 url이 생성됨 ex)/products/1043 1043번째로 등록된 제품 상세페이지 2. 동적 라우팅 처리방법 2가지 우리가 구현하고자하는 것은, SIZE, 제품Type(상의, 하의, 악세서리), 캐릭터(브랜드) 각각의 속성을 다중으로 처리하는 것이다. 1)Path Parameter 해당기능은 useNa

2022년 4월 1일
·
0개의 댓글
·
post-thumbnail

TIL-62 React 하나의 페이지에서 2개의 API 사용하기

리스트 페이지에서 상세페이지 넘어가는 상황에서 상세페이지에서 2개의 API를 관리해야 하는 일이 생겼다. 다니는 회사가 구독형 서비스인데 이번에 단품이 추가되면서 상세페이지에서 구독형 상품 API, 단품 API를 다르게 호출해야 하는 상황이었다. 우선 리스트페이지에서 onClick이다. 자바스크립트 내장 함수인 location.search를 이용하여 URL 물음표 뒤에 있는 파라미터들을 가져올 수 있다. 그 파라미터로 type을 업데이트를 하고 type을 가지고 각각의 일치하는 API를 호출하면 된다.

2022년 3월 1일
·
0개의 댓글
·
post-thumbnail

[KDT]FCFE - 8주1일 React - Router - DOM

React Router queryString 주소 뒤에 ?key=value 를 입력하는 형식을 queryString 이라고 한다. 사용법 > ?name=mark 내장 함수 사용하기. query-string npm으로 받아서 사용하기 > npm i query-string Switch 여러 route 중 순서대로 먼저 맞는 하나만 보여준다. exact를 뺄 수 있는 로직을 만들 수 있다. 가장 마지막에 어디 path 에도 맞지 않으면 보여지는 컴포넌트를 설정해서, "Not Found" 페이지를 만들 수 있다. jsx 링크로 라우팅 이동하기 react-router-dom 에서 Link 태그 가져다 이용하기 NavLink 로 라우팅 이동하기 JS 로 라우팅 이동하기 props 전달하기 일반적인 전달 withRouter 사용하기 (HOC)

2022년 1월 10일
·
0개의 댓글
·

[개발지식] URL 활용하여 variables 확보하기

1. 개요 URL은 단순히 get method나 link의 개념이 아니라 variables을 얻을 수 있는 중요한 도구로 활용할 수 있다. 2. 현재 URL 주소 확보하기 단순히 현재 URL 주소를 확보하고 싶다면 useLocation을 사용하거나, window.location.pathname 등을 사용할 수 있다. 3. query String을 통한 변수 확보하기 queryString을 이용한다면 URL에 입력한 변수를 확보할 수 있다. 이는 useParams를 통해서도 확보할 수 있다. query string 관련 - URL에서 변수 확보하기 관련 참조 링크 4. 참조 링크 https://velog.io/@yiyb0603/React-Router-dom%EC%9D%98

2021년 12월 21일
·
0개의 댓글
·
post-thumbnail

Express (QueryString, Params)

노란색 형

2021년 12월 7일
·
0개의 댓글
·

Week2 - Day3(REST API & Querystring)

지난 시간에 REST API를 사용하는 방법을 배웠다. 그리고 이번 Day3에선 과제만 있었는 데, 여기서 삽질을 꽤나 해서 기록으로 남겨놔야겠다 싶었다. QueryString이 뭔데... 이번에 URL에서 querystring을 인자로 받아서 서버에서 처리해주는 게 과제로 나왔는 데, 진짜 오늘 하루종일 내내 이해가 안가서 삽질도 많이 했다. 1. python에서 string 처리 python에서 string 함수 쓸때 대개 str()을 많이 쓰기도 했고, 여러 언어를 접하다보면 헷갈릴때가 너무 많아서 ㅠㅠ 오늘 어이없는 실수를 했다. 지난번에 url에서 을 넣으면 int형의 변수 num을 인자로 받을 수 있다 했다. string으로 받을 때는 str가 아니라 꼭 `로, string`이라는 풀 네임으로 다 적어줘야 적용된다. 아니면 나처럼 이렇게 `LookupError: the converter '

2021년 7월 27일
·
0개의 댓글
·