뚱이의 이모저모 세상 알기 & 개발 일기 😼 뚱이의 이모저모 세상 알기 & 개발 일기 😼

새 탭을 닫는 경우 이벤트가 동작해야 하는 경우가 필요했다.단순히 화면을 닫을 때를 상정하면 많은 정보가 있지만 이런 경우 문제는 새로고침만 해도 이벤트가 적용이 된다는 문제가 있다.브라우저에서 페이지를 닫는 이벤트와 새로고침 이벤트는 기술적으로 매우 유사하다.두 경우 모두 beforeunload 이벤트가 발생하기 때문에 두 상황을 구분 짓는 것은 쉽지 않다.내가 원하는 것은 "화면을 닫았을 때 이벤트 동작" + "새로고침 시에는 이벤트 동작하지 않음" 이다. 웹 브라우저에서 창 닫기와 새로고침 구분하기웹 애플리케이션에서 사용자의 다양한 행동을 내가 원하는 스코프 만큼만 정확하게 감지하는 것은 쉽지 않다.특히 브라우저 창을 닫는 행동과 페이지를 새로고침하는 행동은 둘 다 unload를 발생시키지만 새로고..

최근 NextJS, Typescript, Shadcn을 이용해서 사내 CRM 프로젝트를 만들고 있다.CRM이다보니 Dialog 내부에서 여러가지 multi-form 형식의 처리가 많이 들어간다.우리 팀은 Shadcn을 사용하고 있으므로 Shadcn의 Dialog를 사용했는데 Dialog 내부의 Textarea에서 Enter를 입력해도 아래로 커서가 내려가지 않는 현상이 발생했다.  우선 첫 번째로 든 생각은 Textarea에서 Enter key 사용이 되는지 확인해보는 것이었다.Textarea에 onKeyDown을 사용해서 콘솔을 찍어보면 Enter가 제대로 먹히고 있는 것은 확인할 수 있다.그러면 다른 곳에서 인터셉트 해간다는 생각을 해야할 것이다. 나는 Shadcn의 Dialog만 사용하고 내부적인 ..

주말을 이용해 팀 블로그를 만들 겸 해서 간단하게 만들어보다가 EntityMetadataNotFoundError가 발생했다. 문제 Post 요청에 의해서 postman에서 날린 email, username, password는 찍히는데 이 후 try catch 문에서 catch로 계속 빠지고 있었고, 그 이유가 EntityMetadataNotFoundError 였다.  해결TypeORM config를 작성해놓은 파일에서 찾지 못한다고 하는 것을 추가해주니 잘 작동했다. AS-ISreturn { ..., entities: [__dirname + '/../**/*.entity.{js,ts}']} TO-BEreturn { ..., entities: [__dirname + '/../**/*.entity.{js,t..

PWA를 만든 이유모바일로 인프런을 이용할 때 매번 [ 크롬 -> 탭을 누르기 -> 인프런 들어가기 -> 강의 누르기 ] 이런 경로를 타다보니 귀찮게 느껴졌는데 마침 인프런 앱이 있었다.그래서 앱을 다운 받아봤는데 마치 PWA 환경과 비슷하다고 생각이 되어서 찾아봤다.[ 개발자 환경 -> 애플리케이션 -> 매니페스트 ] 를 보면 짐작은 할 수 있는데 PWA를 사용할 수 있는 조건은 만족하고 있는 것 같았다.그래서 회사 프로젝트 중 일반 유저들이 사용하는 프로젝트 하나에 PWA를 추가하기로 생각했다. PWA의 장점PWA는 Progressive Wab App을 말한다.직접 네이티브로 개발하지 않아도 웹 개발 한 것을 기반으로 앱을 만들 수 있다는 장점을 가지고 있는데 주요 사용 기업으로는 "스타벅스", "트..

TypeORM 이란? - TypeORM은 NodeJS, Browser, Cordova, PhoneGap, Ionic, React Native, NativeScript, Expo, Electron 플랫폼에서 실행할 수 있다. - TypeScript 및 JavaScript(ES5, ES6, ES7, ES8)로 사용할 수 있는 객체관계형 매퍼 라이브러리이다. - MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, SAPHana 및 WebSQL과 같은 여러 데이터베이스에 대해 지원한다. - 최신 JavaScript 기능을 지원하고 소규모 애플리케이션부터 대규모 엔터프라이즈 애플리케이션까지 데이터베이스를 사용하는 모든 종류의 애플리케이션을 개발하는 데 도움이 ..

이번에 web-worker를 사용할 일이 생겨서 web-worker에 대해 간단히 정리를 해보려고 한다. 우리 프로젝트의 경우, CSV 파일로 바꿔서 다운로드 할 수 있도록 만드는 경우에 사용하고 있다. Web worker란? Web worker는 Javascript 기반의 기술이며 주로 웹 브라우저 환경에서 사용된다. 이는 멀티스레딩을 지원하기 위한 기술로 별도의 백그라운드에서 실행되며, 메인 스레드와 별개로 작업이 이루어진다. Javascript를 사용하는 사람들이라면 Single-thread에 대해 많이 들어봤을 것이다. V8 엔진에는 스택이 있는데, 여기서 LIFO 방식으로 하나씩 쌓이고 또 실행이 된다. 그러다보니 만약 많은 양의 데이터나 복잡한 로직을 사용하게 된다면 하나씩 처리되어야 하는 스..

이번 주의 개인적으로 가장 큰 미션 중 하나는 필드가 연달아 3개가 있을 때, 두 번째 세 번째 필드가 첫 번째 필드의 상태를 보고 자동으로 바뀌는 것을 구현하는 것이었다. 좀 더 자세히는 초기 상태를 Select Field로 두고 Select Field 내용을 api 통신을 통해 받아오는데 이 때 받아올 내용이 없다면 첫 번째 필드를 TextField로 바꾸고, 두 번째, 세 번째 필드에서도 초기에 Select Field 였다가 첫 번째 Field가 TextField로 바뀐 것을 감지 한 후 TextField로 바꾸는 작업이다. 물론 각 필드를 하나씩 구현하면 쉽게 만들 수 있다. 하지만 각 필드는 사실 하나의 컴포넌트를 렌더링 한 것이다. 이를 위해서 Node.js에서 제공하는 eventEmitter..

특별히 서버단을 사용하지 않을 예정이고, 중요한 내용을 담고 있지 않다면 로컬스토리지를 이용하는 것도 좋은 방법 중 하나이다. 로컬 스토리지를 어떻게 이용하여 저장, 불러오기, 삭제를 할 수 있는지 알아보자. LocalStorage에 저장하기 localStorage.setItem('이름', JSON.stringify(..)) example for React) useEffect(() => { localStorage.setItem('my-data', JSON.stringify(data)) }) 위와 같이 하면 LocalStorage에 저장 할 수 있다. '이름' 이라고 적힌 부분은 LocalStorage에 저장하고 싶은 이름을 적으면 되고, 저장하고 싶은 데이터는 JSON.stringify를 통해서 저장 하..