프론트엔드 개발을 하다 보면, 브라우저마다 기본 스타일이 달라서 예상치 못한 디자인 차이가 발생할 때가 있습니다. 이런 문제를 줄이기 위해 사용하는 것이 바로 reset.css 입니다. 🔎 reset.css란? reset.css는 각 브라우저가 기본적으로 가지고 있는 디폴트 스타일(기본 margin, padding, font-size 등)을 제...

프론트엔드 개발을 하다 보면 검색창 입력, 윈도우 리사이즈 같은 이벤트가 사용자 행동마다 너무 빠르게 반복되는 경우가 많아요. 이때마다 함수가 실행되면 서버 호출이 불필요하게 많이 발생하거나 성능에 문제가 생길 수 있습니다 😅 이럴 때 유용한 도구가 바로 lodash의 debounce 함수예요. 이번 글에서는 debounce를 사용해서 이벤트 호출을...

프론트엔드 개발을 하다 보면 스크롤 이벤트, 윈도우 리사이즈 이벤트처럼 짧은 시간에 너무 많이 발생하는 이벤트를 다뤄야 하는 경우가 많은데요. 이때 이벤트 핸들러가 매번 실행되면 성능에 큰 문제가 생길 수 있습니다 😅 이럴 때 유용한 도구가 바로 lodash의 throttle 함수예요. 이번 글에서는 throttle을 사용해서 이벤트 호출 횟수를 일...

리액트에서 Zustand로 전역 상태 관리를 하다 보면, 브라우저를 새로고침할 때 상태가 전부 초기화되는 문제가 있어요 😅 예를 들어 로그인 토큰, 다크 모드 여부 같은 값은 새로고침해도 유지돼야 하잖아요? 저도 프로젝트를 하면서 이 이슈를 마주했고, persist 미들웨어를 사용해서 해결했습니다. 이번 글에서는 Zustand 전역 상태를 로컬스토리...

리액트로 프로젝트를 하다 보면 상태 관리가 점점 복잡해져서 props drilling 때문에 골치가 아픈 순간이 와요 😅 저도 팀 프로젝트에서 전역 상태 관리가 필요해져서, 가볍고 사용하기 쉬운 Zustand를 도입해봤습니다. 이번 글에서는 Zustand의 기본적인 사용법과 직접 사용하면서 느낀 점을 정리해볼게요! 🧩 Zustand 설치 npm...

검색 기능을 만들다 보면, 사용자가 전에 검색했던 단어들을 다시 보여주는 기능이 필요할 때가 있는데요. 최근에 진행한 팀 프로젝트에서도 이런 기능이 필요해서, 검색어를 최대 6개까지만 저장하고 보여주는 로직을 localStorage로 구현해봤어요. 서버랑 통신할 필요 없이 프론트엔드에서만 처리할 수 있도록 간단하게 만들어봤고, 전체 코드랑 설명을 같...

관리자의 집 프로젝트 진행중 수강생을 ㄱ,ㄴ,ㄷ등의 자음으로 필터링하는 기능이 있어 해결한 방법을 적어보려고 한다. 내 머리로는 해결하기 어려워 구글링과 챗gpt의 도움을 받았다. 전체 완성 코드 // 현재 필터링할 한글자음 const 현재자음 = "ㄱ"; // 필터링될 이름 list const names = [ "김태영", "이지훈"...

관리자의 집 프로젝트 진행중 수강생을 가나다 순으로 정렬해야하는 기능이 있어 "오! 새로운 기능이다! 어떻게 만들어야 할까나~?"라고 생각하며 방법을 알아보았다. sort() sort함수는 기본적으로 인자가 문자열이라면 유니코드를 기준으로 비교하여 정렬하기 때문에 "가"는 유니코드 코드 포인트로 0xAC00이고, "나"는 0xB098이므로 이는...

관리자의 집 프로젝트 진행중 react-calendar 라이브러리 사용중 formatDay, formatYear 속성의 date를 원하는 형식으로 편리하게 변환하기 위해날짜를 원하는 형식으로 변환하는데 편리한 moment 라이브러리를 알게되어 기록해본다. moment 라이브러리란? JavaScript에서 가장 많이 사용되어 온 날짜 라이브러리로...

BUCLIN 프로젝트 진행중 상품을 하나씩 스크롤 되도록 구현이 필요해서 구글링 중 알게된 css만으로 scroll snap을 구현할 수 있다고하여 기록해본다. scroll snap이란? 스크롤 스냅(scroll snap)은 사용자가 웹 페이지를 스크롤할 때 요소가 일정한 간격으로 자동으로 스냅되는 기능을 말하며, 용자가 스크롤할 때 페이지가 ...