[TIL #15] 팀프로젝트- 탈퇴기능

문제점

회원 탈퇴시 사용자가 입력한 ID가 없으면 경고메세지를 출력하게 하고싶었지만, 의도대로 동작하지 않았다

처음 코드

for (let i = 0; i < localStorage.length; i++) {
			const key = localStorage.key(i);
			if (key.startsWith("joinInfo")) {
				const user = JSON.parse(localStorage.getItem(key));
				if (user.id === quitId) {
					localStorage.removeItem(key);
					alert(`${user.name} 사용자가 탈퇴되었습니다`);
					location.reload();
					break;
				}
			}
			else {
			alert("해당 ID의 사용자를 찾을 수 없습니다");
			}
		}

이렇게 for문안에 if-else를 사용해서 유효성 검사를 하고, else로 아이디가 없을때를 넣었는데, "해당 ID의 사용자를 찾을 수 없습니다" 메시지가 의도한 대로 동작하지 않았다. for문쪽의 문제인건 알았는데 정확하게 왜 동작하지 않는지는 몰랐다.

이유는 for 루프 내에서 "해당 ID의 사용자를 찾을 수 없습니다" 메시지를 반복적으로 출력해서!!
이 부분을 수정하기 위해 사용자를 찾았는지 여부를 확인하기 위한 변수를 '새로' 선언하고, 모든 키를 확인한 후에 메시지를 출력하도록 해봤다.

해결코드

let userFound = false; // 사용자 찾았는지 여부 확인

		//같은 ID 찾고 삭제
		for (let i = 0; i < localStorage.length; i++) {
			const key = localStorage.key(i);
			if (key.startsWith("joinInfo")) {
				const user = JSON.parse(localStorage.getItem(key));
				if (user.id === quitId) {
					localStorage.removeItem(key);
					alert(`${user.name} 사용자가 탈퇴되었습니다`);
					location.reload();
					userFound = true;
					break;
				}
			}
		}
		if (!userFound) {
			alert("해당 ID의 사용자를 찾을 수 없습니다.");
		}
	});
}

userFound 변수를 새로 선언하여 사용자를 찾았는지 여부를 추적하도록 했다. 그리고 for문이 끝난 후에 플래그를 확인하고, 사용자를 찾지 못했을 때만 "해당 ID의 사용자를 찾을 수 없습니다" 메시지를 출력하게 하였다.
이렇게 해결완료!

---

느낀점

사실 코드가 어디에서 안돌아가는지 찾지 못했기 때문에 생각에 헤결코드에 도달하기까지 좀 오래걸렸다. 알고보면 간단한 해결이었다. 코드짤때 단순하게 생각하지 말것!