URL

인터넷 상에서 리소스(웹페이지, 파일 등)의 위치를 나타내는 고유한 주소

• 스키마: 브라우저가 리소스를 요청하는 데 사용해야 하는 프로토콜
• 권한(도메인/포트): 리소스에 접근하는 데 사용되는 기술적인 "게이트"
• 리소스 경로: 웹 서버의 실제 파일 위치
• 매개변수: 웹 서버에 제공되는 추가 매개변수
• 앵커: 리소스 자체의 어떤 부분에 대한 앵커. 앵커는 리소스 내부에서 일종의 "책갈피" 역할을 하며, 브라우저에 해당 "책갈피" 지점의 콘텐츠를 표시하도록 지시한다. 예를 들어 HTML 문서에서는 브라우저가 앵커가 정의된 지점으로 스크롤한다. # 뒤의 부분은 요청과 함께 서버로 전송되지 않는다.

URL의 잠재력

URL은 단순한 리소스 주소가 아니라 사용자 인터페이스(UI) 이자 상태 컨테이너로 기능한다.

• URL에 포함하기 적합한 상태
  검색어, 필터, 페이지·정렬, 보기 모드, 날짜 범위, 활성 탭, UI 구성, 기능 플래그
• URL에 부적합한 상태
  비밀번호·토큰 등 민감정보, 임시 UI 상태, 미저장 입력, 대용량 데이터, 고빈도 상태
• 판단 기준: 다른 사용자가 같은 URL을 클릭했을 때 동일한 상태를 봐야 하는가

쿼리 파라미터 패턴

• 구분자(delimiter) 로 여러 값을 하나의 키에 담는 방식 (?tags=frontend,react,hooks)
• 중첩 데이터를 JSON 또는 Base64로 직렬화 (?config=eyJyaWNrIjoicm9sbCJ9==)
• 불리언 플래그는 키 존재 여부로 표현 (?mobile)
• 배열 표기법(bracket notation) 은 tags[]=frontend&tags[]=react 형태로 다중 값 표현
• Node의 qs나 Express 미들웨어 등에서 자동 인식되지만 표준화는 되어 있지 않음
  핵심은 일관성 유지

좋은 URL

좋은 URL은 결국 콘텐츠를 가리키는 것 이상으로, 사용자와 애플리케이션 간의 대화를 표현한다.

• 애플리케이션과 사용자 간의 명시적 계약 역할
  공개/비공개, 클라이언트/서버, 공유/세션 상태의 경계를 명확히 함
• 의도를 설명하고, 사람과 기계 모두 이해 가능
  example.com/products/laptop?color=silver&sort=price 형태가 의미 전달에 유리
• 캐싱 효율성 향상
  동일 URL은 동일 리소스로 간주되어 캐시 적중률 상승
  쿼리 파라미터로 캐시 변형 제어 가능
• 버전 관리와 실험
  ?v=2, ?beta=true, ?experiment=new-ui 등으로 API 버전·A/B 테스트 구분

참고

https://news.hada.io/topic?id=24100&utm_source=slack&utm_medium=bot&utm_campaign=T04JK938N

https://developer.mozilla.org/ko/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_URL