안녕 모두들! 오늘은 코드의 의미를 크게 향상시킨 빠른 팁을 공유하겠습니다.

프런트엔드 개발이든 백엔드 개발이든 매개변수를 사용하여 URL을 구성해야 하는 경우가 많습니다. 그렇죠?

저는 요청의 URL을 다음과 같이 작성하곤 했습니다:

const url = `http://localhost:3000/endpoint/param1=${var1}&param2=${var2}&param3=${var3}`

우리는 이 URL이 읽고 유지하기 어렵다는 점에 동의합니다. 우리는 항상 어떤 부분이 매개변수인지, 어떤 부분이 변수인지, 그리고 어떤 부분이 자바스크립트 구문인지 식별해야 합니다.

이 의미론적 문제를 해결하기 위해 동일한 작업을 수행하지만 더 효율적이고 우아한 방식으로 수행하는 URL 생성자를 발견했습니다.

이제 다음과 같이 동일한 코드를 다시 작성할 수 있습니다.

const url = new URL('http://localhost:3000/endpoint')

url.searchParams.set('param1', var1)
url.searchParams.set('param2', var2)
url.searchParams.set('param3', var3)

코드는 수행 중인 작업을 명확하게 나타냅니다. 첫 번째 줄에서는 기본 URL을 생성하고 다음 줄에서는 필요한 검색 매개변수를 추가합니다.

완료. 이제 url 변수에는 이전과 동일한 검색 매개변수가 포함되지만 이제 URL 클래스를 사용하므로 코드가 훨씬 간단해지고 유지 관리가 쉬워집니다.

당신은 어때요? 이전에 URL 클래스를 사용해 보셨나요? 어쩌면 다른 목적으로? 여러분의 경험을 저에게 자유롭게 공유해 주세요.