전체 글63 mongodb atlas whitelist에 0.0.0.0을 넣어도 연결이 안될 때 📌 상황Node.js 프로젝트에서 mongoose를 통해서 mongodb atlas에 연결을 하려고 했는데, whitelist 에러 발생.하지만 이미 whitelist에 0.0.0.0/0으로 모든 IP를 허용해놓은 상태.Could not connect to any servers in your MongoDB Atlas cluster.One common reason is that you're trying to access the database from an IP that isn't whitelisted.Make sure your current IP address is on your Atlas cluster's IP whitelist 이 문제를 해결하기 위해서 시도한 방법들을 차례로 적어보았다. 1. 첫 .. 2025. 6. 7. React Native에서 Flutter로 넘어간 이유 처음 React Native를 선택했던 이유 이미 JavaScript와 React를 쓰고 있었고, Flutter를 쓰려면 Dart를 따로 더 공부해야한다는 러닝커브 때문에 자연스럽게 React Native를 선택했다. 왜 React Native를 떠났나?1. 빌드 방식 차이react native로 개발을 하다가보면 하루 종일 빌드 이슈만 해결하다가 개발은 손도 대지 못하는 날들이 있었다. RN으로 개발을 하다가 마주하는 고질적인 문제점을 나는 아래처럼 순환이 된다고 생각했다.유독 android에서 알 수 없는 버그 -> build 방식(bridge) -> UI 차이 -> 유독 android에서 알 수 없는 버그 -> ...(반복) 위 이미지를 보면 react native는 중간에 bridge가 껴있는 모.. 2025. 2. 2. [Flutter] 화면 중앙 정렬 SizedBox vs Column vs Center Flutter에서 하위 요소를 화면 중앙에 배치하는 방법에는 3가지 방법이 있다.SizedBox-Column 조합, Column 단독 사용, Center 위젯 이 3가지 방법의 차이에 대해서 살펴봤다. 1. SizedBox - Column 조합SizedBox 위젯에서 너비를 double.infinity로 해서 가로를 최대로(화면 너비로) 늘린 후 자식 위젯을 Column으로 둬서 가운데 정렬 시키는 방법이다.Column은 기본적으로 자식들을 가로 상 가운데 정렬을 하기 때문에 SizedBox가 화면의 전체 너비를 차지하게 하면 자식 요소가 화면의 가로 상 가운데로 가게 하는 것이다. 그리고 MainAxisAlignment.center로 두어 세로 상으로도 가운데에 두게 되면 결과적으로 자식 요소가 화면 .. 2025. 2. 2. [VSCode]유용한 비주얼스튜디오코드 단축키 *MAC OS 기준option + z : word wrap on/offcmd + \ : 화면 splitcmd + , : setting(설정)cmd + p: 파일명 검색cmd + d : 동일한 단어 하나씩 누적 선택 2024. 12. 8. [React Native] 안드로이드 aab 파일 생성 시 파일명 변경하기 📌 플레이스토어 배포 용 aab 파일 생성 명령어$ cd android$ ./gradlew app:bundleRelease 이러면 {프로젝트폴더}/android/app/build/outputs/bundle/release 폴더에 app-release.aab라는 이름으로 aab 파일이 만들어진다.수정 배포 등으로 인해 다시 빌드를 하면 같은 이름으로 생성을 하기 때문에 파일 덮어쓰기가 안되거나, 파일명으로 신버전의 파일이 맞는지 확인할 수가 없다.최신 aab 파일임을 구분하기 위해서 app-release.aab 파일에 날짜 정보가 있었으면 좋겠다고 생각했다. 📌 app/build.gradle 파일 수정android { ...}// 이 부분 코드 추가tasks.whenTaskAdded { task -> .. 2024. 10. 22. [React Native] env 파일 변경사항 반영 안될 때 env 파일 내용을 변경했는데, 반영이 안된다면 캐시가 남아있는 경우일 수 있다.캐시를 지워주고 프로젝트를 실행하도록 하자.$ npm start -- --reset-cache# or$ react-native start --reset-cache 2024. 9. 22. [React Native] REALM Error: Accessing object which has been invalidated or deleted 📌 상황환경) @react-navigation/native - goBack() 사용, realm.delete() 사용 A 화면: 데이터 목록을 보여줌.B 화면: 각 데이터 상세 내용을 보여줌.A화면에서 데이터 선택 후 B화면 진입. B화면에서 해당 데이터 삭제 버튼을 누르면 A화면으로 돌아감.이 때, Accessing object which has been invalidated or deleted 에러 발생. 🐛 원인Realm 객체를 삭제한 후에도 앱에서 해당 객체를 참조. 💡 해결 방법 Realm 객체를 삭제한 후에는 앱에서 해당 객체를 참조하지 못하도록 해야함.Object.assign({}, realmObject)를 사용하여 객체를 복사하고 리스트에 복사된 객체를 사용하도록 함.const rea.. 2024. 9. 14. [React Native] --list-devices에서 USB로 연결한 안드로이드 실기기가 보이지 않을 때 react-native run-android --list-devices 명령어 입력시 실행 가능한 안드로이드 기기/에뮬레이터 목록이 뜨는데, 이전까지도 잘 떴던 실기기가 어느날부터 목록에서 나오지 않았다.우선 아래 명령어를 실행한다.$ adb kill-server 그 후에 컴퓨터에 USB로 안드로이드 기기를 연결한 상태에서 아래 명령어를 입력한다.$ adb devices상태가 unauthorized이긴 하나 연결된 기기 목록에는 뜨는 것을 확인했다. 이제 안드로이드 기기에서 설정 > 개발자 옵션 > USB 디버깅을 ON으로 만들어주면 "USB 디버깅을 허용하시겠습니까?"라는 메시지와 컴퓨터 RSA 키 지문이 같이 화면에 표시된다. 이 메시지를 허용을 누른다. adb devices 명령어 결과에서 휴대폰 .. 2024. 9. 4. Nginx HTTPS SSL 설정하기(Nginx, Let's Encrypt, EC2) EC2 인스턴스에 HTTPS를 적용하려면 우선 SSL 인증서를 발급받아야 한다.무료로 SSL 인증서를 받을 수 있는 Let's Encrypt를 사용했다. 1. Certbot 설치Certbot: Let's Encrypt 인증서를 발급받고 자동갱신 하기 위함$ sudo apt-get update$ sudo apt-get install certbot python3-certbot-nginx 2. SSL 인증서 발급sample.com과 www.sample.com 부분에 실제 도메인을 넣어준다.# sudo certbot --nginx -d $ sudo certbot --nginx -d sample.com 3. 인증서 자동 갱신 설정Let's Encrypt를 사용해서 발급된 인증서는 3개월 동안 유효하다. 아래 명령.. 2024. 9. 3. [EC2] 프리티어 사용 중 과금 원인(VPC) AWS EC2 프리티어를 사용 중인데, 비용이 발생했다. 빨간색 사각형 위에 EC2 부분은 0달러로 책정되어있는데, 빨간 사각형은 0.43달러가 측정되어있다. 인스턴스를 하나만 사용하고 있는데, 이게 무슨일일까?IP주소를 사용해서 비용이 발생하고 있다고 나와있으니, Amazon VPC IP Address Manager탭으로 가봤다. 퍼블릭 IP 주소 목록을 보면 EC2 public IP를 제외하고, Load balancer에 쓰이는 서비스 관리형 IP가 2개가 더 있는 것을 확인할 수 있다. 결국 추가적으로 사용 중이던 로드밸런스에 할당된 IP주소에 대한 비용이 책정된 것이다.SSL 인증서를 사용하기 위해서 ACM(Amazon Certificate Manager)와 로드밸런서 조합을 사용한게 원인이었다.. 2024. 9. 3. [Nginx] 하나의 서버에서 path로 서비스 분기하기 하나의 AWS EC2 인스턴스에 여러 서비스를 띄우고 base url 뒤에 붙어서 들어오는 path로 서비스를 분기하도록 하려고 Nginx를 사용했다.base_url/path1 --> port 3000번에 띄워진 서비스에 접근base_url/path2 --> port 3001번에 띄워진 서비스에 접근 base_url/path3 --> port 3002번에 띄워진 서비스에 접근 1. Nginx default 파일 접근$ sudo vi /etc/nginx/sites-available/default 2. location 블럭 수정default 파일을 보면 location / 이 정의되어있는 부분이 있다. 이 부분을 다음과 같이 path와 서비스 주소에 맞게 수정해주면 된다.location /path1/ {.. 2024. 9. 3. MacOS DNS 캐시 지우기 📌 현상같은 도메인을 브라우저에서 접속할 때는 정상적으로 응답을 받는데, Postman을 통해서 응답을 받으려고 할 때는 Error: getaddrinfo ENOTFOUND 에러 메시지를 받았다. 이 에러는 도메인 이름을 DNS 서버에서 찾을 수 없을 때 발생하는 에러다. DNS 설정이나 네트워크 관련 문제일 가능성이 크다.Postman이 실행되는 네트워크 환경이 도메인에 대한 DNS 요청을 차단하거나 필터링 할 수 있다. 브라우저랑 Postman이 서로 다른 DNS를 바라보고 있는 경우일 수 있다. 그래서 Postman을 구동할 때 원래 쓰던 와이파이 대신에 휴대폰 핫스팟에 연결해서 써봤더니 정상적으로 호출이 됐다.nslookup이랑 dig로 도메인을 호출해봤을 때 응답이 제대로 오는 것을 확인했다... 2024. 9. 2. [Ubuntu] timezone 변경하기 1. 시간대 이름 확인// timezone 전체 목록 가져오기$ timedatectl list-timezones// timezone 목록에서 Seoul만 가져오기$ timedatectl list-timezones | grep SeoulAsia/Seoul 2. 시간대 변경$ sudo timedatectl set-timezone Asia/Seoul 3. 변경된 시간대 확인$ timedatectl Local time: Sun 2024-09-01 01:01:28 KST Universal time: Sat 2024-08-31 16:01:28 UTC RTC time: Sat 2024-08-31 16:01:28 .. 2024. 9. 1. [Node.js] Node에서 replaceAll 사용하기 MDN에 따르면 node.js version 15.0.0부터 replaceAll 메서드가 지원된다고 써있다. 하지만 나는 노드 버전이 18.16.0임에도 불구하고 replaceAll을 사용할 수 없었다. 그래서 replace + 정규식 조합을 쓰기로 했다.// 예시) 문자열 '-'를 문자열 '.'로 바꾸기const originalTxt = 'Hello-World-Text';const changedTxt = originalTxt.replace(/-/g, '.');console.log(changedTxt); // 'Hello.World.Text'; MDN: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Strin.. 2024. 8. 22. [Node.js] FCM으로 푸시 메시지 전송(단일, 여러개) 📌 선행 작업발급받은 serviceAccountKey.json 파일로 초기 세팅해주기.import admin from 'firebase-admin';import serviceAccount from 'path/to/serviceAccountKey.json';admin.initializeApp({ credential: admin.credential.cert(serviceAccount)}); 1. 단일 건 전송admin.messaging().send() 사용token 키 값에 푸시 메시지를 보낼 단일 token 값 설정import admin from 'firebase-admin';const token = 'token123456789';const message = { token: token, da.. 2024. 8. 21. [React Native] ios react-native-permissions로 APP_TRACKING_TRANSPARENCY 요청하기 ios에서 앱을 실행하다보면 아래 이미지처럼 사용자 활동 추적 메시지를 본 적이 있을 것이다. 이 팝업이 뜨도록 설정하는 과정을 보도록 하자. react-native-permissions 패키지(https://www.npmjs.com/package/react-native-permissions)를 사용했다. 패키지 설명 페이지에 나온대로 따라해봤다. 1. Podfile 설정1) react-native 버전에 따라서 아래 코드 Podfile에 추가react-native >= 0.72 일 때def node_require(script) # Resolve script with node to allow for hoisting require Pod::Executable.execute_command('node',.. 2024. 8. 4. [React Native] The Google Mobile Ads SDK was initialized without an application ID. react native 프로젝트에 애드몹을 적용하려고 react-native-google-mobile-ads 패키지를 사용했다. 안드로이드에서는 정상 구동 되나, ios에서 앱이 충돌나면서 강제 종료가 되어버리는 현상이 나타났다.Xcode에서 확인해보니 아래 에러 내용이 나왔다.❓ 에러 내용reason __NSCFString * "The Google Mobile Ads SDK was initialized without an application ID. Google AdMob publishers, follow instructions at https://googlemobileadssdk.page.link/admob-ios-update-plist to set a valid application ID. Goog.. 2024. 7. 31. [Node.js] PM2로 프로젝트 구동 시 개발/상용 환경 나누기 1. pm2 config 파일 구성// ecopm2.config.jsmodule.exports = { apps: [ { // development name: 'development-name', script: './node_modules/.bin/ts-node', args: './bin/www', // watch: true env: { NODE_ENV: 'development', }, }, { // production name: 'production-name', script: './build/bin/www.js', env: { NODE_ENV: 'production'.. 2024. 7. 18. 이전 1 2 3 4 다음 반응형
