[FE]json파일로부터 각 문제 이미지 띄우기(1)

현재 백엔드로 부터 아직 완벽한 api를 전달 받지 않았다. 백엔드에서 아직 이미지를 가지고 오는 것이 완료되지 않았다. 뿐만아니라 css를 적용하기 위해서 각 이미지들의 className도 api로 제작하기로 했다. 그래서 직접 샘플로 제작된 json파일을 직접 수정 해보려한다. 더 나아가서 글자 사이에 이미지가 삽입되는 경우도 있다. 이런 부분들을 샘플로 작업해 보려고 한다. 우선 내가 수정한 json파일은 아래와 같다. 

 

{

    "sample": [

        {

            "id": "1",

            "question": "다음 중 총중량 <img src=1/> 1.5톤 피견인 승용자동차를 4.5톤 화물자동차로 견인하는 경우 필요한 운전면허에 해당하지 않은 \n것은?",

            "options": [

                "① 제1종 대형면허 및 소형견인차면허",

                "② 제1종 보통면허 및 대형견인차면허",

                "③ 제1종 보통면허 및 소형견인차면허",

                "④ 제2종 보통면허 및 대형견인차면허"

            ],

            "questionImageUrls": [],

            "questionImageDescriptions": [

                ""

            ],

            "answers": [

                "4"

            ],

            ...

}

 

우선 글자 사이에 삽입되어 있는 이미지 태그는 어디에 이미지가 들어가는지 표기하기 위한 '이미지 마킹'이다. 이를 라이브러리를 통해서 json파일을 리액트로 렌더링 해서 한번에 처리하면 좋겠지만 우리가 생각한 것처럼 되는 라이브러리를 찾지 못했다. 그래서 이를 정규 표현식으로 직접 파싱해서 우리가 원하는 img 태그로 전환하려 한다. 그렇게 만들게 된 함수는 아래 코드와 같다.

 

//HTML 문자열에 포함된 <img> 태그를 실제 이미지로 변경하는 함수

  const parseImageTag = (question_img) => {

    // 정규식을 사용하여 <img src=1> 문자열을 찾습니다.

    const imgRegex = /<img\s+src=1\s*\/?>/g;

    // 대체할 이미지 태그로 교체합니다.

    return question_img .replace(imgRegex, '<img src= "

https://png.pngtree.com/thumb_back/fh260/background/20230609/pngtree-three-puppies-with-their-mouths-open-are-posing-for-a-photo-image_2902292.jpg"   

/>'
);

};

 

imgRegex변수에는 json파일에 <img src = 1/>태그를 찾을 수 있는 정규 표현식 '/<img\s+src=1\s*\/?>/g'인 문자를 문자열로 기입 해주고 변환이 이루어질 json의 question문자열을 파라매터로 가지고 와 replace를 통해서 imRegex와 내가 윈하는 img 태그로 전환을 해준다. 이후 해당 함수 파라매터에 각 필요한 정보 들을 추가 할 것이다. 앞으로 className이나 image_url들이 있을 것이다. 예시는 아래와 같다.

 

//HTML 문자열에 포함된 <img> 태그를 실제 이미지로 변경하는 함수

  const parseImageTag = (question_img) => {

    // 정규식을 사용하여 <img src=1> 문자열을 찾습니다.

    const imgRegex = /<img\s+src=1\s*\/?>/g;

    const tagReplace = '<img src="https://png.pngtree.com/thumb_back/fh260/background/20230609/pngtree-three-puppies-with-their-mouths-open-are-posing-for-a-photo-image_2902292.jpg" />'
'

    // 대체할 이미지 태그로 교체합니다.

    return question_img.replace(imgRegex, tagReplace);

  };

 

이런 식으로 전환이 될 것이다. 위의 예시로 전환이 될 때 다시 포스팅을 해보겠다.

이제 parseImageTag를 jsx에 적용해보면 아래와 같다.

    <ol>

        {data.map((item) => (

          <li key={item.id}>

            <h1>test</h1>

            <p dangerouslySetInnerHTML={{ __html: parseImageTag(item.question) }} />

            {item.options.map((option, index) => (

              <div key={index}>{option}</div>

            ))}

          </li>

        ))}

     </ol>

여기서 굉장히 낯선 문법들이 나오는데 'dangerouslySetInnerHTML'와 ' __html:'이다. 아마도 해당 문법은 parseImageTage에 있는 태그가 문자열로 이루어 져있다. 그래서 강제로 문자열을 html로 전환하는 것이 아닌가 싶다. dangerouslySetInnerHTML을 찾아보니 React 문법이며, HTML을 동적으로 렌더링하기 위한 용도로 사용된다. 주로 사용되는 상황은 서버에서 가져온 텍스트 데이터에 HTML 태그가 포함되어 있는 경우 그렇다. 이 문법을 사용하지 않으면 다른 문제사항을 야기 할 수 있는데 React에서는 HTML 태그를 직접 렌더링할 경우 보안상의 이유로 기본적으로 허용하지 않는다. 하지만 dangerouslySetInnerHTML 속성을 사용하면 React가 HTML을 안전하게 렌더링하도록 허용할 수 있다. 

따라서 주의해야 할 것은 dangerouslySetInnerHTML을 사용할 때 사전에 신뢰할 수 있는 소스에서 받은 HTML 코드를 렌더링할 때에만 사용해야 한다. 사용자 입력이나 외부에서 가져온 데이터를 이를 통해 렌더링하는 것은 보안상의 위험이 있을 수 있다. 사용 시에는 꼭 취약점에 대한 검토를 거쳐야 한다.

여기서 우리가 집고 넘어가야하는 것은 '이미지 마킹'을 렌더링 하는 것이 아니라는 것이다. 우리가 렌더링할 HTML은 imRegex라는 것이다. 즉, '이미지 마킹'이 HTML로 이루어져 있던 마크다운이던 아무런 상관이 없다는 것이다.