이 자료는 지금 당장 읽지 않아도 됩니다. 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.errorerr
// 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;
}
// 기본 패턴
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. err
정규 표현식은 처음 보면 어렵지만, 자주 쓰는 패턴 몇 가지를 익혀두면 입력 유효성 검사, 문자열 파싱, 포맷 변환 등에서 강력하게 활용할 수 있습니다.
// 문자 클래스
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 =
// 이메일 유효성 검사
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
emailRegex.test("user@example.com"); // true
emailRegex.test("invalid-email"); // false
// 한국 휴대폰 번호
const phoneRegex = /^01[016789]-?\d{3,4}-
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.
아래 코드를 브라우저 콘솔에서 직접 실행해보고 결과를 입력해보세요.
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());