TypeScript 03 — 인터페이스 vs 타입 alias인터페이스 (interface)객체의 구조를 정의하는 키워드다.interface User { name: string; age: number; email: string;}const user: User = { name: "수영", age: 30, email: "soo@example.com",};타입 alias (type)type 키워드로 타입에 이름을 붙이는 방식이다.type User = { name: string; age: number; email: string;};객체만 놓고 보면 interface와 거의 동일하다.차이점1. 확장 방법// interface — extends 사용interface Animal { name: stri..
분류 전체보기
TypeScript 02 — 기본 타입string / number / booleanlet name: string = "수영";let age: number = 30;let isActive: boolean = true;// 타입 추론 — 초기값이 있으면 TS가 자동으로 타입을 잡아줌let city = "서울"; // string으로 자동 추론let score = 100; // number로 자동 추론array// 방법 1let numbers: number[] = [1, 2, 3];let names: string[] = ["수영", "민지"];// 방법 2 (제네릭 표기)let numbers2: Array = [1, 2, 3];tuple배열이지만 순서와 타입이 고정된다.let user: [strin..
TypeScript 01 — TS를 쓰는 이유JavaScript의 문제점JS는 타입이 없어서 이런 일이 생긴다:function add(a, b) { return a + b;}add(1, 2); // 3 ✅add("1", 2); // "12" ❌ 에러 없이 그냥 실행됨add(1, "2"); // "12" ❌함수를 잘못 호출해도 런타임 전까지 모름 — 즉, 배포하고 나서야 문제가 생김.TypeScript란JavaScript + 타입 시스템TypeScript는 JS에 타입을 추가한 언어. 브라우저/Node.js는 TS를 직접 실행 못하기 때문에 컴파일 과정을 거쳐 JS로 변환된다..ts 파일 → tsc (컴파일러) → .js 파일TS를 쓰면 뭐가 좋은지?1. 코드 작성 중에 오류를 잡아줌..
모듈 시스템코드를 파일 단위로 나눠서 관리하는 방법. JavaScript에는 두 가지 방식이 있다.CommonJS (CJS)Node.js 기본 방식. require / module.exports 사용.// math.jsfunction add(a, b) { return a + b; }function sub(a, b) { return a - b; }module.exports = { add, sub };// app.jsconst { add, sub } = require("./math");console.log(add(1, 2)); // 3ESM (ES Modules) — 최신 방식브라우저/Node.js 모두 지원. import / export 사용.// math.jsexport function add(a, b)..
ES6+ 필수 문법1. 구조분해 할당 (Destructuring)객체const user = { name: "Alice", age: 30, city: "Seoul" };// 기존 방식const name = user.name;const age = user.age;// 구조분해const { name, age } = user;// 다른 이름으로 받기const { name: userName } = user;// 기본값 설정const { city, job = "개발자" } = user;console.log(job); // "개발자" — user에 job이 없으니 기본값배열const [first, second] = [1, 2, 3];// 특정 인덱스만const [, , third] = [1, 2, 3];console..
async / awaitPromise를 동기 코드처럼 읽히게 써주는 문법. 내부적으로는 Promise다.기본 문법// Promise 방식function getOrders() { return db.query("SELECT * FROM orders") .then(result => result) .catch(err => console.log(err));}// async/await 방식 — 같은 동작async function getOrders() { const result = await db.query("SELECT * FROM orders"); return result;}async — 이 함수는 비동기 함수다await — Promise가 끝날 때까지 여기서 기다려라에러 처리// ❌ 현재 회사 ..
이벤트 루프 (Event Loop)JavaScript는 싱글 스레드 — 한 번에 하나의 작업만 처리한다.그런데 비동기 작업(setTimeout, API 호출 등)을 처리할 수 있는 이유가 이벤트 루프 덕분이다.구성 요소┌─────────────┐│ Call Stack │ ← JS가 실제로 코드 실행하는 곳└─────────────┘ ↑┌─────────────┐│ Web API │ ← setTimeout, fetch 등 브라우저/Node가 처리└─────────────┘ ↓┌──────────────────┬───────────────────┐│ Microtask Queue │ Task Queue ││ (Promise 콜백) │ (setTimeout 콜..
Promise"지금 당장 결과는 없지만, 나중에 성공하거나 실패했을 때 알려줄게"라는 약속 객체3가지 상태pending → 아직 결과 없음 (대기 중)fulfilled → 성공 (resolve 호출됨)rejected → 실패 (reject 호출됨)기본 문법const promise = new Promise((resolve, reject) => { const success = true; if (success) { resolve("성공!"); } else { reject("실패!"); }});promise .then(result => console.log(result)) // "성공!" .catch(err => console.log(err));reject가 호출되면 .then은 건너..
콜백 패턴 (Callback)콜백은 함수를 다른 함수의 인자로 넘기는 것이다.function greet(name, callback) { console.log("안녕, " + name); callback();}greet("Alice", function() { console.log("반가워!");});// 출력:// 안녕, Alice// 반가워!비동기에서의 콜백db.query("SELECT * FROM orders", function(err, result) { if (err) { console.log(err); return; } console.log(result);});console.log("이게 먼저 출력됨"); // 쿼리 기다리지 않음콜백 지옥결과를 받아서 또 요청하고, 또 받아서 ..
프로토타입 (Prototype)JavaScript의 모든 객체는 다른 객체를 참조하는 숨겨진 링크(프로토타입)를 가지고 있다.프로토타입 체인메서드/프로퍼티를 찾을 때 자기 자신 → 프로토타입 → 위로 올라가며 탐색한다.const arr = [1, 2, 3];arr.push(4); // push는 Array.prototype에 정의돼 있음arr → Array.prototype → Object.prototype → nullconsole.log(arr.__proto__ === Array.prototype); // trueconsole.log(arr.__proto__.__proto__ === Object.prototype); // trueconsole.log(arr.__proto__.__pr..
