URLSearchParams로 Url Query String 가져오기

바닐라 자바스크립트로 URL의 쿼리 스트링을 가져오는 방법을 알아보았다. React-Router-Dom이나 Next에서는 해당 기능에 대한 훅이 존재하지만, 바닐라 자바스크립트로도 간단히 이를 구현할 수 있다. 우선, window.location.search으로 URL에서 쿼리만 가져올 수 있다. console.log(window.location.search); // '?search=hihihi' 그리고 해당 String을 URLSearchParams의 인자로 전달하면, key-value의 형태로 값을 구조화할 수 있다. const searchParams = new URLSearchParams(window.location.search); for (const [key, value] of searchPara..

• format_list_bulleted JavaScript
• · 2023. 10. 3.
• textsms

URI와 URL

URL(Uniform Resource Locator)과 URI(Uniform Resource Identifier)은 웹에서 리소스를 식별하는 데 사용되는 용어다. 🍅 둘 다 리소스를 가리키는 문자열로 생각할 수 있지만, 약간의 차이점이 있다. URI는 리소스의 고유 식별자로서, 리소스의 위치, 이름 또는 두 가지의 조합으로 구성될 수 있다. 즉, URI는 리소스를 식별하기 위한 일반적인 개념으로, URI는 더 넓은 범위의 개념이기 때문에 URL도 URI에 포함된다. URL은 URI의 하위 집합으로 URL은 리소스의 위치를 나타내는 특정한 형식의 문자열이다. 즉, URL은 리소스의 주소로 생각할 수 있고, URL은 프로토콜(예: HTTP, FTP)을 포함하여 도메인 이름 또는 IP 주소, 경로 등으로 구성..

• format_list_bulleted 기타
• · 2023. 6. 26.
• textsms

http 통신 request의 query, params, body (with express)

express를 사용하여 서버를 만들면 URI를 통해서 API를 사용할 수 있다. API 문서를 통해서 서버의 자원을 사용할 수 있다. 그렇다면, 클라이언트가 원하는 데이터를 얻기 위해서 URL에 데이터를 추가적으로 더 주었을 때(URI), express에서 어떻게 이 데이터를 받아와 response할 수 있을까? query const express = require('express'); const router = express.Router(); router.get('/hi', findAll); /hi?name=Kim&age=33 과 같은 URI에 접근하면, 서버에서 req.query 를 통해 데이터를 받을 수 있다. query를 시작할 때 ?를 쓰고, 여러 데이터를 받을 때는 &로 데이터를 구분한다. ..

• format_list_bulleted Node
• · 2023. 3. 25.
• textsms