문제

이미지 파일 업로드시 해당 파일을 보여주는 기능을 구현했다.
새롭게 이미지가 업로드 됐을때 또는 파일 리스트가 비워졌을 경우에 맞춰 현재 파일리스트에 맞춰 이미지를 보여주고자 했다.
파일 리스트가 변경됐을때 기존의 이미지 태그를 삭제한 뒤 다시 띄워주는 방식으로 코드를 작성했지만 이상하게 파일이 지워지다 말고 새 이미지가 추가되는 문제를 발견했다.

const container = document.getElementById('image-show');
for (let i = 0; i < container.childNodes.length; i++) {
    container.childNodes[i].remove()
}

---

시도

처음에는 for문이 실행되는 도중에도 뒤에 코드들을 로드하고있는건 아닌가 생각했었다.
관련해서 검색해보니 자바스크립트는 싱글스레드 사용으로 이 것이 원인은 아니라고 판단했다.

for문을 돌리는 길이를 먼저 지정하지 않고 실행한 문제인가 싶어 다른 방식으로도 작성해봤다.

const container = document.getElementById('image-show');
let num = container.childNodes.length
for (let i = 0; i < num; i++) {
    container.childNodes[i].remove()
}

동일한 결과를 얻었다..

---

해결

문제가 발생했던 원인은
인덱스가 0부터 지정한 값까지 증가하지만 제거하고자 하는 요소들이 줄어들기 때문에 인덱스와 삭제된 요소가 마주치는 시점이 지나면 인덱스에 해당하는 요소가 없어 의도한 결과를 얻지 못했다.

지금까지 게시글 및 댓글 등 다수의 오브젝트를 for문으로 해당하는 요소값을 받아오다보니 for문안에 인덱스를 의미하는 i를 사용하여 코드를 작성해왔다.

이렇게 위와같이 요소가 변하지 않는경우 문제가 없지만 해결하고자 하는 것과 같이 요소가 변한 경우는 조금 다르게 작성해야한다.

const container = document.getElementById('image-show');
let num = container.childNodes.length
for (let i = 0; i < num; i++) {
    container.childNodes[0].remove()
}

이렇게 처음 요소의 값을 지정해주고 그 값만큼 첫번째 요소를 제거하는것을 반복하게 하면 해결된다.
때문에 for문이 아니더라도 while문으로도 해결이 가능하다.