분류 전체보기

1. 도입: 자바스크립트의 불안함, 타입스크립트로 잠재우기Node.js로 CLI(터미널) 기반의 투두 리스트를 만들면서 파일 입출력(fs) 기능을 구현했다. 하지만 자바스크립트(JS)는 실행하기 전까지는 에러를 알려주지 않는다는 치명적인 단점이 있었다."함수에 배열 대신 문자열을 실수로 넣었는데, 프로그램이 실행된 뒤에야 '펑' 하고 터져버렸다."이런 런타임 에러를 방지하기 위해 **타입스크립트(TypeScript)**를 도입하여 코드에 **'안전장치(Type Safety)'**를 걸기로 결심했다.2. 문제 발생: TS1192 에러최신 문법인 ES Modules(import) 방식을 사용하여 fs 모듈을 불러오려 했는데, 컴파일 과정에서 빨간 줄이 떴다.// 문제의 코드import fs from 'fs'..

1. 문제 상황: 열심히 적은 할 일이 사라진다?Node.js로 CLI 기반의 Todo List를 만들던 중 치명적인 문제를 발견했다. node todo.js add "코딩 공부하기" 명령어로 할 일을 추가할 때는 잘 동작하지만, 프로그램을 종료했다가 다시 켜면 목록이 텅 비어버리는 것이다.// 문제의 코드 (메모리 저장 방식)let todos = []; // 프로그램이 종료되면 이 배열도 메모리에서 증발한다.원인 분석: 컴퓨터 구조적으로 당연한 결과였다. 변수(variable)는 **RAM(메모리)**에 저장된다. RAM은 휘발성 메모리이기 때문에, 프로세스가 종료되거나 전원이 꺼지면 데이터가 즉시 소멸한다. 데이터를 영구적으로 보관하려면 RAM이 아닌 **HDD/SSD(보조기억장치)**에 저장해야 한..

1. 상황 및 문제 (Context & Problem)지금까지는 VS Code에서 재생 버튼을 눌러 코드를 실행했습니다. 하지만 진정한 개발자라면 **터미널(CLI)**에서 명령어로 프로그램과 소통할 수 있어야 합니다.CLI 기반의 투두 리스트(Todo List)를 만들면서, 터미널에 입력된 명령어(add, list)를 코드에서 어떻게 가져오는지 고민했습니다. 처음에는 직관적으로 아래와 같이 접근하는 실수를 범했습니다.// [Bad Case] 의도: "add"나 "list"라는 명령어를 찾고 싶다.// 실수: 배열은 숫자로 된 인덱스로 접근해야 하는데, 찾고 싶은 '값'을 키로 사용함.const command = process.argv['add', 'list']; 당연히 결과는 undefined였습니다...

1. 상황 및 문제 (Context & Problem)타입스크립트를 처음 도입했을 때, 가장 참기 힘든 유혹은 바로 any입니다. 특히 서버에서 받아오는 데이터(API Response)의 타입을 정의할 때 문제가 발생했습니다.// [Bad Case] 귀찮아서 any를 쓴 경우interface ApiResponse { data: any; // 무엇이 들어올지 모른다고 any를 줘버림 status: number; message: string;}이렇게 짜면 컴파일 에러는 사라지지만, response.data.nmae처럼 오타를 내도 자바스크립트는 잡아주지 못합니다. 타입스크립트를 쓰는 의미가 사라지는 것이죠. 그렇다고 UserResponse, ProductResponse를 일일이 다 만드는 건 비효율적인..

1. 상황 및 문제 (Context & Problem)타입스크립트를 공부하다 보면 가장 먼저 마주치는 난관이 있습니다. 바로 interface와 type의 차이입니다. 둘 다 객체의 타입을 정의할 수 있어 기능이 겹쳐 보이기 때문입니다.특히 학습 과정에서 두 가지 객체를 합치려고 시도하다가 다음과 같은 실수를 범했습니다. // [Bad Case] 의도: Order와 Payment 타입을 합치고 싶음type OrderDetail = 'Order' & 'Payment';단순히 두 단어를 합치면 된다고 생각해서 따옴표(')를 붙였는데, TS 컴파일러는 이를 타입의 결합이 아닌, "Order"라는 글자와 "Payment"라는 글자의 교집합을 찾으라는 명령으로 인식했습니다. 당연히 그런 글자는 존재하지 않기에 n..

1. 왜(Why) 타입스크립트를 쓰는가?자바스크립트(JS)로 코드를 짤 때는 변수가 마치 **'내용물을 알 수 없는 박스'**와 같았습니다. 숫자를 넣으려던 박스에 문자가 들어가더라도, 실행(Runtime)하기 전까지는 아무도 경고해주지 않았죠. 결국 코드를 실행하고 나서야 비로소 "Type Error"라는 빨간 글씨를 마주하게 됩니다.반면, **타입스크립트(TS)**는 박스 겉면에 **"이건 숫자 전용 박스입니다!"**라고 라벨을 붙이는 것과 같습니다. 이 '안전벨트' 덕분에 코드를 실행하기도 전에 버그를 미리 잡아낼 수 있습니다.2. TypeScript 실행 환경 구축 (How to Run)타입스크립트(.ts) 파일은 컴퓨터(Node.js나 브라우저)가 바로 해석할 수 없습니다. 따라서 반드시 자바스..

1. 서론: 정적인 웹에 생명을 불어넣다HTML과 CSS로 만든 웹페이지는 예쁘지만 죽어있는 상태입니다. 사용자가 버튼을 눌렀을 때 숫자가 올라가고, 색깔이 변하게 하려면 자바스크립트로 DOM(문서 객체 모델)을 조작해야 합니다.오늘은 가장 기초적이면서도 핵심적인 '좋아요 카운터' 기능을 바닐라 자바스크립트(Vanilla JS)로 직접 구현해보며 querySelector, addEventListener, style 조작법을 정리했습니다.2. 기능 명세초기 상태: 하트 버튼과 숫자 0이 보임.동작: 버튼 클릭 시 숫자가 1씩 증가.심화(UI): 좋아요 수가 10개가 넘어가면 숫자가 빨간색으로 변함.3. 구현 과정 (Step-by-Step)1) 요소 선택하기 (querySelector) 가장 먼저 JS에게 ..

1. 서론: 싱글 스레드의 반란자바스크립트는 '싱글 스레드(Single Thread)' 언어입니다. 셰프가 한 명뿐인 주방처럼 한 번에 하나씩만 처리할 수 있다는 뜻이죠. 그런데 웹 사이트는 어떻게 서버에서 데이터를 받아오면서 동시에 애니메이션을 보여줄까요?그 비밀은 셰프(Call Stack) 몰래 일을 처리해 주는 **'보조 주방(Web APIs)'**과, 눈치 빠른 **'지배인(Event Loop)'**에게 있었습니다.2. 핵심 이론: 줄 서기에도 '계급'이 있다 (Microtask Queue)가장 충격적이었던 건 setTimeout과 Promise의 실행 순서였습니다. console.log("1. 시작");setTimeout(() => { console.log("2. 타임아웃"); }, 0); //..

1. 문제: 반복되는 "점(.)"들의 향연자바스크립트 프로젝트를 하다 보면 객체 안에 있는 값을 꺼내거나 수정할 일이 수도 없이 많습니다. 예전 방식(ES5)으로 작성된 코드를 보면 반복적인 타이핑 때문에 손목이 아파옵니다.[Before: 레거시 코드] const printProfile = (user) => { // 하나하나 꺼내서 변수에 담아야 함 (고통...) const name = user.name; const age = user.age; const nation = user.nation !== undefined ? user.nation : "Korea"; console.log("이름: " + name + ", 나이: " + age);};단순히 값을 꺼내는 데만 3줄을 썼습니다. 만약 속성이..