본문 바로가기

⌘Explorer — 프롱트— □ ×

{ } 프롱트 ×

전체 글192

Node.js 백엔드 공부 — Day 2 학습 주제: Express Router, Controller 분리 및 CRUD 리팩토링학습 목표: 하나의 파일에 작성했던 API 코드를 역할별로 분리하고, 유지보수하기 좋은 백엔드 구조 이해하기1. Day 2 학습 내용 요약오늘 배운 핵심 개념Express Router의 역할과 사용법require()와 module.exports를 이용한 파일 간 연결Router 경로가 합쳐지는 원리Router와 Controller의 역할 차이CRUD API를 Controller 함수로 분리하기POST와 PATCH의 유효성 검사 차이&&, || 연산자와 단락 평가Number.isFinite()와 ?? 연산자2. Express Router란?Express Router는 관련된 API 경로를 하나의 파일로 묶어 관리하는 기능.. 2026. 10. 23.

Node.js 백엔드 공부 — Day 1 학습 목표: Node.js와 Express를 사용해 REST API의 기본 개념을 이해하고, 상품 CRUD API를 직접 구현한다.학습 결과: GET, POST, PATCH, DELETE API 구현 완료1. Node.js와 Express란?Node.jsNode.js는 JavaScript를 브라우저 밖에서도 실행할 수 있게 해주는 런타임 환경이다.React: 주로 사용자 화면(UI)을 개발Node.js: JavaScript로 서버 로직을 개발Express: Node.js에서 HTTP API 서버를 쉽게 만들도록 도와주는 프레임워크프론트엔드와 백엔드의 관계React (프론트엔드) ↓ HTTP 요청Node.js + Express (백엔드) ↓ 데이터 조회 및 저장Database (데이터베이스) .. 2026. 10. 21.

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.

이전 1 2 3 4 ··· 16 다음

티스토리툴바