FIreStore에서 "＼n" 개행 처리하는 방법

firestore 개행 처리 방법

 
친구의 모바일 청첩장을 만들어 주기 위해 FireStore를 사용해 웨딩 데이터를 저장하고 FireStore에서 저장된 데이터를 가져오는 과정에서 문자열 개행 처리를 위한 "＼n" 형태가 자꾸  " ＼＼n "의 형태로 출력되는 문제가 발생했다. 이를 처리했던 방법과 놓쳤던 부분을 다시 한번 복습하고 공부하려고 한다. 
 

문제

---

fireStore 데이터

 
 
위의 이미지와 같은 형태로 저장된 데이터를 모바일 청첩장에서 줄바꿈을 사용하기 위해 "＼n" 개행 문자를 사용해서 데이터를 입력했고 위의 이미지와 같은 형태로 데이터가 출력되길 바라서 아래와 같은 코드를 작성했다.
 

message.split("＼n").map((str, index, array) => {
  return (
    <>
      {str}
      {index === array.length - 1 ? '' : <br />}
    </>
  )
})

 
당연히 아무 문제가 없을 꺼라고 생각했는데 이게 웬걸 아래의 이미지와 같은 오류가 발생했다..
 

개행 문자가 출력되시 표시

 

해결 방안

---

처음에는 fireStore에 데이터를 잘못 입력했나 의심했다. 그래서 fireStore 데이터 베이스에 저장된 내용을 확인해 보고 이상이 없기에 console.log()를 통해 데이터가 어떻게 전달되는지 확인했는데 아래와 같이 문제없이 출력되는 것을 볼 수 있었다.
 

console.log 출력

 
우선 자세한 원인은 아래에서 살펴보기로 하고 해결 방법은 의외로 간단했다. 구글링을 통해 찾아봤는데 스택오버플로에 나와 같은 문제를 질문한 사람을 확인했고 아래의 코드처럼 replaceAll 을 사용해서 간단하게 해결했다.
 

message.replaceAll('\\n', '\n').split("＼n").map((str, index, array) => {
  return (
    <>
      {str}
      {index === array.length - 1 ? '' : <br />}
    </>
  )
})

 

원인

---

fireStore는 NoSQL 데이터 베이스로 데이터를 JSON 형식과 유사하거나 혹은 JSON 트리로 저장한다. JSON의 문자열 처리 방식으로는 특정 문자가 이스케이프 문자로 처리된다.
 

fireStore 공식 문서

 
그렇기 때문에 필자가 저장했던 데이터 "그냥 옆에 앉아서 너의 이야기를 들어주는＼n누군가가 있다는 것은 정말 좋은 거야!＼n＼n - 스누피 中 -"의 형태가 "그냥 옆에 앉아서 너의 이야기를 들어주는 ＼＼n누군가가 있다는 것은 정말 좋은 거야! ＼＼n ＼＼n - 스누피 中 -" 의 형태로 저장된다. 
 
쉽게 해결하기 위해 replaceAll 메서드를 통해 기존의 형태로 변경한 후에 데이터를 출력함으로써 원하는 상태로 처리할 수 있었다.