웹개발 관련
- Aspect Ratio is Great : 선호하는 비율을 지정하는
aspect-ratio가 대부분의 브라우저에서 지원되어 이제 쓸 수 있고 장점이 많다고 얘기하는 글이다. 이전에는 요소의 비율을 맞추려면 padding hack을 써서 비율을 강제로 맞추어 주었어야 했는데 aspect-ratio를 사용하면 쉽게 원하는 비율에 맞출 수 있고 object-fit과도 잘 어울려서 원하는 이미지를 원하는 비율로 쉽게 보여줄 수 있다.(영어)
- 벨로그에 다크 모드 적용하기 : 국내에서 많이 사용하는 블로그 플랫폼인 Velog에 다크 모드를 적용한 과정이다. 처음에는 Styled Components의 ThemeProvider를 고려했으나 SSR의 경우 처음 사용자의 테마를 알 수 없는 문제가 있어서 CSS Variable을 알아보기 시작했고
prefers-color-scheme 미디어 쿼리를 이용하면 사용자의 컬러스킴도 알 수 있어서 처음부터 사용자에게 맞는 모드로 보여줄 수 있어서 CSS Variable을 선택했다고 한다. 다크모드를 준비하기 위해서 각 상황에 맞는 색상 팔레트를 준비하고 이를 코드로 변환해서 다크 모드를 지원하게 되었다고 한다.(한국어)
- Building an adaptive favicon : 최신 브라우저가 파비콘에 SVG도 지원함에 따라
<link rel="icon" href="/favicon.svg" type="image/svg+xml">처럼 SVG 파비콘을 연결하고 prefers-color-scheme 미디어 쿼리를 이용해서 사용자의 테마에 따라 다크/라이트 파비콘을 보여주도록 적용하는 방법을 설명한다. 현재 파비콘에서 미디어쿼리는 파이어폭스와 크로미움 기반 브라우저만 지원한다.(영어)
- Design Systems Demystified : 디자인 시스템의 특징인 디자인 언어 시스템, 컴포넌트 라이브러리, 디자인 리소스, 문서화 시스템, 코드 인프라스트럭처, 거버넌스 시스템으로 정리하고 각 특징에 대한 설명과 관련 도구를 정리한 사이트이다.(영어)
- Announcing Flutter for Windows : iOS, Android 등 크로스 플랫폼 앱을 만들 수 있는 Flutter가 Windows를 지원하기 시작했다.(영어)
그 밖의 개발 관련
- Competitive programming with AlphaCode : 바둑을 두는 AlphaGo를 만들었던 DeepMind에서 프로그램을 작성하는 AlphaCode를 공개했다. 알고리즘 문제 풀이 사이트인 Codeforces와 협력해서 최근 문제 10개를 기준으로 실험한 결과 상위 54%에 랭크되었다고 한다. 상위에 랭크된 것은 아니지만 의미 있는 결과이고 AlphaCode는 알고리즘 문제를 입력으로 받아서 출력으로 프로그램을 작성한다. 사용된 데이터 세트는 GitHub CodeContests 저장소에 공개되어 있고 AlphaCode Attention Visualization에서 처리되는 과정을 볼 수 있다.(영어)
- 2022년 1월 100% 할인 이벤트 장애 부검 : 인프런에서 연초 이벤트를 진행하면서 겪은 장애 상황을 정리한 글이다. Node.js로 작성된 모노리식 서버를 AWS ECS Fargate로 서버를 운영하고 Aurora PostgreSQL을 사용 중인데 연초 이벤트로 트래픽이 증가하면서 며칠에 걸쳐서 큰 장애를 겪었다고 한다. 원인을 알고 보면 쉽지만, 장애는 급한 상황이고 원인 파악에도 시간이 걸리는 경우가 많고 어떤 서비스든 겪을 수 있기 때문에 이렇게 각 상황에 가설을 세우고 원인을 찾아서 해결해 나가는 과정이 정리된 글을 소중하다.(한국어)
- A toy DNS resolver : 도메인의 IP를 알아내는 DNS 질의의 동작 방식을 설명하고 Go로 20라인의 간단한 DNS 리졸버를 구현해서 동작 방식을 이해하기 쉽게 설명한 글이다. 초반에 만화로 그린 DNS 질의 과정만 봐도 이해하기가 쉬운데 이미 알고 있는 루트 네임 서버에 질의한 뒤 알려주는 네임 서버를 따라가면서 계속 질의해서 결국 IP를 알아내게 되는데
dig 명령어를 사용할 때처럼 DNS 질의를 할 때 나오는 Question, Answer, Authority, Additional 섹션에 대해서도 이해하기 쉽게 나와 있다. Question은 질의하는 부분이고 Answer는 해당 도메인의 IP 주소가 담겨있고 이 IP를 찾을 수 있는 네임 서버는 Authority에, 이 네임 서버들의 IP 주소는 Additional에 담겨있다.(영어)
- Pay attention to WebAssembly : WebAssembly에 주목해야 하는 이유를 정리한 글이다. Wasm의 바이너리 형식은 표준화되어 Wasm 런타임만 있으면 실행할 수 있고 C, C++, Rust, Go, Python, Ruby 등의 언어를 Wasm으로 컴파일할 수 있는 데다가 콜드 시작 시간은 빠르고 네이티브의 가까운 성능을 보여주는 데다가 보안에도 좋다고 설명하고 있다. 그래서 앞으로 JavaScript의 속도를 높이고 프로그래밍 언어 간의 상호운용성을 높일 수 있고 애플리케이션이 Wasm으로 플러그인 시스템을 제공할 수 있다고 한다. WebAssembly를 이용한 새로운 애플리케이션 아키텍처가 생길 것이고 Docker와 통합되고 서버리스/엣지 프레임워크의 표준을 이끌 수 있다고 예측한다. 그리고 모든 언어에서 그렇듯 Wasm에도 WAPM이라는 패키지 매니저가 있지만 거의 운영되지 않으므로 이 부분도 기회가 될 것이라고 하고 있다.(영어)
- golangci-lint를 이용하여 코딩 스타일을 효과적으로 관리하기 : golang을 쓰면서 팀 내의 코드 컨벤션을 합의하고 이를 자동으로 검사하기 위해 golangci-lint를 선택했다. GitHub Actions를 잘 지원하고 있고 로컬 개발에서도 사용하기 쉬웠기 때문에 이 도구를 선택했고 CI 적용하자 이전에 발견하지 못했던 컨벤션 누락도 잡아낼 수 있었다고 한다.(한국어)
- Include diagrams in your Markdown files with Mermaid : 텍스트 기반으로 다이어그램을 그릴 수 있는 Mermaid를 GitHub에서 지원하게 되어 이슈나 Pull Request 등 GitHub의 마크다운을 작성할 수 있는 곳에서 간단히 다이어그램을 포함할 수 있게 되었다.(영어)
- CURL DASH-DASH-JSON :
curl에 JSON을 보낼 수 있는 --json 옵션이 추가되었다. 이 옵션은 curl 7.82.0부터 사용할 수 있고 2022년 3월 초에 릴리스 될 예정이다.(영어)
인프라 관련
- VPC Flow logs는 네트워크 문제 분석에 활용할 수 있을까? : AWS에서 네트워크 문제를 분석하기 위해 VPC의 Flow logs를 사용하는 방법을 설명한 글이다. Flow logs는 VPC 전체 네트워크뿐만 아니라 특정 서브넷이나 ENI의 트래픽만도 수집해서 볼 수 있는데 기본 형식에는
tcp-flags가 없어서 커스텀 포맷을 사용하면 이 값도 수집해서 볼 수 있다. 네트워크 문제 분석이 쉽지 않은 상황에서 유용한 기능이다.(한국어)
- 스타트업에서 AWS IAM 권한 관리 잘 하는법 : AB180에서 AWS의 권한 관리를 위해 Jira로 권한 신청을 하도록 했지만 권한 부여에도 시간이 오래 걸리고 어떤 권한을 요청해야 하는지 모르는 등의 문제로 고통을 받고 있다가 Netflix가 만든 ConsoleMe를 도입했다고 한다. Console의 웹 콘솔에서 롤을 선택해서 바로 권한을 신청하고 정책 JSON에 대한 유효성 검사도 해주고 있어서 실수를 방지할 수 있는 데다가 리뷰하고 승인만 하면 클릭만으로 권한을 부여할 수 있게 되었다. 더군다나 ConsoleMe가 STS를 통한 임시 권한도 발급해 주기 때문에 안전하게 AWS를 이용할 수 있게 되었다고 한다.(한국어)
- Consul Streaming: What’s behind it? : Consul에 새로 추가된 스트리밍 기능을 설명한다. 기존에는 에이전트가 서버에 요청을 보내고 대기하고 있으면 변경사항이 생겼을 때 모든 결과를 보내다 보니 수천 수만 대의 인스턴스에서 부하가 심해서 새 인스턴스를 추가할 때마다 성능이 신경 쓰일 수밖에 없었다. 스트리밍 기능은 해당 서비스의 변경사항만 gRPC로 보내기 때문에 성능과 밴드위스에서 이득을 크게 얻을 수 있다.(영어)
볼만한 링크
- 출시 3일 만에 180만명이 참여한 '내 트리를 꾸며줘!' : 작년 크리스마스에 "내 트리를 꾸며줘"라는 사이드 프로젝트로 큰 인기를 끌었던 산타파이브가 사이드 프로젝트를 시작하고 제작한 과정이 정리된 글이다. 인터뷰 형식으로 되어 있어서 팀 멤버들의 생생한 의견과 사용자가 늘려가면서 해결했던 긴박한 상황을 알 수 있다. 글로 정리되어 사이드 프로젝트로 얼마나 흥미로운 경험을 했는지 알 수 있다.(한국어)
- 스포티파이 최악의 날 : 전설적인 록스타 닐 영이 Spotify에 공개서한을 보내며 "조 로건 익스리언스"의 팟캐스트를 내리거나 자신의 음원을 내리라고 했는데 스포티파이는 닐 영의 음악을 내려버렸다. "조 로건 익스리언스"는 2020년 스포티파이가 1억 달러에 독점 계약을 한 팟캐스트로 코로나 백신에 대한 가짜 뉴스를 퍼트려서 더욱 이슈가 되기도 했고 이러한 가짜 뉴스를 많이 얘기하는 팟캐스트이다. 닐 영에 이어 조니 미첼도 스포티파이에서 음악을 내리면서 많은 뮤지션이 반대 입장을 밝히며 상황이 심각해지자 스포티파이는 콘텐츠 권고안을 발표하는 등 수습에 나섰지만, 주가도 많이 내려가며 큰 타격을 받고 있다. 이어진 글 음악 대신 팟캐스터를 택하다도 있다.(한국어)
IT 업계 뉴스
프로젝트
버전 업데이트
- Laravel v9.0.0 : PHP 웹 프레임워크, 릴리스 공지
- Elastic Stack v8.0.0 : 엘라스틱 스택, 릴리스 공지
- Font Awesome v6.0.0 : 벡터 아이콘, 릴리스 공지
- Electron v17.0.0 : 크로스 플랫폼 데스크톱 애플리케이션 플랫폼, 릴리스 공지
- mdx v2.0.0 : JSX 확장 마크다운, 릴리스 공지
- EdgeDB v1.0.0 : 그래프-관계형 데이터베이스, 릴리스 공지
- Babel v7.17.0 : JavaScript 컴파일러, 릴리스 공지
- Open Policy Agent v0.37.0 : 클라우드 네이티브 환경의 정책 엔진, 릴리스 공지
- Jaeger v1.31.0 : 분산 트레이싱 시스템, 변경사항
- Node.js v17.5.0 (Current) : 자바스크립트 런타임, 릴리스 공지
- Node.js v16.14.0 (LTS) : 자바스크립트 런타임, 릴리스 공지
- nest.js v8.3.0 : Node.js 웹 프레이워크, 변경사항
- ESLint v8.9.0 : JavaScript 코드 분석 도구, 릴리스 공지
- Gatsby v4.7.0 : 정적 웹사이트 생성기, 릴리스 공지
- Parcel v2.3.0 : 웹 애플리케이션 번들러, 변경사항
- Prisma v3.9.0 : TypeScript/Node.js 데이터베이스 툴킷, 릴리스 공지
- Rollup v2.67.0 : JavaScript 번들러, 변경 사항
- Bootstrap Icons v1.8.0 : Bootstrap에서 제공하는 아이콘, 릴리스 공지
- Meteor v2.6 : 웹앱 플랫폼, 릴리스 공지
- ember v4.2.0 : JavaScript 프레임워크, 변경사항
Outsider
2022/02/16 09:38
2022/02/16 09:38
Comments