개발자

공공데이터 API 호출 및 렌더링 과정에서 고민이 있습니다..

2024년 05월 05일조회 80

공공데이터api 관련 프로젝트를 진행 하고 있습니다. 기획, 디자인 전부 저를 비롯한 팀원과 함께하고 있는데, api를 불러와 정보 데이터를 표시하는데 <p><span style="color: rgb(13, 13, 13); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space-collapse: preserve; background-color: rgb(255, 255, 255);">덕순이.. 이상하게 보자마자 덕순이란 이름이 떠올랐어요.</span></p><p><span style="color: rgb(13, 13, 13); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space-collapse: preserve; background-color: rgb(255, 255, 255);"><br></span></p><p><span 이런식으로 스트링 값으로 불러와집니다. 문자열로만 추출하니 개행, 문장 이음새 등등이 가독성이 아래사진 처럼 매우 떨어지게 됩니다 다음 상황에서 어떤 방법이 좋을까요? 위와 같은 태그로 표시되기에 이를 React에서 그대로 태그 형식으로 출력하는 방법을 생각해보고 있지만, 컬러,폰트 크기 같은 속성은 제외하고 <p> <span>등의 태그만 유지하도록 필터링해야하는 것인가요? 혹시 그렇다면 그 필터되 값을 문자열 형식말고 태그형식으로 적용할 수 있을까요? (추가) 현재 gpt 도움으로 아래의 방법으로 진행하여 성공하게 되었는데 이방법보다 효율적인 방법이 있을까요? 또한 이방법으로는 폰트 사이즈, 굵기가 임의 조절이 되지않는 단점이 있어서 이를 해결하고 싶습니다.

1const filteredText = dog.INTRCN_CN.replace(/[^\s가-힣!?]/g, "");
2   //현재 다음형식으로 특수문자와 영어를 필터링 하였습니다.
3
4//gpt 제시 방법
5import DOMPurify from 'dompurify';
6
7const htmlString = '<p><span style="color: rgb(13, 13, 13); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space-collapse: preserve; background-color: rgb(255, 255, 255);">덕순이.. 이상하게 보자마자 덕순이란 이름이 떠올랐어요.</span></p><p><span style="color: rgb(13, 13, 13); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space-collapse: preserve; background-color: rgb(255, 255, 255);"><br></span></p><p><span';
8
9const filteredHtmlString = DOMPurify.sanitize(htmlString);
10
11function MyComponent() {
12  return <div dangerouslySetInnerHTML={{ __html: filteredHtmlString }} />;
13}
이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

행운아777님의 프로필 사진

https://github.com/remarkablemark/html-react-parser 이런 파서 이용하세요. 위에 첨부한 파서의 예제 보시면 html 요소들을 다 짤라서 tag인지 attribute인지 종류도 알려주고 각각을 내가 원하는 형태로 교체하는 방법이 자세히 소개되어 있습니다. 답변 맨 위에 첨부한 링크는 구글 검색 젤 위에 나와서 api 문서 살펴보고 충분히 괜찮아보여서 주소를 복붙한건데 저거보다 더 좋은거나 질문자의 취향에 더맞는 파서가 있는지 알아보고 이용하시기 바랍니다.

profile picture

익명

작성자

2024년 05월 09일

답변감사합니다!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!