URL (Uniform Resource Locator) | KAITRUST AI 백과사전

📖 상세 설명

URL(Uniform Resource Locator)은 인터넷에서 리소스의 위치를 지정하는 표준 주소 체계입니다. 프로토콜(https://), 호스트(www.example.com), 포트(:443), 경로(/path), 쿼리스트링(?key=value), 프래그먼트(#section)로 구성됩니다.

URL은 1994년 Tim Berners-Lee가 웹의 핵심 기술로 제안했습니다. URI(Uniform Resource Identifier)의 하위 개념으로, URI가 리소스의 식별자라면 URL은 리소스의 위치(접근 방법 포함)를 나타냅니다. 실무에서는 URL과 URI를 거의 같은 의미로 사용합니다.

URL의 각 부분은 명확한 역할이 있습니다. 스킴(scheme)은 리소스 접근 방법(http, https, ftp 등), 호스트는 서버 주소, 경로는 서버 내 리소스 위치, 쿼리스트링은 추가 파라미터, 프래그먼트는 페이지 내 특정 위치를 지정합니다.

프론트엔드 개발에서 URL은 라우팅, SEO, 상태 관리와 직결됩니다. SPA에서 History API로 URL을 조작하고, Next.js 같은 프레임워크는 파일 기반 라우팅으로 URL 구조를 자동 생성합니다. URL 인코딩, 디코딩, 파싱은 일상적인 작업입니다.

💻 코드 예제

// JavaScript URL 다루기

// URL 파싱 (URL API 사용)
const url = new URL('https://example.com:8080/path/page?name=김철수&page=1#section');

console.log(url.protocol);  // "https:"
console.log(url.hostname);  // "example.com"
console.log(url.port);      // "8080"
console.log(url.pathname);  // "/path/page"
console.log(url.search);    // "?name=김철수&page=1"
console.log(url.hash);      // "#section"

// 쿼리 파라미터 다루기 (URLSearchParams)
const params = new URLSearchParams(url.search);
console.log(params.get('name'));  // "김철수"
console.log(params.get('page'));  // "1"

// 파라미터 추가/수정
params.set('sort', 'date');
params.append('tag', 'javascript');
console.log(params.toString());  // "name=김철수&page=1&sort=date&tag=javascript"

// URL 인코딩/디코딩
const korean = '한글 테스트';
const encoded = encodeURIComponent(korean);
console.log(encoded);  // "%ED%95%9C%EA%B8%80%20%ED%85%8C%EC%8A%A4%ED%8A%B8"
console.log(decodeURIComponent(encoded));  // "한글 테스트"

// React Router에서 URL 파라미터
// /users/:id 라우트에서
import { useParams, useSearchParams } from 'react-router-dom';

function UserPage() {
  const { id } = useParams();  // URL 경로 파라미터
  const [searchParams] = useSearchParams();  // 쿼리 파라미터
  const tab = searchParams.get('tab') || 'profile';
  // ...
}

🗣️ 실무에서 이렇게 말하세요

💬 API 설계 회의에서

"RESTful하게 설계하려면 URL에 동사 대신 명사를 쓰는 게 좋아요. /getUsers 대신 GET /users로 하고, 특정 사용자는 /users/{id}로 접근하는 게 표준입니다. 쿼리스트링은 필터링이나 페이지네이션에 사용하고요."

💬 면접에서

"URL은 프로토콜, 호스트, 포트, 경로, 쿼리, 프래그먼트로 구성됩니다. 브라우저의 URL API로 파싱하고, URLSearchParams로 쿼리 파라미터를 조작합니다. SPA에서는 History API의 pushState로 페이지 새로고침 없이 URL을 변경합니다."

💬 코드 리뷰에서

"사용자 입력을 URL에 포함할 때는 반드시 encodeURIComponent로 인코딩해야 해요. 안 그러면 특수문자(&, =, ?)가 URL 구조를 깨뜨리거나 보안 취약점이 생길 수 있습니다."

⚠️ 흔한 실수 & 주의사항

❌

URL 인코딩 누락

한글이나 특수문자를 URL에 그대로 넣으면 깨지거나 오작동합니다. encodeURIComponent()를 사용하세요. 단, 전체 URL에는 encodeURI()를 사용합니다.

❌

민감한 정보를 URL에 노출

비밀번호, 토큰 등을 쿼리스트링에 넣으면 브라우저 히스토리, 서버 로그, Referer 헤더에 노출됩니다. 민감한 정보는 요청 본문이나 헤더로 전송하세요.

✅

올바른 URL 설계

URL은 리소스의 계층 구조를 반영하고, 소문자와 하이픈(-)을 사용하며, 의미 있는 경로명을 쓰세요. SEO와 사용자 경험 모두에 도움됩니다.

🔗 관련 용어

📚 더 배우기

📄 MDN URL API 문서 🎓 WHATWG URL 표준 명세 📖 web.dev URL 구조 가이드