html 페이지 이동 시에도 js 전역변수 값 유지하면서 가져오기 (서울시 유치원 정보 사이트 프로젝트 ep.2)

홈화면 기획

 

이번 프로젝트를 개발함에 있어서 가장 첫번째로 구현하려는 기능은 홈 화면에서 각 서울시 구에 해당하는 버튼을 눌렀을 때 list.html이라는 해당 구 유치원 목록 화면으로 이동해서 눌렀던 버튼의 텍스트콘텐츠로 api를 조회해서 목록카드를 채워서 나열해주는 것이었다.

 

버튼 눌렀을 때 구별 유치원 목록화면으로 이동

 

 

이 부분을 해결함에 있어서 두가지 부분에서 부딪혔었는데 첫번째는 서울 열린 데이터 광장에서 데이터를 가져오는 부분이었다.

서울 열린 데이터 광장

 

 

데이터를 XML방식으로 제공해줘서 난감했다 ;;

XML방식으로 작업해보려고 시도도 해보았고 json으로의 변환 방식도 찾아보긴 했었지만 둘 다 너무 복잡해서 프로젝트를 함에 있어서 배보다 배꼽이 더 커지겠다고 판단되었다. 그래서 XML로 가져오는 것은 과감히 접고 다행히 json을 개별 파일로는 제공해주길래 그걸 직접 다운받아서 사용해보기로 했다. 몇달마다 업데이트쳐주긴 해야겠지만 당장은 이게 최선이라고 생각되었다.

 

일단 임시로 5개 정도 서울시 구 배열을 만들었고

let guName =

['강서구', '강남구', '강동구', '광진구', '송파구']

let clickedGuName;

// 구 버튼을 생성하고 눌렀을 때 서치리스트 기능을 실행

guName.forEach((item) => {

const guBTN = `

<button id="gu-btn" onClick="

clickedGuName = this.textContent;

">${item}</button>

`;

document.querySelector(".states-btn-container")

.insertAdjacentHTML("beforeend", guBTN);

});

// 구 버튼 눌렀을 때 clickedGuName을 통해 api를 조회해서 목록을 생성해주는 기능

function searchList(clickedGuName){

fetch("./json/kinderGeneral.json")

.then((response) => response.json())

.then((data) => {

for(let i = 0; i < data.DATA.length; i++){

if(data.DATA[i].addr.includes(clickedGuName)){

document.querySelector(".list-container")

.insertAdjacentHTML("beforeend", listCard);

}

}

});

};

 

해당 데이터로 버튼을 생성시키고 그 버튼을 눌렀을 때 api 정보를 조회하는건 생각보다 빠르게 풀렸다. includes라는 것을 이용해서 클릭한 버튼 내용인 구이름이 포함된 데이터만 추리고 그 안에서 다시 정보를 가져올 수 있었다.

(버튼을 누르면서 console.log로 유치원 정보들 불렀을 때 순간적으로 이젠 개발 좀 한다고 착각했음) 

 

하지만 바로 두번째 난관에 봉착.

버튼을 눌러서 list.html이라는 페이지로 이동했더니 새 페이지에서는 그게 작동하지 않았다. 이리저리 고민해봤더니 내가 눌렀을 때 해당 버튼 텍스트 콘텐츠를 저장하는 전역변수인 clickedGuName이 새 페이지가 열리는 순간 초기화되었고 서치를 해봐도 원래 그렇게 초기화된다고 한다.

 

난관에 빠진 나를 구해준건 다름아닌 챗 gpt였다. 혹시나해서 코드와 함께 물어봤는데 정확한 해결방법을 알려주었다. *ㅁ*

전역변수는 페이지가 이동될 때 초기화되는 게 정상이긴한데 저장해서 이동해도 유지시킬 수 있는 localStorage 라는 것을 사용하면 이 문제를 해결할 수 있었다.

 

js를 페이지별로 index.js와 list.js로 구분한 후

let clickedGuName;

localStorage.setItem('clickedGuName', clickedGuName);

변수를 만들어줬던 index.js에서는 localStorage.setItem을 해주고

 

document.addEventListener("DOMContentLoaded", function() {

let clickedGuName = localStorage.getItem('clickedGuName');

 

if (clickedGuName) {

searchList(clickedGuName);

} else {

console.error("No guName found in localStorage.");

}

});

저장한 변수값을 list.js에서는 localStorage.getItem으로 가져올 수 있었다.

 

 

index.js 코드

let guName =

['강서구', '강남구', '강동구', '광진구', '송파구']

// 구 버튼을 눌렀을 때 그 텍스트콘텐츠 정보를 clickedGuName이라는 전역변수에 저장하고 다른 페이지에서도 사용하기 위한 코드

let clickedGuName;

localStorage.setItem('clickedGuName', clickedGuName);

// 구 버튼을 생성하고 눌렀을 때 서치리스트 기능을 실행

guName.forEach((item) => {

const guBTN = `

<button id="gu-btn" onClick="

clickedGuName = this.textContent;

localStorage.setItem('clickedGuName', clickedGuName);

location.href = 'list.html';

">${item}</button>

`;

document.querySelector(".states-btn-container")

.insertAdjacentHTML("beforeend", guBTN);

});

 

 

list.js 코드

// index.js에서 저장된 전역변수 clickedGuName를 localStorage로 저장했다가 가져오기

document.addEventListener("DOMContentLoaded", function() {

let clickedGuName = localStorage.getItem('clickedGuName');

 

if (clickedGuName) {

searchList(clickedGuName);

} else {

console.error("No guName found in localStorage.");

}

});

 

// 구 버튼 눌렀을 때 clickedGuName을 통해 api를 조회해서 목록을 생성해주는 기능

function searchList(clickedGuName){

fetch("./json/kinderGeneral.json")

.then((response) => response.json())

.then((data) => {

for(let i = 0; i < data.DATA.length; i++){

if(data.DATA[i].addr.includes(clickedGuName)){

let listCard = `

<div class="list-card">

<div class="list-contentsGrp">

<div class="list-contents">

<div class="kinder-title">

<div class="kinder-tag" id="list-establish${[i]}">

${data.DATA[i].establish}

</div>

<div class="kinder-name" id="list-name${[i]}">

${data.DATA[i].kindername}

</div>

</div>

<div class="list-infoGrp">

<div class="list-info" id="list-num${[i]}">

${data.DATA[i].telno}

</div>

<div class="list-info" id="list-addr${[i]}">

${data.DATA[i].addr}

</div>

</div>

</div>

<div class="icon">

아이콘

</div>

</div>

<div class="divider"></div>

</div>

`

document.querySelector(".list-container")

.insertAdjacentHTML("beforeend", listCard);

}

}

});

};

 

 

이렇게 진행했더니 홈 화면에서 강남구 버튼을 눌렀을 때

이렇게 해당 강남구 유치원 정보를 목록화해서 가져올 수 있었다!

 

 

 

이번에 느낀 점은 나혼자 끙끙 고민하는 것도 실력이 늘긴 하겠지만 과감하게 모를 때에는 chat gpt를 활용하는 것도 좋다는 것이었다. 항상 느끼지만 chat gpt는 상상 그이상인 것 같다.

 

이제 다음 난관을 향해 고고.