도리 도리

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://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는 사용자에게 가장 중요한 콘텐츠, 보통 히어로 이미지나 헤드라인이 표시되는 데 걸리는 시간을 측정 대부분의 사이트는..

원본 링크: https://io.google/2023/program/cafbe05a-c19e-4fe5-9e25-61c5c0c2f6cf/ 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 구글 I/O 두번째로 본 세션. 웹 개발에 새로 추가된 기능들, 특히 메이저 브라우저들에서 최신 2버전 지원을 하는 기능들에 대해 소개하고 있다. (최신 2버전 정도는 돼야 프로덕션에서 사용을 고려할 수 있는 수준이라고 생각해서 그렇게 선정했다고 한다.) 발표자분도 영상 초반에 언급하셨..

원본 링크: https://io.google/2023/program/dcece33d-7fc9-490c-8a6d-cc7f83fc0d1f/ 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 2023 Google I/O가 진행되었고, Web 관련된 세션들도 정말 많이 발표되었다. 그 중 재미있는 몇 가지를 간단히 요약해보려한다. 첫 번째로 정리해볼 세션은 위 링크에 있다. 제목에 ML로 앱을 향상시킨다는 내용이 있어 궁금해서 바로 봤다. 내용 정리는 ChatGPT에게 시켰다..

todo 삭제 및 편집 todoItem 템플릿 {{todo.message}} 편집 X 템플릿은 간단하다. 체크박스가 있고, 메시지가 보인다. 뒤에는 편집과 삭제 버튼이 있다. 이 버튼들을 누를 때 기능들을 추가해볼 것이다. @click.stop 편집/삭제 버튼을 만들면서 v-on:click.stop을 사용했다. .stop을 붙이면 이벤트의 propagation이 중지된다. 즉, 편집버튼을 클릭한다고 해보자. 따로 캡쳐링 단계에서 이벤트를 리스닝하는 리스너는 없으므로, 버블링 단계에서 가장 먼저 이벤트 핸들러 onClickEdit이 호출된다. .stop이 없다면 그 후 버블링이 진행되어 상위 컴포넌트인 li에서 onClickItem이 호출된다. 하지만 .stop을 통해 이벤트 propagation을 중지 ..