본문 바로가기

분류 전체보기

 (50)
[리액트] 한글 입력 시 KeyDown 이벤트가 두 번 호출되는 문제 해결 방법 서론한글 입력 시 발생하는 keydown 이벤트가 두 번 호출되는 문제를 해결하는 방법을 공유하려 합니다.이 문제는 한글의 자음과 모음을 합성하는 과정에서 발생하며, 이를 해결하기 위해 useKeyComposing이라는 커스텀 훅을 만들어 사용했습니다. 또한, 네이티브 이벤트와 리액트 합성 이벤트를 혼용하지 말라는 권장 사항도 설명하겠습니다. 문제 설명: 한글 입력 시 keydown 이벤트의 중복 호출한글 입력의 특성상 자음과 모음이 합성되어 하나의 완성된 글자가 만들어집니다. 그런데 이 과정에서 keydown 이벤트가 두 번 호출되는 문제가 발생할 수 있습니다. 예를 들어, 키보드에서 방향키를 누르면 handleKeyDown 함수가 호출되고, 뒤이어 onCompositionEnd 이벤트가 발생하면서 다..
[프론트] API 중복 호출 최적화 하기 (with useMemo) 서론카테고리 페이지에서 필터 옵션을 결정하는 API 호출이 필요 이상으로 반복되는 문제가 발견되었습니다. 이 글에서는 해당 문제의 원인 분석과 해결 과정을 상세히 다루고, API 호출 최적화의 중요성에 대해 설명하겠습니다.   API 호출 최적화의 중요성불필요한 API 호출은 서비스의 반응 속도를 저하시키고 서버 비용을 증가시킵니다. 이는 곧 사용자 경험의 저하로 이어지므로, 개선이 필수적인 문제입니다.중복 호출의 원인 분석1.  strictMode 사용먼저 API가 왜 중복되어서 호출되는지 파악해야 합니다.해당 페이지에서는 filter-option api를 두 번 호출합니다. 1. 실제 상품 검색에 적용 되는 filter-option 2. 실시간으로 유저가 필터를 걸었다 뺄 수 있는 실시간 filter..
Nextjs 스크롤 위치 복원 시키기 (2024) 서론 Next.js 신규 사이드 프로젝트를 새로 시작하게 되었습니다. 그렇다 보니 기본적인 동작들에 대해서 구현이 된 게 없어서 직접 구현을 해야 했습니다.. 그중 하나는 상품 상세에 접근했다 리스트 페이지로 돌아갔을 때 스크롤 위치가 복원되어야 하는 기능입니다. 이 기능은 단순해 보이지만 유저한테 끼치는 영향은 막대합니다. 또한 프로젝트에서 계속 쓰이는 기능이기 만들 때 잘 만들어야 합니다. 이 글에서는 커스텀 훅을 만들어서 해당 훅을 통해 스크롤을 복원시키는 방법으로 진행할 것입니다. 어떻게 복원 시키나? 이때 생각난 복원시키는 방법 생각나는 것은 두 가지가 생각났습니다. 1. 세션 스토리지에 저장한다. 2. 전역 상태에 저장한다. 그러면 다른 사이트는 어떻게 되어 있을까? 많이는 아니고 3가지 사이..
자바스크립트 "this" 동적 컨텍스트 결정을 이해하자 자바스크립트에서 this는 매우 특이하면서도 유연한 키워드입니다. 코드 내에서 this를 사용하면, 실행 중인 컨텍스트에 따라 참조하는 값이 동적으로 결정됩니다. 이를 제대로 이해하고 활용하기 위해서는 this가 어떻게 동작하는지를 이해하는 것이 중요합니다. 자바스크립트 this는 특정 상황마다 언제 호출되었는지, 어떻게 호출 되었는지에 따라서 매번 달라지게 됩니다. 보통 5가지 경우로 나누어 지게 되면서 아래 예제를 보면서 확인해 보겠습니다. 1. 기본 바인딩 첫 번째로 this의 기본 바인딩 입니다. 전역상태에서 this를 호출하거나 일반 함수 내에서 this를 호출하면 해당 this는 전역 객체를 가리키게 됩니다. function Hello() { console.log(this); } 위에 예제는 ..
Penple 개발 후기 🚀 배포 성공 https://play.google.com/store/apps/details?id=com.penple 깃허브 저장소 github(front) : https://github.com/JEONGHWANMIN/PenPle github(back) : https://github.com/JEONGHWANMIN/penple-server "펜플을 통해서 당신의 하루를 기록하여, 의미 있는 하루를 보내는 방법을 찾아보세요." penple은 누고자 작성할 수 있는 일기 애플리케이션입니다. 프로젝트를 만든 이유 최근에 일기를 작성해 볼까? 하는 생각이 들었습니다. 그런데 시중에 있는 일기 어플을 다운로드하여 보니 그냥 일기만 작성할 수 있고, 검색 기능 같은 게 없었습니다. 또한 일기가 서버에 저장되는 것이 아..
육각형 개발자 책 리뷰 최근에 육각형 개발자라는 책을 읽었는데 읽는 내용을 기반으로 책 리뷰를 남기면 좋을 거 같아서 글을 남깁니다. 육각형 개발자는 다 읽는데 5일 정도 소요가 되었고 어렵지 않게 쉽게 읽혔던 책입니다. 육각형 개발자 육각형 개발자는 최범균 개발자님께서 작성하신 책 입니다. 구매하게 된 이유는 표지에 있던 주니어 개발자의 시야 넓히기라는 워딩이 마음에 들어서 구매하게 되었습니다. 이 책은 좋은 개발자가 되기 위해서 필요한 인사이트를 전해주는 책입니다. 좋은 개발자가 되기 위해서 궁금증을 가지시는 분들이 읽으면 좋을 거 같습니다. 책 소개 이 책은 아래와 같은 목차로 이루어져 있습니다. 1. 들어가며 2. 구현 기술과 학습 3. 소프트웨어 가치와 비용 4. 코드 이해 5. 응집도와 결합도 6. 리팩터링 7. 테..
[프론트] UI 로직과 비즈니스 로직 분리해서 역할과 책임 분리하기 가독성 좋은 코드를 짜기 위해서는 역할과 책임을 명확하게 분리하고 조합해서 사용해야 합니다. 그러면 프론트에서는 어떤 식으로 작성해야 좋은 코드를 작성할 수 있을까요 ? 기본적으로 프론트엔드는 여러가지 로직으로 이루어져 있습니다. - API 호출 코드 - 상태 관리 코드 - 사용자 한테 보여줄 UI 코드 등등 으로 이루어져 있습니다. 그러면 이 로직들은 언제 분리를 해야 할까요 ? 사실 코드에 정답은 없지만 코드를 봤을 때 한눈에 들어오지 않는다면 각각 역할에 맞게 분리를 해서 조합하면 좀 더 가독성 좋은 코드를 작성할 수 있습니다. 저 같은 경우 한 페이지 내에서 API 호출 코드가 2개 이상이거나 API 호출 후 계산을 해서 가공해야 할 데이터가 많다면 그 로직은 분리를 하고 있습니다. 왜냐하면 re..
[React] 리액트 상태 관리 리액트 상태 관리 오늘은 리액트 상태 관리 할 수 있는 방법에 관한 글 입니다. 리액트에서는 어떤 방식을 통해 상태관리를 할 수 있을까요 ? 리액트는 기본적으로 지역 상태 관리와 전역 상태관리로 나뉘게 됩니다. 지역 상태 관리로는 useState()가 있고, 전역 상태 관리로는 useContext(), 및 recoil,zustand등 여러가지 라이브러리가 있습니다. 지역 상태 관리 1. useState useState는 컴포넌트 내에서 상태를 관리할 수 있는 기본적인 방법 입니다. useState 상태를 사용할 수 있는 공간을 한정적으로 정해놓고 사용할 수 있으므로 독립적인 상태를 활용해서 다른 코드에 영향을 주지 않을 수 있습니다. 주로 토글 상태, 버튼 상태, 폼 상태 관리를 할 때 주로 사용할 수 ..

티스토리툴바