[React/axios/DB] HTML 코드가 데이터베이스 입력이 안되는 이유

프론트엔드 개발자

로컬에서는 잘 됐는데 서버에서는 안되는 이유

현재 우리 회사에는 프론트엔드(저) 한명 백엔드 한명으로 프로젝트를 진행하고 있습니다. 프론트서버와 백엔드서버를 분리해서 REST API 형식으로 이루어져 있지요. 프론트엔드에서는 UI를 보여주고, 사용자가 기능을 실행하면 axios를 이용해 원하는 기능을 백엔드 서버에 요청해서 json형태의 결과값으로 다시 화면에 출력하는 방식으로 서비스를 운영하고 있습니다.

백엔드는 스프링부트, 프론트는 리액트를 사용하고 있습니다

오늘은 게시판 만들기를 진행했습니다. 방식은 간단합니다. 프론트엔드 서버에서는 게시글을 작성할 페이지를 개발합니다. 작성자 이름과 글 제목, 글 내용을 입력할 입력창을 만들고, 입력을 완료하면 저장을 진행할 버튼을 추가합니다. useState를 이용해서 작성자, 제목, 내용을 문자열 형태의 변수로 저장해 두고, 버튼을 누르면 axios를 이용한 비동기통신으로 데이터베이스 서버에 내용을 저장합니다. 이번에는 글을 좀 더 예쁘게 쓸 수 있도록 WYSIWYG(위지윅) 에디터인 React-Quill을 설치해 주었습니다. React-Quill을 이용하면 글씨를 예쁘게 꾸미고, 링크와 이미지를 첨부해서 마치 티스토리 블로그 글을 올리듯이 글을 작성할 수 있습니다. 다만 현재 사용할 수 있는 이미지서버가 없기 때문에 이 부분은 제외하고 글씨를 꾸미는 기능만 남겨서 적용했습니다.

https://www.npmjs.com/package/react-quill

react-quill

React-Quill을 이용해 꾸민 글씨는 HTML코드 형식의 문자열로 저장이 됩니다. 나중에 불러올 때는 다시 HTML을 렌더링 하도록 코딩을 짜야하는데 이 부분은 다음기회에 설명을 드리도록 하겠습니다. 

간단한 게시글 작성 기능 개발을 완료하고 로컬서버에서 테스트를 진행했습니다. 문제없이 작동되는 걸 확인하고 서버에 올렸는데 오류가 발생했습니다. 원래 저장버튼을 클릭하면 백엔드 서버에서 보내준 결과 메세지를 경고창으로 띄우도록 했는데, 어째선지 undefined(찾지 못함)가 뜨는 것이었습니다. 백엔드 개발자에게 물어보니 이유는 알 수 없지만 호출이 아예 오지 않았다고 합니다. 원인을 찾기 위해 삼십 분 정도 테스트를 진행해본 결과 문자열에 HTML 코드가 들어간 것이 문제였습니다. React-Quill 대신에 일반 textarea를 이용해서 저장을 하니까 문제 없이 저장이 되는 걸 확인했습니다. 그리고 왜 HTML코드만 문제가 되는지 의구심이 생겨서 수 십분 정도 검색도 해보고 개발자 커뮤니티에 질문도 해봤는데, 인상적인 답변을 받았습니다. 100% 이거다 라는 확증은 없지만 그래도 가장 가능성이 높은 내용이었습니다.

방화벽이 있으면 HTML을 무조건 차단한다.

방화벽

서버에 적용된 방화벽이 HTML을 전송하면 무조건 차단한다는 겁니다. 실제로 백엔드 개발자가 '아예 요청이 들어오지 않았다'라고 한 것도 방화벽이 사전에 차단했다고 가정한다면 딱 맞아떨어집니다. 방화벽을 잘 다루는 엔지니어가 있다면 방화벽을 잘 만져서 HTML을 안전하게 저장할 수도 있었겠지만, 저도 백엔드 개발자도 그쪽 부분은 잘 알지 못해서, 다른 방식으로 필터링을 진행하기로 했습니다.

겉보기엔 비슷하지만 실제로는 전혀 다른 전각문자

바로 replace를 이용해 문자열의 내용을 바꾸는 겁니다. 처음에는 특수문자 코드(&000; 같은 형식으로 이루어진 코드)를 이용해서 수정을 해봤는데, 하필 세미콜론(;)이 겹쳐서 필터링 중에 오류가 발생했습니다. 그 다음에는 명칭을 한글로 하고 양 옆에 언더바(_)를 추가해서 나름 겹치지 않는 독자적인 한글코드로 변환해서 사용해 보았는데(예시 : "<" → "_여는꺾쇠_") 이렇게 하니 글자수가 너무 늘어나서 마찬가지로 오류가 발생했습니다(심하면 3000자가 5500자가 될 정도). 뭔가 더 간단한 방법이 없을까 고민하다가 떠오른 게 '전각 특수문자' 였습니다. 대략 30대 초중반~40대 중후반 쯤 연령대라면 자음 + 한자키로 특수문자를 입력할 수 있다는 걸 기억하실 겁니다. 예를 들어 미음(ㅁ) + 한자 + 7을 누르면 ☆이 입력되지요. 아래와 같이 말이죠.

한자 키를 누르고 탭 키를 누르면 전체 목록이 나옵니다

문득 HTML 코딩에 사용되는 특수기호를 전각문자로 치환하면 저장이 가능하지 않을까? 라는 생각이 들었습니다. < 과 ＜는 비슷하게 생겼지만 전혀 다른 문자이니까요. 물론 전각문자라 반각문자보다 용량이 1Byte 큽니다만 _여는꺾쇠_에 비하면 거의 차이 없는거나 마찬가지이기도 하고요. 그리고 결과는 대성공. 서버에서도 정상적으로 입력이 완료된 것을 확인했습니다.

<p>이것은 반각문자 입니다</p> // 수정 전
＜p＞이것은 전각문자 입니다＜／p＞ // 수정 후

저장한 내용을 불러올 때는 전각문자를 다시 반각문자로 변환한 뒤 HTML 렌더링을 하면 됩니다.

이와 같이 방화벽 때문에 HTML 코드를 저장하지 못하게 된다면 replace로 기호를 변환해서 사용해 보세요.