231115 개발일지 TIL - Error: ReferenceError: can't access lexical declaration 'http' before initialization

Error: ReferenceError: can't access lexical declaration 'http' before initialization
    fetchHTML http://[url]?id=654746906098:770
    fetchHTML http://[url]?id=654746906098:769
    fetchItemDetail http://[url]?id=654746906098:791
    promise callback*fetchItemDetail http://[url]?id=654746906098:789
    onload http://[url]id=654746906098:763
    EventHandlerNonNull* http://[url]?id=654746906098:759

<script src="https://cdn.jsdelivr.net/npm/node-http-server@8.1.5/server/Server.min.js"></script>
    
<script>
    async function fetchHTML(url) {
        return new Promise((resolve, reject) => {
            http
                .get(url, (res) => {
                    let data = "";
                    res.on("data", (chunk) => {
                        data += chunk;
                    });
                    res.on("end", () => {
                        resolve(data);
                    });
                })
                .on("error", (err) => {
                    reject(err);
                });
        });
    }

    function fetchItemDetail(itemId) {
        fetch(`http://192.168.0.158:8000/getItemDetail?id=${itemId}`) // 로컬 백엔드 서버
            .then(response => response.json())
            .then(data => {
                let detailUrl = data.result.globalData.detailModel.detailUrl;
                return fetchHTML(detailUrl);
            })
            .then(html => {
                let parser = new DOMParser();
                let doc = parser.parseFromString(html, 'text/html');

                let imageTags = doc.getElementsByTagName('img');
                let imageContainer = document.getElementById('imageContainer');

                for(let i = 0; i < imageTags.length; i++) {
                    imageContainer.appendChild(imageTags[i]);
                }
            })
            .catch(error => console.error('Error:', error));
    }

</script>

문제 원인
위 오류는 http 변수가 초기화되기 전에 참조되었다는 것을 나타내는데 http 모듈이 적절하게 불러와지지 않았을 때 발생하는 문제이다.

해결 방법
웹 브라우저 환경에서는 Node.js의 http 모듈을 사용할 수 없기 때문에 대신 fetch API를 사용해야 한다.

async function fetchHTML(url) {
  try {
    let response = await fetch(url);
    let data = await response.text();
    return data;
  } catch (err) {
    console.error(err);
  }
}

이 함수는 웹 브라우저의 fetch API를 사용하여 HTML을 가져온다. fetch 함수는 Promise를 반환하므로 await 키워드를 사용하여 해당 Promise가 해결될 때까지 기다려준다. 그리고 response.text() 함수를 사용하여 HTML 데이터를 텍스트 형태로 가져온다.

이렇게 하면, 웹 브라우저 환경에서도 동작하는 코드가 되는데 웹 페이지의 HTML을 가져와서 그 안에 포함된 이미지들을 imageContainer에 추가할 수 있다.