전체 글131 브라우저의 메인 스레드는 비싸다 https://kciter.so/posts/the-expensive-main-thread/#%EB%B9%84%EC%8B%BC-%EC%9E%90%EC%9B%90%EC%9D%84-%EC%95%84%EA%BB%B4-%EC%93%B0%EA%B8%B0 브라우저의 메인 스레드는 비싸다 | kciter.so프론트엔드 최적화라고 하면 무엇이 떠오르는가? 대체로 네트워크 요청을 줄이거나 번들 크기를 줄이고 캐시를 잘 쓰는 일을 떠올린다. 그 외에는 리렌더링 줄이기나 리소스를 불러오는 타이밍kciter.so 2026. 9. 10. 생산성을 극대화하는 최고의 비결은 인공지능이 아니라 좋은 기업 문화입니다. https://newsletter.eng-leadership.com/p/good-culture-is-the-biggest-productivity Good Culture is the Biggest Productivity Hack, Not AIAI definitely helps with productivity, but only when you have the right culture in place first!newsletter.eng-leadership.com 2026. 8. 31. 오브젝트 추가 하나에 2초가 걸렸던 이유 Vue 3로 구현된 웹 에디터 화면이 있습니다. 이미지 위에 텍스트 박스(tiptap)를 얹어 드래그로 옮기고, 리사이즈하고, 안의 글을 편집하는 도구입니다. 어느 날 이런 제보를 받았습니다."오브젝트를 새로 하나 추가하면 화면이 잠깐 멈춰요."실측해 보니 클릭 후 화면 반영까지 중앙값 518ms, 느린 환경에서는 2초를 넘겼습니다.오브젝트(텍스트 박스) 하나를 추가했을 뿐인데요.문서가 무거울수록 심해졌습니다. 즉 비용이 바뀐 것(1개)이 아니라 이미 떠 있는 것 전체에 붙어 있다는 신호입니다.1. 고치기 전에, 지표가 거짓말하고 있지 않은지부터성능 개선의 첫 단계로 기존 계측 지표를 확인했는데, 이상한 값이 나왔습니다."낙관적 렌더링에 걸린 시간"을 잰다는 지표가 있었는데, 14일치 데이터의 중앙값이 .. 2026. 8. 25. Claude Code 고삐 채우기 TL;DRClaude Code가 자꾸 "완료했습니다" 해놓고 안 돼있고, "확인해주세요"로 떠넘기고, 같은 실수를 반복해서 AI한테 사전에 자기 검열을 시키는 시스템을 만들어봤다.계기Claude Code를 쓰다 보면 반복되는 패턴이 있다.작업 시킴 → "완료했습니다" → 확인해보면 안 돼있음 → 화남 → 다시 시킴 → 또 같은 실수 → 더 화남이 루프를 끊고 싶었다. 그러다 Hugh Kim의 Harsh Critic 블로그를 읽고 "이거다" 싶어서 바로 적용해봤다.사후 대응이 아니라 사전 차단이다. AI가 결과물을 나한테 보여주기 전에, 스스로 "이거 내가 봐도 욕 먹을 만한가?" 체크하게 만드는 것.실제로 적용한 것1차 방어 — Hook (HARD)Claude Code의 hook 시스템을 사용했다. ho.. 2026. 4. 6. 커서 제대로 사용하는 방법 https://x.com/ryolu_/status/1914384195138511142 X의 Ryo Lu님(@ryolu_)Using Cursor well = fast, clean code. Using it wrong = AI spaghetti you’ll be cleaning up all week. Here’s how to actually use it right: 1. Set 5-10 clear project rules upfront so Cursor knows your structure and constraints. Try /generate rules for exix.com [번역]Cursor가 구조와 제약 조건을 알 수 있도록 5~10개의 명확한 프로젝트 규칙을 미리 설정하세요. 기존 코드베이스에 대해.. 2025. 4. 30. content-visibility로 렌더링 성능 향상 브라우저는 기본적으로 화면 밖의 콘텐츠도 모두 렌더링합니다. 이는 불필요한 리소스 낭비입니다.content-visibility: auto 를 사용하면 화면에 보이는 부분만 렌더링하고, 보이지 않는 부분은 필요할 때 렌더링하도록 최적화할 수 있습니다. 개발중인 서비스는 사용자가 원하는 만큼 이미지를 업로드할 수 있는 기능을 제공하고 있습니다. 문제는 이미지가 많아질수록 초기 페이지 로딩이 느려진다는 것입니다. /* vue3 */const CHUNK_SIZE = 3const imageChunks = computed(() => { const chunks = [] for (let i = 0; i ....image-chunk { content-visibility: auto; contain-i.. 2024. 12. 3. 이전 1 2 3 4 ··· 22 다음 반응형