Node.js + TypeScript 게시판 만들기 — Phase 1: 프로젝트 세팅들어가며TypeScript 기초와 실무 패턴을 익힌 후, 직접 CRUD 게시판을 만들어보는 시리즈를 시작합니다.이번 시리즈에서 사용하는 기술 스택은 다음과 같습니다.분류기술언어TypeScript서버Node.js, Express뷰EJS, CSS, jQueryDBMySQL 8인프라Docker, Docker Compose이번 글에서는 프로젝트 초기 세팅(폴더 구조, 의존성 설치, 설정 파일)을 다룹니다.폴더 구조 설계먼저 전체 폴더 구조를 잡아둡니다. 기능이 생길 때마다 파일을 아무 곳에나 만들면 나중에 수습이 어렵기 때문에, 처음부터 routes, controllers, models 레이어로 분리하는 구조를 잡습니다.ts-a..
JS
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..
thisthis는 함수가 어떻게 호출됐느냐에 따라 값이 달라진다.일반 함수 — 호출한 주체가 thisconst user = { name: "Alice", greet() { console.log(this.name); }};user.greet(); // "Alice" — user가 호출했으니 this = userconst greet = user.greet;greet(); // undefined — 그냥 호출하면 this = 전역화살표 함수 — this가 없음, 바깥 스코프 그대로const user = { name: "Alice", greet: () => { console.log(this.name); // undefined }};화살표 함수는 자기만의 this가 없다. 선언된 위치의 바깥..
