욕심도 참 많아

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

이미지 파일을 파일 시스템으로 서비스에 업로드할때,화면이 하얗게 브라우저 크래시가 되는 문제가 있었다.이때 1개의 사이즈가 40mb짜리 bmp확장자 사진 60장을 사용하여,동시에 많은 메모리가 로드 되도록 하여 해당 문제원인을 발견하였다.JavaScript에서 파일을 업로드하고 처리할 때 힙 메모리가 사용한다.특히 이미지 파일의 경우 다음과 같은 과정에서 메모리를 사용한다:파일 로딩파일을 FileReader나 URL.createObjectURL()로 읽을 때이미지 데이터를 JavaScript 객체로 변환할 때JavaScript는 브라우저나 Node.js 환경에서 사용할 수 있는 힙 메모리에 제한이 있는데, 특히 브라우저에서는 이 제한이 더 엄격하다.해당 메모리에 대한 제한때문에 문제가 생긴것으로 파악하였..

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

프로젝트를 하던 중 '고용 형태' 를 열거형 enum타입으로 d.ts 확장자 파일에서 설정해주고 사용하려고 했는데,해당 파일에서 enum 타입을 as const로 export해서 사용할때 잘 안되는 것을 확인하여 이유를 찾아보면서,일단 d.ts확장자는 컴파일 시점에서만 사용되며, 런타임에는 포함되지 않기에 동작이 안되는 것을 확인하였다.(enum은 실제 런타임 값을 생성하는 구조체 이기에!!)그치만 다른 ts파일에서도 enum을 사용하려고 조금 더 알아 보면서, enum을 깡으로 쓰는것은 안티 패턴이라는 글을 많이 찾아보게 되었다.이유부터 말하자면1. enum은 Typescript에서 열거형 기능을 만들기 위해 생성한 기능으로 , 다시 JS로 트랜스파일이 되면서 번들러에서 TreeShaking을 못하게 ..

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

프로젝트를 진행 하던 중 멀쩡하게 로컬에선 잘 돌아가던 프로젝트가 build가 안되는 문제가 발생했다. 처음에는 모든 paths에서 다 에러가 난다고 해서, 의존성 패키지 혹은 옛날 브랜치부터 하나하나 다 까보면서 의존성 삭제 -> 설치 -> 빌드 를 반복했다.CI / CD의 중요성을 너무나도 절실히 느꼈다. 빌드가 정상적으로 되는 브랜치와 그 다음 작업된 브랜치를 확인해 보니, App Router의 기본적인 Loading, Error 같은 페이지들을 추가한 뒤로 안되고 있는 것을 확인했다. 이때 처음 생각했던 문제는 해당 페이지들을 작업하면서 사용한 twin.macro 혹은 "use client"의 부재 문제라고 생각했다. 하지만 해당 문제를 모두 해결했음에도 빌드 에러는 계속해서 났고, error, ..

소개공식문서에는 MSW를Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments.로 소개합니다. 직역하자면,Mock Service Worker는 클라이언트에 구애받지 않고 모킹을 작성할 수 있으며, 어떠한 프레임워크, 도구, 환경에서도 재사용할 수 있는 API 모킹 라이브러리 입니다. 다른 모킹 서비스와 다르게 특별한 점은,  • API endpoint를 실제 API의 것으로 사용할 수 있다.• JavaScript를 이용해 웹 애플리케이션 프로젝트에 Mocking 코드를 작성한다.• 실제..

클로저(Closure) 란 1. 함수와 그 함수가 선언된 렉시컬 환경의 조합2. 다른 곳으로 넘긴 함수 내에서 외부 변수를 사용하는 경우 , 해당 변수는 어딘가에 접근해야 하므로 js에서는 함수를 프로그램 내 어디에서 실행했는지와는 상관없이 함수를 정의할 때 결정된 스코프를 유지하는 것 이 클로저의 특징은 함수가 자신이 생성될 때의 렉시컬 환경을 "기억한다" 는 함수라는 것이다.그러므로 외부 함수가 종료된 후에도 외부 함수의 변수에 접근 할 수 있다. 주로 비동기 처리 , 데이터 캡슐화 , 고차 함수 콜백등의 상황에서 사용된다. function createGreeting(greeting) { return function(name) { console.log(greeti..

스코프(Scope) 란변수나 함수같은 식별자가 유효한 범위를 의미한다.크게 Global Scope / Local Scope로 분류된다.JS엔진 입장에서 오류가 발생하는걸 알수 잇는 방법은 오류가 발생한 문이 실행 되기전 에 프로그램 내 스코프와 변수 관계 전부를 사전 파악하는 것이다.프로그램이 컴파일 되는 이 시점에 스코프는 결정이 된다. (== 런타임 환경에는 영향을 받지 않는다.)이렇게 컴파일 타임에 결정되는 스코프를 렉시컬 스코프라고 한다.컴파일 도중에 프로그램 실행에 필요한 모든 렉시컬 스코프가 들어간 지도가 만들어지고, 실제 각 스코프를 실행해야만 하는 런타임 전까지 스코프가 생성되지 않는다(렉시컬 : 컴파일 단계 중 첫 단계인 렉싱(파싱) 을 의미) 사실 프로그램이 실행 되는 동안 js ..

Babel은 JS 트랜스파일러 입니다. 트랜스 파일러 : 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환해주는 얘 Babel은 주로 최신 JS (ES6 이상)을 구형 브라우저에서도 동작할 수 있도록 ES5 같은 이전 버전의 JS로 변환하는 데 사용됩니다. 또한, React의 JSX같은 문법도 JS로 변환해 줍니다. const add = (a, b) => a + b; ES6 에서 도입된 화살표 함수 이기에 Babel을 사용하면 var add = function(a, b) { return a + b; }; 이렇게 변환 된다. const element = Hello, world!; 같은 JSX는 const element = React.createElement('h1', null, 'Hello, world!..