이재윤의 블로그
취소

타입 선언 파일 (Type Definition File)

💻 타입 선언 파일 (Type Definition File) 이란? .d.ts 라는 확장자를 가진 파일로, 값이나 함수등의 구현없이 타입이나 값의 존재를 선언하는 방법을 제공합니다. .ts 확장자를 가진 파일은 ‘구현’ 파일로 타입과 실행가능한 코드 모두를 포함할 수 있으며, 컴파일시 JavaScript 파일로 변환됩니다. 반면에 타입 선언 파일의 ...

Namespace

💻 Namespace 란? TypeScript 에서 코드를 논리적인 단위로 묶어주는 역할을 합니다.코드를 묶어줌으로써, 캡슐화 및 모듈화를 적용할 수 있고 이를 통해 이름 충돌(name collision)을 피할 수 있습니다. namespace 를 통한 모듈화는 실행 환경에 따른 모듈시스템에 영향을 받지 않습니다. 즉 namespace 를 컴파일한 ...

Typescript Module Resolution

💻 Module Resolution 이란? Module Resolution (모듈 해석)은 TypeScript 컴파일러가 import 문에서 어떤것을 참조하는지 알아내기 위해 사용하는 프로세스를 의미합니다. 💻 Module Resolution Strategy 임포트한 모듈의 경로의 유형(상대적 모듈 VS 비-상대적 모듈) 따라 컴파일러가 모듈을 ...

first-child/last-child vs first-of-type/last-of-type

pseudo-class는 selector옆에 콜론(:)과 함께 추가되며 주로 선택된 요소의 상태에 따른 스타일을 지정하기 위해 사용됩니다. 이글에서는 pseudo-class의 여러 종류중 first-child/last-child를 알아보고 그와 비슷한 first-of-type/last-of-type과의 차이점을 살펴보겠습니다. 💻 first-chil...

TSConfig 파일 옵션 살펴보기

💻 TSConfig 파일이란? TypeScript가 실행되기 위해서는 JavaScript로 사전에 컴파일(트랜스파일이 좀 더 맞지만 컴파일이란 용어를 사용하겠습니다.)되어야 합니다. 이 단계에서 사용되는 옵션들을 json 형식으로 작성한 파일이 TSConfig 파일입니다. TSConfig 파일에서 사용되는 옵션들은 CLI의 플래그로 지정해 사용할 수...

모듈 시스템

💻 모듈이란? 모듈이란 특정한 목적을 가진 복수의 함수나, 클래스, 변수등으로 구성된 파일을 지칭합니다. 특히 JavaScript에서는 명시적으로 global scope에 선언하지 않는한 global scope를 오염시키지 않는 값들을 선언한 파일이라고 할 수도 있습니다. 💻 Script vs Module 👨‍💻 Script script 파일은...

void

💻 void란? void는 값을 반환하지 않는 함수의 리턴값을 의미합니다. 함수에 return문이 없거나 명시적으로 값을 반환하지 않을때 추론되는 타입입니다. 💻 void 반환 타입으로의 문맥적 타이핑 void 반환 타입으로의 문맥적 타이핑이란, void 반환 타입을 가지는 함수 타입 표현식이나, 함수 호출 시그니처와 같은 것을 의미합니다. ...

JavaScript Engine

컴퓨터는 우리가 작성한 JavaScript 파일을 이해하지 못합니다. 따라서 위 그림처럼 JavaScript Engine이 JavaScript 파일을 컴퓨터가 이해할 수 있는 형태로 변환시켜 줍니다. JavaScript Engine의 종류는 다양하지만 그 중 크롬 브라우저에서 사용되는 V8 엔진을 예시로 JavaScript Engine을 살펴보겠습...

npm 패키지 버전

npm 패키지들의 버전은 package.json 파일에서 dependencies 나 devDependencies 프로퍼티 하위의 객체로 관리되고 있습니다. 이 패키지들의 버전 표현 방식과 특정 버전을 설치할 수 있는 방법을 알아보겠습니다. 💻 Semantic Version Convention npm 패키지의 버전은 semver (semantic v...

Proxy

💻 Proxy란? Proxy는 객체를 감싸 객체에 대한 기본 작업을 가로채고 재정의하는 객체입니다. 가로채진 작업은 위의 왼쪽과 그림과 같이 원래 객체가 처리하도록 그대로 전달 되거나, 오른쪽 그림과 같이 Proxy 객체 자체에서 처리되기도 합니다. Proxy를 활용한 대표적인 프레임워크는 Vue3로, reactivity를 구현하기위해 Prox...

웹뷰에서 모바일 기기 판별하기

💻 개요 모바일 웹을 구현하다 보면, 현재 사용자가 모바일 기기로 접속했는지를 판별해 분기처리를 해야하는 경우가 생깁니다. 이 때 사용할 수 있는 네가지 방법을 살펴보겠습니다. 💻 userAgent 가장 많이 알려져 있고, 또 가장 많이 사용하는 방법은 navigator.userAgent를 사용하는 것 입니다. console.log(naviga...

DI의 세가지 방법

DI는 DI와 Ioc글에서 살펴보았듯이 객체를 외부에서 생성해 주입하는 것을 의미합니다. 이 글에서는 Spring에서 사용할 수 있는 DI의 세가지 방법에 대해 알아보겠습니다. 💻 Constructor Injection (생성자 주입) 클래스의 생성자를 통해 의존성을 주입하는 방법입니다. 이 방법은 생성자 파라미터에 주입할 의존성 객체를 명시해주게...

일렉트론 Main Process - Browser Window

Main Process에서 browser window(renderer process, 창)를 생성하고 제어하는 역할을 합니다. browser window는 app의 ready 이벤트가 실행되기 전까지 생성될 수 없습니다. 또한 app 모듈과 같이 Event Emitter를 상속 받았기 때문에 다양한 이벤트들을 수신할 수 있습니다. BrowserWind...

REST API

💻 REST API란? REST란 (Representational State Transfer)의 약자로, 주고받는 자원(resource)에 이름을 규정하고 URI에 명시해 HTTP 메서드를 통해 해당 자원의 상태를 주고받는 것을 의미합니다. REST API는 REST 아키텍처를 따르는 시스템/에플리케이션 인터페이스라고 볼 수 있습니다. REST 아...

Spring annotation

💻 @ComponentScan @Component 시리즈 어노테이션 (@Controller, @RestController, @Service, @Repository, @Configuration 등)이 붙은 클래스를 발견해 빈(bean)에 등록하는 역할을 합니다. 💻 @Component 작성한 class를 bean으로 등록하는 역할을 합니다. 💻 ...