반응형

4.Node.js/JavaScript&TypeScript 20

[JavaScript] 11편. Java 개발자를 위한 JavaScript 핵심 연산자 정리

11편. Java 개발자를 위한 JavaScript 핵심 연산자 정리 📚 목차1. 비교 연산의 기초: == vs === / Object.is2. Truthy / Falsy와 단축 평가: || vs &&3. 기본값 처리와 안전한 대체 전략: Nullish(??)4. 안전한 접근과 조건부 실행: Optional Chaining(?.)5. 타입·인스턴스·구조 판별 전략: typeof, instanceof, isArray, hasOwn6. 데이터 구조 연산자 전략: 구조분해, Rest, Spread7. 요약정리 📂 [GitHub 실습 코드 보러가기] (https://github.com/cericube/nodejs-tutorials) /JavaScript 1. 비교 연산의 기초: == vs === / Obj..

[TypeScript] 8편. 개발자용 핵심 문법 & 실전 타입 설계 핸드북

8편. 개발자용 핵심 문법 & 실전 타입 설계 핸드북 📚 목차1. 기본 타입 시스템 (Core Type System)2. 함수 (Functions)3. 클래스와 객체지향 프로그래밍 (Classes and OOP)4. 제네릭 (Generics) : 타입 변수5. 고급 타입 조작 (Advanced Type Manipulation)6. 비동기 프로그래밍 (Asynchronous Programming)7. 모듈 시스템 (ESM for Node.js) : export, import 1. 기본 타입 시스템 (Core Type System) 🔷 1. 원시 타입 (Primitive Types)타입설명예시string문자열const userName: string = "TypeScript Learner";const g..

[TypeScript] 7편. 유틸리티 타입 이해하기: Partial, Readonly, Pick, Omit, 조건부 타입 활용법

7편. 유틸리티 타입 이해하기: Partial, Readonly, Pick, Omit, 조건부 타입 활용법 📚 목차1. 기본 유틸리티 타입: Partial와 Readonly2. 선택 유틸리티 타입 Pick · Omit으로 타입 구조 최적화하기3. 조건부 타입(Conditional Types)을 활용한 타입 분기 처리4. 매핑된 타입(Mapped Types)과 실전 사용 패턴 📂 [GitHub 예시 코드 보러가기] (https://github.com/cericube/nodejs-tutorials) /TypeScript 1. 기본 유틸리티 타입: Partial와 Readonly- "프로퍼티를 가진 객체 타입” 에 의미 있게 쓰는 유틸리티 -TypeScript는 자주 사용되는 타입 변환 패턴을 위해 기본..

[TypeScript] 6편. 제네릭 (Generic) 이해하기: 함수, 인터페이스, 클래스, constraints 활용

6편. 제네릭 (Generic) 이해하기: 함수, 인터페이스, 클래스, constraints 활용 📚 목차1. any 대신 제네릭(Generic)이 필요한 이유2. 제네릭(Generic) 함수 개념과 동작 방식3. 제네릭 인터페이스(Interface)와 클래스(Class) 활용4. 제약 조건(Constraints)으로 타입 제한하기 📂 [GitHub 예시 코드 보러가기] (https://github.com/cericube/nodejs-tutorials) /TypeScript 1. any 대신 제네릭(Generic)이 필요한 이유제네릭은 '일반적인', '범용적인'이라는 뜻처럼, 코드를 작성할 때 사용할 타입을 미리 정하지 않고, 그 코드를 사용하는 시점에 원하는 타입으로 지정할 수 있게 해주는 기능..

[TypeScript] 5편. 클래스에 타입 적용하기: 클래스 정의와 인터페이스 구현

5편. 클래스에 타입 적용하기: 클래스 정의와 인터페이스 구현 📚 목차1. 클래스에 타입 적용: 클래스 정의와 구현2. 접근 제어자: 캡슐화의 핵심 (public, private, protected)3. 클래스 속성을 안전하게 다루는 방법: getter와 setter4. 상속과 추상 클래스: 코드 재사용성과 구조 설계 📂 [GitHub 예시 코드 보러가기] (https://github.com/cericube/nodejs-tutorials) /TypeScript 1. 클래스에 타입 적용: 클래스 정의와 구현TypeScript에서는 클래스(Class)를 통해 객체를 만들 수 있으며, 이때 클래스의 속성(Property)과 생성자(Constructor), 그리고 메서드(Method)에 타입을 명확히 지정..

[TypeScript] 4편. Union, Literal, Intersection 타입 이해하기 : typeof, keyof, instanceof

4편. Union, Literal, Intersection 타입 이해하기 : typeof, keyof, instanceof 📚 목차1. 유니언 타입(Union Types): 하나 이상의 타입을 허용하는 방식2. 리터럴 타입(Literal Types): 특정 값만 허용하기3. 인터섹션 타입(Intersection Type): 여러 타입을 결합하기4. 타입 연산자(typeof / keyof), instanceof 이해하기 📂 [GitHub 예시 코드 보러가기] (https://github.com/cericube/nodejs-tutorials) /TypeScript 1. 유니언 타입(Union Types): 하나 이상의 타입을 허용하는 방식TypeScript에서는 변수나 함수의 매개변수 등이 하나의 타입..

[TypeScript] 3편. 배열, 튜플, 함수 타입 이해하기 : 매개변수, 반환 타입, 오버로딩

3편. 배열, 튜플, 함수 타입 이해하기 : 매개변수, 반환 타입, 오버로딩 📚 목차1. 배열과 튜플 이해하기: 리스트형 데이터 타입 선언법2. 함수 타입 기초: 매개변수 타입과 반환 타입 명확히 정의하기3. 함수 타입 심화: void, never, undefined와 함수 오버로딩4. 함수 타입 별칭과 콜백 타입 정의하기: 재사용 가능한 타입 설계 📂 [GitHub 예시 코드 보러가기] (https://github.com/cericube/nodejs-tutorials) /TypeScript 1. 배열과 튜플 이해하기: 리스트형 데이터 타입 선언법TypeScript에서는 배열과 튜플을 통해 리스트형 데이터를 더 안전하고 구조화된 방식으로 관리할 수 있습니다.JavaScript의 유연한 배열 사용 방..

[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)입니다. ..

[JavaScript] 10편. 퍼포먼스 & 메모리 최적화 이해하기

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

[JavaScript] 9편. 에러 처리 기법 이해하기

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 객체를 생성합니다.이 객체는 디버깅 과정에..

[JavaScript] 8편. 반복문 이해하기: for, while, forEach, Iterable

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 문 (조건 먼저 검사)..

[JavaScript] 7편. 컬렉션 이해하기: 배열,Map,Set,groupBy,WeakMap

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

[JavaScript] 6편. 모듈 시스템 이해하기: ESM, import/export

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

[JavaScript] 5편. 비동기 처리와 이벤트 루프 이해하기 : Promise, async/await, Event Loop

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를 적절히 활용함으로써 여러 작업을 동시에 수행하는 것처럼 보..

[JavaScript] 4편. 클래스(Class) & 프로토타입(Prototype) 이해하기

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)에서 도입되었으며, 겉보기에는 전통적인 클래스 문법과 유사하지만, 실제로는 자바스크립트의 프로..

[JavaScript] 3편. 함수 다루기: 함수 선언, this, 화살표 함수, 클로저(Closure), 콜백(Callback)

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

[JavaScript] 2편. 객체와 배열 다루기 : 구조 분해, Spread/Rest

[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편. 기본 문법 총정리: 변수·타입·스코프·호이스팅 이해하기

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

Node.js 개발환경 구축하기 : JavaScript, TypeScript, Vitest

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 포터블 다중 ..

반응형