기술의 유행은 변해도 결국 본질은 '어떻게 하면 더 깨끗하고 안전한 코드를 짤 수 있는가'로 귀결되는 것 같다. SOPT 2주차 과제를 하며 바닐라 자바스크립트에 현대적인 방법론들을 적용해 보자니, 예전에는 무심코 지나쳤던 작지만 중요한 기법들이 눈에 들어오기 시작했다.
오늘은 최근 프로젝트를 진행하며 새롭게 알게 된 것들과 코드의 질을 높여준 점들을 정리해 보려 한다.
BEM 방법론 (Block, Element, Modifier)
CSS를 작성하다 보면 항상 클래스 명명 규칙(Naming Convention) 때문에 골머리를 앓는다. container, inner, wrapper… 그러다 결국 div > div > p 같은 지옥의 선택자가 탄생하곤 하는데, 이를 방지하기 위한 구조적인 접근법이 바로 BEM이다.
이게 뭔가?
- Block: 독립적인 의미를 갖는 최상위 구성 요소 (예: .card)
- Element: 블록 내부를 구성하는 종속적인 요소. 블록 이름 뒤에 __를 붙여 구분한다. (예: .card__title)
- Modifier: 요소의 상태나 스타일 변형을 나타낸다. 요소 뒤에 --를 붙여 구분한다. (예: .card__title--red)
왜 쓰는가?
- 유지보수의 편의성: 클래스 이름만 봐도 이 요소가 어디에 속해 있고 어떤 역할을 하는지 직관적으로 알 수 있다.
- CSS 우선순위 문제 해결: 모든 클래스가 단일 클래스 수준에서 관리되므로, 선택자 중첩(Nesting)으로 인한 우선순위 싸움을 피할 수 있다.
- 재사용성: 블록 단위로 캡슐화가 잘 되어 있어, 다른 페이지로 옮겨 심기가 매우 수월하다.
숫자를 읽기 쉽게, toLocaleString
웹 서비스를 만들다 보면 가격(원화)이나 수치를 표시할 일이 많다. 예전에는 천 단위마다 콤마(,)를 찍기 위해 정규표현식을 복사해 쓰곤 했는데, 이제는 그럴 필요가 없다는 걸 알게 되었다.
이게 뭔가?
number.toLocaleString()은 숫자를 사용자의 국가나 지역 설정에 맞는 문자열 형식으로 변환해 주는 메서드다.
const price = 1250000;
console.log(price.toLocaleString('ko-KR')); // "1,250,000"
왜 쓰는가?
직접 로직을 짤 필요 없이 브라우저 내장 기능을 사용하므로 코드가 간결해진다. 특히 통화 단위뿐만 아니라 날짜 형식 등도 지역에 맞춰 자동으로 처리해주니, 글로벌 서비스를 고려한다면 필수적인 도구다.
Spread 문법을 활용한 얕은 복사 (Shallow Copy)
자바스크립트에서 배열이나 객체는 참조(Reference) 타입이다. 원본을 유지하면서 복사본을 수정하고 싶을 때, 단순히 =로 할당했다가 원본까지 같이 변해버리는 낭패를 본 적이 있을 것이다.
이게 뭔가?
[...array] 또는 {...object}와 같은 스프레드(Spread) 문법을 사용하면 새로운 배열/객체를 생성하여 값을 복사할 수 있다.
const original = [1, 2, 3];
const copy = [...original]; // 원본과 값이 같지만 다른 주소를 가진 새로운 배열왜 쓰는가?
현대 웹 개발, 특히 리액트 같은 라이브러리에서는 불변성(Immutability) 유지가 핵심이다. 원본 데이터를 보존하면서 변화된 상태만 안전하게 다루기 위해 이 문법은 이제 선택이 아닌 필수다.
.filter(Boolean) : Falsy 값 깔끔하게 지우기
데이터를 처리하다 보면 배열 중간에 null, undefined, ""(빈 문자열), 0 같은 값들이 섞여 들어올 때가 있다. 이걸 한 줄로 정리하는 기막힌 방법을 배웠다.
이게 뭔가?
.filter() 메서드에 인자로 자바스크립트 내장 함수인 Boolean을 전달하는 방식이다.
const arr = [1, null, "hello", undefined, 0, "world"];
const cleanArr = arr.filter(Boolean); // [1, "hello", "world"]
왜 쓰는가?
Boolean 역시 하나의 함수이기 때문에 가능하다. 콜백 함수로 (item) => !!item을 쓰는 것보다 훨씬 명시적이고 우아하다. '무의미한 값들을 걸러내겠다'는 의도가 코드에 그대로 드러나는 점이 참 매력적이다.
한국어 기준 정렬, localeCompare
자바스크립트의 기본 .sort()는 문자열을 유니코드 순서로 정렬한다. 그래서 가끔 한글 정렬이 우리가 기대하는 '가나다' 순과 미묘하게 어긋날 때가 있다.
이게 뭔가?
localeCompare() 메서드는 기준 문자열과 비교 대상 문자열을 현지 언어 설정에 맞춰 비교해준다.
const items = ["바나나", "사과", "가수"];
items.sort((a, b) => a.localeCompare(b, "ko")); // ["가수", "바나나", "사과"]
왜 쓰는가?
단순히 유니코드 값을 비교하는 것보다 언어별 특성(사전 순서 등)을 정확히 반영한다. 한국어 서비스를 개발한다면 사용자에게 익숙한 정렬 순서를 제공하기 위해 반드시 알아두어야 할 메서드다.
결론
결국 '나만 알아보는 코드'에서 '모두가 이해할 수 있는 코드'로 나아가는 과정이 개발자의 성장인 것 같다. BEM으로 구조를 잡고, 내장 메서드를 적절히 활용해 안전하고 명확한 로직을 짜는 것. 이런 사소한 습관들이 모여 결국 현대적인 개발 문화를 만드는 게 아닐까 싶다.