사용자 에이전트 스타일시트와 크로스 브라우징 이슈

크로스 브라우징 이슈웹 개발을하다 보면 Chrome, Firefox, Safari, Edge 등 브라우저마다 화면이 다르게 보이는 경험을 하게된다.이를 크로스 브라우징 이슈라고 하며, 이는 웹 개발자가 일관된 사용자 경험을 제공하는 데 큰 장애물이 된다.사용자 에이전트 스타일시트 (User Agent Stylesheet)이 문제의 원인은 각 웹 브라우저가 가진 고유한 기본 스타일, 즉 사용자 에이전트 스타일시트 때문이다. 예를 들어, 태그는 브라우저마다 다른 기본 상하 여백(margin)을 가질 수 있고, 태그의 글자 크기나 굵기, 버튼()의 기본 모양 등도 제 각각이다.브라우저의 개발자 도구(F12 또는 마우스 우클릭 > 검사)를 열어 특정 요소에 적용된 스타일의 출처를 확인 할 수 있다. *사용자..

• format_list_bulleted 위키
• · 2025. 5. 1.

노션 템플릿으로 1억 버는 비법 8가지

평소처럼 유튜브를 보던 중, 흥미로운 영상을 발견했다. 효과적으로 자료를 정리할 수 있는 PARA 노트 정리법과 관련한 내용이였다. 이 노트 정리법의 원리를 적용한 노션 템플릿도 무료로 제공해주었다.나는 기존에 내가 만든 템플릿으로 태스크를 관리하고 있었는데, 내 것보다 좋다고 느꼈고, 곧바로 적용해 사용해보았다. 정말 강력한 툴을 손에 넣은 느낌이었다. 홀린듯이 이어서 다른 영상도 찾아보게되었고, 태스크 관리 기능이 강화된 노션 템플릿을 10만원 정도에 팔고 있음을 발견할 수 있었다. 노션 템플릿이 무려 10만원이나 하다니… 그런데 만약 이것이 내 인생의 생산성을 획기적으로 높여준다면, 이는 합리적인 투자아닐까? 나는 구매하고 싶은 충동이 들었다.결제를 앞두고 혹시나 구글링을 해보았다. 더 저렴한 것이..

• format_list_bulleted 분석
• · 2025. 4. 30.

의사 클래스 :has()로 자식 요소에 따라 CSS 적용하기

React와 Tailwind CSS를 기반으로 LLM을 이용한 챗봇 프로젝트를 진행하면서, 메세지 입력 필드(Input 또는 Textarea)에 포커스 했을 때 단순히 입력 필드 자체 뿐만이 아니라 이를 감싸는 컨테이너 전체에 포커스를 주는 UI를 구현할 필요가 있었다.사실 매우 간단한 과제이지만, 여러 방법을 정리해보면서 각 방식에 대한 장단점을 파악할 수 있었기에 이를 정리하고 공유한다.방법 1 : absolute positionfunction Input() { return ( {messages.length === 0 && ( )} {status === "submitted" ? ( ..

• format_list_bulleted 회고
• · 2025. 4. 24.

RSS와 Github Actions로 깃헙 프로필에 최근 블로그 포스팅 목록 추가하기

GitHub에서는 사용자 이름으로 된 레포지토리의 README.md 파일을 통해 자신을 효과적으로 소개할 수 있다. 많은 개발자들이 최근 블로그 포스팅 목록을 프로필에 표시하여 자신의 생각을 공유하고 블로그를 홍보하는 것을 보고, 나도 내 프로필에 최근 블로그 포스팅 목록을 추가하고 싶었다.이 글에서는 RSS 피드와 GitHub Actions를 활용하여 GitHub 프로필 README에 최신 블로그 글 목록을 자동으로 업데이트하는 방법을 직접 경험하고 적용한 과정을 공유하고자 한다.RSS란?RSS (Really Simple Syndication 또는 Rich Site Summary)는 웹사이트의 새로운 콘텐츠 업데이트를 컴퓨터가 읽기 쉬운 표준화된 형식으로 제공하는 웹 피드이다.대부분의 블로그 플랫폼(T..

• format_list_bulleted 회고
• · 2025. 4. 10.

크롬 브라우저에서 한글 입력시 버그와 isComposing 속성

문제상황input(또는 textarea)에서 Enter 키를 눌러 메세지를 보내는 코드를 작성했다. 그런데 한글을 입력하고 Enter를 누르면 마지막 글자가 남는 버그가 발생했다. 그런데, 기묘하게도 영어나 숫자를 입력했을 때는 이러한 버그가 발생하지 않았고, 제출 버튼을 눌러서 제출했을때도 버그가 발생하지 않았다. 따라서, 한글입력과 키보드 이벤트와 관련한 이슈로 파악할 수 있었다.또한 이러한 이슈는 크롬 브라우저를 사용중인 경우에만 발생하였다.구글 검색을 통해 관련 이슈를 찾을 수 있었다.코드 수정수정전const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault()..

• format_list_bulleted 트러블슈팅
• · 2025. 3. 27.

AbortController로 네트워크 요청 최적화하기

문제점웹 요청을 연달아 보내는 경우, 이전 요청들이 아직 처리 중인 상태에서 새로운 요청들이 계속 쌓이면서 병목 현상, 즉, 흐름이 막히는 현상이 발생할 수 있다. 경우에 따라, 사용자는 마지막 요청이 완료될 때까지 로딩을 기다려야 할수도 있다. 이는 매우 부정적인 사용자 경험으로 이어진다. 최악으로는, 사용자는 응답이 없다고 오해하여 페이지를 이탈할 수 있다.해결 방법1. HTTP/2 프로토콜을 사용하기HTTP/2 프로토콜이란?크롬 브라우저는 HTTP/1.1 프로토콜로 동일한 출처에 대해 동시에 6개의 TCP 연결만을 허용한다. HTTP/2 는 브라우저에서 동시 요청에 제한이 없으므로 병목현상이 줄어든다. 이는 더 빠른 웹 통신을 위해 2015년에 도입되었으며 HTTP/2 나 gQUIC 같은 효율적인 ..

• format_list_bulleted 회고
• · 2025. 3. 23.