이 자료는 지금 당장 읽지 않아도 됩니다. 1학기 React 스터디를 마치고, 아래 상황이 되었을 때 돌아오세요.
딥다이브 요약 GitHub
에러 처리는 async/await와 짝을 이루는 개념으로, 프로덕션 코드에서 예외 상황을 안전하게 처리하는 방법입니다. 정규 표현식은 처음 보면 암호처럼 느껴지지만, 자주 쓰는 패턴 몇 가지만 익혀두면 입력 유효성 검사, 문자열 파싱에서 강력하게 활용할 수 있습니다.
아래 10문제를 막힘없이 풀 수 있다면,
이 자료 전체를 생략하거나 모르는 부분만 선택적으로 읽어도 됩니다.
function divide(a, b) {
if (b === 0) throw new Error("0으로 나눌 수 없습니다");
return a / b;
}
try {
const result = divide(10, 0);
console.log(result);
} catch (err) {
console.error(err.message); // "0으로 나눌 수 없습니다"
console.error(err.name); // "Error"
} finally {
console.log("항상 실행"); // 에러 여부 관계없이 실행
}
// JS에서 자주 마주치는 에러 타입들
try {
null.property; // TypeError
undeclaredVar; // ReferenceError
JSON.parse("{bad}"); // SyntaxError
} catch (err) {
if (err instanceof TypeError) {
console.log("타입 에러:", err.message);
} else if (err instanceof ReferenceError) {
console.log("참조 에러:", err.message);
}
}
class ValidationError extends Error {
constructor(message, field) {
super(message);
this.name = "ValidationError";
this.field = field;
}
}
class NetworkError extends Error {
constructor(message, statusCode) {
super(message);
this.name = "NetworkError";
this.statusCode = statusCode;
}
}
// 에러 종류에 따라 다르게 처리
try {
throw new ValidationError("이메일 형식이 올바르지 않습니다", "email");
} catch (err) {
if (err instanceof ValidationError) {
console.log(`[${err.field}] ${err.message}`);
} else if (err instanceof NetworkError) {
console.log(`HTTP ${err.statusCode}: ${err.message}`);
} else {
throw err; // 처리할 수 없는 에러는 다시 전파
}
}
// 기본 패턴
async function fetchUser(id) {
try {
const res = await fetch(`/api/users/${id}`);
if (!res.ok) {
throw new NetworkError("요청 실패", res.status);
}
return await res.json();
} catch (err) {
console.error("fetchUser 에러:", err.message);
throw err; // 필요하면 상위로 전파
}
}
// 호출부 처리
async function loadUser() {
try {
const user = await fetchUser(1);
setUser(user);
} catch (err) {
setError(err.message);
}
}
정규 표현식은 처음 보면 어렵지만, 자주 쓰는 패턴 몇 가지를 익혀두면 입력 유효성 검사, 문자열 파싱, 포맷 변환 등에서 강력하게 활용할 수 있습니다.
// 문자 클래스
const digits = /\d/; // 숫자 [0-9]
const words = /\w/; // 단어 문자 [a-zA-Z0-9_]
const spaces = /\s/; // 공백 문자
const any = /./; // 줄바꿈 제외 모든 문자
// 수량자
const zeroOrMore = /a*/; // 0번 이상
const oneOrMore = /a+/; // 1번 이상
const optional = /a?/; // 0번 또는 1번
const exactly3 = /a{3}/; // 정확히 3번
const twoToFour = /a{2,4}/; // 2~4번
// 앵커
const start = /^hello/; // hello로 시작
const end = /world$/; // world로 끝
const exact = /^hello world$/; // 정확히 이 문자열
// 이메일 유효성 검사
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
emailRegex.test("user@example.com"); // true
emailRegex.test("invalid-email"); // false
// 한국 휴대폰 번호
const phoneRegex = /^01[016789]-?\d{3,4}-?\d{4}$/;
phoneRegex.test("010-1234-5678"); // true
// URL에서 도메인 추출
const url = "https://www.example.com/path?query=1";
const domain = url.match(/https?:\/\/([^\/]+)/)?.[1];
// "www.example.com"
// 날짜 포맷 변환 (YYYY-MM-DD → YYYY.MM.DD)
"2026-06-08".replace(/(\d{4})-(\d{2})-(\d{2})/, "$1.$2.$3");
// "2026.06.08"
const str = "Hello World hello";
const regex = /hello/gi; // g: 전역, i: 대소문자 무시
// test — 매칭 여부 (boolean)
regex.test(str); // true
// match — 매칭 결과 배열
str.match(regex); // ["Hello", "hello"]
// replace — 교체
str.replace(regex, "Hi"); // "Hi World Hi"
// split — 분리
"a,b,,c".split(/,+/); // ["a", "b", "c"]
// search — 첫 번째 매칭 인덱스
str.search(/World/); // 6
아래 코드를 브라우저 콘솔에서 직접 실행해보고 결과를 입력해보세요.
function riskyOperation() {
throw new TypeError("타입 에러 발생");
}
try {
riskyOperation();
console.log("A");
} catch (err) {
console.log("B:", err.name);
} finally {
console.log("C");
}아래 질문에 답해보세요. 직접 코드를 실행해보고 이유를 설명할 수 있어야 합니다.
function test() {
try {
throw new Error("에러 발생");
console.log("A");
} catch (err) {
console.log("B:", err.message);
return "catch에서 반환";
} finally {
console.log("C");
}
}
console.log(test());