JavaScript는 많은 개발자가 매일 사용하는 언어이지만, 생태계에는 숙련된 개발자라도 익숙하지 않을 수 있는 숨겨진 보석이 많이 있습니다. 이 기사에서는 프로그래밍 기술을 크게 향상시킬 수 있는 잘 알려지지 않은 JavaScript 개념을 살펴봅니다. 프록시, 기호, 생성기 등과 같은 개념을 다루며 각 개념을 예제로 시연하고 문제를 해결하여 그 힘을 보여줍니다.

마지막에는 JavaScript에 대해 더 깊이 이해하게 되며 이러한 고급 기능을 사용해야 할 때와 사용하지 않을 때를 알게 됩니다.

1. 프록시

프록시란 무엇입니까?

JavaScript의 프록시를 사용하면 속성 조회, 할당, 함수 호출과 같은 기본 작업을 가로채고 사용자 정의할 수 있습니다.

문제: 사용자의 작업을 추적하는 개체가 있는 시스템을 구축한다고 상상해 보세요. 속성 액세스를 추적하기 위해 앱의 모든 부분을 수정하는 대신 프록시를 사용하여 이러한 작업을 가로채서 기록할 수 있습니다.

예:

const user = {
  name: "Alice",
  age: 25
};

const handler = {
  get(target, prop) {
    console.log(`Property '${prop}' was accessed`);
    return prop in target ? target[prop] : `Property ${prop} doesn't exist`;
  },
};

const userProxy = new Proxy(user, handler);

console.log(userProxy.name); // Logs: Property 'name' was accessed, Returns: Alice
console.log(userProxy.address); // Logs: Property 'address' was accessed, Returns: Property address doesn't exist

장점:

• 객체와의 거의 모든 상호 작용을 처리하고 가로챌 수 있습니다.
• 로깅, 검증 및 동적 동작에 적합합니다.

단점:

• 과도하게 사용하면 성능 오버헤드가 발생할 수 있습니다.
• 논리와 개체 동작 사이의 추상화 계층으로 인해 디버깅이 더 어렵습니다.

2. 기호

기호란 무엇입니까?

심볼은 ES6에 도입된 새로운 기본 유형입니다. 객체 속성에 대한 고유 키를 제공하므로 속성 이름 충돌을 피해야 할 때 유용합니다.

문제: 타사 코드와 통합되는 개체에 대해 작업 중이고 해당 키를 덮어쓰지 않고 사용자 정의 속성을 추가하고 싶다고 가정해 보겠습니다.

예:

const uniqueId = Symbol('id');
const user = {
  [uniqueId]: 123,
  name: "Alice"
};

console.log(user[uniqueId]); // 123
console.log(Object.keys(user)); // ['name'] - Symbol key is hidden from iteration

장점:

• 기호는 동일한 설명을 공유하더라도 고유합니다.
• 우발적인 속성 덮어쓰기를 방지하여 라이브러리나 API 디자인에 사용하기에 이상적입니다.

단점:

• 기호는 열거할 수 없으므로 디버깅이나 반복이 약간 까다로울 수 있습니다.
• 과도하게 사용하면 코드 가독성이 떨어질 수 있습니다.

3. 생성기 함수

제너레이터란 무엇입니까?

생성기는 일시 중지하고 다시 시작할 수 있는 함수로, 비동기 흐름을 관리하거나 요청 시 데이터를 생성하는 데 유용합니다.

문제: 일련의 피보나치 수열을 생성한다고 가정합니다. 전체 시퀀스를 미리 생성하는 대신 하나씩 값을 생성하는 생성기를 만들어 지연 평가를 허용할 수 있습니다.

예:

function* fibonacci() {
  let a = 0, b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a   b];
  }
}

const fib = fibonacci();

console.log(fib.next().value); // 0
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2

장점:

• 한 번에 몇 개의 값만 필요한 시퀀스를 생성하는 데 효율적입니다.
• Yield와 함께 사용하면 더 깔끔한 비동기 흐름이 가능합니다.

단점:

• Promise나 async/await만큼 일반적으로 사용되지 않으므로 학습 곡선이 더 가파르게 됩니다.
• 과도하게 사용하면 코드가 복잡해질 수 있습니다.

4. 태그된 템플릿 리터럴

태그된 템플릿 리터럴이란 무엇입니까?

태그가 있는 템플릿을 사용하면 함수로 템플릿 리터럴을 처리할 수 있으므로 CSS-in-JS 라이브러리와 같은 DSL(도메인별 언어)을 구축하는 데 매우 강력해집니다.

문제: XSS 공격을 방지하려면 사용자 입력을 처리하고 이를 삭제하는 템플릿 시스템을 구축해야 합니다.

예:

function safeHTML(strings, ...values) {
  return strings.reduce((acc, str, i) => acc   str   (values[i] ? escapeHTML(values[i]) : ''), '');
}

function escapeHTML(str) {
  return str.replace(/&/g, "&").replace(/, "<").replace(/>/g, ">");
}

const userInput = "";
const output = safeHTML`User said: ${userInput}`;
console.log(output); // User said: <script>alert('XSS')</script>

장점:

• 문자열 보간을 미세하게 제어할 수 있습니다.
• 문자열 구문 분석 또는 변환(예: CSS, SQL 쿼리)이 필요한 라이브러리를 구축하는 데 적합합니다.

단점:

• 특정 라이브러리로 작업하거나 직접 만드는 경우가 아니면 일반적으로 필요하지 않습니다.
• 초보자가 이해하고 디버깅하기 어려울 수 있습니다.

5. WeakMap과 WeakSet

WeakMap과 WeakSet이 무엇인가요?

WeakMap은 키가 약하게 참조되는 키-값 쌍의 모음입니다. 이는 키에 대한 다른 참조가 없으면 항목이 가비지 수집됨을 의미합니다.

문제: 캐싱 시스템을 구축 중이며 객체가 더 이상 필요하지 않으면 자동으로 가비지 수집되어 메모리를 확보하고 싶습니다.

예:

let user = { name: "Alice" };
const weakCache = new WeakMap();

weakCache.set(user, "Cached data");

console.log(weakCache.get(user)); // Cached data

user = null; // The entry in weakCache will be garbage collected

장점:

• 항목의 자동 가비지 수집으로 메모리 누수를 방지합니다.
• 객체 수명이 불확실한 캐싱에 적합합니다.

단점:

• WeakMap은 열거 가능하지 않으므로 반복하기가 어렵습니다.
• 키인 개체로만 제한됩니다.

6. 커링

커링이란 무엇인가요?

커링은 여러 인수를 취하는 함수를 각각 단일 인수를 취하는 일련의 함수로 변환합니다. 코드 유연성을 높일 수 있는 함수형 프로그래밍 기술입니다.

문제: 백분율을 기준으로 할인을 적용하는 기능이 있다고 가정해 보겠습니다. 앱 전체에서 다양한 비율로 이 기능을 재사용하고 싶습니다.

예:

const applyDiscount = (discount) => (price) => price - price * (discount / 100);

const tenPercentOff = applyDiscount(10);
const twentyPercentOff = applyDiscount(20);

console.log(tenPercentOff(100)); // 90
console.log(twentyPercentOff(100)); // 80

장점:

• 인수를 미리 적용하여 함수를 더 쉽게 재사용할 수 있습니다.
• 부분 애플리케이션을 쉽게 만들 수 있습니다.

단점:

• 함수형 프로그래밍에 익숙하지 않은 개발자에게는 직관적이지 않습니다.
• 과도하게 사용하면 코드가 지나치게 복잡해질 수 있습니다.

결론

프록시, 기호, 생성기, 태그된 템플릿 리터럴, WeakMaps 및 Currying과 같은 각 고급 JavaScript 개념은 보다 효율적이고 확장 가능하며 우아한 방식으로 특정 문제를 해결할 수 있는 고유한 기능을 제공합니다. 그러나 복잡성 증가나 잠재적인 성능 문제 등의 단점이 있습니다.

핵심 사항은 이러한 개념을 언제 어디서 사용해야 하는지를 이해하는 것입니다. 존재한다고 해서 모든 프로젝트에 사용해야 한다는 의미는 아닙니다. 대신 코드 가독성, 성능 또는 유연성 향상과 같은 명확한 이점을 제공하는 경우 이를 통합하세요.

이러한 고급 기술을 탐색하면 더욱 정교한 문제를 해결하고 더욱 강력한 JavaScript를 작성할 수 있습니다.