[이슈리포트] Javascript window간 정보 전달

Issue

[이슈리포트] Javascript window간 정보 전달

God Korea 2022. 10. 5. 00:23

728x90

😋 프로젝트 워밍업

현재 나는 NHN academy 백엔드 과정에서 개발 교육을 받고 있다. 최근 1~2달간은 Java의 기초부터 응용까지 상당한 지식들을 교육받을 수 있었고, 이제는 본격적인 프로젝트를 위한 워밍업에 들어갔다. 백엔드 과정이지만 서버를 만들었다고 해서 눈에 보이지는 않는 법..! 기본적인 프론트엔드를 할 수 있어야 내가 만든 서버를 확인할 수 있기에.. 기본적인 프론트 과정을 짧게 진행했다. 그 과정에서 있던 이슈를 적고자 한다.

🤔 부모창? 자식창?

코로나 19 현황 데이터를 통해 일자별, 도시별, 국가별로 정보를 요청한 후 받아서 웹에 출력해주면 됐다. 그 중 도시별, 국가별은 메인에는 오늘 기준의 최종 데이터만을 출력하고, 지역이나 국가의 이름을 클릭하면 각각의 월별 데이터가 출력되면 됐다. 단, 기존창이 아닌 새창에서 열어야했다.

부모창은 내가 새 창을 열 수 있는 버튼을 갖고 있는 창이다. 즉, 메인 페이지다. 부모창에서 도시 이름을 클릭하면 새 창이 뜨게 되는데 이것을 자식창이라고 한다. 여하튼 부모창의 정보를 자식창에 보내줄 필요가 있는데, 이번에 공부하면서 프론트 단에서도 정보를 교환할 수 있다는 것을 알게 됐다.

👀 정보를 전달하기

자식창을 변수로 지정한 후 값 넘기기, window.opener 사용하기, postMessage() 함수 사용하기 등.. 정말 다양한 방법들이 존재했다. 다양한 방법들은 다른 블로그에 더 잘 나와있어서 다룰 필요가 없기도 하고, 내게 필요한 방법들은 아니었다. 물론, postMessage()를 활용한 방법은 어려워보여서 포기했다. ^^;;

그렇다면 나는 어떻게 정보를 넘겼나보면, url 값으로 정보를 넘겼다. ~~(물론... 나는 부모창에서 데이터를 모두 입력한 배열을 자식창에 그대로 전달해주고 싶었다... 하지만 어떡하겠나.. 그건 안되던데... ㅠㅠ)~~

'use strict';

const serviceKey = "서비스키";

let targetItemList = [];
function getMainItem() {
    const promise = new Promise(function(resolve, reject) {
        const xhr = new XMLHttpRequest();
        const url = `http://openapi.data.go.kr/openapi/service/rest/Covid19/getCovid19SidoInfStateJson`;

        let queryParams = "?" + encodeURIComponent("serviceKey") + "=" + serviceKey;
        queryParams += '&' + encodeURIComponent('pageNo') + '=' + encodeURIComponent('1'); /**/
        queryParams += '&' + encodeURIComponent('numOfRows') + '=' + encodeURIComponent('10'); /**/
        queryParams += '&' + encodeURIComponent('startCreateDt') + '=' + encodeURIComponent('20220930'); /**/
        queryParams += '&' + encodeURIComponent('endCreateDt') + '=' + encodeURIComponent('20220930'); /**/

        let uri = url + queryParams;

        xhr.open("GET", uri);
        xhr.onreadystatechange = function() {
            if (this.readyState == 4) {
                resolve(this.responseText);
            }
        };
        xhr.send('');
    }).then(function(result) {
        let xml = new DOMParser().parseFromString(result, "text/html");
        let item = xml.getElementsByTagName("item");
        let itemList = [];

        for (let i = 0; i < item.length; i++) {
            let createDt = item[i].getElementsByTagName("createDt")[0].innerHTML;
            let gubun = item[i].getElementsByTagName("gubun")[0].innerHTML;
            let defCnt = item[i].getElementsByTagName("defCnt")[0].innerHTML;
            let incDec = item[i].getElementsByTagName("incDec")[0].innerHTML;
            
            let element = {
                createDt,
                gubun,
                defCnt,
                incDec
            }
            itemList.push(element);
        }
        itemList.reverse();
       
        let targetTable = document.getElementById("table_body");
        targetTable.innerHTML = "";

        for (let i = 0; i < itemList.length; i++) {
            let createDt = itemList[i].createDt;
            let gubun = itemList[i].gubun;
            let defCnt = itemList[i].defCnt;
            let incDec = itemList[i].incDec;

            const targetRow = document.createElement("tr");
            targetRow.setAttribute("id", `targetRow_${i}`);

            const regionTd = document.createElement("td");
            const stackTd = document.createElement("td");
            const newTd = document.createElement("td");

            regionTd.setAttribute("id", `region_${i}`);
            regionTd.setAttribute("class", "row region_column");
            stackTd.setAttribute("id", `stack_${i}`);
            stackTd.setAttribute("class", "row stack_column")
            newTd.setAttribute("id", `new_${i}`);
            newTd.setAttribute("class", "row new_column");

            if (gubun == '합계' || gubun == '검역') {
                regionTd.innerHTML = `<a>${gubun}</a>`;
            } else {
                regionTd.innerHTML = `<a onclick="openChild('${gubun}')" href="#">${gubun}</a>`;
            }
            // 텍스트를 누르면 텍스트값을 자식창에 넘긴다.
            
            stackTd.innerHTML = `${defCnt}`;
            newTd.innerHTML = `${incDec}▲`;

            targetRow.appendChild(regionTd);
            targetRow.appendChild(stackTd);
            targetRow.appendChild(newTd);

            targetTable.appendChild(targetRow);
        }
    })
}

window.addEventListener("DOMContentLoaded", function() {
    getMainItem();
})

let childPage;
function openChild(value) {
    childPage = window.open(`new_tab.html?param=${value}`);
    // 새창을 띄우는 파일 그리고 그 뒤에 param으로 임의로 url을 추가함.
}

위와 같이 자식창을 띄울 때 임의로 url에 파라미터 값을 넘기도록 했고, 이 파라미터 값을 자식창에서 받을 때는 decodeURI를 사용했다.

'use strict';

const serviceKey = "서비스키";

//url로 넘어온 value값을 세팅
let queryString = decodeURI(this.location).split("?param=");
let value = queryString[1];
console.log(queryString);
console.log(value);

function getItems() {
    const promise = new Promise(function(resolve, reject) {
        const xhr = new XMLHttpRequest();
        const url = `http://openapi.data.go.kr/openapi/service/rest/Covid19/getCovid19SidoInfStateJson`;
        
        let queryParams = "?" + encodeURIComponent("serviceKey") + "=" + serviceKey;
        queryParams += '&' + encodeURIComponent('pageNo') + '=' + encodeURIComponent('1'); /**/
        queryParams += '&' + encodeURIComponent('numOfRows') + '=' + encodeURIComponent('10'); /**/
        queryParams += '&' + encodeURIComponent('startCreateDt') + '=' + encodeURIComponent('20220901'); /**/
        queryParams += '&' + encodeURIComponent('endCreateDt') + '=' + encodeURIComponent('20220930'); /**/

        let uri = url + queryParams;

        xhr.open("GET", uri);
        xhr.onreadystatechange = function() {
            if (this.readyState == 4) {
                resolve(this.responseText);
            }
        };
        xhr.send('');
    }).then(function(result) {
        let xml = new DOMParser().parseFromString(result, "text/xml");
        let item = xml.getElementsByTagName("item");
        let itemList = [];


        for (let i = 0; i < item.length; i++) {
            let createDt = item[i].getElementsByTagName("createDt")[0].innerHTML;
            let gubun = item[i].getElementsByTagName("gubun")[0].innerHTML;
            let defCnt = item[i].getElementsByTagName("defCnt")[0].innerHTML;
            let incDec = item[i].getElementsByTagName("incDec")[0].innerHTML;
            
            let element = {
                createDt,
                gubun,
                defCnt,
                incDec
            }
            itemList.push(element);
        }
        itemList.reverse();
        getDataOfCity(value, itemList);
    })
}

window.addEventListener("DOMContentLoaded", function() {
    getItems();
})

function getDataOfCity(value, list) {

    let testValue = list.filter(function(data) {
       if(data.gubun == value) {
            return true;
       }
    })
    console.log(testValue);


    let targetTable = document.getElementById("table_body");
        targetTable.innerHTML = "";
    for (let i = 0; i < testValue.length; i++) {
        let createDt = testValue[i].createDt;
        let name = testValue[i].gubun;
        let stack = testValue[i].defCnt;
        let newCnt = testValue[i].incDec;

        const targetRow = document.createElement("tr");
        targetRow.setAttribute("id", `targetRow_${i}`);

        targetRow.innerHTML = `
        <td class="new_row create_column" id="create_${i}">${createDt}</td>
        <td class="new_row region_column" id="region_${i}">
             <a href="#">${name}</a>
         </td>
         <td class="new_row stack_column" id="stack_${i}">${stack}</td>
         <td class="new_row new_column" id="new_${i}">${newCnt}▲</td>`

        targetTable.appendChild(targetRow);
    }
}

decodeURI를 통해서 필요한 value값만 가져올 수 있었다. 그리고 그 value값을 함수에 파라미터로 넣어주면서 생성된 배열에 filter 함수를 실행시켜 원하는 값만 출력할 수 있도록 했다.

대략 한나절을 이 문제로 고민하다가 결국 야매 같아보이는 방법으로 처리했지만 그래도 꽤 괜찮은 방법 같아서 기록을 해두려고 이슈리포트를 작성했다. 나중에 또 필요한 경우가 발생하면 기억을 더듬어 이 글을 찾으러 와야겠다. ~~(물론... 또 프론트에서 이런 정보 전달을 할 일이 있을까 싶기는 하다만.. ^^:;)~~

여하튼 오랜만에 꽤나 재밌는 이슈를 만났다. 이제 다시는 보지 말자 프론트 ^^ (라고 할 뻔 ㅋㅋ 못 풀었으면 재미는 커녕 지옥 같았겠지....) - 9rom 20000

ps. 마지막으로 사진을 첨부한다.

728x90

저작자표시 비영리 동일조건