본문 바로가기
안녕하세요, 프론트엔드 개발자 김현우라고 합니다. 제 블로그에서는 개발과 관련된 다양한 이야기들을 풀고있어요. 아무리 어려운 문제라도, 쉽게 풀어 설명할 수 있는 방법은 무조건 존재한다고 생각을 해요. 제가 연재해드리는 내용이 선한 영향력을 가져다 주었으면 좋겠어요.

전체 아티클158

웹 페이지의 애니메이션을 최적화하는 여러 방안들은 무엇일까? 목차· 웹 페이지의 성능이 떨어지는 이유 · 리플로우 (Reflow)와 리페인트 (Repaint)가 발생하는 속성들· 웹 페이지 성능 최적화 방법 · 애니메이션을 다루며 신경 써야 할 CSS 속성 유형 · position의 fixed · position 사용하기 · transform의 3d 속성 사용하기 · will-change 사용하기웹 페이지의 성능이 떨어지는 이유웹 페이지에서 애니메이션이 등장하곤하면 웹 페이지가 버벅이는 현상들이 존재한다. 이는 웹 페이지의 성능이 떨어지기 때문에 발생하는 현상인데, 이 같은 현상이 발생하는 이유는 리플로우(Reflow)와 리페인트(Repaint)가 발생하기 때문이다.· 리플로우가 뭐예요?리플로우는 브라우저가 웹 페이지를 렌더링 할 HTML 요소의 위치나 .. 2025. 6. 3.
내가, 그리고 누군가 필요로 하는 프로덕트 만들기 (feat. MAU 833) 회사 블로그 서비스를 진행하면서 전세계 각지에서 들어오는 유저들의 유입되는 현황들을 실시간으로 확인하면서, 이 과정들이 너무나도 재미있고 신기했다. 기존에는 훨씬 불편했던 UX (User Experience)를 가지고 있음에도 불구하고, 그래도 사람들이 많이 찾아왔다. 항상 서비스를 이용할 때 사용성이 우선시되어야한다는 것이 변함없는 생각이었지만, 이 사용성과 더불어 서비스에 필연적으로 있어야하는 것들을 하나 놓치고 있었다. 그건 바로 "사용자가 필요로 하는 정보" 였다. 당연한 말이지만, 이 사용자가 필요로 하는 정보가 많은 서비스가 사용자의 리텐션도 정말 높았다. 여러 서비스들을 만들어왔지만, 항상 반짝 빛나고 지는 서비스를 만들었기 때문에 "사용자가 필요로 하는 정보"를 가진 서비스보다는 단순 "내.. 2025. 6. 1.
Webpack과 Vite의 차이점은 무엇일까? 목차· 글을 들어가며· 개발 서버 작동 방식의 차이· 빌드 방식의 차이· 왜 ESM이면 빠른거예요?· 파일 처리와 HMR글을 들어가며요즘 Vue3 프로젝트를 새롭게 시작하게 되면 공식적으로 Vue에서 제공하는 번들러 모델은 Vite를 기반으로 하고 있다. 다만, 현재 진행중인 프로젝트들의 경우 모두 Webpack 기반의 프로젝트로 구성이 되어있기 때문에 초기 프로젝트를 실행하는데 있어 5~10초 사이의 시간이 걸리는 경우가 많다. Vite로 마이그레이션을 진행하고 싶어 Webpack과 Vite의 차이점에 대해 조금 더 찾아보고자 이렇게 포스팅을 하게 되었다.개발 서버 작동 방식의 차이Webpack과 Vite 모두 모듈 번들러 및 빌드 도구이지만, 철학과 동작 방식, 성능 최적화 전략에서 큰 차이를 가지고.. 2025. 6. 1.
word-break의 auto-phrase 속성은 어떤 역할을 할까? 목차· auto-phrase 속성은 어떤 역할을 해요?· 너무 좋은 기능이지만, 실험적인 기능· keep-all도 CJK 문자와 관련있는거 아닌가요? 그러면 keep-all과 차이는 무엇인가요?· 글을 마치며· 레퍼런스프로덕트를 만드는 도중에 word-break에서 auto-phrase 라는 속성을 접하게 되었어요, 단어 단위로 자연스럽게 줄바꿈을 해주기에 속성을 적용하고 릴리즈를 진행했는데, 모바일 사파리에서 동작을 하지 않는 경우가 있어 이 속성이 대체 무엇인지 한번 톺아보고자 이렇게 기록을 남기게 되었어요. 먼저 간단하게 auto-phrase 속성을 설명을 하면 auto-phrase는 현재 실험적인 단계의 CSS 속성 값으로, 주로 CJK (중국어 · 일보언 · 일본어) 를 포함한 언어의 문장을 더.. 2025. 5. 26.
React와 Vue의 이벤트 바인딩 방식은 왜 다를까? 목차· React의 이벤트 바인딩 방식· React에서는 왜 () => handleClick(id) 형태로 선언해야해요?· Vue의 이벤트 처리 방식· Vue에서는 왜 handleClick(id) 형태로 선언해야해요?· Vue는 HTML에 이벤트 바인딩이랑 상당히 유사한데, 어떤 차이가 있어요?· JavaScript 코드에서의 element.onclick = handleClick()· 글을 마치며회사에서 업무를 진행하다가 문득 React에서 이벤트 바인딩 방식과 Vue의 템플릿에서의 이벤트 바인딩 방식이 다르다는 점에서, 어떤 방식으로 이벤트가 적용이 되고 왜 바인딩 방식이 다른지 궁금해졌어요. 우리가 흔히 아는 React와 Vue의 차이점은 React의 경우 JSX를 이용해 프로그래밍적으로 명확하고 제.. 2025. 5. 22.
여러 프로덕트를 마주하며 느꼈던 프로덕트에 대한 고찰 "내가 만드는 프로덕트들은 모두 포트폴리오 용도였는데요.." 엊그제 자료들을 정리하며 자바스크립트를 처음 접했던 2022년이 생각났다. 프론트엔드 개발자로 성장하기 위해서 여러 토이 프로젝트들을 시작으로, 조금 더 규모 있는 사이드 프로젝트들에 도전하며 단순 포트폴리오를 위한 프로덕트들을 마구마구 양산해냈다. 그때의 프로덕트를 만드는 기준은 조금만 불편해보이면 바로 프로덕트로 만드려고 실행부터 옮겼다. 그러다보니 런칭을 해도 1~2일 잠깐 반짝이고 지는 프로덕트들이 많았다. 덕분에 포트폴리오에는 넣을만한 프로덕트들이 많았지만, 프로덕트라고 하기에는 애매한 것들이 참 많았다. 대학 졸업을 할 때 쯔음 회사 생활을 하며 여러 팀원들을 만나 다양한 프로덕트들을 새롭게 만들면서 이를 디벨롭 시키기 위해 모두가 .. 2025. 5. 15.

티스토리툴바