22. 8월 스크랩

1. PlayCode - Javascript Playground (링크)

• 브라우저에서 대부분의 NPM 패키지를 실행
• 엄청 빠른 Live View 제공 : 작성하면서 바로 결과를 보여줌
• 코드 자동완성 및 마우스 호버시에 문서 표시
• Emmet 단축어 지원 : HTML & CSS 작업을 빠르게
• 기능은 완전히 무료. 1인 개발자가 혼자 6년간 개발. 현재는 프리미엄 모델(유료 교육 코스)로 돈을 벌며 전업 개발중.

2. tabler - 오픈소스 HTML 대시보드 UI 킷 (링크), (tabler react 링크)

• Bootstrap 기반
• 다양한 인터페이스 컴포넌트 와 템플릿 제공 : 갤러리, FAQ, 위젯, 가격테이블 등
• 반응형 & 모든 최신 브라우저에서 동작
• HTML5 & CSS3
• SPA 버전 제공 : Tabler React

3. 한글 웹폰트 최적화 - (part1 링크), (part2 링크)

한글 웹폰트사용하려다가 제대로 표시되지 않아 포기하려다가
어찌어찌 하여 찾은 방법을 정리해봤습니다.

- 한글 웹폰트를 쓰면 첫화면 첫로딩에 적용폰트가 바로 표시되지 않음.
- 영어권에서는 font-display: optional 로 편하게 할수 있지만, 한글은 어려움
- 한국에서 구현한 곳을 찾지 못해 직접 만들어봄
- 페이지에 등장하는 문자들로만 이루어진 폰트서브셋 생성 --> 실패. 여전히 큼
- 페이지 상단 첫화면에 등장하는 문자들로만 서브셋 생성--> 성공. 충분히 작음
- 사용자가 첫화면에서 머무는 사이에 전체웹폰트 로딩완료시킴.

4. Connect-Web - 브라우저에서 RPC 호출하는 TypeScript 라이브러리 (링크)

• 구글의 grpc-web 은 TS지원이 약하고, JSON 및 ECMAScript 모듈 지원이 안되고, 생성된 코드가 10년된 Java같음
• Connect-web은 손으로 작성한 듯한 REST 클라이언트 같은 코드를 생성
• 2개의 RPC 프로토콜 지원 : gRPC-Web 과 Connect의 자체 프로토콜
• Connect 프로토콜은 간단한 POST-only 프로토콜
  • HTTP/1.1 또는 HTTP/2 에서 동작
  • gRPC 와 gRPC-Web의 좋은 부분만 가져옴
• Promise 및 Callback기반 API 동시 지원
  • React, Angular, Svelte 등과 잘 연동
• 데모를 grpc-web 에서 변경해보니 번들 사이즈가 80% 감소

5. Mailing - React로 이메일 작성하고 보내기 (링크)

• RoR의 Action Mailer 에서 영향받은 오픈소스
• React 컴포넌트로 이메일 템플릿 만들기
• MJML(https://news.hada.io/topic?id=3994)로 어떤 메일 클라이언트에서든 잘 보이게
• 실시간 리로딩 되는 프리뷰 서버
• 개발 모드에서는 전송 대신 브라우저에서 메일 오픈
• next.js, redwood.js, remix 등과도 잘 동작

6. Learning Patterns - 웹 앱 설계를 위한 패턴들 (링크)

• 디자인 패턴 및 웹 컴포넌트 패턴 설명을 웹 사이트 및 무료 e북으로 제공 (435p PDF)
  → 바닐라 자바스크립트 & React
• CodeSandbox를 이용한 실전 예제
• 애니메이션으로 패턴 설명

패턴들

• Design Patterns : Singleton, Proxy, Provider, Prototype, Observer, Module, Mixin, Hooks, Factory, Compound, Command,..
• Rendering Patterns : CSR, SSR, Static, Incremental Static Generation, Progressive Hydration, Streaming SSR, Islands Architecture,..
• Performance Patterns : Static/Dynamic Import, Import on Visibility/Interaction, Route Based Splitting, Bundle Splitting, RPRL, Tree Shaking, Preloadk, Prefetch, List Virtualization,..

7. z-index:10000을 대체하는 top layer (링크)

• <dialog> 또는 Pop Up API (popup 속성) 이용
• 브라우저의 document 위에 있으므로 Z-index 나 DOM구조 신경쓸 필요 없음
• 나타나는 순서대로 스태킹 됨(맨 마지막이 맨 위, 제거후 다시 추가하면 맨위로)
• 각 엘리먼트별로 ::backdrop 이용해서 뒷면 제어 가능
• Pop Up API : popup=auto|hint|manual, popuptoggletarget/popupshowtarget/popuphidetarget

8. JSON Visio - JSON 데이터를 그래프로 시각화 (링크)

• 왼쪽에 JSON 에디터가 있고, 이곳에 JSON 데이터를 넣으면 오른쪽에 그래프 뷰로 데이터 구조를 그려주는 유틸입니다.
• 위 작업은 JSON을 넣자마자 Seamless하게 처리되며. 웹, 혹은 다운로드. 또는 웹에 임베드하여 사용할 수 있습니다.

9. Soketi - 간단하고 빠른 오픈소스 웹소켓 서버 (링크)

• C로 작성되어 Node.js로 포팅. 빠르고 스케일러블
  → 1 CPU당 20만 커넥션 가능, 1k 사용자에게 메시지 전송하는데 6ms
• 연결/메시지/채널 등 제한 없음
• Pusher Protocol v7을 사용하므로 기존 코드 그대로 이용
• HTTP Webhook지원 - 채널 점유시 트리거 (Lambda와 연결)
• Prometheus 모니터링 지원
• Pusher처럼 app 관리 지원