🛠️ 처음부터 만드는 Once — 함수를 한 번만 실행하기
# 언제 필요할까?
초기화 함수, 이벤트 리스너 등록, 중요한 설정 작업은 정확히 한 번만 실행되어야 합니다. 여러 번 호출되더라도 첫 실행 결과만 사용하고 싶을 때 Once를 사용합니다.
```javascript
const initDB = once(async () => {
console.log('DB 초기화 중...');
return { connected: true };
});
await initDB(); // DB 초기화 중... → { connected: true }
await initDB(); // (아무것도 출력 안 됨) → { connected: true } 캐시된 결과 반환
await initDB(); // 마찬가지
```
# 구현하기
```javascript
function once(fn) {
let called = false;
let result;
return function(...args) {
if (!called) {
called = true;
result = fn.apply(this, args);
}
return result;
};
}
```
비동기 함수도 지원하려면:
```javascript
function once(fn) {
let called = false;
let result;
let promise;
return function(...args) {
if (!called) {
called = true;
result = fn.apply(this, args);
promise = Promise.resolve(result);
}
return promise;
};
}
```
# 실제 활용
```javascript
// 리소스 초기화
const connectDB = once(() => {
console.log('MongoDB 연결...');
return new MongoClient(process.env.MONGO_URL);
});
// 로그인 한 번만
const login = once(async (email, pwd) => {
const res = await fetch('/api/login', {
method: 'POST',
body: JSON.stringify({ email, pwd })
});
return res.json();
});
// 이벤트 리스너 중복 방지
const setupEventListeners = once(() => {
document.addEventListener('click', handleClick);
});
```
# 주의사항
첫 호출의 인자만 사용됩니다. 이후 호출 인자는 무시됩니다:
```javascript
const add = once((a, b) => a + b);
add(2, 3); // 5
add(10, 20); // 5 (무시됨!)
```
다른 인자로 여러 번 실행하려면 Once를 사용하면 안 됩니다.
초기화 함수, 이벤트 리스너 등록, 중요한 설정 작업은 정확히 한 번만 실행되어야 합니다. 여러 번 호출되더라도 첫 실행 결과만 사용하고 싶을 때 Once를 사용합니다.
```javascript
const initDB = once(async () => {
console.log('DB 초기화 중...');
return { connected: true };
});
await initDB(); // DB 초기화 중... → { connected: true }
await initDB(); // (아무것도 출력 안 됨) → { connected: true } 캐시된 결과 반환
await initDB(); // 마찬가지
```
# 구현하기
```javascript
function once(fn) {
let called = false;
let result;
return function(...args) {
if (!called) {
called = true;
result = fn.apply(this, args);
}
return result;
};
}
```
비동기 함수도 지원하려면:
```javascript
function once(fn) {
let called = false;
let result;
let promise;
return function(...args) {
if (!called) {
called = true;
result = fn.apply(this, args);
promise = Promise.resolve(result);
}
return promise;
};
}
```
# 실제 활용
```javascript
// 리소스 초기화
const connectDB = once(() => {
console.log('MongoDB 연결...');
return new MongoClient(process.env.MONGO_URL);
});
// 로그인 한 번만
const login = once(async (email, pwd) => {
const res = await fetch('/api/login', {
method: 'POST',
body: JSON.stringify({ email, pwd })
});
return res.json();
});
// 이벤트 리스너 중복 방지
const setupEventListeners = once(() => {
document.addEventListener('click', handleClick);
});
```
# 주의사항
첫 호출의 인자만 사용됩니다. 이후 호출 인자는 무시됩니다:
```javascript
const add = once((a, b) => a + b);
add(2, 3); // 5
add(10, 20); // 5 (무시됨!)
```
다른 인자로 여러 번 실행하려면 Once를 사용하면 안 됩니다.
👁 0 views
Comments (0)
💬
No comments yet.
Be the first to comment!