[ decodeURI() ] 외부 경로 접근시 한글 깨짐 해결하기

 

개요

 

 

mailJS를 통해 프로젝트 경로를 보내주고 

텍스트를 파라미터로 받을 때 한글 텍스트가 깨지는 현상이 나타났다.

 

한글에 입장해 프로젝트를 진행해보세요 http://localhost:3000/V/%ED%95%9C%EA%B8%80/1645693731116

 

%ED%95%9C%EA%B8%80 이 깨진 공간에 들어가야 할 말은 '한글'

 

 

하지만 막상 링크에 들어오면

http://localhost:3000/V/한글/1645693731116

'한글'은 깨지지 않고 잘 드러난다.

 

 

 

...

그러나

 

1.

 

 

'한글' 이 그려져야 할 부분이 여전히 깨져있다.

 

 

2.

 

그러나 프로젝트 내용을 얻어올 때 쓰는 경로를 '한글'로 해놓았기 때문에 경로를 얻을 수가 없다,('한글'이 깨져서)

 

 

 

 

해결 과정

 

 

1.

한글 문자가 깨져있는 부분의 JSX를 봐보자

 

< Project >

  <AppHeader pjName={name} />

AppHeader이라는 compoennt로 name이라는 값을 담고 있는 pjName이라는 prop을 보낸다.

 

< AppHeader >

 <ProjectName>{pjName}</ProjectName>

AppHeader에서 pjName을 받아서 화면에 보여주고 있다. == 깨진 부분

 

 

 

 

2.

 

그냥 보여주기만 하는 HTML의 문제일 확률은 적다고 생각한 후

< Project > 에서 name을 어디서 받아왔는지를 확인했다.

  const state: any = location.state; // 1
  const locationArray = location.pathname.split("/"); // 2
  const name = state !== null ? state.pjName : locationArray[2]; // 3

name은 이렇게 받아와진다.

 

1. 어느 컴포넌트에서( < ShowProject > ) navigate를 통해 < Project > 로 넘어왔고

2. // 1에서 이 과정에서 함께 전달된 state를 구한다.

3. //3 . state가 null일 경우와 아닐 경우를 구해서 name을 정의하는데,

3-1. state가 null이 아닐 경우( < ShowProject > 에서 navigate를 통해 전달됐을 경우)에는 state 안에 있는 pjName 즉 문제의 '한글'이 받아와진다. (문제없음)

3-2. state가 null일 경우 (외부 경로에서 접근했을 경우)에는 locationArray[2] == '한글' 을 받아온다 (문제발생🧨)

 

 

 

확신을 위해 console을 찍어보았다.

 

1. 기본 경로로 접근했을 때

2. 외부 경로에서 접근했을 때

 

 

3.

문제를 인식하고 원인을 파악했으니 해결 방법이 명확히 보인다.

locationArray[2]가 깨지지 않게 하는 방법을 찾으면 된다.

내가 찾은 방법은

 

decodeURI()

이다.

이 함수는 JavaScript에서 쓰이는 함수로 사전에 만들어진 URI(Uniform Resource Identifier, 인터넷 식별자)를 해독한다.

 

 

 

 

decodeURI() 

구문

decodeURI(encodedURI)

파라미터

encodedURI완전하고 암호화된 인터넷식별자(URI)

리턴 값

주어진 암호화된 URI의 암호화되지 않은 버전을 나타내는 새 문자열을 반환합니다.

예외

encodedURI에 유효하지 않은 문자열이 포함된 경우 URIError ("malformed URI sequence") 예외를 던집니다.

 

출처) mdn

 

 

 

브라우저 호환성

호환도 잘된다🙆‍♀️

 

 

 

 

 

 

 

 

🙇‍♀️

https://velog.io/@ki226/%ED%8C%8C%EB%9D%BC%EB%AF%B8%ED%84%B0%EB%A1%9C-%EB%B0%9B%EC%9D%80-url%EC%9D%98-%ED%95%9C%EA%B8%80-%EA%B9%A8%EC%A7%90-%ED%98%84%EC%83%81-%EB%B0%A9%EC%A7%80

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/decodeURI