mirabo01 님의 블로그

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..

“자바스크립트 함수의 진짜 차이를 모르면, 코드가 왜 에러 나는지 절대 알 수 없다.”🚀 들어가며프로그래밍에서 함수는 단순히 코드를 묶는 도구가 아니다.“재사용성과 구조의 출발점” 이며, 자바스크립트에서는 특히 함수가 일급 객체(First-class Object) 로 취급된다.그런데 막상 코드를 짜다 보면 이런 혼란에 자주 빠진다.sayHello(); // ✅ 작동됨greet(); // ❌ ReferenceErrorfunction sayHello() { console.log("안녕하세요!");}const greet = function() { console.log("반가워요!");};둘 다 “함수 선언” 같아 보이는데, 왜 하나만 실행될까?이것이 바로 함수 선언문(Function Declarat..