게시글파트를 담당하다 보니 클라이언트가 게시글의 내용을 적을 때 행을 만들게 되면(enter키 사용시),
데이터베이스에 저장되는 정보 데이터베이스에 행을 만든 부분이 \r\n(window의 경우)으로 바뀌어서 저장 된다.
만약 게시글에 아래와 같이 간단히 작성하면
안녕하세요
반갑습니다
이 데이터가 그대로 들어오는게 아니라 데이터 베이스에는
안녕하세요
\r\n반갑습니다
라고 저장된다. 저장까지는 문제가 되지 않는데 꺼내서 프론트단에 보내줄 때 문제가 발생한다.
나는 보통 json객체로 저장된 데이터에서 필요한 정보를 꺼내서 보냈는데. 이게 가면 꼭 문자열로 받게 되는형식이 되다보니,
실제로 표출될 때에는 개행문자(\r\n)은 잘 숨겨져서 안보이게 나오지만 표출된 결과는
안녕하세요반갑습니다
라고 나오게 되더라. 이 부분에 대해서 간단히 검색해 봤을 때에는 데이터베이스에 저장할 때 각 개행문자를 <br /> 로 바꾸어서 저장하면 된다는 글을 읽고 서비스 단에서 바꿔서 저장해 주었다.
const changedContent = content.replace(/\r\n|\r|\n/g, "<br/>")하지만 저장은 잘 되었는데 꺼내서 보니 오히려 더 심각한 상황이 되었다. 이게 꺼내주면 문자열 그대로 받게되어 <br/>또한 그냥 문자열로 인식해 버리는 탓이다.
안녕하세요
<br/>반갑습니다
백엔드 단에서만 처리해서 그냥 프론트는 받는값 그대로 표현하면 쉽게 처리되게 해보려고 한건데 오히려 문제가 발생하게 되어 결국 FE팀원들과 정보를 공유하고 프론트에서 기존에 받은 \r\n을 기준으로 split하고 map을 돌리면서 각 배열의 인덱스에 <br/>태그를 붙여주는 방식으로 처음엔 해결을 하였다.
안녕하세요
반갑습니다
분명 개행은 적용 되었지만, 뭔가 다른다. 뭘까? <br/>는 <p>태그를 사용할 때 문단을 나누는 용도로 사용되는 태그라서 기존의 작성 내용보다 훨씬 더 넓게 개행을 적용하게 되어보이는 불편함이 생겼다.
이 부분의 해결점을 찾다가 <pre>태그를 발견하게 되었다. 아직 왕초보 개발자로 백엔드만 줄줄파는중이라 html태그 관련해서는 알고있는 부분이 적은지라 문제의 해결방법을 백엔드 데이터베이스 저장내용변경 쪽에서 만 찾다보니 이런 사달이 났는데 프론트단에서 <p>태그가 아닌 <pre>태그를 사용하면 content 그 자체를 그냥 꺼내도 코드를 적을때 빽틱을 쓴 것처럼 개행문자가 정상적으로 잘 적용되서 최종적으로 중간에 들어간 삽질은 모두 제외하고 <pre>태그를 선택하여 사용해 해결하였다.
필자는 위와같은 방법으로 해결하였지만 결과적으로는 backend쪽에서는 한 것 하나 없이 그냥 저장한거 그대로 보여줬을 뿐이고, 프론트도 <p>태그 하나를 <pre>로 바꿔준거 하나밖에 없이 간단히 해결하였지만, 충분히 다른 방법도 존재한다고 한다.
프로젝트가 급급해서 이방법 저방법 많은 방법을 적용해보진 못했지만, 백엔드 개발자로서 안그래도 할 일 많은 프론트단 일을 좀 덜고자 백에서만으로 처리가능한 방법에 대해 더 모색해 봐야할 것 같다.
