안녕하세요! 프론트엔드 개발자 한원영입니다. C언어를 시작으로, Javascript의 매력에 빠져 개발자가 되었습니다.
학부시절 알고리즘, 네트워크, 자료구조 등 기본적인 지식을 쌓았으며, 프론트엔드에 대해 깊이 공부하기 위해 부트캠프를 수료했습니다.
현재 React, TypeScript, Tailwind를 주로 사용하며, 인터랙티브한 개발에 관심이 많습니다.
Github: qpwoei0123
Blog: **Notion → React-hook-form과 Zod의 조합 , TheeJs 맛보기**
Phone: 010-2321-8346
E-mail: [email protected]
작업의 효율성을 높이기 위해 **CI/CD를 구축**하고, CDN 서비스 장애로 인한 리소스 결핍을 겪으면서 CloudFront 를 활용해 자체 CDN을 구축하는 경험을 했습니다.
또한 성능 개선에도 관심이 많아, throttling, Webpack, WebP, memoization, design tokens 등 여러 전략을 프로젝트에 적용했습니다.
Next.js를 사용하여 렌더링의 차이점을 경험하고, Three.js를 통해 WebGL의 강력함을 느꼈으며, GSAP을 학습하면서 인터랙션이 뛰어난 서비스의 차별점을 파악하려 노력했습니다.
기본기의 중요성을 인식하여 알고리즘과 자바스크립트의 동작 원리를 이해하는 데 집중하고 있으며, 100개 이상의 블로깅과 GitHub에서 **1000번이 넘는 contributions**을 기록했습니다.
좋은 서비스는 사용자의 요구를 먼저 파악하고, 인터랙션을 통해 즐거운 경험을 제공해야 한다고 생각합니다.
저는 다양한 인터랙션과 UI/UX를 고민하고, GSAP을 활용한 인터랙티브한 개발을 즐기고 있습니다.
프로젝트의 규모에 맞추어 프레임워크 대신 JavaScript를 사용하여 기능별로 모듈을 분리하고 단일 책임 원칙을 적용하였습니다.
반복되는 부분은 HTML 하드코딩 대신 데이터를 객체화하여 동적으로 생성하였습니다.
모듈의 다운로드 속도보다 네트워크 통신 자원이 더 많이 소모된다고 판단하여, 최소한의 네트워크 통신을 이루도록 웹팩을 활용했습니다.
필요에 의해 직접 웹팩을 설정하면서 더 깊이 이해할 수 있었고, 리소스 크기를 줄이고 네트워크 통신을 절약하는 데 성공했습니다.
마우스 이벤트 처리 시 쓰로틀(throttle) 기법을 적용하여 이벤트 호출 빈도를 약 **92.3%** 감소시켰습니다.
이로 인해 성능을 최적화하고 코드의 효율성을 높여 리소스 낭비를 방지하였습니다.
성능 최적화가 사용자 경험에 중요한 영향을 미치며, 작은 최적화 작업이 큰 수치상의 변화를 가져올 수 있음을 배웠습니다.
마우스 이벤트 처리 시 쓰로틀(throttle) 기법을 적용하여 이벤트 호출 빈도를 20ms로 제한,
UI 상호작용에서 최소 기준인 60프레임으로 제한을 두어서
평균적으로 150번의 호출을 10번으로 줄임으로써 성능을 최적화하고, CPU 사용량을 40% 절감했습니다.
PNG 이미지를 WebP로 변환하고, 초기 요청을 줄이기 위해 레이지 로딩을 적용했습니다.
이를 통해 초기 리소스 크기는 약 97.23% 감소했으며, 초기 페이지 로드 시간은 80% 단축되었습니다.
또한, cwebp 도구를 사용하여 다른 서비스의 도움없이 직접 터미널 명령어로 이미지를 일괄 변환했습니다.