문제의 시작 현재 회사에서 안드로이드 앱들은 MainActivity에서 WebView를 활용해 React로 개발된 웹 화면을 네이티브 앱 내에 띄워서 표시하고 있다. 이전까지는 대부분 외부업체와의 연동이 없고 병원 전산팀과 연동하는 형태라서 특별한 문제가 없었다. 하지만 이번에 결제기능이 추가되면서.. 문제가생겼다. 결제 수단을 선택하고 그대로 프로세스를 진행하지않고 뒤로가기버튼을 선택한 경우, 앱내 웹뷰로 다시 돌아오지 않았다. 문제 상황 override fun onBackPressed() { Logger.debug() webView.evaluateJavascript("historyBack();") { if (it?.toString() == "1") ..

index.js:21 [MSW] The currently registered Service Worker has been generated by a different version of MSW (2.4.1) and may not be fully compatible with the installed version. It's recommended you update your worker script by running this command: • npx msw init You can also automate this process and make the worker script update automatically upon the library installations. Read more: https://ms..

RTK만 쓰다가 사내 스터디를 하게돼서 Zustand랑 TanStack Query 자료를 준비하게되었다. 회사에서 시연용으로는 포켓몬 API (무료 API중 제일 재밌 ㅇ_ㅇㅋㅋ)를 준비해서 가져갔다. 아래는 설명용으로 만든거! 블로그에도 쪄놔야지 히히 React + Zustand + Tanstack Query Zustand? Redux, Recoil 등과 함께 전역 상태를 관리할 수 있는 라이브러리. Redux와 개념적으로 비슷(Flux패턴을 채택)하기 때문에 Redux, RTK사용자가 학습하기 쉽다. Flux Pattern? 2014년 facebood F8컨퍼런스에서 발표된 아키텍처로, Client-Side 웹 애플리케이션을 만들기위해 사용하는 디자인 패턴 사용자 입력을 기반으로 Action을 만들고..

처음 리액트를 할때는 CRA를 하다가, 회사에서는 하나하나 프로젝트를 만들다가, 지금은 개인 공부는 Vite를 사용하게 되었다.. Vite? Vite Vite, 차세대 프런트엔드 개발 툴 ko.vitejs.dev 사용하지않는 모듈까지 설치해야했던 CRA과 달리 확실히 가볍고 실행이 빠르다. Vite로 리액트 환경 구성하기 npm init vite npm init vite 입력후 프로젝트명, 프레임워크선택, 타스 vs 자스 중 선택 하면 끝 그리고 밑에서 설명하는대로 cd #내 프로젝트명 npm i #npm install npm run dev #scripts 실행 폴더 경로 이동하고, npm 설치하고 scripts 실행하면 짜잔 하고 Vite로 만든 프로젝트를 실행할 수 있다.

Eslint 설정을 마치고나니 'React' must be in scope when using JSX 오류가 떴다. Eslint가 없을때는 React를 임포트 해주지않아도 Next 에서 알아서 인식을 해줬는데, Eslint 설정이 들어가고 나서는 스코프 오류가 생긴다. 해결방법1 import React from 'react' 상단에 react를 임포트를 해준다 해결방법 2 "rules": { "react/react-in-jsx-scope": "off" } eslintrc에 해당 규칙을 추가해준다