도리 도리

이전 글: React 18 Transition 이전 글에서 트랜지션을 활용하여 UX를 개선하는 예시를 살펴보았습니다. 리액트에서 제공했던 기본 예시는 상태관리로 useState하나만 사용했지만, 실제 어플리케이션의 경우 대부분 외부 상태 관리 도구를 사용하게 됩니다. 여기서 Transition 적용에 어려움이 발생합니다. 이 포스팅에서는 외부 상태 관리 도구와 Transition을 함께 사용하려 할 때에 발생하는 문제점과 해결방안에 대해 공유하려합니다. 외부 상태 관리자의 도입 배경 React에서는 상태관리를 위해 기본적으로 useState, useContext 등을 제공합니다. 하지만 어플리케이션의 크기가 커지고 복잡도가 높아지게되면서 상태 관리를 위해 외부 스토어를 사용하는 경우가 많습니다. 예를 들..

React 18의 새로운 기능: Transition으로 사용자 경험 향상시키기 React 18은 다양한 새로운 기능과 개선 사항을 도입하면서, 특히 'Transition'이라는 개념을 통해 사용자 인터페이스의 반응성을 크게 향상시켰습니다. 이 기능은 React 애플리케이션의 상호작용을 더욱 부드럽고 자연스럽게 만들어, 사용자 경험을 개선하는 데 중점을 두고 있습니다. Transition Transition은 React 18에서 도입된 개념으로, "긴급하지 않은 상태 업데이트"입니다. 이를 통해 React는 중요한 업데이트에 우선순위를 두고, 사용자와의 상호작용을 방해하지 않으면서 백그라운드에서 상태 업데이트를 수행할 수 있습니다. 왜 Transition이 필요한가? Transition의 필요성: Reac..

이 글에서는 러스트 웹어셈블리(Wasm) 튜토리얼을 통한 학습 경험을 공유하고자 합니다. 이 튜토리얼은 Wasm의 사용과 이점에 대한 통찰을 제공하며 흥미로운 여정이었습니다. rust-wasm book 링크 동기 나는 Rust와 웹어셈블리가 어떻게 협력하여 웹에 고성능 코드를 제공할 수 있는지를 이해하기 위해 이 튜토리얼을 시작했습니다. Web assembly를 브라우저에서 실행하는 것은 웹 개발에 새로운 가능성을 열어주며, 그 가능성을 프로젝트에서 활용하고 싶었습니다. 사전 요구 사항 아래 조건이 필요하지만, 100% 능숙하지 않아도 됩니다. 러스트 프로그래밍 언어의 기본 지식. 웹 개발과 자바스크립트에 대한 이해. Wasm이란 무엇인가 웹에서 고성능 어플리케이션을 동작시키기 위해 제안된, 로우레벨 형..

* Nitpick: 작은 문제에 대해 지적하는 일 유튜브에서 개발 영상을 보다가 아래 영상을 통해 아래 글을 보게되었다. 어느정도 공감이 가는 내용이라서 번역해보았다. 관련 영상: https://youtu.be/08NlhU4gzdY?si=7gua1YZ3QoIhR40d 원문: https://blog.danlew.net/2021/02/23/stop-nitpicking-in-code-reviews/ Stop Nitpicking in Code Reviews One of the best changes I’ve made at work recently is to stop nitpicking in code reviews. Nitpicking isn’t about code that is wrong but suboptim..

원문 링크: https://devblogs.microsoft.com/typescript/announcing-typescript-5-3-beta/ 목록 클릭 시 원문의 해당 항목으로 이동합니다. Import Attributes Stable Support resolution-mode in Import Types switch (true) Narrowing Narrowing On Comparisons to Booleans instanceof Narrowing Through Symbol.hasInstance Checks for super Property Accesses on Instance Fields Interactive Inlay Hints for Types Optimizations by Skipping JS..

Codeium 홈페이지: https://codeium.com/ Codeium · Free AI Code Completion & Chat Codeium offers best in class AI code completion & search — all for free. It supports over 70+ languages and integrates with your favorite IDEs, with lightning fast speeds and state-of-the-art suggestion quality. codeium.com 1. 소개 Codeium은 2022년 출시한 AI 기반의 코드 도우미 툴이다. 유명한 깃헙의 코파일럿을 생각하면 쉽다. Copilot에 대한 궁금증이 있던 와중에 대체제인 AW..

원본 링크: https://io.google/2023/program/8d0bf949-1933-4358-b41a-561f8678974c/ Google I/O 2023 Tune in to watch the latest news and innovations from Google. Join I/O for livestreamed keynotes and helpful product updates on demand. io.google 위 세션은 코어 웹바이탈을 개선하는 9가지 방법에 대해서 소개한다. LCP 개선, CLS 개선, FID/IND 개선 순으로 진행된다. 1. LCP 개선하기 LCP란 LCP는 사용자에게 가장 중요한 콘텐츠, 보통 히어로 이미지나 헤드라인이 표시되는 데 걸리는 시간을 측정 대부분의 사이트는..

요즘에는 공부하다보면 유튜브의 자료를 참고하게 되는 경우가 많다. 특히, 다양한 세션들이 유튜브에 올라오는데 관심 세션만 해도 한 번에 수십개의 영상이 올라오기 때문에 다 보기에는 힘든 경우가 종종 있다. 특히 원어 영상인 경우 더 시간이 오래걸리기도 한다. 이 때 Chat GPT를 활용해보니 쉽게쉽게 요약된 정보를 얻을 수 있어서 팁을 공유한다. 꼭 개발 세션같은 영상일 필요는 없고 다양한 공부에 활용할 수 있다. 주의) - 모든 영상에 사용할 수는 없다. 스크립트가 없는 경우에는 할 수 없기 때문에. - 긴 영상인 경우 input limit 때문에 적당한 지점을 잡아 분할을 해야한다. 1. 영상 우측 하단의 점 세개버튼을 누른다. 2. 스크립트를 표시 버튼을 누른다. 3. 타임스태프를 제거한다. 4...