[Supabase + Next.js] DB에 저장된 문자열 데이터를 불러올 때 \n 줄바꿈 문제와 해결 방법

배경

Supabase + Next.js를 활용한 풀스택 프로젝트 개발 중이었습니다.

줄바꿈 테스트를 위해 Supabase Table Editer에서 직접 기존 컬럼값에 \n를 삽입 후 저장하였습니다.

 

수정을 통해 \n이 포함된 텍스트 데이터를 프론트엔드에서 불러와 \n를 기준으로 줄바꿈하여 렌더링하고 싶었고

아래와 같은 결과물을 기대했습니다.

// JSX
<VerdictText variant="body1" paragraph>
    {verdict.reasoning}
</VerdictText>

// Style
const VerdictText = styled(Typography)`
  white-space: pre-line;
`;


// 예상 결과
// 아래 텍스트와 같이 줄바꿈 문자( \n )를 기준으로 줄바꿈이 되어 렌더링되는 것을 기대했다.
남자친구는 현재 취업 스트레스로 인해 정서적 지지를 필요로 하고 있으며, 여자친구에게서 그 지지를 기대하는 것은 자연스러운 일이다.
그러나 여자친구가 가진 성격과 현실적인 조언을 제공하는 방식 또한 존중받아야 한다.
그녀가 남자친구에게 진심이 아닌 위로를 주고 싶지 않다는 것은 솔직한 감정 표현이며, 이는 각자의 의사소통 스타일의 차이로 인해 발생한 갈등이다.
따라서 둘 다 특정한 방식으로 상대방을 이해하고 수용할 필요가 있다.

하지만 렌더링 시 줄바꿈이 적용되지 않는 문제가 발생했습니다.

이는 데이터베이스와 프론트엔드 간의 데이터 전송 과정에서 이스케이프 처리와 관련된 일반적인 문제이며 특히 JSON으로 데이터를 주고받을 때 자주 발생합니다.

 

원인

1. \n 이 줄바꿈 문자가 아닌 일반 텍스트로 저장됨

Supabase Table Editer 에서 직접 컬럼값을 수정하여 \n을 추가하였기 때문에  \n가 줄바꿈문자로 저장되지 않고 일반텍스트 \n 로 저장됩니다.

즉, 컬럼값에 저장된 \n는 줄바꿈 문자가 아닌 일반 텍스트입니다.

만약 컬럼값에 \n이 줄바꿈 문자로 저장되어 있다면 아래 이미지와 같이 줄바꿈된 텍스트로 보여지게 됩니다.

하지만 만약 컬럼값에 \n이 일반 텍스트로 저장되어 있다면 아래 이미지와 같이 텍스트에 \n이 그대로 보여지게 됩니다.

 

2. 일반 텍스트 \n 는  white-space: pre-line 이 인식하지 못함

이렇게 저장된 데이터를 불러와서 white-space: pre-line을 적용해도 줄바꿈이 되지 않는 이유는 white-space: pre-line 은 줄바꿈 문자(\n)를 인식하여 화면에 줄바꿈으로 표시하기 때문입니다.

즉, 데이터베이스에서 불러온 텍스트 데이터 내 \n는 줄바꿈 문자가 아닌 \와 n이 합쳐진 두 개의 일반 텍스트이기 때문에 줄바꿈 문자로 인식되지 않으며 이로 인해 줄바꿈이 적용되지 않고 \n 텍스트가 그대로 보이게됩니다.

 

해결 방법

결론적으로 해당 문제의 핵심적인 원인은 아래와 같습니다.

1. Supabase Table Editer 를 이용해 직접 컬럼값을 수정하여 \n 를 삽입했기 때문에 \n 이 줄바꿈 문자가 아닌 일반 텍스트로 저장됨.

2. \n 이 일반 텍스트로 저장되었기 때문에 프론트엔드 측에서 데이터를 불러와 white-space: pre-line를 적용해도 텍스트 데이터 내 줄바꿈 문자를 인식하지 못해 \n 텍스트가 그대로 화면에 출력됨

따라서 해당 문제를 해결하기 위해서는 아래와 같은 방법을 따라야합니다.

 

해결방법1. Supabase API 이용

await supabase
  .from('table_name')
  .insert([
    { text_col: "가나다라 \n 마바사" },
  ]);

위 코드는 Supabase에서 데이터를 삽입할 때 사용되는 Insert 코드입니다.

이 때, 삽입 데이터(텍스트) 문자열 내에 \n를 포함하면 \n이 줄바꿈 문자로 분류되어 아래 이미지와 같이 줄바꿈이 적용된 상태로 데이터가 삽입됩니다.

이렇게 줄바꿈된 상태로 데이터가 저장되면 이후 데이터를 불러와 렌더링할 때에도  white-space: pre-line가 줄바꿈 문자를 인식하여 아래와 같이 줄바꿈이 정상적으로 처리된 상태로 화면에 출력됩니다.

 

해결방법2. Shift + 엔터

이미 데이터가 삽입되어 있고 이를 수정하는 데에 코드를 짜는 것이 시간상 손해라면 Supabase Table Editer에서 컬럼값을 수정 시 줄바꿈 문자를 삽입하는 방법이 있습니다.

Shift + 엔터를 이용해 직접 수정하는 환경에서도 줄바꿈 문자를 삽입할 수 있습니다.

 

해결방법3. 정규표현식 활용

<VerdictText variant="body1" paragraph>
    {verdict.reasoning?.replace(/\\n/g, "\n")}
</VerdictText>

만약 Supabase Table Editer에서 직접 수정하여 줄바꿈 문자(\n)를 삽입한 데이터를 정상적으로 줄바꿈하고 싶다면

위 코드처럼 .replace(/\\n/g, "\n") 를 사용하여 프론트 측에서  텍스트 내의 '\n' 문자열을 실제 줄바꿈 문자로 변환해야 합니다.

 

결과