# Query String
useSearchParams를 이용한 query string 여러개 구현
프로젝트로 명품 대여 서비스 사이트 구현중인데 카테고리, 브랜드 필터링이 필요해서 이런식으로 url 구현이 필요했다. useSearchParams를 이용하면 쉽게 구현할 수 있다기에 카테고리를 일단 필터링 해봄 Filters.jsx 받아올 쿼리스트링이 늘어나
[React] 쿼리 스트링(Query String)
URL의 한 부분으로서, 요청하고자 하는 URL에 부가적인 정보를 포함하고 싶을 때 사용 (구체적으로 더 정렬되고 특정된 형태의 정보를 요청) 형태 쿼리스트링: key=value 형태의 문자열로 표현 (key=value 페어의 개수 제한은 없음) ? : 쿼리스트링의

[React] 쿼리 스트링
쿼리스트링은 URL의 한 부분이며 요청하고자 하는 URL에 부가적인 정보를 포함하고 싶을 때 사용한다.기존 URL 요청 예시)프론트: /list -> 리스트 요청 /detail/ ->상세 페이지 요청백엔드: /signin -> 로그인에 대한 응답 /prod

[TIL] Path Parameter & Query Parameter (ft. Routing Hooks)
동적 Routing 관련한 Path Parameter & Query Parameter 의 개념과 차이에 대해 정리하고, URL Parameter 정보를 이용하기 위해 React에서 사용하는 Hook들을 정리해 보았다.url 경로에서 : 다음에 오는 값위의 예시에서는 i

Query String feat. useLocation & useSearchParams
우리가 웹 페이지를 돌아다니다 보면 어떤 상품이나 정보가 리스트로 나열 되어있는 것을 볼 수 있다. 만약 1억 개가 넘어가는 리스트가 있다면 우리는 쉽게 그 리스트를 볼수 없을것이다. 이때 Query String은 그 리스트를 최신순, 평점순 등 구체적인 요청이 가능하

[Django] 장고 Forms를 활용한 효율적인 데이터 유효성 검사 및 저장#1
1) > forms의 method의 enctype은 POST 타입에서 유효하다. GET 타입에서는 urlencoded 방식이 강제되기 때문이다. urlencoded라 하면, 예를 들어 네이버 검색창에 특정 검색어를 입력했을 때, 주소창에서 query string이 ? 다음에 key=value& 조합이 반복되는 인코딩 방식을 말한다. 강사님께서 '인코딩된 문...
Query String vs Path Variable
Query String이란 서버에게 무엇이 필요한지, 혹은 클라이언트에게 무엇이 필요한지 묻는 문자열을 뜻한다.Query String은 key=value 형태로 나열되어 있으며, 여러 파라미터를 받아올 경우에는 &을 붙여 연결해준다.과 같이 ? 뒤에 key-value값
HTTP API Request
HttpServletRequest 웹브라우저로부터 WAS가 전달받은 request 정보를 저장한 객체로 Header정보, Parameter, Cookie, URI, URL과 body를 담고 있고 이에 대한 읽기 메소드를 지원하고 있다. HttpServletRespon
Path variable, Query String
웹에서 특정 데이터를 전송하고 받기 위해서는 어떤 경로(End-Point)에 요청할 것인가는 중요한 문제이다. 우리는 데이터를 받고, 때로는 전송을 하기 위해서 다양한 방식을 쓰는데 이 때 효율적으로 경로(End-point)를 설정하는 방식에 대해 알아보고자 한다.만약

[동적라우팅]다중필터 처리하기 (3편: 카테고리 depth별 서로다른 queryString 만들기)
지난시간까지 했던 다중필터는 의류의 TYPE이라는 카테고리가 지닌 top, bottom, acc라는 속성안에서는 잘 돌아가지만, 카테고리가 바뀌어버리면 백엔드에 올바른 queryStringd을 줄 수 없다는 문제가 생겼다.이에 신박한 접근을 떠올리게 되는데,,,클릭의

[동적라우팅]다중필터 처리하기 (2편:Query Parameter를 사용해보자)
이번에는 좌측에 위치한 필터들을 클릭했을 때, 해당 필터에 해당하는 제품들을 보여주는 기능을 구현해보고자 한다.한 번 클릭하면 필터가 활성화되고, 두 번 클릭하면 해제되는 형태이다. 토글등등 다양한 방법을 고민해보았는데, 결국 아래 3단계로 완료할 수 있었다.필터를 클
.png)
Nodejs - 쿼리스트링(2)
지난 포스팅에서 쿼리 스트링에 대해 학습했다. id에 해당하는 값을 다르게 바꾸면서 다른 웹페이지 내용을 출력할 수 있게끔 해주는 것이 쿼리 스트링의 주된 골자였다.그런데, 만약 우리가 어떤 사이트에 접속한다고 했을 때, 주소창의 쿼리스트링을 변경해가면서 접속하지는 않
.png)
Nodejs - 쿼리스트링
어플리케이션. 즉, 우리가 앱이라고 했을 때, 사용자는 앱이 항상 똑같은 내용만을 출력하는 것을 원하지 않을 것이다. 사용자의 입력(조작)에 따라 다른 내용을 출력해주는 기능을 담고 있어야 진정한 의미의 앱이라고 할 수 있다. 우리는 그중에서도 웹을 다루는 어플리케이션

React : params 사용하기 URLSearchParams 사용법 +) npm i query-string
이런식으로 ? 뒤에 딸려들어가는 key 와 value 값을 params 라고 한다.url주소와 상관없이 params로 들어가면 동일한 url에서도 여러가지 필터들을 겹쳐 표현된다.우리들이 필터를 사용해 검색할때 검색 정보를 들고가는 역할을 한다.https://

[React] react-router-dom
History는 브라우저의 세션 기록을 관리하는 객체로 해당 객체의 메서드인 goBack(), replace(), push()등을 사용하여 원하는 라우팅을 할 수 있다. 세션사용자가 웹 브라우저를 통해 웹서버에 접속한 시점으로부터 웹 브라우저를 종료하여 연결을 끝내는
Axios 에서 쿼리 파라미터 제대로 쓰기
Axios 를 사용하다 보면, GET 형식에 params 를 사용할때가 종종 생긴다.이는 단순한 형태로는 잘 동작하지만, 아래와 같이 중첩되기 시작하는 순간 제대로 stringify 처리를 하지 못한다.이를 해결해주기 위해서는 params 에 직접 한땀한땀 적어서 넣어
TIL. 36 React - Dynamic Routing
Route 경로에 특정 값을 넣어 해당하는 페이지로 이동할 수 있게 하는 것 을 동적 라우팅Path Parameter 라우트 경로 끝에 들어가는 id 값들을 저장하는 매개 변수이며, Path Parameter는 Routes 컴포넌트 안에서 아래와 같이 정의된다.hist
GET vs POST
rest api를 설계할 때 쿼리 파라미터가 복잡해지거나 엄청 길어질 가능성이 있을 때get이 아닌 post를 사용하고 있었다.그 이유가... url 길이 제한에 쿼리까지 포함한다는 잘못된 생각 때문이었다.2048 bytes로 잘못 알고 있었는데 사실 HTTP 표준에는