채널 로고

Frontend

아티클 썸네일

타입스크립트 안전하게 활용하기

일반적인 타입 시스템과 자바스크립트의 타입 시스템, 타입스크립트 활용 전략에 관한 글입니다. Introduction 타입 시스템 타입 시스템은 전산학에서 다루는 주요 주제 중 하나입니다. Low-level 프로그래밍 언어부터 high-level 프로그래밍 언어까지, 모든 프로그래밍 언어에는 연산(operator, operation)이라는 개념이 존재합니다. 언어는 특정 타입을 가지는 값 간의 연산을 정의합니다. 가장 우리에게 친숙한 연산인 사칙연산으로 예를 들어보겠습니다. C에서 +라는 operator는 int와 int 두 타입의 값을 input으로, int 타입의 값을 output으로 하도록 정의되어 있습니다. int a = 1; int b = 2; int c = a + b; // <- int operator+(int left, int right); 만약 언어에서 정의하지 않은 방법으로 operator를 사용하려고 하면 에러가 발생합니다. struct Foo {}; int a =

· Channel Talk

아티클 썸네일

우아한 설계의 첫걸음, ES7의 decorator

하루가 멀다 하고 신기술이 쏟아지는 요즘 자바스크립트 또한 계속해서 새로운 모습으로 바뀌고 있습니다. ECMAScript 2015(이하 ES6)에 새롭게 등장한 Arrow function, Class, Generator 등이 그중 하나라 할 수 있습니다. 오늘은 ECMAScript 2016(이하 ES7)에서 제안되었던 Decorator에 대해 알아보려 합니다.(2017년도에 작성된 글을 옮겨 온 게시물입니다) Decorator란? ES7 스펙 명세에는 Decorator를 아래와 같이 설명하고 있습니다. 선언된 클래스와 그 프로퍼티들을 디자인 시간에 변경할 수 있는 편리한 문법 위 문장만 봐서는 도대체 Decorator가 어떤 역할을 하는지 감이 오지 않습니다. 백문이 불여일견이라고 예제를 통해 Decorator를 어떻게 활용할 수 있는지 알아보겠습니다. 아래 코드는 Decorator를 이용해 설계한 클래스 코드의 일부입니다. @withSuperEngine class Car { ...

· Channel Talk

아티클 썸네일

웹 플러그인 개발기 - iframe의 재발견

채널톡 웹 플러그인을 개발하며 겪은 문제들과 우리 팀의 해결책을 소개합니다. 채널톡 웹 플러그인은 SDK의 형태로 고객사 웹사이트에 붙여 고객이 매니저와 대화할 수 있는 인터페이스를 제공합니다. 이 글을 쓰고 있는 당시 약 2300개의 채널이 개설되었고, 하루 약 180만 명의 일반 유저가 웹사이트에 붙은 저희 플러그인을 보고 있습니다.(2017년도에 작성된 글을 옮겨 온 게시물입니다) 플러그인은 고객사 웹사이트 (이하 호스트 웹사이트라고 함) 의 HTML 도큐멘트에 붙어서 실행됩니다. 이 말은 실행 환경 (자바스크립트, CSS, DOM 환경 등) 을 우리가 컨트롤하지 못한다는 것을 의미합니다. 이것이 일반적인 웹서비스와 플러그인 개발의 가장 큰 차이점이고 사실상 많은 이슈들은 이 차이로부터 기인합니다. 또 이것에 대응하기 위해 프레임워크의 선택부터 개발, 배포에 이르기까지 훨씬 신경 써야할 부분이 많았습니다. 이 글에서는 그 중 호스트 웹사이트와의 실행 환경 공유에 따른 문제들을

· Channel Talk