[문제] useNavigate()의 state값이 null인 경우 'react-router-dom'의 useNavigate() 함수 navigate의 state를 통해 data를 보냈는데 state값이 계속 null이 나옵니다. stackoverflow: '경로 상태에서 전송된 값은 직렬화 가능해야 합니다.' 라는 의견이 있어 간단하게 navigate 내부에 있는 data의 자리에 간단히 {test: 'test'}를 넣어서 테스트를 해봐도 계속 null만 나오고 있습니다. 도대체 왜 이런 걸까유? [version] 'react-router-dom': "^6.3.0", "react": "^17.0.1", "react-dom": "^17.0.1", [state send component] export fun..
Program Version Upgrade (w. NW.js And Electron) 현재 NW.js의 버전은 0.24.4를 사용 중입니다. 가장 큰 문제는 현재 jQuary, WebSQL, NW.js 옛 버전의 API 등 레거시 코드들을 사용하며 Svelte + routify로 변환 중에 있어 잘 동작하지 않는 부분과 routify 라이브러리가 동작하지 않아 문제였습니다. 이로 인해 1. 버전을 upgrade 2. Electron으로 대체와 같은 2가지 방법을 생각하고 있는 상황이며 문제를 해결하기에 앞서 해당 내용들(Cross-Platform Desktop Application, NW.js(node-webkit), Electron)에 대해 알아보도록 하겠습니다. Cross-Platform Deskto..
nw 최신 버전 + nw-builder 최신 버전으로 사용하다보니 다음과 같은 에러가 발생하였습니다. 에러 메세지를 보면 다음과 같습니다. Error: package.json not found in srcDir file glob patterns 'package.json에서 srcDir 파일 glob 패턴을 찾지 못했다'고 되어 있는데 우선 glob 패턴에 대해서 알아야 했습니다. glob 패턴은 과거 리눅스 운영체제에서 한 번에 여러 개의 파일을 찾을 때 사용해온 패턴 매칭 기법이지만 현재는 많은 프로그래밍 언어에서 지원합니다. 즉, * 사용입니다. 그래서 경로를 잘 찾지 못하고 있다고 판단이 되어 nw-builder를 사용하는 부분에서 경로를 잘 설정하고 명령어에 오류가 있을 수 있어 공식 문서를 보면..
OAuth 2.0 카카오 카카오 개발자 센터에서 엄청 자세하게 나와있어 개발을 진행할 수 있지만 빠르게 이해하고 개발을 진행하려는 분들을 위해 간단하게 개발한 과정을 설명하려고 합니다. 카카오 싱크라는 더 많은 기능을 가진 것도 있지만 기본적인 것에 초점을 맞추고 카카오 로그인을 개발해 보도록 하겠습니다. 사실 카카오에서 만들어놓은 라이브러리와 같은 것이기 때문에 OAuth 2.0 소셜 로그인 개념을 통해 과정을 알게 되면 더 쉽게 구현을 할 수 있습니다. 대표 구현 SvelteKit와 카카오 로그인 방법 (REST API)를 이용하여 크게 4가지를 구현하게 됩니다. (해당 내용에 대해 알고 싶으면 다음 글을 읽어보는 것을 추천합니다. ) Authorization Code Token (Access, Re..
OAuth 2.0 소셜 로그인 이번에 소셜 로그인의 도입에 앞서 기본 내용을 정리하고 개발을 진행하려고 합니다. 웹 서핑을 하다 보면 Kakao, Naver, Google 등 외부 소셜 계정을 통해 간편하게 회원가입 및 로그인을 할 수 있는 것을 볼 수 있습니다. 이때 사용되는 프로토콜을 OAuth라고 하며 다음과 같이 정의합니다. OAuth는 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로써 사용되는, 접근 위임을 위한 개방형 표준 프로토콜이다. OAuth에 대해 많은 방법들 중 OAuth 2.0 - Authorization Code Grant 방법으로 과정을 설명하기 전에 대표적인 용어들에 대해..
Touch Slider (Image) Touch Slider Image 기능을 구현하면서 Image 특정 부분에 넣어 Image Touch Slider 구현하기 등 여러 문제를 겪어 다음에는 같은 실수를 반복하지 않고 다른 분들도 효율적인 구현을 할 수 있도록 작성한 글입니다. ( Svelte를 기반으로 제작된 글입니다. ) Tech Svelte JavaScript / Html / CSS 과정 Touch slider은 Image를 쭉 나열해 두고 overflow: hidden으로 이미지를 숨기고 mouse event와 transform: translateX()를 이용하여 image 위치 고정(image index * -보여지는 너비(width)) 및 dragging 하는 모습을 보여줍니다. 1. Imag..
[Error] uncaught (in promise) typeerror: cannot read properties of undefined (reading 'style') Error Message Use Tech Svelte ag_grid (Data table library) Solve Svelte의 {#if} 문법을 사용하니 갑자기 다음과 같은 에러가 발생하였습니다. Error Message를 읽어보니 다음과 같이 해석을 할 수 있습니다. uncaught (in promise) typeerror: 정의되지 않은 속성을 읽을 수 없습니다.('style' 읽기) 우선 결론부터 이야기를 해보겠습니다. 생성되지 않은 ag-grid 테이블(DOM)에 접근해서 발생한 문제입니다. 보통 undefined 된 것들을 ..
[번역] JavaScript 가비지 컬렉터 실험 원문: https://dev.to/codux/experiments-with-the-javascript-garbage-collector-2ae3 #javascript #performance #webdeb #debugging 웹 어플리케이션에서 메모리 누수는 디버깅하기 어려운 것으로 악명이 높습니다. 가비지 컬렉터가 어떻게 수집가능한 객체와 수집 불가능한 객체를 결정하는지 이해하면 이를 피하는데 도움이 됩니다. 이 아티클에서 해당 동작이 너를 놀라게 할 수 있는 몇 가지 시나리오를 살펴보겠습니다. 가비지 컬렉터의 기초에 익숙하지 않는다면, Lin Clark의 A Crash Course in Memory Management 또는 MDN의 Memory Manage..