2020년과 이후 JavaScript의 동향 - 라이브러리와 프레임워크 1, 2 : Naver D2에서 계속 시리즈로 나오는 JavaScript 동향을 정리한 글의 라이브러리/프레임워크 편이다. 다양한 프레임워크를 모두 살펴보기가 쉽지 않은데 꽤 자세하게 현재 동향을 알려주기 때문에 각 프로젝트가 어떻게 움직이고 있는지 파악하기 좋다(한국어)
React: 현재 가장 인기 있고 많이 사용되는 프레임워크다. 최신 버전인 17 릴리스에서 달라진 점을 자세히 살펴보고 올해 발표된 Recoil 상태 관리 라이브러리의 특징을 설명한다.
Angular: 차세대 렌더러인 Ivy가 v9 부터 탑재되었고 이를 통해 렌더링 과정이 Incremental DOM을 통해 어떻게 개선되었는지 설명한다. 이를 통해 앱의 용량이 줄어들고 메모리도 적게 사용하게 되었다. 최근 버전인 v11의 변경 사항을 살펴보고 이후 릴리스에서는 필수 스타일 인라인, 향상된 오류 메시지, e2e 테스트 전략 등의 작업이 진행 중이라고 한다.
Vue.js: 2년 동안 개발되던 Vue 3가 드디어 공개되었다. 새로운 JavaScript 기능을 잘 지원하고 기존의 설계 문제를 해결하기 위해 진행된 Vue 3의 과정과 달라진 부분을 설명한다.
Svelte: 작년 설문에서 React에 이어 2위를 차지할 정도로 관심을 끌고 있지만 다른 프레임워크에 비해 실제 도입 사례는 부족한 상태이다. 2020년에는 TypeScript 지원이 추가되었고 Sapper 프로젝트를 계승해서 Svelte 앱을 쉽게 만들 수 있는 SvelteKit이 개발 중인데 이를 통해 번들링의 사용자 경험을 개선하고 다양한 서버리스 플랫폼을 지원할 예정이라고 한다.
프론트엔드 개발 ReasonML이라 좋았던 점 : 그린랩스에서 ReasonML로 프론트엔드 개발을 하면서 기존 대비 장점을 설명한다. 모듈 레졸루션을 자동으로 해주어서 장황한 import문을 작성하지 않아도 되고 포메터가 내장되어 있고 오류 메시지가 TypeScript에 비해 훨씬 명확하다. enum과 비슷한 Variant와 패턴 매칭으로 더 명확한 코드를 작성할 수 있는 점 등을 꼽았다.(한국어)
How to Favicon in 2021: Six files that fit most needs : 웹사이트에 Favicon을 추가하려면 수많은 이미지 파일을 다양한 사이즈로 만들어서 추가해야 하는데 SVG로 Favicon을 만들어서 대부분의 사이즈와 플랫폼에 대응하고 구형 브라우저를 위한 ico 파일과 apple과 웹앱을 위한 PNG 이미지 3개로 총 5개의 이미지만 사용하는 방법을 정리했다. 이 5개로 모두 대응이 되고 SVG를 만든 뒤 이를 통해 ICO와 PNG 파일을 생성하는 방법을 설명한다.(영어)
Introducing Cloudflare Pages: the best way to build JAMstack websites : Cloudflare에서 Netlify나 Vercel같은 JAMstack 사이트를 배포할 수 있는 Pages라는 플랫폼을 발표했다. Cloudflare에서 하므로 엣지 서버에 바로 배포되고 IPv6, HTTP/3, TLS 1.3, 최신 이미지 포맷을 모두 지원한다. Git과 통합되어 있으며 미리 보기 URL을 제공하고 브랜치마다 다른 환경을 제공하므로 스테이징 환경을 다양하게 만들어서 쓸 수 있다. 아직 베타라서 신청 후 승인되어야 사용할 수 있다.(영어)
Reducing flaky builds by 18x : 같은 코드에서 빌드가 성공하기도 하고 실패하기도 하는 빌드를 flaky 빌드라고 하는데 GitHub이 내부 CI에서 이 flaky 빌드를 자동으로 추적하는 시스템을 도입해서 flaky 빌드를 1/18로 줄였다고 한다. 이제 CI의 failed가 훨씬 의미 있게 되었다.
처음에는 빌드가 끝나면 같은 커밋의 다른 빌드를 찾아서 결과가 다르면 flaky 빌드라고 표시하고 같은 빌드에서 재시도했는데 결과가 달라지면 flaky 빌드라고 표시했다. 이 방법으로는 25%만 자동으로 탐지할 수 있었다.
3가지 접근으로 재시도하는 방법을 사용해서 90%를 자동으로 탐지할 수 있게 되었다.
같은 프로세스에서 재시도한다. 이 flaky 빌드는 코드의 우연성이나 레이스 컨디션 때문에 발생한다.
같은 프로세스이지만 시간이 지나서 재시도한다. 이 flaky 빌드는 시간에 관해 잘못된 가정을 했을 때 발생한다.
완전히 다른 호스트에서 재시도한다. 이 flaky 빌드는 테스트 순서 의존성이나 공유 상태 때문에 발생한다.
flaky 빌드의 영향도 점수를 계산해서 일정 기준이 넘으면 이슈를 만들어서 해당 커밋을 도입한 것으로 추정되는 개발자에게 할당한다.
Commits are snapshots, not diffs : 사람들이 Git을 어려워하는 이유가 "커밋이 diff가 아닌 스냅숏"이라는 부분을 잘 이해 못 해서 라면서 이 부분을 설명하는 글이다. OID(Object ID)를 중심으로 Git 내부에서 blob, tree, commit가 어떤 의미이고 어떤 역할을 하는지 설명하면서 이를 직접 조회해 볼 수 있는 명령어를 알려준다. 이렇게 Git 내부를 설명한 뒤에는 diff는 스냅숏을 동적으로 비교해서 생성해서 보여주는 것일 뿐임을 알려주고 스냅숏으로 저장하는 구조에서 cherry-pic, rebase가 어떻게 동작하는지, 파일명 변경은 Git이 어떻게 추적할 수 있는지를 설명하는 데 설명이 정말 좋다.(영어)
git clone --filter=blob:none <url>은 blobless 클론이 된다. commit과 tree는 다운로드받지만 blob은 필요할 때 다운로드한다. 그래서 git log같은 명령어는 괜찮지만 git diff 같은 명령어는 실행할 때 blob 객체를 다운로드 받는다. 개발자 환경이나 빌드 시스템에서 사용할 수 있다.
git clone --filter=tree:0 <url>은 treeless 클론이 된다. commit만 다운로드받고 tree와 blob은 필요할 때 다운로드 받는다. 그래서 git log같은 명령어는 괜찮지만 git log -- <path>같은 명령어는 tree가 없음으로 필요한 데이터를 받아야 한다. 한번 사용 후 지울 빌드 환경 같은 곳에서 유용하다.
git clone --depth=1 <url>는 sallow 클론이다. 이는 최신 최근 커밋에서 --depth로 지정한 만만 가져온다. 최신 커밋의 tree와 blob은 모두 있지만, 이전 히스토리에 대한 것이 없음으로 사용이 훨씬 제약적이고 일부 명령어는 동작하지 않는다. 한번 빌드 후 삭제할 빌드 환경에서 유용하다.
Hotwire : Basecamp에서 공개한 모던 웹 애플리케이션을 만드는 새로운 접근으로 서버가 JSON을 응답하는 대신 서버에서 HTML을 내려주어 클라이언트가 JavaScript를 많이 사용하지 않아도 된다고 한다. 이메일 서비스인 Hey에서 이 기술을 사용했다고 하고 다음 3가지 프로젝트로 구성되어 있다.(영어)
Turbo: Hotwire의 핵심으로 페이지 변경, 폼 제출, 페이지를 컴포넌트로 나누는 등의 작업을 한다. Rails 개발자가 아니라 정확한 용도는 모르지만, Rails에 있던 저장소를 보면 Turbolink가 Turbo로 바뀐 것으로 보인다.
Stimulus: Turbo가 80% 정도를 담당하지만, 그 외의 커스텀 코드가 필요한 경우 Stimulus로 HTML 중심의 접근을 할 수 있다고 한다. 이 JavaScript 프레임워크 역시 Hotwire 때문에 처음 만든 것은 아니고 몇 년 전부터 Basecamp가 사용하던 프레임워크다. 기존에 사용하던 프레임워크가 아니라 Hotwire라는 접근으로 인해 얼마나 달라진 지까지는 잘 모르겠다.
Strada: HTML 브릿지 속성을 통해 웹과 모바일 하이브리드 애플리케이션의 네이티브가 서로 통신할 수 있도록 한다고 한다. 지금은 공개 안되었고 2021년에 공개된다고 한다.
인프라 관련
AWS re:Invent 2020년 : 11월 30일부터 3주간 AWS re:Invent가 열렸다.
TIL: eBPF is awesome : eBPF는 샌드박스 유저 스페이스 애플리케이션을 Linux 커널 자체에서 실행할 수 있게 해서 커널을 프로그래밍할 수 있게 한다. 원래 BPF는 네트워크 패킷을 필터링해서 잡아내려고 만들어서 Berkeley Packet Filter이고 지금은 패킷에만 사용하지 않지만, 현대 프로세싱 파워의 장점을 얻기 위해 extended BPF가 되었다. 시스템의 clone 이벤트가 발생하면 Hello World를 출력하는 간단한 eBPF 프로그램을 작성해서 간단한 사용 방법을 설명한다.(영어)
쿠버네티스 따라하기 : Kubernetes 초심자도 따라 할 수 있도록 서비큐라님이 구성한 튜토리얼 사이트다. 친절하게 Kubernetes를 이해할 수 있게 잘 구성되어 있다.(한국어)
#쿠버네티스, 도커 지원 중단 : Kubernetes가 Docker 지원을 중단한다는 게 어떤 의미인지 설명한다. Docker로 만든 이미지는 OCI 표준을 따르고 있어서 다른 런타임에서도 얼마든지 실행할 수 있다. Kubernetes는 컨테이너 런타임과 통신할 때 CRI를 사용하는데 Docker는 이를 지원하지 않아서 그동안 사용하던 Dockershim을 지원 중단하겠다는 얘기이고 결론적으로 Kubernetes 클러스터를 직접 설치해서 관리하지 않으면 문제없다.(한국어)
컨테이너로 데이터센터 네트워크를 모방해 볼 수 있을까? : 보통 이미 구성된 데이터센터의 네트워크를 사용만 하는데 이 네트워크 구성을 더 잘 이해하기 위해 데이터센터의 네트워크를 직접 구현해 보면서 정리한다. 집에 서버를 여러대 구성해서 할 수는 없으므로 Spine와 Leaf로 이뤄진 2티어 구성을 Docker를 이용해서 직접 네트워크를 설정해서 L3까지 구성한 부분의 설명이 나와 있고 이를 자동화한 Ansible 코드가 GitHub에 올라와 있다. 네트워크쪽은 자세히 모르는데 아주 재미있는 시도이다.(한국어)
직원의 회사 기밀 유지 의무를 제거했다. 이러한 문제는 보통 회사 정책에 의해 해결되고 IP 계약에 있을 필요도 없다.
직원이 다른 사람의 NDA나 IP 권리에 관한 어떤 정보도 공유하지 않기로 동의하는 조항을 추가했다. 이는 직원이 이전 계약을 위반하지 않고 회사가 운영할 자유를 가지므로 직원과 회사를 모두 보호하는 데 도움이 된다.
널리 사용되도록 계약을 일반화하려고 미국 주법을 구체적으로 설명하는 부록을 제거했다. 부록은 이제 참조할 수 있도록 다른 문서 있지만, 직원이나 회사의 최종 결정이나 법적 조언으로 간주해서는 안 된다.
"생존권" 조항을 추가해서 법원에서 유효하지 않은 조항이 발견되더라도 다른 조항은 유효하도록 했다. 이는 직원과 회사의 이익을 존중하는 데 도움이 된다.
독일을 시작으로 미국 이외의 사법권에서 BEIPA 2.0을 더 쉽게 도입할 수 있도록 몇 가지 조항을 추가했다.
불필요한 법률 용어를 간소화하고 제거했다.
리멤버 서버/웹 팀은 어떻게 일을 하는가? : 리멤버를 서비스하는 드라마앤컴퍼니의 개발실이 일하는 프로세스와 중요하게 생각하는 부분을 설명한다. 코드 리뷰에서 의미 있는 리뷰를 위해 리뷰어가 먼저 자신만의 답안을 찾은 뒤에 리뷰를 하도록 한다는 부분이 흥미로웠고 PR 템플릿도 다른 곳에서도 참고할 만큼 잘 정리된 것을 보면 오랜 시간 신경 썼다는 게 느껴진다. 안정적인 서비스를 위해 테스트 코드에도 신경 쓰고 오버 커뮤니케이션을 위해서 각 슬랙 채널과 지라를 사용하는 방법도 나와 있어서 다른 회사에서 참고해 보기 좋다.(한국어)
면접관으로 성장하기 : 면접관으로 면접에 참여를 안 하려고 하다가 면접 자리는 평가가 아닌 동료를 찾는 자리라고 생각을 바꾸고 피면접자가 긴장하지 않도록 질문을 준비하고 기술 질문을 하기 위해서 공부하면서 어떤 질문이 더 나은지를 고민하면서 개선해 간 과정이 나아있다. 초반에 나온 대로 평가라기보다는 피면접자를 배려하고 편안하게 면접을 보고 좋은 인상을 받을 수 있도록 노력했다는 게 느껴진다.(한국어)
배달의 민족..만 이제 게르만 민족! – 배민 인수 시즌1 최종화 : 딜리버리히어로와 배달의 민족 인수에 대해 공정위가 배민을 인수하려면 요기요(+배달통)을 매각하라는 조건을 내걸었는데 이 조건에 동의하면서 딜리버리히어로가 배달의 민족을 인수하고 요기요를 팔기로 했다. 공정위에 따르면 배민과 요기요를 합치면 시장점유율이 97%나 된다고 한다. 요기요의 기업가치가 2조 원 정도 된다고 해서 요기요를 누가 살 지가 관심사가 되었다.(한국어)
IT 업계 뉴스
우리가 .ORG를 구한 방법 : EFF의 2020년 리뷰 (eff.org) : ICANN에서 비영리 도메인 .org의 가격 상한을 2019년에 없애버리면서 .org TLD를 관리하는 회사인 PIR이 인기 인수대상이 되고 결국 Ethos Capital가 최종 인수가 결정되었다. 하지만 이 매각을 막기 위해 다양한 단체가 활동하고 이 매각이 적절한지에 대한 의문이 계속 나오면서 결국 PIR 매각이 거부되었다고 한다. 이해를 돕기 위해 한국어로 요약된 GeekNews를 링크했는데 자세한 내용은 원문인 How We Saved .ORG: 2020 in Review에서 볼 수 있다.(한국어)
美 동학개미 기만했나…로빈후드, 711억원 벌금 : 수수료가 없어서 인기를 끌었던 미국 주식 거래 플랫폼 Robinhood가 미 증권거래위원회(SEC)의 조사 결과 "투자자 주식 주문 정보 판매(PFOF)"로 수익을 올리고 고객은 더 나쁜 가격에 처리되어 손해를 본 것으로 밝혀졌다. 이 때문에 로빈후드는 6500만 달러(약 711억 원)의 벌금을 내기로 했다.(한국어)
Czech Startup Founders Turn Billionaires Without VC Help : JetBrains의 기업가치가 70억 달러가 되면서 창업자인 Sergey Dmitriev와 Valentin Kipiatkov가 억만장자가 되었다고 한다. JetBrains는 VC의 투자를 받지 않았기 때문에 주식을 판매해야 하는 압박에 시달리지 않고도 충분한 수익을 만들 수 있게 되었다.(영어)
Comments