아래 부터 개발 과정을 개략적으로 복습차 정리한 글입니다.1. Clerk 통합하기 (Integrate Clerk)패키지 설치Next.js 프로젝트 루트에서 Clerk SDK를 설치합니다. npm install @clerk/nextjs @clerk/nextjs/server # 또는 yarn add @clerk/nextjs @clerk/nextjs/server환경 변수 등록Clerk 대시보드(https://dashboard.clerk.com → API Keys)에서 “Publishable Key”와 “Secret Key”를 복사한 뒤, 로컬 개발 환경에서는 프로젝트 최상위에 .env.local 파일을 만들어 다음과 같이 추가합니다:주의:브라우저(클라이언트)에서 사용하려면 반드시 NEXT_PUBLIC_ 접두사..

Jest + React Testing Library가 여러분의 ArticleList.test.tsx를 실제로 “돌려” 보기까지, 그리고 개별 test(...) 블록을 실행해 결과를 리포팅하기까지의 상세한 단계를 정리합니다.1. CLI로 테스트 실행 # 프로젝트 루트에서npx jest# 모든 테스트 실행npx jest src/05/04/ArticleList.test.tsx# 특정 파일만 실행Node 프로세스가 생성되고jest.config.js(또는 package.json의 설정)를 읽어서어떤 파일을 테스트로 볼지(testMatch)어떤 “환경”에서 돌릴지(testEnvironment, 보통 "jsdom")어떤 변환(transform)을 거칠지(ts-jest, babel-jest 등)스냅샷 위치(snapsh..

1. 문제의 발단: React Native 에뮬레이터에서 Strapi 호출이 안 되는 이유내 개발 머신에서Strapi 서버를 localhost:1337 에서 띄워 두고Postman이나 브라우저에서는 http://localhost:1337/articles 등이 잘 동작Android 에뮬레이터(또는 실제 디바이스)에서는코드 상에 fetch('http://localhost:1337/...') 를 쓰면“localhost” 가 에뮬레이터 자신의 루프백 인터페이스(127.0.0.1) 를 가리킴즉, 에뮬레이터 안에 Strapi 서버는 없으니 연결이 거부되거나 타임아웃 발생결과적으로 react-query 나 fetch 에서 data 가 계속 undefined 로 남거나, 에러 로그만 찍힘→ 원인: 에뮬레이터 네트워크 ..

이 오류 메시지는 이미 8081 포트가 다른 프로세스에 의해 사용 중이라는 뜻입.React Native의 Metro 번들러가 기본적으로 8081 포트에서 동작하는데, 해당 포트가 점유되어 있어서 EADDRINUSE 에러가 발생한 것입니다.아래 방법 중 하나로 문제를 해결할 수 있습니다.1. 이미 실행 중인 번들러/프로세스 종료가장 흔한 경우는 이전에 띄워둔 번들러(Metro)가 아직 꺼지지 않은 상태로 백그라운드에서 8081 포트를 점유하는 상황입니다.기존 터미널(Metro 번들러가 동작 중이던 터미널)을 확인해서 Ctrl + C 로 종료혹은 Windows 작업 관리자 / macOS Activity Monitor 등에서 Node.js 프로세스가 떠 있다면 강제 종료다시 yarn start 실행이렇게 하면..

해당 오류는 Yarn 4 (Berry) + PnP(Plug’n’Play) 환경에서 React Native CLI 패키지를 제대로 인식하지 못하는 전형적인 상황입니다.즉, react-native가 “@react-native-community/cli가 필요하다”라고 계속 말하지만, 실제로는 이미 설치가 되어 있음에도 PnP 링크 방식 때문에 제대로 연결되지 않는 경우가 대부분입니다.아래 순서대로 해결 방법을 시도해 보세요.1. .yarnrc.yml에서 nodeLinker: node-modules로 변경 (가장 확실한 방법)Yarn v2 이상(일명 Berry)부터는 기본적으로 **PnP(Plug’n’Play)**를 사용하게 설정될 수 있는데,React Native는 아직 PnP와 완벽하게 호환되지 않습니다.그..