본문 바로가기

전체 글459

모듈과 네임스페이스, 프로젝트 설정 및 최적화 모듈과 네임스페이스 (Modules & Namespaces)TypeScript에서 **모듈(Modules)**과 **네임스페이스(Namespaces)**는 코드를 모듈화하고 관리하는 방법이다.모듈은 ES6 표준을 따르며, 네임스페이스는 내부적인 코드 조직화를 위한 기능으로 사용된다.1️⃣ import와 export 사용법TypeScript에서 모듈을 사용하면 코드를 여러 파일로 나누어 관리할 수 있으며,import와 export 키워드를 사용하여 모듈 간의 의존성을 연결할 수 있다.기본적인 export와 importmath.ts (모듈 파일)export function add(x: number, y: number): number { return x + y;}export function subtract(.. 2025. 3. 19.
객체 지향 프로그래밍 (OOP) in TypeScript 객체 지향 프로그래밍 (OOP) in TypeScriptTypeScript는 **객체 지향 프로그래밍(Object-Oriented Programming, OOP)**을 지원하며,클래스(Class), 상속(Inheritance), 접근 제한자(Access Modifiers), 정적(static) 속성 및 메서드 등의 기능을 제공한다.1️⃣ 클래스 (Class)TypeScript에서 클래스는 객체를 생성하는 청사진 역할을 한다.ES6의 클래스 문법을 기반으로 하며, 추가적인 타입 안정성을 제공한다.class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age .. 2025. 3. 19.
함수와 고급 타입 시스템 함수와 고급 타입 시스템 (Functions & Advanced Type System)TypeScript에서 **함수(Functions)**는 매개변수와 반환 타입을 명확하게 정의하여 코드의 안정성과 가독성을 높일 수 있다.1️⃣ 함수 타입 정의 (Function Types)함수의 매개변수와 반환값의 타입을 명시할 수 있다.TypeScript는 반환 타입을 추론할 수 있지만, 명시적으로 지정하는 것이 권장된다.기본적인 함수 타입 정의function add(x: number, y: number): number { return x + y;}console.log(add(5, 3)); // 8x와 y는 number 타입을 받으며, 반환 값도 number로 지정되었다.화살표 함수 타입 정의 ((x: number.. 2025. 3. 19.
TypeScript의 타입 시스템 TypeScript의 타입 시스템 기본 타입 (Primitive Types)① string (문자열)let message: string = "Hello, TypeScript!";let username: string = 'John Doe';let greeting: string = `Welcome, ${username}!`;② number (숫자)TypeScript의 숫자 타입은 정수(int), 실수(float), 16진수(hex), 2진수(binary), 8진수(octal) 등을 모두 포함한다.let age: number = 25;let pi: number = 3.14;let hex: number = 0xff; // 16진수let binary: number = 0b1010; // 2진수let octal: .. 2025. 3. 19.
TypeScript 기본 개념 1. TypeScript 기본 개념**TypeScript(TS)**는 Microsoft에서 개발한 JavaScript의 슈퍼셋(Superset)으로, 정적 타입 시스템을 제공하는 언어이다.즉, JavaScript의 기능을 모두 포함하면서도 타입을 명시적으로 지정할 수 있어 코드의 안정성을 높이고 유지보수를 쉽게 만든다.TypeScript를 사용하는 이유:정적 타입 검사 (Static Type Checking)코드 작성 단계에서 타입 오류를 잡아줌 → 런타임 에러 감소자동 완성 및 코드 가이드 (IntelliSense 지원)타입 정보를 기반으로 IDE(예: VS Code)에서 코드 자동 완성 기능 제공가독성 및 유지보수성 향상명확한 타입 명시로 협업 및 리팩토링이 용이함최신 JavaScript 기능 지원E.. 2025. 3. 19.
패키지와 예외처리 1. 패키지(Package)패키지란?관련 있는 클래스와 인터페이스의 묶음.클래스 이름 충돌 방지, 접근 제어, 코드 관리 효율성 증가.Java 프로그램은 계층적 패키지 구조를 가짐.1️⃣ 패키지 선언 및 사용패키지 선언 방법package 패키지명; 를 소스 코드의 최상단에 작성.package com.example.utils; // 패키지 선언public class MyClass { public void sayHello() { System.out.println("Hello from MyClass!"); }}패키지 내 클래스 사용1. 패키지명 포함하여 사용com.example.utils.MyClass obj = new com.example.utils.MyClass();2. impor.. 2025. 3. 18.
제네릭과 람다식 제네릭(Generic)1. 제네릭(Generic)이란?클래스, 인터페이스, 메소드를 정의할 때 **타입 매개변수(타입 파라미터)**를 선언하여 사용.자료형을 한정하여 컴파일 시 타입 검사를 수행 → 오류 방지 & 형변환 불필요.원시 타입(Primitive Type, ex. int, double) 사용 불가 → 대신 Wrapper Class(Integer, Double 등) 사용.제네릭의 장점✔ 여러 유형에 걸쳐 동작하는 일반화된 클래스/메서드 정의 가능✔ 자료형 검사 가능 (컴파일 시 오류 방지)✔ 형변환(Casting) 불필요2. 제네릭 클래스 (Generic Class)클래스 정의에서 타입 파라미터 선언 가능.T는 타입 매개변수(참조형만 가능).class Box { // T 타입 매개변수 p.. 2025. 3. 18.
인터페이스와 다형성 인터페이스와 다형성추상 클래스abstract 포함, 객체 생성 불가, 상속 필수인터페이스100% 추상, implements 필요, 다중 상속 가능다형성부모 타입 = 자식 객체 참조 가능열거형 (Enum)미리 정의된 상수값 집합익명 클래스1회성 클래스중첩 클래스내부 클래스, static / non-static1. 추상 메소드abstract 키워드를 사용몸체 없이 형식만 존재 (반환형, 이름, 매개변수 목록만 선언)자식 클래스가 반드시 구현final과 함께 사용할 수 없음추상 클래스 또는 인터페이스에서 선언예제abstract class Animal { abstract void sound(); // 추상 메서드}class Dog extends Animal { void sound() { System... 2025. 3. 18.
Electron의 디버깅과 최적화, 테스트 자동화 Electron의 디버깅과 최적화Electron 애플리케이션을 개발할 때 디버깅을 효과적으로 수행하고 최적화하여 성능을 개선하는 것이 중요합니다.특히, 메모리 누수를 감지하고, ASAR 압축을 활용하여 패키징 크기를 줄이면 더 나은 성능을 제공할 수 있습니다.1. 개발자 도구 (win.webContents.openDevTools()) 활용Electron에서 Chrome 개발자 도구(DevTools)를 활성화하면 디버깅이 편리합니다.1️⃣ 개발자 도구 열기main.js에서 개발자 도구 자동 실행const { app, BrowserWindow } = require("electron");app.whenReady().then(() => { const win = new BrowserWindow({ widt.. 2025. 3. 18.
Electron의 배포와 업데이트 electron-builder를 사용한 Windows, Mac, Linux 빌드 (.exe, .dmg, .AppImage)electron-builder는 Windows, Mac, Linux에서 실행 가능한 파일을 생성하는 강력한 도구입니다.이를 활용하면 .exe, .dmg, .AppImage 등의 실행 파일을 생성하고 배포할 수 있습니다.즉, electron-builder를 활용하면 멀티 플랫폼용 Electron 애플리케이션을 손쉽게 배포할 수 있습니다!1. electron-builder 설치먼저, 프로젝트에 electron-builder를 설치합니다.npm install electron-builder --save-devElectron 애플리케이션을 패키징하는 electron-builder 패키지를 설치.. 2025. 3. 18.
Electron과 웹 기술 연동 React, Vue, Svelte를 Electron과 함께 사용하기Electron은 HTML, CSS, JavaScript 기반으로 UI를 구성하기 때문에, React, Vue, Svelte 같은 프론트엔드 프레임워크와 쉽게 통합할 수 있습니다.이를 통해 강력한 데스크톱 애플리케이션을 개발할 수 있습니다.Electron과 React, Vue, Svelte는 Vite를 활용하면 쉽게 통합 가능렌더러 프로세스에서 preload.js를 사용하여 보안을 강화해야 함IPC(ipcMain, ipcRenderer)를 활용하여 프레임워크와 Electron을 연결 가능1. Electron + React 설정 및 실행Electron에서 React를 사용하려면 Vite + React 설정 후 Electron과 연동하면 간단.. 2025. 3. 18.
Electron의 보안 문제 Electron의 보안 문제 및 해결 방법Electron 애플리케이션을 만들 때 보안 설정을 제대로 하지 않으면 공격자가 시스템을 완전히 제어할 수 있는 취약점이 발생할 수 있습니다.특히, 렌더러 프로세스에서 Node.js API를 직접 사용할 경우 위험성이 커집니다.보안 위험 요소 (렌더러 프로세스에서 Node.js 사용 시 위험)contextIsolation: true 설정nodeIntegration: false 설정enableRemoteModule: false 설정preload.js를 사용한 안전한 API 제공electron-store를 활용한 안전한 데이터 저장즉, 보안을 강화하면 해커가 Electron 애플리케이션을 악용하는 것을 방지할 수 있습니다!1. 보안 위험 요소 (렌더러 프로세스에서 N.. 2025. 3. 18.

티스토리툴바