서론한글 입력 시 발생하는 keydown 이벤트가 두 번 호출되는 문제를 해결하는 방법을 공유하려 합니다.이 문제는 한글의 자음과 모음을 합성하는 과정에서 발생하며, 이를 해결하기 위해 useKeyComposing이라는 커스텀 훅을 만들어 사용했습니다. 또한, 네이티브 이벤트와 리액트 합성 이벤트를 혼용하지 말라는 권장 사항도 설명하겠습니다. 문제 설명: 한글 입력 시 keydown 이벤트의 중복 호출한글 입력의 특성상 자음과 모음이 합성되어 하나의 완성된 글자가 만들어집니다. 그런데 이 과정에서 keydown 이벤트가 두 번 호출되는 문제가 발생할 수 있습니다. 예를 들어, 키보드에서 방향키를 누르면 handleKeyDown 함수가 호출되고, 뒤이어 onCompositionEnd 이벤트가 발생하면서 다..
리액트 상태 관리 오늘은 리액트 상태 관리 할 수 있는 방법에 관한 글 입니다. 리액트에서는 어떤 방식을 통해 상태관리를 할 수 있을까요 ? 리액트는 기본적으로 지역 상태 관리와 전역 상태관리로 나뉘게 됩니다. 지역 상태 관리로는 useState()가 있고, 전역 상태 관리로는 useContext(), 및 recoil,zustand등 여러가지 라이브러리가 있습니다. 지역 상태 관리 1. useState useState는 컴포넌트 내에서 상태를 관리할 수 있는 기본적인 방법 입니다. useState 상태를 사용할 수 있는 공간을 한정적으로 정해놓고 사용할 수 있으므로 독립적인 상태를 활용해서 다른 코드에 영향을 주지 않을 수 있습니다. 주로 토글 상태, 버튼 상태, 폼 상태 관리를 할 때 주로 사용할 수 ..
API 모킹 방법 프론트엔드 개발자라면 백엔드에서 API가 나오지 않았다면 프론트엔드에서는 어떤식으로 대응해야 할까? 라는 고민을 하게 됩니다. 어떤식으로 대응을 할 수 있을 지 방법에 관한 정리 내용 입니다. 근데 이 API가 나오지 않았다는 가정이 두가지로 나뉘게 됩니다. 1. 진짜로 백엔드 개발자가 API를 만들기 전 2. API는 만들어 졌지만 코드가 리뷰 대기 상태라 머지가 되지 않음 우선 아래는 실제 API가 만들어 지기 전 이라는 가정하에 예시 입니다. 1. 실제 Mock Data 만들기 API Mocking이 아닌 프론트엔드에서 더미데이터를 만들어서 넣어주는 방식 입니다. const MOCK_DATA = [ { id: 1, name: "안녕" }, { id: 2, name: "하이" }, ..
🖍 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 위와 같이 검색엔진에 노출되야할 페이지와 그렇지 않은 페이지를 명시해서 ..
📌 SOLID 원칙에 맞게 컴포넌트 리팩토링 평소에 내 코드는 왜 가독성이 좋지 못할까? 왜 내 코드는 이렇게 길지? 라는 생각을 했었는데 컴포넌트 설계 방식을 바꾸니 좀 더 읽기 쉽고 책임 분할된 좋은 코드를 설계할 수 있게 되어서 쓰는 후기입니다. 만약 저와 같이 생각하시는 분들이 있다면 한번 봐주시면 좋을 거 같습니다. - SRP (Single Responsibility Principle) 단일 책임 원칙 단일 책임 원칙이란 쉽게 말해서 코드는 하나의 작업을 해야 한다라고 볼 수 있습니다. 하지만 그전에 제가 짜던 코드를 보면 컴포넌트 자체에서 여러 가지 로직을 돌면서 UI로직까지 행하고 있다는 것을 알 수 있습니다. 밑에 예시가 책임 분할되기 전 코드입니다. 코드를 보면 CouponList 컴포넌..
📌 소셜 로그인 버튼 만들기 소셜 로그인 버튼 만들었던 방법 및 리팩토링 후기에 대해서 글을 써보고자 합니다. 우선 제가 하고 싶은 거는 각 버튼에 관한 속성을 미리 만들엇 놓고 , 그 컴포넌트에서 mode값을 토대로 원하는 소셜 로그인 버튼을 받는 것을 하고 싶었습니다. 준비물 React styled-components 원하는 소셜 로그인 아이콘 처음에 내가 작성한 코드 import styled from "styled-components"; import { SocialIcons } from "src/assets/images/SocialIcons"; import { ButtonHTMLAttributes } from "react"; interface Props extends ButtonHTMLAttribu..
Vite에서 Svg 컴포넌트로 불러오는 한국 자료가 없어서 직접 만들었습니다. React Vite Svg 컴포넌트로 불러오기 기존 리액트 웹 팩을 사용하면 SVG를 컴포넌트로 사용하는 방법이 많이 있지만 , 만약 vite랑 typeScript를 사용한다면 그냥 npm i vite-plugin-svgr 명령어만 쳐서는 동작하지 않습니다 ! https://www.npmjs.com/package/vite-plugin-svgr vite-plugin-svgr Vite plugin to transform SVGs into React components. Latest version: 2.2.1, last published: 2 days ago. Start using vite-plugin-svgr in your pro..
🤩 React Styled Component를 활용한 컴포넌트 재사용 1. 시작하기에 앞서서 재사용 컴포넌트란 정의가 무엇일까요 ?? 말 그대로 컴포넌트를 다시 사용한다는 개념 이라고 보시면 됩니다. 컴포넌트를 재사용 한다는 것은 ? 1. 중복을 제거해준다. 2. 좀 더 깔끔한 코드 사용이 가능하게 해준다. 위와 같은 장점이 있지만 , 저는 그동안 재사용 컴포넌트를 사용하지 않고 있었습니다. 2. 그동안 나는 어떻게 코드를 짰나 ?? 사실 재사용컴포넌트를 사용해라 ! 라는 말은 블로그나 , 유튜브 영상 등을 통해서 충분히 인지하고 있었지만 , 평소에 제가 짜는 코드는 재사용 컴포넌트를 고려하지 않고 코드를 짜고 있었습니다. 머리속으로 인지는 하고 있지만 , 막상 코드를 짜면 이곳 저곳 중복이 발생하고 ,..
Warning: validateDOMNesting(...): cannot appear as a descendant of 에러 확인 1. 에러 발생 원인 form 안에 form 이 중복적을 선언 되어 있을때 발생한다. return ( 작성자 : title : { // You can store the "editor" and use when it is needed. // console.log('Editor is ready to use!', editor); }} onChange={(event, editor) => { const data = editor.getData(); console.log("data : ", data) // console.log({ event, editor, data }); setFormDa..