차마시는 개발자

[Flutter, Android] FCM (push notification) Push Notification은 Firebase에서 각 핸드폰으로 알림 메세지를 전달하는 것을 구현해보려고 합니다. push notification을 하는 방법이 많아서 선택을 하여야 하는데 쉽게 여러 핸드폰으로 알림을 보낼 수 있는 방법이 Firebase를 이용한 것입니다. 삽질을 많이해서 다른 분들은 쉽게 진행 할 수 있기를 바라며 😄 공통 부분을 설정하고 Background or Foreground 방법을 선택해서 순서에 맞게 실행하면 됩니다. 전체 코드를 보실 분은 공통 + Foreground 방법을 보시면 됩니다. 개발환경 IDE: Android Studio Flutter Webview Android Studio로 개..

Webview 양방향 통신 비동기 -> 동기 전환 (w. Flutter) webview_flutter 라이브러리를 사용하면서 Flutter를 이용하여 Device의 위치 기능, 정보 등 다양한 기능을 사용하기 위해 webview_flutter의 내장 함수 ..addJavaScriptChannel()로 post Message를 보내고 .runJavascript()를 통해 웹의 JavaScript를 동작하여 양방향 통신 하였습니다. 그러나 다음과 같은 문제가 발생하게 되었습니다. .runJavascript() 동작이 안드로이드에서는 되고 iOS에서는 되지 않는 문제 비동기적으로 실행되며 .runJavascript()가 Flutter에서 실행되어 웹이 수시로 상태가 변화하지 못하는 문제 그래서 1번과 같은 문..

많은 데이터로 인한 문제 (무한 스크롤성능 개선) 영업사원을 위한 페이 관련 웹/앱을 개발하고 출시하고 난 뒤에 문제가 발생하였습니다. 매장의 정보가 10,000건 정도로 많은 경우 웹/앱에서 매장 정보를 그려주는 데 시간이 꽤 오래 걸려 불편함이 있다는 피드백을 받게 되어 수정해야 했습니다. 좀 더 자세히 설명을 해보겠습니다. 해당 페이지에서 전체 매장의 개수가 약 10000건 정도 있을 때 담당 매장에서 전체 매장 버튼을 눌러 전체 매장의 리스트를 웹/앱에서 그려줄 때 시간이 꽤 오래 걸렸습니다. 코드 (Svelte) 작성 코드는 보기 좋게 간략화를 많이 진행한 코드입니다. 기존 개발(w. 코드) 코드를 보면 전체 매장 버튼을 눌렀을 때 전체 데이터를 상태변화하는 변수에 할당하여 전체 매장을 한 번에..

프로젝트 회고 이번에 안경을 도매로 판매하는 회사의 영업사원들을 위한 웹/앱을 메인 개발자로 진행을 했습니다. 즉, 100명 이상의 영업사원이 대금을 받으러 다닐 때 사용하는 웹/앱을 만들었습니다. (웹 프론트 개발과 Flutter 개발을 맡아서 진행하였습니다) 디자이너분과의 문제 이때 디자이너분과 처음 합을 맞추는 것이어서 디자이너분이 어떠한 방식으로 일을 하고 있는지 파악하는 시간이 필요했습니다. 그러나 급하게 완성해야 해서 서로를 파악하는 시간이 부족했고 삐걱대기 시작했습니다.... 디자이너분은 회사에 거의 8년 이상 계셨던 분이어서 다른 팀원들은 디자이너분이 만들어 놓은 대로 많이 따랐습니다. 그리고 저는 신입이지만 뭔가 잘하고 싶은 마음에 하나하나 같이 이야기하고 좀 저의 의견도 들어갔으면 했지..

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