전체 글 71

리액트 네이티브로 안드로이드 환경 분리하기 (env 파일 분리 + 앱 패키지 이름 분리 + fcm 설정 + signing key 설정까지!)

공익 차원에서 쓰는 글.내가 이 설정 하나 하겠다고 정말 2주 넘게 쌩 고생을 했기에..참고로 저는 expo 안 쓰고 bare react-native-community-cli 를 씁니다!!!!!!목표.env.development, .env.production 환경 변수를 나눠서 디버깅이나 앱 빌드, apk, aab 파일 생성할 때 원하는 env 파일 적용되게 하기개발 환경 앱 패키지 이름은 com.myService.dev, 실제 앱 패키지 이름은 com.myService 이런 식으로 분리하기 + 파이어베이스(fcm) 도 설정하기귀찮게 안드로이드 스튜디오 키지 말고 vscode 내에서 커맨드만으로 디버깅, apk 파일 생성, aab 파일 생성 등 모든 걸 처리하기 (+ signing key 비밀번호, 별칭..

vscode 다이어그램 익스텐션: mermaid-js 사용하기

배경다른 개발자들과 일할 때 가장 좋은 소통 방식은 다이어그램인 것을 체감했다...학교에서 소프트웨어 공학이었나? 그 과목을 공부할 땐 왜 다이어그램 같은 걸 쓰지... 뭐 정해진 언어로 문서를 정리하니 편하긴 편할테지만 굳이? 싶은 마음이었는데 아~ 절대 아니다, 학교에서 배우는 건 버릴 게 없다; 진짜 솔직히 학교 다시 한 번 더 다니고 싶다 그 때 놓친 전공지식들이 너무너무 아까워 죽겠음 ㅠㅠ 직장 다니면 다닐 수록 대학원에 대한 욕망은 더욱 커져만 가는데... 다시 한 번 더 배우면 진짜 잘 배울 자신 있는데.....하여간~스스로의 플로우 정리라든가, 다른 개발자들 (특히 프론트 내에서만이 아니라 서버든 펌웨어쪽이든 등등)과의 소통을 위해서 다이어그램의 필요성을 절실히 느꼈다.그러던 와중에 vsc..

개발 알쓸신잡 2025.03.23

리액트 네이티브에서 pdfmake 라이브러리 쓸 때 (NOBRIDGE) ERROR Unhandled promise rejection [RangeError: Maximum call stack size exceeded (native stack depth) 에러 해결하는 법

내가 기억할라고 빠르게 씀 + 공익을 위해 글 씀............결론부터 말하자면:const docDefinition = [ content: [ {text: "", fontSize: 24, }, {...} ], defaultStyle: { ... } ...]위 docDefinition.content 에 들어갈 객체를 동적으로 만들지 말자!!!!!자세히 설명하자면:지금 나는 pdfmake 로 좀 복잡한 디자인을 구현 중인데 예를 들어 table의 각 row마다 isDark: boolean 값에 따라 image 컴포넌트를 추가해야 했다.그래서 대충 이런 식의 함수를 구현했다.const createCellStyle = (isDark?: bo..

리액트에서 pdfMake 한글 깨짐 문제 해결하기

pdfMake는 다 좋은데 폰트 커스텀하는 거랑 이미지 넣는 게 힘들다. (개인 생각..) 특히 `pdfMake 한글깨짐` 관련 글을 찾아보면 grunt를 깐다, gulp을 쓴다 등등 여러 글들이 있는데 솔직히 나한텐 다 안 통했다 ㅠㅠ근데 공식문서에서 보면 추가 라이브러리 설치 없이 그냥 커스텀 폰트 적용할 수 있더라??? 역시 사람은 공식문서를 읽어야 함.근데... 공식문서가 참 이해 안되게 적혀있었다 ㅠㅠ https://pdfmake.github.io/docs/0.1/fonts/custom-fonts-client-side/vfs/ 이 링크 들어가면 커스텀 폰트를 쓰는 두 가지 방식이 있었는데, 그 중 2번 via URL protocol은 쉽긴 쉬운데 ttf 파일을 지원하는 cdn을 무조건 써야 하는..

react native 에서 gradlew clean 실패할 때

내가 기억해둘라고 빠르게 적어둠.보통 뭐 androidManifest.xml 이든 뭐든 좀 설정 크게 바뀌었다, 아님 아 이거 이대로 빌드 안되고 충돌날거 같은데 하는 쎄한 감이 왔다 하면 cd android & gradlew clean을 해야 하는데 가끔 여기서마저 에러 날 때가 있다.에러 메세지는 다양한데 일단 > Task :gradle-plugin:settings-plugin:processResources FAILED 라든가, CMaker FAILED 라든가.. ... 하여간 gradlew clean이 실패한다.나는 보통 이런 문제를 컴퓨터를 옮겨가며 코딩할 때 주로 마주한다. >> 이게 뭔 뜻이냐면, 회사 컴퓨터로 코딩했다가 git push pull 해서 개인 컴퓨터로 작업했다가 ... 이런 식으..

react Chart.js 에서 "Scatter is not a registered element" 에러 해결하는 법

0. 참고라이브러리: react, typescript, chart.js 3.9.1버전, react-chartjs-2 4.3.1버전 (실시간 스트리밍 기능 써야 해서 일부러 chart.js는 latest말고 낮은 버전을 쓰는 중)웹 배포 환경: firebase hosting컴퓨터: window 11, 크롬1. 배경chart.js, react-chartjs-2 라이브러리를 사용해 그래프를 화면에 보여줘야 했다.처음엔 bar 그래프만 보이면 돼서, 대충 만들어 쓰다가 그 위에 scatter 그래프를 추가해야 했어서 mixed chart로 수정한 후 웹을 배포했다.그런데 갑자기 공백 창이 뜨면서 "scatter is not a registered element" 에러가 뜨기 시작했다. 분명 내 로컬 환경에선 문..

리액트 프로젝트 하나로 두 개 이상의 파이어베이스 사이트에 호스팅하는 법

0. 배경나는 웹 호스팅할 때 파이어베이스를 쓴다.근데 한 프로젝트에다가 하나의 파이어베이스 웹 콘텐츠를 연결해서 호스팅하는 건 쉬운데, 두 개 이상의 사이트에 호스팅해야 할 일이 생겼다.단순히 하나의 build 파일을 두 개의 사이트 각각에 똑같이 배포하는 게 아니라, (1) .env.development 가 적용된 dev 용 build 파일을 만들고 이걸 dev-website 에 배포하기, (2) .env.production 이 적용된 prod 용 build 파일을 만들고 이걸 production-website에 배포하기. -> 이렇게 dev용, prod용 환경을 따로따로 만들고 각 사이트에 배포해야 하는 것이다.따라서 이번 포스팅에선 .env.development, .env.production 각 ..

.env 파일에 http~ 로 로컬 서버 주소 설정했는데 자꾸 https로 api 통신되는 문제

1줄 결론: meta http-equiv='Content-Security-Policy" ... 이 설정 빼세요. ----next js 프론트엔드 프로젝트 폴더에서 .env 파일에 NEXT_PUBLIC_SERVER_ADDRESS = 'http://192.111.3.11:3000/' 이렇게 주소를 정하고 api 통신을 하는데 자꾸 https://192... 로 통신이 날아가는 문제가 생겼다. 이전에 상용서버(https:// ,,, ) 로 쿼리 날리던 게 캐싱돼서 덮어쓰이는 건가 싶었지만, 그건 아녔다. 그냥 진짜 내 환경변수의 http가 https로 변경되는 것이었다. 챗지피티한테 왜 그런지 물어봤더니... 아하!! 보안 문제때문에 https로 자동으로 바꿔준단 거군 -> 근데 30분동안 끙끙대며 다 해봤는..