전체 글

문제상황msw를 업그레이드 했다 (프로젝트 내부에서 기존 msw 1.xx 버전을 2.31로 업그레이드함)Migration guideline 에 따라 코드 migration을 했는데 개발 환경에서 실행하는 msw의 모킹API의 응답이 자꾸 404 (Not Found)가 떨어졌다. 그래서 페이지가 아예 안뜨는 문제가 있었다.  디버깅페이지가 렌더링되면서 api를 호출하지 않고 사용자 이벤트를 받아야지만 api가 호출되는 페이지들은 정상적으로 msw의 mocking 응답을 잘 주었다.문제는 페이지를 띄우면서 바로 api를 호출하는 페이지에서만 해당 404 에러가 발생했다. https://mswjs.io/docs/getting-started#step-2-describe Getting startedThree st..

상황 로컬에서 리액트로 개발하고 있는 화면을 모바일 웹뷰화면에서는 어떻게 보이는지 바로 확인하고 싶어 앱 내에서 로컬 서버주소를 호출했더니 ERR_CLEARTEXT_NOT_PERMITTED 라는 에러가 떴다.아래와 같이 웹페이지 주소가 뜨면서 로딩이 안된다고 함    해당 오류는 https 통신이 아닌 http 통신을 보안문제로 막아둬서 그러니 http 통신을 오픈하면 된다.  해결main > AdroidManifest.xml 파일에 아래를 추가해주고, 에뮬레이터를 재시작하니 잘 되었다.  Refhttps://docs.flutter.dev/release/breaking-changes/network-policy-ios-android#allowing-cleartext-connection-for-debug-b..

구글 코랩?웹 브라우저에서 텍스트, 파이썬 코드를 자유롭게 작성할 수 있는 텍스트 에디터 특징프로그램을 설치하지않고도 웹 브라우저만 있으면 파이썬으로 개발 가능 파이썬을 실행하기위한 인터프리터를 pc에 설치해서 소스코드-컴파일-실행 방식을 거쳐야 개발이 가능한 전통적인 방식 탈피 구글 클라우드 서버 자원을 무료로 사용 쉬운 공유 - 다른 사람과도 실시간 공유 가능, 구글 드라이브 연동 사용코랩에서 파일은 노트북이라고 부름새 파일 열기 File < New notebook 확장자는 .ipynb로 interactive python notebook 의 약자IPython Notebook란? 파이썬을 실행시킬 수 있는 소스코드와 텍스트를 쓸 수 있는 캔버스 파일인 Jupyter Notebook의 이전 명칭 주피터 ..

터보레포로 구축한 프로젝트의 루트 디렉토리의 turbo.json 파일은 위와 같다. 착각했던 것turbo.json { "pipeline": { "build": { "dependsOn": ["^build"], "outputs": ["dist/**"] }, ... }이걸 보고 빌드 결과물의 outputs이 루트 디렉토리의 dist에도 저장되겠구나 생각했다. 근데 turbo run build를 하고 아무리 찾아봐도 루트 디렉토리에 dist 폴더가 보이지않았다;;루트에서 빌드를 하고나면, 워크스페이스 작업물인 패키지, 하위 프로젝트들의 빌드 결과물이 루트에도 묶여서 dist 폴더에 저장이 된다고 착각했던 것이다.빌드 Outputs 경로빌드 결과물은 각 워크스페이스의 dist..

프로젝트의 의존성 패키지를 최신 버전(latest version)으로 업데이트 하려고했다. npm update라는 명령어를 쳐서 업데이트를 했는데 package.json 파일에 새로운 버전으로 업데이트가 절~대 되지않았다.   에러메시지가뜨고 npm audit 으로 점검해보라더니 fix --force 를 해도 package-lock.json에만 몇몇 변경사항이 뜨고, 특정 패키지를 update하래도 그 패키지는 package-lock에도 업데이트가 안되고 다른 엄한 패키지들만 업데이트가 되어 있었다.  알고보니 의존성 패키지를 `최신 버전으로` 업데이트하는 명령어는 `npm update`가 아니었다;;  npm update npm-update 는 package.json에 정의된 최신버전까지만 업데이트 된..

상황 turbo라는 패키지를 global로 설치했는데, terminal에서 찾을 수 없는 명령어라는 에러가 계속 떴다. npm list -g 명령어로 어떤 패키지들이 global로 깔려있는지 확인하면, 잘 나온다.    문제패키지를 설치했지만 command not found 에러를 계속 마주한다면, 환경변수 문제이다.  해결 글로벌 패키지의 실행파일이 위치하는 경로를 환경변수에 추가해서, 명령어를 어디에서든지 사용할 수 있게 한다.zsh 쉘의 configuration file (설정 파일)인 `.zshrc` 파일에 환경변수를 추가한다. 현재 npm global path를 알아내기 npm config get prefix 그럼 npm global 패키지가 설치되어있는 경로가 나온다. .zshrc 파일을 수정..

상황1번째 api 요청 결과에 따라서 2번째 api가 처리되도록 동기적으로 실행순서를 보장하고 싶다. 1번째 api 사용자가 입력한 비밀번호가 기존 비밀번호와 일치하는지 확인 //사용자 비밀번호 확인 checkCurrentPassword: builder.mutation({ query: (password: string) => ({ url: 비밀번호확인 요청 주소, method: 'POST', headers: { 'Content-type': 'text/plain', }, body: password, }), }), 2번째 api사용자 비밀번호를 변경//비밀번호 변경updatePasswordQuery: b..

목표플러터 APP에서 webview_flutter 플러그인을 사용해서 최소한의 코드로 리액트 웹페이지를 띄운다. 플러터 프로젝트 준비https://hanaindec.tistory.com/entry/flutter-%EC%9B%B9%EB%B7%B0#2.%20%ED%94%8C%EB%9F%AC%ED%84%B0%20%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%20%EC%83%9D%EC%84%B1-1 flutter 설치 및 개발 환경 설정 - VS Code, Android Studio 환경 (Mac silicon)플러터로 앱 개발을 해보려고 플러터를 설치하고 필요한 환경을 구축해보았다.나는 원래 웹 프론트 개발자이므로 VS Code는 설치되어있어 앱 개발 editor도 VS Code를 그대로 ..