undefined로 검색이 안 되는 버그를 발견한 일

카카오톡 이용 중 의도치 않게도 흥미로운 버그를 발견했다.
프로필 뮤직에 Xdinary Heroes의 UNDEFINED라는 노래를 설정하고 싶어서 undefined를 검색했다.

그런데 "검색어를 입력해주세요"라고 표시되며 검색이 되지 않았다.

처음에 단순 오류인 줄로 생각해서 5번 이상 반복 입력했다가, '설마 JavaScript 데이터 타입으로 인식되는 건가??' 추측했다.

검색어를 UNDEFINED 대문자로 작성하니 잘 검색되는 것을 확인할 수 있었다.

어떤 구조 때문에 발생하는 걸까? 사용자 입력을 "undefined" 문자열로 처리하면 이런 문제가 발생할 가능성이 없지 않나?

너무 궁금해져서 클로드에게 물어보았다.

---

클로드 왈:

카카오톡 앱은 내부적으로 검색어를 처리할 때 아마 이런 식의 코드를 쓰고 있을 겁니다:

// 문제가 되는 코드 (추정)
function search(query) {
  if (!query) {
    showMessage("검색어를 입력해주세요");
    return;
  }
  // 검색 실행...
}

사용자가 "undefined"를 문자열로 입력했는데, 어딘가에서 이 값이 실제 undefined로 평가되는 상황이 발생한 거죠.

 

이게 왜 일어날까?

 

1. 가장 유력한 시나리오는 타입 변환(type coercion) 과정입니다.

// 입력값을 파싱하거나 객체에서 꺼내는 과정에서
let query = searchInput.value;  // "undefined" (문자열)

// 어딘가에서 이런 처리가 일어났을 가능성
let parsed = JSON.parse(someData);
let keyword = parsed.query; // 키가 없으면 → 실제 undefined

// 혹은 문자열 비교 없이 falsy 체크만 했을 때
if (!keyword) { ... }  // undefined → falsy → "검색어 입력" 메시지 출력

 

2. 문자열 "undefined"를 명시적으로 예외 처리했을 가능성도 있습니다:

// 방어 코드를 잘못 작성한 경우
if (!query || query === "undefined") {
  showMessage("검색어를 입력해주세요");
  return;
}

이런 코드는 다른 곳에서 실제 undefined가 문자열로 변환된 채로 넘어오는 걸 막으려고 쓰는 패턴인데, 진짜로 "UNDEFINED"라는 곡을 검색하는 사람도 막아버리는 부작용이 생깁니다.

 

명시적으로 예외 처리했다면, 어떤 역사에서 생겨났을까? (추측)

1. 레거시 코드에서 undefined를 문자열로 넘기는 실수

옛날 JavaScript 코드(혹은 지금도 종종)에서 이런 패턴이 흔했습니다.

// 어딘가에서 값이 없을 때
let keyword = getUserInput(); // 실패하면 undefined 반환

// 문자열 템플릿이나 URL에 그냥 붙여버림
fetch(`/search?q=${keyword}`);
// → /search?q=undefined  ← "undefined"라는 문자열이 서버로 전송됨

서버가 "undefined"라는 쿼리를 받으면 빈 검색처럼 처리하고 싶으니, 프론트나 백엔드 양쪽에서 이걸 걸러내는 코드가 생겨났습니다.

 

2. localStorage / URL 파라미터에서 꺼낼 때

// 저장할 때 실수로 undefined가 저장됨
localStorage.setItem("lastSearch", undefined);
// → 실제로 "undefined"라는 문자열로 저장됨

// 나중에 꺼내면 문자열 "undefined"가 나옴
const query = localStorage.getItem("lastSearch"); // "undefined"

이 경우 "undefined"를 그대로 검색창에 넣으면 사용자 입장에서 이상한 경험이 되니까, 이걸 막으려는 코드가 추가됐을 겁니다.

 

3. 서버에서 JSON으로 받을 때

const data = await response.json();
const query = data.lastKeyword; // 키가 없으면 → undefined
const queryStr = String(query);  // → "undefined" (문자열)

// 이걸 그냥 검색창 초기값으로 넣어버리면...
searchInput.value = queryStr; // "undefined"가 입력창에 표시됨

 

---

 

예외 처리가 필요했던 역사가 있지 않았을까 추측해본다. undefined라는 제목의 노래가 꽤 있기 때문에 다른 이용자들도 동일한 버그를 경험했을 수 있을 것 같아서 고객센터 문의로 제보하였다. 나중에는 undefined를 검색할 수 있게 될지 궁금하다.

회사에서 서비스 개발할 때 테스팅도 많이 해서 "버그 발견 -> 재현 -> 원인 분석 -> 보고 및 해결" 과정을 완전히 체득해버린 것 같다. 재미있다🤩

 

p.s.

이전에 각종 웹사이트에서 유저네임으로 프로그래밍 관련 특수한 이름들을 사용할 수 없도록 막아놓은 것이 흥미로웠는데

위와 같은 일이 발생하는 것을 막고자 한 것이었다.

GitHub는 undefined가 안 되고 null은 된다

Instagram은 null이 안 되고 undefined는 된다