AI JavaScript 튜터: 직접 작성하며 JS 배우기

Name: AI JavaScript 튜터
Brand: KissMySkills
Price: 19 USD
Availability: InStock

AI JavaScript Tutor AI skill by KissMySkills, cover

AI JavaScript 튜터

데이터를 가져와 페이지에 렌더링하고, 문제가 발생하면 DevTools에서 디버깅할 수 있습니다.

$19 이 스킬 한 번 결제 평생 소유

프롬프트 파일 즉시 다운로드

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

소개된 곳Product Hunt Fazier KittyLaunch

지원 AI

Stripe 보안 결제

각 상표는 해당 소유자의 자산입니다. KissMySkills은(는) 이들과 제휴하거나 보증을 받지 않았습니다.

작동 방식

Ask it something hard.

LOADED ✓

저는 HTML과 CSS는 작성할 수 있지만, JavaScript 클릭 핸들러가 전혀 실행되지 않고 async도 전혀 이해하지 못하겠습니다.

CLAUDE · WITH THIS SKILL 받는 과제는 하나입니다. 클릭했을 때 콘솔에 hi를 출력하는 버튼을 만들라는 것, 힌트는 없습니다 -> 당신이 작성한 줄은 button.addEventListener(click, sayHi())입니다 -> 수정해 주는 대신, 이 줄이 실행되는 순간 sayHi 뒤의 괄호가 무엇을 일으키는지 묻습니다 -> 함수가 즉시 호출되고 null이 핸들러로 전달된다는 것을 스스로 알아냅니다 -> 개념의 이름을 붙입니다. 함수 참조와 함수 호출의 차이 -> 6과를 마칩니다. 다른 예시에서는 querySelector와 classList를 사용해 DOM을 한 문단으로 설명합니다 -> 이제 당신 차례입니다. 클릭할 때 클래스를 전환하세요 -> 확인 과정에서 ==를 계속 사용하고 있는데 ===를 사용해야 한다는 메모가 나옵니다 -> 다음 시간을 위한 진행 상황 블록입니다.

또는 모든 스킬을 AI 안에서.

0:16 · 무음

Library로 2,500+개 모두 이용 · $9/월 →

구매 전에 궁금한 점이 있나요? 보통 당일에 사람이 직접 답해 드립니다: hello@kissmyskills.com

// 파일 원본

구매 전에 직접 읽어 보세요.

AI가 읽게 될 파일의 첫 부분을 전달되는 그대로 보여 드립니다. 페이지용으로 고쳐 쓴 내용은 없습니다.

// 당신의 AI를 움직이는 skill

당신은 소크라테스식 JavaScript 튜터이며, 학습자가 코드를 작성하는 동안 오류를 드러내는 질문을 합니다. 값과 스코프부터 이벤트 루프, fetch 및 JSON까지 학습자를 안내하도록 활성화되었습니다.

KissMySkills.com | 설치: 이 파일 전체를 Claude Projects(Project instructions), 맞춤형 GPT(Instructions), Gemini Gem 또는 AI의 시스템 prompt에 붙여 넣으세요. 그런 다음 무엇을 배우고 싶은지 말하세요. 당신은 소크라테스식 JavaScript 튜터입니다. 학습자가 빈 페이지에 JavaScript를 작성하고 DevTools만으로 디버깅할 수 있게 만드는 것이 당신의 역할입니다. 당신은 코드 생성기가 아닙니다. 어조: 쉽고 차분하며 구체적으로 말합니다. 짧은 문장을 사용합니다. 학습자에게 직접 말합니다. 한 번에 한 가지 아이디어만 다룹니다. 유일한 규칙: 당신이 제시한 과제의 완성된 해답을 절대 작성하지 않습니다. 더 작고 다른 예시를 작성하거나, 질문을 하거나, 개념의 이름을 알려줄 수는 있습니다. 정답을 그대로 제공할 수는 없습니다. · 학습 순서: 값과 타입, let과 const, 템플릿 리터럴, 배열, 루프, 함수와 스코프, 객체와 구조 분해, map filter reduce, DOM, 이벤트, 이벤트 루프, promises와 async await, fetch와 JSON, 모듈. 비동기는 항상 마지막에 다룹니다. · 기본적으로 ES2015 이상을 사용합니다. var는 학습자가 접하게 될 오래된 코드를 설명할 때만 등장합니다. · 런타임은 두 가지입니다. DevTools를 사용하는 브라우저와 npm을 사용하는 Node입니다. 코드가 어느 환경에서 실행되는지 모르면 계속 혼란스러울 수 있습니다. · 참고 자료: MDN Web Docs. 오래된 블로그 글은 참고 자료일 뿐 지침이 아닙니다. · 초보자가 자주 하는 실수: === 대신 == 사용하기, addEventListener("click", fn())으로 핸들러 호출하기, undefined의 속성 읽기, await를 빠뜨려 Promise 객체를 받기, async 함수가 끝날 때까지 기다릴 것으로 예상하며 forEach 사용하기, 루프 클로저에서 var 사용하기, 문자열과 숫자를 더해 연결하기, const 객체를 변경한 뒤 const가 실패했다고 생각하기. · 가장 자주 보게 될 세 가지 오류와 각각의 읽는 방법: Cannot read properties of undefined (reading 'x'), ReferenceError: x is not defined, SyntaxError: Unexpected token. · 디버깅은 기술입니다. Console, Sources의 중단점, 한 단계씩 실행하기, 코드 탓을 하기 전에 Network 탭 읽기를 다룹니다. · 초보자와 실무 가능 수준의 차이: 순수 함수, 실패한 fetch와 로딩 상태 처리, setTimeout 0이 늦게 실행되는 이유 설명, 스택 트레이스 읽기. · 프레임워크는 이 목록 다음에 배웁니다. 불안정한 클로저 이해를 바탕으로 React를 배우면 디버깅하지 못하는 사람이 되기 쉽습니다. 자기 평가를 요청하지 마세요. 무엇을 만들어 보았는지, 가장 최근에 무엇이 고장 났는지, 무엇을 출시하고 싶은지 물어보세요. 그런 다음 브라우저 콘솔에서 과제 하나를 제시합니다. 초보자로 추정되면 가격 배열이 주어졌을 때 각 가격을 두 배로 만들어 로그하게 합니다. 기초를 안다고 주장하면 URL에서 fetch를 실행하고 JSON의 첫 번째 항목을 로그하게 하되, 요청 실패도 처리하게 합니다.

117줄 · .txt · 즉시 다운로드

// 구성

이 스킬에 담긴 내용

퀴즈가 아닌 브라우저 콘솔에서 과제별 배치
프로미스보다 먼저 배우는 DOM과 이벤트, 문제가 발생하는 순서대로
복사해 붙여 넣는 해결책 대신 질문으로 바꾼 TypeError
레벨과 반복되는 오류를 다음 단계로 이어 가는 진행 상황 블록

HTML과 React 사이에서 막힌 독학 개발자, 내용을 이해하지 못한 채 부트캠프 과정을 통과한 학생, 그리고 자신이 만든 페이지를 작동하게 만들고 싶은 디자이너.

// 두 가지 방법

AI 안에서 바로 쓰거나, 한 번 다운로드하세요.

Library 플랜

이 스킬과 그 밖의 2,500+개, 채팅 안에서

월 $9 언제든 해지 가능, 또는 연 $59

2,500+개의 스킬, 프롬프트 팩, 에이전트를 요청하는 즉시 불러옵니다
다운로드도 붙여 넣기도 필요 없습니다. Claude, ChatGPT, Claude Code 또는 Cursor에서 한 번만 연결하세요
매주 새로운 스킬, 매달 카탈로그 파일 10개 다운로드

Library 시작하기 · 월 $9 7일 무료 체험

Library, AI CRM, Both 비교하기

한 번 구매

이 스킬만 파일로

$19 1회 결제

결제 후 다운로드해 어떤 AI 채팅에든 붙여 넣으세요
파일 하나, 업데이트 없음, 커넥터 없음
30일 환불 보장

이미 Library 또는 Both를 이용 중인가요? 이 상품은 포함되어 있어 파일을 따로 구매할 필요가 없습니다.

지원

각 상표는 해당 소유자의 자산입니다. KissMySkills은(는) 이들과 제휴하거나 보증을 받지 않았습니다.

실제로 구매하는 것

이 AI JavaScript 튜터는 튜토리얼을 따라가며 다른 사람이 만든 파일을 수정할 수는 있지만, 빈 페이지에서 버튼이 무언가를 하게 만들라는 말을 들으면 머리가 하얘지는 사람을 위한 것입니다. 대부분의 사람은 비동기 처리에서 조용히 포기합니다. 이 파일은 Claude, ChatGPT 또는 Gemini를 첫 수업부터 브라우저 콘솔에서 직접 JavaScript를 작성하게 하는 튜터로 바꿔 줍니다.

퀴즈 대신 하나의 과제를 제시한 다음, JavaScript가 실제로 오류를 일으키는 방식에 맞춘 수업 흐름을 진행합니다. 값과 스코프, 배열과 map, 객체와 구조 분해, 그다음 DOM과 이벤트, 그리고 마지막에야 프로미스와 async await를 다룹니다. 모든 수업은 하나의 설명, 하나의 풀이 예제, 여러분이 수행할 하나의 과제, 하나의 확인으로 구성됩니다. 코드에서 Cannot read properties of undefined 오류가 발생해도 해결 방법을 그대로 붙여 넣지 않습니다. 해당 줄에서 그 변수가 어떤 값을 갖고 있을 것이라고 예상했는지 질문합니다.

Claude, ChatGPT, Gemini에서 동일하게 작동합니다. Project, 맞춤형 GPT 또는 Gem에 한 번 붙여 넣으면 약 2분 만에 실행할 수 있습니다. 한 번만 구매하면 되며 구독은 없습니다. 기본기를 익힌 후 함께 사용하는 실전 도우미인 JavaScript용 AI Skill과 함께 사용할 수 있습니다. 이 제품은 그 기본기를 가르쳐 줍니다.

// 설치 방법 2분 이내

네 단계. 어떤 AI 채팅.

01
파일 다운로드
결제 후 다운로드 링크가 이메일로 전송됩니다. .txt 파일을 기기의 원하는 위치에 저장하세요.
02
AI 채팅 열기
이미 사용 중인 AI 채팅이면 무엇이든: Claude, ChatGPT, Gemini, Grok, Copilot 등.
03
프롬프트 붙여넣기
.txt 파일을 열어 프롬프트 부분을 복사한 뒤 Claude나 ChatGPT에 붙여넣으세요. 프로젝트에 추가해 두면 언제든 바로 쓸 수 있습니다.
04
작업 시작
귀하의 AI가 이제 전문가로 설정되었습니다. 해당 분야에 관해 무엇이든 질문해 보세요.

기술 지식이 필요하지 않습니다.

Library를 이용하면 다운로드할 것이 없습니다. AI를 한 번 연결하면 원하는 스킬을 이름으로 요청할 수 있습니다.

설정 가이드 → Library · $9/월 →

// faq

이 제품에 대한 질문

이 AI JavaScript 튜터는 어떻게 작동하나요?+

Claude Project, 맞춤형 GPT 또는 Gemini Gem에 붙여 넣은 다음, 현재 어느 단계인지 말하세요. 이 튜터는 브라우저 콘솔에서 현재 수준을 파악할 수 있도록 작은 과제 하나를 제시하고, 학습 흐름을 제안한 뒤, 직접 작성하는 과제와 함께 한 번에 한 과씩 진행합니다. 세션이 끝나면 진행 상황 블록이 표시되며, 이를 다시 붙여 넣으면 알맞은 과부터 이어서 진행합니다.

작동하는 코드를 그냥 알려 주나요?+

아니요. 이 튜터는 자신이 제시한 과제의 완성된 해답을 절대 작성하지 않도록 지시되어 있습니다. 막히면 다른 변수를 사용한 더 작은 예시를 작성하거나, 오류가 발생한 줄을 짚어 주는 질문을 합니다. 기존 코드를 줄마다 설명해 달라는 요청은 별도의 요청이며, 이 경우에는 전체 내용을 자세히 설명합니다.

최신 JavaScript를 다루나요, 아니면 오래된 튜토리얼을 다루나요?+

기본적으로 ES2015 이후의 내용을 가르칩니다. let과 const, 화살표 함수, 구조 분해, 템플릿 리터럴, import와 export를 사용하는 모듈, 프로미스와 async await, fetch를 다룹니다. 참고 자료로 MDN을 사용하고, 앞으로 접하게 될 코드를 설명할 때만 var를 언급하며, API를 지어내지 말고 확실하지 않을 때는 모른다고 말하도록 되어 있습니다.

제가 직접 읽어야 하나요?+

아니요. 이 파일은 여러분이 아니라 AI가 읽도록 작성되었습니다. 파일을 업로드하거나 한 번 붙여 넣으면 AI가 그 역할을 맡습니다. 그다음부터는 평소처럼 질문하기만 하면 됩니다. 물론 파일을 열어 직접 읽어도 되지만, 여기 있는 내용은 여러분이 직접 읽지 않아도 이용할 수 있습니다.