본문 바로가기

전체 글190

Next.js SEO 기본 세팅 + AI 반영 프롬프트 Next.js 웹 프로젝트 SEO 기본 세팅 문서목표새로운 웹 프로젝트를 시작할 때마다 아래 SEO 기본 구조를 항상 적용한다.적용 대상:Next.js App Router랜딩 페이지서비스 웹사이트블로그결과 페이지검색 유입이 필요한 서비스1. 기본 프로젝트 구조app/ layout.tsx page.tsx sitemap.ts robots.ts2. 공통 Metadata 설정app/layout.tsximport type { Metadata } from 'next';export const metadata: Metadata = { metadataBase: new URL('https://example.com'), title: { default: '서비스 이름', template: '%s | 서비.. 2026. 6. 25.
하우스워크 투게더 | 커플·가족·룸메이트 필수 앱? 집안일 관리 앱 사용 후기 요즘 집안일 때문에 스트레스 받는 분들 많죠?특히 가족, 연인, 룸메이트랑 같이 살다 보면 꼭 한 번씩 나오는 말이 있어요.“맨날 나만 하는 것 같은데?”“분명 내가 저번에 했잖아…”“설거지 누가 안 한 거야?”사실 집안일 자체보다 더 피곤한 건누가 얼마나 했는지 기억에 의존해서 이야기해야 한다는 점인 것 같아요.저도 최근까지 이런 문제 때문에 은근히 스트레스가 있었는데,요즘은 “하우스워크 투게더(Hatoo)”라는 앱을 쓰면서 분위기가 꽤 많이 달라졌어요.오늘은 직접 사용해본 후기랑 어떤 기능이 괜찮았는지 정리해보려고 합니다.집안일 분담 앱, 하우스워크 투게더 써본 후기단순 투두앱이랑 뭐가 다를까?처음엔 그냥 체크리스트 앱인 줄 알았는데,막상 써보니까 핵심은 “함께 관리”에 있더라고요.혼자 쓰는 메모형 .. 2026. 5. 23.
VS 코드 로그 편하게 쓰세요 {// Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the// same ids are c.. 2026. 5. 14.
FAILURE: Build failed with an exception.* What went wrong:Execution failed for task ':app:externalNativeBuildCleanDebug'. FAILURE: Build failed with an exception.* What went wrong:Execution failed for task ':app:externalNativeBuildCleanDebug'.> com.android.ide.common.process.ProcessException: ninja: Entering directory `/Users/seosaesbyeol/ssb/hatoo/android/app/.cxx/Debug/2m522n3m/arm64-v8a' [0/2] Re-checking globbed directories... [1/2] Re-running CMake... -- Configuring incomplete, errors occurred! See also "/.. 2026. 5. 11.
웹앱 하이브리드 푸시 알림 (리마인더) 구현 정리 전체 아키텍처웹앱(Next.js) ←→ Supabase DB ←→ GitHub Actions → Expo Push API → FCM → 기기1. DB 테이블 (Supabase)reminders — 리마인더 저장id, user_id, contact_id, contact_name, title, remind_at, is_sent, created_atpush_tokens — 기기 토큰 저장id, user_id, token, platform, updated_at2. 웹앱 (Next.js)파일역할src/features/reminders/actions/create-reminder.ts리마인더 DB 저장src/features/reminders/actions/get-reminders.ts리마인더 조회src/feature.. 2026. 4. 7.
Nextjs 토스페이먼츠 결제기능 테스트하기 목차환경 및 준비물토스페이먼츠 테스트 키 발급Supabase 스키마 수정SDK 설치 및 환경변수 설정결제 버튼 컴포넌트 (Client)결제 확인 서버 액션결제 성공 페이지결제 실패 페이지요금제 화면에 연결테스트 카드 번호전체 흐름 요약자주 나오는 에러 모음1. 환경 및 준비물Next.js 15+ (App Router)Supabase (DB + Auth)NextAuth v4@tosspayments/tosspayments-sdk2. 토스페이먼츠 테스트 키 발급developers.tosspayments.com 접속 후 회원가입/로그인상단 내 개발정보 클릭테스트 탭 선택클라이언트 키 (test_ck_...) 와 시크릿 키 (test_sk_...) 복사⚠️ 주의: 클라이언트 키와 시크릿 키는 다릅니다. 둘 다 복.. 2026. 3. 24.
웹뷰 하이브리드 앱에서 뒤로가기 제대로 구현하기 (react-hammerjs + WebView BackHandler) React 웹 + RN Expo 웹뷰 하이브리드 구조에서 삽질한 내용 정리프로젝트 구조이 글은 아래 구조를 전제로 한다.RN+Expo 앱└── WebView └── React 웹앱 (react-router-dom)웹이랑 앱 따로 개발하고, 앱에서 웹뷰로 웹을 띄우는 방식이다. 처음엔 단순해 보였는데 뒤로가기 하나 구현하는 데 꽤 헤맸다.웹 쪽 - react-hammerjs로 스와이프 뒤로가기모바일 웹에서 오른쪽 스와이프로 뒤로가기를 구현하려면 react-hammerjs를 쓰면 된다.설치npm install react-hammerjs 타입 에러가 날 텐데 npm i --save-dev @types/hammerjs 를 해도 안되면 아래처럼 세팅 해준다 // declarations.d.ts 생성decla.. 2026. 3. 12.
Expo WebView에서 localhost 연결 안될 때 해결 방법 (ERR_CONNECTION_REFUSED) 하이브리드 앱을 만들면서React / Vite 로 만든 웹을 Expo WebView로 띄우려고 할 때실기기에서 아래 오류가 발생할 수 있다.net::ERR_CONNECTION_REFUSEDurl: http://localhost:5173이 문제는 구조 때문에 발생하는 정상적인 현상이다.원인과 해결 방법을 정리한다. 문제 원인앱에서 localhost 는 PC가 아니라 폰 자기 자신을 의미한다.http://localhost:5173이 주소는PC에서는 정상Expo Go 앱에서는 폰 내부 주소로 인식됨그래서 서버 연결 실패가 발생한다.해결 방법 1 — PC IP로 접속터미널에서 IP 확인ifconfig또는ipconfigMac 기준en0:inet 192.168.0.87이 경우 PC IP는192.168.0.87Web.. 2026. 3. 11.
맥북 데스트탑에 있는 apk파일을 실제 기기에 설치하는 법 안드로이드로 앱 테스트 할 일이 있었는데 iterm에서 apk 파일을 빌드한 뒤 실제 기기로 설치하는 법이다. 편하게 프로젝트 내 /android/app/build/outputs/release/app-release.apk 파일을 바탕화면으로 옮겨줬고맥의 터미널을 실행해서 아래와 같이 명령어를 입력한다.// 실제 안드로이드 기기는 usb로 연결한 상태다// 기기와 연결되었는지 확인adb devices//아래 처럼 리스트 나오면 연결 성공List of devices attachedR3XXXX device// 바탕화면에 있는 apk 파일 설치adb install ~/Desktop/app-release.apk 2026. 3. 9.
ERROR Looks like you have configured linking in multiple places. This is likely an error since deep links should only be handled in one place to avoid conflicts. Make sure that: 이 에러는 폴더블 기기를 접거나 펴면서 화면 크기가 변할 때,안드로이드 시스템이 Activity를 재시작(Recreate)하려고 하면서발생합니다. 이때 expo-router의 루트 내비게이션 설정이중복으로 감지되는 것이 원인입니다. 에러의 주된 원인은 폴더블 기기에서 화면을 펼칠 때 발생하는'Configuration Change'로 인해 Activity가 재시작되면서expo-router의 초기화 로직이 꼬이는 경우입니다. 이를 해결하기 위해 AndroidManifest.xml에서 configChanges옵션을 보강하고, 가로/세로 전환 시 Activity가 재시작되지않도록 설정해야 합니다. 1. android:configChanges에 smallestScreenSize, screenLayout등이 잘 포.. 2026. 2. 25.
Expo android app apk 파일 추출하기 테스트 앱을 공유하기 위해 설치 파일이 필요할때 유용한 방법이다. 맥북 기준으로 iterm을 먼저 연다경로를 프로젝트 경로로 이동 시킨다. cd example-appcd android./gradlew assembleRelease 프로젝트 내부의 안드로이드 폴더로 진입하면./gradlew assembleRelease 를 입력한다.이후 빌드 진행하게 된다 (대략 30분정도 걸림ㄷㄷ) 다 된 apk 파일은 android/app/build/outputs/bundle/release/app-release.apk 위 경로에 있어서 빼와서 공유하고 맘대로 하면 된다! 2026. 2. 6.
VS code 제안 항목 트리거로 편하게 import 하기 맥북 기준vs code 열고 command + shift + p 열어서 제안 항목 트리거 검색 한 후 원하는 키 등록하면 끝 ! 기본으로 ctrl + i로 돼있을텐데 더 편하게 원하는 키로 설정하면 돼 ! 2026. 2. 5.

티스토리툴바