아래 부터 개발 과정을 개략적으로 복습차 정리한 글입니다.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_ 접두사..

단일 파일에만 Prettier 실행하기경로 지정 방식1. 절대 경로프로젝트 루트부터 시작하는 전체 경로를 그대로 적습니다.예: /c/Users/admin/Desktop/user/remote-maestro-user/src/.../SecurityGroupSelect.vue# 예시 (Git Bash 절대 경로)yarn prettier --write "/c/Users/admin/Desktop/user/remote-maestro-user/src/views/workspace/serviceCatalog/service/resource-request/components/AWS/ui/SecurityGroupSelect.vue" 2. 상대 경로현재 터미널(CWD: Current Working Directory)이 프로젝트 ..

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 로 남거나, 에러 로그만 찍힘→ 원인: 에뮬레이터 네트워크 ..

Windows에서 18100, 18200 포트를 사용 중인 프로세스를 종료하는 방법은 다음과 같습니다. PID 확인하기먼저, 각 포트를 사용 중인 프로세스의 PID를 확인하려면 명령 프롬프트(CMD)를 관리자 권한으로 실행한 후 아래 명령어를 입력하세요:여기서 마지막 열에 표시된 숫자가 해당 포트의 프로세스 ID(PID)입니다.netstat -aon | findstr :18100 netstat -aon | findstr :18200 근데 윈도우에서는 bashShell 에서 삭제 명령을 하면 알지 못하는 명령자라는 오류가 나오는 경우가 있음 그래서 아래의 powrshell을 이용하는 방법을 정리하고자 함   PowrShell를 이용하여 포트 프로세스 확인하고 삭제하는 방법 관리자 권한으로 PowerShel..

전체 코드 개요CommentItem.vue단일 댓글(또는 대댓글)을 렌더링합니다.자신의 자식 댓글이 있을 경우 재귀적으로 자기 자신을 호출하여 트리 구조를 만듭니다.활성화된 답글 또는 수정 대상에 따라 인라인 폼 슬롯(답글 폼, 수정 폼)을 표시합니다.버튼 클릭 시 reply, edit, delete 이벤트를 상위 컴포넌트로 전달합니다.CommentSection.vue전체 댓글 목록을 관리하며, 댓글 작성, 대댓글 작성, 삭제, 수정 기능을 처리합니다.상태 변수(comments, replyTarget, editTarget, form, editForm)를 관리하고, API 호출 함수를 통해 서버와 데이터를 동기화합니다.대댓글 추가 시, addReplyToList() 함수를 호출하여 댓글 트리 내에서 올바른..