Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.

기술 뉴스 #185 : 21-11-02

웹개발 관련

  • The Plan for React 18 : React 팀에서 React 18 릴리스 작업을 시작하면서 계획을 발표하며 알파 버전도 같이 공개했다. React 18에는 자동 배칭, 스트리밍 서버 렌더링, 새로운 API가 추가될 예정이지만 애플리케이션 코드를 거의 바꾸지 않고도 업그레이드 할 수 있을 것이라고 한다. 수개월 내에 퍼블릭 베타를 공개할 것이라고 한다. 꼭 18 버전을 위한 것은 아니겠지만 새로운 React Docs도 공개되었다.(영어)
  • Photoshop's journey to the web : Phtoshop을 web으로 구현하기까지 구현 과정을 설명한다. 현재 Photoshop web 버전은 비공개 베타이다.(영어)

    • 이미 Spark와 Ligthroom을 웹으로 구현했지만, Photoshop은 JavaScript의 성능 한계로 구현하지 못했다.
    • WebAssembly와 Emscripten C++ 툴 체인을 이용해서 C++로 작성된 Photoshop을 웹으로 바로 포팅할 수 있었다.
    • 대부분은 포팅했지만, 성능이 충분치 않았다. 동적 멀티스레딩을 WebAssembly에 필요했고 예외에 기반을 둔 오류 핸들링을 W3C 커뮤니티 그룹과 작업했고 SIMD 인스트럭션같은 성능 프리미티브로 성능을 개선할 수 있었다.
    • 데이터를 디스크에서 메모리로 빨리 옮기기 위해 오리진 트라리얼로 사용할 수 있는 origin private file system API를 사용할 수 있다.
    • 웹은 sRBG 색공간을 사용하고 있지만, Photoshop은 Display P3 색공간을 쓰고 있어서 더 적확히 이미지를 보여주도록 Display P3 Canvas를 사용했다.
    • 수많은 UI 요소를 관리하기 위해 Web Components와 Lit 라이브러리를 사용했다.
  • Optimizing resource loading with Priority Hints : 브라우저가 리소스를 다운로드할 때 <head>에 있는 <link>나 CSS를 먼저 다운로드받거나 뷰포트 내의 리소스를 먼저 다운로드받는 등 최적화를 하지만 이 우선순위 힌트를 줄 수 있는 importance 속성을 설명한다. importance를 hign나 low, auto로 지정할 수 있고 이 우선순위 힌트는 실험적 기능으로 Chrome 96부터 origin trial로 이용할 수 있다. 크롬이 처리하는 우선순위가 표로 잘 나와 있고 우선순위 힌트를 사용했을 때 얼마나 빨라지는 지도 비교해서 보여주고 있다.(영어)
  • 2021년에 살펴볼 법한 브라우저 개발자 도구의 유용한 스타일 관련 기능 : 최신 브라우저에서 CSS를 디버깅하는 데 도움이 되는 최신 기능을 정리한 글이다. 개발자 도구에서 flex나 grid를 상태를 쉽게 확인하고 변경해 볼 수 있는 기능과 폰트를 조정하는 기능을 설명하고 페이지에서 사용되지 않은 CSS를 확인하는 기능 등을 소개한다.(한국어)

그 밖의 개발 관련

  • Everything new from Universe 2021 : GitHub Universe를 통해서

    • 커스텀 필드나 이터레이션을 사용할 수 있는 새 GitHub Isusues가 퍼블릭 베타가 되었다.
    • github.com에서 Ctrl + k나 Cmd + k를 누르면 빠르게 원하는 곳으로 이동할 수 있는 커멘트 팔레트를 볼 수 있다.
    • 아직 프라이빗 베타이지만 Pull Request를 바로 머지하는 대신 머지 큐에 넣고 최신 베이스 브랜치와 검사를 해준 뒤에 머지할 수 있는 머지 큐가 추가되었다.
  • Oracle's JDK 17 - Free Again for Commercial Use : Oracle이 2018년 OracleJDK의 프로덕션 사용의 과금을 하겠다는 결정을 되돌려서 NFTC 라이센스하에 무료로 프로덕션 사용을 할 수 있게 한다고 발표했다. 이 NFTC 라이센스는 Oracle JDK 17과 그 이후 버전에 적용된다.(영어)
  • GitHub Copilot available for JetBrains and Neovim : VS Code에서만 사용할 수 있던 GitHub의 AI 짝 프로그래머 Copilot이 이제 JetBrains와 Neovim에서도 이용할 수 있게 되었다.(영어)
  • Meterial Design 3 : 안드로이드 12부터 적용된 메터리얼 디자인 3가 공개되었다. 디자인 시스템이므로 각 컴포넌트를 사이트에서 확인할 수 있고 필요에 따라서는 색 등을 커스터마이징해서 사용할 수 있다.(영어)
  • vscode.dev(!) : VS Code에서 웹브라우저에서 VS Code를 실행할 수 있는 vscode.dev를 공개했다. GitHub의 Codespace는 이 VS Code for web을 GitHub과 더 통합한 버전이라고 생각하면 된다. GitHub의 microsoft/vscode 저장소를 vscode.dev에서 열려면 vscode.dev/github/Microsoft/vscode로 접근하면 된다.(영어)
  • Web Browser Engineering : 웹 브라우저를 Python으로 구현하는 온라인 튜토리얼이다. 튜토리얼을 다 따라하진 않았지만, 웹페이지 다운로드부터 페이지 그리기, 서버와의 통신, 스크립트 실행까지 단계별로 설명하고 있고 챕터로 보면 3/4 정도 완료되었다.(영어)

인프라 관련

  • 쿠버네티스 API서버는 정말 그냥 API서버라구욧 : kube-apiserver와 통신할 때 보통 kubectl을 이용하게 되지만 이 kube-apiserver가 그냥 API 서버라는 것을 보여주기 위해 kubectl 대신 curl로 요청해 보는 과정을 설명한 글이다. 서버 주소를 알아 온 뒤 인증을 위해서 토큰을 추출하고 API에 직업 HTTP 요청을 보내서 kubectl에서 이용하든 클러스터의 정보를 조회하는 과정을 보여준다. kube-apiserver에서 OpeanAPI 스펙 문서도 제공하므로 이를 이용하면 API 목록도 확인할 수 있다.(한국어)
  • Logstash의 Kafka Input 성능 개선 이야기 : Logstash를 사용하면서 Kafka Lag가 급격히 증가하는 문제를 해결하기 위한 개선 과정을 설명한다. 처음에는 파티션 수를 늘렸지만 해결되지 않아서 자세히 보니 파티션에 컨슈머가 고르게 붙어있지 않은 문제를 발견하고 partition_assignment_strategy를 사용해서 라운드 로빈을 적용했으나 트래픽이 늘어나자 다시 Lag가 증가하기 시작했다. 그래서 Lag의 의미를 자세히 찾아보니 마지막에 생성된 메시지와 컨슈머가 가져갔다고 표시한 오프셋의 차이라는 것을 알게 되어 auto_commit_interval_ms를 5초에서 1초로 줄여서 Lag를 해결했다고 한다.(한국어)

볼만한 링크

IT 업계 뉴스

프로젝트

  • Vercel Edge Functions : Vercel의 엣지 네트워크에서 서버 사이드 로직을 엣지에서 실행시킬 수 있다.
  • Git Command Explorer : Git을 사용하는 상황과 원하는 결과를 셀렉트 박스로 선택하면 사용할 수 있는 명령어를 알려주는 사이트.
  • Datree : Kubernetes의 manifest가 잘 설정되었는지 베스트 프렉티스를 지켰는지를 검사해주는 CLI

버전 업데이트

2021/11/02 02:28 2021/11/02 02:28
Response : No Trackback , No Comment

Trackback URL : 이 글에는 트랙백을 보낼 수 없습니다

Leave a Reply

Comments

: 1 : ... 114 : 115 : 116 : 117 : 118 : 119 : 120 : 121 : 122 : ... 1664 :