차마시는 개발자

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를 기반으로 제작된 글입니다. ) TechSvelteJavaScript / Html / CSS 과정Touch slider은 Image를 쭉 나열해 두고 overflow: hidden으로 이미지를 숨기고 mouse event와 transform: translateX()를 이용하여 image 위치 고정(image index * -보여지는 너비(width)) 및 dragging 하는 모습을 보여줍니다.1. Image 고정 ..

[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..

첫 서비스 개발을 어떻게 잘 할 수 있을까? 개발자로써 서비스의 한 부분을 맡아 개발을 진행하게 되는데 새로운 서비스를 처음 맡게 되었을 때 어떻게 '잘' 개발 할 수 있지? 에 대한 고민이 있었습니다. 보통 온보딩과 가볍게 회사 간단한 서비스를 개발하면서 스며들긴 하지만 좀 더 빠르게 스며들고 싶다는 저의 욕심을 막을 수 없었습니다. 또한 저희 회사는 정형화된 온보딩 과정이 부족하였고 이런 문제를 겪고 저와 같은 고민을 하시는 분들과 의견을 나누고 싶어 블로그를 켰고 처음 개발 업무를 진행하면서 집중적으로 보면 좋을 것들을 저의 경험을 위주로 글을 작성했습니다. 우선, 저는 JQuary로 되어 있는 관리자 페이지를 Svelte로 전환하는 업무를 맡았습니다. 기존에 JQuary로 되어 있는 페이지는 MP..