🚀 도입: 인라인 스타일 탈출, 그리고 자동 높이 조절 프로젝트를 진행하다 보면 유독 textarea가 말썽을 부릴 때가 많다. 기본적으로 제공되는 고정 높이는 사용자 경험(UX)을 해치기 일쑤다. 처음에는 자바스크립트로 높이를 조절하면서 style= 같은 인라인 스타일을 남발하곤 했다. 하지만 Tailwind CSS를 도입하면서 “어떻게 하면...

🚀 도입: “커서가 왜 맨 뒤로만 갈까?” 채팅 서비스나 에디터를 만들다 보면 특정 버튼(예: 이모지, 태그)을 눌렀을 때 현재 커서가 위치한 곳에 텍스트를 쏙 집어넣어야 할 때가 있습니다. 처음에는 단순히 value = value + "문자열" 식으로 코드를 짰는데, 이렇게 하니 커서가 어디에 있든 무조건 맨 뒤에만 글자가 붙는 문제가 발생했...

개발을 하다 보면 브라우저별 기본 스타일 차이 때문에 UI가 예상과 다르게 보이는 경우가 많습니다. 이를 해결하기 위해 흔히 reset.css를 적용하거나, 최근에는 normalize.css를 사용하는 경우도 많습니다. 이번 글에서는 normalize.css가 무엇인지, reset.css와의 차이점, 그리고 어떤 상황에서 사용하는 것이 적절한지 정리...

프론트엔드 개발을 하다 보면, 브라우저마다 기본 스타일이 달라서 예상치 못한 디자인 차이가 발생할 때가 있습니다. 이런 문제를 줄이기 위해 사용하는 것이 바로 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 = [ "김태영", "이지훈"...