본 포스트는 TypeScript v4.1.2를 기반으로 하고, TypeScript Handbook v2 beta: Narrowing을 참고하여 작성하였습니다.

JavaScript 혹은 TypeScript로 프로그래밍을 할 때, 그 코드에 있는 로직을 보고 ‘이건 boolean 타입일 것이다.’ 혹은 ‘이건 절대 string 타입은 아닐 것이다.’ 라고 예측할 수 있는 상황이 있습니다.

위 코드 중 sound() 함수에서 에러가 날 만한 부분을 찾아봅시다.

14번째 줄부터 18번째 줄까지는 animal의 타입은 Dog일 것이고, 19번째 줄부터 23번째 줄까지는 animal의 타입이 Cat일 것으로 보입니다. 그래서 16번째 줄 …

이 포스트는 2020년 10월 4일 기준 TypeScript의 최신 버전인 4.0.2 버전에 기반하여 작성하였습니다.

타입스크립트를 이용해 개발하다가 보면 반드시 마주치는 문제가 있습니다. 바로 ‘Type Alias와 Interface 둘 중 어느 것을 사용해 타입을 정의할까?’ 라는 문제입니다.

이번 포스트에서는 두 키워드 간의 차이를 알아보고, TypeScript 팀에서 권장하는 방법까지 간단하게 알아보겠습니다.

Type Alias와 Interface의 공통점

타입에 대한 이름 지어주기

Type Alias 와 Interface 둘 다 타입에 대해 비슷한 방식으로 이름을 지어줄 수 있습니다.

(제한적으로) 여러 타입에 대한 관계 정의

Type Alias 와 Interface 둘 다, Interface에 대한 extends와 Clas …

Typed JavaScript at Any Scale. TypeScript extends JavaScript by adding types.

위 문장은 타입스크립트 홈페이지에서 제일 처음 보이는 두 문장입니다. 문장 그대로, 타입스크립트는 자바스크립트의 확장판이며 어떤 규모의 자바스크립트에서도 사용할 수 있습니다.

그런데 우린 타입스크립트를 왜 사용하는 걸까요?

예측 불가능한 자바스크립트

타입스크립트의 장점에 대해 설명하기 전에, 먼저 자바스크립트가 가진 문제점들에 대해 알아보려고 합니다.

이 코드는 작동하는 코드지만, 문제점이 있습니다.

Problem 1의 코드는 원하지 않는 값인 NaN이 나왔습니다. 자바스크립트의 객체는 기본적으로 존재하지 않는 프로퍼 …

안녕하세요. 휴먼스케이프 Frontend Software Engineer 남현욱입니다.

이번 포스트에서는 Facebook에서 만든 React 상태 관리 라이브러리, Recoil에 대해 알아보려고 합니다.

React에서의 상태 관리

복잡한 React 웹 앱에서는 상태 관리가 개발자의 주요 과제이자 어려운 작업으로 여겨지고 있습니다. 어떤 하나의 상태 변경이 하나 이상의 다른 컴포넌트에 영향을 끼칠 수 있기 때문입니다.

예를 들어, 인스타그램을 클론 코딩한다고 가정하면 ‘좋아요' 동작을 취하는 순간 다른 곳에 많은 영향을 끼칩니다.

• 해당 사진의 좋아요 개수 1 증가
• 해당 사진을 업로드한 유저에게 알림 보내기
• 해당 사진에 좋아요를 누른 유저 기록
• 기타 등등..

이렇듯 하나의 변경이 단순하게 하나의 변경으로 끝나지 않는 경우가 많아서 Redux, MobX와 같은 상태 관리 라이브러리가 등장하게 되었습니다 …

휴먼스케이프 Frontend Software Engineer Henry입니다.

함수를 기획하고 작성하는 것부터, 실제 사용하기까지 어떤 방식으로 진행하고 있나요? 이번 포스트에서는 함수를 작성하는 것에 초점을 맞춰서 JavaScript에서 좋은 함수를 작성하기 위한 방법과 약간의 활용 방법에 대해 알아보겠습니다.

순수 함수

아래 두 조건을 만족하는 함수를 순수 함수라고 합니다.

• 동일한 인자를 주었을 때 항상 동일한 값을 반환한다.
• 부수 효과가 없다.

순수 함수로 작성한 코드는 함수를 그저 재사용하기만 하면 되기 때문에, 모듈성이 높아지고 쉬운 디버깅과 테스트가 가능합니다.

순수 함수는 여기에서 더 자세하게 알아볼 수 있습니다.

예시

현재 디바이 …

휴먼스케이프 Frontend Software Engineer Henry입니다.

이번 포스트에서는 이전에 만들었던 휴먼톡톡을 새로운 버전으로 업데이트한 배경과 업데이트 후기를 알려드리려고 합니다.

1.0 그 이후

휴먼톡톡을 만들고 난 후, 몇 개월간 계속 사용하며 제가 유지보수하는 환경이 조성되었습니다. 하지만 그 과정에서는 불편한 점 및 개선점도 하나둘 생겨나게 되었습니다.

휴먼스케이프 Frontend Software Engineer 남현욱입니다.

함수형 프로그래밍이란 말을 들어보신 적이 있나요? 꽤 오래 전(1930년대)에 나온 개념이지만, 최근들어 개발자 진영에서 높은 관심을 보이고 있습니다. 점점 더 복잡해지는 프로그램 속에서, “어떻게 하면 더 간결하면서도 안전한 프로그램을 만들 수 있을까?” 에 대한 질문 속에서 비롯되었습니다.

사실 한국에서는, 여기저기서 정말 좋다는 이야기만 들어보는 데에서 그치고 배우거나 사용하는 곳을 많이 보지 못했습니다. 아티클도 많이 안 보이고, 혹은 개인이 정말 열심히 배우더라도 실제 프로덕트에 적용하거나 하는 곳도 많이 보이지 않습니다.

그래서 휴먼 …

안녕하세요. 휴먼스케이프 Frontend Software Engineer 남현욱입니다.

이번 포스트에서는 SOLID 법칙 중 인터페이스 분리 원칙, 리스코프 치환 원칙, 의존성 역전 원칙에 대해 알아보도록 하겠습니다.

이 포스트의 모든 코드는 TypeScript로 작성합니다.

인터페이스 분리 원칙 (Interface Segregation Principle)

“구현체 스스로가 사용하지 않는 기능에 영향받지 않아야 한다.”

아래에 Animal이라는 인터페이스 하나가 있습니다.

이제 이 인터페이스로, Bird와 Human 클래스를 만들어보도록 하겠습니다.

위의 코드에서, Human 클래스에 fly() 메서드를 구현하려고 하니 무언가 조금 이상합니다. 사람은 날 수가 없기 때문입니다.

그럼 이 문제를 어떻게 해결할까요?

인터페이스를 상속하는 인터페이스를 통해 해결

위의 예제대로 설명하면, Animal 인터페이스를 상속하는 FlyableAnimal 인터페이스를 만들어서 해결할 수 있습니다 …