언어/자바스크립트(JavaScript)
-
1. 들어가며JavaScript는 웹 개발의 핵심 언어로서, 복잡한 애플리케이션을 효율적으로 관리하기 위해 모듈 시스템이 필요합니다. 모듈 시스템은 코드의 재사용성과 유지 보수성을 향상시키며, 개발 과정에서 필수적인 요소로 자리 잡았습니다. 이번 글에서는 JavaScript의 두 가지 주요 모듈 시스템인 CommonJS(CJS)와 ES Modules(ESM)를 비교하여 그 특징과 차이점을 알아보겠습니다. 2. CommonJSCommonJS는 2009년 서버 사이드 자바스크립트 개발을 촉진하기 위해 만들어진 모듈 시스템 사양입니다. Node.js가 이 사양을 채택하면서 서버 사이드 JavaScript의 사실상 표준이 되어왔습니다. 작동 방식 CommonJS는 require 함수와 module.exports..
CommonJS와 ES Modules 비교: 현대 JavaScript 모듈 시스템의 이해1. 들어가며JavaScript는 웹 개발의 핵심 언어로서, 복잡한 애플리케이션을 효율적으로 관리하기 위해 모듈 시스템이 필요합니다. 모듈 시스템은 코드의 재사용성과 유지 보수성을 향상시키며, 개발 과정에서 필수적인 요소로 자리 잡았습니다. 이번 글에서는 JavaScript의 두 가지 주요 모듈 시스템인 CommonJS(CJS)와 ES Modules(ESM)를 비교하여 그 특징과 차이점을 알아보겠습니다. 2. CommonJSCommonJS는 2009년 서버 사이드 자바스크립트 개발을 촉진하기 위해 만들어진 모듈 시스템 사양입니다. Node.js가 이 사양을 채택하면서 서버 사이드 JavaScript의 사실상 표준이 되어왔습니다. 작동 방식 CommonJS는 require 함수와 module.exports..
2024.11.26 -
1. 들어가며NPM(Node Package Mangaer)과 YARN(Yet Another Resource Negotiator)은 둘 다 자바스크립트 프로젝트에서 의존성을 관리하기 위해 사용되는 패키지 매니저입니다. (주로 Node.js 기반의 프로젝트에서 사용됩니다.) 이 둘은 같은 목적을 위해 기능을 제공하지만, 성능이나, 특징, 접근 방식에서의 약간씩 차이가 존재합니다. 사실 취향에 따라 사용하는 경우가 많아 새로운 프로젝트를 진행하실 분들이나 현재 프로젝트에서 패키지 관련한 불편함이 있다면 둘 간의 차이를 통해 어떤 것을 사용하는 것이 좋을지에 대해 방향성을 잡아주는 글이 되었으면 좋겠습니다. 2. 설치npm은 Node.js를 설치하면 같이 설치가 됩니다. 그렇기에 추가적인 설치가 필요하지 않습니..
npm과 yarn을 비교한 글1. 들어가며NPM(Node Package Mangaer)과 YARN(Yet Another Resource Negotiator)은 둘 다 자바스크립트 프로젝트에서 의존성을 관리하기 위해 사용되는 패키지 매니저입니다. (주로 Node.js 기반의 프로젝트에서 사용됩니다.) 이 둘은 같은 목적을 위해 기능을 제공하지만, 성능이나, 특징, 접근 방식에서의 약간씩 차이가 존재합니다. 사실 취향에 따라 사용하는 경우가 많아 새로운 프로젝트를 진행하실 분들이나 현재 프로젝트에서 패키지 관련한 불편함이 있다면 둘 간의 차이를 통해 어떤 것을 사용하는 것이 좋을지에 대해 방향성을 잡아주는 글이 되었으면 좋겠습니다. 2. 설치npm은 Node.js를 설치하면 같이 설치가 됩니다. 그렇기에 추가적인 설치가 필요하지 않습니..
2024.11.20 -
1. 들어가며JavaScript에서 에러 핸들링(Error Handling) 작업은 굉장히 유연하지만, 양날의 검과도 같습니다. 사실 에러 핸들링을 전혀 사용하지 않고도 굉장히 규모가 있는 서비스를 구현하는 경우도 많이 있습니다. 임의로 거대한 코드 블록을 try-catch 블록으로 감싸서 모든 잠재적 오류를 한 번에 처리할 수 있는 것이죠. 하지만 그러면 어떻게 될까요? 물론 코드 작성이야 빨라지겠지만, 견고함이 떨어지고 에러의 명확도가 떨어져 디버깅하기도 더 어렵습니다. 그리고 이러한 현상은 코드의 규모가 커지면 커질수록 더 강조되는 문제이죠. 이번 포스팅에서는 TypeScript와 ESLint를 활용하여 보다 명시적인 에러 핸들링을 처리하는 방법에 대해 공유하고자 합니다. 일단, 그 전에 먼저 자바..
[JavaScript] JavaScript에서 우아하게 에러 핸들링(Error Handling)하기 (try-catch)1. 들어가며JavaScript에서 에러 핸들링(Error Handling) 작업은 굉장히 유연하지만, 양날의 검과도 같습니다. 사실 에러 핸들링을 전혀 사용하지 않고도 굉장히 규모가 있는 서비스를 구현하는 경우도 많이 있습니다. 임의로 거대한 코드 블록을 try-catch 블록으로 감싸서 모든 잠재적 오류를 한 번에 처리할 수 있는 것이죠. 하지만 그러면 어떻게 될까요? 물론 코드 작성이야 빨라지겠지만, 견고함이 떨어지고 에러의 명확도가 떨어져 디버깅하기도 더 어렵습니다. 그리고 이러한 현상은 코드의 규모가 커지면 커질수록 더 강조되는 문제이죠. 이번 포스팅에서는 TypeScript와 ESLint를 활용하여 보다 명시적인 에러 핸들링을 처리하는 방법에 대해 공유하고자 합니다. 일단, 그 전에 먼저 자바..
2024.11.18 -
1. 들어가기에 앞서순수 자바스크립트에 비해 뛰어난 생산성 향상을 가져다 주는 타입스크립트는 정적 타입을 명시함으로써 코드 자동 완성이나 잘못된 변수/함수 사용에 대한 사전 에러 알림을 통해 코드 디버깅을 매우 쉽게 만들어준다. 이러한 타입스크립트에는 "타입"을 정의하는 데 두 가지 방식이 존재한다: "types"와 "interfaces" 많은 사람들이 두 키워드의 차이를 느끼지 못하고 나 역시도 타입스크립트를 사용함에 있어서 어떠한 사용 기준 없이 두 키워드를 혼용해서 사용하곤 했었다. 하지만 사용할수록 점점 나만의 규칙들이 생겨나는 것을 느낄 수 있었고 이를 조금 더 명확히 해서 코드를 작성할 때 일관성을 지키고 싶어 많은 글들을 찾아보게 되었고 이번 기회에 이에 대한 회고를 이 포스팅에 남겨보려고 ..
[TypeScript] 타입스크립트 interface vs. type1. 들어가기에 앞서순수 자바스크립트에 비해 뛰어난 생산성 향상을 가져다 주는 타입스크립트는 정적 타입을 명시함으로써 코드 자동 완성이나 잘못된 변수/함수 사용에 대한 사전 에러 알림을 통해 코드 디버깅을 매우 쉽게 만들어준다. 이러한 타입스크립트에는 "타입"을 정의하는 데 두 가지 방식이 존재한다: "types"와 "interfaces" 많은 사람들이 두 키워드의 차이를 느끼지 못하고 나 역시도 타입스크립트를 사용함에 있어서 어떠한 사용 기준 없이 두 키워드를 혼용해서 사용하곤 했었다. 하지만 사용할수록 점점 나만의 규칙들이 생겨나는 것을 느낄 수 있었고 이를 조금 더 명확히 해서 코드를 작성할 때 일관성을 지키고 싶어 많은 글들을 찾아보게 되었고 이번 기회에 이에 대한 회고를 이 포스팅에 남겨보려고 ..
2024.05.08 -
디자인 패턴들은 소프트웨어 디자인 과정에서 자주 발생하는 문제들에 대한 일반적인 해결책들입니다. 이는 우리의 코드에서 반복적으로 되풀이되는 디자인 문제들을 해결하기 위하여 맞춤화할 수 있는 청사진(blueprint)들을 미리 만들어 놓은 것이라고 보면 됩니다. 우리는 JavaScript로 백엔드 애플리케이션을 구축할 때 Node.js를 많이 사용하곤 하는데요. 최근에 이를 지원하는 프레임워크인 NestJS는 객체지향 프로그래밍을 기반으로 구성하기 때문에 객체지향에서 사용되는 많은 아키텍처와 디자인 패턴들을 차용합니다. 하지만 아직 JavaScript을 사용하여 디자인 패턴을 설명하는 글은 많지 않았는데 최근에 좋은 글을 발견하여 이에 대해 공부한 내용을 바탕으로 작성한 포스팅이 되겠습니다. 원글: htt..
[JavaScript] 자바스크립트 Node.js로 알아보는 디자인 패턴들(Design Patterns in JavaScript)디자인 패턴들은 소프트웨어 디자인 과정에서 자주 발생하는 문제들에 대한 일반적인 해결책들입니다. 이는 우리의 코드에서 반복적으로 되풀이되는 디자인 문제들을 해결하기 위하여 맞춤화할 수 있는 청사진(blueprint)들을 미리 만들어 놓은 것이라고 보면 됩니다. 우리는 JavaScript로 백엔드 애플리케이션을 구축할 때 Node.js를 많이 사용하곤 하는데요. 최근에 이를 지원하는 프레임워크인 NestJS는 객체지향 프로그래밍을 기반으로 구성하기 때문에 객체지향에서 사용되는 많은 아키텍처와 디자인 패턴들을 차용합니다. 하지만 아직 JavaScript을 사용하여 디자인 패턴을 설명하는 글은 많지 않았는데 최근에 좋은 글을 발견하여 이에 대해 공부한 내용을 바탕으로 작성한 포스팅이 되겠습니다. 원글: htt..
2024.03.08 -
자바스크립트는 웹 개발에서 광범위하게 사용되는 다재다능하고 강력한 프로그래밍 언어입니다. 자바스크립트의 고유한 기능 중 하나인 클로저는 매우 강력한 기능을 제공하지만 이를 처음 접했을 때는 다소 이해하기 어려울 수 있는 개념입니다. 이 글에서는 자바스크립트 클로저의 작동 방식과 사용하는 예제를 살펴보면서 자바스크립트 클로저의 세계에 대해 자세히 알아보는 시간을 가져볼 것입니다. 1. 함수 스코프(Function scope) 자바스크립트에서 변수와 함수에는 프로그램 내에서 액세스할 수 있는 위치를 결정하는 특정 '범위(scope)'가 있습니다. 이는 코드를 작성하고 구성하는 방법뿐만 아니라 문제를 디버깅하고 성능을 최적화하는 방법에도 영향을 줄 수 있습니다. 함수 스코프는 JavaScript의 가장 기본적..
[JavaScript] 함수 스코프(Function Scope)와 클로저(Closure)자바스크립트는 웹 개발에서 광범위하게 사용되는 다재다능하고 강력한 프로그래밍 언어입니다. 자바스크립트의 고유한 기능 중 하나인 클로저는 매우 강력한 기능을 제공하지만 이를 처음 접했을 때는 다소 이해하기 어려울 수 있는 개념입니다. 이 글에서는 자바스크립트 클로저의 작동 방식과 사용하는 예제를 살펴보면서 자바스크립트 클로저의 세계에 대해 자세히 알아보는 시간을 가져볼 것입니다. 1. 함수 스코프(Function scope) 자바스크립트에서 변수와 함수에는 프로그램 내에서 액세스할 수 있는 위치를 결정하는 특정 '범위(scope)'가 있습니다. 이는 코드를 작성하고 구성하는 방법뿐만 아니라 문제를 디버깅하고 성능을 최적화하는 방법에도 영향을 줄 수 있습니다. 함수 스코프는 JavaScript의 가장 기본적..
2024.02.07 -
1. 데코레이터 1-1. Decorator Pattern (데코레이터 패턴) 데코레이터는 무엇일까요? 파이썬을 해 보신 분들은 아시겠지만 파이썬에서 데코레이터는 고차 함수를 호출하기 위한 매우 간단한 구문을 제공합니다. 파이썬 데코레이터는 다른 함수를 받아 명시적으로 수정하지 않고도 후자의 함수의 동작을 확장하는 함수입니다. 파이썬에서 가장 간단한 데코레이터는 다음과 같이 보일 수 있습니다: 저 맨 위에 붙어 있는 것(`@mydecorator`)이 데코레이터이며, ES2016(ES7)에서도 크게 달라지지 않습니다. '@'는 Parser(파서)에게 데코레이터를 사용 중임을 알리게 위해 표시하는 것이며, mydecorator는 해당 이름으로 함수를 참조합니다. 데코레이터는 인자(데코레이션되는 함수)를 받아 ..
[JavaScript] 데코레이터 (Decorator)1. 데코레이터 1-1. Decorator Pattern (데코레이터 패턴) 데코레이터는 무엇일까요? 파이썬을 해 보신 분들은 아시겠지만 파이썬에서 데코레이터는 고차 함수를 호출하기 위한 매우 간단한 구문을 제공합니다. 파이썬 데코레이터는 다른 함수를 받아 명시적으로 수정하지 않고도 후자의 함수의 동작을 확장하는 함수입니다. 파이썬에서 가장 간단한 데코레이터는 다음과 같이 보일 수 있습니다: 저 맨 위에 붙어 있는 것(`@mydecorator`)이 데코레이터이며, ES2016(ES7)에서도 크게 달라지지 않습니다. '@'는 Parser(파서)에게 데코레이터를 사용 중임을 알리게 위해 표시하는 것이며, mydecorator는 해당 이름으로 함수를 참조합니다. 데코레이터는 인자(데코레이션되는 함수)를 받아 ..
2024.02.04