이 가이드의 기반이 되는 Skill: AI JavaScript Tutor. Claude, ChatGPT 또는 Gemini를 첫 번째 레슨부터 브라우저 콘솔에서 직접 JavaScript를 작성하게 하는 튜터로 바꿔 줍니다 - $19, 한 번만 결제하면 영구적으로 사용할 수 있습니다.
JavaScript 튜터 보기 →JavaScript 튜터로서 Claude를 사용할 가치는 정확히 한 가지 이유에 있습니다. 여러분이 작성한 코드를 읽고 정신 모델이 어디에서 잘못되었는지 알려준다는 점입니다. Claude는 여러분의 브라우저를 볼 수 없고, 콘솔에 무엇이 출력되었는지도 알 수 없으며, 대신 페이지를 클릭해 줄 수도 없습니다. 여러분이 코드를 실행하고 결과를 붙여 넣으면, Claude는 거기서부터 거꾸로 추적해 여러분이 무엇을 잘못 이해했는지 찾아냅니다. 바로 그 반복 과정이 학습을 만들어 냅니다. 나머지는 모두 장식입니다.
JavaScript는 대부분의 입문 언어보다 어설픈 이해를 더 가혹하게 다룹니다. 망가진 코드도 아무렇지 않게 실행하고, 그저 아무것도 출력하지 않을 수 있기 때문입니다. 오류도 없고, 출력도 없고, 단서도 없습니다. 여러분의 가정을 끈질기게 확인하는 튜터는 거의 모든 다른 언어에서보다 JavaScript에서 더 큰 가치가 있습니다.
AI JavaScript tutor는 강의가 하지 못하는 어떤 일을 할까요?
튜터는 여러분에게 반응합니다. 강의는 여러분이 존재하기 전에 녹화된 고정된 학습 흐름이므로, 배열은 잘 다루지만 무엇을 가리키는지 완전히 이해하지 못한다는 사실을 알아차릴 수 없습니다. 이것을 가리키는 내용을 말합니다. 튜터 파일은 학습자에게 과제를 제시하고, 작성한 코드를 읽으며, 방금 발견한 부족한 부분을 중심으로 다음 학습 내용을 재구성합니다.
AI JavaScript Tutor는 JavaScript가 실제로 사람들을 막히게 하는 순서대로 학습 과정을 진행합니다. 값과 스코프, 배열과 map, 객체와 구조 분해, 그다음 DOM과 이벤트, 마지막으로 프로미스와 비동기 처리입니다. 마지막 순서가 중요합니다. DOM을 이해하기 전에 비동기 처리를 배우는 것이 대부분의 독학 학습자가 조용히 학습을 중단하는 지점입니다. 상태를 이해하기도 전에 시간을 기준으로 추론해야 하기 때문입니다.
사람들은 JavaScript에서 실제로 어디에서 막힐까요?
항상 네 곳에서 발생하며, 그 어느 것도 문법 문제가 아닙니다:
-
오류가 아닌 undefined.
Cannot read properties of undefined는 누구나 초기에 마주치는 오류지만, 원인은 거의 항상 오류 메시지가 가리키는 줄에 있지 않습니다. - DOM이 준비되지 않은 상태. 스크립트는 실행되지만 요소는 아직 존재하지 않아 아무 일도 일어나지 않고, 오류도 표시되지 않습니다.
-
비동기 처리. 코드가 잘못된 순서로 완료되고, 값이 도착하기 전에 읽히며, 데이터가 있어야 할 자리에
Promise { <pending> }가 출력됩니다. - 모델 없이 복사하기. 검색 결과에서 작동하는 코드 조각을 가져오면 오늘 밤의 문제는 해결되지만 아무것도 배우지 못하므로, 다음 주에는 다른 형태로 같은 버그가 다시 나타납니다.
한 번 붙여 넣는 것만으로 Claude를 JavaScript 튜터로 설정하려면 어떻게 해야 하나요?
새 대화를 열고, 아무 페이지에서나 브라우저 콘솔을 연 다음 커리큘럼 대신 배치 평가부터 시작하세요. 처음 몇 주 동안은 콘솔이 적합한 교실입니다. 빌드 단계나 설치가 필요 없고 즉시 피드백을 받을 수 있습니다.
당신은 제 JavaScript 튜터입니다. 아직 아무것도 가르치지 마세요.
브라우저 콘솔에서 실행할 수 있는 과제 하나를 주세요. 배열, 함수, 객체 하나가 필요하고 15줄 이내여야 합니다. 올바른 출력이 어떻게 보이는지도 알려 주세요.
제가 직접 작성한 뒤 제 코드와 콘솔에 정확히 출력된 내용을 오류를 포함해 모두 붙여 넣겠습니다.
그런 다음 다음을 제시해 주세요:
1. 제 코드가 제가 이해하고 있다는 것을 증명하는 것.
2. 나중에 가장 큰 대가를 치르게 할 단 하나의 오해.
3. 다음에 배울 주제 여섯 개를 순서대로 제시하고, 왜 그 순서인지 한 문장으로 설명해 주세요.
절대로 과제를 대신 작성하지 마세요. 제가 망가진 코드를 붙여 넣는 편이 작동하는 코드보다 당신에게 더 유용합니다.
당신을 놓치지 않게 하면서 async를 가르치려면 어떻게 해야 하나요?
Async는 문법으로 가르치면 잘못 이해하게 됩니다. await 입력하기는 쉽지만 믿기는 어렵습니다. 코드 한 줄이 멈춰 있는 동안 나머지 페이지는 계속 진행된다는 사실을 받아들여야 하기 때문입니다. 실행하기 전에 예측하고, 그다음 비교하는 것이 해결 방법입니다. 소리 내어 틀리는 것이 학습입니다.
설명부터 하지 말고 예측을 통해 [async/await 또는 해당 주제]를 가르쳐 주세요.
1. 15줄 미만의 코드 조각을 주고, 그 안에 console.log 호출을 두세 개 넣으세요.
2. 무엇이든 설명하기 전에 로그가 나타날 정확한 순서와 각각 무엇을 출력하는지 적어 보라고 하세요.
3. 제 답변을 기다리세요.
4. 그때서야 실제 실행 순서를 알려 주고, 제가 틀린 줄이 왜 틀렸는지 구체적으로 설명해 주세요. 맞힌 부분은 무시하세요.
5. 다른 관점에서 같은 가정을 깨뜨리는 두 번째 코드 조각을 주세요.
연속으로 두 개의 코드 조각을 정확히 예측할 수 있을 때까지 다음 주제로 넘어가지 마세요.
튜터는 의도적으로 당신의 속도를 늦춥니다. JavaScript를 도움 없이 작성할 수 있게 되면, 원하는 것은 그 반대입니다. 프런트엔드와 서버 전반에서 작동하며, 구조와 어떤 강의에서도 다루지 않는 실제 프로젝트의 부분까지 도와주는 어시스턴트 말이죠. Max가 바로 그 파일입니다. $29, 한 번만 결제하면 됩니다. 먼저 튜터와 배우고, 그다음 전환하세요.
Max 보기 →존재하게 만들고 싶은 무언가가 생기는 순간, 수업도 더 이상 추상적으로 느껴지지 않습니다. 튜터와 함께 사용하기 좋은 프로젝트 파일은 두 가지입니다. 작동하는 챗봇의 서버 측을 위한 Chatbot Builder for Node.js($14.99)는 라우트, 키, 스트리밍을 모두 포함하고, 같은 프로젝트의 프런트엔드 인터페이스를 위한 Chatbot Builder for React($14.99)도 있습니다. 둘 중 하나를 엉성하게 만들어 본 다음 다시 만들어 보세요. 가장 빠르게 실력이 느는 한 주가 될 것입니다.
수정된 파일이 아니라 실제 진단을 받으려면 어떻게 해야 하나요?
수정 방법을 요청하면 수정된 코드를 알려 주게 되는데, 이 시기에는 바로 그것이 잘못된 접근입니다. 이를 명시적으로 금지하면 같은 모델이 유용해집니다.
제 코드가 예상대로 동작하지 않습니다. 코드와 콘솔에 출력된 내용을 함께 보여 드리겠습니다.
[PASTE CODE]
[PASTE CONSOLE OUTPUT]
규칙: 수정된 코드나 다시 작성한 함수는 제시하지 마세요.
1. 브라우저가 지목하는 줄과 실제 원인이 있는 줄을 알려 주세요.
2. 그 시점에 특정 변수 하나가 어떤 값을 담고 있다고 생각하는지, 그리고 그 이유를 물어보세요.
3. 제 대답을 기다리세요. 틀렸다면 답을 알려 주는 대신 더 좁은 질문을 하세요.
4. 직접 확인할 수 있도록 추가했으면 좋았을 console.log 한 줄 또는 debugger 한 줄을 제시하세요.
마지막에는 이런 종류의 버그 전체를 예방하는 일반적인 습관을 말해 보세요.
다음에 필요한 JavaScript 튜터 파일은 무엇인가요?
항상 일반 JavaScript부터 시작하세요. 프레임워크는 배우려는 대상을 가립니다. 언어의 기초가 탄탄해지면 AI TypeScript Tutor가 가장 짧은 다음 단계입니다. 이미 머릿속으로 관리하던 타입을 명시적으로 드러낼 뿐, 같은 언어를 사용하기 때문입니다. 그다음에는 업무에 따라 나뉩니다. 채용 공고에서 가장 많이 요구하는 컴포넌트 모델을 배우려면 AI React Tutor, 기업 환경에서 정해진 방식이 중요한 곳이라면 AI Angular Tutor, 웹은 잠시 거쳐 간 길이었고 실제 목표가 iPhone 앱이었다면 AI Swift Tutor를 선택하세요. AI Skill for JavaScript는 전혀 다른 종류의 파일입니다. 이것을 익힌 뒤 사용하는 실무 보조 도구이지, 교사가 아닙니다.
어디에서 실패하나요?
- 페이지를 볼 수 없습니다. DOM도, 네트워크 탭도, 렌더링된 출력도 없습니다. 증상이 시각적인 것이라면 설명하거나 스크린샷을 붙여 넣으세요. 소스만 보고 추측하면 내용을 지어내기 때문입니다.
- 사용 중인 프레임워크 버전을 알지 못합니다. JavaScript 도구는 빠르게 변화하므로 기억에 의존한 API 세부 정보가 조용히 낡을 수 있습니다. 버전별 내용은 무엇이든 공식 문서에서 확인하세요.
- 너무 이른 시점에 프레임워크를 가르칠 수 있습니다. 2주 차에 React를 요청하면 그대로 따릅니다. 그 판단은 Skill이 아니라 여러분의 몫입니다.
- 코드를 실행했는지는 알 수 없습니다. 작업을 건너뛰고 실행했다고 말해도, 여러분이 연습하지 않는 동안 학습은 계속 진행됩니다.
- 빌드 도구 관련 부분이 가장 취약합니다. 번들러 설정과 모듈 오류는 볼 수 없는 파일에 따라 달라지므로, 이 부분에서는 여러분이 더 많이 설명해야 합니다.
- 연습을 대신해 주지는 않습니다. 매일 20분 연습하는 것이 일요일에 5시간 하는 것보다 낫고, 파일의 어떤 내용도 이를 강제하지 않습니다.
실력을 향상하는 사람과 제자리걸음하는 사람을 가르는 습관은 이미 작동하는 코드를 다시 읽는 것입니다. Yuri는 여러분이 작성한 내용을 검토하고 무엇이 취약하며 그 이유가 무엇인지, 교사가 아니라 동료의 말투로 알려 줍니다. 29달러, 일회성 결제입니다. 파일이 100줄을 넘는 순간부터 유용합니다.
Yuri 보기 →파일은 어떻게 설치하나요?
튜터는 ZIP 파일 안에 있는 SKILL.md 파일입니다. Claude에서 Customize → Skills를 열고 + 버튼을 누른 다음 Create skill, 이어서 Upload a skill을 선택하고 ZIP 파일을 지정하세요. 토글을 켜면 바로 사용할 수 있습니다. Skills는 Free, Pro, Max, Team 및 Enterprise 요금제에서 이용할 수 있습니다.
유일한 실제 요구 사항은 코드 실행입니다. Skills 메뉴가 비활성화되어 있다면 Settings → Capabilities에서 켜세요. 이 메뉴에는 code execution 및 file creation으로 표시되어 있습니다. Team 및 Enterprise 요금제에서는 소유자가 Organization settings에서 이를 관리하므로, 조직 전체에서 꺼져 있다면 소유자에게 문의하세요. Anthropic은 이 모든 내용을 Skills 도움말 문서에 안내하고 있습니다.
코드 실행을 활성화할 수 없거나 ChatGPT 또는 Gemini에서 작업하는 경우에도 동일한 파일을 사용하는 대체 방법이 있습니다. ZIP을 열고 SKILL.md의 내용을 복사한 다음 Project, 맞춤형 GPT, Gem 또는 일반 맞춤 지침에 붙여넣으세요. 동작은 동일하며 도구를 변경할 때 다시 붙여넣기만 하면 됩니다.
요약:
AI JavaScript 튜터($19)를 사용해 적절한 수준으로 배정받고, 콘솔에서 학습하며, 실행하기 전에 결과를 예측하는 습관을 기르세요. 언어 기초가 탄탄해지면 AI TypeScript 튜터 또는 AI React 튜터($19씩)로 넘어가고, Node.js용 Chatbot Builder($14.99)로 실제 무언가를 만들어 보세요. 모두 Claude, ChatGPT 및 Gemini에서 작동하며, 약 2분 만에 설치할 수 있고 30일 환불 보장을 제공합니다.
AI JavaScript 튜터
파일 하나를 한 번 붙여넣으면 됩니다. 첫 수업부터 콘솔을 사용하고, 비동기 처리 전에 DOM을 배우며, 수정 코드를 붙여넣는 대신 변수가 어떤 값을 담을 것으로 예상했는지 묻는 튜터입니다. 구독이 필요 없습니다.
KissMySkills는 Claude, ChatGPT 및 모든 AI 채팅을 위한 853개의 AI Skill, 158개의 prompt 팩, 55개의 에이전트 및 무료 도구를 판매하는 마켓플레이스입니다.