본문 바로가기

전체 글169

VSCode에서 import한 패키지 크기 바로 확인하기 (Import Cost extension) VSCode 에서 bundle 사이즈를 쉽게 확인하는 확장 프로그램(extension)이 있는데, 유용해서 공유해보도록 하겠습니다. Import Cost Import Cost는 VSCode 확장 프로그램인데요, 해당 Extension은 우리가 import하는 라이브러리들의 실제 번들 크기(gzip 기준)를 에디터 상에서 실시간으로 보여줍니다. 아래와 같이 설치하면, import 문 오른쪽에 해당 라이브러리의 번들 용량이 표시되어 개발 중에 간편하게 크기를 확인할 수 있습니다. 마무리 오늘은 짧게 간단한 Extension에 대해 소개해보았습니다. 사용하면서 유용한 확장 프로그램이 있으면 한번씩 공유해보겠습니다. 2025. 6. 16.
JS : 크롬 인스펙터를 이용해서 CPU 사용량이 가장 높은 함수 찾기 (performance monitor, performance tab) 개요 디버깅을 할 때, 어떤 함수에서 CPU 성능이 높게 출력되는지 확인하고 싶을 때가 있습니다. 이럴 때 크롬 인스펙터를 이용해서 간단하게 CPU 성능을 많이 잡아먹는 함수를 찾을 수 있다는 걸 알게 되어서 한번 정리해 보겠습니다. 문제 상황 저는 Google의 MediaPipe.js 라이브러리를 이용해서 얼굴의 특징점을 추출한 다음 해당 좌표에 Lottie 애니메이션을 렌더링 하는 작업을 진행하고 있었는데요, 이때, 점점 Frame Drop이 일어나고 기기 발열 또한 심한 상태였습니다. 이러한 상황에서 크롬 Inspector를 통해 한번 성능을 점검해 보았습니다. performance monitor로 대략적인 성능 확인해 보기먼저 간단히 살펴볼 수 있는 도구는 Chrome의 Peformance .. 2025. 5. 1.
React : 매초, 매분, 매시간 마다 정확히 호출되는 Emitter 커스텀훅 만들기 개요 프론트엔드 개발을 하다 보면, 매초마다 갱신되는 타이머, 매분마다 서버와 동기화되는 데이터, 매시간마다 갱신되는 통계처럼 시간의 흐름에 맞춰 무언가를 동작시켜야 하는 경우가 종종 생깁니다.이처럼 "매초", "매분", "매시간" 단위로 특정 로직을 실행해야 할 때, 단순한 setInterval만으로는 부족하거나 비효율적인 경우가 많은데요.이번 글에서는 이런 시간 단위 이벤트를 효율적으로 처리하는 구조에 대한 커스텀 훅을 제작해 보았습니다. 매초마다 수행되는 시간을 반환하는 Custom Hook (맨처음 버전) const useSecondUpdater = () => { const [time, setTime] = useState(new Date()); const timeout = useRef(nu.. 2025. 4. 22.
VSCode : prettier 환경 설정하기 개요 VSCode에서 Prettier를 설정하는 방법에 대해 알아보겠습니다.  설정방법 1. 플러그인 설치하기   VSCode에서 `Prettier - Code formatter` 플러그인을 install 합니다. 2. VSCode Setting 변경 `Code > Preperence > Setting` 으로 이동합니다. Default Formatter 를 Prettier로 변경합니다.Format On Save 에 체크합니다. 위와 같이 설정하면 파일을 저장할때마다 Prettier가 적용된 결과로 바뀌는 것을 확인하실 수 있습니다.  마무리 오늘은 간단히 VSCode에서 prettier 설정을 하는 방법에 대해 알아보았습니다. 다음번에도 유용한 내용으로 포스팅하겠습니다. 2024. 12. 15.
VSCode vs Webstorm : 개인적으로 둘다 써보고 느낀 장단점 개요 회사에서 WebStorm IDE를 사용해서 쭉 웹개발을 진행해 오다가, VSCode로 개발을 진행해야 되는 상황이 생겼습니다. 사용 이후에는 VSCode가 생각보다 괜찮고 장점도 많아서, 최근에는 계속 VSCode를 통해 개발을 진행하게 되었는데요, 간단하게 몇 가지 VSCode와 WebStorm의 개인적으로 느낀 차이점 간단하게 정리해 보도록 하겠습니다. VSCode 장점 (WebStorm과 비교) 1) 메모리를 적게 차지하고, 파일 검색 속도가 빠르다. Webstorm은 프로젝트를 몇 개만 새창으로 띄워놓아도 금세 메모리가 몇 기가씩 금방 넘쳐버립니다. WebStorm에서 옵션을 통해 메모리를 많이 추가적으로 할당해놓지 않으면 프로젝트 규모가 커질 때 아예 프로그램이 버벅거리는 걸 넘어서 멈춰버.. 2024. 11. 28.
NextJS : next14에서 Day.js 사용 시 타임존 차이 (서버컴포넌트 vs 클라이언트 컴포넌트) 개요 next14에서 dayjs를 사용하여 시간에 대한 작업을 진행하고 있었는데요, 실제로 배포를 하였을 때 프로젝트에서 컴포넌트별로 시간값이 다른 문제가 발생하였습니다. 해당 문제가 왜 발생했는지 알아보고 해결법을 공유해보도록 하겠습니다.  문제점 문제의 원인은 서버 컴포넌트와 클라이언트 컴포넌트가 실제로 동작하는 환경이 달라서, 즉 서버와 클라이언트의 시간대가 달라서 발생한 것것이였습니다. 보통 서버컴포넌트는 서버의 시스템의 시간대에 따라서 시간을 처리하지만, 클라리언트 컴포넌트는 브라우저의 시간대에 맞춰 날짜와 시간을 변환하여 처리하게 됩니다. 실제로 로컬로 테스트를 할때는 위와 같은 문제가 발생하지 않았는데, 현재 제가 개발하고 있는 Mac 환경의 시간대도 한국 시간대(UTC+9)로 설정되어 있기.. 2024. 11. 14.
HTML : IOS Safari 에서 Input 태그 자동확대 막기 개요모바일 Safari에서 text타입인 input 태그가 focus시 zoom-in 이 되는 경우가 있습니다. 해당 부분을 막는 방법에 대해 간단히 알아보겠습니다.     문제 원인 모바일 사파리에서 입력창을 클릭할 때 화면이 확대되는 현상은 많은 사용자들에게 익숙한 문제인데요, 이 현상은 주로 , 와 같은 입력 요소에 포커스가 맞춰질 때 발생합니다.  위에서처럼 줌인 현상은 사용자가 입력창에 텍스트를 입력하거나 할때 화면이 갑작스럽게 확대가 되어 다른 UI 요소가 보이지 않아 사용자들에게 불편함을 줄 수 있습니다. 정확하게 발생하는 원인은 IOS 사파리의 기본 동작 때문인데요, IOS 사파리는 웹 접근성을 높이기 위해 폰트 사이즈가 `16px` 보다 작은 요소에 대해 자동으로 확대 기능을 제공합니다... 2024. 11. 13.
CSS : font-synthesis 속성으로 모바일 IOS Safari 글꼴 굵게 표시되는 버그 수정하기 (feat: pretendard 폰트) 문제점 최근 개발 중에 개발 중인 반응형 웹 페이지의 폰트를 pretendard 폰트로 바꾸는 작업을 진행하였습니다. 이때 이상하게 모바일로 들어갔을 때 IOS Safari에서 bold로 처리한 폰트들의 글꼴이 유독 굵게 보였는데요, 원래 IOS에서는 pretendard 폰트가 이렇게 보이는 게 맞는지 몰라 디자이너분께 보여줬는데, 폰트가 조금 이상한 것 같다고 말씀해 주셨습니다. 실제 OS별로 확인을 해봐도 안드로이드 기기에서는 정상적으로 출력이 되고, 유독 IOS Safari에서 이상하게 보이는 것 같아서 원인을 찾아보게 되었습니다. font-synthesis 속성font-synthesis는 CSS 속성 중 하나로, 웹 페이지에서 특정 글꼴이 볼드, 이탤릭, 또는 소문자 대체(small-caps) 스.. 2024. 10. 14.
HTML : polyfill.io 사이트 이용시 대체방법 (공급망 공격 issue) 개요 혹시 웹사이트를 개발할 때 polyfill.io 사이트를 CDN으로 사용하고 있나요? 저는 이전에 작업했던 프로젝트에서 에러가 발생하여 살펴보니 2024년 2월 이후부터 CDN으로 사용하고 있던 polyfill.io 사이트가 중지가 되었습니다.   Polyfill 이란? polyfill이란, "충전 솜" 이라는 의미를 가지고 있는데요, 웹개발에서 polyfill은 신규 자바스크립트에서 도입된 문법을 구형 브라우저에서 돌아갈 수 있도록 도와주는 역할을 합니다. 즉 Promise 나 Set 객체등과 같이 우리가 당연히 알고 있는 자바스크립트의 요소들이 구형 브라우저에서 지원되지 않을 때 polyfill을 통해 이를 메꿔줄 수 있습니다. polyfill.io CDN 사용의 문제점 웹 애플리케이션에 pol.. 2024. 9. 13.
Git : git clone 이후 모든 브랜치를 원격에서 로컬 브랜치로 가져오기 원격 브랜치를 로컬 브랜치로 가져올때 유의점 Git을 clone한 이후 모든 브랜치를 가져왔다고 생각하지만 보통 현재 활성화된 브랜치(default) 만 가져올 때가 많습니다. 보통 `git fetch --all (원격 저장소 변경사항 반영)` 또는 `git pull --all (브랜치를 로컬로 병합)` 명령어를 통해서 브랜치를 가져오게 되는데요, 이때 모두 올바르게 가져왔다고 생각하지만 이는 원격 추적 브랜치 의 변경사항만을 업데이트한것으로 실제 브랜치들은 로컬 브랜치로 가져오지 않습니다.   여기서, 원격에 있는 브랜치들의 상태 (삭제, 생성, 업데이트 갱신)을 로컬에서 추적하고 있는 브랜치를 원격 추적 브랜치 라고 합니다. 만약 이상태에서 원격의 연결이 끊어지게 되면 현재 브랜치가 아닌 다른 브랜치.. 2024. 8. 14.

티스토리툴바