TIL

레이아웃 시프트 문제 해결하기: 사용자 경험과 SEO 개선레이아웃 시프트는 사용자 경험과 SEO 성능에 큰 영향을 미칩니다. 이러한 문제가 발생하는 원인과 효과적인 해결 방법을 살펴보겠습니다.레이아웃 시프트 이해하기레이아웃 시프트는 페이지 로딩 과정에서 요소들이 예기치 않게 이동하는 현상입니다. 누적 레이아웃 시프트(CLS) 지표는 이러한 시각적 불안정성을 측정하며, Google은 최적의 사용자 경험을 위해 0.1 미만의 점수를 권장합니다.레이아웃 시프트가 발생하는 일반적인 상황:크기가 정의되지 않은 이미지 로딩늦게 로드되는 웹 폰트로 인한 텍스트 재배치동적 콘텐츠 삽입 (광고, 팝업 등)서드파티 리소스가 페이지 레이아웃에 영향을 미치는 경우주요 해결 방법1. 이미지 최적화   이미지가 로드되기 전에 공..

1. expo router  프로젝트 생성 npx create-expo-app@latest -e with-router margin-calculator margin-calculator는 생성할 이름 2, expo go 앱 설치 ,  npm run android - npm run ios npx expo start로 실행하고 개발하기 expo router 기본 프로젝트 구조app/  ├── (tabs)                   // 탭 네비게이션 그룹  │   ├── _layout.tsx         // 탭 네비게이션 레이아웃  │   ├── index.tsx           // 홈 탭 스크린  │   ├── profile/            // 프로필 관련 스택 네비게이션  │   │   ..

새로운 웹사이트 개설 후 정상적으로 처리되었는데 들어가보면 not found 에러가 떴다  해당 프로젝트의 setting으로 가서 framework preset 를 other 에서 Next.js로 바꾸고, 다시 redeploy해주면 된다.다시 배포가 완료되면 잘 뜨는 모습이다

1. 구글 애드몹에 앱 추가, 광고 단위 설정react-native-google-mobile-ads 설치 2. app.json에 plugins 에 앱 id 추가(실제 앱 id 값 넣기) "plugins": [      [        "react-native-google-mobile-ads",        {          "androidAppId": "ca-app-pub- xxx~xxx",          "iosAppId": "ca-app-pub- xxx~xxx"        }      ],  3. 전체 화면 하단에 배너 광고 넣기 코드_layout.tsx에 적용import { BannerAd, BannerAdSize, TestIds } from "react-native-google-mobile-..

1. 프로젝트 생성 npx create-expo-app@latest -e with-router margin-calculator margin-calculator는 생성할 이름 2. 패키지들 설치npx expo install react-native-google-mobile-ads @react-native-async-storage/async-storage expo-localization광고, 현지화(다국어 앱) 3. 애드몹 광고 붙이고 실행하기- 비공개테스트 까지는 테스트광고 붙일것(애드몹은 expo go 호환 안됨)npx expo prebuild --platform androidnpx expo run:android 실행오류나면npx expo prebuild --clean --platform android(k..

Params와 Props는 우리 프로그램에게 "어떤 정보를 받을 거야?"를 알려주는 라벨 같은 거예요.Params(매개변수):웹 주소에서 넘어오는 정보를 담아요여기서는 tag라는 이름의 문자열을 받아요예를 들어 /cute 페이지면, tag는 "cute"가 되는 거죠type Params = {  tag: string;  // 이 페이지의 태그};Props(속성):컴포넌트(페이지)에게 전달되는 모든 정보를 설명해요여기서는 Params를 Promise(약속)로 감싸서 보내요Promise는 "나중에 값을 줄게!"라고 약속하는 거예요type Props = {  params: Promise;  // Params를 나중에 줄게!};정리하면, 이 코드는 "나중에 태그 정보를 줄게!"라고 Next.js에 알려주는 거예요..

품앗이 하다가 효율적인 방법이 있어서 기록https://cafe.naver.com/devsharing 에도 글 씀 처음 앱 출시하고 있는데 많은 분들이 테스터를 직접 추가하시고 등록하시더라구요구글 그룹 쓰시면 간편하게 테스트 할 수 있어서 제안드립니다​​[개발자 설정]​1. google groups 에서 테스터 그룹만들기https://groups.google.com/ 에서 create group해서 만들면 그룹과 그룹의 메일 주소가 생성됩니다​​2. 테스터를 google groups로 설정하기​play console에서 테스터를 이메일 목록이 아닌 google 그룹스로 설정 google groups에서 그룹 만들면 주소가 생기는데 그 주소로 설정하시면 됩니다​​3. 그룹 url과 앱/웹 링크 공유하기​그..

app.json을 잘 세팅해도 막상 배포 후 다운받으면 앱 아이콘, 앱 이미지가 제대로 반영이 되지 않는 문제 해결 방법  npx expo prebuild --clean  npx expo prebuild --platform androidnpx expo run:android cd android./gradlew clean./gradlew bundleRelease

문제는 Android의 strings.xml 파일과 adaptive icon 설정이 제대로 되어있지 않아서 발생했을 수 있습니다. 다음과 같이 수정해보세요:1. 먼저 android/app/src/main/res/values/strings.xml 파일을 수정:    Dividend Calculator 한국어 버전을 위해 android/app/src/main/res/values-ko/strings.xml 파일 생성:strings.xml    배당투자 계산기 app.json 파일에서 아이콘 설정 확인:app.json}아이콘 이미지 파일이 올바른 위치에 있는지 확인:./assets/images/icon.png./assets/images/adaptive-icon.png아이콘 요구사항:icon.png: 1024x1..

오류 내용버전 코드는 이미 사용되었습니다. 다른 버전 코드를 사용해 보세요. 문제상황안드로이드 react native 앱 bundle 파일 새 버전으로 업데이트 할때 , 버전 코드는 이미 사용되었습니다. 다른 버전 코드를 사용해 보세요.라는 오류 발생 해결 방법build.gradle, app.json 파일의 versionCode 를 올려주어야 한다.