도리 도리

개발을 하다보면 Regular Expression을 사용할 일이 종종 생긴다. 패턴 매칭을 통해 String을 검증하기도 하고, 특정 패턴의 String을 검색하는 데에도 사용한다. 하지만 따로 공부를 하지 않다보니 매번 원하는 식을 찾는데에 시간이 걸렸다. 또한 내가 쓰는 패턴이 정확히 어떤 동작을 하는 것인지에 대한 이해도 부족했다. 그래서 정규식의 종류, 작동방식, 성능에 대해 알아보기로 했다. 한 번에 다 외우기보단 정리를 해두고 자주 보면서 익히면 생산성을 향상시켜줄 수 있을 것이다. 종류 1. Anchor 시작점과 끝점을 나타낸다. ^: 시작점 $: 끝점 \b: Word boundary; 문자(\w)와 문자가 아닌 것(\W)의 경계를 나타낸다. 2. Quantifier 원하는 패턴이 몇 번이나..

TL;DR Suspense는 내부에서 throw된 Promise를 감지할 수 있음. 이를 통해 data loading 로직과 ui 로직을 분리할 수 있음. Tanstack Query나 Suspend React 등을 통해 간단한 예를 만들어 볼 수 있다. 소개 기존의 Suspense 이전의 Suspense는 lazy 로드된 코드를 불러올 때 fallback UI를 노출하는데에 사용되었다. 이를 통해 code splitting을 할 수 있었다. const LazyComponent = lazy(() => import('path/to/component')); React 18 버전 React 18부터는 Data fetch에 대해서도 Suspense UI를 노출할 수 있도록 하였다. 공식 문서 공식 문서를 참고하면..

Intro 요새 코드에디터로 Neovim을 사용하려는 시도를 하고있다. Vim 자체가 익숙치 않아서 초기에 좀 어려움을 겪었다. Vim motion부터 좀 익숙해지고, 개인 프로젝트 개발할 때는 급하지 않으니 최대한 Neovim을 사용했다. 이제 나름 일할 때도 쓸 수 있을만큼 적응하여 사용하고 있다. 그래서 한번 Neovim에 대해 소개를 해보려고한다. Neovim Neovim 이란? Fireship 소개 영상 https://youtu.be/c4OyfL5o7DU Vim을 개선하여 현대의 IDE 처럼 다양한 기능을 제공할 수 있게함. - lua를 통한 설정 - Built-in LSP - 파일 트리, 자동완성 코드 하이라이팅 등 다양한 플러그인 사용 계기 개발을 하다가 마우스에 계속 손이 가야하는데에 불편..

이전 글: 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..