즐겁게, 코드

yceEffort 님의 '새로 바뀐 네이버 메인 훔쳐보기' 라는 글을 훔쳐보던 중, MIME 타입별 리소스를 요청한 횟수와 그 크기를 보여주는 차트가 눈에 들어왔다.그동안은 성능을 디버깅하기 위해 네트워크 탭에 필터를 걸어가며 리소스를 조회해 왔는데, 저런 물건이 데브툴에 있었다니.너무 궁금해 찾아보았지만 데브툴은 물론 라이트하우스 보고서에도 저런 차트는 찾아볼 수 없었다.다행히 구글 렌즈로 이미지를 검색해 이것이 "WebPageTest" 라는 도구로 생성된 차트임을 알 수 있었는데, 라이트하우스와 비슷한 기능을 제공하지만 WebPageTest 쪽이 조금 더 내가 찾던 도구에 가깝다고 느껴졌다. 둘의 역할은 정말 비슷하지만 라이트하우스는 "성능 및 접근성을 올리려면 OO를 수정하세요" 를 제안하는 컨설팅..

이틀 전 React 19의 stable 버전이 배포되었는데, 여러 번경사항들 중에서 크게 두 가지가 피부에 와닿았다. 하나는 더이상 ref를 하위 컴포넌트에 전달할 때 forwardRef를 사용하지 않아도 된다는 것이고, 다른 하나는 form submit의 동작이 살짝 변했다는 것이다.💡 만약 폼에서 다루는 데이터 및 검증 구조가 복잡해지거나, 컴포넌트 구조가 중첩된다면 react-hook-form을 도입해볼 것을 권해드립니다.먼저 React 18 이하에서는 폼 제출 코드를 다음과 같이 작성한다.// React @^18import { FormEventHandler } from "react";const App = () => { const handleSubmit: FormEventHandler = (e)..

개발을 진행하다 보면 문자열화된 DOM을 마크업에 렌더링해야 하는 경우가 종종 생기기 마련입니다.💡 문자열 형태의 DOM을 purify하는 이유는 DOMPurify 라이브러리에 잘 소개되어 있습니다.import parse from "html-react-parser";const App = () => { const purifiedString = parse("hello world"); return {string};};export default App;최근 진행하던 프로젝트에서 관련된 문제가 있었는데, 어떻게 문제를 해결했는지를 소개합니다.📝 TL;DR : DOM을 순회하며 탐색하거나 필터해야 할 때는 TreeWalker 객체를 사용해 보세요.먼저 흔한 모습은 아니지만, 모종의 이유로 백엔드에서 문자열 ..

FE 개발을 하다 보면 좌우로 스크롤해 카테고리나 메뉴를 선택하는 등의 UI를 구현해야 할 때가 있는데요,이번 글에서는 좌우 스크롤 UI를 구현할 때 선택할 수 있는 두 가지 방법을 간단히 소개해보려 합니다.1. CSS의 overflow-x: scroll 속성 사용하기아마 좌우 스크롤 UI를 구현할 때는 overflow-x: scroll을 사용하는 것이 가장 쉽고 널리 알려진 방법일 것이라 생각합니다..list { list-style: none; display: flex; overflow-x: scroll; -webkit-overflow-scrolling: touch; pointer: grab;} 마크업을 간단히 진행한 뒤, CSS만으로 좌우 스크롤 UI를 구현한 모습입니다.UI를 조작하는 데에..

React에서는 Context.Provider ↔ useContext 로 구성된 Context API를 사용해 하위 컴포넌트로 값을 공유할 수 있듯, Vue에서도 provide ↔ inject 라는 함수(편의상 '패턴' 이라 부르겠습니다)를 조합해 값을 공유할 수 있습니다.이번 글에서는 Provide - inject 패턴의 사용법을 간단히 알아보면서, 두 가지 팁을 함께 소개해보려 합니다. TL;DRprovide - inject 함수의 키로 심볼을 활용하면 키의 중복을 차단할 수 있다.InjectionKey 타입을 활용하면 키에 따라 inject될 값의 타입을 미리 추론할 수 있다.Provide - Inject 패턴의 예시앱에 다크 모드 / 라이트 모드 / 시스템 테마에 알맞는 UI 색상을 적용하기 위해..

📣 알림 : 이 글은 'HTML블럭' 기능을 활용해 XSS 스크립팅의 위험성을 전달하기 위한 목적으로 작성되었으며,이 글의 정보들은 독자의 노트북에서만 재생될 뿐 서버로 전달되지 않습니다.오랜만에 티스토리에 글을 쓰려 했는데 "HTML블럭" 이라는 새로운 기능이 보였다. 조금 살펴보니 HTML + CSS + JS를 게시물 내에서 실행할 수 있도록 해주는데, 아마 codepen 등 코드 작성 솔루션을 대체할 수 있도록 만들어준 것으로 추측된다. 본래의 목적으로 사용하면 멋진 인터렉션이나 CSS 애니메이션 등의 튜토리얼과 함께 데모를 제공하는 용도로 사용할 수 있다. AAPL 181.16 -1.36 (-0.67%) ..

컨텐츠로 수익을 창출할 수 있는 시대가 되면서 미디어에 광고를 부착하는 것이 흔한 광경이 되었는데요,여러 광고 유형들 중에서도 제 3의 페이지를 방문하도록 유도하는 형태가 점점 많이 보이는 것 같아요. 그런데 갑자기 광고팀에서 우리의 플랫폼에도 방문형 광고 기능을 추가해달라고 요청하면 어떻게 해야 할까요? (안된다고 누워야겠죠?)이런 불상사를 대비하기 위해 오늘은 간단한 형태의 방문형 광고를 만들어 보겠습니다.🔔 필요한 코드는 아래 링크에 미리 준비해 두었어요!https://github.com/C17AN/page-visibility-demo GitHub - C17AN/page-visibility-demoContribute to C17AN/page-visibility-demo development by ..