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

이번 포스팅에선 앞서 말했던 이미지가 여러개 있을 기준으로 코드를 구현을 해보려고 한다. 변경된 json파일은 아래와 같다.

{

    "sample": [

        {

            "id": "1",

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

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

            "options": [

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

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

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

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

            ],

            "questionImageUrls": [],

            "questionImageDescriptions": [

                ""

            ],

            "answers": [

                "4"

            ],

            "explanation": "도로교통법 시행규칙 별표18 총중량 750킬로그램을 초과하는 3톤 이하의 피견인 자동차를 견인하기 위해서는 견인하는 자동차를 운전할 수 있는 면허와 소형견인차면허 또는 대형견인차면허를 가지고 있어야 한다.",

            "explanationImageUrls": [],

            "explanationImageDescriptions": [],

            "tags": [],

            "type": "객관식"

        },

        {

            "id": "2",

            "image": "https://gongu.copyright.or.kr/gongu/wrt/cmmn/wrtFileImageView.do?wrtSn=9046601&filePath=L2Rpc2sxL25ld2RhdGEvMjAxNC8yMS9DTFM2L2FzYWRhbFBob3RvXzI0MTRfMjAxNDA0MTY=&thumbAt=Y&thumbSe=b_tbumb&wrtTy=10004",

            "question": "도로교통법령상 운전면허증 <img src=2/> 발급에 대한 설명으로 옳지 않은 것은?",

            "options": [

                "① 운전면허시험 합격일로부터 30일 이내에 운전면허증을 발급받아야 한다.",

                "② 영문운전면허증을 발급받을 수 없다.",

                "③ 모바일운전면허증을 발급받을 수 있다.",

                "④ 운전면허증을 잃어버린 경우에는 재발급 받을 수 있다."

            ],

            "questionImageUrls": [],

            "questionImageDescriptions": [

                ""

            ],

            "answers": [

                "2"

            ],

            "explanation": "도로교통법시행규칙 제77조∼제81조",

            "explanationImageUrls": [],

            "explanationImageDescriptions": [],

            "tags": [],

            "type": "객관식"

        },

이전과 달리 이미지가 2개 이상이다. 이제 이를 파싱할 수 있는 코드를 구현해 볼 것이다. 처음에는 정규 표현식에 이미지의 숫자를 하나하나 파싱할 수 있도록 작성하려 했으나 그럴 필요 없이 <img/>라는 부분이 들어간 모든 표현식을 파싱하고 그것들을 이미지 태그로 전환하는 방식으로 parseImageTag함수를 변환하면 된다. 수정되어야 할 parseImageTag는 아래와 같다.

 

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

  const parseImageTag = (question_img, question_img_url, question_img_class) => {

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

    const imgRegex = /<img.*?\/?>/g;

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

    return question_img.replace(imgRegex, `<img src="${question_img_url}" className="${question_img_class}" />`);

  };

 

결과적으로 너무 복잡하게 생각을 했다. 다음에 구현 해볼 것은 한 문제에 이미지가 2개 이상이 있을 경우 어떻게 처리할지와 dangerouslySetInnerHTML을 대체할 수 있는 라이브러리를 찾아서 대체해서 구현해 볼 것이다.