도리 도리

이전 글 - https://blue-tang.tistory.com/97 NeovimIntro 요새 코드에디터로 Neovim을 사용하려는 시도를 하고있다. Vim 자체가 익숙치 않아서 초기에 좀 어려움을 겪었다. Vim motion부터 좀 익숙해지고, 개인 프로젝트 개발할 때는 급하지 않으니 최대blue-tang.tistory.com Neovim은 약 1년이 넘는 기간동안 나의 메인 코드 에디터였다. 키보드만으로도 모든 것을 제어할 수 있는 강력한 기능과 속도는 나에게 큰 즐거움을 주었다. 그러나 시간이 지나면서, 나는 점점 Neovim을 메인 에디터로 사용하는 것에 대한 한계를 느끼게 되었다. 이번 글에서는 내가 왜 Neovim을 더 이상 메인 에디터로 사용하지 않게 되었는지에 대해 이야기해보려고 한다...

SSE(Server Sent Event)를 사용해보자.서버에서 입력한 내용을 화면에 마크다운으로 띄워주는 프롬프터를 만들어본다.github: https://github.com/JAAAAAEMKIM/practice/tree/main/sse-practice스펙1. 서버사용자 입력을 받아 라인별로 클라이언트에 전송한다.SSE를 통해 구현한다.2. 클라이언트서버와 연결되어, 사용자 입력을 화면에 표시한다.Markdown을 사용해서 실시간으로 보여준다.서버 개발하기기술 스택: Bun, TypescriptBun 선정 이유Typescript 바로 실행 가능간단한 서버 실행서버 실행구현은 SSE 관련 내용의 bun github issue를 참고했다.https://github.com/oven-sh/bun/issues/2..

https://youtu.be/0ckOUBiuxVY React Conf 2024에서 Demystifying Accessibility in React Apps라는 발표가 있었다.이번 포스팅에서는 발표 내용을 정리하며 React 앱에서 접근성을 어떻게 구현할 수 있는지 알아본다.접근성의 정의Accessibility: 장애가 있는 사람들도 동일하게 접근하고 사용할 수 있도록 하는 것.실생활 예시: 휠체어 경사로, 점자 블록 등.디지털 환경: 스크린 리더 등이 해당됨.접근성의 동작 방식웹 문서는 HTML로 받아 DOM 트리로 파싱하고 UI로 사용자에게 보여진다.이 때, DOM 트리를 기반으로 접근성 트리(Accessibility Tree)가 생성된다.접근성 트리는 개발자 도구에서 확인할 수 있다.DOM 노드처럼..

https://devblogs.microsoft.com/typescript/announcing-typescript-5-5-beta/#inferred-type-predicates Announcing TypeScript 5.5 Beta - TypeScriptToday we are excited to announce the availability of TypeScript 5.5 Beta. To get started using the beta, you can get it through NuGet, or through npm with the following command: npm install -D typescript@beta Here’s a quick list of what’s new in TypeScdevb..

TL;DR원인: 마우스 리포팅에서 사용되는 모듈이 현재 tmux 버전과 맞지 않아서해결: tmux 업데이트 후 정상동작 확인.계기: iterm2의 업데이트로 인해 발생한 것으로 추정.tmux 사용 중 오류가 발생했다.마우스 드래그로 텍스트 셀렉션을하면 tmux가 종료되는 현상이다.현재 세션뿐만 아니라 모든 세션이 종료되기 때문에 굉장히 불편한 오류이다.iterm의 본창에서는 그러지 않는 것으로 확인하여 tmux의 오류를 의심하고 찾아봤다.https://github.com/microsoft/azurelinux/issues/6598유사한 오류를 어렵지않게 발견할 수 있었다.tmux 업데이트로 쉽게해결할 수 있다.

개발을 하다보면 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 - 파일 트리, 자동완성 코드 하이라이팅 등 다양한 플러그인 사용 계기 개발을 하다가 마우스에 계속 손이 가야하는데에 불편..