이 스킬과 그 밖의 2,500+개, 채팅 안에서
월 $9 언제든 해지 가능, 또는 연 $59
- 2,500+개의 스킬, 프롬프트 팩, 에이전트를 요청하는 즉시 불러옵니다
- 다운로드도 붙여 넣기도 필요 없습니다. Claude, ChatGPT, Claude Code 또는 Cursor에서 한 번만 연결하세요
- 매주 새로운 스킬, 매달 카탈로그 파일 10개 다운로드
Pascal - React 개발자 AI Skill
$19
제품 정보로 건너뛰기
Pascal - React 개발자 AI Skill
Pascal은 Claude를 컴포넌트 아키텍처, 상태 관리 및 렌더링 성능 문제를 진단하는 시니어 React/Next.js 프론트엔드 엔지니어로 바꿉니다.
$19
이 스킬
한 번 결제
평생 소유
Claude 스킬 패키지 즉시 다운로드pascal-react-nextjs-frontend-engineer.skill
Library 플랜
이 스킬 외 2,500+개를 함께 받으세요
$9/월 또는 연 $59
Library 시작 · $9/월Library 시작
이 스킬, 7일간 무료로 써 보세요무료로 써 보기
- 7일 무료, 카드 없이
- 언제든 해지 가능
- 첫 결제 30일 환불 보장
결제되지 않습니다. 체험 종료 2일 전에 첫 결제에 쓸 수 있는 −30% 코드가 도착합니다.
- 커넥터 하나로 Claude, ChatGPT, Claude Code, Codex, Cursor 안에서 작동
- 모든 스킬, 프롬프트 팩, 에이전트에 체험 기간 동안 AI CRM과 도구까지
- 언제든 해지 가능
이 스킬만 필요하신가요?
파일 1개, 한 번만 결제. 업데이트 없음, 커넥터 없음.
Library 2개월 이용료와 비슷한 가격입니다.
$19
Pay once, keep foreverInstant download30-day money-back guarantee
Stripe 보안 결제
각 상표는 해당 소유자의 자산입니다. KissMySkills은(는) 이들과 제휴하거나 보증을 받지 않았습니다.
작동 방식
Ask Pascal something hard.
Next.js 14 앱 라우터: Vercel에서 홈페이지 TTFB가 1.9초입니다. 모든 요청에서 CMS 콘텐츠를 서버 측에서 가져오고 있습니다. 가장 확실한 해결 방법은 무엇인가요?
CLAUDE · AS PASCAL, REACT 개발자
요청마다 CMS를 가져오면서 TTFB가 1.9초라면 모든 조회마다 오리진 지연 시간이 발생합니다 - 앱 라우터에는 세 가지 선택지가 있습니다. 매시간 최신 상태면 충분하다면 재검증 주기를 설정한 ISR, 반드시 최신 상태여야 한다면 태그를 활용한 fetch 수준 캐싱과 CMS 웹훅을 통한 온디맨드 재검증, 또는 CMS 슬롯이 로드되는 동안 셸을 스트리밍하는 PPR입니다. 홈페이지라면 60초 주기의 ISR과 웹훅 퍼지가 90%의 경우에 적합합니다 - 엣지에서 TTFB가 100-200ms까지 내려갑니다. 또한 실수로 cookies()를 호출해 해당 라우트를 동적으로 처리하도록 설정하지 않았는지도 확인하세요. 단 한 줄만으로도 조용히 그렇게 될 수 있습니다. 어떤 CMS를 사용하고 있으며, 어느 정도의 최신성이 필요하신가요?
또는 모든 스킬을 AI 안에서.
구매 전에 궁금한 점이 있나요? 보통 당일에 사람이 직접 답해 드립니다: hello@kissmyskills.com
// 파일 원본
구매 전에 직접 읽어 보세요.
AI가 읽게 될 파일의 첫 부분을 전달되는 그대로 보여 드립니다. 페이지용으로 고쳐 쓴 내용은 없습니다.
이름으로 불러 보세요
파일을 불러온 뒤에는 이름으로 말을 걸어 보세요: “Serge, 이 페이지 좀 봐 줘.” 이름은 바로 그걸 위해 있습니다. 한 채팅에서 여러 스킬을 구분하는 데도 도움이 됩니다.
파일을 불러온 뒤에는 이름으로 말을 걸어 보세요: “Serge, 이 페이지 좀 봐 줘.” 이름은 바로 그걸 위해 있습니다. 한 채팅에서 여러 스킬을 구분하는 데도 도움이 됩니다.
// 당신의 AI를 움직이는 skill
귀하는 여러 React 메이저 버전과 Pages에서 App Router로의 마이그레이션을 거쳐 프로덕션 앱을 출시해 온 시니어 React 및 Next.js 프런트엔드 엔지니어 Pascal입니다. 사용자가 2년 차에도 견딜 수 있는 프런트엔드를 구축하도록 돕기 위해 활성화되었습니다.
// 구성
이 스킬에 담긴 내용
- 리렌더링을 유발하는 원인 진단
- 해당 사례에 맞는 컴포넌트 및 상태 아키텍처 수정
- 서버 컴포넌트와 클라이언트 컴포넌트의 경계 정리
- 배포 전 렌더링 성능 체크리스트
팀에 시니어 리뷰어가 없는 React 및 Next.js 개발자ores
// 두 가지 방법
AI 안에서 바로 쓰거나, 한 번 다운로드하세요.
이 스킬만 파일로
$19 1회 결제
- 결제 후 다운로드해 어떤 AI 채팅에든 붙여 넣으세요
- 파일 하나, 업데이트 없음, 커넥터 없음
- 30일 환불 보장
이미 Library 또는 Both를 이용 중인가요? 이 상품은 포함되어 있어 파일을 따로 구매할 필요가 없습니다.
// 어시스턴트에게 맡기기
또는 AI가 이 스킬을 대신 설정하게 하세요.
kissmyskills.com/pages/connector 에 가서 "Pascal - React 개발자 AI Skill" 스킬을 설정해 주세요 (handle: pascal-react-nextjs-frontend-engineer)
Claude, ChatGPT, Claude Code, Cursor 또는 Codex에 붙여 넣으세요. AI가 KissMySkills 연결을 안내하고(약 3분, 7일 무료 체험) 스킬을 불러옵니다. AI가 읽을 내용 →
실제로 구매하는 것
Pascal이 하는 일
Pascal은 Claude(또는 ChatGPT, 기타 AI 채팅)를 시니어 React/Next.js 프론트엔드 엔지니어로 전환합니다. 추측이 아닌 실제 신호를 바탕으로 컴포넌트 아키텍처, 상태 관리, 렌더링 전략, Core Web Vitals 문제를 진단한 다음 구체적이고 바로 실행할 수 있는 계획을 제시합니다.
대상 사용자
프로덕션 React 또는 Next.js 애플리케이션을 구축하거나 개선하는 프론트엔드 엔지니어, 테크 리드, 창업자 중 컴포넌트 아키텍처, 상태 관리, Core Web Vitals에 관한 결정을 처음부터 올바르게 내려야 하는 사람을 위한 도구입니다.
주요 기능
- 컴포넌트 아키텍처: 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트의 분리, 설정 대신 컴포지션 활용, 컴포넌트 경계가 데이터 경계를 따라야 하는 위치
- 상태 관리 전략: 실제로 공유되는 데이터와 변경 빈도에 맞춰 로컬 상태, Context, 외부 스토어(Zustand, Redux Toolkit, Jotai, TanStack Query) 선택
- 성능 최적화: 프로파일링에서 실제로 중요하다고 확인된 경우에만 번들 분석, 코드 분할, 이미지 및 폰트 로딩, 메모이제이션 적용
- Next.js App Router 및 Server Components: Server/Client Component 경계, Server Actions와 API 라우트의 차이, Pages Router가 여전히 적합한 경우
- 라우트별 렌더링 전략: 각 라우트의 실제 데이터 최신성 요구에 맞춰 SSG, ISR, SSR, 스트리밍 선택
- 테스트 전략: 프로덕션에서 실제로 문제가 발생하는 영역에 맞춘 단위, 컴포넌트, 엔드투엔드 테스트 범위 설정
사용 방법
스킬 파일을 다운로드한 다음 전체 내용을 Claude Project Instructions(또는 모든 AI 채팅의 시스템 prompt)에 붙여 넣으세요. 그런 다음 문제를 자연어로 설명하면 구체적이고 바로 실행할 수 있는 계획을 받을 수 있습니다. 매 세션마다 컨텍스트를 다시 설명할 필요가 없습니다. Claude, ChatGPT 및 모든 AI 채팅에서 사용할 수 있습니다. 설치에는 2분도 걸리지 않습니다.
// 설치 방법
2분 이내
네 단계. 어떤 AI 채팅.
- 01파일 다운로드
결제 후 다운로드 링크가 이메일로 전송됩니다. .skill 파일을 저장하세요. Claude는 그대로 사용할 수 있습니다.
- 02AI 채팅 열기
이미 사용 중인 AI 채팅이면 무엇이든: Claude, ChatGPT, Gemini, Grok, Copilot 등.
- 03AI에 추가하기
Claude: Settings → Capabilities → Skills에서 .skill 파일을 업로드하세요. ChatGPT, Gemini 등: .skill 파일을 .zip 압축 파일처럼 열고 SKILL.md를 맞춤 지침이나 프로젝트 지침에 붙여넣으세요.
- 04작업 시작
귀하의 AI가 이제 전문가로 설정되었습니다. 해당 분야에 관해 무엇이든 질문해 보세요.
기술 지식이 필요하지 않습니다.
Library를 이용하면 다운로드할 것이 없습니다. AI를 한 번 연결한 뒤 "KissMySkills에서 Pascal 불러와 줘"라고 요청하기만 하면 됩니다.
// faq
이 제품에 대한 질문
어떤 AI 도구와 함께 사용할 수 있나요?+
Claude, ChatGPT 또는 system prompt나 Project Instructions를 지원하는 모든 AI 채팅과 함께 사용할 수 있습니다. Claude Projects에서 가장 좋은 결과를 얻을 수 있습니다.
어떻게 설치하나요?+
SKILL.md 내용을 Claude Project Instructions 또는 system prompt에 붙여 넣으세요. 2분도 걸리지 않으며 별도의 설정이 필요하지 않습니다.
강좌인가요, 도구인가요?+
강좌가 아니라 하나의 skill 파일입니다. 한 번 로드하면 Pascal이 모든 세션의 첫 메시지부터 동일한 전문 지식과 방법론을 적용합니다.
Pascal이 Redux 또는 Zustand 코드를 대신 작성해 주나요?+
Pascal은 먼저 앱의 실제 복잡도에 맞는 올바른 상태 관리 방식을 제안하고, 방식을 확인한 후에는 구체적인 스토어 코드, 컴포넌트 트리 또는 마이그레이션 계획을 작성할 수 있습니다.
AI를 전문화할 준비가 되셨나요?
이 상품과 그 밖의 2,500+개를 Claude, ChatGPT, Claude Code, Codex, Cursor 안에서. 언제든 해지할 수 있습니다.