class="notranslate"으로 브라우저 번역 기능 끄기

슈개팅 배포 이후, 운영 과정에서 발생한 에러의 해결 과정을 정리한 글이다

문제 발견

부스 운영 팀원 : 프로필 등록에서 가끔 이용권 사용이 안 되는 에러가 있었어요. 어떻게 잘 등록시키긴 했는데.. 정확한 원인이 뭔가요?
백엔드 팀원: 사용자 언어가 한국어가 아닌 경우에 에러가 나는데, 모든 요청이 그런 게 아니어서 고치기 어려울 거 같네요..
나 : (그럴리가)

1. 백엔드 로그 이해하기

아래 사진은 백엔드 팀원이 보내준 로그 사진이고, 각각의 내용을 해석해 보면 다음과 같다.

1. 여성 사용자 프로필에서 나를 나타내는 동물은 FemaleAnimals 타입의 값이 와야 함
2. FemaleAnimals 타입은 enum으로, 값 종류는 ALL, HAMSTER, CAT, PUSSUNG, RABBIT, DOG, FOX가 있음
3. ЛИСА는 FemaleAnimals 타입 값에 해당하지 않음

1. 남성 사용자 프로필에서 나를 나타내는 동물은 MaleAnimals 타입의 값이 와야 함
2. MaleAnimals 타입은 enum으로, 값 종류는 ALL, WOLF, BEAR, DINO, PUSSUNG, DOG, FOX가 있음
3. 개는 MaleAnimals 타입 값에 해당하지 않음
   
   

기존 코드의 동작 방식

  const onClick = (e: React.MouseEvent) => updateFields({ animals: e.target.title })

로그를 보니까 백엔드 요청에 이상한 값이 넘어가서 발생하는 에러인 건 알겠는데, 이 원인이 왜 발생하는지 이해가 안 갔다. 왜냐면 나를 나타내는 동물은 직접 입력이 아닌 버튼 선택이기 때문에, 정해진 값 중에서 하나를 사용하기 때문이다!

여담이지만 이 시점에서 해결 못 할까 봐 서서히 식은땀이 났다.

2. 브라우저 언어 바꿔보기

처음에 백엔드 팀원분께서 사용자 언어가 한국어가 아닐 때 종종 발생하는 것 같다고 말씀해 주신 부분을 보고, 에러 재현을 위해 브라우저 언어를 외국어로 바꾸고 접속해 봤다.

그러자 크롬에서 사이트 내용이 이상하게 번역되는 모습을 확인할 수 있었다!

번역 미적용	번역 적용

event.target.title 도 같이 번역되는 걸 보고, 브라우저 번역 기능을 켜뒀을 때 문제가 발생하는 것을 알아냈다! 그런데 한국어로 된 내용을 한국어로 번역했는데 왜 내용이 바뀌지? 하는 의문이 생겼다.

해결 과정

lang="en" ➡ lang="ko"

그건 index.html에서 lang 속성을 제대로 설정해 주지 않아서이다! (초기값 그대로 lang="en"이었음) 크롬에서 사용하는 구글 번역기를 써보면 왜 적절하지 않은 lang 속성이 문제가 되는지 확인할 수 있다.

내용은 영어가 아닌 한국어여도 html 문서의 언어 속성을 제대로 지정하지 않으면 정확한 번역이 이루어지지 않는다.

이것도 여담인데 에러를 해결하면서 예전에 들었던 생활코딩 Next 13 강의가 생각났다. 초기 세팅에서 lang="en"을 삭제하시는 걸 보고 이거 꼭 해야 하나? 했었는데 그때는 몰랐지...... n개월 뒤에 꼭 해야 한다는 걸 몸소 배울줄은...^^...

class="notranslate" 추가

하지만 lang 속성을 바꾸는 건 정확한 번역을 위한 작업이고, 나는 아예 브라우저 번역을 막고 싶었기 때문에 body 태그에 class=notranslate 을 추가했다.

약간 후회되는 점이 있다면, class=notranslate을 body 태그에 걸면 전체 내용을 번역하지 않으니까, 한국어를 잘 못하는 사람이 봤을 때 이해가 어려웠을 거 같다. 동물 버튼에만 추가했어도 됐을 듯...🥺

참고 문서

Translator를 사용하여 콘텐츠가 번역되지 않도록 하는 방법