peter 님의 블로그

1. robots.txt란?robots.txt는 웹사이트 관리자가 검색 엔진의 크롤러(로봇)가 특정 페이지나 디렉토리에 접근할 수 있는지 여부를 제어하기 위해 사용하는 텍스트 파일입니다.이 파일을 사용하면 검색 엔진이 크롤링할 필요가 없는 리소스를 방지하여 서버 리소스를 효율적으로 사용할 수 있습니다. 또한 SEO 최적화에 도움을 줄 수 있습니다.주요 특징:파일 위치: 항상 사이트의 루트 디렉토리에 위치하며 URL은 고정되어 있습니다.예) https://www.test.com/robots.txt역할: 특정 디렉토리나 파일의 크롤링을 허용 또는 금지합니다. 2. Spring Boot에서 robots.txt 설정 방법Spring Boot에서 robots.txt를 설정하려면 정적 리소스 디렉토리에 파일을 추가..

환경React Native: 0.76.1React Navigation:@react-navigation/native: 7.0.1@react-navigation/native-stack: 7.0.1 1. 문제 개요React Navigation을 사용하여 headerTitle과 headerRight에 버튼을 구현했습니다. 안드로이드 에뮬레이터에서는 정상적으로 작동했으나, 실제 안드로이드 기기에서 테스트할 경우 버튼의 onPress 이벤트가 호출되지 않는 문제가 발생했습니다.증상headerRight에 정의된 TouchableOpacity나 Pressable의 onPress 이벤트가 작동하지 않음.버튼을 누르면 호출되어야 할 onPress가 실행되지 않고, 대신 props만 로그에 반복 출력됨. 2. 해결 방안1)..

React Native 프로젝트를 배포하기 위해서는 안드로이드 스토어 키를 생성하고, 이를 사용하여 릴리즈 빌드를 생성해야 합니다. 이 가이드는 React Native 프로젝트에서 스토어 키 생성부터 릴리즈 빌드 생성까지의 과정을 단계별로 설명합니다. 프로젝트 환경: React Native 0.76.1 1. 스토어 키 생성1.1 키스토어 파일 생성키스토어 파일을 생성하려면 아래 명령어를 실행합니다.keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000  my-release-key.keystore: 생성할 키스토어 파일 이름(변경 가능).my-key-alia..

1. react-native-fast-image란?react-native-fast-image는 React Native에서 이미지 로드를 최적화해주는 라이브러리입니다. 성능과 편의성을 모두 제공하며, GIF 같은 동적 이미지도 지원합니다.주요 특징:고성능 이미지 처리: 네이티브 수준의 로드 속도.네트워크 캐싱: 빠른 이미지 로딩을 위한 캐싱 지원.GIF 지원: 정적 이미지뿐 아니라 동적 이미지도 손쉽게 사용 가능.다양한 옵션 제공: resizeMode, priority, cache 등 다양한 설정. 2. 설치 및 기본 설정react-native-fast-image를 설치한 뒤 GIF 이미지를 지원하려면 간단한 설정이 필요합니다. 1. 패키지 설치npm install react-native-fast-imag..

React Native 프로젝트에서 Android 앱 아이콘을 설정하는 것은 앱의 브랜드 아이덴티티를 강화하는 중요한 과정입니다. 이번 가이드에서는 아이콘 생성부터 적용까지의 과정을 단계별로 정리해 보겠습니다. 1. 아이콘 이미지 생성앱 아이콘을 생성하기 위해 아이콘 변환 사이트를 활용합니다. 다음 과정을 따라주세요:아이콘 변환 사이트 접속https://icon.kitchen/ 이미지 업로드아이콘 이미지로 사용할 파일을 업로드합니다.Icon 타입은 Square(정사각형)과 Circle(원형)을 각각 선택하여 두 가지 이미지를 준비합니다.이미지 다운로드Square 이미지는 일반 앱 아이콘으로 사용되며, Circle 이미지는 일부 기기에서 라운드 아이콘으로 사용됩니다.다운로드한 파일을 각각 ic_launch..

React Native로 앱을 개발하다 보면 프로젝트 초기 설정에서 지정한 앱 이름을 변경해야 할 때가 있습니다.안드로이드 앱 이름은 사용자가 앱을 설치했을 때 홈 화면이나 앱 목록에 표시되는 이름으로, 사용자 경험에 큰 영향을 미칠 수 있는 중요한 요소입니다.이번 글에서는 React Native 프로젝트에서 안드로이드 앱 이름을 변경하는 방법을 단계별로 설명하겠습니다. 1. 안드로이드 앱 이름이란?안드로이드 앱 이름은 앱이 설치된 후 홈 화면 또는 앱 목록에 표시되는 이름입니다.이 이름은 strings.xml 파일과 AndroidManifest.xml 파일의 설정을 통해 관리됩니다.2. 앱 이름 변경 방법React Native에서 안드로이드 앱 이름을 변경하려면 몇 가지 파일을 수정해야 합니다. 아래 ..

1. 패키지 설치react-native-bootsplash는 앱이 로딩되는 동안 스플래시 화면을 표시해 주는 패키지입니다.터미널에서 아래 명령어를 입력하여 설치합니다. npm install --save react-native-bootsplash 2. 스플래시 이미지 준비스플래시 화면에 사용할 이미지를 준비한 후, src/assets/images 폴더에 저장합니다.예: splash_screen.png자동으로 다양한 해상도에 맞는 스플래시 이미지를 생성하려면 다음 명령어를 실행합니다.yarn react-native generate-bootsplash src/assets/images/splash_screen.png 참고: 명령어 실행 후 다양한 디바이스 해상도에 맞는 스플래시 이미지가 자동으로 생성됩니다.추가..

React Native에서 React Navigation 라이브러리를 사용해 화면 전환을 구현할 때, navigation.navigate()와 navigation.reset()의 차이를 정확히 이해하는 것은 매우 중요합니다. 이 두 메서드의 작동 방식을 잘못 이해하면, 스택 관리 문제나 상태 초기화와 관련된 예기치 않은 문제를 초래할 수 있습니다. 이 글에서는 두 메서드의 동작 방식을 비교하고, 특정 상황에서 어떤 방법이 적합한지 알아보겠습니다. 1. navigation.navigatenavigation.navigate()는 네비게이션 스택에 새로운 화면을 추가하는 방식으로 동작합니다. 새로운 화면이 현재 스택 위에 쌓이며, 이전 화면은 그대로 유지됩니다.주요 특징새로운 화면 추가: 현재 스택에 새로운 ..

React Native 앱 개발에서 환경 설정 관리는 매우 중요합니다. 특히 개발, 테스트, 프로덕션 등 다양한 환경에서 API 키나 민감한 정보를 효율적으로 관리하고 보안을 강화해야 합니다. 이 글에서는 react-native-dotenv 라이브러리를 사용해 환경 변수를 안전하고 간편하게 관리하는 방법을 소개합니다.  1. react-native-dotenv란?react-native-dotenv는 React Native에서 .env 파일을 활용해 환경 변수를 관리할 수 있도록 도와주는 라이브러리입니다. 이를 통해 민감한 정보를 코드에서 분리하고, 각 환경에 맞는 설정을 적용할 수 있습니다.주요 기능환경 별 설정 분리 (개발, 스테이징, 프로덕션 등).env 파일로 API 키와 URL 같은 민감한 정보 ..

React Native 프로젝트를 Windows에서 개발할 때, 환경 변수 설정(NODE_ENV) 문제로 인해 실행 오류가 발생할 수 있습니다. 이 문서에서는 해당 오류의 원인과 이를 해결하는 방법을 정리했습니다. 1. 오류 내용React Native 프로젝트의 package.json 파일에 다음과 같이 스크립트를 작성했습니다.{ "scripts": { "android:dev": "NODE_ENV=development npx react-native start" }} 명령어를 실행하면 다음과 같은 오류가 발생합니다.$ NODE_ENV=production npx react-native start'NODE_ENV'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다.er..