친구의 모바일 청첩장을 만들어 주기 위해 FireStore를 사용해 웨딩 데이터를 저장하고 FireStore에서 저장된 데이터를 가져오는 과정에서 문자열 개행 처리를 위한 "\n" 형태가 자꾸 " \\n "의 형태로 출력되는 문제가 발생했다. 이를 처리했던 방법과 놓쳤던 부분을 다시 한번 복습하고 공부하려고 한다.
문제
위의 이미지와 같은 형태로 저장된 데이터를 모바일 청첩장에서 줄바꿈을 사용하기 위해 "\n" 개행 문자를 사용해서 데이터를 입력했고 위의 이미지와 같은 형태로 데이터가 출력되길 바라서 아래와 같은 코드를 작성했다.
message.split("\n").map((str, index, array) => {
return (
<>
{str}
{index === array.length - 1 ? '' : <br />}
</>
)
})
당연히 아무 문제가 없을 꺼라고 생각했는데 이게 웬걸 아래의 이미지와 같은 오류가 발생했다..
해결 방안
처음에는 fireStore에 데이터를 잘못 입력했나 의심했다. 그래서 fireStore 데이터 베이스에 저장된 내용을 확인해 보고 이상이 없기에 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의 문자열 처리 방식으로는 특정 문자가 이스케이프 문자로 처리된다.
그렇기 때문에 필자가 저장했던 데이터 "그냥 옆에 앉아서 너의 이야기를 들어주는\n누군가가 있다는 것은 정말 좋은 거야!\n\n - 스누피 中 -"의 형태가 "그냥 옆에 앉아서 너의 이야기를 들어주는 \\n누군가가 있다는 것은 정말 좋은 거야! \\n \\n - 스누피 中 -" 의 형태로 저장된다.
쉽게 해결하기 위해 replaceAll 메서드를 통해 기존의 형태로 변경한 후에 데이터를 출력함으로써 원하는 상태로 처리할 수 있었다.
'Rroblem Solving' 카테고리의 다른 글
CRA(--template typescript)에서 alias 별칭 안되는 문제 eject 해보기 (0) | 2024.07.03 |
---|---|
audio 태그 자동 재생 해결 방안 및 크로스 브라우징 (0) | 2024.06.25 |
Objects are not valid as a React child~ 에러와 Typescript (0) | 2024.04.07 |
createBrowserRouter 사용자 인증 유무에 따른 페이지 렌더링 방법 (0) | 2024.03.21 |
댓글