TOAST UI

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

점진적 웹 앱(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'으로 디버그 하기 힘든 함정들이 있었는데, 필자는 거의 모든 함정들에 빠져본 것 같다. 그래서 지금부터는 완성된 코드를 사용해서 필자가 배운 것을 설명하려고 한다.

Kevin Dangoor가 CommonJS 프로젝트를 시작한 후 2009년부터 어떻게 하면 자바스크립트가 웹 브라우저에서 실행되는 것 뿐만 아니라, 범위가 확대되어 백엔드 영역을 포함한 애플리케이션 개발에도 적합한지에 대해 토론이 시작되었다.

유저들은 반응이 빠른 UI를 선호한다. 100ms 미만의 UI 응답 지연은 유저들이 즉시 느낄 수 있고, 100ms에서 300ms가 지연되면 이미 유저들은 상당한 지연으로 느낀다. UI 성능을 증가시키기 위해, React는 고차 컴퍼넌트(Higher Order Component, HOC) `React.memo()`를 제공한다. 렌더링 결과를 메모이징(Memoizing)함으로써, 불필요한 리렌더링을 건너뛴다.

React.memo, PureComponent 또는 shouldComponentUpdate 를 사용하지 않고 최적화하는 방법. 필자는 리액트의 리렌더링과 관련된 주제로 블로그 글을 준비하다가 당신이 감사할만한 이 작은 보석같은 리액트 지식을 발견했다. 이 글을 읽고 난 후, Brooks Lybrand는 이 트릭을 적용하였고 아래와 같은 결과를 얻었다. 흥미롭지 않은가? 그럼 인위적으로 작성한 간단한 예제를 보고 실제 앱에서 어떻게 적용할 수 있을지 이야기 해보자.

콘퍼런스 일정표의 UI를 구현하기 위해 CSS 그리드를 사용하였다. 일정표에 각각의 세션을 표현하려면 유연한 레이아웃이 필요했다. 이 프로젝트에서 핵심 요구사항은 가로, 세로로 이루어진 2차원 평면에 다른 크기이거나 서로 다른 배치를 가지는 복잡한 자식 요소를 완벽하게 표현하는 것이다. 개념 증명(PoC-Proof of Concept) 과정에서 코드를 읽기 쉽고 재미있게 작업할 수 있는 몇 가지 기술을 발견했다. 결과로 나온 예제에는 CSS 그리드 기능의 흥미로운 사용법이 포함되어 있으며, 예제를 작성하면서 평소에 잘 알지 못했던 그리드 세부사항에 대해 알게 되었다.