22. 11월 스크랩

1. CSS로 표현한 포켓몬 홀로그램 카드 (링크)

• 수집용 포켓몬 카드의 홀로그램 효과를 실제처럼 보이게 만드는 다양한 CSS 효과들을 적용
  → 3d transforms, filters, blend modes, css gradients
• 마우스 위치에서 flare/glare 이펙트 처리
• Holofoil 카드들을 표현하기 위해 Vertical Beam 효과 주기
• Galaxy Holofoil / Radiant Holofoil 효과등

2. Charts.css - CSS 데이터 시각화 프레임워크 (링크)

• <table> 같은 HTML 엘리먼트들을 이용하여 차트를 표현해주는 CSS 유틸리티 클래스
• 미디어쿼리 이용한 반응형
• 마크업 내에 직접 데이터가 있어서 접근성 지원
• JS를 사용하지 않으며, 의존성 없음
• 다양한 차트 타입 지원 : Area, Bar, Column(Percentage, Stacked), Line, 3D Bars/Tilt, Multi-Dataset(Area, Line, Bar, Column),..

3. 구글 크롬, 110 버전 부터 JPEG-XL 지원을 중단할 예정 (링크)

• JPEG-XL은 로열티가 없는 차세대 손실/무손실 압축 포맷
• ISO/IEC 18181로 표준화 되었으며, 크롬 91부터 피쳐플래그로 적용 가능하게 도입됨
• 하지만 110 버전부터 지원 중단 예정
• 이유는 "에코 시스템에서 충분한 관심을 받지 못했으며, 기본 기능이 될 정도로 기존 형식에 비해 충분한 이점을 제공하지 않음"
• 구글은 아마도 차세대 이미지 포맷으로 WebP 와 AVIF 를 밀려고 하는 듯

4. Replit, AI 코딩 도우미 Ghostwriter 공개 (링크)

• GitHub CoPilot과 비슷한 방식으로, Replit의 온라인 개발환경에서 코딩시에 AI로 코드를 추천
• JavaScript, Python에서 가장 잘 동작. 16개의 언어 지원(C, Java, Perl, Ruby, HTML, CSS, SQL,..)
• 4개의 컴포넌트로 구성
  • Complete Code : 기존 코드를 분석하여 코드 자동 완성
  • Generate Code : 새로운 코드를 생성
  • Transform Code : 리팩토링 및 표준에 맞게 현대화
  • Explain Code : 기존 코드를 분석하여 자연어로 함수를 설명
• 월 $10(1000 Cycles)

5. JetBrains Aqua - 테스트 자동화를 위한 IDE (링크)

• IntelliJ IDEA, PyCharm, WebStorm의 언어별 기능도 함께 제공
• 모든 종류의 자동화 테스트 개발 가능
  • UI 테스트 : 웹 인스펙터 내장, 인기 프레임워크를 위한 구문강조, 탐색, 자동 완성
  • Web API 테스트 : 코드 기반 HTTP 클라이언트, OpenAPI(Swaggger) 지원
  • Unit 테스트 : 소스코드 ↔ 테스트 간 탐색, 테스트 통계 및 다중 테스트 동시 실행, 코드 커버리지 분석
• 지원 언어 : Java, Kotlin, Python, JavaScript, TypeScript

6. 웹어셈블리(Wasm)가 클라우드 컴퓨팅의 미래인 이유 (링크)

• Wasm은 크로스 플랫폼이다 : 클라우드 구성요소를 안전하고 간단하게 결합한다
• Wasm은 안전하다 : 코드 실행 및 기능 표현 방식이 위험을 줄임
• Wasm은 빠르다 : 불필요한 것을 제거하고 속도와 효율성을 향상
• Wasm은 항상 개선되고 있다 : 표준을 만들면 더 강력해진다
• Wasm은 미래다 : 더 빠르고, 더 안전하며, 더 효율적인 통합 방법을 제공한다
  
  WebAssembly에 주목해야 할 이유
  Ryan Dahl의 JavaScript Containers에 대한 생각
  WebAssembly가 W3C 권고안으로 공식 발표
  2020년과 이후 JavaScript의 동향 - WebAssembly
  JavaScript의 세번째 시대

7. 우리가 CSS-in-JS와 헤어지는 이유 (링크)

• CSS-in-JS가 뭔가요?
• CSS-in-JS의 좋은 점, 나쁜 점, 못난 점
• 성능 심층 분석
  • 렌더링 내부와 외부의 직렬화
  • 멤버 브라우저 화면 벤치마킹
  • 프레임 그래프(Flamegraph) 분석하기
  • Emotion 없이 작성된 멤버 브라우저 벤치마킹
• 우리의 새로운 스타일링 시스템
  • 유틸리티 클래스
• 컴파일 타임 CSS-in-JS에 대한 참고 사항

8. React 렌더링 동작에 대한 (거의) 완벽한 가이드 (링크)

• 렌더링이 뭘까요?
  • 렌더링 프로세스 개요
  • 렌더 및 커밋 단계
• 리액트는 어떤 방식으로 렌더링할까요?
  • 렌더링 큐에 렌더링 등록하기
  • 일반적인 렌더링 동작
  • 리액트 렌더링 규칙
  • 컴포넌트 메타데이터와 파이버(Fibers)
  • 컴포넌트 타입(Component Types)과 재조정(Reconciliation)
  • Key와 재조정
  • 렌더링 일괄 처리(Render Batching)와 타이밍
  • 비동기 렌더링, 클로저 그리고 상태 스냅샷
  • 렌더링 동작 엣지 케이스
• 렌더링 성능 개선
  • 컴포넌트 렌더링 최적화 기법
  • Props 참조가 렌더링 최적화에 미치는 영향
  • Props 참조 최적화
  • 전부 메모이제이션할까요?
  • 불변성(Immutability)과 리렌더링
  • 리액트 컴포넌트 렌더링 성능 측정
• 컨텍스트(Context)와 렌더링 동작
  • 컨텍스트 기초
  • 컨텍스트 값 업데이트
  • 상태 업데이트, 컨텍스트 그리고 리렌더링
  • 컨텍스트 업데이트와 렌더링 최적화
  • 컨텍스트와 렌더러 경계(Renderer Boundaries)
• React-Redux와 렌더링 동작
  • React-Redux 구독(Subscriptions)
  • connect와 useSelector의 차이
• 리액트의 향후 개선 사항
  • "React Forget" 메모이징 컴파일러
  • Context Selectors
• 요약
• 결론
• 추가정보

9. Design System Decision Record (링크)

• linear라는 Design System을 작성하며 했던 고민과 결정에 대한 글
• “필요한 일만 한다.” / “유연함은 의무이다.”

목차

• Principle
  • Problem from Principle
• Interface
  • Compound Component
• Headless
  • 예시 1. Trigger
  • 예시 2. 다양한 기능 컴포넌트
• 디자인 시스템의 낯섦 예산
  • 예시 1. Slot
  • 예시 2. state
  • 예시 3. PortalContainer
• 사용하지 않음에 대한 지원
• 추상화
  • 예시: TimePicker
• 틀린 선택 막아주기
• 접근성
  • 예시. TextField
• 맺으며
• 참고자료

10. Chartist.js - SVG로 만드는 반응형 차트 (링크)

• Convention over Configuration 으로 쉬운 핸들링
• 스타일은 CSS, 제어는 JS로 분리
• SVG로 완전 반응형 및 DPI independent
• 미디어쿼리 지원
• Sass로 커스터마이징 가능

11. 고급 자바스크립트 배우기 by John Resig (링크)

• jQuery 개발자가 만든 15강짜리 자바스크립트 교육 자료
• 자바스크립트 기본을 아는 중급~고급 개발자용
• 페이지 내에서 코드를 수정하고 바로 실행 가능

목차

1. Our Goal
2. Defining Functions
3. Named Functions
4. Functions as Objects
5. Context
6. Instantiation
7. Flexible Arguments
8. Closures
9. Temporary Scope
10. Function Prototypes
11. Instance Type
12. Inheritance
13. Built-in Prototypes
14. Enforcing Function Context
15. Bonus: Function Length

12. WebAssembly : TinyGo vs Rust vs AssemblyScript (링크)

• 브라우저에서 복잡한 작업을 위해 WASM을 쓴다면 어떤 언어가 가장 빠를까 ?
• 10만개의 랜덤값을 가진 어레이를 500번 복사해서 정렬하는 코드로 속도 비교
• 결과적으로는 Rust가 가장 메모리를 적게 사용하며 속도가 빠름 (JS보다 20배 쯤)
  • 런타임 속도 : Rust (2982ms) > AssemblyScript(6405ms) > Go(9717ms) > JavaScript(68720ms)
  • 파일 크기 : JavaScript (1.3kb) > AssemblyScript(4.7kb) > Go(37.0kb) > Rust (74.0kb)
• 파일 사이즈도 같이 고려 대상이라면 AssemblyScript도 괜찮음(Rust에 비해 두배 정도 느리지만, JS보다는 10배 빠름)
• Rust 런타임은 크롬에서 가장 빨랐음. JavaScript는 Firefox가 크롬보다 3배이상 빠름

13. 자바스크립트에서 영역(realm)이란 (링크)

• 영역(realm) - 자바스크립트가 사는 세상
  • 전역 실행 환경
  • 전역 객체 (그리고 고유 객체)
  • 자바스크립트 그 자체
• 영역이 실제로 무엇인지에 대한 개념 파악하기
  • "현실 세계"에서의 영역
  • 정체성 단절

14. macOS의 고급 CLI 명령들 (링크)

• caffeinate : 슬립모드 방지
• textutil : 문서 변환기. txt/html/rtf/doc/docx
• mdfind : 스팟라이트 검색
• networkQuality : 인터넷 속도 측정
• screencapture : 화면캡쳐
• pbcopy, pbpaste : 클립보드 복사/붙여넣기
• say : text-to-speech 엔진
• sips : 이미지 크기 변경 및 회전
• open : 파일 및 폴더 열기
• pmset : 전원관리 설정
• softwareupdate : OS 업데이트 관리

15. 동적 Viewport 단위 사용 (링크)

• 데스크탑에서 vw, vh 는 viewport 의 크기를 잘 나타냄
• 모바일에서는 툴바, 주소창 같은 동적으로 생성되는 UI 에 의해 크기의 영향을 받음 따라서 100vh 는 viewport 의 크기를 넘어서거나 스크롤등으로 주소창이 움츠려들면 viewport 크기에 맞게 됨
• CSS 워킹그룹에서 이런 동적으로 변화하는 크기에 맞추어 쓸 수 있는 단위 제공해서 실제 viewport 와 딱 맞는 크기를 제공
  • Large viewport: lvh 는 동적으로 생성되는 UI 가 없는 경우
  • Small viewport: svh 는 움처려든 UI 가 다시 확장 된 경우
  • Dynamic viewport: dvh 동적 UI 상태에 맞게 viewport 크기와 같아짐 Chrome 108, Firefox 101, Safari 15.4 에서 지원