채널 로고

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

아티클 썸네일

CRDT vs OT

*본 콘텐츠는 마틴클랩만의 유튜브 'CRDTs: The Hard Parts'를 요약/정리한 자료입니다 CRDT vs OT CRDT(Conflict-Free-Replicated Data Types)와 OT(Operational Transformation)란 동시편집 기술로, 실시간 협업 툴에 관련된 기술입니다. 최근 코로나19로 재택근무하는 회사가 많아지면서 '실시간 협업 애플리케이션'도 주목되고 있는 것 같습니다. 실시간 협업 에디터가 동작되는 과정 CRDT와 OT를 설명하기 전에, 실시간 협업 에디터가 어떻게 동작하는지 생각해봅시다. Google Docs에서 두 명의 사용자가 똑같이 'Hello!'를 보고 있다고 할 때, 한 명은 Hello 와 ! 사이에 World를 넣고, 다른 한 명은 ! 뒤에 :-) 이모티콘을 추가하겠죠. 이렇게 되었을 때 결과가 어떻게 나와야 할까요? 두 사용자가 입력한 값이 모두 합쳐져서, ‘Hello World ! :-)’ 가 나와야 하겠죠 이러한 실시간

· Channel Talk

아티클 썸네일

React DnD Tips & Tricks

React DnD 글을 쓰게 된 계기 React DnD는 아이템 간의 순서 변경 등 드래그 액션이 편리한 UX를 만들 수 있는 환경에서 사용됩니다. 아래는 채널톡에서 React DnD를 사용하는 예시입니다. React DnD를 프로덕트에서 녹여서 사용할때 마주할 수 있는 문제에 대해서 한국어로 된 아티클이 꽤 부족하다고 느꼈습니다. React DnD를 오랫동안 사용했고, 최근에 채널톡에서 JS 기반의 Class Component를 TS 기반의 Functional Component로 마이그레이션하면서 이에 대한 정리가 필요하다고 생각했습니다. Legacy HoC API와 Hooks API를 전부 사용한 사용자 입장에서 짧은 팁을 남깁니다. React DnD를 선택한 이유 Source: npm trends react-beautiful-dnd는 UI/UX나 퍼포먼스가 좋은 동작이 predefined 되어있는 것이 특징입니다. React DnD의 경우에는 hover중일때 순서가 변경되는 애

· Channel Talk

아티클 썸네일

React + Decorator + HOC = Fantastic!!

React + Decorator + HOC = Fantastic!! 지난 포스팅에서는 ES7의 Decorator 문법을 이용해 선언된 클래스와 그 프로퍼티들을 디자인 시간에 변경하는 법을 알아보았습니다. 그렇다면 리액트 컴포넌트와 Decorator가 만나면 어떤 시너지가 발생할까요? 만약 ES7의 Decorator에 대해 모르신다면 지난 포스팅을 읽고 오시는 걸 권장합니다. 이 포스팅은 독자들이 Decorator에 대해 이미 알고 있다고 가정하고 작성됐습니다. Higher Order Component 리액트 공식 문서를 보면 Higher Order Component(이하 HOC)를 다음과 같이 설명하고 있습니다. 1. 리액트 컴포넌트 로직을 재활용할 수 있는 고급 기법 2. 리액트에서 공식적으로 제공하는 API가 아니라 단순히 아키텍쳐 이 설명으로는 HOC가 어떤 역할을 하는지 이해하기는 역부족이기 때문에 간단한 예제를 통해 HOC를 어떻게 작성하는지 알아보겠습니다. function

· 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

아티클 썸네일

채널톡 프론트엔드 기술 스택

오프라인 고객 분석 솔루션 워크인사이트 개발해 온 조이는 2017년 고객 메신저 채널톡을 런칭했습니다. 이 글은 채널톡과 관련된 기술 블로그의 첫번째 글로 채널톡 프론트엔드(웹, 윈도우, OSX)의 기술 스택 및 개발 환경을 소개하도록 하겠습니다. React 채널톡 개발을 처음 시작할 당시에 워크인사이트 대시보드 및 기타 사내 툴에서는 AngularJS 1을 사용하고 있었습니다. 비교적 적은 코드로 복잡한 애플리케이션을 빠르게 만들 수 있는 점에는 만족했지만 퍼포먼스면에서는 아쉬운 부분이 많았습니다. 따라서 새로운 프레임워크 및 라이브러리를 리서치 했고 매우 가볍고 렌더링 퍼포먼스 면에서 AngularJS 1 대비 우위에 있던 React 를 사용하기로 결정했습니다. 컴포넌트의 설계 패턴은 Redux를 만든 Dan이 제안한 Container 와 Presentational 컴포넌트를 구분하는 방식으로 설계하고 있습니다. 따라서 Container 가 data fetch 및 update 등

· Channel Talk