전체 글130 생산성을 극대화하는 최고의 비결은 인공지능이 아니라 좋은 기업 문화입니다. 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. Web Workers와 OffscreenCanvas로 canvas 성능 향상 이번 프로젝트에서 구현해야하는 기능은 이미지 위에 겹쳐진 투명한 캔버스에 그림을 그릴 수 있는 웹 기반 그리기 도구를 만드는 것이었습니다. 그런데 캔버스 사이즈가 커지고 그리는 모양 수가 늘어나면서, 특히 자유형 그리기 중에 상당한 지연이 발생하기 시작했습니다.여기서 몇몇 최적화 기술을 시도했습니다.디바운싱 및 스로틀링: 이러한 기술은 마우스 이벤트 호출 수를 줄이는 데 도움이 되었지만 그리기의 부드러움도 감소시켰습니다(ux관점에서 안좋음).단순화된 그리기 알고리즘: 그리기 알고리즘을 최적화했지만, 미미한 개선만 제공했습니다.주요 문제는 모든 그리기 작업이 UI 업데이트 및 이벤트 처리와 경쟁하면서 메인 스레드에서 수행된다는 것이였고, 이러한 생각으로 인해 그리기 작업을 별도의 스레드로 오프로드하는 것을.. 2024. 10. 21. 이전 1 2 3 4 ··· 22 다음 반응형