개발자가 코딩 테스트 너머를 봐야 하는 이유
크리스는 프론트엔드 개발자다. 그는 평소 이렇게 생각하곤 했다.
"알고리즘? 그거 코딩 테스트 볼 때나 잠깐 외우는 거 아니야? 실무에서는 lodash 쓰거나 Array.filter 쓰면 다 되던데."
어느 날, 크리스는 쇼핑몰 관리자 페이지를 맡게 되었다. 5만 명의 회원 목록과 5만 건의 주문 내역을 비교해서, "주문 이력이 있는 회원"만 골라내야 하는 기능이었다.
크리스는 자신 있게 코드를 짰다.
// ❌ 크리스의 "직관적인" 코드
const users = [...Array(50000)].map((_, i) => ({ id: i, name: `User${i}` }));
const orders = [...Array(50000)].map((_, i) => ({ userId: i, product: `Prod${i}` }));
// 모든 유저를 돌면서, 주문 내역에 해당 유저 ID가 있는지 '검색'한다.
const activeUsers = users.filter(user => {
return orders.some(order => order.userId === user.id);
});"간단하네!" 하고 실행 버튼을 누른 순간, 브라우저가 멈췄다.
마우스 커서는 뱅글뱅글 돌고, 크롬 탭은 '응답 없음'을 띄우며 하얗게 질려버렸다. 사용자는 5초가 지나도 화면을 볼 수 없었다.
기능은 구현했지만, 이 코드는 실패했다. 크리스가 짠 로직은 5만 명 × 5만 건, 즉 25억 번의 비교 연산을 수행했기 때문이다.
이것이 우리가 알고리즘을 배워야 하는 진짜 이유다. 알고리즘은 면접용 암기 과목이 아니라, "한정된 자원(시간, 메모리)으로 문제를 가장 효율적으로 해결하는 절차"다.
1. 알고리즘이란 무엇인가?
알고리즘(Algorithm)이라는 단어는 거창해 보이지만, 사실 '요리 레시피'와 같다.
어떤 입력(재료)을 받아서, 정해진 순서(조리법)대로 처리하여, 원하는 출력(요리)을 만들어내는 과정이다.
하지만 같은 라면을 끓여도 누군가는 3분 만에 끓이고, 누군가는 물을 끓였다 식혔다 하느라 30분이 걸린다. 프로그래밍에서도 마찬가지다.
크리스의 방식(이중 반복문)은 가장 비효율적인 레시피였다.
2. 왜 하필 자바스크립트에서 중요한가?
"요즘 컴퓨터 성능 좋은데, 대충 짜도 되지 않나요?"
자바스크립트 개발자에게는 치명적인 제약이 하나 있다. 바로 싱글 스레드(Single Thread)라는 점이다.
자바스크립트는 한 번에 한 가지 일만 처리할 수 있다. 크리스의 코드처럼 25억 번의 연산을 하느라 메인 스레드가 바쁘면, 브라우저는 버튼 클릭도, 화면 갱신도, 애니메이션도 처리할 수 없다. 즉, UI가 얼어버린다(Freezing).
C++이나 Java처럼 멀티 스레드를 적극적으로 쓰는 환경보다, 자바스크립트 환경(브라우저, Node.js)에서 비효율적인 알고리즘은 사용자 경험(UX)을 즉각적으로 파괴한다.
3. 크리스의 코드 심폐소생술
알고리즘적 사고를 적용해 보자. 문제의 핵심은 orders 배열을 매번 처음부터 끝까지 뒤지는 것이 너무 느리다는 점이다.
자바스크립트의 객체(Object)나 Set은 데이터를 찾을 때 반복문을 돌지 않고, 열쇠(Key)로 자물쇠를 따듯 한 번에 찾을 수 있다. (이를 해시 테이블이라 부른다.)
// ✅ 알고리즘을 개선한 코드
// 1. 주문 내역의 userId를 Set으로 만들어 둔다. (검색 속도 O(1)로 만들기)
// 이 과정은 5만 번만 수행된다.
const orderUserIds = new Set(orders.map(order => order.userId));
// 2. 유저 목록을 돌면서 Set에 있는지 확인한다.
// Set.has()는 반복문을 돌지 않고 즉시 확인한다.
const activeUsers = users.filter(user => orderUserIds.has(user.id));결과는?
로직을 조금 바꿨을 뿐인데 성능은 25,000배 빨라졌다. 브라우저는 쾌적하고 사용자는 행복하다.
4. 우리가 앞으로 배울 것들
이 로드맵에서 우리는 단순히 정렬 함수를 외우는 것이 아니다. 자바스크립트라는 언어의 특성을 이해하고, 상황에 맞는 도구를 꺼내는 훈련을 할 것이다.
핵심 정리
알고리즘의 필요성을 깨달았다면, 이제 도구를 점검할 시간이다.
우리가 매일 쓰는 push, pop, shift... 이 배열 메서드들이 내부적으로 얼마나 빠르고 느린지 정확히 알고 있는가?
다음 글, "자바스크립트의 프로토타입 메서드: 편리함 뒤에 숨겨진 비용"에서 계속된다.