[Error] Error: package.json not found in srcDir file glob patterns
nw 최신 버전 + nw-builder 최신 버전으로 사용하다보니 다음과 같은 에러가 발생하였습니다. 에러 메세지를 보면 다음과 같습니다. Error: package.json not found in srcDir file glob patterns 'package.json에서 srcDir 파일 glob 패턴을 찾지 못했다'고 되어 있는데 우선 glob 패턴에 대해서 알아야 했습니다. glob 패턴은 과거 리눅스 운영체제에서 한 번에 여러 개의 파일을 찾을 때 사용해온 패턴 매칭 기법이지만 현재는 많은 프로그래밍 언어에서 지원합니다. 즉, * 사용입니다. 그래서 경로를 잘 찾지 못하고 있다고 판단이 되어 nw-builder를 사용하는 부분에서 경로를 잘 설정하고 명령어에 오류가 있을 수 있어 공식 문서를 보면..
2. OAuth 2.0 카카오 간단 구현
OAuth 2.0 카카오 카카오 개발자 센터에서 엄청 자세하게 나와있어 개발을 진행할 수 있지만 빠르게 이해하고 개발을 진행하려는 분들을 위해 간단하게 개발한 과정을 설명하려고 합니다. 카카오 싱크라는 더 많은 기능을 가진 것도 있지만 기본적인 것에 초점을 맞추고 카카오 로그인을 개발해 보도록 하겠습니다. 사실 카카오에서 만들어놓은 라이브러리와 같은 것이기 때문에 OAuth 2.0 소셜 로그인 개념을 통해 과정을 알게 되면 더 쉽게 구현을 할 수 있습니다. 대표 구현 SvelteKit와 카카오 로그인 방법 (REST API)를 이용하여 크게 4가지를 구현하게 됩니다. (해당 내용에 대해 알고 싶으면 다음 글을 읽어보는 것을 추천합니다. ) Authorization Code Token (Access, Re..
1. OAuth 2.0 소셜 로그인 개념
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 된 것들을 ..
첫 서비스 개발을 어떻게 잘 할 수 있을까? 개발자로써 서비스의 한 부분을 맡아 개발을 진행하게 되는데 새로운 서비스를 처음 맡게 되었을 때 어떻게 '잘' 개발 할 수 있지? 에 대한 고민이 있었습니다. 보통 온보딩과 가볍게 회사 간단한 서비스를 개발하면서 스며들긴 하지만 좀 더 빠르게 스며들고 싶다는 저의 욕심을 막을 수 없었습니다. 또한 저희 회사는 정형화된 온보딩 과정이 부족하였고 이런 문제를 겪고 저와 같은 고민을 하시는 분들과 의견을 나누고 싶어 블로그를 켰고 처음 개발 업무를 진행하면서 집중적으로 보면 좋을 것들을 저의 경험을 위주로 글을 작성했습니다. 우선, 저는 JQuary로 되어 있는 관리자 페이지를 Svelte로 전환하는 업무를 맡았습니다. 기존에 JQuary로 되어 있는 페이지는 MP..
IntelliJ(WebStorm)를 어떻게 가볍게 사용할까? 이번에 처음 사용하게 된 IntelliJ(WebStorm)를 어떻게 하면 가볍게 사용 가능한지 알아보고 있었는데 IntelliJ(WebStorm)와 관련된 것들에 대해 깊게 찾아보고 있다. 그 중 IntelliJ(WebStorm)와 VSCode의 차이점은 무엇인가? 라는 의문을 가지게 되었다. 간단하게 내린 결론은 IntelliJ(WebStorm)는 Java JVM에서 통해 동작하고 VSCode는 V8기반의 Electron에서 동작하고 있다는 점 이다. 그래서 IntelliJ(WebStorm)을 어떻게 가볍게 사용하기 위한 옵션 끄기, 메모리 관리등에 대한 설명에 앞서 JVM, V8기반 Electron에 대해 간단하게 설명하고자 합니다. (JV..
어떻게 하면 메뉴를 쉽게 짤 수 있을까? (데이터 구조 관련) 이번에 Style Guide Menu를 수정하는 부분을 맡았습니다. 처음에는 CSS 만 수정하면 되는 줄 알았으나 값들의 데이터 구조를 잘 조합하여 데이터가 많아질 경우를 대처하고 한 눈에 보이고 간략한 코드를 짜는 것이 주된 목적입니다. 사용 기술 HTML, CSS, JavaScript, Svelte 변경 전 Data 형태 간단하게 말하면 [{}]와 같은 형태로 되어 있습니다. let url = [ { MENU_NAME: "1", MENU_URL: "/dev" }, { MENU_NAME: "2", MENU_URL: "/dev" }, ]; 그래서 Svelte에서 다음과 같이 뿌려주면 됩니다. {#each url as menu} //routin..