url 특수문자 처리 encodeURIComponent <-> decodeURIComponent

url에 간혹 &와 같은 특수문자가 포함되기도하는데 그냥보내버리면 인식을 못한다고한다.

그럴경우 encodeURIComponent로 감싸주면된다!

 

예를들어 #000000의 경우

encodeURIComponent(#000000)이런식으로 하면됨

 

만약 인코딩한값을 html에 뿌리게될경우

#000000이아니라 %25000000이되는데

그럴경우 decodeURIComponent로 감싸주면된다.

 

참고로 인코딩이란 컴퓨터 정보의 형태나 형식을 표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해서 다른 형태나 형식으로 변환하는 것을 말한다. 쉽게말해 잘 사용할수있게 변환하는 것?

문자 인코딩, 동영상 인코딩이라는 용어로 자주사용한다.

 

예시코드

프론트

const tokenIdsArr = Object.keys(tokenIds)
const dataString = encodeURIComponent(JSON.stringify(tokenIdsArr))
const redirectUrl = `/inventory/mint/data?tokenIds=${dataString}`
window.location.href = redirectUrl

 

백엔드에서 express-validate에서 사용

check('tokenIds').custom((val)=>{
    const tokenIdsArray = decodeURIComponent(JSON.parse(val)).split(',');

    if (!Array.isArray(tokenIdsArray)) {
        throw new Error('TokenIds should be an array');
    }
    if (!tokenIdsArray.every(item => !isNaN(Number(item)))) {
        throw new Error('All elements in TokenIds should be integers');
    }
    return val;
}).exists(),