자바스크립트를 이용한 URL 파라미터 이해 및 활용하기

카테고리 없음

softitexpert 2024. 11. 6. 01:14

웹 페이지가 더욱더 동적이고 사용자 맞춤형으로 발전하면서 URL 파라미터는 웹 개발에서 꼭 필요한 요소가 되었습니다. 이 글에서는 자바스크립트를 통해 URL 파라미터를 넘기고, 읽고 활용하는 방법을 알아보겠습니다.

1. URL 파라미터란?

URL 파라미터는 웹 주소의 끝부분에 추가 정보나 명령을 전달하기 위한 방식입니다. '?key1=value1&key2=value2'와 같은 형식으로 사용되며, 이를 통해 사용자가 어떤 페이지를 보거나 어떤 데이터를 서버로 전송해야 하는지를 결정하게 됩니다.

URL 파라미터를 넘기는 것은 생각보다 쉽습니다. 예를 들어 로그인이 성공하면 특정 페이지로 이동하면서 사용자 ID 등 필요한 정보를 URL 파라미터로 넣을 수 있습니다.

동작	설명
로그인 성공시	window.location.href = 'dashboard.html?user=JohnDoe';

위 예제에서는 사용자가 로그인에 성공하면 'dashboard.html' 페이지로 이동되며, 'user'라는 키로 사용자 이름을 전달합니다.

URL 파라미터를 서버로 전달했다면, 이제는 이를 읽어서 필요한 작업을 수행할 차례입니다. **JavaScript**에서는 이를 손쉽게 읽어올 수 있습니다. 다음은 JavaScript의 URLSearchParams를 활용한 예제입니다.

위의 코드 스니펫은 현재 페이지의 URL에서 'user' 파라미터의 값을 읽어오는 예시입니다.

URL 파라미터를 활용하여 페이지 내에서 다양한 기능을 제공할 수 있습니다. 예를 들어, 사용자가 특정 카테고리를 선택한 경우, 해당 카테고리의 제품만 보여줄 수 있습니다.

다음은 간단한 예제로, URL 파라미터를 사용하여 제품 리스트를 필터링하는 방법입니다.

URL 파라미터를 사용할 때는 SEO 최적화도 고려해야 합니다. 검색 엔진은 기본적으로 '?' 이후의 파라미터를 무시하는 경향이 있으므로, 중요한 정보는 URL 경로에 직접 포함시키는 것이 좋습니다.

예를 들어, 제품 ID를 전달할 때 'products/123'의 형태로 사용하면 더 좋습니다.

URL 파라미터에 중요한 정보나 민감한 데이터를 포함시킬 때는 항상 보안을 고려해야 합니다. 모든 사용자가 해당 URL을 공유 및 본문에서 쉽게 확인할 수 있기 때문입니다.

예를 들어 사용자 비밀번호나 개인 정보를 파라미터에 담지 않도록 주의해야 합니다.

보안에 대한 경각심을 잃지 않고 사용자 데이터를 보호하세요!