TOAST UI

오늘은 고전 게임인 테트리스로 게임 개발 여행을 해보려고 한다. 그래픽, 게임 루프 및 충돌 감지 등을 다루고, 마지막에는 점수와 난이도가 완벽하게 작동하는 게임을 갖게 될 것이다.

자바스크립트 코드 베이스가 다소 복잡하더라도, 배포(production) 모드와 개발(development) 모드의 코드를 다르게 번들링하고 실행할 수 있다. 배포 모드와 개발 모드의 코드를 다르게 번들링하고 실행시키는 것은 매우 강력한 기능이다. React의 개발 모드는 버그로 이어질만한 많은 부분을 미리 경고해주는 검증 코드가 포함되어 있다. 하지만, 이런 코드는 번들 크기를 증가시키고 앱 속도를 느리게 할 수 있다.

TOAST UI Grid는 자체적인 반응형 시스템을 구축하여 데이터의 상태 관리를 하고 있다. 데이터가 변경되면 반응형 시스템이 변경을 감지하고 있는 다른 데이터 속성들도 자동으로 갱신해주기 때문에 데이터의 변경 관리를 편리하게 할 수 있었고, 간결하면서도 선언적인 코드를 사용할 수 있어 불필요한 코드도 줄일 수 있었다. 하지만 대용량 데이터를 반응형 데이터로 변경할 때 치명적인 성능 문제가 있었고, 그리드의 초기 렌더링 속도 저하를 유발했다

이 글을 읽고 있을 개발자라면 적어도 한 번쯤 API 문서를 작성해 본 경험이 있으리라 생각한다. "오전까지 100개 함수에 대한 API 문서를 만들어주세요."라는 업무가 주어졌다고 가정해보자. 이때 어떤 그림이 그려지는가?

간단한 질문을 하나 하겠다. 아래 코드 스니펫에서 에러가 발생할까? 첫 번째 코드는 인스턴스를 생성한 다음 클래스를 선언한다.

점진적 웹 앱(PWA)은 네이티브 앱과 같은 경험을 제공하기 위한 모던 웹 기술을 사용한 웹 애플리케이션이다. 이 앱들은 특정 요구 사항을 충족한다. 서버에 배포되고, URL을 통해서 접근 가능하고, 검색 엔진으로 색인된다.

몇 달 전, Svelte 3가 릴리즈되었다. Svelte를 사용해 몇 가지를 시험해 봤고, 튜토리얼을 참고해 몇 가지 작은 앱들을 제작했다. 솔직히 말하면, Svelte를 사용하는것이 React 보다 훨씬 빠르고 쉽게 느껴졌다. 나는 처음 React에서 받았던 놀라움을 Svelte에게서 똑같이 느꼈다.

타입스크립트 3.6이 배포되었다. 유용하게 사용할 수 있는 타입스크립트 3.6의 기능을 소개한다.

필자는 TOAST UI의 라이브러리 중 하나를 개발하고 있고 그동안 쌓은 경험과 노하우를 대방출하고자 한다. 이 글은 UI 라이브러리를 만드는데, 라이브러리의 목표와 기능, 사용한 기술 스택 그리고 웹팩 설정까지 바로 적용할 수 있는 실용적인 내용으로 구성하였다. UI 라이브러리를 만드는 방법과 노하우 A to Z를 알고 싶다면 노트북을 준비하고 차근차근 따라해보자.

필자는 electrade를 빌드하고 운영하면서 친구들이 진행하는 프로젝트를 도와준 적이 있다. 최근에는, Craiglist 스타일의 익명 이메일 전송 기능을 서버리스(serverless) Google Firebase Functions로 개발하고 싶어졌다. '.then()' 콜백을 이용해서 비동기 처리를 쉽게 설계할 수 있겠다는 생각이 들었지만, 'async/await'을 이용해서 더 가독성 있고 깔끔한 코드를 짜기로 결심했다. Functions의 다중 체이닝을 다루는 여러 아티클을 읽어보았지만, 대부분은 MSDN에서 그대로 퍼온 미완성의 예제코드여서 도움이 되지 않았다. 그런 예제 중에서는 'async/await'으로 디버그 하기 힘든 함정들이 있었는데, 필자는 거의 모든 함정들에 빠져본 것 같다. 그래서 지금부터는 완성된 코드를 사용해서 필자가 배운 것을 설명하려고 한다.