분류 전체보기 234

[TypeScript] 2편. 객체 설계의 핵심, Interface vs Type Alias 완벽 정리와 타입 추론 원리

2편. 객체 설계의 핵심, Interface vs Type Alias 완벽 정리와 타입 추론 원리📚 목차1. 인터페이스 (Interface): 객체 타입 정의의 기본2. type vs interface: 언제 무엇을 사용해야 할까요?3. 객체 타입 심화: 유연하고 안전한 구조 만들기4. 타입 추론 (Type Inference) 이해하기: 자동으로 타입 유추 📂 [GitHub 예시 코드 보러가기] (https://github.com/cericube/nodejs-tutorials) /TypeScript 1. 인터페이스 (Interface): 객체 타입 정의의 기본JavaScript의 객체는 매우 유연하여 다양한 속성과 구조를 가질 수 있지만, 반대로 말하면 어떤 속성이 존재하는지 사전에 알기 어렵고, ..

[TypeScript] 1편. TypeScript 핵심 개념과 기본 타입 이해하기

1편. TypeScript 핵심 개념과 기본 타입 이해하기 📚 목차1. TypeScript 핵심 개념 이해하기2. 기본 타입(Primitive Types) 이해하기3. 타입 별칭(Type Alias) 이해하기4. 모듈 시스템과 TypeScript 적용하기5. Any, Unknown, Never 타입 이해하기 📂 [GitHub 예시 코드 보러가기] (https://github.com/cericube/nodejs-tutorials) /TypeScript 1. TypeScript 핵심 개념 이해하기TypeScript(이하 TS)는 Microsoft가 개발·유지 관리하는 오픈 소스 프로그래밍 언어로, JavaScript에 정적 타입(Static Type)을 도입한 상위 확장 언어(Superset)입니다. ..

순공학,역공학,리팩터링,재엔지니어링,전면 재개발까지 한 번에 정리

순공학,역공학,리팩터링,재엔지니어링,전면 재개발까지 한 번에 정리 1. 순공학(Forward Engineering) vs 역공학(Reverse Engineering): “만드는 것”과 “거꾸로 이해하는 것”소프트웨어를 만든다는 것은 크게 두 가지 관점에서 볼 수 있습니다.하나는 “처음부터 새로 만드는 일(순공학)”이고, 다른 하나는 “이미 만들어진 것을 거꾸로 분석해서 이해하는 일(역공학)”입니다. 🔷 순공학(Forward Engineering)이란?순공학(Forward Engineering)은 우리가 흔히 떠올리는 “정상적인 소프트웨어 개발 과정”을 말합니다.즉, 요구사항 → 설계 → 구현 → 테스트로 이어지는 전통적인 흐름입니다.1. 요구사항 분석사용자가 무엇을 원하는지, 비즈니스가 어떤 기능을 ..

10편. 퍼포먼스 & 메모리 최적화 이해하기 📚 목차1. Spread와 구조 분해가 느린 이유: 내부 동작과 성능 비용2. 메모리 누수의 진짜 원인: 클로저(Closure)와 WeakMap3. 반복문 선택이 성능을 좌우하는 이유 📂 [GitHub 실습 코드 보러가기] (https://github.com/cericube/nodejs-tutorials) /JavaScript1. Spread와 구조 분해가 느린 이유: 내부 동작과 성능 비용Spread(...) 문법은 객체와 배열을 손쉽게 복사하거나 병합할 수 있어 매우 편리합니다.그러나 이 편리함 뒤에는 잘 드러나지 않는 성능 비용이 숨어 있습니다.특히 대규모 데이터를 반복해서 다루는 상황에서는 이러한 비용이 쉽게 누적되어 전체 코드의 성능을 떨어뜨릴 수..

9편. 에러 처리 기법 이해하기 📚 목차1. Error 객체 구조와 스택 트레이스 (Stack Trace)2. Error.cause (ES2022)3. throw & try/catch 실무 규칙4. 비동기 에러 처리 (Promise/async/await, 이벤트 error)5. Custom Error 클래스 설계 📂 [GitHub 실습 코드 보러가기] (https://github.com/cericube/nodejs-tutorials) /JavaScript 1. Error 객체 구조와 스택 트레이스 (Stack Trace)JavaScript에서 오류가 발생하면 엔진은 단순히 프로그램 실행을 중단하는 것이 아니라, 해당 오류 상황을 상세하게 기술한 Error 객체를 생성합니다.이 객체는 디버깅 과정에..

8편. 반복문 이해하기: for, while, forEach, Iterable 📚 목차1. 반복문(Loop)의 기본 이해 및 흐름 제어2. 핵심 반복문 3종 비교 (for / for...in / for...of)3. 순회(Iteration)의 원리: Iterable과 Iterator 프로토콜4. 다양한 객체의 forEach 사용법5. 고급 순회와 지연 평가: 제너레이터(Generator)✔ 마무리 📂 [GitHub 실습 코드 보러가기] (https://github.com/cericube/nodejs-tutorials) /JavaScript 1. 반복문(Loop)의 기본 이해 및 흐름 제어 🔷 기본적인 반복문: while과 do...while의 문법 및 차이점▸ while 문 (조건 먼저 검사)..

7편. 컬렉션 이해하기: 배열, Map, Set, groupBy, WeakMap 📚 목차1. 배열 핵심 패턴: map / filter / reduce / flatMap / some / every2. 배열 검색 & 변환 고급 기능: find / findIndex / findLast / findLastIndex3. Map & Set 기본 컬렉션4. Map & Set 확장 기능 (ES2024)5. WeakMap / WeakSet (메모리 관리 목적)✔ 마무리 📂 [GitHub 실습 코드 보러가기] (https://github.com/cericube/nodejs-tutorials) /JavaScript 1. 배열 핵심 패턴: map / filter / reduce / flatMap / some / eve..

6편. 모듈 시스템 이해하기: ESM, import/export 📚 목차1. ESM 기본 개념과 import/export 문법2. 모듈 로딩과 해석(Resolution), dynamic import3. Top-Level await (ES2022)✔ 마무리 JavaScript는 오랫동안 모듈 시스템이 부족한 언어였지만, 2015년(ES6)부터 ECMAScript에서 공식 모듈 표준인 ESM(ECMAScript Module)이 도입되었습니다.2025년 현재, ESM은 JavaScript의 유일한 공식 모듈 표준으로 자리 잡았으며, 브라우저와 Node.js 환경 모두에서 기본으로 채택되고 있습니다. 📂 [GitHub 실습 코드 보러가기] (https://github.com/cericube/nodejs-tu..

5편. 비동기 처리와 이벤트 루프 이해하기 : Promise, async/await, Event Loop 📚 목차1. 콜백 기반 비동기 처리와 콜백 지옥(Callback Hell)2. Promise의 기본 구조와 체이닝3. async/await과 현대 비동기 처리 실무 패턴4. AbortController / AbortSignal (ES2022)5. Microtask / Task Queue와 Event Loop6. Promise.withResolvers(ES2024) - 외부 제어형 Promise의 공식 해법✔ 마무리 자바스크립트는 단일 스레드 기반의 언어이지만, 비동기 API·이벤트 루프·Task Queue·Promise Microtask를 적절히 활용함으로써 여러 작업을 동시에 수행하는 것처럼 보..

4편. 클래스(Class) & 프로토타입(Prototype) 이해하기 📚 목차1. 클래스 기본 개념2. 프로토타입 이해하기3. 캡슐화: private 필드, getter/setter4. static 필드/메서드 & 유틸 패턴5. 상속과 확장(extends)✔ 마무리 📂 [GitHub 실습 코드 보러가기] (https://github.com/cericube/nodejs-tutorials) /JavaScript 1. 클래스 기본 개념자바스크립트의 클래스(Class)는 객체 지향 프로그래밍(OOP)의 핵심 개념으로, 특정 유형의 객체를 만들어 내기 위한 설계도 역할을 합니다.ES6(ECMAScript 2015)에서 도입되었으며, 겉보기에는 전통적인 클래스 문법과 유사하지만, 실제로는 자바스크립트의 프로..

3편. 함수 다루기: 함수 선언, this, 화살표 함수, 클로저(Closure), 콜백(Callback) 📚 목차1. 함수 정의와 실행 원리2. 화살표 함수 (Arrow Function)3. 함수 실행 컨텍스트와 this 이해하기4. 고차 함수 및 함수 패턴: 클로저(Closure), 콜백(Callback)✔ 마무리 📂 [GitHub 실습 코드 보러가기] (https://github.com/cericube/nodejs-tutorials) /JavaScript 1. 함수 정의와 실행 원리JavaScript에서 함수는 특정 작업을 수행하거나 값을 계산하는 코드 블록입니다. 함수를 사용하면 코드를 재사용하고 모듈화 하여 프로그램의 구조를 체계적으로 만들 수 있습니다. 🔷 함수의 정의: 함수 선언 v..

TypeScript 개발 환경 세팅 : tsconfig.json, tsx, Vitest 📚 목차1. TypeScript 설치와 tsconfig.json 핵심 설정2. TypeScript 실행 환경 구축: tsx 기반 개발3. 테스트 환경 설정(Vitest 기반)✔ 마무리 1. TypeScript 설치와 tsconfig.json 핵심 설정백엔드 프로젝트에서 TypeScript는 단순한 선택 사항이 아니라 “서비스 안정성의 핵심 요소”로 자리 잡았습니다.명확한 타입 시스템은 API 계약을 안정적으로 유지하고, 런타임 오류를 사전에 방지하며, 장기적으로 유지보수 비용을 크게 줄여줍니다.2025년 기준으로 Node.js는 ES Modules(ESM)을 공식 권장하고 있고, TypeScript 역시 이러한 흐..

[JavaScript] 2편. 객체와 배열 다루기 : 구조분해, Spread/Rest 📚 목차1. 객체 리터럴 & 프로퍼티 (Object Literal & Property)2. 배열 기본 조작 (Basic Array Manipulation)3. 구조 분해 할당(Destructuring Assignment)4. Spread (...) / Rest (...) ✔ 마무리 JavaScript에서 가장 많이 사용하는 자료 구조는 객체(Object)와 배열(Array)입니다.Node.js 개발에서 API 응답 처리, 설정 파일(JSON), DB 결과 매핑, 캐시 데이터 등 거의 모든 곳에서 필수적으로 다루게 됩니다. 📂 [GitHub 실습 코드 보러가기] (https://github.com/cericube/n..

[JavaScript] 1편. 기본 문법 총정리: 변수·타입·스코프·호이스팅 이해하기 📚 목차1. 변수 let/const, var(지양)2. 데이터 타입(Primitive & Object), BigInt(ES2020)3. Truthy/Falsy, 단축 평가(Logical OR/AND)4. 스코프(Scope) : Block/Function/Global5. 호이스팅 (Hoisting)6. 연산자 기본7. 템플릿 리터럴 (Template Literals) 📂 [GitHub 실습 코드 보러가기] (https://github.com/cericube/nodejs-tutorials/JavaScript) 1. 변수: let, const, 그리고 var (지양)JavaScript에서 데이터를 저장하는 변수(Var..

1. Visual Studio Code 설치Visual Studio Code 설치 방법 (Installer / Zip 포터블 모드) Visual Studio Code 설치 방법 (Installer / Zip 포터블 모드)Windows에서 Visual Studio Code(이하 VSCode)를 설치하는 방법에는 설치형(Installer)과 포터블(Portable) 모드(Zip 파일) 두 가지가 있습니다. 이 글에서는 각각의 설치 방법과 포터블 모드 설정, 폰트 설정 방quadcube.tistory.com 2. Node.js 설치 및 다중 버전 관리하기VSCode에서 Node.js 포터블 다중 버전 관리하기 VSCode에서 Node.js 포터블 다중 버전 관리하기VSCode에서 Node.js 포터블 다중 ..

9편. GraphQL Query & Mutation 기본 구조와 CRUD 실습 📚 목차1. Query와 Mutation의 개념 및 기본 문법2. Arguments와 Input Type 설계 방법3. CRUD 예제에 적용한 서비스 계층 구조4. User 엔티티 기반 CRUD 실습✔ 마무리 - Query와 Mutation, 실무로 가는 첫걸음 GraphQL을 처음 배우는 분들이 가장 먼저 마주하는 개념은 Query와 Mutation입니다. Query는 데이터를 읽는 역할, Mutation은 데이터를 쓰는(추가, 수정, 삭제) 역할을 담당합니다.REST API에서도 GET, POST, PUT, DELETE 같은 HTTP 메서드로 구분했듯이, GraphQL도 기능에 따라 구조가 나뉩니다.이번 글에서는 이 기..

8편. GraphQL에서 InputObject 타입 활용 📚 목차1. InputObject 타입의 개념과 선언 문법2. InputObject를 활용한 구조화 설계 전략3. 중첩된 InputObject와 서버 처리 흐름4. InputObject을 활용한 계정 생성 실전 예제✔ 마무리 - 구조화된 입력 설계 GraphQL에서 클라이언트가 서버에 데이터를 전달할 때, 단일 스칼라 인자를 여러 개 나열하는 방식은 초기에는 간단해 보이지만, 실제 운영 환경에서는 점점 관리하기 어려워집니다.입력 필드가 많아지고, 필드 간 관계나 계층 구조가 필요해지면 구조화된 입력 설계가 필수적입니다.GraphQL에서는 이러한 요구를 해결하기 위해 InputObject 타입을 제공합니다. 이 장에서는 InputObject의 개념..

7편. GraphQL에서 Enum 타입 설계 전략 📚 목차1. Enum 정의 및 제약 처리2. 프론트 연동 시 고려점3. Enum 기반 조건 분기4. 실무 예제: Role / Status Enum 설계✔ 마무리 - Enum 기반 안정성 확보 Enum(열거형)은 제한된 값 집합을 코드로 명확하게 정의하여, 타입 안정성, 데이터 무결성, 가독성, 유지보수성을 동시에 확보할 수 있는 도구입니다.이번 에서는 GraphQL API에서 사용자 권한(Role)과 계정 상태(Status)를 Enum으로 설계·활용하는 방법을 다룹니다.📂 [GitHub 실습 코드 보러가기] (https://github.com/cericube/graphql-tutorial-server) 1. Enum 정의 및 제약 처리GraphQL과 ..

6편. GraphQLScalar 타입 완전 정복 📚 목차1. 기본 Scalar 종류와 의미 (Custom Scalar 소개)2. 기본 Scalar 적용 예제 (String, Int, Boolean, Float, ID)3. Scalar 제약과 유효성 (Resolver 유효성 검사, Custom Scalar)4. 실무 예제 기반 입력 처리(전체 실행 흐름)✔ 마무리 - Scalar 타입 설계와 활용 전략 GraphQL에서 Scalar(스칼라) 타입은 더 이상 세분화할 수 없는 가장 기본적인 데이터 단위입니다.이는 SQL의 VARCHAR, INT, BOOLEAN과 같은 원시 자료형과 유사하며, 객체(Object) 타입을 구성하는 필드의 최소 단위로 사용됩니다.Scalar 타입을 올바르게 정의하면 클라이언트와..

5편. GraphQL 스키마와 리졸버 구조 이해 📚 목차1. Query / Mutation / ObjectType 구조2. 필드, 리턴 타입, 인자 정의 방법3. 리졸버 함수 작성 및 스키마의 연결 방식4. 스키마 설계 시 고려사항 (명확성/일관성/확장성)✔ 마무리 - GraphQL 스키마와 리졸버의 실무 핵심 GraphQL의 핵심은 스키마(Schema)입니다.스키마는 서버에서 제공하는 데이터의 형태와 기능을 선언적으로 정의하는 계약서 역할을 하며, 클라이언트가 요청할 수 있는 쿼리(Query)와 변형(Mutation), 그리고 반환 데이터의 구조(ObjectType)를 명시합니다.이 장에서는 GraphQL 스키마를 구성하는 주요 요소와, 각 필드 정의 방식, 그리고 이를 실제 데이터 처리 로직(리졸버..