웹개발 관련
- 효율적인 다크 모드 구현을 위한 배경/전경 컨텍스트 기반의 컬러 팔레트 만들기 (feat. CSS variable) : 다크 모드를 구현하기 위해서 컬러 팔레트를 기반으로 구성하는 방법을 설명하는 글이다.(한국어)
prefers-color-scheme
미디어 쿼리를 이용해서 라이트/다크 모드의 색상 변수를 선언하고 사용할 수 있지만 보통 웹사이트는 다양한 UI 요소가 있으므로 간단하지 않다.
- HSL로 색은 반전시킬 수 있지만, UI 요소 중 배경색을 사용한 경우에는 제대로 반전되지 않는 부분이 생기기 마련이다.
- 디자인에서 사용하는 색의 개수는 정해져 있으므로 팔레트로 만들어서 색의 단계별로 HLS 변수를 만들어서 사용한다. HSL로 단계별로 지정했으므로 다크 모드에서는 반대되는 색을 쉽게 찾을 수 있다. 라이트 모드에서
gray-010
는 다크 모드에서는 gray-090
이 된다.
- 하지만 UI 요소가 늘어나면 변수도 2개씩 늘어나는 문제가 있다.
- 이 부분을 이용해서 색은 배경(background)와 전경(foreground)에 따라 역할이 다르다는 것에 착안해 10단계의 색조 팔레트를 배경/전경으로 나누고 이를 이용해서 라이트 모드와 다크모드의 변수를 정의한다. 이 많은 변수가 너무 많게 느껴질 수 있지만, UI 요소에 대응할 수 있어서 복잡한 사이트에서는 이렇게 사용하는 것이 더 낫다.
- Bringing instant page-loads to the browser through speculative prerendering : 브라우저의 추측성 힌트인
prefetch
/prerender
의 사용법과 단점을 설명한다.(영어)
preconnect
/preload
는 선언적인 힌트로 다음 로딩 때 필요한 리소스에 사용한다.
prefetch
/prerender
는 추측성 힌트로 필요할 가능성이 높은 리소스를 브라우저에 추천할 때 사용한다.
- B 페이지가 A 페이지 다음에 요청될 가능성이 높다고 했을 때
- A 페이지에서
prefetch
힌트를 사용해서 B 페이지나 특정 리소스를 미리 받도록 브라우저에 알려준다.
- A 페이지에서
prerender
힌트를 사용해서 미리 B 페이지를 렌더링하게 브라우저에 알려준다. 미리 렌더링 되었으므로 클릭 시 바로 화면을 볼 수 있다.
prefetch
- 다음 페이지 전체나 same-origin의 서브 리소스를 미리 가져올 수 있다.
- 캐싱할 수 있다면 HTTP Cache에 저장된다.(크롬은 5분간 저장)
prerender
- 크로미움에서 기존 구현체가 메모리를 너무 많이 사용해서
no-state
prefetch로 다시 구현했다.
- Quicklink, Guess.js 등의 서드파티 라이브러리가 있다.
- WAI-ARIA란? : WAI(Web Accessibility Initiative)에서 리치 애플리케이션의 접근성 표준인 ARIA를 어떻게 사용해야 하는지 설명하고 있다. 사용했을 때 스크린 리더기에서 어떻게 동작하는지 영상을 같이 제공하고 있어서 이해하기 좋다.(한국어)
- 접근성을 제공하기 위해 태그에 추가 정보를 제공하지만, 태그의 의미 자체를 바꾸진 않아야 한다.
role
로 컴포넌트나 요소의 역할을 정의한다.
aria-required
, aria-label
같은 프로퍼티를 컴포넌트의 특징을 정의한다.
그 밖의 개발 관련
- Understanding AWK : 유닉스의 기본 스크립트로 입력 데이터를 처리해주는
awk
의 사용법을 설명한다. awk
가 어떻게 입력데이터의 행과 열을 다루는지를 보여주고 아마존의 1,900만 개의 리뷰의 데이터를 awk
로 처리해서 랭크를 매겨주는 프로그램을 작성하면서 awk
를 이해하게 해준다.(영어)
- How much faster is Java 17? : 얼마 전 릴리스 된 Java 11의 성능을 벤치마킹한 글이다. OpenJDK 기준으로 11에서 17로 올렸을 때와 16에서 17로 올렸을 때를 비교했다.(영어)
- G1GC 기준으로 17이 11보다 약 8.66% 빠르고 16보다는 2.41% 빠르다.
- ParallelGC 기준으로 17이 11보다 약 6.54% 빠르고 16보다는 0.37% 빠르다.
- 17에서 ParallelGC는 G1GC보다 16.39% 빠르다.
- 뱅크샐러드 Data Discovery Platform의 시작 : 뱅크샐러드에서 필요한 데이터를 쉽게 분석할 수 있도록 플랫폼을 구축한 과정을 설명한다. 데이터가 워낙 많고 복잡하기 때문에 필요한 데이터를 보려고 할 때 쉽게 사용하기도 어렵고 SQL도 알아야 해서 분석팀에게 요청까지 해야 하는 불편함이 있어서 데이터 탐색 플랫폼을 구축하기 시작했다. 이를 위해 Linkedin의 Datahub와 Lyft의 Amundsen을 비교한 결과 Datahub가 더 쓰기 편하고 좋다는 결론에 이르러 Datahub를 플랫폼을 구축했다고 한다.(한국어)
인프라 관련
볼만한 링크
- 남의집, 당근마켓에서 투자받다 : 모임을 연결해주는 남의집이 사업 방향에서 여러 시도를 하면서 투자를 받게 되는 과정을 설명한 글이다. 첫 IR에서 투자유치에 실패하고 대출금으로 남의집을 업무 공간으로 이용하는 홈 오피스를 런칭했으나 호스트보다 게스트가 많지 않아 실패했고 남은 돈은 많지 않았다. 자도 작년에 재택 하면서 좀 다른 곳에서 업무를 할까 하다가 남의집을 알게 되었다.(결국 이용은 안 했었지만...) 회사의 남은 돈을 직원들에게 공유하고 6개월 만에 새로운 시도를 해서 투자유치를 성공시키자고 각오를 세운 뒤 가게 점주들이 모임을 만들어서 제공하고 사람들이 참여하게 되면서 이 접근이 꽤 성공적이라는 것을 알게 되었고 이 가운데 회사가 풀고 푼 미션을 확실하게 정리할 수 있었다고 한다. 이후 이 사업 방향이 당근마켓하고 어울린다고 생각하게 되어 결국 당근마켓의 투자를 받게 되었다. 결과는 좋지만, 중간에 얼마나 맘고생이 심하셨을지가 느껴지면서 솔직하게 사업에 접근하는 부분이 좋았다.(한국어)
- READMEs for organization profiles : GitHub 조직에
README.md
를 작성해서 조직의 홈 화면을 꾸밀 수 있는 기능이 추가되었다.(영어)
IT 업계 뉴스
- GitLab S-1 : DevOps 플랫폼인 GitLab이 상장을 위해 증권거래소에 S-1 문서를 제출했다.(영어)
프로젝트
버전 업데이트
- Kafka v3.0 : 분산 이벤트 스트리밍 플랫폼, 릴리스 공지, 새로운 기능 소개
- PostgreSQL 14: 관계형 데이터베이스, 릴리스 공지
- Gatsby v4.0.0 : 정적 웹사이트 생성기, 릴리스 공지
- Deferred Static Generation(DSG) 지원
- 서버 사이드 렌더링(SSR) 지원
- 병령 쿼리 처리 지원로 빌드시간 개선
- Wget2 v2.0.0 : 다운로더 wget의 후속 제품, 릴리스 공지
- Lens v5 : Kubernetes IDE, 릴리스 공지
- NGINX Ingress Controller v2.0.0 : Kubernetes 인그레스 컨트롤러, 릴리스 공지
- Electron v15.0.0 : 크로스 플랫폼 데스크톱 애플리케이션 플랫폼, 릴리스 공지
- Hotwire v1.0 : , 릴리스 공지
- Swift v5.5 : 프로그래밍 언어, 릴리스 공지
- webpack v5.55.0 : JavaScript 번들러, 변경사항
- Puppeteer v10.4.0 : Headless Chrome의 Node.js 라이브러리, 변경사항
- Deno v1.14.0 : TypeScript 런타임, 릴리스 공지
deno compile
개선: 크로스 컴파일, 출력 크기의 60% 감소
- Meteor v2.4 : 웹앱 플랫폼, 릴리스 공지
- CDK for Terraform v0.6.0 : Terraform Cloud Development Kit, 릴리스 공지
- MUI v5.0.0 : Google 메터리얼 UI를 구현한 React 컴포넌트, 릴리스 공지
- Spring Tools 4.12.0 : Spring 코딩 환경을 위한 도구, 릴리스 공지
- Vite v2.6 : 프론트엔드 빌드 도구, 변경사항
- Linkerd v2.11 : Kubernetes 서비스 메쉬, 릴리스 공지
- Node.js v16.10.0 (Current) : 자바스크립트 런타임, 릴리스 공지
- Node.js v14.18.0 (LTS) : 자바스크립트 런타임, 릴리스 공지
- V8 v9.5 : JavaScript 엔진, 릴리스 공지
- Elastic Stack v7.15.0 : 엘라스틱 스택, 릴리스 공지
- Docker Desktop v4.1 : 데스크톱용 Docker 애플리케이션, 릴리스 공지
Outsider
2021/10/02 21:38
2021/10/02 21:38
Comments