프론트에서 안전하게 로그인 처리하기 (ft. React) : JWT로 로그인하는 방식을 설명하고 XSS 공격과 CSRF 공격 방법에 대해서 설명한 뒤에 브라우저에서 토큰을 저장하는 방법을 비교해서 먼저 개념을 정리해 준다. 이런 부분을 고려해서 refresToken은 secure/httpOnly 쿠키로 저장하고 accessToken은 JavaScript에서 가지고 있다가 요청의 헤더로 넣어서 보내는 방식을 설명하고 예제를 보여주고 있다. 글에도 있듯이 보안이 이 방법 하나로 모든 것을 처리할 순 없지만 많이 고민하신 것 하고 이해하기 쉽게 잘 정리되어 있다.(한국어)
Recoil 레시피: 서버 사이드 렌더링 : Facebook에서 만든 상태관리 라이브러리 Recoil로 서버 사이드 렌더링을 하는 방법을 살펴본다. 서버에서 HTML을 받아온 뒤 동작할 수 있도록 hydration하는 과정을 Redux로는 어떻게 하는지 살펴보고 Recoil로는 어떻게 hydration 하는지를 보여주어 비교할 수 있게 해준다.(한국어)
자바스크립트 센트리는 어떻게 동작할까? : 오류를 수집해주는 Sentry의 JavaScript SDK의 코드를 분석해서 궁금했던 동작 방식을 정리한 글이다. Sentry가 오류 수집에 GlobalEventHandlers.onerror와 unhandledrejection 이벤트를 이용하고 있고 네이티브 API를 몽키패치해서 사용하고 있으며 오프라인 상태에서는 IndexedDB에 저장해 두었다가 온라인이 되면 서버로 전송하고 있다고 한다. 분석한 로직의 링크를 추가해 놓으셔서 비슷한 관심이 있으면 코드와 같이 볼 때 훨씬 쉽게 볼 수 있다.(한국어)
LinkeDOM: A JSDOM Alternative : 웹사이트 테스트 목적으로 JSDOM을 많이 사용하는데 링크드 리스트를 JSDOM보다 메모리도 적고 속도도 빠른 LinkeDOM을 만들어서 공개했다. 글에서는 기존에 많이 사용하던 JSDOM과 basicHTML과 비교해서 성능을 보여주고 있다.(영어)
그 밖의 개발 관련
GitHub: how we built the homepage-directly from the voices of our designers and developers: 작년 말 GitHub 홈페이지를 리뉴얼하면서 어떤 과정을 통해서 홈페이지를 새로 만들었는지 5편의 글로 정리했다.(영어)
GitHub: how we built our new homepage : 홈페이지의 지구를 three.js를 이용해서 WebGL로 그렸고 지구에 Pull Request를 표시하면서 사용자가 접속했을 때 자신의 위치로 보이도록 타임존을 이용했다. 타임존은 정확한 사용자의 위치를 보여주진 않지만 빠르게 보여줄 수 있다. 풀 리퀘이스는 어디서 만들어졌고 어디서 머지되었는지를 핑크색 라인으로 보여준다. 성능 최적화를 위해서 antialias를 껐고 이로 인한 부자연스러움을 줄이기 위해 지구본에 후광을 넣었고 기본적인 지구본을 SVG로 보여주고 Web Animations API로 DOM은 건드리지 않은 채로 자연스럽게 보여줄 수 있게 했다.
Visualizing GitHub’s global community : 그냥 애니메이션이 추가된 지구본이 아니라 실제 데이터를 이용하길 원했다. 프로덕션 데이터를 직접 조회할 수는 없었기에 데이터 웨어 하우스에 저장된 데이터를 Presto를 이용해서 쿼리할 수 있었다. 저장소에 가중치를 주어서 사용자가 관심 가질 만한 저장소의 풀리퀘스트만 가져오도록 하고 풀 리퀘스트가 열린 곳과 머지된 곳의 위치를 표시하기 위해 Mapbox의 지오코딩 API를 사용했다.
Making GitHub’s new homepage fast and performant : 웹페이지 성능을 위해 Core Web Vitals를 목표로 사용했다. 사용자 스크롤에 따라 애니메이션과 인터렉션을 활성화하기 위해 보통 뷰포트의 요소 위치에 따라 동작하게 하는데 IntersectionObservers를 이용해서 뷰포트에서 앨리먼트가 보이는지 쉽게 추적할 수 있었다. 불필요한 애니메이션이 발생하지 않도록 IntersectionObservers에 의해 애니메이션이 실행되도록 해서 CPU 사용량과 스타일 재계산을 크게 개선했다. 비디오 재생도 IntersectionObservers에 따라. 실행되도록 했다. 이미지 최적화를 위해 PNG는 용량이 너무 크고 WebP는 일부 환경에서 지원되지 않으므로 base64로 인코딩된 투명한 JPG를 SVG로 감산 형태를 사용했다.
How we illustrate at GitHub : GitHub의 아바타인 Mona로 GitHub을 설명하게 하며 처음에는 텅 빈 행성에 "Where the work builds software"라는 문구를 쳐다보며 서 있고 스크롤 하면서 GitHub의 고유 기능을 보여주도록 했다. 시각적으로 Git의 라인을 보여주도록 했고 일러스트나 컬러 등에서 GitHub을 나타낼 수 있도록 했다.
How we designed and wrote the narrative for our homepage : 홈페이지를 개편하면서 시각적인 부분뿐 아니라 GitHub을 사용하는 하루의 경험을 보여주기를 원했다. Primer는 GitHub의 디자인 시스템이었지만 마케팅과 브랜딩의 요구에 따라 확장해야 해서 무드 보드를 살펴보았다. Mona the Octocat과 그 친구들을 보여주고 Alliance 폰트를 사용했다. 이러한 작업을 위해 Figma, Slack, GitHub을 사용했고 스토리의 아웃라인을 만들기 위해 마크다운으로 공유해서 구체화한 뒤에 공동 작업을 시작했다. 콘텐츠가 길지만, 방문자가 각 섹션에 흥미를 느끼도록 각 섹션을 배치하고 애니메이션을 넣으면서도 성능에 문제가 되지 않도록 신경 썼다.
개발자, 트렌드를 버리다 — 2년후 소감 : 웹 기반 웹디자인 도구를 이지로직 스튜디오를 2년째 만들고 있는 이지로직님이 지난 1년간의 작업한 경험을 공유한 글이다. 벡터 에디터로 만들기 위해서 Matrix를 구현했고 이에 따른 단일 선택/멀티 선택에서 어떤 영향을 주었는지를 설명하고 관련해서 Path 수정은 어떻게 개선되었는지 설명하고 있다. 글 마지막에 나오는 팁만으로도 하나의 글이 될 만큼 자세하게 정리되어 있어서 웹으로 비슷한 구현을 한다면 도움 될 내용이 많이 담겨있다.(한국어)
ARCHITECTURE.md : 만라인에서 20만 라인 정도의 오픈소스 프로젝트를 유지보수 하고 있다면 READE와 CONTRIBUGING에 추가적으로 ARCHITECTURE 문서를 추가해 달라고 권하고 있다. 핵심 개발자와 달리 가끔 기여하는 기여자들은 프로젝트의 아키텍처에 관한 지식이 부족해서 패치를 작성하는데 2배에서 10배 정도의 시간이 걸리는데 ARCHITECTURE 문서가 있다면 이 차이를 줄여줄 수 있다. ARCHITECTURE 문서는 짧게 작성하되 코드와 동기화하지 말고 1년에 두 번 정도 확인하는 게 좋다고 한다. 해결하려는 문제의 조감도로 시작해서 약간 더 자세한 코드 맵을 작성해서 어떤 기능을 수행하는 것이 어디 있는지 알 수 있어야 하고 레이어와 시스템의 경계도 알려주는 게 좋다고 하고 있다.(영어)
입문자를 위한 리눅스/맥 커맨드라인 셸 사용법 : 셸 명령어를 상세하게 설명한 문서이다. pwd, cd 처럼 간단한 명령어부터 스택오버플로우같은 곳에서 복사해서 사용하면서 자주 봤지만 동작은 자세히 몰랐을 수도 있는 수많은 명령어와 셸의 동작 방식에 대해서 자세히 설명하고 있어서 여기 나온 명령어만 익혀도 셀을 이해하고 사용하는데 어려움이 없을 정도로 잘 정리되어 있다.(한국어)
RaptorX: Building a 10X Faster Presto : Presto의 성능은 10배 가까이 높일 수 있는 RaptorX를 공개했다. Disaggregated Storage는 스토리지와 컴퓨팅을 각각 스케일할 수 있어서 널리 사용되고 있지만, 네트워크를 통해 많은 데이터를 가져와야 하므로 쿼리 지연시간이 문제가 되었다. RaptorX는 계층적 캐시를 도입해서 이 문제를 해결했다고 한다.(영어)
New global ID format coming to GraphQL : GitHub이 현재 GraphQL에서 사용하는 ID 형식이 GitHub의 성장에 충분하지 않다고 판단해서 새로운 ID 형식을 도입한다고 한다. 새 ID는 기존보다 길어질 것이고 3단계로 도입할 것이라고 하므로 이 값을 저장해서 사용하고 있다고 주의해야 한다.(영어)
새 ID 형식으로 도입해서 새로 생성된 객체에만 이 ID가 적용된다.
마이그레이션 단계로 예전 ID 형식을 새 형식으로 마이그레이션 도구를 제공할 예정이다.
예전 ID 형식을 폐기하고 모든 API가 새 ID 형식을 반환한다.
인프라 관련
Kubernetes Network & Cilium : Kubernetes의 네트워크 플러그인 중 하나인 Cilium을 살펴보기 위해 Kubernetes에서 네트워크가 어떻게 동작하는지 살펴보고 대표적인 Calico와 Cilium을 살펴보고 정리한 문서다. Cilium이 사용하는 eBPF를 설명하고 Cilium의 동작 방식을 자세히 설명하는데 공부하면서 알게 된 레퍼런스 문서가 다 정리되어 있어서 관련 내용을 공부하기 좋은 문서다.(한국어)
온라인 협업 도구 노션(Notion) 장애와 DNS 문제 대응 : 지난 12일 Notion의 DNS가 조회되지 않으면서 2시간 이상 전면 장애로 이어졌다. 아직 Notion 측에서 자세한 장애 포스트모템을 올리지 않았지만(올리기는 하려나), 이때 상황과 공개된 정보를 이용해서 어떤 문제가 있었고 어떻게 해결되었는지를 설명한 글이다. 장애 당시 notion.so 도메인이 ClientHold 상태가 된 것으로 보아 .so를 관리하는 소말리아 네트워크 인포메이션 센터에서 중지를 시킨 것으로 추측된다. 흔한 사건은 아니지만 이런 상황에서 whatsmydns.net같은 사이트에서 DNS 전파 상태를 보는 방법들도 나와 있다.(한국어)
쿠팡 사야하나요? 뉴욕증시 상장신청서 번역해드림 : Coupang이 뉴욕증시에 S-1 상장신청서를 제출했는데 이바닥뉴스에서 이 상장신청서에서 주요 내용을 정리하고 김범석 의장의 레터를 번역했다. 상장신청서에 명확한 수치가 나오자 매출이 큰 폭으로 증가하고 있고 한 번이라도 구매한 사용자는 점점 더 많이 사는 추세를 보인다고 한다. 오랫동안 궁금해하던 쿠팡의 상장이므로 회사에서 생각하는 방향과 그 결과를 살펴보기 좋은 글이다.(상장신청서를 직접 읽어보기는 쉽지 않으므로..)(한국어)
Businesses at Work powered by Okta : 인증 서비스인 okta에서 발생한 리포트로 고객들이 사용하는 서비스를 okta에 연결해서 사용하므로 그 통계를 보고서로 만든 것이다. 42페이지로 된 보고서로 Microsoft 365를 가장 많이 사용하고 있고 그 뒤를 AWS, Salesforce, Googole, Atlassian이 잇고 있고 빠르게 성장하는 앱으로는 amazon, business, miro, Figma, Monday 등이 있다. 서비스의 트렌드를 보고 싶으면 살펴보기 좋은 보고서다.(영어)
Donating Docker Distribution to the CNCF : Docker가 Docker Distribution를 CNCF에 기부했다. Docker Distribution은 컨테이너 레지스트리의 기반이 되는 오픈소스 코드로 Docker Hub에서도 사용되고 있는 컨테이너 레지스트리의 레퍼런스 구현체이다. 처음에는 Python으로 작성되었지만, 지금은 Go로 작성되어 있다.(영어)
프로젝트
github1s : GitHub에서 도메인에 1s를 붙여주면 해당 프로젝트를 웹 브라우저에서 바로 VS Code로 열어준다.
sqlcommenter : 구글에서 공개한 오픈소스로 미들웨어/플러그인 형식으로 ORM의 SQL을 확장해서 실행 전에 성능에 영향을 주는 쿼리를 분석해 주는 도구이다. Python, Ruby, Node.js, Java를 지원하고 디비는 Postgresql, MySQL, MariaDB 등을 지원한다.
iamlive : 터미널에 실행해두면 로컬에서 AWS API를 사용할 때 필요한 IAM 정책을 생성해 주는 도구.
jandi : 1일 1커밋을 위해 macOS의 메뉴바에서 일간 커밋 상태를 볼 수 있게 만든 macOS 앱.
Comments