modern-javascript-patterns
현대 JavaScript 패턴 적용
레거시 JavaScript 코드베이스는 유지보수와 최적화가 어렵습니다. 이 스킬은 화살표 함수, 디스트럭처링, async/await, Promise, 함수형 프로그래밍 패턴, 최신 클래스 기능을 포함한 ES6+ 기능에 대한 종합적인 가이드를 제공하여 깔끔하고 효율적이며 유지보수 가능한 JavaScript 코드를 작성할 수 있게 합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"modern-javascript-patterns" 사용 중입니다. How do I destructure nested objects in JavaScript?
예상 결과:
중첩 객체 디스트럭처링을 사용하면 깊게 중첩된 객체에서 값을 추출할 수 있습니다:
```javascript
const user = {
id: 1,
name: 'Alice',
address: {
city: 'Boston',
country: 'USA'
}
};
// Nested destructuring
const {
name,
address: { city, country }
} = user;
console.log(city); // 'Boston'
console.log(country); // 'USA'
// With default values
const {
address: {
city = 'Unknown',
zipCode = '00000'
} = {}
} = user;
```
"modern-javascript-patterns" 사용 중입니다. What's the difference between Promise.all and Promise.allSettled?
예상 결과:
Promise.all은 빠르게 실패합니다 - 어떤 Promise가 reject되면 전체 작업이 실패합니다. Promise.allSettled는 결과와 상관없이 모든 Promise가 settled될 때까지 기다립니다:
```javascript
// Promise.all - fails on first rejection
const users = await Promise.all([
fetchUser(1),
fetchUser(2)
]); // Throws if either fails
// Promise.allSettled - waits for all
const results = await Promise.allSettled([
fetchUser(1),
fetchUser(2)
]);
results.forEach(result => {
if (result.status === 'fulfilled') {
console.log('Success:', result.value);
} else {
console.log('Failed:', result.reason);
}
});
```
보안 감사
안전This is a documentation skill containing educational content about JavaScript ES6+ patterns. All static analysis findings are false positives. The 'weak cryptographic algorithm' flags are triggered by JavaScript template literals and class private field syntax (#). The 'shell backtick execution' flags are false positives from JavaScript template literals in code examples. The 'dynamic import()' detections are legitimate ES6 module examples being documented. No malicious code patterns exist.
품질 점수
만들 수 있는 것
레거시 JavaScript 코드베이스 리팩터링
콜백 기반 코드를 Promises와 async/await 패턴으로 마이그레이션합니다. 'this' 바인딩 문제를 해결하기 위해 전통적인 함수를 화살표 함수로 교체합니다. 디스트럭처링과 스프레드 연산자를 적용해 데이터 조작을 단순화합니다.
JavaScript에서 함수형 프로그래밍 학습
데이터 변환을 위해 map, filter, reduce를 사용하는 방법을 이해합니다. 부작용을 피하는 순수 함수를 만드는 방법을 배웁니다. 읽기 쉬운 데이터 처리 파이프라인을 위해 함수 합성과 파이핑을 적용합니다.
유지보수 가능한 JavaScript 코드 작성
더 깔끔하고 표현력 있는 코드를 위해 최신 JavaScript 패턴을 적용합니다. 적절한 모듈 구성과 ES6 클래스 기능을 사용합니다. 디바운싱, 스로틀링, 지연 평가 같은 성능 최적화를 구현합니다.
이 프롬프트를 사용해 보세요
How do I use [feature] in modern JavaScript? Can you show me examples of [use case]?
I have this legacy JavaScript code: [code snippet]. How can I refactor it to use modern ES6+ patterns? What specific features should I apply?
I need to implement [specific async task]. Should I use Promises, async/await, or a combination? Show me the best practice pattern for [scenario] with proper error handling.
I have an array of objects: [data structure]. How can I use functional programming to [transform/group/filter/aggregate] this data? Show me step-by-step how to compose functions for this task.
모범 사례
- 기본적으로 const를 사용하고 재할당이 정말 필요할 때만 let을 사용하세요. 이는 의도치 않은 변경을 방지하고 코드의 의도를 더 명확하게 합니다.
- 콜백과 메서드에서 lexical 'this' 바인딩이 필요하다면 화살표 함수를 선호하세요. 동적인 'this'가 필요할 때만 전통적인 함수를 사용하세요.
- 더 깔끔한 데이터 조작을 위해 디스트럭처링과 스프레드 연산자를 적용하세요. 가능하다면 직접적인 프로퍼티 접근과 변경을 피하세요.
피하기
- 이미 async인 함수를 new Promise로 감싸지 마세요. 함수가 이미 Promise를 반환한다면 await와 함께 직접 사용하세요.
- 함수에서 입력 데이터를 변경하지 마세요. 불변성을 유지하기 위해 스프레드 연산자로 새로운 객체나 배열을 항상 반환하세요.
- 콜백 피라미드와 과도한 Promise 체이닝을 피하세요. 더 나은 가독성과 오류 처리를 위해 async/await를 사용하세요.