Outsider's Dev Story

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

기술 뉴스 #183 : 21-10-02

웹개발 관련

  • 효율적인 다크 모드 구현을 위한 배경/전경 컨텍스트 기반의 컬러 팔레트 만들기 (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를 플랫폼을 구축했다고 한다.(한국어)

인프라 관련

  • Debugging with eBPF Part 3: Tracing SSL/TLS connections : eBPF를 이용해서 SSL/TLS 연결을 추적하는 방법을 설명한다. BPF에서는 커널이 BPF 프로그램을 실행하고 다시 원래의 프로그램을 실행하기 때문에 프로그램에 영향을 적게 주고 네트워크 트래픽을 추적할 수 있다. 네트워크를 추적하기 위해 리눅스의 시스템호출인 send(), recv()에 BPF kprobe를 배치할 수 있는데 SSL/TLS는 암호화되므로 TLS 라이브러리에 SSL_write와 SSL_read에 BPF uprobe를 이용해서 SSL/TLS 트래픽을 추적한다.(영어)
  • Kubernetes에 컨트리뷰션 하는 아주 자세한 방법을 알려드립니다. : 카카오에서 Kuberentes 클러스터를 운영하면서 Kubernetes CRI에 기여하면서 알게 된 기여방법을 정리한 글이다.(한국어)

    • 기여하고자 하는 코드가 어떤 SIG(Special Interest Group)에 속하는지를 파악한다.
    • 버그 수정, 동작을 변경하지 않는 리팩토링, 성능 개선, 테스트 코드 수정 등은 KEP를 작성하지 않는다.
    • 새로운 오브젝트나 기능을 제안, 기존 API와 기능의 동작을 변경하는 경우, 변경사항이 사용자에게 영향을 줄 때에는 KEP(Kubernetes Enhancement Proposal)를 작성한다.
    • 코드는 kuberntes 저장소, KEP는 enhancements 저장소, 문서는 website 저장소에 PR을 올린다.
    • PR을 올린 후에도 SIG의 Slack 채널에서 PR에 대한 설명과 리뷰요청을 하는 게 좋다.
    • Kubernetes org 멤버만이 CI를 실행할 수 있다.
    • 승인받을 준비가 되었다면 Slack 채널에서 SIG 리더나 승인자를 설득해야 한다.
  • Announcing Terraform AWS Cloud Control Provider Tech Preview : Terraform AWS Cloud Control 프로바이더가 테크 프리뷰로 공개되었다. 이 프로바이더는 AWS의 리소스를 관리할 수 있는 AWS Cloud Control API를 이용하고 테라폼 프로바이더에 관한 코드를 자동생성할 수 있기 때문에 기존 AWS 프로바이더보다 AWS의 새 서비스를 더 빠르게 지원할 수 있을 것으로 기대하고 있다고 한다. 이 새 프로바이더는 기존 AWS 프로바이더와 함께 사용할 수 있고 기존 AWS 프로바이더도 계속 관리될 것이다.(영어)
  • Announcing Cloudflare R2 Storage: Rapid and Reliable Object Storage, minus the egress fees : Cloudflare가 Amazone의 S3와 API가 완전히 호환되는 오브젝트 스토리지 R2를 공개했다.(영어)
  • Amazon Managed Service for Prometheus 정식 출시 – Alert Manager 및 Ruler 추가 지원 : Prometheus의 아마존 매니지드 서비스 Amazon Managed Service for Prometheus가 정식 출시되었다. 이 서비스에는 Prometheus를 롱텀 스토리지인 Cortex가 포함되어 있고 알림 관리자도 포함되어 있다.(한국어)

볼만한 링크

  • 남의집, 당근마켓에서 투자받다 : 모임을 연결해주는 남의집이 사업 방향에서 여러 시도를 하면서 투자를 받게 되는 과정을 설명한 글이다. 첫 IR에서 투자유치에 실패하고 대출금으로 남의집을 업무 공간으로 이용하는 홈 오피스를 런칭했으나 호스트보다 게스트가 많지 않아 실패했고 남은 돈은 많지 않았다. 자도 작년에 재택 하면서 좀 다른 곳에서 업무를 할까 하다가 남의집을 알게 되었다.(결국 이용은 안 했었지만...) 회사의 남은 돈을 직원들에게 공유하고 6개월 만에 새로운 시도를 해서 투자유치를 성공시키자고 각오를 세운 뒤 가게 점주들이 모임을 만들어서 제공하고 사람들이 참여하게 되면서 이 접근이 꽤 성공적이라는 것을 알게 되었고 이 가운데 회사가 풀고 푼 미션을 확실하게 정리할 수 있었다고 한다. 이후 이 사업 방향이 당근마켓하고 어울린다고 생각하게 되어 결국 당근마켓의 투자를 받게 되었다. 결과는 좋지만, 중간에 얼마나 맘고생이 심하셨을지가 느껴지면서 솔직하게 사업에 접근하는 부분이 좋았다.(한국어)
  • READMEs for organization profiles : GitHub 조직에 README.md를 작성해서 조직의 홈 화면을 꾸밀 수 있는 기능이 추가되었다.(영어)

IT 업계 뉴스

  • GitLab S-1 : DevOps 플랫폼인 GitLab이 상장을 위해 증권거래소에 S-1 문서를 제출했다.(영어)

프로젝트

  • cheat : CLI에서 명령어의 사용법을 볼 수 있는 치트시트를 만들고 볼 수 있는 프로그램. cheat tar같은 식으로 사용법을 볼 수 있다.
  • Waydroid : Linux에서 안드로이드를 컨테이너 기반으로 실행하는 프로젝트
  • nginx playground : nginx config 설정을 수정하고 바로 요청을 보내서 설정을 테스트할 수 있는 웹사이트로 사용 방법과 관련 내용은 블로그 글을 참고하면 된다.
  • W3C Design System : W3c에서 사용 중인 디자인 시스템을 공개햇다.
  • Mozilla Observatory : 웹사이트 주소를 입력하면 해당 사이트의 보안 정도를 측정해 주는 사이트.
  • Noto: A typeface for the world : Noto 폰트의 새 홈페이지
  • Rover : Terraform의 플랜 파일을 파싱해서 시각화해 주는 도구
  • Fixture Monkey : Naver에서 공개한 오픈소스로 테스트에 필요한 테스트 객체를 만들어 주는 Java 라이브러리로 지난 2년간 네이버 내부에서 비즈니스 로직을 테스트하는 데 사용되었다고 한다.
  • borb : PDF 파일을 읽고 쓰고 수정할 수 있는 Python 라이브러리

버전 업데이트

2021/10/02 21:38 2021/10/02 21:38
Response : No Trackback , No Comment

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

Leave a Reply

Comments

: 1 : ... 90 : 91 : 92 : 93 : 94 : 95 : 96 : 97 : 98 : ... 1638 :