이 페이지
이 가이드의 핵심 Skill: AI JavaScript Tutor. Claude, ChatGPT 또는 Gemini를 튜터로 바꿔 첫 번째 레슨부터 브라우저 콘솔에서 JavaScript를 직접 작성하게 합니다 - $19, 한 번 결제하면 영구적으로 사용할 수 있습니다.
JavaScript 튜터 보기 →JavaScript 튜터로서 Claude를 사용할 가치는 정확히 한 가지 이유에 있습니다. 여러분이 작성한 코드를 읽고 정신 모델이 어디에서 잘못되었는지 알려 준다는 점입니다. Claude는 여러분의 브라우저를 볼 수 없고, 콘솔에 무엇이 출력되었는지도 알 수 없으며, 대신 페이지를 직접 클릭해 줄 수도 없습니다. 여러분이 코드를 실행하고 결과를 붙여 넣으면, Claude는 그 결과에서 출발해 여러분이 무엇을 잘못 이해했는지 역추적합니다. 그 반복 과정이 가르침을 만들어 냅니다. 나머지는 모두 장식입니다.
JavaScript는 대부분의 첫 프로그래밍 언어보다 어설픈 이해를 더 가혹하게 다룹니다. 망가진 코드도 아주 태연하게 실행한 뒤 그저 아무것도 출력하지 않을 수 있기 때문입니다. 오류도, 출력도, 단서도 없습니다. 여러분의 전제를 되묻는 튜터는 거의 어떤 다른 언어에서보다 여기서 더 큰 가치를 발휘합니다.
AI JavaScript 튜터는 강의와 달리 무엇을 해 주나요?
여러분에게 반응합니다. 강의는 여러분이 존재하기 전에 녹화된 자료를 정해진 순서로 따라가는 방식이므로, 배열은 잘 다루면서 무엇을 이것을 가리키는 부분입니다. 튜터 파일은 과제를 제시하고, 여러분이 작성한 코드를 읽은 뒤, 방금 발견한 빈틈에 맞춰 다음 학습 내용을 재배치합니다.
AI JavaScript Tutor는 사람들이 실제로 JavaScript에서 막히는 순서에 맞춰 학습 과정을 진행합니다. 값과 스코프, 배열과 map, 객체와 구조 분해, 그다음 DOM과 이벤트, 그리고 마지막으로 프로미스와 async await를 다룹니다. 마지막 순서가 중요합니다. DOM을 이해하기 전에 비동기를 배우는 과정에서 대부분의 독학 학습자가 조용히 중단합니다. 상태를 이해하기도 전에 시간을 기준으로 추론해야 하기 때문입니다.
사람들은 실제로 JavaScript의 어디에서 막힐까요?
일관되게 네 곳에서 발생하지만, 그 어느 것도 문법 문제는 아닙니다:
-
오류가 아닌 undefined.
Cannot read properties of undefined는 누구나 초기에 마주치는 오류지만, 원인은 거의 항상 오류 메시지에 표시된 줄에 있지 않습니다. - DOM이 준비되지 않은 경우. 스크립트는 실행되지만 요소가 아직 존재하지 않아 아무 일도 일어나지 않고, 오류도 발생하지 않습니다.
-
비동기(Async). 코드가 잘못된 순서로 완료되고, 값이 도착하기 전에 읽히며, 데이터가 있어야 할 자리에
Promise { <pending> }가 로그로 출력됩니다. - 모델 없이 복사하기. 검색 결과에서 작동하는 코드 조각을 가져오면 오늘 밤의 문제는 해결되지만 아무것도 배우지 못하므로, 다음 주에는 같은 버그가 다른 형태로 다시 나타납니다.
한 번 붙여 넣는 것만으로 Claude를 JavaScript 튜터로 설정하려면 어떻게 해야 하나요?
새 대화를 열고, 아무 페이지에서나 브라우저 콘솔을 연 다음 강의 계획표 대신 배치 테스트부터 시작하세요. 처음 몇 주 동안은 콘솔이 적합한 교실입니다. 빌드 단계도, 설치도 필요 없고 즉시 피드백을 받을 수 있습니다.
당신은 제 JavaScript 튜터입니다. 아직 아무것도 가르치지 마세요.
브라우저 콘솔에서 실행할 수 있는 과제를 하나 주세요. 배열, 함수, 객체 하나가 필요하고 15줄 이내로 작성할 수 있어야 합니다. 올바른 출력이 어떻게 보이는지도 알려 주세요.
제가 직접 작성한 뒤 제 코드와 콘솔에 정확히 출력된 내용을 오류까지 포함해 모두 붙여 넣겠습니다.
그런 다음 다음을 알려 주세요:
1. 제 코드가 제가 이해하고 있다는 것을 증명하는 내용.
2. 나중에 가장 큰 대가를 치르게 할 단 하나의 오해.
3. 다음에 배울 주제 여섯 개를 순서대로 제시하고, 왜 그 순서인지 한 문장으로 설명하세요.
절대 과제를 대신 작성하지 마세요. 제가 망가진 코드를 붙여 넣는 것이 작동하는 코드를 보여 주는 것보다 당신에게 더 유용합니다.
당신을 놓치지 않으면서 async를 가르치려면 어떻게 해야 하나요?
Async는 문법으로 가르치면 잘못 이해하게 됩니다. await 입력하기는 쉽지만 믿기는 어렵습니다. 코드 한 줄이 멈춘 동안 페이지의 나머지 부분은 계속 진행될 수 있다는 사실을 받아들여야 하기 때문입니다. 이를 이해하는 방법은 실행하기 전에 예측하고, 그다음 비교하는 것입니다. 틀린 답을 소리 내어 말하는 것이 곧 학습입니다.
설명부터 하지 말고 예측을 통해 [async/await 또는 해당 주제]를 가르쳐 주세요.
1. 15줄 미만이며 console.log 호출이 두세 개 들어 있는 코드 조각을 주세요.
2. 무엇이든 설명하기 전에 로그가 표시될 정확한 순서와 각 로그에 무엇이 출력되는지 적어 보라고 하세요.
3. 제 답을 기다리세요.
4. 그런 다음에야 실제 실행 순서를 알려 주고, 제가 틀린 줄이 왜 틀렸는지 구체적으로 설명하세요. 맞힌 부분은 무시하세요.
5. 같은 가정을 다른 관점에서 깨뜨리는 두 번째 코드 조각을 주세요.
두 개의 코드 조각을 연속으로 정확히 예측하기 전에는 다음 주제로 넘어가지 마세요.
튜터는 일부러 당신의 속도를 늦춥니다. 도움 없이 JavaScript를 작성할 수 있게 되면, 그 반대가 필요해집니다. 프런트엔드와 서버 전반에서 구조를 잡아 주고, 어떤 강의에서도 다루지 않는 실제 프로젝트의 부분까지 함께 처리하는 작동하는 어시스턴트 말입니다. Max는 바로 그런 파일이며, 가격은 $19, 한 번만 결제하면 됩니다. 먼저 튜터와 함께 배우고, 그다음 전환하세요.
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 세부 정보는 자신도 모르게 오래된 정보가 됩니다. 버전에 따라 달라지는 내용은 공식 문서에서 확인하세요.
- 너무 일찍 프레임워크를 가르치기도 합니다. 둘째 주에 React를 요청하면 그대로 따릅니다. 이는 Skill이 아니라 여러분이 판단할 일입니다.
- 코드를 실행했는지는 알 수 없습니다. 작업을 건너뛴 뒤 실행했다고 말해도, 여러분이 하지 않는 동안에도 학습은 계속 진행됩니다.
- 빌드 도구가 가장 취약한 영역입니다. 번들러 설정과 모듈 오류는 볼 수 없는 파일에 따라 달라지므로, 이 부분에서는 여러분이 더 자세히 설명해야 할 수 있습니다.
- 연습을 대신해 주지는 않습니다. 매일 20분씩 하는 것이 일요일에 5시간 하는 것보다 효과적이며, 파일의 어떤 내용도 이를 강제하지 않습니다.
실력이 향상되는 사람과 정체되는 사람을 가르는 습관은 이미 작동하는 코드를 다시 읽는 것입니다. Yuri는 여러분이 작성한 내용을 검토하고 무엇이 취약한지, 왜 그런지 알려 줍니다. 선생님보다는 동료에 가까운 말투입니다. 19달러, 일회성 결제입니다. 파일이 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용 챗봇 빌더($14.99)로 실제 무언가를 만들어 보세요. 모두 Claude, ChatGPT 및 Gemini에서 작동하며, 설치에 약 2분이 걸리고 30일 환불 보장이 제공됩니다.
AI JavaScript 튜터
파일 하나를 한 번 붙여넣으면 됩니다. 첫 수업부터 콘솔을 사용하고, async보다 먼저 DOM을 배우며, 수정된 코드를 그대로 붙여넣는 대신 변수가 어떤 값을 가질 것으로 예상했는지 묻는 튜터를 이용할 수 있습니다. 구독은 필요 없습니다.
KissMySkills는 Claude, ChatGPT 및 모든 AI 채팅을 위한 2,000+개의 AI Skills, 300+개의 prompt 팩, 55개의 에이전트 및 무료 도구를 제공하는 마켓플레이스입니다.