TOAST UI

얼마 전 상태 관리를 위해 MobX를 사용하여 React 앱을 개발했다. 때론 흥미롭기도 하고 가끔은 혼란스럽기도 했지만, 바로 글을 쓰고 싶을 만큼 즐거운 경험이었다. MobX 개발에서 가장 흥미로웠던 점은 클래스의 속성을 작성하기 위해 데코레이터를 사용했다는 것이다. 실제로 사용해보지 못했을때는 깨닫지 못했지만, MobX개발에서 몇 번 작성해본 후에는 데코레이터가 엄청난 잠재력을 가진 기능이라고 생각하게 되었다.

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

자바스크립트 코드 베이스가 다소 복잡하더라도, 배포(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를 알고 싶다면 노트북을 준비하고 차근차근 따라해보자.