[GN#59] ADR을 써야 하는 이유 와 슈퍼셀의 10가지 교훈

2020-08-17 ~ 2020-08-23 사이의 주요 뉴스들
"선택과 집중"은 스타트업, 중견기업, 대기업, 크기에 상관없이 모든 비즈니스의 핵심 키워드입니다. 특히나 초기 스타트업이라면 어떤 것을 선택하고 집중하느냐에 따라 성패가 좌우된다고 얘기합니다. 그런데 우리가 어떤 걸 선택하는 결정을 내렸을 때 그 시절에 왜 그렇게 결정을 했는지는 잘 기억을 하지 못합니다. 회의록을 뒤져서 찾아보면 얼추 따라갈 수는 있겠지만, 그게 말처럼 쉽지 않죠. 비즈니스뿐만 아니라 개발할 때도 미래에 영향을 미치는 다양한 결정을 해야할 것들이 있습니다. 개발 언어를 선택하고, 어떤 아키텍처로 갈 것인가, 프레임워크와 DB는 뭐로 할까 등등.. 우리는 현재의 기술/비즈니스 및 멤버나 조직의 상황에 맞게 하나하나 신중히 결정하고 그대로 진행하게 됩니다. 그리고 6개월에서 1년쯤 지나 새로운 개발팀 멤버가 들어와서 묻는 거죠. '왜 이런 결정을 한 건가요?' 아니면 미래의 내가 묻기도 합니다. '난 그때 왜 그랬을까 ?' 이를 위해서 장황한 설명을 하기도 하고, 온보딩 세션을 만들기도 하고, 과거의 나를 옹호하기 위해 다투기도 하면서 시간을 허비하게 됩니다. 이 때 효율적인 방법중 하나가 ADR ( Architecture Decision Records ) 을 이용하는 것입니다.

ADR은 우리가 어떤 아키텍처적인 결정을 내렸을 때 그걸 기록해 두는 문서를 말하는데요. 뭘 결정했다만 적는 게 아니라, 왜 그런 결정을 내렸는지에 대한 컨텍스트를 다 같이 기록해두어서 차후에 우리가 다시 이슈를 떠올릴 때, 결정하던 시점의 기억을 다시 머리에 넣어주는 용도라고 보시면 될거 같아요. 결정 내용, 고민한 이유, 그 외 고려한 대안들, 회의록, 슬랙에서의 대화 내역, 참고한 링크들 등을 다 포함하는 거죠. 어디 별도로 두는게 아니라, 개발자들이 보는 코드베이스 안에 텍스트 파일로 아예 같이 넣어두는 겁니다. 언제라도 참고 할 수 있게요. 보통은 새 멤버가 들어왔을 때 보여주기 좋겠죠. GitHub에서는 모바일팀이 ADR을 적용하고 있다고 하는데요. 왜 필요한지를 설명하며 이렇게 얘기합니다. "ADR은 당신을 위한 게 아니라, 미래의 당신 / 당신의 동료 / 미래의 동료를 위한 것입니다." 관련해서 예제로 작성된 ADR 들도 간단히 번역해 두었으니 한번 살펴보시기 바랍니다. 프로그래밍 언어 결정을 기록해둔 ADR에서는 현재의 다양한 언어들을 다 비교하고 있어서 재미삼아 읽어보실만 합니다.

2010년에 창업한 슈퍼셀이 10주년을 맞이하며 자신들의 그간 경험을 정리해서 10가지 교훈이라는 제목으로 블로그에 올린 글이 번역되었습니다. 제가 가장 중요하게 생각하는 건 10번째 교훈인 "기업의 가치와 문화를 명문화하세요. 그리고 회사가 배우고 성장하면 지속적으로 개정하세요" 인 것 같습니다. 그래야 앞에서 얘기하는 9가지 교훈이 실천 가능 한거 같아요. 회사가 추구하는 가치와 그걸 뒷받침하는 문화가 명문화되어야 사람들이 어떤 결정을 할 때 행동하는 기반이 되고, 실패해도 시도할 수 있고, 멤버들간에 신뢰할 수 있게 됩니다.

★ 긱뉴스에 올라온 뉴스들을 좀 더 쉽게 말로 설명하는 팟캐스트를 시작했습니다. 이동중에나 운동/운전 하실 때 편하게 들어보세요.

ㅤ → 애플 Podcast로 듣기
ㅤ → 팟티에서 듣기
ㅤ → 팟빵에서 듣기
ㅤ → 구글 Podcast로 듣기


✓ 사내에서 슬랙을 쓰신다면 뉴스채널에 GeekNews SlackBot 을 추가하여 편하게 새 글을 받아보시고, 멤버들에게도 공유해주세요.
✓ 주위분들께 긱뉴스 위클리 - https://news.hada.io/weekly 를 추천해 주세요.
✓ 스팸함에 들어가지 않게 news@hada.io 를 주소록에 추가해주세요.
Twitter , Facebook 에서도 긱뉴스를 받아 보실 수 있습니다.

매주 월요일 아침, 지난 일주일간의 GeekNews 중 엄선한 뉴스들을 이메일로 보내드립니다.


ADR을 써야 하는 이유

ADR = Architecture Decision Records
아키텍처적인 결정을 왜 그렇게 내렸는지 코드 베이스안에 기록해 놓는 것.
GitHub은 iOS/Android 모바일팀에서 이걸 적용하고 있으며, 왜 필요한지를 설명한 글

- 당신을 위한게 아니라, 미래의 당신을 위한 것

ADR은 내가 내린 결정에 대한 반성과정이 아니고, 지금부터 6~12개월후에 이 아키텍처를 결정했을때의 마인드셋을 기억하는데 도움이 됨.
ADR은 결정이 내려지는 시점을 포착하여 회의/줌 미팅/Slack/코드에서 다뤄진 PoC 까지를 모두 포함.
머리에 있는 이 컨텍스트를 말로 끄집어 내서 나중에 이 아키텍처를 다시 살펴볼 때 해당 컨텍스트를 다시 머리에 넣을수 있게 하는 것.

진짜 보너스는 누군가 몇달후에 왜 GitHubAPIClient 모듈이 이렇게 동작하는지 당신을 비난하면서 물어볼 때 나타남.
30분 페어링해서 코드를 설명하는 것 보다, 이 ADR을 던져주고 그 모듈을 빌드하는 동안 내린 결정에 대해 설명할 수 있게 됨.

- 당신을 위한게 아니라, 당신의 동료를 위한 것

ADR은 한줄짜리 "이 기능은 피쳐-#3128의 구현입니다" 라는 한줄짜리 설명보다 더 긴 내용을 적을 것.
동료들이 왜 이 이 기능이 다른 방식이 아닌 이 방식으로 만들었는지를 이해하는데 도움이 되는 좀 더 긴 설명 형식.
(ADR 내에 "고려했던 대안들" , "장점과 단점" 등으로 표현 )

당신에게는 간단한 것도, 동료들에게는 복잡할 수 있음.
시간을 좀 내서, 결정을 내릴때 생각한 과정을 적어두면 팀원들이 당신의 머리속에 들어올 기회를 주게 됨.
ADR을 작성하면 "Decision Socialization(의사 결정의 사회화)"가 가능해짐.
이렇게 하면, 개별적으로 결정을 내리는 대신 팀이 유지관리에 대한 책임을 지는 결정을 내리게 함.

풀 리퀘스트를 올리기전에 ADR을 작성하면 이를 검토하는 팀으로 부터 더 좋은 PR리뷰를 받을수 있음.

- 당신을 위한게 아니라, 미래의 동료를 위한 것

ADR은 당신이 얼마나 똑똑한 지 보여 주거나, 사람들이 당신이 만든 아키텍쳐를 보고 어리둥절하게 하는 것이 아님.
ADR은 새로운 팀원이 들어왔을때 그들이 현재의 코드베이스와 코드베이스가 지난 시간동안 어떻게 발전해왔는지를 이해하는데 도움이 됨.

팀이 확장되고 성장하면서 팀원간의 커뮤니케이션 경로는 늘어남.
이렇게 내린 결정을 적어두면 팀이 성장하면서 새로 합류하는 사람들과도 의사소통 하는데 도움이 됨.

최상의 시나리오는, 당신의 팀원이 새 ADR을 작성해서 당신이 예전에 내렸던 결정을 대체하고, 미래엔 당신의 동료로부터 배울 수 있게 되는 것.

"더 많은 ADR을 작성하세요. 우리 팀이 커지고 코드베이스가 복잡해질 때마다 ADR은 미래의 우리와 현재 팀원과 미래의 팀원을 도울 수 있는 좋은 방법 입니다."

ADR 사례들

CSS 프레임워크 결정
https://github.com/joelparkerhenderson/architecture_decision_record/…
- 이슈 : 웹앱을 위한 CSS프레임워크 결정이 필요. 유명 브라우저 및 화면 사이즈 상관없이 빠르고 안정적이어야 함. 디자인/레이아웃/UI/UX 에서 빠른 이터레이션. 반응형 디자인
* 결정 : Bulma 를 사용하기로 결정
- 전제 : 모던하고 빠르고 반응형인 웹앱을 만들고 싶으니, jQuery는 안쓰고 싶음
- 제약 : jQuery는 쓰지 않아도 되는 프레임워크
- 고려 : 아무것도 안쓰거나, Bootstrap/Bulma/Foundation/Materialize/Semantic UI 중에서 Bulma 와 Semantic UI를 깊게 고민

Monorepo vs Multirepo
https://github.com/joelparkerhenderson/architecture_decision_record/…
- 이슈 : 우리 프로젝트는 세개의 메인 카테고리 - 프론트엔드 UI,미들웨어,백엔드 서버
ㅤ→ SCM으로 git을 사용중인데, monorepo vs polyrepo vs hybrid 를 결정해야함
* 결정 :
ㅤ→ 조직/팀/프로젝트가 작고 빠른 이터레이션일 때는 Monorepo
ㅤ→ 조직/팀/프로젝트가 크고 안정적인게 중요할때는 Polyrepo
- 전제 : 우리가 만드는 코드는 조직을 위한것이고 외부(공공)을 위한것이 아님

프로그래밍 언어 결정
https://github.com/joelparkerhenderson/architecture_decision_record/…
- 이슈 : 소프트웨어 개발용 언어를 결정해야함. 웹 프론트와 백엔드
* 결정 :
ㅤ→ 프론트엔드는 TypeScript
ㅤ→ 백엔드는 Rust
- 전제 :
ㅤ→ 프론트는 일반적이지만 빠르게 개발,배포,반복이 되어야함. 레거시 호환 필요없음
ㅤ→ 백엔드는 일반적인것보다는 약간 높음. 품질,안정성,보안에 대한 고려. 거의 실시간 수준이 필요(GC에 의해서 멈추는것은 없어야함). 함수형 프로그래밍 / 병렬처리 및 멀티코어 프로세싱, 메모리 안전성도 중요함
- 제한 : 메이저 클라우드서비스의 서버리스(Amazon Lamba)에서 꼭 실행가능 해야함
- 고려 : C/C++/Clojure/Elixir/Erlang/Elm/Flow/Go/Haskell/Java/Javascript/Kotlin/Python/Ruby/Rust/TypeScript
- 논쟁 :
ㅤ→ C : 낮은 안전성으로 제외; Rust가 대부분의 것들을 더 잘할 수 있음
ㅤ→ C++ : 난잡(mess)해서 제외; Rust가 대부분의 것들을 더 잘할 수 있음
ㅤ→ Clojure : 뛰어난 모델링; Lisp 과 가장 비슷; JVM상의 훌륭한 런타임
ㅤ→ Elixir : 배포 및 동시성이 뛰어난 런타임; 훌륭한 개발자 경험; 상대적으로 작은 에코시스템
ㅤ→ Erlang : 배포 및 동시성이 뛰어난 런타임; 다소 도전적인 개발자 경험; 상대적으로 작은 에코시스템
ㅤ→ Elm : 전도유망; IBM이 좋은 사례들을 공유중; 작은 에코시스템
ㅤ→ Flow : JS의 흥미로운 개선; 하지만 개발자들이 멀어지는 중
ㅤ→ Go : 뛰어난 개발자 경험; 뛰어난 동시성; 언어를 이상하게 만드는 나쁜결정들이 있었음
ㅤ→ Haskell : 최고의 함수형 언어; 작은 개발자 커뮤니티; 프로덕션 성공 사례가 많지 않음
ㅤ→ Java : 최고의 런타임; 뛰어난 에코시스템; 그저그런 개발자 경험
ㅤ→ JavaScript : 가장 인기있는 언어; 가장 넓은 에코시스템
ㅤ→ Kotlin : Java의 많은 것을 개선; JetBrains의 훌륭한 후원; Java to Kotlin 한 다양한 성공사례
ㅤ→ Python : 시스템 관리쪽에서 가장 인기있는 언어; 좋은 분석 도구; 좋은 웹 프레임워크; Google이 Go를 선택하면서 버려짐
ㅤ→ Ruby : 최고의 개발자 경험; 최고의 웹 프레임워크; 훌륭한 커뮤니티; 엄청 느림; 패키징 하기 어려움
ㅤ→ Rust : 최고의 새 언어;Zero-cost abstractions(추상화해도 속도가 느려지지 않음) 강조; 동시성 강조; 상대적으로 작은 에코시스템; 몇몇 컴파일러 최적화에서는 한계가 있음 (메모리 직접접근은 unsafe여야 하는등)
ㅤ→ TypeScript: JavaScript에 Type을 추가; 뛰어난 Transpiler; 개발자들이 점점 JS 에서 TS로 넘어가는 중; Microsoft 의 강력한 후원

- VM기반은 선택하지 않기로함 (복잡성이 증가하기 때문에)
- 가장 빠른 런타임을 위해서는 JS 와 C를 선택
- 최고와 거의 비슷하게 빠른 런타임을 위해서는 TypeScript 와 Rust를 선택
- 만약 VM과 웹프레임워크 선택했다면
ㅤ→ Closer 와 Luminous
ㅤ→ Java 와 Spring
ㅤ→ Elixir 와 Phoenix

 
10년간 슈퍼셀을 경영하며 배운 10가지 교훈 [번역글]

1. 무한 반복 게임을 하세요
2. 위대한 팀이 위대한 게임을 만들지만, 위대한 개인들이 모여 위대한 팀이 되는 것은 아닙니다.
3. 천천히 채용하고, 항상 기준을 높이세요
4. 가능한 작게 유지하세요
5. 문화란 결코 파워포인트나 벽에 씌여있는 문구가 아니라 모든 구성원의 행동의 총합입니다.
6. 통제 대신 신뢰하세요
7. 실패의 두려움에 휘둘리지 말고 과감하게 새로운 시도를 하세요
8. 규칙과 절차를 만드려는 유혹에 굴복하지 마세요... 설사 실수를 했더라도!
9. 전통적인 방식의 목표 수립은 독립적인 셀 구조와 어울리지 않습니다.
10. 기업의 가치와 문화를 명문화하세요 (회사가 배우고 성장하면 지속적으로 개정하세요)
마지막 교훈: 과정을 즐기세요!

 
소프트웨어 학습 태도

소프트웨어를 학습할때 적어도 일곱가지는 시도해보자

1. 내가 걷는 속력과 방향을 인지하자.
2. 익숙한 것을 내려놓고, 낯선 방식으로 해결하자.
3. 개구리를 해부하지 말고, 직접 만들어봐라.
4. 자존심을 버리고, 자존감을 키우자.
5. 결과만 보기보다는 과정을 보자.
6. 실수를 반복하면서 적어도 하나씩 개선하라.
7. 스스로 여러 가지 답을 찾고, 남에게 공유하라.

소프트웨어 학습할 때 지나치기 쉬운 부분을 알려주는 글이네요. 꼭 소프트웨어가 아니라 다른 것을 배울때 도 갖추면 좋은 마인드셋 목록입니다.

2번과 관련해서
http://egloos.zum.com/agile/v/5749946
이 글이 생각났어요. 비슷한 맥락도 보이네요.

 
isoflow - Isometric 클라우드 다이어그램 그리기 도구

- 브라우저에서 간단히 그리는 클라우드 아키텍처 다이어그램
- isometric(등축 투영) 3D 형태
- Server/Database/Laptop/User/Mail/Mobile Device 아이콘
- Label 과 바닥 색상 변경 가능

클라우드 아키텍처 그리는 비슷한 도구들

CloudSkew - 클라우드 아키텍처 다이어그램 그리는 도구 https://news.hada.io/topic?id=1709
draw.io - 무료 온라인 다이어그램 소프트웨어 https://news.hada.io/topic?id=673
Diagrams - 파이썬 코드로 클라우드 아키텍쳐 그리기 https://news.hada.io/topic?id=1781

브라우저에서 isometric 을 구현할 때 사용가능한 엔진들
sheetengine - Isometric HTML5 JavaScript Display Engine https://archive.codeplex.com/?p=sheetengine
Isomer – an isometric graphics library for HTML5 canvas https://jdan.github.io/isomer/
Traviso - Isometric Javascript Engine http://www.travisojs.com/

 
Rust의 미래를 위한 재단의 토대 마련

2020년 8월 11일, 모질라는 올해 두번째의 정리해고를 시행하였고. 그 정리해고를 당한 사람들 중에는 Rust팀의 구성원들도 있었기에 앞으로 Rust의 미래에 대하여 - 그리고 모질라 기술의 핵심을 담당하던 기술팀에 미래에 관하여 - 궁금해 하던 분들이 많았습니다.

오늘 러스트 언어 핵심팀은 그 물음에 답하여 아래와 같이 답하였습니다.

러스트는 모질라에게서 독립적인 재단을 만들 것이며. 2015년 Rust 1.0 출시 이후로는 Rust팀은 이미 자율적인 조직이었다고 밝혔습니다.

또한 이번 정리해고로 인하여 러스트 팀에 혼란이 있을 수는 있지만. 모질라에 있던 프로젝트 구성원들은 개인적인 시간을 투자하여 Rust에 기여하였고. 또한 모질라의 직원이 아니라고 해서 Rust의 구성원의 자
격은 박탈당하지 않는다고 밝혔습니다.

지금까지 모질라의 도움으로 성장할 수 있었지만. 이제는 법적 이름, 계좌, 주소 없이는 활동할 수 없어 보입니다.

새로운 재단은 Rust의 이름과 법적 책임을 받을 것이며. Rust가 앞으로 더 많은 곳에서 쓰이도록 노력하겠다고 밝혔습니다.

Mozilla가 Unbundlings 되고 있내요.
https://news.hada.io/topic?id=2640 - 사업 아이디어가 필요하다면 Unbundling을 주목하세요

다행이네요. Rust 가 더 성장할수 있는 계기가 될듯

모질라-Firefox 를 더 잘 만들기 위해서 출발한 게 Rust 언어 프로젝트였던 것 같은데 세월이 참... 이제 Rust 는 어느 정도 명성을 얻어서 언어 자체로도 유지는 될 수 있을듯하지만 걱정이 되기는 하네요. 모질라의 후광도 상당하긴 했을텐데 말이에요.

 
eBPF 공식 사이트 오픈

eBPF : 리눅스 커널에서 소스변경이나 커널 모듈 로딩할 필요없이 샌드박싱된 프로그램을 실행할수 있게 해주는 기술
이를 통해서 보안/네트워킹/트레이싱 & 프로파일링/모니터링 & Observability 등의 기능을 커널에 쉽게 추가할 수 있게됨.
eBPF에 대한 소개와 관련 프로젝트, 3000명이 넘는 개발자들이 모인 Slack채널, 기여방법 등을 정리한 신규 사이트 오픈

eBPF rethinking the Linux Kernel - https://news.hada.io/topic?id=1958
BPF : 새로운 타입의 소프트웨어 - https://news.hada.io/topic?id=1011
bpf를 이용한 성능분석 - https://news.hada.io/topic?id=88

 
QRPicture - 사진처럼 보이는 QR코드 만들기

- 랜덤한 점들이 아닌 그림처럼 보이는 93x93 픽셀 QR 생성기
- 로고/글자/패턴등을 QR코드에 담을수 있음
- 사이즈 클리핑후 블러 및 디더링된 컬러이미지 생성
- C + PHP(GD) 로 된 오픈소스
- 4가지 아웃라인 : 원,사각,상하,좌우
- 텍스트(적을수록 고품질),VCard,VEvent,Geo 입력
- 흑백, 컬러드로잉, 컬러픽쳐 포맷 지원
- 애니메이션도 지원 예정

로고가 있는 매장등에서는 사용하기 좋을듯.
제가 프로필로 쓰는 사진과 블로그 주소를 넣어서 만든후 아이폰에서 인식해보니 잘 되네요.

 
Karate - 오픈소스 테스트 자동화 도구

- API 테스트 자동화, Mockup 생성, 퍼포먼스 테스트, UI 자동화를 하나로 묶은 테스트 프레임워크
- BDD 기반 Cucumber/Gherkin 문법을 사용하여 쉽게 테스트 스크립트 작성
ㅤ→ 실제로는 Step Definition 작성할 필요가 없어서 Cucumber보다 더 쉬움
- 테스트 스크립트가 쉽게 읽을수 있는 단순 텍스트여서 git에 바로 저장
- VSCode 및 기타 IDE 에서 사용가능하며 단계별 디버깅 지원
- GraphQL API 테스트 가능
- 멀티스레드 병렬 실행 지원
- 다양한 플랫폼
ㅤ→ 크로스 플랫폼 브라우저 지원 (크롬 DevTools, Edge, Safari )
ㅤ→ MS WinAppDriver 를 사용해서 윈도우 데스크탑앱 자동화 지원
ㅤ→ Appium 을 이용하여 Android / iOS 지원

 
umami - 셀프호스팅 가능한 Google Analytics 대체제

- JS + MySQL/Postgres 로 된 MIT 라이센스 오픈소스
- 1 Page로 구성된 간단한 분석 페이지 : PV/방문자/Bounce Rate,레퍼러,브라우저/OS,사용자 위치
- 다수 웹사이트 트래킹 가능
- 6kb로 작은 트래킹 스크립트 사용


오픈소스 GA 대체제 중에서 가장 유명한건
ㅤ→ Matomo - 직접 호스트하는 Google Analytics 대체제 https://news.hada.io/topic?id=2295

그보다는 작지만 많이 쓰는 것중의 하나
ㅤ→ Fathom https://usefathom.com/

 
그림으로 비교한 Apple vs. Google

1. 의사결정
Google: create what users think they want
Apple: create what they think users want

2. 연구 개발
Google: development over research
Apple: research over development

3. 일관성
Google: consistency focused on visual consistency
Apple: consistency focused on user experience

4. 제품 사전 공개
Google: press releases and teasers
Apple: none

5. 디자인 진화
Google: redesigns and new trends
Apple: evergreen, long-lasting design

6. 개인 정보 보호
Google: simulated privacy
Apple: true privacy

7. 사용자 층
Google: extensive coverage
Apple: limited coverage

8. 리더쉽
Google: flat structure with distributed power
Apple: hierarchical structure with centralized power

9. 에코시스템
Google: open-source
Apple: proprietary

10. Go-To-Market 전략(UI)
Google: spotlight and promotions
Apple: retain existing structure

 
소셜미디어 이미지 사이즈 2020 인포그래픽

- 페이스북/인스타그램/트위터/유튜브/링크드인/핀터레스트/스냅챗
ㅤ→ 각 서비스에서 사용되는 이미지 사이즈를 각각 하나로 정리한 인포그래픽
- 업로드 권장/최소 사이즈 및 용량과 스케일되어 표시되는 실제 사이즈까지 모두 정리

 
그냥 우클릭 하면 안 되나요?

예전에 올린 글 중, '카탈리나에서 실행되는 모든 어플리케이션은 애플이 확인합니다. 그래서 앱 실행속도가 느려졌습니다.' 라는 글을 올렸는데요. 이번 글은 왜 애플이 그랬는지를 알 수 있는 글입니다.

https://news.hada.io/topic?id=2145 ( Mac OS, Slow By Design )

현재 에플은 카탈리나 이후부터 모든 앱을 실행시 애플에 보내 데이터베이스에 해당 앱이 올라왔는지 확인하고. 없다면 '멀웨어 경고'를 띄우며 실행을 봉쇄하였는데요. 이 과정에서 '해당 앱을 데이터 베이스에 올리는 것'을 공증이라고 합니다. 즉. 공증을 받지 않으면 이제 신규 사용자들은 해당 앱을 실행하는 게 불가능합니다.

몇몇 사람들은 '그냥 우클릭하면 안 되나요?' 라는 의견을 제시하고 있는데요. 이 글은 왜 그럴 수 없는지. 신규 사용자가 조그마한 버튼을 누르고 웹 페이지 두개를 가로 질러 애플이 고의적으로 노출하는 멀웨어 경고도 무시하고 들어갈 수 없다고 과정을 통해 말하는 글입니다.

 
Embla Carousel - 유연한 캐러셀 라이브러리

- 의존성 없고 IE11을 포함한 대부분의 브라우저 지원
- 루프 / 슬라이딩 / 드래깅 / 얼라인 등 이동 기능
- 가변 길이 및 Y축 지원
- 화살표, 도트, 프로그레스바 표시
- 썸네일 보이기 지원
- Lazy 로딩, Parallax, AutoPlay 지원

가장 정확도를 가진 캐러셀 이라고 홍보하긴 합니다만 기존 것들과 차이점은 잘 모르겠네요.
기능은 거의 비슷비슷 합니다.

Carousel 라이브러리는 정말 많긴 한데, 유명도 순(깃헙 ☆ 순) 으로 보면
- Slick (26k) http://kenwheeler.github.io/slick/
- Swiper (24k) https://swiperjs.com/
- Flickity (6k) https://flickity.metafizzy.co/

조금 다른 현대적인 느낌으로는
- Keen-Slider - 부드러운 HTML 터치 슬라이더 : https://news.hada.io/topic?id=2299

이 정도 중에서 그냥 맞는거 쓰면 될듯.

 
Chromium이 Root DNS에 끼치는 영향

크로미움 초기부터 나온 Omnibox 기능은 사용자가 URL 바에 입력하는 문자열을 검색어인지, 웹사이트 이름인지, URL인지 등에 따라 기능을 수행.
NXDomain Hijacking 때문에 크로미움은 존재하지 않는 3개의 랜덤문자열 도메인을 DNS에 물어보고, 만약 주소가 같다면 그 주소를 Redirect Origin 으로 기록해 둠.
ㅤ→ 사용자가 잘못친 문자열에 대해서 인트라넷에서 "did you mean?" 같은 페이지를 통해서 다른 가능한 옵션들을 보여 주는 곳이란 의미

이 세개의 랜덤쿼리는 브라우저 실행/IP변경/DNS 변경시 마다 호출됨.
실제로 크로미움 마켓셰어가 늘어나면서 루트 DNS서버 트래픽의 50%가 이 호출이라는 사실 (즉, 하루에 600억번 호출됨)

비록 루트 DNS 시스템이 대용량 트래픽을 위해서 만들어지긴 했지만, 일반적이지 않은 이 예외적인 호출을 처리하는 것은 정상적이지 않음.
크로미움이 3개가 아니라 1개 또는 2개만 호출하게 한다거나,
Firefox 가 Captive Portal Test에서 하는 것처럼 별도의 namespace 쿼리를 사용해서 루트서버에 오지 않게 하는 것등이 필요하다는 것.

* 이 코드의 원 작성자가 댓글을 달았네요.
"크로미움 개발자들이 이거에 대해서 알고 있고, 관리중이다. 이를 위해서 몇가지 수정 제안을 했다."

* 실제로 대부분은 크롬 사용자로 인한 것이겠지만, 크롬/Edge/Brave/Opera 등 꽤 많은 브라우저가 Chromium 기반이고 글에서도 크로미움이라고 계속 표현해서 그대로 사용했습니다.

 
QA Wolf- 브라우저 동작을 Playwright/Jest 기반 코드로 자동 생성

- 브라우저에서 원하는 액션을 진행하면 이에 해당하는 코드가 자동 생성
- Playwright 버전 Puppeteer Recorder

Playwright는 과거에 한번 다뤘었네요. https://news.hada.io/topic?id=1374

최근에 퍼페티어 레코더(https://news.hada.io/topic?id=2682)가 올라오길래, Playwright 쪽으로 하나 소개해봤어요.

오 감사합니다. 동작방식은 크롬확장 대신 Non-Headless 로 띄워서 기록하는 Puppeteer팀의 Recorder와 같은거 같네요.

 
개인정보를 수집하지 않는 검색 엔진 DuckDuckGo 사용 팁 모음

개인정보를 수집하지 않는 검색 엔진 DuckDuckGo를 사용하는 분들이 알면 좋은 팁들 모음입니다. 유용하고 재미있는 기능이 많네요.

- 사이트 직접 검색
- 스톱워치
- URL 단축
- 패스워드 생성
- 특정 년도 달력 보기
- 앱 단축키 또는 명령어 보기
- QR코드 생성
- ...

파이어 폭스 플러그인으로 넣으면, 기본 검색창이 DuckDuckGo로 바뀝니당. 상당히 편해용. 다만 한글 검색은 구글보다 아직 좋진 않아서, 검색하다 안 나오면 !google 하면 되고용.

 
Puppeteer Recorder - 브라우저 동작을 퍼펫티어 스크립트로 녹화하기

- 브라우저 동작 (마우스 클릭, 타이핑, 폼 입력 ) 등을 퍼펫티어 스크립트로 녹화해주는 크롬 확장
- 어떤 이벤트가 녹화되는지 화면에 표시해 줌
ㅤ→ waitForNavigation, setViewPort 등도 지원
ㅤ→ 스크린샷 ( 페이지 및 클립된 영역 ) 가능
- 녹화후 생성된 코드를 클립보드로 카피해서 바로 사용 가능

이 코드는 사이트&API 모니터링 도구인 Checkly 를 만드는 팀이 개발중인 오픈소스이고,
Puppeteer 팀이 직접 만드는 Recorder 프로젝트도 있습니다.

https://github.com/puppeteer/recorder

이 퍼펫티어 팀의 Recorder 는 크롬 확장을 쓰는게 아니라 Puppeteer 를 헤드리스 아닌 상태(non-headless)로 새로 띄워서 그 내용을 녹화 하는 방식 입니다.

 
ct.js - 오픈소스 2D 게임 엔진 & 에디터

- pixi.js (WebGL) 를 이용하여 초보자도 쉽게 게임을 개발하게 해주는 게임 프레임워크/에디터/라이브러리
- 슈팅/아케이드/어드벤처/퍼즐/비쥬얼노벨 등 어떤 장르든 제작 가능
게임 개발에 필요한 대부분 도구 내장
- 룸/레벨 에디터 (타일 지원)
- 통합 코드 에디터
- 충돌 감지 및 제어 라이브러리
- Framed & Skeletal 애니메이션
- 음악 & 사운드 관리자
- 커스텀 JS 사용 가능
- 쉬운 배포
- 훌륭한 도움말

 
TypeScript 4.0 발표

- Variadic* Tuple Type 지원
ㅤ→ Generic 타입 스프레드 가능
ㅤ→ `...` 연산자가 중간에도 올수 있음.
- Tuple 에 Label 지원
- &&=, ||=, ??= 연산자 추가
- catch의 타입을 unknown 또는 any 로 지정 가능
ㅤ→ unknown 으로 하면 처리전에 typeof/instanceof 등으로 타입체크를 꼭 해야 한다는 것을 명시 하는 것
- JSX 사용시 jsxFragmentFactory 로 사용자 정의 가능
- 생성자로부터 속성 타입 추론 가능
- --noEmitOnError 옵션 사용시에도 이전 컴파일 결과 캐시하여 빌드 속도 개선
- -incremental 과 --noEmit 옵션 함께 사용 가능

에디터 개선 (Visual Studio Code)
- Optional Chaining & Nullish Coalescing 자동 변환 기능
- /** @deprecated */ 지원
- 시작시 Partial Semantic Mode 지원 - 큰 프로젝트 로딩시 걸리는 시간을 줄이기 위해 열려있는 일부 코드파일에만 적용되는 가벼운 서버를 실행하는 것
- 더 똑똑한 Auto-Import 기능

Breaking Changes
- lib.d.ts 의 DOM 관련 타입들 변경
ㅤ→ document.origin 제거하고 self.origin 사용 권고
- 부모 클래스의 getter/setter 를 Override하면 항상 오류 표시
- strictNullChecks 상태일 때 delete 의 피연산자는 any, unknown, never 또는 optional 이어야 함

* Variadic : 고정되지 않은 갯수의 인자를 받는 것을 의미. 예) printf 의 인자들

3.0때 만큼의 큰 변화는 없음
ㅤ→ 그래서 TypeScript 안써봤다면 지금이 바로 적기! 라고 글 앞쪽에 홍보문구가 적혀 있네요.
스택오버플로우의 개발자 설문조사에서도 선호 언어에서 Rust 에 이어서 2위입니다.

 
Google Apps 위에서 React 앱 만들기

- 구글 쉬트,닥스,폼,슬라이드 위에서 React 코드로 확장을 만들게 해주는 프로젝트
- 클론해서 Node+npm 으로 개발 진행하고 배포 가능
- mkcert를 이용해서 로컬에서 개발한 내용이 바로 구글앱스에 반영되게 설정 가능
- TypeScript지원
- React 패키지 추가 가능 : 구글앱스가 외부 파일 로딩이 어렵기 때문에 전체 앱을 하나의 HTML로 패키징

 
Kinesis 키보드 3년 사용 후기

마틴 파울러옹이 $349짜리 Kinesis Advantage 2 (Ergonomic) 키보드를 3년동안 써보고 적은 후기
- 스페이스바 없음 : 엄지손가락 자리에 리턴/백스페이스/스페이스/델리트 및 기타 키들(리맵 가능)
- 발 위치에 페달 추가 가능($109) : Ctrl,⌘,Alt 매핑해서 사용
- Emacs를 80년대에 배워서 Esc키를 메타키로 쓰기에 엄지손가락 키중에 하나를 Esc로 매핑
- 큰 스페이스바가 없어서 줌에서 빠르게 음소거 하는 거 같은게 불편하다는거 빼고는 대 만족
- 높은 가격을 할만한 가치가 있다고 생각

 
GitHub, The ReadME 프로젝트 공개

- 오픈소스 커뮤니티의 성장,도전,경험등 이야기를 공개하는 공간
ㅤ→ 개발자 및 팀원들의 인터뷰, 프로젝트 뒤켠의 이야기들을 통해서 더 자세히 알아보기
- 시작은 SugarLabs,Babel,ImageMagick,Apache EChart 등의 멤버들 인터뷰
ㅤ→ 중국,케냐,나이지리아,네덜란드,뉴욕 등 다양한 곳의 오픈소스 기여자들

 
Headless Dev - Puppeteer & Playwright 지식 창고

- 헤드리스 브라우저 개발자를 위한 통합 가이드 모음
ㅤ→ Puppeteer : 크롬
ㅤ→ Playwright : 크롬,웹킷,파이어폭스
- 토픽별 정리
ㅤ→ 기본 사용법, 스크린샷, 셀렉터, 설치하기
ㅤ→ E2E 로그인(구글,MS Live),회원 가입, 계정 관리,검색,체크아웃등 상황별 처리 방법
ㅤ→ 파일 업로드, 테스팅

아직 전체적으로 내용들이 기초단계이긴 한데 차차 좀 더 추가되면 좋을 것 같네요. 아래 링크들도 참고하세요~

Puppeteer Cluster - 퍼펫티어를 클러스터로 관리하는 도구 https://news.hada.io/topic?id=2312
Puppeteer Recorder - 브라우저 동작을 퍼펫티어 스크립트로 녹화하기 https://news.hada.io/topic?id=2682

Getting to Know Puppeteer Using Practical Examples (영문) https://news.hada.io/topic?id=161

 
Layout Shift GIF Generator

- 모바일/데스크탑 웹페이지의 CLS(Cumulative Layout Shift)를 시각화해서 보여주는 도구
- 구글이 검색결과 랭킹값에도 점점 더 강조 하기 시작한 Core Web Vitals 의 CLS 점수를 체크하기 위함
- 변화를 강조 표시한 Animated GIF로 생성
- Puppeteer를 이용한 JS 오픈소스로 CLI 도구로도 실행 가능

Cumulative Layout Shift (CLS) https://news.hada.io/topic?id=1697

구글, 검색결과 순위에 페이지 경험(Page Experience) 지표 도입 https://news.hada.io/topic?id=2197

 
페이스북, 인스타그램 DM을 페이스북 메신저로 통합 시작

- iOS/Android 모두 Update 스크린 팝업되고 업데이트 하면 DM아이콘이 페이스북 메신저 로고로 변경
- Emoji 기능 추가 및 페이스북 사용자와 대화 가능(아직은 대화 안됨)
- 궁극적으로는 메신저,인스타그램,WhatsApp 을 통합할 계획
ㅤ→ 셋중의 하나만 있어도 다른 두앱의 사용자와 대화 가능하도록 할 것
- 일부사용자 대상 테스트 중이며, 다른 국가를 포함해서 늘려 나갈 것

 
AWS Kinesis vs. Kafka 성능비교

- Akka Streams 기반으로 기본설정/Latency/Throughput 기준 3가지 벤치마크(양쪽 다 지원하는 Alpakka 이용)
- 카프카 클러스터 기준 같은 비용을 지불하는 설정으로 키네시스를 세팅
ㅤ→ 카프카 9파티션 = 키네시스 9샤드 & 24시간 리텐션, 4파티션 = 4샤드 & 7일 리텐션
- 결론적으로, 모든 테스트케이스에서 Kafka가 뛰어남. 레이턴시/처리량 조정하는데도 훨씬 유연
- Kinesis 는 레이턴시/처리량 사이 조절은 샤드카운트를 조절하는 것 밖에 방법이 없음(훨씬 비쌈)

 
RustConf 2020 전체 세션 비디오/자막/발표자료 및 링크 모음

- 키노트
- Error Handling Isn't All About Errors
- How to Start a Solo Project that You’ll Stick With
- Under a Microscope: Exploring Fast and Safe Rust for Biology
- Bending the Curve: A Personal Tutor at Your Fingertips
- My First Rust Project: Creating a Roguelike with Amethyst
- Controlling Telescope Hardware with Rust
- Macros for a More Productive Rust
- Rust for Non-Systems Programmers

전체 세션 동영상이 7시간 48분짜리 영상이라 보기가 좀 어려운데
세션별로 해당 시간대 바로가기 및 슬라이드, 자막, 그리고 발표자가 사용한 다양한 링크를 보기 좋게 정리해두었습니다.

 
2020 네이버 테크 콘서트 온라인

네이버가 대학생/주니어 개발자 대상으로 앱 개발, 웹 개발 분야의 기술 경험과 기술, 개발 문화 등을 공유한 행사
* 전체 발표영상 공개

- 100만 달러짜리 빠른 앱을 만드는 비법 전수
- 안드로이드의 '안'자도 몰랐던 나는 어떻게 안드로이드 개발자가 되었을까?
- 화려한 코루틴이 내 앱을 감싸네! 코루틴으로 작성해보는 깔끔한 비동기 코드
- NDK로 안드로이드에 C++ 끼얹기
- 모르면 손해보는 Android 디버깅/분석 꿀팁 대방출
- 놓치기 쉬운 안드로이드 UI 디테일 살펴보기
- 신입 iOS 개발자 개발업무 적응기
- 성능을 고민하는 슬기로운 개발자 생활
- Case.xcodeproj - 좋은 동료로 거듭나기 위한 노하우
- 맥북에서도 아이맥프로에서 빌드하는 것처럼 빌드 속도 빠르게 하기

- 빠르게 성장하는 슈퍼루키로 거듭나기
- 상반기 네이버 인턴을 돌아보며
- 네이버에서 오픈 소스 개발을 통해 성장하는 방법
- 야 너두 할 수 있어. 비전공자, COBOL 개발자를 거쳐 네이버에서 FE 개발하게 된 이야기
- Code Review is Horse(코드리뷰는 말이야)(feat.Latte)
- 알잘딱깔센 개발자 이야기 (추후 업로드 예정)

 
IBM, 7nm 공정 POWER10 프로세서 공개

- IBM의 첫번째 7나노 프로세서. 삼성의 극자외선(EUV) 7나노 공정으로 생산 예정
- 기존 파워9 대비 3배의 에너지 효율
- RedHat OpenShift 에 최적화 되어, Hybrid Cloud 용으로 적합
ㅤ→ 하드웨어 메모리 암호화로 더 나은 보안, 페타바이트 메모리 클러스터링 지원
ㅤ→ Matrix Math Accelerator 내장으로 AI 추론 속도를 개선

POWER10 의 기술적인 내용은 이 슬라이드에서 자세히 보실수 있습니다.
https://regmedia.co.uk/2020/08/17/ibm_power10_summary.pdf
- PCIe v5 and DDR5
- 1 TB/s memory bandwidth

현재 파운드리 절대 1등은 TSMC (51.5%)이고 삼성이 2등(18.8%)인데, 현재 7나노 이하 공정이 가능한게 이 둘뿐 입니다. (올해 2분기 기준 마켓셰어)
인텔은 7나노는 GG쳤는데 그러면 TSMC일꺼고, 애플 A13은 7나노, A14는 5나노 라서 계속 TSMC가 제조할꺼긴 한데요.
TSMC가 9월 중순부터는 화웨이꺼 안 만들기로 했는데, 중국의 파운드리인 SMIC 는 아직 14나노에서 머물러 있어서..
( 화웨이가 만든 기린990 칩등이 7나노 입니다.)
그러면 IBM과도 손잡은 삼성쪽 7나노 공정이 아무래도 더더욱 빛을 발하게 될꺼 같네요.

 
BootBot - 페이스북 메신저 챗봇 프레임워크

- 메신저 챗봇을 쉽게 만드는 Node.js 용 라이브러리
- 페이스북이 지원하는 모든 메시지 타입 전송
- 특정 타입 메시지,키워드, Received/Read 이벤트에 대해서 Subscribe 가능
- 자동/수동 Typing Indicator 지정
- 메뉴, 인사말 등 봇 속성 및 Call-to-Action 설정 가능

 
Ventoy - 새로운 USB 부팅 솔루션

- USB내의 여러 ISO/WIM/IMG/EFI 파일 중 선택해서 부팅할 수 있게 해주는 오픈소스
ㅤ→ OS설치할 때마다 새로 USB 포맷할 필요없이 파일 복사로 끝
- 윈도우즈 및 대부분의 리눅스 배포본, VMWare ESXi/Citrix XenServer 지원 (470+)
- Legacy BIOS / UEFI / MBR / GPT 지원
- 자동설치 가능
- 4GB 이상의 ISO 지원