본문 바로가기

FrontEnd

 (31)
[리액트] 한글 입력 시 KeyDown 이벤트가 두 번 호출되는 문제 해결 방법 서론한글 입력 시 발생하는 keydown 이벤트가 두 번 호출되는 문제를 해결하는 방법을 공유하려 합니다.이 문제는 한글의 자음과 모음을 합성하는 과정에서 발생하며, 이를 해결하기 위해 useKeyComposing이라는 커스텀 훅을 만들어 사용했습니다. 또한, 네이티브 이벤트와 리액트 합성 이벤트를 혼용하지 말라는 권장 사항도 설명하겠습니다. 문제 설명: 한글 입력 시 keydown 이벤트의 중복 호출한글 입력의 특성상 자음과 모음이 합성되어 하나의 완성된 글자가 만들어집니다. 그런데 이 과정에서 keydown 이벤트가 두 번 호출되는 문제가 발생할 수 있습니다. 예를 들어, 키보드에서 방향키를 누르면 handleKeyDown 함수가 호출되고, 뒤이어 onCompositionEnd 이벤트가 발생하면서 다..
Nextjs 스크롤 위치 복원 시키기 (2024) 서론 Next.js 신규 사이드 프로젝트를 새로 시작하게 되었습니다. 그렇다 보니 기본적인 동작들에 대해서 구현이 된 게 없어서 직접 구현을 해야 했습니다.. 그중 하나는 상품 상세에 접근했다 리스트 페이지로 돌아갔을 때 스크롤 위치가 복원되어야 하는 기능입니다. 이 기능은 단순해 보이지만 유저한테 끼치는 영향은 막대합니다. 또한 프로젝트에서 계속 쓰이는 기능이기 만들 때 잘 만들어야 합니다. 이 글에서는 커스텀 훅을 만들어서 해당 훅을 통해 스크롤을 복원시키는 방법으로 진행할 것입니다. 어떻게 복원 시키나? 이때 생각난 복원시키는 방법 생각나는 것은 두 가지가 생각났습니다. 1. 세션 스토리지에 저장한다. 2. 전역 상태에 저장한다. 그러면 다른 사이트는 어떻게 되어 있을까? 많이는 아니고 3가지 사이..
자바스크립트 "this" 동적 컨텍스트 결정을 이해하자 자바스크립트에서 this는 매우 특이하면서도 유연한 키워드입니다. 코드 내에서 this를 사용하면, 실행 중인 컨텍스트에 따라 참조하는 값이 동적으로 결정됩니다. 이를 제대로 이해하고 활용하기 위해서는 this가 어떻게 동작하는지를 이해하는 것이 중요합니다. 자바스크립트 this는 특정 상황마다 언제 호출되었는지, 어떻게 호출 되었는지에 따라서 매번 달라지게 됩니다. 보통 5가지 경우로 나누어 지게 되면서 아래 예제를 보면서 확인해 보겠습니다. 1. 기본 바인딩 첫 번째로 this의 기본 바인딩 입니다. 전역상태에서 this를 호출하거나 일반 함수 내에서 this를 호출하면 해당 this는 전역 객체를 가리키게 됩니다. function Hello() { console.log(this); } 위에 예제는 ..
[프론트] UI 로직과 비즈니스 로직 분리해서 역할과 책임 분리하기 가독성 좋은 코드를 짜기 위해서는 역할과 책임을 명확하게 분리하고 조합해서 사용해야 합니다. 그러면 프론트에서는 어떤 식으로 작성해야 좋은 코드를 작성할 수 있을까요 ? 기본적으로 프론트엔드는 여러가지 로직으로 이루어져 있습니다. - API 호출 코드 - 상태 관리 코드 - 사용자 한테 보여줄 UI 코드 등등 으로 이루어져 있습니다. 그러면 이 로직들은 언제 분리를 해야 할까요 ? 사실 코드에 정답은 없지만 코드를 봤을 때 한눈에 들어오지 않는다면 각각 역할에 맞게 분리를 해서 조합하면 좀 더 가독성 좋은 코드를 작성할 수 있습니다. 저 같은 경우 한 페이지 내에서 API 호출 코드가 2개 이상이거나 API 호출 후 계산을 해서 가공해야 할 데이터가 많다면 그 로직은 분리를 하고 있습니다. 왜냐하면 re..
[React] 리액트 상태 관리 리액트 상태 관리 오늘은 리액트 상태 관리 할 수 있는 방법에 관한 글 입니다. 리액트에서는 어떤 방식을 통해 상태관리를 할 수 있을까요 ? 리액트는 기본적으로 지역 상태 관리와 전역 상태관리로 나뉘게 됩니다. 지역 상태 관리로는 useState()가 있고, 전역 상태 관리로는 useContext(), 및 recoil,zustand등 여러가지 라이브러리가 있습니다. 지역 상태 관리 1. useState useState는 컴포넌트 내에서 상태를 관리할 수 있는 기본적인 방법 입니다. useState 상태를 사용할 수 있는 공간을 한정적으로 정해놓고 사용할 수 있으므로 독립적인 상태를 활용해서 다른 코드에 영향을 주지 않을 수 있습니다. 주로 토글 상태, 버튼 상태, 폼 상태 관리를 할 때 주로 사용할 수 ..
백엔드 API가 나오지 않았을 경우 프론트엔드는 어떻게 대응해야 할까 ? API 모킹 방법 프론트엔드 개발자라면 백엔드에서 API가 나오지 않았다면 프론트엔드에서는 어떤식으로 대응해야 할까? 라는 고민을 하게 됩니다. 어떤식으로 대응을 할 수 있을 지 방법에 관한 정리 내용 입니다. 근데 이 API가 나오지 않았다는 가정이 두가지로 나뉘게 됩니다. 1. 진짜로 백엔드 개발자가 API를 만들기 전 2. API는 만들어 졌지만 코드가 리뷰 대기 상태라 머지가 되지 않음 우선 아래는 실제 API가 만들어 지기 전 이라는 가정하에 예시 입니다. 1. 실제 Mock Data 만들기 API Mocking이 아닌 프론트엔드에서 더미데이터를 만들어서 넣어주는 방식 입니다. const MOCK_DATA = [ { id: 1, name: "안녕" }, { id: 2, name: "하이" }, ..
[React] CAG프로젝트 SEO 개선하기 🖍 Collect All Games SEO 개선 후기입니다. 평소에 많은 개발 아티클을 접하는 편인데 카카오 프론트 엔드 블로그에서 SEO 개선 가이드를 보고 내 프로젝트에도 적용할 수 있겠다 싶어서 적용해 본 후기입니다. collect All Games는 React로 만들어진 프로젝트 입니다. 1. robots.txt 파일 수정하기 평소에 잘 손대지 않았던 robots.txt 파일을 수정했습니다. # https://www.robotstxt.org/robotstxt.html User-agent: * Allow: /detail Allow: / Disallow: /login Disallow: /signup Disallow: /write 위와 같이 검색엔진에 노출되야할 페이지와 그렇지 않은 페이지를 명시해서 ..
[JS] 디스코드 봇 만든 후기 이 글은 디스코드 봇을 만든 후기입니다. 계기 어느날 디스코드를 하는 도중 타이머 기능이 필요했는데 타이머 기능 정도는 직접 만들 수 있지 않을까?라는 생각을 하게 되어서 만들게 되었습니다. 또한 타이머 기능 외에 다른 기능을 만들면 재밌겠다 생각이 들어서 만들게 되었습니다. 일단 디스코드를 만드는 방법은 python을 사용한다던지, 자바스크립트를 사용한다던지 여러가지 방법이 있어서 본인에게 편한 언어를 사용할 수 있습니다. 저는 자바스크립트를 채택했습니다. 후기 이번에 직접 디스코드 봇을 만들어 보니까 직접 명령어를 통해서 상호작용 가능한 봇을 만든다는 점이 재밌었습니다. 그래서 추후에 필요한 기능이 있을 경우 다른 봇을 추가하기 보다는 직접 만들어서 커스텀해서 넣으면 뿌듯하기도 하고 내가 원하는 방향..

티스토리툴바