본문 바로가기

JavaScript & TypeScript33

Node.js와 TypeScript에서 환경 변수 관리 TypeScript를 사용하는 Node.js 프로젝트에서 환경 변수를 관리하는 것은 JavaScript와 유사하지만, 타입 안전성을 확보하는 것이 추가적인 고려 사항입니다. 여기서는 TypeScript 환경에서 환경 변수를 어떻게 관리하고, 이를 안전하게 사용하는지에 대해 살펴보겠습니다.1. TypeScript 프로젝트에서 환경 변수 사용하기TypeScript에서 process.env를 사용할 때 기본적으로 모든 환경 변수가 string | undefined 타입을 가집니다. 이는 타입 안정성을 보장하지 않으므로, 이를 명시적으로 정의하는 것이 중요합니다.// app.tsrequire("dotenv").config();const port: number = parseInt(process.env.PORT |.. 2024. 12. 17.
Node.js와 Express에서 JSON 처리하기 Node.js에서 JSON 처리는 매우 중요한 주제입니다. 많은 웹 애플리케이션에서 JSON을 사용하여 클라이언트와 서버 간의 데이터 교환을 수행하기 때문입니다. 이번 글에서는 JSON의 기본 개념부터 Node.js에서 JSON을 다루는 방법까지 상세하게 다루겠습니다. 1. JSON이란?JSON(JavaScript Object Notation)은 2001년 Douglas Crockford에 의해 개발된 경량의 데이터 교환 형식입니다. XML의 복잡성과 과도한 오버헤드를 해결하기 위해 만들어졌으며, JavaScript의 객체 표기법에서 영감을 받았습니다.JSON의 주요 장점은 다음과 같습니다:간결성: 데이터를 표현하는 방식이 단순하고 직관적입니다.가독성: 사람이 읽고 이해하기 쉬운 텍스트 기반 형식입니다... 2024. 12. 10.
Express.js에서 CORS 처리 방법 웹 애플리케이션을 개발하다 보면, 다른 도메인에서 API를 호출해야 하는 상황이 자주 발생합니다. 그러나 웹 보안 정책인 SOP(Same-Origin Policy)에 의해 다른 출처의 리소스에 접근하는 것이 제한됩니다. 이러한 상황에서 CORS (Cross-Origin Resource Sharing)가 등장하며, 이를 통해 웹 브라우저가 안전하게 다른 도메인의 리소스에 접근할 수 있게 해줍니다. 이번 글에서는 CORS에 대한 기본적인 이해와 함께 Express.js에서 CORS를 처리하는 방법에 대해 자세히 알아보겠습니다.CORS란?CORS (Cross-Origin Resource Sharing)는 한 웹 페이지가 자신의 도메인과 다른 도메인에 있는 리소스에 접근할 수 있도록 허용하는 메커니즘입니다. 이.. 2024. 12. 3.
Express.js HandlerInterceptor: 개념 소개 HandlerInterceptor는 Express.js의 기본 기능은 아니지만, 미들웨어와 핸들러 래퍼를 사용하여 인터셉터와 유사한 동작을 구현할 수 있습니다. 이를 통해 요청이 컨트롤러에 도달하기 전과 응답이 준비된 후에 요청을 가로채는 기능을 구현할 수 있으며, 전처리, 후처리, 오류 처리 등의 작업을 수행할 수 있습니다.Middleware와 HandlerInterceptor의 차이점특징MiddlewareHandlerInterceptor실행 방식라우트에 걸쳐 순차적으로 실행전처리와 후처리를 제공적용 범위전역 또는 특정 라우트에 적용 가능특정 핸들러에 밀접하게 연결사용 사례로깅, 인증, 파싱 등의 일반 작업요청/응답 변환, 예외 처리 등Express.js에서 HandlerInterceptor 구현하기E.. 2024. 11. 26.
CI 환경에서 `npm ci` 명령어를 사용해야 하는 이유 CI(Continuous Integration) 환경에서 의존성 관리는 매우 중요한 부분입니다. CI 환경에서 안정적이고 예측 가능한 빌드를 만들기 위해 npm install 대신 npm ci를 사용하는 것이 일반적입니다. 이번 글에서는 npm ci 명령어의 필요성, 차이점, 그리고 이를 사용하지 않을 때 발생할 수 있는 문제점에 대해 상세히 알아보겠습니다.1. npm install과 npm ci의 차이점먼저 npm install과 npm ci의 차이점에 대해 이해해야 합니다.1.1 npm installnpm install은 우리가 일반적으로 로컬 개발 환경에서 사용하는 명령어입니다. package.json 파일에 명시된 패키지를 설치하며, 필요 시 새로운 버전의 패키지를 설치하거나 package-loc.. 2024. 11. 25.
Express.js 미들웨어의 역할 (TypeScript 버전) Express.js는 Node.js를 기반으로 하는 웹 프레임워크로, 라우팅, 미들웨어 관리, 요청 및 응답 처리 등의 기능을 제공합니다. 그중 미들웨어는 Express.js의 핵심 개념으로, 애플리케이션의 요청-응답 주기에 관여하는 코드 조각입니다. 이 글에서는 미들웨어의 역할, 종류, 그리고 TypeScript로 미들웨어를 작성하는 방법에 대해 자세히 알아보겠습니다.1. 미들웨어란 무엇인가?미들웨어는 HTTP 요청과 응답 사이에서 특정 작업을 수행하는 함수입니다. 클라이언트 요청이 들어오면 미들웨어는 이를 처리하고 다음 단계로 넘어가거나 응답을 종료할 수 있습니다. 미들웨어는 아래와 같은 특징을 가집니다.요청 및 응답 객체에 접근: req, res 객체를 통해 요청 데이터와 응답을 조작할 수 있습니다.. 2024. 11. 19.
JavaScript 모듈 시스템: export와 export default의 차이점 및 사용법 JavaScript에서 export default와 export는 모듈 시스템에서 매우 중요한 개념입니다. 이 글에서는 이 두 가지 방식의 차이점, 각각의 사용 방법, 그리고 다양한 예제와 함께 관리 측면에서 어떤 방식이 더 적절한지 알아보겠습니다.1. export와 export default의 기본 개념exportexport는 모듈에서 여러 가지 변수를 내보낼 때 사용합니다. 이 방식은 하나의 파일에서 여러 개의 함수를, 변수를, 혹은 클래스를 내보낼 수 있도록 해줍니다.예시:// mathUtils.jsexport const add = (a, b) => a + b;export const subtract = (a, b) => a - b;해당 모듈을 가져올 때는 다음과 같이 사용합니다.// main.jsi.. 2024. 11. 12.
Volta - 프로젝트 별 node 관리 자바스크립트와 타입스크립트 개발에서 중요한 요소 중 하나는 개발 환경의 일관성 입니다. 특히, Node.js와 같은 런타임 버전 관리나 npm 및 yarn과 같은 패키지 매니저의 버전 관리는 프로젝트의 성공적인 유지보수와 배포에 매우 중요한 역할을 합니다. 개발 환경이 프로젝트에 맞지 않거나 의존성 문제로 인해 개발 속도가 지연되는 경우가 빈번한데, 이를 해결하기 위한 도구로 Volta 가 등장했습니다.이 글에서는 Volta의 개념, 주요 기능, 설치 및 사용법, 그리고 왜 현대 JavaScript 및 TypeScript 개발자들에게 필수 도구인지에 대해 깊이 있게 알아보겠습니다.1. Volta란 무엇인가?Volta 는 JavaScript 개발 환경에서 필수적으로 사용되는 Node.js와 패키지 매니저 .. 2024. 11. 11.
require와 import의 차이점: JavaScript 모듈 시스템 비교 require와 import는 JavaScript와 TypeScript에서 모듈을 가져오는 데 사용되는 두 가지 주요 방법입니다. 이 두 방법은 모듈 시스템과 환경에 따라 동작 방식과 특징이 달라지며, 각각의 장단점과 사용 사례가 있습니다. 이번 글에서는 require와 import의 차이를 상세히 비교하고 어떤 상황에서 어떤 방식을 사용해야 하는지 알아보겠습니다.1. 기본적인 개념requirerequire는 CommonJS 모듈 시스템의 일부이며, Node.js 환경에서 주로 사용됩니다.동기적으로 모듈을 로드합니다. 이는 코드가 require 문을 만나면 해당 모듈의 로딩이 완료될 때까지 다음 코드의 실행을 멈추고 기다린다는 의미입니다. 예를 들어:require 문을 만납니다.요청된 모듈을 찾고 로드합.. 2024. 11. 5.
JavaScript 변수 선언의 모든 것: var, let, const의 차이점과 올바른 사용법 var, let, const는 모두 자바스크립트에서 변수를 선언하는 데 사용되는 키워드입니다. 하지만 각 키워드는 서로 다른 특성과 동작 방식을 가지고 있으며, 이를 적절히 사용하는 것이 코드의 가독성과 유지 보수성에 큰 영향을 미칩니다. 이번 글에서는 var, let, const의 차이점과 그 사용 시점, 그리고 각 키워드의 장단점에 대해 자세히 알아보겠습니다.1. var의 특징1.1. 함수 스코프(Function Scope)var로 선언된 변수는 함수 스코프를 따릅니다. 이는 변수가 선언된 함수 내에서만 접근 가능하다는 뜻입니다. 블록(예: if, for 등) 내부에서 var로 변수를 선언하더라도 해당 블록 외부에서 접근이 가능합니다. 예를 들어:function example() { if (true.. 2024. 10. 29.
비동기 처리: 콜백, 프로미스, 그리고 async/await (TypeScript) 비동기 처리(asynchronous processing)는 자바스크립트 및 TypeScript에서 필수적인 개념으로, 시간 소요가 긴 작업(예: 네트워크 요청, 파일 읽기 등)을 처리할 때 사용됩니다. 프로그램이 해당 작업을 기다리지 않고 다른 작업을 수행할 수 있게 함으로써 효율성을 높입니다. 이번 글에서는 TypeScript를 사용한 비동기 처리 방식으로 콜백, 프로미스, 그리고 async/await에 대해 설명하겠습니다.1. 콜백 (Callback)1.1 콜백의 정의콜백은 비동기 작업이 완료된 후 실행할 함수를 다른 함수에 전달하는 방식입니다. 이 방식은 비동기 작업의 완료 여부에 따라 호출되는 함수를 지정합니다.1.2 콜백의 예시 (TypeScript)import { readFile } from .. 2024. 10. 22.
JavaScript의 내장함수 - every() JavaScript의 every 함수는 배열 내 모든 요소가 특정 조건을 만족하는지 검사할 때 사용되는 유용한 고차 함수입니다. 이 글에서는 every 함수의 개념, 작동 방식, 적절한 사용 예시, 그리고 실제 프로젝트에서 유용한 활용법을 설명합니다.1. every 함수란?every 함수는 배열의 모든 요소가 주어진 조건을 만족하는지 검사합니다. 검사하는 과정에서 하나라도 조건을 만족하지 않으면 false를 반환하고, 모든 요소가 조건을 만족하면 true를 반환합니다.const isAllPositive = [1, 2, 3, 4].every((num) => num > 0);console.log(isAllPositive); // true위의 예시에서 모든 요소가 0보다 크므로 every 함수는 true를 반.. 2024. 10. 12.
JavaScript의 내장 함수 - match() JavaScript에서 문자열을 다루는 작업은 매우 빈번하게 발생합니다. 특히 특정 패턴을 찾거나, 문자열에서 일치하는 값을 추출하는 작업이 중요합니다. match() 함수는 이러한 작업을 수행하는 대표적인 메서드로, 정규 표현식(regular expression)과 결합하여 강력한 기능을 제공합니다. 이번 글에서는 match() 함수의 기본 개념과 다양한 예시를 통해 이를 깊이 있게 살펴보겠습니다.1. match() 함수란?match() 함수는 문자열에서 특정 패턴을 찾고, 그 결과를 배열로 반환합니다. 이때, 찾는 패턴은 정규 표현식으로 표현되며, 정규 표현식의 플래그 설정에 따라 결과가 달라질 수 있습니다. 기본적으로 match() 함수는 일치하는 값을 찾으면 해당 값만 배열로 반환하고, 찾지 못하.. 2024. 10. 11.
JavaScript의 내장 함수 - test() JavaScript의 test 함수는 정규 표현식(Regular Expression)을 사용하여 문자열이 특정 패턴과 일치하는지를 확인하는 데 유용한 함수입니다. 이 글에서는 test 함수의 기본적인 사용 방법, 실제 예시, 다양한 패턴 매칭, 그리고 이를 활용한 실전 테스트 시나리오를 다룰 것입니다.1. test 함수란?test 함수는 JavaScript에서 정규 표현식을 활용하여 문자열을 검사할 때 사용됩니다. 이 함수는 RegExp 객체의 메서드로, 인수로 주어진 문자열이 해당 정규 표현식과 일치하는지 여부를 확인하고, 결과로 true 또는 false를 반환합니다.기본 구문const regex = /pattern/;regex.test(string);여기서 pattern은 찾고자 하는 패턴이고, st.. 2024. 10. 9.
싱글톤 패턴 이해하기: 리소스 관리부터 테스트 개선까지 소프트웨어 디자인 패턴 중 하나인 싱글톤 패턴(Singleton Pattern)은 애플리케이션 내에서 클래스의 인스턴스를 하나만 생성하도록 보장하는 패턴입니다. 이 패턴은 주로 데이터베이스 연결, 설정 파일 관리, 로그 처리 등과 같이 리소스를 효율적으로 관리해야 하는 상황에서 사용됩니다. 하지만 싱글톤 패턴은 테스트의 독립성을 해칠 수 있는 단점도 가지고 있습니다. 이번 글에서는 싱글톤 패턴의 개념, 장단점, 그리고 의존성 주입(Dependency Injection)을 통해 어떻게 이러한 단점을 극복할 수 있는지 살펴보겠습니다.싱글톤 패턴이란?싱글톤 패턴은 특정 클래스의 인스턴스가 프로그램 내에서 오직 하나만 존재하도록 보장하는 디자인 패턴입니다. 이는 전역적으로 접근 가능한 인스턴스를 제공하여, 여러.. 2024. 10. 8.

티스토리툴바