[Tailwind CSS] Vue3 백엔드 서버에서 리턴 메세지 값으로 줄바꿈(\r\n, \n)값으로 리턴해줄때 화면에서도 줄바꿈 처리 하는 방법 3가지 (by ChatGpt)

현재 코드는 다음과 같다.

    <template #content>
      <div class="mb-[2.875rem] w-[20.75rem] text-center text-lg text-[#484848]">
        {{ errorMsg }}
      </div>
    </template>
    <template #btn-box>
      <button type="button" class="popup-button custom-btn-primary" @click="closePopup">
        확인
      </button>
    </template>

errorMsg 안에 \n 또는 \r\n 이 포함되어 있으면
Vue 템플릿에서 그대로 쓰면 줄바꿈이 되지 않아.

Vue3에서는 3가지 방법 중 하나를 선택하면 돼.

방법 1: CSS white-space: pre-line (가장 쉬움, 추천)

템플릿을 수정할 필요 없이,
해당 div에 스타일만 추가하면 자동 줄바꿈 처리돼.

<div class="mb-[2.875rem] w-[20.75rem] text-center text-lg text-[#484848] whitespace-pre-line">
  {{ errorMsg }}
</div>

Tailwind를 쓰고 있으니까 whitespace-pre-line 클래스 한 줄이면 끝!

✔ 지원되는 줄바꿈

• \n
• \r\n

✔ 동작 방식
pre-line 은 줄바꿈 문자만 그대로 표현해주는 CSS 속성이야.

방법 2: computed에서 <br/> 변환해서 v-html로 출력

보안 이슈로 HTML을 받아서 쓰는 경우에는 XSS 위험 주의 필요!

const formattedErrorMsg = computed(() =>
  errorMsg.value?.replace(/\r?\n/g, '<br/>')
);

템플릿:

<div 
  class="mb-[2.875rem] w-[20.75rem] text-center text-lg text-[#484848]" 
  v-html="formattedErrorMsg"
></div>

방법 3: <pre> 태그 사용

<pre class="mb-[2.875rem] w-[20.75rem] text-center text-lg text-[#484848]">
  {{ errorMsg }}
</pre>

단점:
공백·들여쓰기까지 그대로 보여서 디자인이 망가질 수 있어.

✔ 결론 (추천)

Tailwind 쓰는 상황에서는 방법 1이 가장 깔끔해.

<div class="whitespace-pre-line">
  {{ errorMsg }}
</div>

바로 적용돼!