욕심도 참 많아

한글 입력 시 중복 요청 이슈와 해결 방법

한국어처럼 조합형 문자를 웹에서 입력할 때, 의도치 않게 중복 요청이 발생하는 경우가 자주 있다. 특히 React 환경에선 이 문제가 더 자주 보이는데, 원인과 해결 방법을 클라이언트, 훅, 서버 단에서 정리해봤다. 🧩 왜 한글 입력 시 중복 요청이 발생할까?1. 조합형 언어의 특성한글은 자음과 모음을 조합해 글자를 만든다. 예: ㄱ + ㅏ = 가IME(Input Method Editor)가 입력 중간 상태를 관리하면서 하나의 글자 입력에 여러 이벤트가 발생함영어는 키보드를 누르면 바로 글자가 입력되지만, 한글은 조합 과정이 있어 조합 시작 → 변경 → 완료 등의 중간 단계를 거침2. React의 이벤트 처리 방식React는 입력 이벤트를 상태 변화로 감지하고 리렌더링함한글 입력 중간 상태에서도 이벤트..

크롬 익스텐션을 개발하며, 사용자의 데이터를 어떻게 관리하면 좋을지 고민하다가 Indexed DB에 대하여 공부하게 되었다. Indexed DB는 LocalStorage보다 많은 용량의 데이터를 브라우저에 영구적으로 저장하는 방법이다.또한컴퓨터 재부팅브라우저 종료 후 재실행인터넷 끊김이런 경우에도 사용자가 브라우저 데이터/캐시를 직접 삭제하지 않는 이상 사용자 데이터를 장기 보관하기 매우 적합하며, JS에서 사용하는 객체 형식 그대로 저장할 수 있다. 사용방법 1. DB open 요청 및 Object Storage사용const request = indexedDB.open("DatabaseName", version);request.onerror = (event) => { console.error("Dat..

프로젝트를 진행하던 중, Github Action으로 테스트 빌드를 하는 과정에서 에러가 났다. pnpm build를 하는 과정에서 에러가 났고,에러 로그는 이렇게 떴었다.관련 로그를 찾아보니 Github Action 에서 러너로 VM을 제공하는데, 이때 VM에서 node.js와 패키지 매니저를 받아올때 생기는 에러로 추측됐다.그래서 우선 node.js버전을 최신화 해보려다가, 바로 전에 node20 , node22 두 버전 모두 잘 돌아갔던걸 확인했기에 pnpm의존성 문제가 있나 확인해보았다.pnpm package들의 버전과 현재 프로젝트의 node간의 문제는 없었고, 로컬에서는 멀쩡하게 빌드가 잘 되고 있었기에 대체 어디가 문제인가 해서 ci.yml파일에 # 캐시 삭제- name: Clear PNPM..

Javascript => 객체 지향 프로그래밍 언어 클래스가 없어서 객체지향이 아니라고 생각하는 사람들도 있으나 프로토타입 기반의 객체지향 언어다. 객체의 특징 - 다양한 타입의 값을 하나의 단위로 구성 - 변경 가능 - 0개 이상의 프로퍼티로 구성 / 프로퍼티는 key : value 로 구성 - function도 프로퍼티의 값으로 설정 가능 : 이때 일반 함수와 구분하기 위해 method 라 칭한다. (프로퍼티 : 객체의 상태를 나타내는 값) 자바스크립트는 클래스 개념이 없고 별도의 객체 생성 방법이 존재한다. => ES6 부터는 클래스도 지원한다! 객체 리터럴 object 생성자 함수 생성자 함수 Object.create 메서드 클래스(ES6) 여기서 객체 리터럴 이란? 객체를 표현할 때 , 중괄호 ..

저번 글에 이어서, 오늘은 react-hook-form을 사용할때 놓칠수 있는 점들과, 여러가지 팁에 대해서 다뤄보겠습니다. watch / useWatch 1. watch watch는 useForm 훅에서 반환되는 함수 중 하나로, 지정된 폼 필드의 현재 값을 반환하여 줍니다. 폼 필드의 값 변화를 실시간으로 관찰 할 수 있으며, 특정 필드 또는 전체 폼의 값을 얻을 수 있습니다. => 주로 폼 컴포넌트 내에서 사용되며, 해당 컴포넌트의 리렌더링 범위에 영향을 줍니다. 즉, watch를 사용하는 컴포넌트는 관찰하는 필드 값이 변경 될 때마다 리렌더링 됩니다. 2. useWatch useWatch는 리훅폼에서 제공하는 별도의 훅으로, watch와 유사하게 폼 필드의 값 변화를 관찰합니다. 하지만 useWa..

근 1년만에 기술 블로그 업로드 입니다!.! 오늘은 사용자로부터 데이터를 수집하는데에 큰 도움을 주는 라이브러리인 react-hook-form 에 대한 글을 작성해 보았습니다. react-hook-form(이하 리훅폼이라 칭하겠습니다!)이 없다면, 저희는 간단한 회원가입을 구현함에 있어서도 하나하나 state를 선언하고, state를 validate하기위한 함수들, 에러를 위한 state등 너무 많은 기능들을 직접 구현해야 합니다. 또한, 귀찮은 것과 별개로 모든 값이 state로 연결되어 있기에 하나의 값이 변할때 마다 여러 자식 컴포넌트 들에서 리렌더링이 계속해서 발생하게 됩니다. 리훅폼을 공식 docs에 나와있는 여러개의 단어-문장으로 표현하자면 DX 폼을 구축할 때 개발자들에게 완벽한 경험을 제공..

import axios from "axios"; const api = axios.create({ baseURL: "어쩌구저쩌구백엔드url", timeout: 3000, headers: { "Content-Type": "application/json", }, }); export default api; 기존 코드이다. Axios 로 baseURL을 이용해서 그냥 요청을 보내면 network 탭에서 그대로 URL이 노출 되기 때문에 rewrite 기능을 사용하였다!! /** @type {import('next').NextConfig} */ const nextConfig = { async rewrites() { return [ { source: "/api", destination: "어쩌구저쩌구백엔드url", ..

Axios 란 브라우저 를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 이다. Fetch에 비해 별도의 설치가 필요하지만, fetch보다 더 많은 기능 지원과 문법을 간소화 해준다. 나는 이번 프로젝트를 진행하면서 전역적으로 사용하기 위하여, axios.create 를 사용해 주었다 import axios from "axios"; const api = axios.create({ baseURL: "~~", timeout: 3000, headers: { "Content-Type": "application/json", }, }); export default api; 해당 파일을 생성해 준뒤, api만 따로 import 하여 URL은 뒤에 추가만 해주면 된다! import api fro..

짧지만 기억에 오래 남을 것 같은, 나의 2번째 인턴이 끝났다. 방학을 그냥 허투루 보내기는 싫었고, 이런 저런 방학동안 할 수 있는 인턴 프로그램을 찾던 도중 '그룹바이' 라는 단체에서 스타트업과 대학생 개발자들을 연결하여주는 프로그램에 지원하여 붙게 되었다!! 우선 회사 서비스의 어드민 페이지만 작업하기로 되었었지만 운이 좋게도 회사의 주 서비스도 작업할 수 있게 되었다!!! 어드민 페이지도 쫄렸지만,,,, 주요 서비스에 직접 작업하는것은 더 떨렸다 처음 어드민 페이지 작업은 서비스의 데이터를 쉽게 추출하고, 수정하는 등의 CRUD 작업 위주로만 이루어졌다. 진짜 정말 퍼블리싱 제외하고 파이어베이스 스토리지에서 데이터만 주고 받고 수정하고 지우고 가지고 놀다보니 Promise 와 async/await..

회사에서 gif 파일을 메인화면에 띄워줄 필요가 있었는데, 그냥 gif링크를 올리는 것은 언제 gif가 없어질 지 모르고, 링크가 바뀔 수 도 있으니 Base64 파일형식으로 firebase storage에 저장하고자 하였다. if (newSeason.img) { const response = await fetch(newSeason.img); const blob = await response.blob(); const base64 = await new Promise((resolve) => { const reader = new FileReader(); reader.readAsDataURL(blob); reader.onloadend = () => { const base64data = reader.result;..