JavaScript 함수 | 함수 선언, 화살표 함수, 콜백, 클로저 완벽 정리
이 글의 핵심
JavaScript 함수: 함수 선언, 화살표 함수, 콜백, 클로저 함수 정의 방법·매개변수와 반환값.
들어가며
함수란?
함수(Function)는 특정 작업을 묶어 이름 붙인 코드 블록입니다. JavaScript에서는 함수가 일급 객체(First-class Object)이므로, 변수에 담거나 인자로 넘기는 것이 자연스럽습니다. 이어서 설명하는 클로저는 함수가 외부 변수를 배낭처럼 들고 다니며 기억하는 개념과 연결됩니다.
실전 경험에서 배운 교훈
이 기술을 실무 프로젝트에 처음 도입했을 때, 공식 문서만으로는 알 수 없었던 많은 함정들이 있었습니다. 특히 프로덕션 환경에서 발생하는 엣지 케이스들은 로컬 개발 환경에서는 재현조차 되지 않았죠.
가장 어려웠던 점은 성능 최적화였습니다. 처음엔 “동작만 하면 되겠지”라고 생각했지만, 실제 사용자 트래픽이 몰리면서 병목 지점들이 하나씩 드러났습니다. 특히 데이터베이스 쿼리 최적화, 캐싱 전략, 에러 핸들링 구조 등은 여러 번의 장애를 겪으면서 개선해 나갔습니다.
이 글에서는 그런 시행착오를 통해 얻은 실전 노하우와, “이렇게 하면 안 된다”는 교훈들을 함께 정리했습니다. 특히 트러블슈팅 섹션은 실제 장애 대응 경험을 바탕으로 작성했으니, 비슷한 문제를 마주했을 때 참고하시면 도움이 될 것입니다.
1. 함수 정의 방법
함수 선언문 (Function Declaration)
function add(a, b) {
return a + b;
}
console.log(add(10, 20)); // 30
// 호이스팅됨 (선언 전 호출 가능)
greet(); // 안녕하세요!
function greet() {
console.log("안녕하세요!");
}함수 표현식 (Function Expression)
// 익명 함수
const subtract = function(a, b) {
return a - b;
};
console.log(subtract(20, 10)); // 10
// 기명 함수 표현식
const factorial = function fact(n) {
if (n <= 1) return 1;
return n * fact(n - 1); // 재귀 시 이름 사용
};
console.log(factorial(5)); // 120
// 호이스팅 안 됨
// multiply(5, 6); // ReferenceError
const multiply = function(a, b) {
return a * b;
};화살표 함수 (Arrow Function, ES6+)
ES6에서 도입된 간결한 함수 문법입니다:
// 기본 형태: 여러 줄일 때
const add = (a, b) => {
// 중괄호 {}가 있으면 return 키워드 필요
return a + b;
};
// 단일 표현식: return과 중괄호 생략 가능
const add = (a, b) => a + b;
// 표현식의 결과가 자동으로 반환됨
// 매개변수 1개: 괄호 생략 가능
const square = x => x * x;
console.log(square(5)); // 25
// (x) => x * x 와 동일
// 매개변수 없음: 빈 괄호 필수
const greet = () => console.log("Hello!");
greet(); // Hello!
// 객체 반환: 괄호로 감싸기 (중요!)
const makePerson = (name, age) => ({ name, age });
// 중괄호 {}는 코드 블록으로 인식되므로
// 객체 리터럴을 반환하려면 ()로 감싸야 함
console.log(makePerson("홍길동", 25)); // { name: '홍길동', age: 25 }
// 잘못된 예:
// const makePerson = (name, age) => { name, age }; // undefined 반환!
// 여러 줄: 중괄호와 return 필요
const complexFunc = (a, b) => {
const sum = a + b;
const product = a * b;
return { sum, product };
};화살표 함수의 특징:
- 간결한 문법: 코드가 짧고 읽기 쉬움
- this 바인딩: 렉시컬 스코프 (상위 스코프의 this 사용)
- arguments 없음: 나머지 매개변수(
...args) 사용 - 생성자 불가:
new키워드로 호출 불가 언제 사용하나:
- 콜백 함수 (배열 메서드, 이벤트 핸들러)
- 간단한 유틸리티 함수
- this 바인딩이 필요 없는 경우
함수 선언문 vs 표현식 vs 화살표 함수
| 특징 | 선언문 | 표현식 | 화살표 함수 |
|---|---|---|---|
| 호이스팅 | ✅ | ❌ | ❌ |
| this 바인딩 | 동적 | 동적 | 렉시컬 |
| arguments | ✅ | ✅ | ❌ |
| 생성자 | ✅ | ✅ | ❌ |
| 간결성 | 보통 | 보통 | 높음 |
2. 매개변수와 반환값
기본 매개변수 (Default Parameters)
function greet(name = "손님") {
return `안녕하세요, ${name}님!`;
}
console.log(greet("홍길동")); // 안녕하세요, 홍길동님!
console.log(greet()); // 안녕하세요, 손님님!
// 표현식도 가능
function createArray(length = 10, fill = 0) {
return Array(length).fill(fill);
}
console.log(createArray(5, 1)); // [1, 1, 1, 1, 1]
console.log(createArray(3)); // [0, 0, 0]나머지 매개변수 (Rest Parameters)
function sum(...numbers) {
return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4, 5)); // 15
// 일반 매개변수와 함께 사용
function introduce(greeting, ...names) {
return `${greeting}, ${names.join(", ")}!`;
}
console.log(introduce("안녕하세요", "홍길동", "김철수", "이영희"));
// 안녕하세요, 홍길동, 김철수, 이영희!구조 분해 매개변수 (Destructuring)
// 객체 구조 분해
function printUser({ name, age, city = "서울" }) {
console.log(`${name} (${age}세, ${city})`);
}
printUser({ name: "홍길동", age: 25 });
// 홍길동 (25세, 서울)
// 배열 구조 분해
function getMinMax([first, ...rest]) {
return {
min: Math.min(first, ...rest),
max: Math.max(first, ...rest)
};
}
console.log(getMinMax([3, 1, 4, 1, 5]));
// { min: 1, max: 5 }여러 값 반환
// 배열로 반환
function getCoordinates() {
return [10, 20];
}
const [x, y] = getCoordinates();
console.log(x, y); // 10 20
// 객체로 반환 (권장)
function getUserInfo() {
return {
name: "홍길동",
age: 25,
city: "서울"
};
}
const { name, age } = getUserInfo();
console.log(name, age); // 홍길동 253. 고차 함수 (Higher-Order Function)
함수를 인자로 받기
function repeat(n, action) {
for (let i = 0; i < n; i++) {
action(i);
}
}
repeat(3, console.log);
// 0
// 1
// 2
repeat(3, i => console.log(`${i}번째`));
// 0번째
// 1번째
// 2번째함수를 반환하기
function makeMultiplier(factor) {
return function(x) {
return x * factor;
};
}
const double = makeMultiplier(2);
const triple = makeMultiplier(3);
console.log(double(5)); // 10
console.log(triple(5)); // 15
// 화살표 함수 버전
const makeMultiplier = factor => x => x * factor;배열 고차 함수
const numbers = [1, 2, 3, 4, 5];
// map: 변환
const doubled = numbers.map(x => x * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
// filter: 필터링
const evens = numbers.filter(x => x % 2 === 0);
console.log(evens); // [2, 4]
// reduce: 누적
const sum = numbers.reduce((acc, x) => acc + x, 0);
console.log(sum); // 15
// 체이닝
const result = numbers
.filter(x => x % 2 === 0) // [2, 4]
.map(x => x * 2) // [4, 8]
.reduce((acc, x) => acc + x, 0); // 12
console.log(result); // 124. 클로저 (Closure)
클로저란?
클로저(Closure)는 함수가 자신이 만들어진 환경의 변수를 붙잡고, 바깥에서 호출해도 그 값을 잃지 않는 닫힌 관계입니다.
비유(배낭): 바깥 함수가 배낭을 메고 있고, 안쪽 함수가 그 안의 물건(외부 변수)을 계속 꺼내 쓰는 형태라고 보시면 됩니다. makeCounter가 끝나도 count는 반환된 함수에 묶여 남습니다.
function makeCounter() {
let count = 0; // 외부 함수의 변수
return function() {
count++;
return count;
};
}
const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
// 독립적인 카운터
const counter2 = makeCounter();
console.log(counter2()); // 1클로저 활용: 프라이빗 변수
function createBankAccount(initialBalance) {
let balance = initialBalance; // private 변수
return {
deposit(amount) {
if (amount > 0) {
balance += amount;
return balance;
}
},
withdraw(amount) {
if (amount > 0 && amount <= balance) {
balance -= amount;
return balance;
}
return null;
},
getBalance() {
return balance;
}
};
}
const account = createBankAccount(10000);
console.log(account.getBalance()); // 10000
account.deposit(5000);
console.log(account.getBalance()); // 15000
account.withdraw(3000);
console.log(account.getBalance()); // 12000
// balance에 직접 접근 불가
// console.log(account.balance); // undefined클로저 실전 예제
// 1. 함수 팩토리
function makeAdder(x) {
return function(y) {
return x + y;
};
}
const add5 = makeAdder(5);
const add10 = makeAdder(10);
console.log(add5(3)); // 8
console.log(add10(3)); // 13
// 2. 이벤트 핸들러
function setupButtons() {
const buttons = ["버튼1", "버튼2", "버튼3"];
buttons.forEach((text, i) => {
// 클로저로 i 값 기억
document.getElementById(`btn${i}`).addEventListener('click', () => {
console.log(`${text} 클릭됨 (인덱스: ${i})`);
});
});
}
// 3. 메모이제이션
function memoize(fn) {
const cache = {};
return function(...args) {
const key = JSON.stringify(args);
if (key in cache) {
console.log("캐시에서 반환");
return cache[key];
}
console.log("계산 중...");
const result = fn(...args);
cache[key] = result;
return result;
};
}
const slowFib = n => {
if (n <= 1) return n;
return slowFib(n - 1) + slowFib(n - 2);
};
const fastFib = memoize(slowFib);
console.log(fastFib(10)); // 계산 중....55
console.log(fastFib(10)); // 캐시에서 반환 555. this 바인딩
일반 함수의 this
const person = {
name: "홍길동",
greet: function() {
console.log(`안녕하세요, ${this.name}입니다.`);
}
};
person.greet(); // 안녕하세요, 홍길동입니다.
// this는 호출 방법에 따라 달라짐
const greetFunc = person.greet;
// greetFunc(); // TypeError: Cannot read property 'name' of undefined화살표 함수의 this
const person = {
name: "홍길동",
hobbies: ["독서", "운동", "코딩"],
// 일반 함수
printHobbies1: function() {
this.hobbies.forEach(function(hobby) {
// console.log(`${this.name}의 취미: ${hobby}`); // this.name is undefined
});
},
// 화살표 함수 (this가 상위 스코프 유지)
printHobbies2: function() {
this.hobbies.forEach(hobby => {
console.log(`${this.name}의 취미: ${hobby}`); // OK
});
}
};
person.printHobbies2();
// 홍길동의 취미: 독서
// 홍길동의 취미: 운동
// 홍길동의 취미: 코딩bind, call, apply
const person = {
name: "홍길동"
};
function greet(greeting, punctuation) {
console.log(`${greeting}, ${this.name}${punctuation}`);
}
// call: 즉시 호출
greet.call(person, "안녕하세요", "!");
// 안녕하세요, 홍길동!
// apply: 배열로 인자 전달
greet.apply(person, ["Hello", "."]);
// Hello, 홍길동.
// bind: 새 함수 반환 (this 고정)
const boundGreet = greet.bind(person);
boundGreet("Hi", "~");
// Hi, 홍길동~6. 콜백 함수 (Callback)
콜백이란?
콜백(Callback)은 다른 함수에 인자로 전달되는 함수입니다.
// 기본 예제
function processArray(arr, callback) {
const result = [];
for (let item of arr) {
result.push(callback(item));
}
return result;
}
const numbers = [1, 2, 3, 4, 5];
// 제곱
const squared = processArray(numbers, x => x * x);
console.log(squared); // [1, 4, 9, 16, 25]
// 2배
const doubled = processArray(numbers, x => x * 2);
console.log(doubled); // [2, 4, 6, 8, 10]비동기 콜백
// setTimeout: 일정 시간 후 실행
console.log("시작");
setTimeout(() => {
console.log("2초 후 실행");
}, 2000);
console.log("끝");
// 출력 순서:
// 시작
// 끝
// 2초 후 실행
// 콜백 지옥 (Callback Hell)
setTimeout(() => {
console.log("1초");
setTimeout(() => {
console.log("2초");
setTimeout(() => {
console.log("3초");
}, 1000);
}, 1000);
}, 1000);
// Promise로 개선 (다음 글에서)7. 즉시 실행 함수 (IIFE)
IIFE란?
IIFE (Immediately Invoked Function Expression)는 정의와 동시에 실행되는 함수입니다.
// 기본 형태
(function() {
console.log("즉시 실행!");
})();
// 화살표 함수
(() => {
console.log("화살표 IIFE");
})();
// 매개변수 전달
(function(name) {
console.log(`Hello, ${name}!`);
})("홍길동");
// 반환값 받기
const result = (function() {
return 10 + 20;
})();
console.log(result); // 30IIFE 활용: 모듈 패턴
const counterModule = (function() {
let count = 0; // private 변수
return {
increment() {
count++;
return count;
},
decrement() {
count--;
return count;
},
getCount() {
return count;
}
};
})();
console.log(counterModule.increment()); // 1
console.log(counterModule.increment()); // 2
console.log(counterModule.getCount()); // 2
// console.log(counterModule.count); // undefined (접근 불가)8. 재귀 함수 (Recursion)
재귀란?
재귀(Recursion)는 함수가 자기 자신을 호출하는 것입니다.
// 팩토리얼
function factorial(n) {
if (n <= 1) return 1; // 기저 조건
return n * factorial(n - 1); // 재귀 호출
}
console.log(factorial(5)); // 120
// 피보나치
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
console.log(fibonacci(7)); // 13
// 배열 합계
function sumArray(arr) {
if (arr.length === 0) return 0;
return arr[0] + sumArray(arr.slice(1));
}
console.log(sumArray([1, 2, 3, 4, 5])); // 15재귀 실전 예제
// 1. 중첩 객체 탐색
function findValue(obj, key) {
if (key in obj) {
return obj[key];
}
for (let k in obj) {
if (typeof obj[k] === 'object' && obj[k] !== null) {
const result = findValue(obj[k], key);
if (result !== undefined) {
return result;
}
}
}
return undefined;
}
const data = {
user: {
profile: {
name: "홍길동",
age: 25
}
}
};
console.log(findValue(data, "name")); // 홍길동
// 2. 디렉토리 트리 출력
function printTree(node, depth = 0) {
const indent = " ".repeat(depth);
console.log(`${indent}- ${node.name}`);
if (node.children) {
node.children.forEach(child => {
printTree(child, depth + 1);
});
}
}
const tree = {
name: "root",
children: [
{ name: "folder1", children: [
{ name: "file1.txt" },
{ name: "file2.txt" }
]},
{ name: "folder2", children: [
{ name: "file3.txt" }
]}
]
};
printTree(tree);
// - root
// - folder1
// - file1.txt
// - file2.txt
// - folder2
// - file3.txt9. 실전 예제
예제 1: 배열 유틸리티 함수
// 배열 청크 (n개씩 나누기)
function chunk(arr, size) {
const result = [];
for (let i = 0; i < arr.length; i += size) {
result.push(arr.slice(i, i + size));
}
return result;
}
console.log(chunk([1, 2, 3, 4, 5, 6, 7], 3));
// [[1, 2, 3], [4, 5, 6], [7]]
// 배열 평탄화
function flatten(arr) {
return arr.reduce((acc, item) => {
return acc.concat(Array.isArray(item) ? flatten(item) : item);
}, []);
}
console.log(flatten([1, [2, 3], [4, [5, 6]]]));
// [1, 2, 3, 4, 5, 6]
// 중복 제거
function unique(arr) {
return [...new Set(arr)];
}
console.log(unique([1, 2, 2, 3, 3, 3, 4]));
// [1, 2, 3, 4]예제 2: 함수 조합 (Composition)
// 함수 조합
const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);
const add1 = x => x + 1;
const double = x => x * 2;
const square = x => x * x;
const combined = compose(square, double, add1);
console.log(combined(3)); // ((3 + 1) * 2)^2 = 64
// 파이프 (왼쪽에서 오른쪽)
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const piped = pipe(add1, double, square);
console.log(piped(3)); // ((3 + 1) * 2)^2 = 64예제 3: 디바운스와 쓰로틀
// 디바운스: 마지막 호출 후 일정 시간 대기
function debounce(func, delay) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func(...args), delay);
};
}
// 검색 입력 예제
const search = debounce((query) => {
console.log(`검색: ${query}`);
}, 500);
// search("a"); // 취소됨
// search("ab"); // 취소됨
// search("abc"); // 500ms 후 실행
// 쓰로틀: 일정 시간마다 한 번만 실행
function throttle(func, delay) {
let lastCall = 0;
return function(...args) {
const now = Date.now();
if (now - lastCall >= delay) {
lastCall = now;
func(...args);
}
};
}
// 스크롤 이벤트 예제
const handleScroll = throttle(() => {
console.log("스크롤 중...");
}, 1000);
// window.addEventListener('scroll', handleScroll);10. 자주 하는 실수와 해결법
실수 1: 화살표 함수의 this
// ❌ 잘못된 방법
const person = {
name: "홍길동",
greet: () => {
console.log(`안녕하세요, ${this.name}입니다.`);
}
};
person.greet(); // 안녕하세요, undefined입니다.
// ✅ 올바른 방법
const person = {
name: "홍길동",
greet: function() {
console.log(`안녕하세요, ${this.name}입니다.`);
}
};
person.greet(); // 안녕하세요, 홍길동입니다.실수 2: 반복문에서 클로저
// ❌ 잘못된 방법
for (var i = 0; i < 3; i++) {
setTimeout(function() {
console.log(i);
}, 100);
}
// 3 3 3
// ✅ 올바른 방법 1: let 사용
for (let i = 0; i < 3; i++) {
setTimeout(function() {
console.log(i);
}, 100);
}
// 0 1 2
// ✅ 올바른 방법 2: IIFE
for (var i = 0; i < 3; i++) {
(function(j) {
setTimeout(function() {
console.log(j);
}, 100);
})(i);
}
// 0 1 2실수 3: 객체 메서드에서 화살표 함수
// ❌ 잘못된 방법
const counter = {
count: 0,
increment: () => {
this.count++; // this는 전역 객체
}
};
counter.increment();
console.log(counter.count); // 0 (변경 안 됨)
// ✅ 올바른 방법
const counter = {
count: 0,
increment: function() {
this.count++;
}
};
counter.increment();
console.log(counter.count); // 111. 연습 문제
문제 1: 커링 (Currying)
여러 인자를 받는 함수를 단일 인자를 받는 함수들의 체인으로 변환하세요.
function curry(fn) {
return function curried(...args) {
if (args.length >= fn.length) {
return fn(...args);
}
return (...nextArgs) => curried(...args, ...nextArgs);
};
}
// 테스트
function add(a, b, c) {
return a + b + c;
}
const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // 6
console.log(curriedAdd(1, 2)(3)); // 6
console.log(curriedAdd(1)(2, 3)); // 6
console.log(curriedAdd(1, 2, 3)); // 6문제 2: 함수 파이프라인
여러 함수를 순차적으로 실행하는 파이프라인을 구현하세요.
function pipe(...fns) {
return function(x) {
return fns.reduce((acc, fn) => fn(acc), x);
};
}
// 테스트
const add1 = x => x + 1;
const double = x => x * 2;
const square = x => x * x;
const pipeline = pipe(add1, double, square);
console.log(pipeline(3)); // ((3 + 1) * 2)^2 = 64문제 3: 재귀로 배열 평탄화
function flattenDeep(arr) {
return arr.reduce((acc, item) => {
return acc.concat(
Array.isArray(item) ? flattenDeep(item) : item
);
}, []);
}
// 테스트
const nested = [1, [2, [3, [4, 5]]], 6];
console.log(flattenDeep(nested)); // [1, 2, 3, 4, 5, 6]정리
핵심 요약
- 함수 정의:
- 선언문: 호이스팅됨
- 표현식: 호이스팅 안 됨
- 화살표 함수: 간결, this 렉시컬
- 매개변수:
- 기본 매개변수:
function(x = 10) - 나머지 매개변수:
function(...args) - 구조 분해:
function({ name, age })
- 기본 매개변수:
- 고차 함수:
- 함수를 인자로 받기
- 함수를 반환하기
map,filter,reduce
- 클로저:
- 외부 변수 기억
- 프라이빗 변수 구현
- 메모이제이션
- this 바인딩:
- 일반 함수: 동적
- 화살표 함수: 렉시컬
bind,call,apply
베스트 프랙티스
- ✅ 화살표 함수 우선 (this 불필요시)
- ✅ 순수 함수 작성 (부작용 최소화)
- ✅ 함수는 한 가지 일만
- ✅ 의미 있는 함수명
- ✅ 매개변수 3개 이하 권장
다음 단계
- JavaScript 배열과 객체
- JavaScript 비동기 프로그래밍
- JavaScript 클래스
관련 글
심화 부록: 구현·운영 관점
이 부록은 앞선 본문에서 다룬 주제(「JavaScript 함수 | 함수 선언, 화살표 함수, 콜백, 클로저 완벽 정리」)를 구현·런타임·운영 관점에서 다시 압축합니다. 도메인별 세부 구현은 글마다 다르지만, 입력 검증 → 핵심 연산 → 부작용(I/O·네트워크·동시성) → 관측의 흐름으로 장애를 나누면 원인 추적이 빨라집니다.
내부 동작과 핵심 메커니즘
flowchart TD A[입력·요청·이벤트] --> B[파싱·검증·디코딩] B --> C[핵심 연산·상태 전이] C --> D[부작용: I/O·네트워크·동시성] D --> E[결과·관측·저장]
sequenceDiagram participant C as 클라이언트/호출자 participant B as 경계(런타임·게이트웨이·프로세스) participant D as 의존성(API·DB·큐·파일) C->>B: 요청/이벤트 B->>D: 조회·쓰기·RPC D-->>B: 지연·부분 실패·재시도 가능 B-->>C: 응답 또는 오류(코드·상관 ID)
- 불변 조건(Invariant): 버퍼 경계, 프로토콜 상태, 트랜잭션 격리, FD 상한 등 단계별로 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
- 결정성: 순수 층과 시간·네트워크·스케줄에 의존하는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
- 경계 비용: 직렬화, 인코딩, syscall 횟수, 락 경합, 할당·GC, 캐시 미스를 의심 목록에 둡니다.
- 백프레셔: 생산자가 소비자보다 빠를 때 버퍼·큐·스트림에서 속도를 줄이는 신호를 어디에 둘지 정의합니다.
프로덕션 운영 패턴
| 영역 | 운영 관점 질문 |
|---|---|
| 관측성 | 요청 단위 상관 ID, 에러율·지연 p95/p99, 의존성 타임아웃·재시도가 대시보드에 보이는가 |
| 안전성 | 입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가 |
| 신뢰성 | 재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가 |
| 성능 | 캐시·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가 |
| 배포 | 롤백 룬북, 카나리/블루그린, 마이그레이션·피처 플래그가 문서화되어 있는가 |
| 용량 | 피크 트래픽·디스크·FD·스레드 풀 상한을 주기적으로 검증하는가 |
스테이징은 데이터 양·네트워크 RTT·동시성을 프로덕션에 가깝게 맞출수록 재현율이 올라갑니다.
확장 예시: 엔드투엔드 미니 시나리오
앞선 본문 주제(「JavaScript 함수 | 함수 선언, 화살표 함수, 콜백, 클로저 완벽 정리」)를 배포·운영 흐름에 맞춰 옮긴 체크리스트입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.
- 입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드를 경계에 둔다.
- 핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 로그·메트릭·트레이스에서 한 흐름으로 본다.
- 실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
- 호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지 확인한다.
- 부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값을 점검한다.
handle(request):
ctx = newCorrelationId()
validated = validateSchema(request)
authorize(validated, ctx)
result = domainCore(validated)
persistOrEmit(result, idempotentKey)
recordMetrics(ctx, latency, outcome)
return result문제 해결(Troubleshooting)
| 증상 | 가능 원인 | 조치 |
|---|---|---|
| 간헐적 실패 | 레이스, 타임아웃, 외부 의존성, DNS | 최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검 |
| 성능 저하 | N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스 | 프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거 |
| 메모리 증가 | 캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납 | 상한·TTL·힙/FD 스냅샷 비교 |
| 빌드·배포만 실패 | 환경 변수, 권한, 플랫폼 차이, lockfile | CI 로그와 로컬 diff, 런타임·이미지 버전 핀 |
| 설정 불일치 | 프로필·시크릿·기본값, 리전 | 스키마 검증된 설정 단일 소스와 배포 매트릭스 표준화 |
| 데이터 불일치 | 비멱등 재시도, 부분 쓰기, 캐시 무효화 누락 | 멱등 키·아웃박스·트랜잭션 경계 재검토 |
권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.
배포 전에는 git add → git commit → git push 후 npm run deploy 순서를 권장합니다.
자주 묻는 질문 (FAQ)
Q. 이 내용을 실무에서 언제 쓰나요?
A. JavaScript 함수: 함수 선언, 화살표 함수, 콜백, 클로저 완벽 정리. 함수 정의 방법·매개변수와 반환값로 흐름을 잡고 원리·코드·실무 적용을 한글로 정리합니다. JavaScript·함수·function 중… 실무에서는 위 본문의 예제와 선택 가이드를 참고해 적용하면 됩니다.
Q. 선행으로 읽으면 좋은 글은?
A. 각 글 하단의 이전 글 또는 관련 글 링크를 따라가면 순서대로 배울 수 있습니다. JavaScript 시리즈 목차에서 전체 흐름을 확인할 수 있습니다.
Q. 더 깊이 공부하려면?
A. cppreference와 해당 라이브러리 공식 문서를 참고하세요. 글 말미의 참고 자료 링크도 활용하면 좋습니다.
같이 보면 좋은 글 (내부 링크)
이 주제와 연결되는 다른 글입니다.
- Kotlin 함수 | 함수 정의, 람다, 고차 함수
- C++ Extern Linkage | ‘외부 연결’ 가이드
- C++ One Definition Rule | ‘단일 정의 규칙’ 가이드
이 글에서 다루는 키워드 (관련 검색어)
JavaScript, 함수, function, 화살표함수, 콜백, 클로저, 고차함수 등으로 검색하시면 이 글이 도움이 됩니다.