도리 도리

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 업데이트로 쉽게해결할 수 있다.

이전 글 - https://blue-tang.tistory.com/100 마인크래프트 서버 만들기 1. 호스팅 방법 정하기요즘 인터넷 방송인들(유튜버, BJ, 스트리머 등)이 마인크래프트 서버를 열고 같이 게임을 하는 모습을 많이 보였다.가상 세계지만 사람들을 진짜 만난것 처럼 인사도 하고 같이 모험도 하며 지blue-tang.tistory.com  이전 글에서는 마인크래프트 서버를 어디서 어떻게 올릴 수 있는지 몇가지 방법을 비교해봤다.이번 글에서는 실제 VM 인스턴스를 만들고, 마인크래프트를 설치 및 실행하여 다른 사람들이 접속할 수 있는 환경까지 구성해본다. 인스턴스 만들기클라우드 사용 경험이 있다면 간단하다.인스턴스를 하나 발급받아서 사용하면 된다.상세 과정은 아래와 같다.Google Cloud를..

요즘 인터넷 방송인들(유튜버, BJ, 스트리머 등)이 마인크래프트 서버를 열고 같이 게임을 하는 모습을 많이 보였다.가상 세계지만 사람들을 진짜 만난것 처럼 인사도 하고 같이 모험도 하며 지내는게 굉장히 재밌어보였다.친구들과 간단히 마인크래프트를 즐길 수 있도록 개인 서버를 구성했고, 성공적으로 즐길 수 있었다.그 방법을 공유해보고자 한다. 호스팅 방법 선택옛날에는 온라인에서 친구들과 같이 게임할 때, 로컬에서 하마치를 띄워 친구들을 접속할 수 있게 했다.이 방식은 단점이 있다. 내 컴퓨터의 네트워크를 열어둬야하고, 내 컴퓨터를 계속 켜둬야한다는 점이다.하마치를 사용하고 나서 네트워크 설정이 바뀌어야한다는 것도 문제가 될 수 있다.그러나 요즘은 클라우드 시대다.유명한 회사들에서 제공하는 클라우드 장비에 ..

개발을 하다보면 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를 노출할 수 있도록 하였다. 공식 문서 공식 문서를 참고하면..