수정된 API로 기존 함수 수정

최근 잦은 회의와 변동되는 api의 코드들이 많아 자주 push 하지 못했다. commit만 들어 났고 깃허브 잔디는 텅텅비어 있어서 아쉬움이 조금은 많이 남는다.

api의 형태가 바뀌었다. 기존의 함수에서 이미지를 파싱하지 못하는 문제가 발생하였다. 그 이유는 api의 구조가 바뀌었기 때문이다. 우선 기존 함수와 변경된 함수의 차이를 살펴보면 아래와 같다.

기존 outside image를 렌더링하는 함수는 다음과 같다. 단순히 이미지의 image가 배열일 때 해당 api를 불러오는 방식이다. (아래 더보기로 이전 api의 형태를 확인해 보면서 비교하면 좋을 것 같다.)

 

 "images": [

    "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistoryFblog..png",

    "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2mg.png"

 ]

// 이미지 렌더링 함수

const renderImages = (outsideImage) => {

  if (Array.isArray(outsideImage) && outsideImage.length > 0) {

    return outsideImage.map((image, imageIndex) => (

      <img

        key={imageIndex}

        src={image}

        alt={`Image ${imageIndex + 1}`}

        style={{ width: '100%' }}

     />

    ));

  } else {

    return null;

  }

};

 

즉, 현재는 image 안에 url와 attribute 그리고 class 이름을 가지고 있다. 접근 방법은 단순히 image가 아닌 image.url과 같은 방식으로 접근을 하면 되는 것이다.  아래 코드는 변경된 부분이다. 참고로 image의 alt 또한 1부터 시작이 아닌 0부터 시작하기로 약속 했기 때문에 1을 더하지 않는다.

 

  // 이미지 렌더링 함수 수정 / 현재 변수명은 imageData로 변경하였다.

  const renderImages = ( outsideImage ) => {

    if (Array.isArray( outsideImage ) && outsideImage .length > 0) {

      return outsideImage .map((image, imageIndex) => (

        <img

          key={imageIndex}

          src={image.url} // 이미지 객체에서 URL을 가져옵니다.

          alt={`Image ${imageIndex}`}

          style={{ width: '100%' }}

        />

      ));

    } else {

      return null;

    }

  };

변경된 api를 보면 이미지 객체로 접근해서 url을 가지고 와야한다. 그래서 image.url로 접근해서 변경하면 된다.  (아래 더보기로 변경된 api의 형태를 확인해 보면서 비교하면 좋을 것 같다.)

 

 "question_images_out": [

                {

                    "url": "https://img1.daumcdn.net/thumb/R1280x0/?Rk%2Fimg.png",

                    "description": "",

                    "attribute": ""

                }

            ],

---

다음으로 수정되는 함수는 inside image를 파싱하고 렌더링하는 함수이다. 역시나 위의 함수와 같이 api의 이미지 객체에 접근하는 방식으로 코드를 작성해야 한다.

 

  const parseImageTag = (question, questionImgUrls) => {

    let parsedQuestion = question;

    // 이미지 URL 배열이 정의되었는지 확인합니다.

    if (Array.isArray(questionImgUrls) && questionImgUrls.length > 0) {

      // 이미지 URL 배열의 각 요소를 반복하여 이미지 태그를 생성하고 질문에 삽입합니다.

      questionImgUrls.forEach((imageUrl, index) => {

        // 정규 표현식을 사용하여 이미지 태그를 대체합니다.

        const regex = new RegExp(`src=${index + 1}`, 'g');

        parsedQuestion = parsedQuestion.replace(regex, `src="${imageUrl}"`);

      });

    }

    return parsedQuestion;

  };

 

아래 코드는 변경되 코드이다.

 

  const parseImageTag = (question, questionImgUrls) => {

    let parsedQuestion = question;

    // 이미지 URL 배열이 정의되었는지 확인합니다.

    if (Array.isArray(questionImgUrls) && questionImgUrls.length > 0) {

      // 이미지 URL 배열의 각 요소를 반복하여 이미지 태그를 생성하고 질문에 삽입합니다.

      questionImgUrls.forEach((imageUrl, index) => {

        // 정규 표현식을 사용하여 이미지 태그를 대체합니다.

        const regex = new RegExp(`src=${index}`, 'g');

        parsedQuestion = parsedQuestion.replace(regex, `src="${imageUrl.url}"`);

      });

    }

    return parse(parsedQuestion);

  };

 

여기서 우리가 주의 깊게 봐야할 코드가 있다. 그것은 RegExp이다. 정규 표현식은  문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용한다. 그렇다면 왜 RegExp를 사용하는 것일까? 단순 리터럴로 표현해서 문자열 방식으로 작성해도 되는데 말이다. RegExp는 생성자이며 new를 통해서 객체를 생성한다. 생성자를 사용하면 정규 표현식이 런타임에 컴피일이 된다. 패턴이 변할 가능성이 있거나 사용자 입력을 해서 지속적으로 알 수 없는 외부 소스에서 가져오는 정규 표현식의 경우 생성자를 사용하는 것이 좋다. 그렇다면 의문이 들 것이다. 과연 우리의 api에선 패턴이 동적으로 변하는 것인지 말이다. 우선 리털러로 위의 코드를 작성 했을 때 코드를 살펴보자.

const parseImageTag = (question, questionImgUrls) => {

  let parsedQuestion = question;

  // 이미지 URL 배열이 정의되었는지 확인합니다.

  if (Array.isArray(questionImgUrls) && questionImgUrls.length > 0) {

    // 이미지 URL 배열의 각 요소를 반복하여 이미지 태그를 생성하고 질문에 삽입합니다.

    questionImgUrls.forEach((imageUrl) => {

      // 정규 표현식 리터럴을 사용하여 이미지 태그를 대체합니다.

      const regex = /src=\d+/g;

      parsedQuestion = parsedQuestion.replace(regex, `src="${imageUrl.url}"`);

    });

  }

  return parse(parsedQuestion);

};

위와 같이 코드를 작성해도 크게 문제는 없다. 따라서 우리는 동적 기준으로 리터럴과 생성자를 정하는 것이 맞다 판단이 된다. 그래서 리터럴로 코드를 작성하는 것이 코드의 가독성이 좋다고 판단 된다.

---

* 코드 분석

(코드 분석을 통해서 변수명과 함수명을 수정해 나갈 것이다.)

# ParseImageTag

 

  import parse from 'html-react-parser';

  ...

  // inside 이미지 파싱 후 렌더링 함수 수정

  const parseImageTag = (question, questionImgUrls) => {

    let parsedQuestion = question;

    // 이미지 URL 배열이 정의되었는지 확인합니다.

    if (Array.isArray(questionImgUrls) && questionImgUrls.length > 0) {

      // 이미지 URL 배열의 각 요소를 반복하여 이미지 태그를 생성하고 질문에 삽입합니다.

      questionImgUrls.forEach((imageUrl) => {

        // 정규 표현식 리터럴을 사용하여 이미지 태그를 대체합니다.

        const regex = /src=\d+/g;

        parsedQuestion = parsedQuestion.replace(regex, `src="${imageUrl.url}"`);

      });

    }

    return parse(parsedQuestion);

  };

 

 이 함수의 목적을 살펴보면 api에서 문제를 불러올 때 이미지 마킹으로 표기해둔 HTML문법을 파싱하는 역할을 한다. 이미지 마킹을 해둔 표기는 '<img src=0>' 에서 'src=n' 부분을 파싱해서 거기에 해당 되는 api 이미지 객체를 대체하는 함수이다. 즉, 삽입되어 있는 이미지를 렌더링 할 수 있는 함수이다. 

매개변수 부터 살펴보자. 우리는 두개의 매개변수를 가져와야한다. 첫 번째로는 해당 question 필드인 문제를 가져오는 것이고 두 번째로는 question_images_in 필드를 가져와서 이미지 필드를 가지고 오는 것이다. 즉, id=n의 해당되는 question과 question_images_in들을 순차적으로 반복한다.

 

 <p>{item.id}. {parseImageTag(item.question, item.question_images_in)}</p>

 

여기서 각 매개변수가 어디로 어떻게 흘러가는지 살표보자.

* let parsedQuestion = question;

우선 question은 paredQuestion으로 재정의가 된다. 원본은 유지하고 question이 복사된 값으로 replace를 해서 이미지가 렌더링 될 수 있게 하기위함이다. 

* if (Array.isArray(questionImgUrls) && questionImgUrls.length > 0) {...}

해당 조건 문은 questionImgUrls에 담긴 tiem.question_images_in 필드가 배열로 이루어져 있는지 유효성을 확인하는 조건 문이다. 만약 유효하지 않는다면 다른 이미지로 대체가 될 수 있게 처리를 해야하기 때문이다. 물론 현재는 else문으로 return이 될 때 null을 출력하게 된다. 이 조건문은 유효성을 확인하는 차원에도 있지만 우리가 받아오는 api의 필드가 문제가 되었거나 예기치 못한 상황을 대비하기 위해서 필요한 조건 문이다. (예외적 처리를 해야하는 부분에서 FE에서 어떻게 처리를 해야할지 논의 후에 추가적으로 포스팅 할 예정이다.)

* questionImgUrls.forEach((imageUrl, index) => {..} / const regex = /src=\d+/g; /  parsedQuestion = parsedQuestion.replace(regex, `src="${imageUrl.url}"`); / return parse(parsedQuestion);

이제 유효성이 확인된 questionImgUrls 매개변수는 forEach를 통해서 해당 이미지 배열 안에 있는 요소들을 차례대로 매개변수로 받아와 적절히 필요한 위치에 순서대로 위치시킨다. map 함수는 새로운 배열을 반환하는데 사용되기 때문에 여기에 사용되기에는 적절치가 않다. 따라서 이미지의 객체들을 순서대로 반복하는 것이 해당 함수의 목적이기 때문에 forEach문이 적절한 것이다. regex변수는 우리가 해당 question에 들어 있는 이미지 마킹 부분을 정규식으로 파싱하는 변수를 담고 있다. 해당 이미지 마킹을 찾아서 앞서 question이 복사된 parsedQuestion 변수에 replace를 통해서 이미지 태그에 url을 적절히 넣어 준다. 이후 html-react-parser 라이브러릴 상용해서 해당 question 객체를 html로 렌더링 되게 return문으로 반환해준다.

## 변수명 수정 사항

우리가 변수명을 고민을 해봐야 하는 이유는 앞으로 해당 함수를 외부로 컴포넌트를 두고 재사용이 가능하게 할 것이다. 즉, 현재 매개변수만 보아도 question이라든가 questionImgUrls와 같은 변수명은 현재 스크립트 중심으로 보았을 땐 괜찮아 보이나 재사용 여부를 두고 보았을 때는 과연 적절한 변수명인지 고민을 하게 된다. 즉, 해설부분에서도 해당 함수를 사용하게 되는데 question이라는 매개변수는 너무 제한적 의미 중심적이란 생각이 든다. 그래서 element나 item과 같은 단어로 통합적인 의미로 작명을 할지 고민 중이다. 따라서 다른 프로젝트들의 함수 매개변수들을 찾아서 참고해면 좋을 듯 하다. 더 나아가 함수명 또한 재정의 하면 좋을 듯 하다. imageUrl같은 경우에도 현재는 우리가 imageUrl에서 url만 적용하지만 이후에 class이름을 접근하는 attibute와 같은 객체를 접근해야 한다. 그때를 생각해서 매개 변수를 보면 imageUrl같은 변수명은 범위가 너무 좁다고 본다. parseImageTag라고 작명하는 것도 좋지만 아래 renderImage와 대조 해보았을 때 너무 동떨어진 함수같아 보여 수정이 필요해 보인다.

---

# renderImages

 

 // outside 이미지 렌더링 함수 수정

  const renderImages = (imageData) => {

    if (Array.isArray(imageData) && imageData.length > 0) {

      return imageData.map((image, index) => (

        <img

          key={index}

          src={image.url} // 이미지 객체에서 URL을 가져옵니다.

          alt={`Image ${index}`}

          style={{ width: '100%' }}

        />

      )) ;

    } else {

      return null;

    }

  };

 

 이 함수의 목적을 살펴보면 api에서 외부에 있는 이미지를 렌더링 하는 역할을 한다. 외부의 이미지를 img태그를 통해서 렌더링하는 목적으로 만들어진 함수라서 이전 ParserImageTag와 달리 특별히 파싱을 하지는 않는다. 코드의 형태는 이전 코드와 매우 유사하다.

 

<div>{renderImages(item.question_images_out)}</div>

 

* if (Array.isArray(questionImgUrls) && questionImgUrls.length > 0) {...}

앞서 확인 했던 함수의 배열 유효성 검사를 하는 조건문은 동일하며 tiem.question_images_out 필드가 배열로 이루어져 있는지 확인하는 조건 문이다. 위의 함수와 동일하게 만약 유효하지 않는다면 else문으로 return이 될 때 null을 출력하게 된다. (예외적 처리를 해야하는 부분에서 FE에서 어떻게 처리를 해야할지 논의 후에 추가적으로 포스팅 할 예정이다.)

* return imageData.map((image, imageIndex) => (...)

여기서는 forEach가 아니라 map함수를 사용해서 가져온 배열을 img태그 요소를 생성해서 새로운 배열을 만들어 내는 것이다. 즉, 이전에 우리가 살펴본 ParseImageTag함수는 배열의 요소를 단순히 순서대로 나열하고 replace 하는 정도이기 때문에 forEach문을 사용하는 것이 적합했다. 따라서 renderImage함수에서는 img태그 요소를 생성하고 새로운 배열을 만들어내는 것이기 때문에 여기서는 map함수를 사용하는 것이 적절하다.

## 변수명 수정 사항

변수명 수정 해야 할 부분은 imageData 매개변수이다. image의 따른 data는 맞지만 해당 매개변수는 api의 필드명을 가져오기 때문에 image라고 특정 짓는 것은 재활용을 하기 있어서 단어의 범위가 비좁은 감이 없지 않아 있다. 따라서 이 또한 item이나 element와 같은 광범위한 단어를 선택하는 것이 좋을 것같다. 또는 filedName이라고 작성하면 어떨까? renderImage함수명 또한 수정이 필요해 보인다. image가 render되는 것은 맞지만 parseImageTag와 비교해 보면 조금은 어색해 보인다.