Webview 양방향 통신 비동기 -> 동기 전환 (w. Flutter) webview_flutter 라이브러리를 사용하면서 Flutter를 이용하여 Device의 위치 기능, 정보 등 다양한 기능을 사용하기 위해 webview_flutter의 내장 함수 ..addJavaScriptChannel()로 post Message를 보내고 .runJavascript()를 통해 웹의 JavaScript를 동작하여 양방향 통신 하였습니다. 그러나 다음과 같은 문제가 발생하게 되었습니다. .runJavascript() 동작이 안드로이드에서는 되고 iOS에서는 되지 않는 문제 비동기적으로 실행되며 .runJavascript()가 Flutter에서 실행되어 웹이 수시로 상태가 변화하지 못하는 문제 그래서 1번과 같은 문..
많은 데이터로 인한 문제 (무한 스크롤성능 개선) 영업사원을 위한 페이 관련 웹/앱을 개발하고 출시하고 난 뒤에 문제가 발생하였습니다. 매장의 정보가 10,000건 정도로 많은 경우 웹/앱에서 매장 정보를 그려주는 데 시간이 꽤 오래 걸려 불편함이 있다는 피드백을 받게 되어 수정해야 했습니다. 좀 더 자세히 설명을 해보겠습니다. 해당 페이지에서 전체 매장의 개수가 약 10000건 정도 있을 때 담당 매장에서 전체 매장 버튼을 눌러 전체 매장의 리스트를 웹/앱에서 그려줄 때 시간이 꽤 오래 걸렸습니다. 코드 (Svelte) 작성 코드는 보기 좋게 간략화를 많이 진행한 코드입니다. 기존 개발(w. 코드) 코드를 보면 전체 매장 버튼을 눌렀을 때 전체 데이터를 상태변화하는 변수에 할당하여 전체 매장을 한 번에..
ESLint, Prettier ESLint: 코드 사용방식들을 일관성있게 고쳐주는 역할(function vs arrow function, for vs forEach vs map) Prettier: 코드 스타일을 통일성있게 고쳐주는 역할(들여쓰기, 공백...) ESLint, Prettier을 적용해야 코드의 공통화, 편리성에 대한 이점을 잘 설득하게 되어 팀원들이 모두 잘 사용해볼 수 있는 메뉴얼입니다. IntelliJ, WebStorm, Android Studio 등 JetBrains의 IDE를 사용하며 ESLint, Prettier를 처음 적용하는 분들에게도 도움이 되었으면 좋겠습니다. :) 큰 틀은 다음과 같습니다. ESLint, Prettier에 관련된 Package 설치 => ESLint, Pre..
[Error] Failed to load resource: the server responded with a status of 403 () 다음과 같이 나오고 개발자 도구에서 다음과 같이 나오는 에러를 보게 되었습니다. 보통 4xx에 관한 오류는 클라이언트(응용 프로그램에 액세스하는 데 사용되는 웹 브라우저 또는 장치) 문제로 간주됩니다. 그러나 콘텐츠를 요청한 클라이언트(대부분의 경우 웹 브라우저)에 대한 인증을 거부하는 서버가 포함되기도 합니다. 문제 해결 1. 잘못된 URL 2. 브라우저 쿠키, 캐시 삭제 HTTP 쿠키는 로컬 장치에 데이터를 저장하고 쿠키를 사용하여 특정 브라우저 및 장치 정보를 기억합니다. => 유효하지 않고 손상된 쿠키로 인해 서버에 대한 인증이 잘못되어 문제가 발생할 수 있습..
Inno Setup으로 NW.js로 감싼 프로그램 Package 만들기 NW.js로 감싼 프로그램을 설치 파일로 만들어 사람들에게 나눠야 합니다. Inno Setup 말고도 NSIS, WiX 등 유사한 기능을 가진 프로그램들이 있지만 제가 생각하기에 Inno Setup을 선택한 이유는 간편한 사용성, 작은 설치 프로그램 크기로 인한 다운로드 및 배포 용이와 오랜 기간 사용되어 온 프로그램인 만큼 신뢰성이 있어 선택을 한 것 같습니다. (+ 상업적으로 무료 ㅎㅎ) Inno Setup : 윈도우 운영 체제에서 사용되는 설치 프로그램 작성 도구입니다. 동작 과정 저의 생각에는 알집과 같이 프로그램을 감싸서 실행 파일로 만들어 주는 것이라고 생각이 들지만 좀 더 자세한 과정을 알아보도록 하겠습니다. 1. 스크립..
[문제] 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를 사용하는 부분에서 경로를 잘 설정하고 명령어에 오류가 있을 수 있어 공식 문서를 보면..