Javascript

삽질 기록#1

euc-kr 문자 인코딩, nuxt 앱에서 hash link 사용하기

+ 본 게시물은 velog에서도 보실 수 있습니다.


일을 하다보면 금방 해결책이 생각나지 않는 경우가 있다.

그리고 경험상 이런 케이스들은 제대로 정리해놓지 않고 지나가면 까먹을 확률이 높다.


1. EUC-KR 문자 인코딩

웬만한 경우에는 문자 인코딩을 건들 필요가 없다.

Third Party api도 대부분 REST api에 utf-8을 사용하기 때문이다.

그러나 늘 그렇듯 예외는 존재한다.

프로젝트에서 고객 실명 인증이 필요한 경우가 생겨서 구글링을 하다보니 NICE평가정보에서 실명확인 서비스를 제공하고 있었다.

신청을 하고 며칠쯤 지나니 담당자분께서 암호화 모듈과 매뉴얼을 보내주셨다.

그런데 매뉴얼을 읽으려고 보니 php/jsp/asp 용 매뉴얼만 있고, node.js용 매뉴얼이 없었다.

그래도 다행히 php용 매뉴얼을 얼추 적용할 수 있는 구조였다.

(암호화 모듈에 이름, 주민등록번호 및 아이디/패스워드를 넘겨주고 실행코드를 받아오는 식)

매뉴얼대로 chmod 755를 입력하고 모듈을 실행시켰으나 실행파일이 아니라는 에러만 계속 나길래 파일을 다시 살펴보니 윈도우/리눅스 용 버전 두 개만 있었다.

담당자분께 물어보니 맥용 모듈이 따로 있었고 메일을 보내니 금방 보내주셨다.


이렇게 상황이 일단락된줄 알았으나 이번에는 모듈이 계속 같은 리턴코드만 돌려주는 것이었다.

리턴코드관련 문서를 읽어보니 에러는 이름, 주민등록번호, 아이디/패스워드 중 하나 이상의 정보가 누락된 경우에 발생한다고 적혀있었다.

물론 console.log를 찍어보면 모든 값을 정상적으로 받고 있었다.

그래서 다시 메일을 보내니 euc-kr 인코딩 관련 문제가 아니냐는 답변을 받을 수 있었다.

젠장... 이제까지 영어 튜토리얼과 외국 api 서비스만으로 개발을 배워온 나에게는 굉장히 생소한 문제였다.

당연히 인코딩에 대한 개념도 크게 잡혀있지 않았고, 그 필요성도 크게 느끼지 못했다.

그 결과 아래와 같은 코드가 나오게 되었다.

얼핏 보기에는 문제가 없는 코드처럼 보인다. 

name을 euc-kr로 인코딩한 뒤 다시 디코딩해서 exec 함수에 넘겨준다.

그러나 내가 간과한 것은 자바스크립트의 스트링 인코딩이 UCS-2/UTF-16과 가장 비슷한 형태라는 점이었다.

iconv.encode를 통해 인코딩된 버퍼를 decoded라는 변수에 저장하면 euc-kr로 디코딩된 스트링은 UCS-2/UTF-16로 해석되기 때문에 결과적으로 console.log를 호출했을 때 원래의 값으로 보이게 된다.

그 결과 exec 함수의 인자로 decoded를 넘겨줘봐야 ���� 와 같은 깨진 글자들로 인식할 수밖에 없다.

이 경우 유일한 해결책은 

1. 인코딩된 버퍼를 파일로 저장한다.

2. cat 명령어를 사용해서 저장된 파일을 "그대로" 읽어들인다.

3. 결과값을 실행명령에 넘긴다.

가 된다.

코드로는

이렇게 처리할 수 있다.

이틀 동안 삽질을 하고 나니 다시 한 번 리눅스와 가깝게 지낼 필요가 있다는 점을 느꼈다.


2. nuxt 앱에서 hash link 사용하기

nuxt는 vue app을 위한 서버사이드렌더링 프레임워크다.

nuxt의 라우팅 처리는 vue-router를 통해 이뤄지는데, 이 경우 hash anchor (#id) 처리가 전통적인 html 페이지들과는 달라지게 된다.

전통적인 html 페이지에서 hash anchor는 몇 번을 누르더라도 해당 요소로 이동한다.

그러나 vue-router를 사용할 경우 scroll behavior에서 hash anchor 처리를 해주더라도 처음 페이지를 로드할 때만 스크롤이 동작할 뿐 두 번째로 링크를 누를 경우에는 아무런 반응이 없다.

결국 이 문제를 해결할 유일한 방법은 html 요소를 찾은 다음, 요소의 y 위치와 스크롤된 y 위치를 더해서 수동으로 스크롤 함수를 호출하는 것이다.

이 경우 아래와 같은 방식으로 코드를 작성할 수 있다.


참고)

1. UTF-8 encoded html pages show � (questions marks) instead of characters
(https://stackoverflow.com/questions/5445137/utf-8-encoded-html-pages-show-questions-marks-instead-of-characters)

2. Let’s talk about Javascript string encoding

(https://kevin.burke.dev/kevin/node-js-string-encoding/)

3. Convert iso-8859-1 to utf-8 javascript

(https://stackoverflow.com/questions/27155419/convert-iso-8859-1-to-utf-8-javascript)

4. Backticks vs braces in Bash

(https://stackoverflow.com/questions/22709371/backticks-vs-braces-in-bash)

5. How to handle anchors (bookmarks) with Vue Router?

(https://stackoverflow.com/questions/45201014/how-to-handle-anchors-bookmarks-with-vue-router)

이준형 님의 창작활동을 응원하고 싶으세요?

곰프로의 블로그
곰프로의 블로그
구독자 52

0개의 댓글

SNS 계정으로 간편하게 로그인하고 댓글을 남겨주세요.
새로운 알림이 없습니다.