Kay's devlog

서론 TypeScript를 더 잘 사용하기 위해 컴파일 하기 위한 설정, 동작방식을 정의하는 tsconfig를 어느 정도 이해할 필요가 있다고 생각한다. Node.js 프로젝트에 TypeScript를 설정하기 위해서 공식문서를 참고하는 것이 가장 정확하겠지만 정보의 양이 방대해서 주요한 몇몇 설정만 정리해 보고자 한다. 앞으로 지식과 경험이 더 넓어지면 내용을 계속 덧붙여 나갈 계획이다. 자세한 설명은 당연히 공식문서를 참조하는 것이 좋겠다. tsconfig.json을 작성하는 것은 옳고 그름의 문제가 아니다. 프로젝트 마다, 팀마다 각각 상황에 맞게 설정하면 되는 것이기 때문에 무조건 따라야 하는 설정은 없다. 잘 모르겠으면 권장하는대로, 기본값대로 사용해도 될 것이다. 다만, 각 프로젝트 마다 성격에..

any vs unknown TypeScript에서 any와 unknown 타입은 용도가 다르기 때문에 구분해야 해야한다. 다음과 같이 User class가 role에 따라 Member, Store로 나뉘는 경우를 보자. Member는 일반 계정으로 주문을 넣을 수 있고, Store는 상점 계정으로 주문을 완료시킬 수 있는 메소드를 갖는다. export abstract class User { id!: number; role!: 'member' | 'store'; } export class Member extends User { constructor({ id, role}: { id: number; role: 'member' }) { super(); this.id = id; this.role = role } ..

서론 ES6+ 이후 class 문법이 지원되면서 prototype을 직접 사용할 일이 드물겠지만, JavaScript 객체를 더 잘 이해하기 위해서는 prototype이 무엇인지 어떻게 동작하는지 어느정도 이해할 필요가 있다. 그래서 이번에는 JavaScript의 prototype에 대해 정리해보고자 한다. Prototype이란? JavaScript에서 prototype은 함수를 정의하자 말자 사용할 수 있는 속성이다. 이 만약 foo라는 함수를 생성하는 경우, foo라는 함수의 속성으로 prototype 이라는 이름의 속성도 함께 생성된다. 이 prototpye 속성은 함수 자체에는 아무런 영향을 미치지 않고, foo를 생성자로 호출(new foo())할 때 생성된 객체는 함수 foo의 속싱인 prot..

서론 TypeScript code는 실행되기 위해 JavaScript code로 필수적으로 변환하는 과정(transpile)이 필요하다. TypeScript는 NodeJS에서 실행할 수 있는 언어가 아니라 JavaScript에 정적 type을 사용할 수 있도록 한 언어이기 때문이다. 이러한 이유로 개인적으로 TypeScript code가 JavaScript code로 어떻게 변환되는지 어느 정도는 이해하는 것이 필요하다고 생각한다. 나는 주로 TypeScript로 백엔드 개발을 하기 때문에 NodeJS를 실행시키는데 JavaScript의 버전 호환성에 크게 민감하지 않지만, 프론트엔드 개발을 한다면 이 부분은 매우 중요할 것이다. 그래서 가끔은 TypeScript Code가 JavaScript Code로..

0. 서론 TypeScipt를 사용할 때 흔히 prettier와 함께 ESLint(TSLint)가 사용된다. 최근까지 TSLint가 TypeScript 전용으로 사용되는 경향이 있었으나 deprecated 작업, ESLint로 migration 작업 중에 있다고 한다. 즉, ESlint가 TypeScript를 지원하도록 작업 중이라고 보면 될 것 같다. 이것에 대해 관심이 있다면 아래 링크를 보도록 하자. The future of TypeScript on ESLint The future of TypeScript on ESLint A couple of weeks ago, the TypeScript team shared their roadmap in which they described formally ad..

0. 서론 요즘 웹 개발자들 사이에서 언어로써는 Typescript가, IDE로써는 VS Studio Code가 많이 사용되는 것 같다. 사실 나 조차도 요즘 많이 사용하고 있는 언어와 환경이다. 이번에는 VS Studio Code IDE 상에서 Typescript 코드 format이 통일성을 유지할 수 있도록 강제하는 prettier(https://prettier.io/)에 대해 정리해 보도록 한다. 코드 format을 강제함으로 통일성을 유지하게 되면, 어느 누구와 협업하더라도 서로 코드를 내가 짠 코드처럼 쉽게 읽을 수 있어 생산성을 높일 수 있다. 가령, A라는 사람은 if ( 1 + 2 === 3 ) { console.log('correct!') } 이렇게 코딩할 수 있고, B라는 사람은 if ..

0. 서론 지난 번 Typescript 맛보기 1(https://kay0426.tistory.com/39?category=822492)에 이어, 이번에는 Typescript로 백엔드 개발환경을 간단히 구축해 보겠다. 백엔드 웹 프레임워크로 Koa(https://koajs.com/)를 사용할 예정이다. 1. Koa란? Koa는 node.js 환경 웹 프레임워크로써 express에 이어 요즘 주목을 받고 있다. 그래서 node.js 백엔드 개발자라면 한 번 쯤은 Koa에 대해 들어봤을 것이고, 못 들어 봤다면 한 번쯤 관심을 가져보는 것도 좋을 듯 하다. Koa 웹페이지에서 다음과 같이 Koa를 소개하고 있다. Koa is a new web framework designed by the team behind..

0. 서론 Typescript 맛보기 1편으로 Typescript를 Javascript로 compile 하는 방법을 알아보자. 1. 간단히 따라해 보기 Typescript는 직접 실행 시킬 수 없기 때문에(불가능 한 것은 아니다) Javascript로 compile 시켜야 코드를 실행시킬 수 있다. 간단히 따라해보면서 Typescript를 Javascript로 Compile 하는 방법을 맛보자. 실습환경은 nodejs만 다룰 줄 알면 된다. a. typescript 설치&설정 typescript를 devDependencies로 설치한다. $ npm i -D typescript // typescript를 devDependencies에 설치 다음을 입력하면 프로젝트 디렉토리에 tsconfig.json이 생성..

this라는 매개변수는 객체지향 프로그래밍 관점에서 중요한 역할을 차지한다고 생각한다. JavaScript에서도 함수, 클래스를 호출할 때 this 매개변수를 사용할 수 있다. 그런데 호출하는 패턴에 따라 각기 this가 다르게 동작한다. 오늘은 각 경우에 따라 this가 어떻게 되는지 살펴본다. this가 호출되는 패턴은 다음과 같이 네 가지가 있는 것 같다 메소드 호출 패턴 함수 호출 패턴 클래스 호출 패턴 apply 호출 패턴 각각의 경우에 대해 this가 어떻게 다른지 자세히 살펴보자. 1. 메소드 호출 패턴 함수를 객체의 속성에 저장하는 경우 이 함수를 메소드라고 부른다. 이 경우는 메소드를 호출할 때, this는 메소드를 포함하고 있는 객체에 바인딩된다. 즉, 흔히 예상하는 것 처럼 this는..

JavaScript는 싱글쓰레드 이벤트 루프 방식으로 동작하기 때문에 동시성을 높이기 위해 최대한 비동기적으로 처리하는 것이 좋다. 시간이 오래 걸리는 어떤 I/O 연산에 의해 코드가 블록되면 그 이후 연산은 수행될 수 없기 때문이다. 웹 브라우저에서 사진을 받기 위해 몇 초를 기다리는 동안 다른 것을 할 수 없는 것을 경험한 적이 있을 것이다. 코드가 블록 되었기 때문이고 이런 부분은 가능하다면 비동기적으로 처리해주는 것이 좋다. 비동기 방식이 보통 더 효율적이지만 동기 방식에 비해 처리가 결코 쉽지않다. 처리 결과가 언제 어떻게 오는지 예측하기 힘들기 때문이다. 이제까지 JavaScript 코드에서 비동기 처리를 위한 여러가지 시도가 있는데 근래 들어서 Promise가 흔히 사용되는 것 같다. 아니 ..