노트

encodeURI와 encodeURIComponent

encodeURI and encodeURIComponent

프론트엔드#js#http · 연결된 개념 3개

쉽게 말하면

encodeURIComponent는 주소 한 칸에 넣을 글자를 포장하는 함수예요. 검색어에 &가 있으면 주소가 거기서 끊긴 걸로 읽히니, 깨지기 쉬운 글자를 %26 같은 안전한 모양으로 싸서 넣는 거죠.

비유의 한계 포장을 두 번 하면 %가 %25가 돼서 값이 깨져요. encodeURI는 주소 전체용이라 &나 = 같은 구조 문자를 그대로 두니, 쿼리 값엔 encodeURIComponent나 URLSearchParams를 써요.

encodeURIComponent()는 URL(Uniform Resource Locator)의 한 조각(쿼리 값, 경로 세그먼트)에 넣을 문자열을 퍼센트 인코딩(Percent-Encoding)하는 함수다. encodeURI()는 URL 전체를 인코딩하므로 &·=·?·/ 같은 구조 문자는 그대로 둔다.

encodeURIComponent('a&b')   // 'a%26b'
encodeURI('a&b')            // 'a&b'  ← 쿼리 값에 쓰면 b가 별도 파라미터로 읽힌다
 
router.push(`/search?q=${encodeURIComponent('react hooks')}`) // q=react%20hooks
  • 쿼리 값이나 동적 경로에 사용자 입력·한글을 넣을 때는 encodeURIComponent를 쓴다
  • 이중 인코딩(Double Encoding): 이미 인코딩된 값을 다시 인코딩하면 %가 %25가 되어 hello%2520world처럼 깨진다
  • decodeURIComponent('%')처럼 형식이 잘못된 값은 URIError를 던진다. 외부에서 온 값을 디코딩할 때는 try/catch로 감싼다
  • 쿼리 문자열은 직접 이어 붙이기보다 URLSearchParams로 만들고 읽으면 인코딩을 알아서 처리해 준다. params.get('q')는 이미 디코딩된 값을 돌려주므로 다시 디코딩하지 않는다
  • URL에 담긴 쿼리 값이 다른 사이트로 새어 나갈 수 있는 경로는 Origin·Referer 헤더와 Referrer-Policy에 있다. 사용자 입력을 정규식에 넣을 때의 이스케이프는 정규 표현식 기초

책: 1장. 문자는 바이트다: 이모지 하나의 length는 왜 2일까

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • loading 경계와 레이아웃 끌어올리기

    Next.js App Router에서 loading.tsx는 같은 세그먼트의 page와 그 아래(하위 layout 포함)를 suspense로 감싸지만, **같은 세그먼트의 layout은 감싸지 않는다**. 그래서 데이터를 기다릴 필요가 없는 공통 UI(탭바, 필터 헤더)를 page에서 layout으로 끌어올리면 스켈레톤에 덮이지 않고 처음부터 실제 모습으로 보인다.

  • 우선순위 큐

    원소마다 우선순위가 있고, 들어온 순서와 상관없이 우선순위가 가장 높은 것부터 꺼내는 추상 자료형(Abstract Data Type, ADT). 같은 우선순위끼리의 순서는 보장하지 않는다. 응급실 대기 순서가 좋은 비유다.

  • 쿼리 키 설계와 키 팩토리

    쿼리 키(Query Key)는 TanStack Query가 캐시 항목을 식별하고 무효화 범위를 고르는 배열이다. 키를 일반적인 것에서 구체적인 것 순서로 쌓고, 한 곳(키 팩토리)에서 만들게 하면 부분 일치(Partial Matching)로 원하는 범위만 정확히 무효화할 수 있다.

  • Pages Router에서 App Router로

    App Router는 Next.js 13에서 도입된 app/ 디렉터리 기반 라우터로, 서버 컴포넌트·중첩 레이아웃(Nested Layouts)·스트리밍을 기본으로 한다. pages/ 기반의 Pages Router에서 옮길 때 바뀌는 생각을 정리한다.

  • XSS

    XSS(Cross-Site Scripting)는 공격자가 넣은 스크립트가 내 사이트의 출처(origin) 권한으로 사용자 브라우저에서 실행되는 공격이다. 같은 출처의 코드로 돌기 때문에 same-origin-policy가 막아 주지 못한다. 그 스크립트는 페이지를 바꾸고, 로그인한 사용자 행세를 하며 요청을 보내고, JS가 읽을 수 있는 데이터(localStorage의 토큰 등)를 빼 갈 수 있다.

보기 옵션