프로미스(Promise)의 핵심 개념과 실무 적용
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 대상자: Node.js 및 JavaScript 개발자, 비동기 프로그래밍을 다루는 전문가
- 난이도: 중급~고급 (비동기 처리, 오류 처리, 성능 최적화 포함)
핵심 요약
- Promise의 3가지 상태:
pending,fulfilled,rejected - 비동기 처리 패턴:
async/await사용을 통해 코드 가독성 향상 - 실무 팁:
Promise.all()대신Promise.allSettled()사용,.catch()필수 적용,async함수에서 비동기 결과 항상 반환
섹션별 세부 요약
1. 프로미스 기초
- Promise는 비동기 작업의 완료 또는 실패를 나타내는 객체
.then(): 성공 상태 처리,.catch(): 실패 상태 처리,.finally(): 항상 실행- 코드 예시:
fetch().then(...).catch(...)
2. 실무 적용 사례
- Fetch API 사용:
async/await로 HTTP 요청 처리
```javascript
async function fetchData(url) {
try {
const response = await fetch(url);
return await response.json();
} catch (error) {
console.error("Fetch error:", error);
}
}
```
- React 컴포넌트:
useEffect와async/await로 데이터 로딩
```javascript
useEffect(() => {
const fetchData = async () => {
try {
const result = await fetchData('/api/data');
setData(result);
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
};
fetchData();
}, []);
```
3. Node.js 데이터베이스 연동
pg-promise사용 예시
```javascript
async function getUser(userId) {
try {
const user = await db.one('SELECT * FROM users WHERE id = $1', [userId]);
return user;
} catch (error) {
console.error('Error fetching user:', error);
}
}
```
4. 비동기 연쇄 처리
- 파일 처리 및 업로드 예시
```javascript
async function processAndUpload(filePath) {
try {
const processedData = await processFile(filePath);
const uploadResult = await uploadData(processedData);
return uploadResult;
} catch (error) {
console.error("Process and upload failed:", error);
}
}
```
5. 오류 처리 및 보안 고려 사항
.catch()필수 적용,zod로 입력 검증,DOMPurify로 XSS 방어- 예:
try...catch블록 내에서await사용
6. 테스트 및 디버깅
- Jest/Vitest:
async/await기반 테스트
```javascript
test('fetches data successfully', async () => {
const data = await fetchData('/api/data');
expect(data).toBeDefined();
});
```
- Playwright/Cypress: 브라우저 내 Promise 기반 상호작용 테스트
7. 성능 최적화 팁
Promise.all()대신Promise.allSettled()사용- 비동기 작업 병렬 처리:
Promise.all()활용 - 성능 테스트:
console.time()및Lighthouse사용
결론
- 핵심 팁:
.catch()항상 포함,async/await사용,Promise.allSettled()로 병렬 처리, 보안 검증 강화 - 실무 적용:
axios,pg-promise,zod등 라이브러리 활용, 테스트 프레임워크(Jest, Playwright)로 비동기 로직 검증