[JavaScript] 변수 흐름과의 싸움🤨#1
코드가 계속 수정되면서 되던 것도 안 되고...🫤 자바스크립트 코드는 여전히 눈에 잘 안 들어왔는데 고치면서 변수 흐름에 대해서 더 이해하게 되었다..!
문제 상황
아래 화면에서 여행 종료일을 하루 더 늘린 8월 31일로 바꿨을 때 문제가 발생했다!
위 처럼 날짜를 늘리기 전에는 현재 선택한 장소들의 배열인 selectedPlaces를 로그에 찍으면 selectedPlaces[1]에는 1일차 장소가, [2]에는 2일차 장소가 정상적으로 들어있다.
하지만 날짜를 31일으로 하루 늘리고 selectedPlaces를 찍어보면 selectedPlaces[3]까지만 존재해야하는데 [5]까지 생성되어 있는 것을 확인할 수 있었다. 정상적인 상황이라면 selectedPlaces[1]과 [2]에만 장소가 존재하고, [3]은 비어있어야 하며, [4], [5]는 생성되어선 안 된다.
문제 해결
날짜가 변경되면 updateTripDates()가 호출된다.
현재 화면에 표시된 여행 날짜 데이터와 속한 장소 데이터를 existingTripDates 배열에 저장하고 기존에 있던 내용들(innerHTML)을 지워준다.
const newTripDatesContainer = document.getElementById('tripDatesContainer');
newTripDatesContainer.innerHTML = '';
그 다음 addTripDate()를 호출해서 existingTripDates에 있는 데이터들을 수정 페이지를 처음 불러왔을 때처럼 새롭게 생성하게된다.
그러므로 updateTripDates()에서 addTripDate()를 호출하기 전에 기존 데이터가 들어있는 배열들을 비워줄 필요가 있었다.
// selectedPlaces와 markers 비워줌
selectedPlaces = {};
markers = {};배열을 비워주는 위 코드를 적용하고 보니 이번엔 기존 중복되던 데이터는 잘 지워졌지만, 인덱스가 [1]부터가 아닌 [3]부터 시작했다.
그럼 addTripDate()에서 selectedPlaces의 index 값을 지정해주는 코드를 살펴보자.
function addTripDate(tripDateData = {}) {
const tripDateId = tripDatesCounter++;
.. 생략 ..
// 받아온 데이터를 기반으로 selectedPlaces 객체 초기화
const dayNum = tripDateId + 1;
if (tripDateData.tripLocations) {
selectedPlaces[dayNum] = tripDateData.tripLocations.map(loc => ({
placeName: loc.placeName,
latitude: loc.latitude,
longitude: loc.longitude
}));
.. 생략 ..
}selectedPlaces 배열의 index는 tripDateId + 1 로 지정되고, tripDateId 는 tripDatesCounter에 의해 지정된다.
근데 !!
tripDatesCounter 이 녀석이 addTripDate() 내에서만 사용하는데 let tripDatesCounter = 0; 이렇게 전역변수로 설정되어있었다.
즉, 최초 일정 수정 페이지를 불러올 때 addTripDate()이 호출되는데, tripDatesCounter가 전역변수여서 최초에 증가된 값들이 날짜를 수정하는 함수인 updateTripDates() 내에서 addTripDate()를 호출했을 때 영향을 미친 것이다.
1. 그래서 tripDatesCounter를 addTripDate() 내에 지역변수로 let tripDatesCounter = 0; 이렇게 선언하는 걸로 변경
→ Day 1, Day 2, Day 3 이렇게 늘어나야하는데 Day 1 로만 나타남.
→ 왜? updateTripDates() 내에서 addTripDate()을 한 번만 호출하는게 아니고 updateTripDates() 내의 반복문에서 addTripDate()가 호출되기 때문에 반복문 돌 때마다 0으로 초기화되어서 그럼!
2. [해결] let tripDatesCounter = 0;은 전역변수로 놔두고, updateTripDates() 호출 될 때 내부에서 tripDatesCounter = 0; 로 초기화 해주기
→ 이렇게 하면 날짜가 수정될 때 한 번 tripDatesCounter = 0 으로 초기화되니 데이터 초기화 해주는 거나 마찬가지다.
이렇게 하니 아래처럼 Day 1, 2, 3 지정 잘 되고 selectedPlaces도 일차별로 지정 잘 되는 것을 확인할 수 있었다.
하지만 또 다른 문제가 있었다... 이건 다음 편에!