사실 난 예전에는 블로그 글에 emoji를 잘 쓰지 않았다. 여러가지 이유가 있겠지만 딱딱하게 정보만 전달하자는 의미도 있었고, 지금 다니는 회사에 오기 전까지는 사실 emoji 라는 것을 잘 사용해 보지 않았다. 작년에 발표를 하면서 동료분들이 emoji 를 사용하는 것을 보면서 사용하게 되었고, 블로그 글에도 적용해보자라는 생각을 하게 되었다.

그런데 두둥!! 🤯

나의 블로그 글에 emoji 가 달리지가 않는 것이다. 좀 더 정확히 말하자면 emoji 를 넣어도 표현이 되지 않고, emoji 를 넣은 부분에서 뒤쪽으로 글자가 저장되지 않는 문제가 있었다. 사실 시간내서 고치면 되는 것인데, 귀찮아서 아래와 같이 Hacktoberfest 까지 걸고 누군가에게 고쳐달라고 이슈로 등록해 놓긴 했다.(내 블로그인데 누가고치니..)

Support EMOJI · Issue #33 · meier-project/meier

그냥 저냥 살다가 저번주 주말에 "이번주 안에 무조건 고친다!!" 라는 생각으로 뜯어보기 시작했다.

어디가 문제 일까? 🧐

프론트엔드 :

일단 어디가 문제인지 부터 찾아야 한다. 모든 버그픽스의 첫걸음은 디버깅이다. 일단 나는 백엔드 개발자이고 이 블로그에서 내가 안 만든 부분은 프론트에서 웹페이지에서 작성된 글을 어떻게 넘겨주는지 확인했다.

아무 문제 없었다. title, content 각각에 emoji 를 넣어도 chrome developer tool > network 부분에서 잘 넘어가는 지 확인이 되었다. 그런데 다시 해당 글을 블로그에서 보는 파트에서는 보여 지지 않는 문제가 있었다.

DB :

그렇다면 데이터베이스에는 실제로 어떻게 저장 되어 있을까? 역시 제대로 저장되어 있지 않다. emoji를 저장하려면 mysql utf8mb4 로 설정 되어 있어야 한다고 얼핏 들었는데 확인해보니.. schema 는 utf8mb4, table 도 utf8mb4 인데 개별 컬럼이 utf8 이다. 🤯

고치자. 🧑🏻‍💻

일단 문제를 확인했다. DB 에서 charset 이 제대로 지정이 되어 있지 않은 문제였다. 개별 컬럼을 모두 아래와 같이 charset 을 변경했다.

    ALTER TABLE post
    MODIFY COLUMN title TEXT
    CHARACTER SET utf8mb4
    COLLATE utf8mb4_unicode_ci;

그리고 백엔드 :

이렇게 변경하고 테스트를 했는데 DB 에서는 ? 로 저장된 것으로 보였고, 블로그에서도 물음표로 표시가 되었다. 이유를 찾아보니 DB를 접속하는 툴에서 utf8mb4 를 설정 해줘야 보인다는 글들이 있어서 블로그에서 mysql 이 연결되는 부분에서도 마찬가지로 charset 을 지정해야 하는 것이 아닌가 싶어서 아래와 같이 utf8mb4 를 지정했다. (default 는 utf8 이다.)

    connection_string = 'mysql://user:pass@localhost/db?charset=utf8'

속 시원하게 해결했다.😌 왜 진작하지 않았을까 하는 생각을 했지만 그래도 고쳤다는 게 중요한 것 같다. 사실 처음에 제일 의심스러웠던 것은 프론트엔드였고(내가 잘 모르는 부분이 많아서), 가져다 쓴 부분이 많아서 그 부분이 문제면 고치려면 공수가 많이 들겠다는 생각을 했었다. 다행히 백엔드 쪽이 문제여서 쉽게 고칠 수 있었다.