V8 JavaScript 엔진의 동작을 상황(기본, 오류, 스택오버플로, 비동기)에 따라 어떻게 단계별로 동작하는지를 시각화된 자료를 통해 확인해 볼 수 있다.
새로운 런타임인 Bun이 공개된 후, 온라인에서 많은 관심과 주목을 이끌어 내고 있다. 투자사인 Kleiner Perkins가 주도하고, Vercel의 창업자인 Guillermo Rauch 그리고 Y Combinator 등이 참여한 펀딩을 통해 7백만 달러의 투자를 유치했다.
이로 인해 Bun을 개발하고 발전시켜나갈 새로운 Oven이라는 회사가 설립되었고, 채용을 진행하고 있다.
Mastering TypeScript시리즈의 첫 글로
TypeScript의 개념을 애니메이션 이미지를 이용하여 쉽게 설명한 글이다.
TypeScript의 다양한 타입들의 실행 흐름도 함께 보여주어 빠르게 이해하기 좋다.
위의 주제 외에도 아래와 같은 글들이 있고, 계속 업데이트 되고 있다.
- Using TypeScript Mapped Types Like a Pro
- Using TypeScript Conditional Types Like a Pro
- Using TypeScript infer Like a Pro
- Using TypeScript Template Literal Types Like a Pro
- TypeScript Visualized: 15 Most Used Utility Types
:format(webp):no_upscale()/cdn.vox-cdn.com/uploads/chorus_asset/file/23917449/Screenshot_2022_08_02_at_08.54.53.png)
1989년 시작된 제임스 웹 우주 망원경 프로젝트는 오랜 시간의 개발 끝에 드디어 지난 21년 12월 발사되어 놀라운 우주 사진을 보내오고 있다는 사실을 한 번쯤은 들어봤을 것이다.
그리고 이러한 작업들은 대부분 JavaScript로 작성된 코드를 통해 제어가 되고 있다는 사실이다.
웹사이트의 크기가 14KB일 경우, 15KB인 경우보다 621ms가 더 빠를 수밖에 없는지를 설명하는 글이다.
이유는 바로 TCP의 slow start 알고리즘 때문인데, 왜 그러한 알고리즘을 사용하는지와 그에 따라 무엇을 신경 써야 하는지를 다룬다.
이는 HTTP/2에서도 동일하게 적용되며, UDP 기반의 HTTP/3에서도 동일하게 적용된다.
Imerso라는 회사에서 87,000줄의 React 기반의 프로그램을 TypeScript로 전환하면서 정한 가이드의 일부를 글로 작성하였다.
가이드는 일관성을 높이고, 코드의 의도를 쉽게 전달하기 위해 작성되었다.
다소 자극적으로 보일 수 있는 이 글의 타이틀은 친구가 Vue.js에 익숙하지 않아 인터뷰에 실패한 것을 동기로 이 글이 작성되었기 때문이다.
이 글은 Vue를 이용해서 React의 일부 기능을 예를 들어 설명한다.
React에는 익숙하지만 Vue.js를 모른다면 짧은 시간에 파악하기 좋다.
Douglas Clockford가 evrone이라는 업체와 인터뷰 전문이다.
Douglas Clockford는 JS의 어떤 변경이 가장 중요한지 묻는 질문에, 최선의 방법은 JavaScript를 사용 중지하는 것이라고 답했다.
JavaScript는 다른 언어와 마찬가지로 공룡 언어가 되어 발전을 막는 언어가 되었고, 다음 언어에 집중해야 한다는 말도 덧붙였다.
레이어를 문서 내의 최상위에 위치하도록 만들기 위해 z-index:1000를 사용하는 것이 일반적이었다. 그러나 <dialog> 요소를 "modal" 형태로 열게 되면 브라우저 뷰포트 내의 document 상위에 위치하는 "top layer"와 같이 동작하기 때문에, 더 이상 수동적인 z-index 값의 조정을 하지 않아도 된다. 또한 pseudo-element인 ::backdrop을 통해 배경을 스타일링 할 수 있다.
<!-- <dialog> 요소를 modal로 여는 간단한 예제 -->
<main>
<button onclick="window.dialog.showModal();">Open Dialog</button>
</main>
<dialog id="dialog"></dialog>Chrome 105 버전부터는 개발자 도구에서 top layer에 대한 기능이 추가되어 다음과 같이 확인할 수 있다.
크롬 devtools에서 유용하게 사용할 수 있는 console shortcut에 대한 내용이다.
DOM을 쉽게 셀렉팅하고 object를 table로 보기쉽게 만드는 등 devtools를 좀 더 스마트하게 쓸 수 있는 다양한 방법들을 영상을 통해 확인할 수 있다.
아마 평소 관심을 갖지 않았다면 접해보지 못한 유틸리티가 많을 것이다.
CSS를 이용하여 테두리에 애니메이션 효과를 주는 방법을 살펴본다.
Vanilla JavaScript로 횡스크롤 게임을 만들어 본다.
지금은 deprecate 된 <marquee> 태그를 HTML과 CSS를 사용해서 현대적인 방법으로 구현하는 방법을 소개하고 있다.
Docusaurus는 Meta의 오픈소스로 정적 사이트 생성 도구이다.
2버전에서는 MDX를 사용해 React 컴포넌트를 추가할 수 있도록 변경되었고,
파일 시스템 규칙을 이용해 사이드바를 자동 생성해 주거나, 플러그인, 테마 기능 등이 추가되었다.
.gif?raw=true)
사용자에게 다양한 채널을 통한 알림 제공을 위한 인프라스트럭처를 구축할 수 있도록 도와준다.
포켓몬 스타일의 게임 스타일을 통해 프레임워크를 선택하면 프레임워크 공식 웹사이트로 이동하는 아주 단순한 기능을 제공한다.
Chrome 확장 프로그램으로 Testing Library를 위한 테스트를 브라우저에서 동작을 녹화하고 테스트를 위한 스크립트를 내보내기 할 수 있다.
Dan Abramov의 클래스 컴포넌트 생명주기 다이어그램에 영감을 받아 작성된 React Hooks 생명주기 다이어그램이다.
tailwind CSS 를 vanilla CSS로 변환해주는 도구.