JSON 데이터로 개행처리할 때 트러블 슈팅

1. 문제 상황 발생

json 데이터를 받아와서 뿌려줄 때, 개행 문자가 처리가 되는 부분과 안되는 부분이 있었다.

const GetData = () => {
/** 비동기 데이터 받아오는 곳 */
 .then((response) => {
	 setBaseSbom(response.data..replace(/\n/g, '<br>').replace(/ /g, '&nbsp;'))
	 setCompareSbom(response.data..replace(/\n/g, '<br>').replace(/ /g, '&nbsp;'))
 }
}

2. 원인 추론

데이터가 JSON 문자열로 인코딩될 때 개행 문자가 JSON 규격에 맞춰 이스케이프 처리가 되면서,

JSON 데이터 내의 문자열에서 개행 문자가 이스케이프되지 않은 경우도 있을 수 있습니다.

예를 들어, 문자열 데이터가 그대로 JSON으로 변환되면서 개행 문자가 그대로 포함될 수 있기때문. 이는 데이터의 원래 형식과 변환 방식에 따라 다르게 처리해야될 듯 하다. 이를 해결하기 위해선 모든 개행 문자를 <br> 태그로 변환하는 방법을 사용해야될 듯 하다.

3. 해결 방안

const GetData = () => {
/** 비동기 데이터 받아오는 곳 */
 .then((response) => {
	 // 개행처리 함수
            const processSbomData = (data: any): string => {
              if (typeof data === 'string') {
                return data.replace(/\\n/g, '<br>').replace(/\n/g, '<br>').replace(/ /g, '&nbsp;')
              } else if (Array.isArray(data)) {
                return data.map((item) => JSON.stringify(processSbomData(item))).join('<br>')
              } else if (typeof data === 'object' && data !== null) {
                const processedData: { [key: string]: any } = {}
                for (const key in data) {
                  if (Object.prototype.hasOwnProperty.call(data, key)) {
                    processedData[key] = processSbomData(data[key])
                  }
                }
                return JSON.stringify(processedData)
                  .replace(/\\n/g, '<br>')
                  .replace(/\n/g, '<br>')
                  .replace(/ /g, '&nbsp;')
              } else {
                return String(data).replace(/\\n/g, '<br>').replace(/\n/g, '<br>').replace(/ /g, '&nbsp;')
              }
            }
       //
       setBaseSbom(processSbomData(response.data))
       setCompareSbom(processSbomData(response.data))
 }
}

processSbomData 함수가 모든 개행 문자(\n과 \\n)를 <br> 태그로 변환하도록 하여 문자열의 개행 문자가 화면에 잘 표시되도록 해준다.

4. 결과 확인

보안상의 문제로 화면을 띄울 순 없지만
개행처리가 잘 되는 것으로 확인했다.