mirabo01 님의 블로그

이제 이론은 충분히 다뤘으니,“실제 하나의 기능을 처음부터 끝까지 만들어 보는 단계” 로 가보자.이번 글에서는 순수 자바스크립트만 가지고:ES6 모듈 (import / export)클래스(class)비동기 처리 (async / await)간단한 설계 구조 (Model / Service / UI)를 모두 엮어서 User 관리 미니 프로젝트 (CRUD) 를 직접 구현해본다.“여기서 한 번 제대로 만들어보면, 이후 React·Vue로 가도 훨씬 이해가 빨라진다.”1. 이번에 만들 기능 정리간단한 “유저 관리” 기능을 만든다.유저 목록 조회 (Read)유저 추가 (Create)유저 삭제 (Delete)나중에 수정(Update)까지 확장 가능하도록 구조 설계실제 서버는 없으니, 가짜 API(mock API) 를 ..

1. 왜 설계가 중요한가프론트엔드든 백엔드든, 규모가 커질수록 코드의 “양”보다 “구조”가 중요해진다.잘 짜인 설계는 버그보다 이해하지 못한 코드를 줄이는 데 목적이 있다.코드의 품질은 “동작”이 아니라 “이해도”로 결정된다.객체지향과 모듈화를 결합하면,한눈에 ‘이 코드가 어디에 속하는지’ 파악할 수 있는 구조가 된다.2. 코드 설계의 3가지 원칙아무리 복잡한 프로젝트라도 다음 세 가지 원칙만 지키면 안정적인 구조를 만들 수 있다.단일 책임 원칙 (SRP) — 하나의 파일/클래스는 한 가지 역할만 수행의존성 역전 원칙 (DIP) — 상위 모듈은 하위 구현에 의존하지 말 것모듈 독립성 원칙 (Modularity) — 각 모듈은 최소한의 연결로 동작해야 함이 세 가지는 단순히 철학이 아니라,실제 유지보수 비..

1. 객체지향의 4대 핵심 원칙객체지향 프로그래밍(OOP)은 단순히 클래스를 쓰는 게 아니다.진짜 핵심은 “설계 철학”이다.자바스크립트에서도 이 철학은 그대로 적용된다.원칙 설명 자바스크립트 적용 방식캡슐화 (Encapsulation)데이터와 메서드를 한곳에 묶고, 외부 접근을 제한private 필드, getter/setter상속 (Inheritance)기존 코드를 재사용하여 새로운 클래스 생성extends, super()추상화 (Abstraction)불필요한 세부 구현은 숨기고 핵심만 노출클래스/인터페이스 구조다형성 (Polymorphism)같은 메서드가 다른 방식으로 동작메서드 오버라이딩, 인터페이스 구현2. 캡슐화(Encapsulation) — 내부 데이터를 보호하라캡슐화는 “데이터를 직접 조작하지..

1. 객체지향 프로그래밍이란?프로그래밍 언어에는 여러 패러다임이 있다.그중 하나가 객체지향 프로그래밍(OOP, Object-Oriented Programming).핵심 개념은 단순하다.“데이터와 기능을 하나의 객체로 묶어서 관리하자.”예를 들어, 단순히 사용자 이름과 인사 기능을 따로 두는 대신,그 둘을 하나의 객체로 묶어두는 것이다.const user = { name: "기범", greet() { console.log(`안녕하세요, ${this.name}입니다.`); },};user.greet(); // 안녕하세요, 기범입니다.이런 객체가 여러 개 필요할 때,하나씩 수동으로 만드는 대신 템플릿(설계도) 로 찍어내는 게 바로 클래스의 역할이다.2. 클래스(Class)의 기본 구조ES6 이전에는..

1. 왜 모듈이 필요한가프로젝트가 커질수록, 한 파일 안의 코드 길이는 기하급수적으로 늘어난다.예전에는 이런 식이었다.// script.jsfunction add(a, b) { return a + b; }function multiply(a, b) { return a * b; }console.log(add(2, 3));그런데 만약 다른 파일에서 add()를 쓰고 싶다면 어떻게 해야 할까?이전 자바스크립트(ES5)까지는 이런 “모듈화” 기능이 없어서,모든 스크립트를 전역(global)으로 불러오는 방식을 썼다.결과적으로 전역 네임스페이스 충돌이 발생하고,파일 간 의존성이 꼬이기 시작했다.이 문제를 해결하기 위해 등장한 것이 바로 모듈 시스템(Module System) 이다.2. 모듈이란 무엇인가모듈(Modu..

1. 자바스크립트는 ‘단일 스레드(single-thread)’ 언어다먼저 전제부터 잡고 가자.자바스크립트는 기본적으로 한 번에 하나의 작업만 처리한다.즉, CPU가 한 줄씩 순서대로 실행하는 “단일 스레드” 모델이다.그렇다면 이런 의문이 생긴다.“단일 스레드인데, 어떻게 동시에 여러 작업을 처리하지?”예를 들어, 브라우저에서 이런 코드를 실행하면 어떻게 될까?console.log("A");setTimeout(() => console.log("B"), 1000);console.log("C");출력 결과는ACB가 된다.즉, 1초를 기다리지 않고 다음 코드가 바로 실행된다.이게 바로 비동기 처리(asynchronous execution) 의 핵심이다.2. 동기(Synchronous) vs 비동기(Asynchr..

1. 들어가며자바스크립트에서 함수는 단순히 “코드 묶음”이 아니라,자신이 선언된 환경(스코프)을 기억하는 살아 있는 객체다.이 특성을 가능하게 하는 것이 바로 클로저(Closure) 다.한마디로 정리하면 이렇다.“클로저란 함수가 선언될 때의 환경을 기억하는 기능이다.”이제 이 문장이 무슨 뜻인지 예제를 통해 하나씩 풀어보자.2. 함수는 함수를 반환할 수 있다자바스크립트의 함수는 일급 객체이므로, 다른 함수 안에서 생성하고 반환할 수 있다.function outer() { const name = "기범"; function inner() { console.log(`안녕하세요, ${name}`); } return inner;}const greet = outer();greet(); // "안녕하세요..

1. 왜 map, filter, reduce가 중요한가프론트엔드에서 데이터를 다룰 때, 가장 흔한 패턴은 “리스트를 가공하는 것”이다.API에서 가져온 데이터를 정리하거나, 사용자 입력을 필터링하거나,차트나 테이블에 맞게 변환하는 모든 과정이 여기에 속한다.이 세 가지 메서드는 단순 반복이 아니라,데이터를 새롭게 변형하고 요약하는 사고 방식을 가능하게 한다.// 예시: 사용자 데이터const users = [ { name: "기범", age: 27 }, { name: "민수", age: 19 }, { name: "지현", age: 32 },];이 데이터를 이용해 여러 가지 처리를 해보자.2. map — 데이터를 변형하는 방법map은 배열의 각 요소를 순회하면서, 새로운 형태로 “변환된 결과”를 가진..

자바스크립트를 배우다 보면 결국 모든 데이터가 객체(Object) 로 통한다는 걸 깨닫게 된다.숫자, 문자열, 함수, 배열 — 전부 객체의 한 형태거나 객체에서 파생된 존재다.이 글에서는 객체와 배열을 단순히 “자료 구조”로 보지 않고,데이터를 표현하고 조작하는 철학적 도구로 접근해보자.1. 객체(Object)의 개념객체는 하나의 실체를 표현하기 위한 키(key)-값(value) 쌍의 집합이다.예를 들어 사람을 표현하려면 다음과 같이 쓸 수 있다.const person = { name: "기범", age: 27, job: "Frontend Developer",};여기서 name, age, job은 속성(property) 이며,이 속성들은 각각의 값과 연결되어 있다.이런 구조 덕분에 객체는 현실의 개..

자바스크립트를 배우면서 가장 많은 혼란을 주는 개념 중 하나가 바로스코프(Scope) 와 호이스팅(Hoisting) 이다.변수를 선언했는데 값이 예상과 다르게 나오거나,함수를 아래쪽에 적었는데도 실행되는 이유가 바로 이 두 개념 때문이다.이번 글에서는‘자바스크립트가 코드를 실행할 때 실제로 무슨 일이 일어나는지’를눈앞에 그리듯 차근히 설명해보자.1. 스코프(Scope)란 무엇인가스코프란 “변수와 함수가 유효한 범위”를 말한다.즉, 어떤 변수를 어디서 접근할 수 있고 어디서는 접근할 수 없는지를 결정하는 규칙이다.예를 들어, 아래 코드를 보자.let name = "기범"; // 전역 변수function greet() { let message = "안녕하세요"; // 지역 변수 console.log(me..