[Node.js]리액트 express 통해서 서버 요청시 한글 url 파라미터 사용하기

리액트 프론트엔드 기능 구현 도중 node.js 서버와 통신을 할 일이 있다.

 

그럴 때 url 뒤에 파라미터를 통해서 통신을 하게 되는데 이 때 파라미터에 한글을 넣어서 요청하면 잘 안되는 경우가 있다.

 

이 때 해결할 수 있는 방법이다.

 

encodeURIComponent() 와 decodeURIComponent() 사용하기

 

예시를 한번 보자.

 

front-end 측 코드

axios 를 임포트해서 사용해주었다.

'http://localhost:3000/한글파라미터' 와 같은 방법으로 요청을 보내면 제대로 작동하지 않기때문에 '한글파라미터' 를 다음 함수를 이용해 인코딩 해준다.

 

encodeURIComponent("한글 파라미터")

 

Axios.get(`http://localhost:3000/${encodeURIComponent('한글파라미터')}`).then((response) => {
            console.log(response);
        });

 

 

 

back-end 측 코드

express를 이용해 서버로부터 인코딩 된 파라미터를 받아서 다음 함수를 이용해 디코딩 해 준다. 그 다음 db에서 정보를 받아와 리턴을 해 주는 코드이다.

 

decodeURIComponent("인코딩되어 넘어온 파라미터")

 

const app = express();
//db = {db 정보}

app.get(`/:transparam`, (req, res) => {
        const paramDecoded = decodeURIComponent(req.params.transparam);
        const sqlQuery = `SELECT * FROM tablename WHERE name = ${paramDecoded};`;
        
        db.query(sqlQuery, paramDecoded, (err, result) => {
            res.send(result);
        })
    })

 

위 방식을 이용해 한글 파라미터를 변환해 서버와 통신을 할 수 있다.

한글 파라미터 뿐 아니라 모든 종류의 파라미터를 인코딩 해서 주고 받을 수 있다.