chore(i18n): sync translations with latest source changes (chunk 1/1, 9 changes)

pull/1774/head
localizeflow[bot] 2 weeks ago
parent 2b12341c09
commit 736718c09f

@ -1,7 +1,7 @@
{
"1-getting-started-lessons/1-intro-to-programming-languages/README.md": {
"original_hash": "bec5e35642176d9e483552bfc82996d8",
"translation_date": "2026-03-06T14:49:03+00:00",
"original_hash": "d5eeb6e975b5864d8da52d4a41941f8d",
"translation_date": "2026-03-27T19:09:13+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "hi"
},
@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-06T14:52:45+00:00",
"translation_date": "2026-03-27T19:12:37+00:00",
"source_file": "AGENTS.md",
"language_code": "hi"
},

@ -1,28 +1,28 @@
# AGENTS.md
## प्रोजेक्ट अवलोकन
## परियोजना अवलोकन
यह शुरुआती लोगों क वेब विकास के मूल सिद्धांत सिखाने के लिए एक शैक्षिक पाठ्यक्रम भंडार है। यह पाठ्यक्रम Microsoft Cloud Advocates द्वारा विकसित 12 सप्ताह का एक व्यापक कोर्स है, जिसमें JavaScript, CSS, और HTML को कवर करने वाले 24 हैंड्स-ऑन लेसन शामिल हैं।
यह शुरुआती लोगों के लिए वेब विकास के मूल सिद्धांतों को सिखाने के लिए एक शैक्षिक पाठ्यक्रम भंडार (रिपॉजिटरी) है। यह पाठ्यक्रम माइक्रोसॉफ्ट क्लाउड एडवोकेट्स द्वारा विकसित एक व्यापक 12-सप्ताह का कोर्स है, जिसमें JavaScript, CSS, और HTML को कवर करते हुए 24 व्यावहारिक पाठ शामिल हैं।
### मुख्य घटक
- **शैक्षिक सामग्री**: परियोजना-आधारित मॉड्यूल में व्यवस्थित 24 संरचित लेसन
- **व्यावहारिक परियोजनाएं**: टेररियम, टाइपिंग गेम, ब्राउज़र एक्सटेंशन, स्पेस गेम, बैंकिंग ऐप, कोड संपादक, और AI चैट सहायक
- **इंटरैक्टिव क्विज़**: 48 क्विज़, प्रत्येक में 3 प्रश्न (प्री/पोस्ट-लेसन मूल्यांकन)
- **शैक्षिक सामग्री**: परियोजना-आधारित मॉड्यूल में व्यवस्थित 24 संरचित पाठ
- **व्यावहारिक परियोजनाएं**: टेररियम, टाइपिंग गेम, ब्राउज़र एक्सटेंशन, स्पेस गेम, बैंकिंग ऐप, कोड एडिटर, और AI चैट असिस्टेंट
- **इंटरैक्टिव क्विज़**: प्रत्येक में 3 प्रश्नों के साथ 48 क्विज़ (पाठ से पहले/बाद मूल्यांकन)
- **बहुभाषी समर्थन**: GitHub Actions के माध्यम से 50+ भाषाओं के लिए स्वचालित अनुवाद
- **तकनीकें**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI परियोजनाओं के लिए)
- **प्रौद्योगिकियां**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI परियोजनाओं के लिए)
### वास्तुकल
### संरचन
- लेसन-आधारित संरचना के साथ शैक्षिक रिपॉजिटरी
- प्रत्येक लेसन फ़ोल्डर में README, कोड उदाहरण, और समाधान होते हैं
- अलग-अलग निर्देशिकाओं में स्वतंत्र परियोजनाएं (quiz-app, विभिन्न लेसन परियोजनाएं)
- GitHub Actions (co-op-translator) का उपयोग करने वाला अनुवाद प्रणाली
- Docsify द्वारा परोसी गई और PDF के रूप में उपलब्ध दस्तावेज़ीकरण
- शैक्षिक रिपॉजिटरी जो पाठ-आधारित संरचना पर आधारित है
- प्रत्येक पाठ फ़ोल्डर में README, कोड उदाहरण, और समाधान होते हैं
- अलग-अलग निर्देशिकाओं में स्वतंत्र परियोजनाएं (quiz-app, विभिन्न पाठ परियोजनाएं)
- GitHub Actions (co-op-translator) का उपयोग कर अनुवाद प्रणाली
- दस्तावेज़ीकरण Docsify के माध्यम से उपलब्ध और PDF के रूप में भी उपलब्ध
## सेटअप कमांड्स
## सेटअप कमांड
यह रिपॉजिटरी मुख्य रूप से शैक्षिक सामग्री की खपत के लिए है। विशिष्ट परियोजनाओं के साथ काम करने के लिए:
यह रिपॉजिटरी मुख्य रूप से शैक्षिक सामग्री के उपभोग के लिए है। विशिष्ट परियोजनाओं के साथ काम करने के लिए:
### मुख्य रिपॉजिटरी सेटअप
@ -36,19 +36,19 @@ cd Web-Dev-For-Beginners
```bash
cd quiz-app
npm install
npm run dev # विकास सर्वर प्रारंभ करें
npm run build # उत्पादन के लिए बनाए
npm run lint # ESLint चलाए
npm run dev # विकास सर्वर शुरू करें
npm run build # उत्पादन के लिए निर्माण करे
npm run lint # ESLint चलाए
```
### बैंक प्रोजेक्ट API (Node.js + Express)
### बैंक परियोजना API (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # एपीआई सर्वर शुरू करें
npm run lint # ESLint चलाए
npm run format # Prettier के साथ फॉर्मेट करें
npm run lint # ESLint चलाए
npm run format # Prettier के साथ फॉर्मेट करें
```
### ब्राउज़र एक्सटेंशन परियोजनाएं
@ -64,10 +64,10 @@ npm install
```bash
cd 6-space-game/solution
npm install
# ब्राउज़र में index.html खोलें या Live Server का उपयोग करें
# ब्राउज़र में index.html खोलें या लाइव सर्वर का उपयोग करें
```
### चैट प्रोजेक्ट (Python Backend)
### चैट परियोजना (Python बैकएंड)
```bash
cd 9-chat-project/solution/backend/python
@ -80,22 +80,22 @@ python api.py
### सामग्री योगदानकर्ताओं के लिए
1. **रिपॉजिटरी को अपने GitHub अकाउंट में फोर्क करें**
2. **अपने फोर्क को लोकली क्लोन करें**
3. **अपने परिवर्तनों के लिए नई शाखा बनाएं**
4. लेसन सामग्री या कोड उदाहरणों में परिवर्तन करें
5. संबंधित परियोजना निर्देशिकाओं में कोई भी कोड परिवर्तन परीक्षण करें
6. योगदान दिशानिर्देशों का पालन करते हुए पुल अनुरोध सबमिट करें
1. **रिपॉजिटरी को फ़ॉर्क करें** अपने GitHub खाते पर
2. **अपने फ़ॉर्क को स्थानीय रूप से क्लोन करें**
3. **अपने बदलावों के लिए नई ब्रांच बनाएं**
4. पाठ सामग्री या कोड उदाहरणों में बदलाव करें
5. संबंधित परियोजना निर्देशिकाओं में कोड परिवर्तनों का परीक्षण करें
6. योगदान दिशानिर्देशों का पालन करते हुए पुल अनुरोध प्रस्तुत करें
### शिक्षार्थियों के लिए
1. रिपॉजिटरी को फर्क या क्लोन करें
2. लेसन निर्देशिकाओं में क्रमबद्ध रूप से नेविगेट करे
3. प्रत्येक लेसन के README फ़ाइल पढ़ें
4. प्री-लेसन क्विज़ https://ff-quizzes.netlify.app/web/ पर पूरा करें
5. लेसन फोल्डर्स में कोड उदाहरणों के माध्यम से काम करें
6. असाइनमेंट और चुनौतियां पूरी करें
7. पोस्ट-लेसन क्विज़ दें
1. रिपॉजिटरी को फ़ॉर्क या क्लोन करें
2. क्रमशः पाठ निर्देशिकाओं में जाए
3. प्रत्येक पाठ के README फाइल पढ़ें
4. https://ff-quizzes.netlify.app/web/ पर पूर्व-पाठ क्विज़ पूरा करें
5. पाठ फ़ोल्डरों में कोड उदाहरणों के साथ काम करें
6. असाइनमेंट और चुनौतियाँ पूरा करें
7. पोस्ट-पाठ क्विज़ लें
### लाइव विकास
@ -110,173 +110,173 @@ python api.py
```bash
cd quiz-app
npm run lint # कोड शैली की समस्याओं के लिए जांचें
npm run build # सत्यापित करें कि बिल्ड सफल होता है
npm run lint # कोड स्टाइल समस्याओं के लिए जांच करें
npm run build # सुनिश्चित करें कि निर्माण सफल हो जाता है
```
### बैंक API परीक्षण
```bash
cd 7-bank-project/api
npm run lint # कोड स्टाइल समस्याओं के लिए जांच करें
node server.js # जांचें कि सर्वर बिना त्रुटियों के शुरू होता है
npm run lint # कोड शैली की समस्याओं के लिए जाँच करें
node server.js # पुष्टि करें कि सर्वर बिना त्रुटियों के शुरू होता है
```
### सामान्य परीक्षण दृष्टिकोण
- यह एक शैक्षिक रिपॉजिटरी है जिसमें व्यापक स्वचालित परीक्षण नहीं हैं
- मैनुअल परीक्षण पर ध्यान केंद्रित करता है:
- मैनुअल परीक्षण पर ध्यान केंद्रित:
- कोड उदाहरण बिना त्रुटि के चलना चाहिए
- दस्तावेज़ीकरण में लिंक सही तरीके से काम करें
- परियोजना निर्माण सफलतापूर्वक पूर्ण होना चाहिए
- उदाहरण सर्वोत्तम प्रथाओं का पालन करें
- दस्तावेज़ीकरण में लिंक सही काम कर है
- परियोजना निर्माण सफलतापूर्वक पूरा होता है
- उदाहरणों में सर्वोत्तम प्रथाओं का पालन होता है
### प्री-सबमिशन जांच
### सबमिशन से पहले जांच
- package.json वाले निर्देशिकाओं में `npm run lint` चलाएं
- मार्कडाउन लिंक वैध हैं या नहीं जांचें
- कोड उदाहरण ब्राउज़र या Node.js में टेस्ट करें
- जांचें कि अनुवाद संरचना बनाए रखे
- मार्कडाउन लिंक मान्य हैं यह सत्यापित करें
- ब्राउज़र या Node.js में कोड उदाहरणों का परीक्षण करें
- सुनिश्चित करें कि अनुवाद सही संरचना बनाए रखते है
## कोड शैली दिशानिर्देश
## कोड स्टाइल दिशानिर्देश
### JavaScript
- आधुनिक ES6+ सिंटैक्स का उपयोग करें
- परियोजनाओं में उपलब्ध मानक ESLint कॉन्फ़िगरेशन का पालन करें
- शैक्षिक स्पष्टता के लिए सार्थक वेरिएबल और फ़ंक्शन नामों का उपयोग करें
- शिक्षार्थियों के लिए अवधारणाओं की व्याख्या करने वाले टिप्पणियाँ जोड़ें
- जहां कॉन्फ़िगर हो वहां Prettier का उपयोग करें
- परियोजनाओं में प्रदान किए गए मानक ESLint विन्यास का पालन करें
- शैक्षिक स्पष्टता के लिए सार्थक चर और फ़ंक्शन नाम उपयोग करें
- शिक्षार्थियों के लिए अवधारणाओं को समझाने वाले टिप्पणियां जोड़ें
- जहां कॉन्फ़िगर हो Prettier का उपयोग करें
### HTML/CSS
- सेमंटिक HTML5 तत्व
- सेमंटिक HTML5 तत्व
- उत्तरदायी डिज़ाइन सिद्धांत
- स्पष्ट क्लास नामकरण कन्वेंश
- शिक्षार्थियों के लिए CSS तकनीकों की व्याख्या करने वाली टिप्पणियाँ
- स्पष्ट क्लास नामकरण सम्मेल
- शिक्षार्थियों के लिए CSS तकनीकों को समझाने वाली टिप्पणियां
### Python
- PEP 8 शैली दिशानिर्देश
- स्पष्ट, शैक्षिक कोड उदाहरण
- सीखने में सहायक टाइप संकेत
- जहां उपयोगी हो, टाइप हिन्ट्स
### Markdown दस्तावेज़ीकरण
### मार्कडाउन दस्तावेज़ीकरण
- स्पष्ट हेडिंग पदानुक्रम
- भाषा निर्दिष्ट कोड ब्लॉक्स
- भाषा निर्दिष्ट कोड ब्लॉक
- अतिरिक्त संसाधनों के लिंक
- `images/` निर्देशिकाओं में स्क्रीनशॉट और चित्र
- पहुँच के लिए चित्रों के लिए Alt पाठ
- `images/` निर्देशिकाओं में स्क्रीनशॉट और छवियां
- पहुंच योग्यता के लिए छवियों के लिए Alt टेक्स्ट
### फ़ाइल संगठन
- लेसन क्रमशः नंबरित (1-getting-started-lessons, 2-js-basics, आदि)
- प्रत्येक परियोजना में `solution/` और अक्सर `start/` या `your-work/` निर्देशिकाएं
- चित्र लेसन-विशिष्ट `images/` फोल्डर में संग्रहि
- पाठ क्रमशः क्रमांकित (1-getting-started-lessons, 2-js-basics, आदि)
- प्रत्येक परियोजना में `solution/` और अक्सर `start/` या `your-work/` निर्देशिकाएं होती हैं
- छवियां पाठ-विशिष्ट `images/` फ़ोल्डरों में संग्रही
- अनुवाद `translations/{language-code}/` संरचना में
## निर्माण और परिनियोजन
### क्विज़ ऐप परिनियोजन (Azure Static Web Apps)
quizz-app Azure Static Web Apps परिनियोजन के लिए कॉन्फ़िगर किया गया है:
क्विज़-ऐप Azure Static Web Apps परिनियोजन के लिए कॉन्फ़िगर है:
```bash
cd quiz-app
npm run build # dist/ फ़ोल्डर बनाता है
# मुख्य में पुश पर GitHub Actions वर्कफ़्लो के माध्यम से तैनात करता है
# मुख्य शाखा पर पुश करने पर GitHub Actions वर्कफ़्लो के माध्यम से तैनात करता है
```
Azure Static Web Apps कॉन्फ़िगरेशन:
- **प स्थान**: `/quiz-app`
- **प स्थान**: `/quiz-app`
- **आउटपुट स्थान**: `dist`
- **कार्यप्रवाह**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
- **वर्कफ़्लो**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### दस्तावेज़ीकरण PDF जनरेशन
### दस्तावेज़ीकरण PDF निर्माण
```bash
npm install # docsify-to-pdf इंस्टॉल करें
npm run convert # docs से PDF जनरेट करें
npm install # docsify-to-pdf स्थापित करें
npm run convert # docs से PDF बनाएँ
```
### Docsify दस्तावेज़ीकरण
```bash
npm install -g docsify-cli # Docsify को वैश्विक रूप से स्थापित करें
npm install -g docsify-cli # Docsify को ग्लोबली इंस्टॉल करें
docsify serve # localhost:3000 पर सेवा दें
```
### परियोजना-विशिष्ट निर्माण
प्रत्येक परियोजना निर्देशिका में अपना निर्माण प्रक्रिया हो सकती है:
- Vue परियोजनाएं: उत्पादन बंडल बनाने के लिए `npm run build`
- स्थिर परियोजनाएं: कोई निर्माण कदम नहीं, सीधे फ़ाइलें परोसें
- Vue परियोजनाएं: `npm run build` उत्पाद बंडल बनाता है
- स्थैतिक परियोजनाएं: कोई निर्माण चरण नहीं, सीधे फाइलें सर्व करें
## पुल अनुरोध दिशानिर्देश
### शीर्षक प्रारूप
परिवर्तन क्षेत्र निर्दिष्ट करते हुए स्पष्ट, वर्णनात्मक शीर्षक का उपयोग करें:
- `[Quiz-app] लेसन X के लिए नया क्विज़ जोड़ें`
- `[Lesson-3] टेरारियम परियोजना में टाइपो ठीक करें`
- `[Translation] लेसन 5 के लिए स्पेनिश अनुवाद जोड़ें`
- `[Docs] सेटअप निर्देश अपडेट करें`
परिवर्तन के क्षेत्र को दर्शाने वाले स्पष्ट, वर्णनात्मक शीर्षक का उपयोग करें:
- `[Quiz-app] Add new quiz for lesson X`
- `[Lesson-3] Fix typo in terrarium project`
- `[Translation] Add Spanish translation for lesson 5`
- `[Docs] Update setup instructions`
### आवश्यक जांच
PR सबमिट करने से पहले:
PR प्रस्तुत करने से पहले:
1. **कोड गुणवत्ता**:
- प्रभावित परियोजना निर्देशिकाओं में `npm run lint` चलाएं
- सभी लिंटिंग त्रुटियां और चेतावनियां ठीक करें
- सभी लिंटिंग त्रुटियों और चेतावनियों को ठीक करें
2. **निर्माण सत्यापन**:
- लागू होने पर `npm run build` चलाएं
- कोई निर्माण त्रुटियां न हो
- यदि लागू हो तो `npm run build` चलाएं
- कोई निर्माण त्रुटि न हो
3. **लिंक सत्यापन**:
- सभी मार्कडाउन लिंक टेस्ट करें
- छवि संदर्भ सही हों
- सभी मार्कडाउन लिंक जांचें
- छवि संदर्भ काम करते हों
4. **सामग्री समीक्षा**:
- वर्तनी और व्याकरण के लिए प्रूफरीड करें
- वर्तनी और व्याकरण ठीक करें
- कोड उदाहरण सही और शैक्षिक हों
- अनुवाद मूल अर्थ बनाए रखें
### योगदान आवश्यकताएं
- Microsoft CLA से सहमति (पहले PR पर स्वचालित जांच)
- Microsoft CLA से सहमत हों (पहले PR पर स्वचालित जांच)
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) का पालन करें
- विस्तृत दिशानिर्देशों के लिए [CONTRIBUTING.md](./CONTRIBUTING.md) देखें
- यदि लागू हो तो PR विवरण में मुद्दा संख्या संदर्भित करें
- PR विवरण में समस्या नंबर का संदर्भ दें यदि लागू हो
### समीक्षा प्रक्रिया
- PR को रखरखावकर्ताओं और समुदाय द्वारा समीक्षा किया जाता है
- PRs रख-रखावकर्ताओं और समुदाय द्वारा समीक्षा की जाती हैं
- शैक्षिक स्पष्टता को प्राथमिकता दी जाती है
- कोड उदाहरण वर्तमान सर्वोत्तम प्रथाओं का पालन करें
- अनुवाद सटीकता और सांस्कृतिक उपयुक्तता के लिए समीक्षा की जाती है
- कोड उदाहरणों को वर्तमान सर्वोत्तम प्रथाओं का पालन करना चाहिए
- अनुवाद सटीकता और सांस्कृतिक उपयुक्तता के लिए समीक्षा किए जाते हैं
## अनुवाद प्रणाली
### स्वचालित अनुवाद
- co-op-translator वर्कफ़्लो के साथ GitHub Actions का उपयोग करता है
- 50+ भाषाओं में स्वचालित अनुवाद करता है
- GitHub Actions के साथ co-op-translator वर्कफ़्लो का उपयोग
- 50+ भाषाओं में स्वचालित अनुवाद
- स्रोत फाइलें मुख्य निर्देशिकाओं में
- अनुवादित फाइलें `translations/{language-code}/` निर्देशिकाओं में
### मैनुअल अनुवाद सुधार जोड़ना
1. `translations/{language-code}/` में फ़ाइल ढूंढें
1. `translations/{language-code}/` में फ़ाइल ढूंढें
2. संरचना बनाए रखते हुए सुधार करें
3. सुनिश्चित करें कि कोड उदाहरण कार्यशील हो
4. कोई स्थानीयकृत क्विज़ सामग्री हो तो उसका परीक्षण करें
3. सुनिश्चित करें कि कोड उदाहरण कार्यशील रहे
4. किसी भी स्थानीयकृत क्विज़ सामग्री का परीक्षण करें
### अनुवाद मेटाडेटा
अनुवादित फाइलों में मेटाडेटा हेडर शामिल होता है:
अनुवादित फाइलों में मेटाडेटा हेडर शामिल है:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -291,118 +291,118 @@ CO_OP_TRANSLATOR_METADATA:
## डिबगिंग और समस्या निवारण
### सामान्य समस्याएँ
### आम समस्याएं
**क्विज़ ऐप शुरू नहीं होता**:
- Node.js संस्करण जांचें (v14+ अनुशंसित)
- `node_modules` और `package-lock.json` हटाएं, फिर `npm install` चलाएं
- पोर्ट संघर्ष की जाँच करें (डिफ़ॉल्ट: Vite पोर्ट 5173 का उपयोग करता है)
- पोर्ट संघर्षों की जांच करें (डिफ़ॉल्ट: Vite पोर्ट 5173 उपयोग करता है)
**API सर्वर शुरू नहीं होता**:
- Node.js संस्करण न्यूनतम ज़रूरतें पूरी करता है या नहीं जांचें (node >=10)
- जांचें कि पोर्ट पहले से उपयोग में तो नहीं
- सभी निर्भरताओं को `npm install` के साथ स्थापित करें
- Node.js संस्करण न्यूनतम जांचें (node >=10)
- जांचें कि पोर्ट पहले से उपयोग में न हो
- सभी निर्भरताएं `npm install` के साथ स्थापित हैं यह सुनिश्चित करें
**ब्राउज़र एक्सटेंशन लोड नहीं होत**:
- manifest.json ठीक से फॉर्मेट किया गया है या नहीं जांचें
**ब्राउज़र एक्सटेंशन लोड नहीं होत**:
- सुनिश्चित करें कि manifest.json सही प्रारूप में है
- ब्राउज़र कंसोल में त्रुटियाँ देखें
- ब्राउज़र-विशिष्ट एक्सटेंशन इंस्टॉलेशन निर्देशों का पालन करें
**Python चैट प्रोजेक्ट समस्याएं**:
- सुनिश्चित करें OpenAI पैकेज इंस्टॉल है: `pip install openai`
- GITHUB_TOKEN पर्यावरण चर सेट है
**Python चैट परियोजना समस्याएं**:
- OpenAI पैकेज स्थापित करें: `pip install openai`
- जांचें कि GITHUB_TOKEN पर्यावरण चर सेट है
- GitHub Models एक्सेस अनुमतियाँ जांचें
**Docsify दस्तावेज़ सेवा नहीं दे रहा**:
- docsify-cli ग्लोबली इंस्टॉल करें: `npm install -g docsify-cli`
**Docsify दस्तावेज़ सेवा नहीं करता**:
- docsify-cli वैश्विक रूप से स्थापित करें: `npm install -g docsify-cli`
- रिपॉजिटरी रूट निर्देशिका से चलाएं
- जांचें कि `docs/_sidebar.md` फ़ाइल मौजूद है
- जांचें कि `docs/_sidebar.md` मौजूद है
### विकास पर्यावरण सुझाव
### विकास वातावरण सुझाव
- HTML परियोजनाओं के लिए VS Code में Live Server एक्सटेंशन का उपयोग करें
- संगत स्वरूपण के लिए ESLint और Prettier एक्सटेंशन इंस्टॉल करें
- जावास्क्रिप्ट डिबगिंग के लिए ब्राउज़र DevTools का उपयोग करें
- Vue परियोजनाओं के लिए Vue DevTools ब्राउज़र एक्सटेंशन इंस्टॉल करें
- सुसंगत स्वरूपण के लिए ESLint और Prettier एक्सटेंशन स्थापित करें
- JavaScript डिबगिंग के लिए ब्राउज़र DevTools का उपयोग करें
- Vue परियोजनाओं के लिए Vue DevTools ब्राउज़र एक्सटेंशन स्थापित करें
### प्रदर्शन विचार
- बड़ी संख्या में अनुवादित फाइलें (50+ भाषाएँ) होने से पूर्ण क्लोन बड़े होते हैं
- केवल सामग्री पर काम करने पर shallow clone का उपयोग करें: `git clone --depth 1`
- अंग्रेज़ी सामग्री पर काम करते समय अनुवादों को खोज से बाहर रखें
- पहला रन (npm install, Vite निर्माण) धीमा हो सकता है
- अनुवादित फाइलों की संख्या अधिक (50+ भाषाएँ) होने के कारण पूर्ण क्लोन बड़े होते हैं
- केवल सामग्री पर काम करने के लिए शैलो क्लोन का उपयोग करें: `git clone --depth 1`
- अंग्रेज़ी सामग्री पर काम करते समय अनुवादों को खोजों से बाहर रखें
- पहले रन पर निर्माण प्रक्रियाएं धीमी हो सकती हैं (npm install, Vite निर्माण)
## सुरक्षा विचार
### पर्यावरण चर
- API कुंज कभी भी रिपॉजिटरी में कमिट न करें
- `.env` फाइलों का उपयोग करें (पहले से `.gitignore` में शामिल)
- आवश्यक पर्यावरण चर परियोजना README में दस्तावेजित करें
- API कुंजियाँ कभी भी रिपॉजिटरी में कमिट न करें
- `.env`ाइलों का उपयोग करें (जो `.gitignore` में शामिल हैं)
- परियोजना README में आवश्यक पर्यावरण वेरिएबल दस्तावेजित करें
### Python परियोजनाएं
- वर्चुअल एनवायरनमेंट का उपयोग करें: `python -m venv venv`
- वर्चुअल पर्यावरण का उपयोग करें: `python -m venv venv`
- निर्भरताओं को अपडेट रखें
- GitHub टोकन न्यूनतम आवश्यक अनुमतियाँ रखे
- GitHub टोकन में न्यूनतम आवश्यक अनुमतियां होनी चाहिए
### GitHub Models एक्सेस
- GitHub Models के लिए Personal Access Tokens (PAT) आवश्यक
- टोकन पर्यावरण चरों के रूप में संग्रहीत करें
- टोकन या क्रेडेंशियल कभी कमिट न करें
- GitHub Models के लिए व्यक्तिगत एक्सेस टोकन (PAT) आवश्यक
- टोकन को पर्यावरण चर के रूप में स्टोर करें
- टोकन या प्रमाणीकरण जानकारी कभी कमिट न करें
## अतिरिक्त नोट्स
### लक्षित दर्शक
- वेब विकास के पूर्ण शुरुआत करने वाले
- छात्र और स्व-अध्ययनकर्ता
- कक्षाओं में पाठ्यक्रम का उपयोग करने वाले शिक्षक
- सामग्री पहुँचनीयता और धीरे-धीरे कौशल निर्माण के लिए डिज़ाइन की गई है
- वेब विकास के पूर्ण शुरुआत
- छात्र और स्व-शिक्षार्थी
- शिक्षक जो कक्षाओं में पाठ्यक्रम का उपयोग करते हैं
- सामग्री पहुँच योग्यता और क्रमिक कौशल निर्माण के लिए डिज़ाइन की गई है
### शैक्षिक दर्शन
- परियोजना-आधारित शिक्षण दृष्टिकोण
- बार-बार ज्ञान जांच (क्विज़)
- हाथों-हाथ कोडिंग अभ्यास
- व्यावहारिक कोडिंग अभ्यास
- वास्तविक दुनिया के अनुप्रयोग उदाहरण
- फ्रेमवर्क से पहले मूल बातें पर ध्यान केंद्रित
- फ्रेमवर्क से पहले मूल सिद्धांतों पर ध्यान केंद्रित
### रिपॉजिटरी रखरखाव
### रिपॉजिटरी देखरेख
- सक्रिय शिक्षार्थी और योगदानकर्ता समुदाय
- निर्भरताओं और सामग्री का नियमित अपडेट
- मुद्दों और चर्चाओं पर रखरखावकर्ताओं द्वारा निगरानी
- अनुवाद अपडेट GitHub Actions द्वारा स्वचालित
- डेपेंडेंसी और सामग्री का नियमित अपडेट
- मुद्दों और चर्चाओं की मॉनिटरिंग रख-रखाव टीम द्वारा
- अनुवाद अपडेट GitHub Actions के द्वारा स्वचालित
### संबंधित संसाधन
- [Microsoft Learn modules](https://docs.microsoft.com/learn/)
- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/)
- शिक्षार्थियों के लिए सिफारिश की गई [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- अतिरिक्त कोर्स: जनरेटिव AI, डेटा साइंस, ML, IoT पाठ्यक्रम उपलब्ध
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) शिक्षार्थियों के लिए अनुशंसित
- अतिरिक्त पाठ्यक्रम: जनरेटिव AI, डेटा साइंस, ML, IoT पाठ्यक्रम उपलब्ध
### विशिष्ट परियोजनाओं के साथ काम करना
व्यक्तिगत परियोजनाओं के विस्तृत निर्देशों के लिए, निम्न README फ़ाइल देखें:
व्यक्तिगत परियोजनाओं पर विस्तृत निर्देशों के लिए, संबंधित README फाइलों को देखें:
- `quiz-app/README.md` - Vue 3 क्विज़ एप्लिकेशन
- `7-bank-project/README.md` - प्रमाणीकरण के साथ बैंकिंग एप्लिकेशन
- `5-browser-extension/README.md` - ब्राउज़र एक्सटेंशन विकास
- `6-space-game/README.md` - कैनवास-आधारित गेम विकास
- `9-chat-project/README.md` - AI चैट सहायक परियोजना
- `6-space-game/README.md` - कैनवास आधारित गेम विकास
- `9-chat-project/README.md` - AI चैट असिस्टेंट परियोजना
### मोनोरिपो संरचना
### मुनोरेपो संरचना
यह पारंपरिक मोनोरिपो नहीं है, यह रिपॉजिटरी कई स्वतंत्र परियोजनाओं को शामिल करता है:
- प्रत्येक लेसन स्वतंत्र है
- परियोजनाएं निर्भरताएं साझा नहीं करतीं
- व्यक्तिगत परियोजनाओं पर बिना दूसरे प्रभावित हुए काम करें
- पूर पाठ्यक्रम अनुभव के लिए पूरी रिपॉजिटरी क्लोन करें
यह पारंपरिक मुनोरेपो नहीं है, लेकिन इस रिपॉजिटरी में कई स्वतंत्र परियोजनाएं हैं:
- प्रत्येक पाठ स्वतंत्र है
- परियोजनाओं के बीच निर्भरता साझा नहीं होती
- एक परियोजना पर काम करते हुए अन्य प्रभावित नहीं होते
- पूर पाठ्यक्रम अनुभव के लिए पूरी रिपॉजिटरी क्लोन करें
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**अस्वीकरण**:
यह दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) का उपयोग करके अनूदित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवादों में त्रुटियाँ या अशुद्धियाँ हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में ही प्रामाणिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए पेशेवर मानवीय अनुवाद की सिफारिश की जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या मिसइंटरप्रिटेशन के लिए हम जिम्मेदार नहीं हैं।
यह दस्तावेज़ [Co-op Translator](https://github.com/Azure/co-op-translator) एआई अनुवाद सेवा का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वत: अनुवादों में त्रुटियां या गलतियाँ हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में ही प्राधिकृत स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सलाह दी जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम उत्तरदायी नहीं हैं।
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -1,7 +1,7 @@
{
"1-getting-started-lessons/1-intro-to-programming-languages/README.md": {
"original_hash": "bec5e35642176d9e483552bfc82996d8",
"translation_date": "2026-03-06T14:34:54+00:00",
"original_hash": "d5eeb6e975b5864d8da52d4a41941f8d",
"translation_date": "2026-03-27T19:00:53+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "ja"
},
@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-06T14:50:22+00:00",
"translation_date": "2026-03-27T19:10:31+00:00",
"source_file": "AGENTS.md",
"language_code": "ja"
},

@ -2,56 +2,56 @@
## プロジェクト概要
これは初心者向けのWeb開発の基礎を教えるための教育カリキュラムリポジトリです。このカリキュラムはMicrosoft Cloud Advocatesによって開発された包括的な12週間コースで、JavaScript、CSS、HTMLをカバーする24の実践的なレッスンを含みます。
これは初心者にウェブ開発の基礎を教えるための教育カリキュラムリポジトリです。カリキュラムは Microsoft Cloud Advocates によって開発された包括的な12週間のコースで、JavaScript、CSS、HTML を扱う24の実践的なレッスンを特徴としています。
### 主な構成要素
### 主なコンポーネント
- **教育コンテンツ**: プロジェクトベースのモジュールに整理された24の構造化されたレッスン
- **実践プロジェクト**: テラリウム、タイピングゲーム、ブラウザ拡張機能、スペースゲーム、バンキングアプリ、コードエディター、AIチャットアシスタント
- **インタラクティブクイズ**: 各3問の48のクイズレッスン前後の評価
- **多言語サポート**: GitHub Actionsを使用した50以上の言語への自動翻訳
- **技術スタック**: HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、PythonAIプロジェクト向け
- <strong>教育コンテンツ</strong>: プロジェクトベースのモジュールに構成された24の体系的なレッスン
- <strong>実践プロジェクト</strong>: テラリウム、タイピングゲーム、ブラウザー拡張機能、宇宙ゲーム、銀行アプリ、コードエディター、AIチャットアシスタント
- <strong>インタラクティブクイズ</strong>: 各3問の48のクイズレッスン前後の評価
- <strong>多言語対応</strong>: GitHub Actions による50以上の言語の自動翻訳
- <strong>技術スタック</strong>: HTML、CSS、JavaScript、Vue.js 3、Vite、Node.js、Express、PythonAIプロジェクト用
### アーキテクチャ
- レッスンベースの構造をもつ教育リポジトリ
- 各レッスンフォルダーにはREADME、コード例、解答が含まれる
- 独立したプロジェクトは別ディレクトリに配置quiz-app、各レッスンプロジェクト
- GitHub Actionsco-op-translatorによる翻訳システム
- Docsifyを通じて文書配信、PDF版も提供
- 各レッスンフォルダーに README、コード例、解答例を含む
- 独立したプロジェクトは別ディレクトリに配置quiz-app、各レッスンプロジェクト)
- GitHub Actionsco-op-translatorを用いた翻訳システム
- Docsify でドキュメント配信および PDF での提供
## セットアップコマンド
このリポジトリは主に教育コンテンツの利用を目的としています。特定のプロジェクトで作業する場合は次の通りです:
このリポジトリは主に教育コンテンツの参照用です。特定のプロジェクトに取り組む際は以下を参照してください。
### メインリポジトリセットアップ
### メインリポジトリセットアップ
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### クイズアプリのセットアップVue 3 + Vite
### クイズアプリセットアップ (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # 開発サーバーを起動する
npm run build # 本番用にビルドする
npm run lint # ESLintを実行する
npm run dev # 開発サーバーを起動
npm run build # 本番用にビルド
npm run lint # ESLintを実行
```
### バンクプロジェクトAPINode.js + Express
### 銀行プロジェクトAPI (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # APIサーバーを起動
npm run lint # ESLintを実行
npm run format # Prettierでフォーマット
npm start # APIサーバーを起動する
npm run lint # ESLintを実行する
npm run format # Prettierでフォーマットする
```
### ブラウザ拡張機能プロジェクト
### ブラウザ拡張機能プロジェクト
```bash
cd 5-browser-extension/solution
@ -59,12 +59,12 @@ npm install
# ブラウザ固有の拡張機能読み込み手順に従ってください
```
### スペースゲームプロジェクト
### 宇宙ゲームプロジェクト
```bash
cd 6-space-game/solution
npm install
# index.htmlをブラウザで開くか、Live Serverを使用してください
# ブラウザでindex.htmlを開くか、Live Serverを使用してください
```
### チャットプロジェクトPythonバックエンド
@ -80,33 +80,33 @@ python api.py
### コンテンツ寄稿者向け
1. リポジトリをGitHubアカウントに**フォーク**する
2. フォークをローカルに**クローン**する
3. 変更用に**新しいブランチ**を作成する
4. レッスンコンテンツやコード例を編集する
5. 関連プロジェクトディレクトリでコード変更をテストする
6. コントリビューションガイドラインに従ってプルリクエストを送
1. リポジトリを GitHub のアカウントに <strong>フォーク</strong> する
2. フォークしたリポジトリをローカルに <strong>クローン</strong> する
3. 変更用<strong>新しいブランチ</strong> を作成する
4. レッスンの内容やコード例を編集する
5. 関連プロジェクトディレクトリでコード変更をテストする
6. 貢献ガイドラインに従いプルリクエストを提出す
### 学習者向け
1. リポジトリをフォークまたはクローンする
2. レッスンディレクトリを順に進む
3. 各レッスンのREADMEファイルを読む
4. https://ff-quizzes.netlify.app/web/ でレッスン前のクイズを完了す
5. レッスンフォルダ内のコード例を進め
2. レッスンディレクトリを順に進む
3. 各レッスンの README を読む
4. https://ff-quizzes.netlify.app/web/ でレッスン前クイズを受け
5. レッスンフォルダ内のコード例を実践す
6. 課題やチャレンジを完了する
7. レッスン後クイズを受ける
7. レッスン後クイズを受ける
### ライブ開発
- **ドキュメント**: ルートディレクトリ`docsify serve` を実行ポート3000
- **クイズアプリ**: quiz-appディレクトリで `npm run dev` を実行
- **プロジェクト**: HTMLプロジェクトにはVS Code Live Server拡張を使用
- <strong>ドキュメント</strong>: ルート`docsify serve` を実行ポート3000
- <strong>クイズアプリ</strong>: quiz-appディレクトリで `npm run dev` を実行
- <strong>プロジェクト</strong>: VS Code Live Server 拡張機能を使用HTMLプロジェクト用
- **APIプロジェクト**: 各APIディレクトリで `npm start` を実行
## テスト手順
### クイズアプリテスト
### クイズアプリテスト
```bash
cd quiz-app
@ -114,84 +114,84 @@ npm run lint # コードスタイルの問題をチェックする
npm run build # ビルドが成功することを確認する
```
### バンクAPIのテスト
### 銀行APIテスト
```bash
cd 7-bank-project/api
npm run lint # コードスタイルの問題をチェックする
node server.js # サーバーがエラーなく起動することを確認する
npm run lint # コードスタイルの問題を確認する
node server.js # エラーなくサーバーが起動するか検証する
```
### 一般的なテスト方針
- 包括的な自動テストはなく教育用リポジトリです
- 手動テストでは次を重点的に行います:
- コード例がエラーなく動作すること
- ドキュメント内リンクが正しく機能すること
- プロジェクトのビルドが正常に完了すること
- コード例がベストプラクティスに従っていること
- 包括的な自動テストはない教育リポジトリです
- 手動テストは以下に着目:
- コード例がエラーなく実行できるか
- ドキュメント内のリンクが正しく動作するか
- プロジェクトビルドが正常に完了するか
- 例がベストプラクティスに沿っているか
### 提出前チェック
- package.jsonのあるディレクトリで`npm run lint`を実行
- マークダウンリンクの有効性を確認
- ブラウザまたはNode.jsでコード例をテスト
- 翻訳が構造を維持しているか確認
- package.json のあるディレクトリで `npm run lint` を実行
- Markdownリンクの有効性を検証
- ブラウザまたは Node.js でコード例をテスト
- 翻訳が正しい構造を保持していることを確認
## コードスタイルガイドライン
### JavaScript
- 最新のES6+構文を使用
- プロジェクトに提供された標準ESLint設定に従う
- 教育のために意味のある変数・関数名を使う
- 学習者向けにコンセプトを説明するコメントを追加
- 設定されている場合はPrettierで整形
- 最新の ES6+ 構文を使用
- プロジェクトで提供される標準 ESLint 設定を遵守
- 教育上わかりやすい変数名・関数名を使用
- 概念説明のコメントを追加
- Prettier でフォーマット(設定がある場合)
### HTML/CSS
- セマンティックなHTML5要素を使用
- レスポンシブデザインの原則を適用
- セマンティックなHTML5要素
- レスポンシブデザインの原則
- 明確なクラス命名規則
- CSS技術について学習者向けにコメントを付与
- CSS技術についての説明コメント
### Python
- PEP 8スタイルガイドラインに従う
- 分かりやすく教育的なコード例
- 学習支援として型ヒントを使
- PEP 8 スタイルガイドに準拠
- 教育的にわかりやすいコード例
- 学習支援のための型ヒントも活
### Markdownドキュメント
- 明確な見出し階層
- 言語指定ありのコードブロック
- 言語指定のコードブロック
- 追加リソースへのリンク
- `images/`ディレクトリ内のスクリーンショットや画像
- アクセシビリティのための画像のaltテキスト
- `images/` ディレクトリのスクリーンショット、画像
- アクセシビリティのための代替テキスト
### ファイル構成
- レッスンは連番1-getting-started-lessons、2-js-basicsなど
- 各プロジェクトに`solution/`や`start/`、`your-work/`ディレクトリを配置
- 画像はレッスンごとの`images/`フォルダに保存
- 翻訳は`translations/{language-code}/`構造で管理
- レッスンは順番に番号付け1-getting-started-lessons、2-js-basics 等
- 各プロジェクトに `solution/`、多くは `start/` または `your-work/` ディレクトリ
- 画像はレッスン固有の `images/` フォルダに格納
- 翻訳は `translations/{language-code}/` 構造
## ビルドとデプロイ
### クイズアプリのデプロイAzure Static Web Apps
### クイズアプリのデプロイ (Azure Static Web Apps)
quiz-appはAzure Static Web Appsデプロイ向けに構成されています
quiz-app は Azure Static Web Apps 用に設定済み
```bash
cd quiz-app
npm run build # dist/ フォルダを作成す
# main へのプッシュ時に GitHub Actions ワークフローを通じてデプロイする
npm run build # dist/フォルダを作成しま
# mainブランチへのプッシュ時にGitHub Actionsワークフローを通じてデプロイします
```
Azure Static Web Appsの設定:
- **App location**: `/quiz-app`
- **Output location**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
Azure Static Web Apps の設定:
- <strong>アプリの場所</strong>: `/quiz-app`
- <strong>出力場所</strong>: `dist`
- <strong>ワークフロー</strong>: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### ドキュメントPDF生成
@ -203,76 +203,76 @@ npm run convert # docs から PDF を生成する
### Docsifyドキュメント
```bash
npm install -g docsify-cli # Docsifyをグローバルにインストールする
docsify serve # localhost:3000でサーブする
npm install -g docsify-cli # Docsify をグローバルにインストールする
docsify serve # localhost:3000 でサーブする
```
### プロジェクト別ビルド
各プロジェクトディレクトリに独自のビルドプロセスがある場合あり:
- Vueプロジェクト:`npm run build`で本番用バンドルを作成
- 静的プロジェクト:ビルド不要でファイル直接配信
各プロジェクトディレクトリに特有のビルドプロセスあり:
- Vue プロジェクト: `npm run build` で本番バンドル作成
- 静的プロジェクト: ビルド不要、ファイルを直接配信
## プルリクエストガイドライン
### タイトル形式
変更箇所が分かりやすい明確なタイトルを使う
- `[Quiz-app] レッスンXの新クイズ追加`
- `[Lesson-3] Terrariumプロジェクトのタイプミス修正`
変更箇所をわかりやすく明示
- `[Quiz-app] レッスンXの新しいクイズ追加`
- `[Lesson-3] テラリウムプロジェクトのタイプミス修正`
- `[Translation] レッスン5のスペイン語翻訳追加`
- `[Docs] セットアップ手順更新`
### 必須チェック
PR提出前に
PR提出前に実施
1. **コード品質**
- 該当プロジェクトディレクトリで`npm run lint`実行
- すべての警告・エラーを修正
1. <strong>コード品質</strong>:
- 関連プロジェクトで `npm run lint`実行
- ての警告・エラーを修正
2. **ビルド検証**
- 適用可能なら`npm run build`を実行
- ビルドエラーなしを確
2. <strong>ビルド確認</strong>:
- 該当する場合 `npm run build` を実行
- ビルドエラーなしを確
3. **リンク検証**
- 全マークダウンリンクをテスト
- 画像参照が正しいか確認
3. <strong>リンク検証</strong>:
- 全Markdownリンクをテスト
- 画像参照の動作確認
4. **内容レビュー**
- スペル文法の校正
- コード例が正しく教育的であることの確認
- 翻訳が原文の意味を維持しているかチェック
4. <strong>内容レビュー</strong>:
- スペル文法の校正
- コード例の正確さと教育的妥当性
- 翻訳が原文の意味を維持しているか確認
### コントリビューション要
### 貢献条
- Microsoft CLAに同意初回PRで自動チェック)
- [Microsoft OSS行動規範](https://opensource.microsoft.com/codeofconduct/)を遵守
- 詳細は[CONTRIBUTING.md](./CONTRIBUTING.md)参照
- 必要に応じてPR説明にイシュー番号を記載
- Microsoft CLA に同意初PR時に自動チェック)
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) を遵守
- 詳細は [CONTRIBUTING.md](./CONTRIBUTING.md) 参照
- PR説明に関連issue番号を記載該当時
### レビュー手順
### レビュー体制
- PRはメンテナとコミュニティによるレビュー
- 教育的明確さを重視
- コード例は現行のベストプラクティスに準拠
- 翻訳は正確かつ文化的に適切であることを確認
- PRはメンテナとコミュニティレビュー
- 教育的な明瞭さを優先
- コード例は最新のベストプラクティスに沿うこと
- 翻訳は正確性と文化的適合性を重視してレビュー
## 翻訳システム
### 自動翻訳
- GitHub Actionsでco-op-translatorワークフローを使用
- GitHub Actions と co-op-translator ワークフローを使用
- 50以上の言語へ自動翻訳
- ソースファイルはメインディレクトリに配置
- 翻訳ファイルは`translations/{language-code}/`に配置
- ソースファイルはメインディレクトリ
- 翻訳ファイルは `translations/{language-code}/` に保管
### 手動翻訳改善追加
### 手動翻訳改善追加
1. `translations/{language-code}/`内のファイルを特定
2. 構造を維持しつつ改善を加える
3. コード例が機能する状態を保つ
4. ローカライズされたクイズ内容テスト
2. 構造を崩さず改善を加える
3. コード例が動作し続けるように注意
4. ローカライズされたクイズ内容テスト
### 翻訳メタデータ
@ -293,116 +293,116 @@ CO_OP_TRANSLATOR_METADATA:
### よくある問題
**クイズアプリが起動しない場合**
- Node.jsのバージョンを確認v14以上推奨
- `node_modules`と`package-lock.json`を削除し再度 `npm install`
- ポート競合を確認デフォルトはViteのポート5173
<strong>クイズアプリが起動しない</strong>:
- Node.js のバージョンを確認v14以上推奨
- `node_modules` `package-lock.json` を削除し `npm install` を再実行
- ポート競合(デフォルト Vite ポート 5173をチェック
**APIサーバーが起動しない場合**
- Node.jsのバージョンが必要条件 (node >=10) を満たすか確認
- ポートが既に使用中でないかチェック
- 依存関係が全て`npm install`でインストール済みか確認
**APIサーバーが起動しない**:
- Node.js バージョンは最低 node >=10 であることを確認
- ポートが既に使われていないかチェック
- 依存関係`npm install` 済みか確認
**ブラウザ拡張機能が読み込まれない場合**
- manifest.json の形式が正しいか確認
- ブラウザコンソールのエラーをチェック
- ブラウザ固有の拡張インストール手順に従う
<strong>ブラウザー拡張機能が読み込まれない</strong>:
- manifest.json が正しくフォーマットされてか確認
- ブラウザのコンソールでエラーを確認
- ブラウザ固有の拡張機能インストール手順に従う
**Pythonチャットプロジェクトの問題**
- OpenAIパッケージがインストールされているか確認:`pip install openai`
- GITHUB_TOKEN環境変数が設定されているか確認
- GitHub Modelsへのアクセス許可を確認
**Pythonチャットプロジェクトの問題**:
- OpenAI パッケージがインストールされていること: `pip install openai`
- GITHUB_TOKEN 環境変数が設定済みか確認
- GitHub Models へのアクセス権限をチェック
**Docsifyがドキュメントを提供しない**
- docsify-cliをグローバルインストール:`npm install -g docsify-cli`
- リポジトリのルートディレクトリで実行
- `docs/_sidebar.md`が存在するかチェック
**Docsify がドキュメントを配信しない**:
- docsify-cli をグローバルにインストール: `npm install -g docsify-cli`
- リポジトリルートで起動
- `docs/_sidebar.md` が存在しているか確認
### 開発環境のヒント
- HTMLプロジェクトにはVS CodeのLive Server拡張を利
- ESLintとPrettier拡張をインストールして一貫したフォーマットを維持
- JavaScriptのデバッグにブラウザのDevToolsを活用
- VueプロジェクトにはVue DevToolsブラウザ拡張をインストール
- HTMLプロジェクトには VS Code の Live Server 拡張機能を使
- 一貫したフォーマットのため ESLint Prettier 拡張をインストール
- JavaScript のデバッグにブラウザの DevTools を活用
- Vueプロジェクトには Vue DevTools ブラウザ拡張をインストール
### パフォーマンスに関する注意
### パフォーマンス上の注意
- 50以上の言語の翻訳ファイルが多いためフルクローンは大容量
- コンテンツのみ作業するなら浅いクローンを使用:`git clone --depth 1`
- 英語コンテンツ作業時は翻訳ファイルを検索から除外推奨
- 初回実行時のビルド処理は遅い場合ありnpm install、Viteビルド
- 50以上の言語の大量翻訳ファイルによってフルクローンは大きくなる
- コンテンツのみ作業時は浅いクローンで: `git clone --depth 1`
- 英語コンテンツ作業時は翻訳ファイルを検索外にすると高速化
- 初回のビルドプロセスは遅い場合ありnpm install、Viteビルド
## セキュリティに関する注意
## セキュリティ上の考慮
### 環境変数
- APIキーはリポジトリに絶対コミットしないこと
- `.env`ファイルを利用(既に`.gitignore`に設定済み
- 必須の環境変数はプロジェクトREADMEに記載
- APIキーは決してリポジトリにコミットしない
- `.env` ファイルを使用(既に `.gitignore` に設定
- 必要な環境変数はプロジェクトのREADMEに記載
### Pythonプロジェクト
- 仮想環境を使用推奨:`python -m venv venv`
- 仮想環境を使用: `python -m venv venv`
- 依存関係は常に最新に保つ
- GitHubトークンは必要最小限の権限で管理
- GitHub トークンは最小限の権限を付与
### GitHub Modelsアクセス
- GitHub Models利用には個人アクセストークンPATが必要
- GitHub Models のための個人アクセストークンPATが必要
- トークンは環境変数として管理
- トークンや資格情報を絶対にコミットしない
- トークンや認証情報は絶対にコミットしない
## 追加ノート
## その他の注意点
### 対象ユーザー
- Web開発の完全な初心者
- ウェブ開発の完全初心者
- 学生や独学者
- 教室でカリキュラムを使う教師
- アクセシビリティと段階的スキル構築を重視したコンテンツ
- アクセシビリティに配慮しスキルを段階的に積み上げられる内容
### 教育哲学
### 教育方針
- プロジェクトベースの学習アプローチ
- 頻繁な知識チェック(クイズ)
- ハンズオンコーディング演習
- 実世界の応用例
- フレームワーク以前の基礎重視
- 頻繁な理解度チェック(クイズ)
- 実際に手を動かすコーディング演習
- 実世界の応用例を示す
- フレームワークより基礎を重視
### リポジトリ運用
### リポジトリのメンテナンス
- 活発な学習者とコントリビューターコミュニティ
- 学習者や貢献者の活発なコミュニティ
- 依存関係とコンテンツの定期的な更新
- イシュー・ディスカッションはメンテナが監視
- 翻訳更新はGitHub Actionsで自動化
- メンテナが課題や議論を監視
- GitHub Actions による翻訳更新の自動化
### 関連リソース
- [Microsoft Learnモジュール](https://docs.microsoft.com/learn/)
- [Student Hubリソース](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)(学習者に推奨)
- 追加コース生成AI、データサイエンス、機械学習、IoTカリキュラムなど
- [Microsoft Learn モジュール](https://docs.microsoft.com/learn/)
- [Student Hub リソース](https://docs.microsoft.com/learn/student-hub/)
- 学習者に推奨される [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- ジェネレーティブ AI、データサイエンス、ML、IoT の追加コースも利用可能
### 各プロジェクトの作業
### 特定プロジェクトの利用
個別プロジェクトの詳細手順はそれぞれのREADMEを参照:
- `quiz-app/README.md` - Vue 3クイズアプリ
- `7-bank-project/README.md` - 認証付きバンキングアプリ
- `5-browser-extension/README.md` - ブラウザ拡張機能開発
- `6-space-game/README.md` - Canvasベースゲーム開発
各プロジェクトの詳細は以下の README ファイルを参照:
- `quiz-app/README.md` - Vue 3 クイズアプリケーション
- `7-bank-project/README.md` - 認証付き銀行アプリ
- `5-browser-extension/README.md` - ブラウザ拡張機能開発
- `6-space-game/README.md` - Canvasベースゲーム
- `9-chat-project/README.md` - AIチャットアシスタントプロジェクト
### モノレポ構
### モノレポ構
伝統的なモノレポではありませんが複数独立プロジェクトを含む:
- 各レッスンは自己完結
- プロジェクト間で依存関係を共有しない
- それぞれ別個に作業可能
- フルカリキュラム体験のためにはリポジトリ全体をクローン
伝統的なモノレポではありませんが複数独立プロジェクトを含むリポジトリです
- 各レッスンは独立
- プロジェクト同士で依存性は共有しない
- 個別プロジェクトに集中可能
- カリキュラム全体体験には全リポジトリのクローンが推奨される
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責事項**
本書類はAI翻訳サービス「Co-op Translator」https://github.com/Azure/co-op-translatorを使用して翻訳されました。正確性に努めておりますが、自動翻訳には誤りや不正確な部分が含まれる場合があります。原文の言語による文書を権威ある情報源としてご参照ください。重要な情報については、専門の人間による翻訳を推奨いたします。本翻訳の利用により生じた誤解や誤訳について、一切の責任を負いかねますのでご了承ください
**免責事項**:
本書類は AI 翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確さを期していますが、自動翻訳には誤りや不正確な部分が含まれる場合があることをご理解ください。原文のネイティブ言語による資料が権威ある情報源とみなされるべきです。重要な情報については、専門の人間翻訳を推奨します。本翻訳の使用により生じた誤解や誤訳について、当方は一切の責任を負いません
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -1,7 +1,7 @@
{
"1-getting-started-lessons/1-intro-to-programming-languages/README.md": {
"original_hash": "bec5e35642176d9e483552bfc82996d8",
"translation_date": "2026-03-06T14:41:27+00:00",
"original_hash": "d5eeb6e975b5864d8da52d4a41941f8d",
"translation_date": "2026-03-27T19:04:26+00:00",
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md",
"language_code": "ko"
},
@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-03-06T14:51:32+00:00",
"translation_date": "2026-03-27T19:11:26+00:00",
"source_file": "AGENTS.md",
"language_code": "ko"
},

@ -2,56 +2,56 @@
## 프로젝트 개요
이 저장소는 초보자에게 웹 개발 기본을 가르치기 위한 교육 커리큘럼 저장소입니다. 커리큘럼은 Microsoft Cloud Advocates가 개발한 12주 과정으로, JavaScript, CSS, HTML을 다루는 24개의 실습 중심 수업으로 구성되어 있습니다.
이 저장소는 초보자를 위한 웹 개발 기초 교육 커리큘럼 저장소입니다. 본 커리큘럼은 Microsoft Cloud Advocates가 개발한 12주 과정이며, JavaScript, CSS, HTML을 다루는 24개의 실습 중심 수업으로 구성되어 있습니다.
### 주요 구성 요소
- **교육 콘텐츠**: 프로젝트 기반 모듈로 조직된 24개의 체계적인 수업
- **실습 프로젝트**: 테라리움, 타자 게임, 브라우저 확장, 우주 게임, 뱅킹 앱, 코드 편집기, AI 채팅 어시스턴트
- **대화형 퀴즈**: 각 3문항씩 48개의 퀴즈 (수업 전/후 평가)
- **다국어 지원**: GitHub Actions를 통한 50개 이상 언어 자동 번역
- **교육 콘텐츠**: 프로젝트 기반 모듈로 구성된 24개의 체계적인 수업
- **실습 프로젝트**: 테라리움, 타이핑 게임, 브라우저 확장 프로그램, 우주 게임, 은행 앱, 코드 에디터, AI 채팅 어시스턴트
- **인터랙티브 퀴즈**: 수업 전후 평가용 3문항씩 48개의 퀴즈
- **다국어 지원**: GitHub Actions를 통한 50개 이상 언어 자동 번역
- **기술 스택**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI 프로젝트용)
### 아키텍처
- 수업 기반 구조의 교육 저장소
- 각 수업 폴더는 README, 코드 예제 솔루션 포함
- 별도의 디렉터리에 독립 프로젝트 존재 (quiz-app, 다양한 수업 프로젝트)
- GitHub Actions(co-op-translator)를 용한 번역 시스템
- Docsify를 통한 문서 제공 및 PDF로도 이용 가능
- 수업 기반 구조의 교육 저장소
- 각 수업 폴더는 README, 코드 예제, 솔루션 포함
- 별도의 디렉터리에 독립 프로젝트(quiz-app 및 다양한 수업 프로젝트)
- GitHub Actions(co-op-translator)를 용한 번역 시스템
- Docsify를 사용한 문서 제공 및 PDF 형식으로 이용 가능
## 설치 명령어
이 저장소는 주로 교육 콘텐츠 소비를 위한 것입니다. 특정 프로젝트 작업을 원할 경우:
이 저장소는 주로 교육 콘텐츠 소비용입니다. 특정 프로젝트 작업 시:
### 메인 저장소 설
### 메인 저장소 설
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### 퀴즈 앱 설 (Vue 3 + Vite)
### 퀴즈 앱 설 (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # 개발 서버 시작
npm run build # 프로덕션 빌드
npm run build # 프로덕션 빌드
npm run lint # ESLint 실행
```
### 뱅크 프로젝트 API (Node.js + Express)
### 은행 프로젝트 API (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # API 서버 시작
npm run lint # ESLint 실행
npm run format # Prettier로 포맷
npm run format # Prettier로 포맷하기
```
### 브라우저 확장 프로젝트
### 브라우저 확장 프로그램 프로젝트
```bash
cd 5-browser-extension/solution
@ -64,7 +64,7 @@ npm install
```bash
cd 6-space-game/solution
npm install
# 브라우저에서 index.html을 열거나 Live Server를 사용하세요
# index.html을 브라우저에서 열거나 Live Server를 사용하세요
```
### 채팅 프로젝트 (Python 백엔드)
@ -80,28 +80,28 @@ python api.py
### 콘텐츠 기여자용
1. **저장소를 포크**하여 자신의 GitHub 계정으로 복사
2. **포크한 저장소를 로컬에 클론**
3. **변경 사항 작업용 브랜치 생성**
4. 수업 콘텐츠 또는 코드 예제 변경
5. 관련 프로젝트 디렉터리에서 코드 변경 사항 테스트
6. 기여 지침에 따라 풀 리퀘스트 제출
1. 저장소를 GitHub 계정으로 <strong>포크</strong>합니다.
2. 포크한 저장소를 로컬에 <strong>클론</strong>합니다.
3. 변경사항을 위한 <strong>새로운 브랜치</strong>를 만듭니다.
4. 수업 콘텐츠나 코드 예제를 수정합니다.
5. 관련 프로젝트 디렉터리에서 코드 변경 사항 테스트합니다.
6. 기여 가이드라인에 따라 풀 리퀘스트를 제출합니다.
### 학습자용
1. 저장소를 포크하거나 클론
2. 수업 디렉터리를 순서대로 탐색
3. 각 수업의 README 파일 읽기
4. https://ff-quizzes.netlify.app/web/ 에서 수업 전 퀴즈 완료
5. 수업 폴더 내 코드 예제 실습
6. 과제 및 챌린지 완료
7. 수업 후 퀴즈 응시
1. 저장소를 포크하거나 클론합니다.
2. 수업 디렉터리를 순차적으로 탐색합니다.
3. 각 수업 README 파일을 읽습니다.
4. https://ff-quizzes.netlify.app/web/ 에서 수업 전 퀴즈를 풉니다.
5. 수업 폴더 내의 코드 예제를 진행합니다.
6. 과제와 챌린지를 완료합니다.
7. 수업 후 퀴즈를 풉니다.
### 실시간 개발
- **문서**: 루트에서 `docsify serve` 실행 (포트 3000)
- **퀴즈 앱**: quiz-app 디렉터리에서 `npm run dev` 실행
- **프로젝트**: HTML 프로젝트는 VS Code Live Server 확장 사용
- <strong>문서</strong>: 루트에서 `docsify serve` 명령 실행 (포트 3000)
- **퀴즈 앱**: 퀴즈 앱 디렉터리에서 `npm run dev` 실행
- <strong>프로젝트들</strong>: HTML 프로젝트는 VS Code Live Server 확장 사용
- **API 프로젝트**: 해당 API 디렉터리에서 `npm start` 실행
## 테스트 지침
@ -110,88 +110,88 @@ python api.py
```bash
cd quiz-app
npm run lint # 코드 스타일 문제 확인하세요
npm run build # 빌드 성공 여부를 검증하세요
npm run lint # 코드 스타일 문제 확인
npm run build # 빌드 성공 여부 확인
```
### 뱅크 API 테스트
### 은행 API 테스트
```bash
cd 7-bank-project/api
npm run lint # 코드 스타일 문제 확인
node server.js # 오류 없이 서버가 시작되는지 확인
npm run lint # 코드 스타일 문제 확인합니다
node server.js # 서버가 오류 없이 시작되는지 확인합니다
```
### 일반 테스트 방식
- 이 저장소는 포괄적인 자동화 테스트가 없는 교육 저장소입니다
- 수동 테스트는 다음에 중:
- 코드 예제 오류 없이 실행
- 문서 내 링크 정상 작동
- 프로젝트 빌드 성공 완료
- 예제는 베스트 프랙티스 준수
- 이 저장소는 포괄적인 자동화 테스트 없이 교육용임
- 수동 테스트는 다음에 중:
- 코드 예제 오류 없이 실행되는지
- 문서 내 링크 정상 작동하는지
- 프로젝트 빌드가 성공하는지
- 예제가 최선의 관행을 따르는지
### 사전 제출 점검
### 제출 점검
- package.json 있는 디렉터리에서 `npm run lint` 실행
- 마크다운 링크 유효성 확인
- 브라우저 Node.js에서 코드 예제 테스트
- 번역 내용이 올바른 구조 유지하는지 점검
- package.json 있는 디렉터리에서 `npm run lint` 실행
- 마크다운 링크 유효성 확인
- 브라우저 또는 Node.js에서 코드 예제 테스트
- 번역본의 구조가 올바르게 유지되는지 확인
## 코드 스타일 지침
## 코드 스타일 가이드라인
### JavaScript
- 최신 ES6+ 문 사용
- 프로젝트에 제공된 표준 ESLint 설정 준수
- 교육적 명확성을 위한 의미 있는 변수 및 함수명 사용
- 학습자를 위한 개념 설명 주석 추가
- 구성된 경우 Prettier로 포맷팅
- 최신 ES6+ 문 사용
- 프로젝트 표준 ESLint 설정 준수
- 교육 목적에 맞는 의미 있는 변수 및 함수명 사용
- 학습자를 위한 개념 설명 주석 추가
- Prettier가 설정된 곳에서는 코드 포맷팅 적용
### HTML/CSS
- 시맨틱 HTML5 요소 사용
- 반응형 디자인 원칙 적용
- 명확한 클래스 명명 규칙
- 학습자용 CSS 기술 설명 주석
- 반응형 디자인 원칙 준수
- 명확한 클래스 명명 규칙 사용
- 학습자를 위한 CSS 기법 설명 주석 포함
### Python
- PEP 8 스타일 가이드 준수
- 명확하고 교육적인 코드 예제
- 학습에 도움이 되는 타입 힌트 추가
- 명확하고 교육적인 코드 예제 제공
- 학습에 도움이 되는 곳에 타입 힌트 사용
### 마크다운 문서
### 마크다운 문서
- 명확한 제목 계층 구조
- 언어 지정 코드 블록
- 추가 자료 링크 제공
- `images/` 디렉터리 내 스크린샷 및 이미지
- 접근성 위한 이미지 대체 텍스트 포함
- 언어 명시가 있는 코드 블록
- 추가 자료 링크 포함
- `images/` 폴더 내 스크린샷 및 이미지
- 접근성 향상을 위한 이미지 대체 텍스트
### 파일 구성
- 수업은 순차 번호 매김 (1-getting-started-lessons, 2-js-basics 등)
- 각 프로젝트는 `solution/` 종종 `start/` 또는 `your-work/` 디렉터리 포함
- 수업은 순차적으로 번호 부여 (예: 1-getting-started-lessons, 2-js-basics 등)
- 각 프로젝트는 `solution/`, 종종 `start/` 또는 `your-work/` 디렉터리 포함
- 수업별 `images/` 폴더에 이미지 저장
- `translations/{language-code}/` 구조의 번역 파일
- 번역본은 `translations/{language-code}/` 구조로 분류
## 빌드 및 배포
### 퀴즈 앱 배포 (Azure Static Web Apps)
퀴즈 앱은 Azure Static Web Apps 배포용으로 설정됨:
퀴즈 앱은 Azure Static Web Apps용으로 구성되어 있습니다:
```bash
cd quiz-app
npm run build # dist/ 폴더를 생성합니다
# main 브랜치에 푸시 때 GitHub Actions 워크플로를 통해 배포합니다
# main 브랜치에 푸시 때 GitHub Actions 워크플로를 통해 배포합니다
```
Azure Static Web Apps 구성:
- **앱 위치**: `/quiz-app`
- **출력 위치**: `dist`
- **워크플로우**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
- <strong>워크플로우</strong>: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### 문서 PDF 생성
@ -203,24 +203,24 @@ npm run convert # docs에서 PDF 생성
### Docsify 문서
```bash
npm install -g docsify-cli # Docsify를 전역으로 설치합니다
npm install -g docsify-cli # Docsify를 전역 설치합니다
docsify serve # localhost:3000에서 서비스합니다
```
### 프로젝트별 빌드
각 프로젝트 디렉터리는 자체 빌드 프로세스 가질 수 있음:
각 프로젝트 디렉터리에 고유 빌드 프로세스가 있을 수 있음:
- Vue 프로젝트: `npm run build`로 프로덕션 번들 생성
- 정적 프로젝트: 빌드 단계 없이 파일 직접 서빙
- 정적 프로젝트: 빌드 단계 없이 파일 직접 제공
## 풀 리퀘스트 지침
## 풀 리퀘스트 가이드라인
### 제목 형식
변경 영역을 명확히 나타내는 제목 사용:
- `[Quiz-app] 레슨 X용 새 퀴즈 추가`
변경 영역을 명확히 나타내는 설명적인 제목 사용:
- `[Quiz-app] 수업 X용 신규 퀴즈 추가`
- `[Lesson-3] 테라리움 프로젝트 오타 수정`
- `[Translation] 레슨 5 스페인어 번역 추가`
- `[Translation] 수업 5 스페인어 번역 추가`
- `[Docs] 설치 지침 업데이트`
### 필수 점검 사항
@ -228,55 +228,55 @@ docsify serve # localhost:3000에서 서비스합니다
PR 제출 전:
1. **코드 품질**:
- 관련 프로젝트 디렉터리에서 `npm run lint` 실행
- 모든 린트 오류 경고 수정
- 영향 받은 프로젝트 디렉터리에서 `npm run lint` 실행
- 모든 린트 오류 경고 수정
2. **빌드 확인**:
- 해당 시 `npm run build` 실행
2. **빌드 검증**:
- 적용 가능한 경우 `npm run build` 실행
- 빌드 오류 없음 확인
3. **링크 검증**:
- 마크다운 내 모든 링크 테스트
- 이미지 참조 정상 작동 확인
- 모든 마크다운 링크 테스트
- 이미지 참조 작동 확인
4. **콘텐츠 검토**:
4. **내용 검토**:
- 맞춤법 및 문법 교정
- 코드 예제 정확하고 교육적임 확인
- 번역이 원문의 의미 유지하는지 검증
- 코드 예제가 올바르고 교육적임 확인
- 번역본 원 의미 유지 점검
### 기여 요
### 기여 요구사항
- Microsoft CLA 동의(첫 PR 자동 검사)
- Microsoft CLA 동의 (첫 PR 자동 검사)
- [Microsoft 오픈 소스 행동 강령](https://opensource.microsoft.com/codeofconduct/) 준수
- 상세 지침은 [CONTRIBUTING.md](./CONTRIBUTING.md) 참고
- 가능 시 PR 설명에 이슈 번호 참조
- 자세한 가이드는 [CONTRIBUTING.md](./CONTRIBUTING.md) 참조
- 관련 이슈 번호 PR 설명에 명시
### 리뷰 프로세스
### 리뷰 절차
- PR은 유지 관리자 및 커뮤니티가 검토
- 교육적 명확성 우선시
- 코드 예제는 최신 베스트 프랙티스 준수 필요
- 유지 관리자 및 커뮤니티가 PR 검토
- 교육적 명료성 우선
- 코드 예제는 현행 최선의 관행 준수
- 번역은 정확성과 문화적 적합성 검토
## 번역 시스템
### 자동 번역
- co-op-translator 워크플로우가 포함된 GitHub Actions 사용
- GitHub Actions의 co-op-translator 워크플로우 사용
- 50개 이상의 언어로 자동 번역
- 원본 파일은 메인 디렉터리에 위치
- 번역 파일은 `translations/{language-code}/`에 위치
- 소스 파일은 메인 디렉터리에 위치
- 번역 파일은 `translations/{language-code}/` 에 저장
### 수동 번역 개선 추가
1. `translations/{language-code}/`에서 파일 찾기
2. 구조를 유지하며 개선 작업
3. 코드 예제가 정상 작동 유지 확인
4. 지역화된 퀴즈 내용 테스트
1. `translations/{language-code}/` 내 파일 위치 파악
2. 구조를 유지하며 개선 작업 수행
3. 코드 예제가 정상적으로 작동하는지 확인
4. 현지화된 퀴즈 콘텐츠 테스트
### 번역 메타데이터
번역 파일에는 메타데이터 헤더 포함:
번역 파일에는 메타데이터 헤더 포함:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -294,115 +294,115 @@ CO_OP_TRANSLATOR_METADATA:
### 흔한 문제
**퀴즈 앱 실행 실패**:
- Node.js 버전 확인 (v14 이상 권장)
- Node.js 버전 확인 (권장 v14 이상)
- `node_modules``package-lock.json` 삭제 후 `npm install` 재실행
- 포트 충돌 확인 (기본: Vite 5173 포트 사용)
**API 서버 실행 안 됨**:
- Node.js 버전 최소 요구사항 충족(node >=10) 확인
- 포트 사용 중인지 점검
- `npm install`로 모든 의존성 설치 여부 확인
**API 서버 시작 실패**:
- Node.js 최소 버전(node >=10) 확인
- 포트 사용 중 여부 확
- 모든 의존성 `npm install`로 설치 완료 확인
**브라우저 확장 불러오기 실패**:
- manifest.json 형식 올바른지 확인
- 브라우저 콘솔에서 오류 점검
- 브라우저별 확장 설치 지침 준수
**브라우저 확장 프로그램 로딩 실패**:
- manifest.json 형식 올바른지 검사
- 브라우저 콘솔 에러 확인
- 브라우저별 확장 프로그램 설치 지침 준수
**Python 채팅 프로젝트 문제**:
- OpenAI 패키지 설치 확인: `pip install openai`
- OpenAI 패키지 설치 여부 확인: `pip install openai`
- GITHUB_TOKEN 환경 변수 설정 확인
- GitHub Models 접근 권한 점검
**Docsify 문서 제공**:
- 전역 docsify-cli 설치: `npm install -g docsify-cli`
**Docsify 문서 제공 안 됨**:
- docsify-cli 글로벌 설치: `npm install -g docsify-cli`
- 저장소 루트에서 실행
- `docs/_sidebar.md` 파일 존재 확인
- `docs/_sidebar.md` 존재 여부 확인
### 개발 환경 팁
- HTML 프로젝트는 VS Code Live Server 확장 활용
- 일관된 포맷을 위한 ESLint 및 Prettier 확장 설치
- JavaScript 디버깅에 브라우저 개발자 도구 사용
- HTML 프로젝트는 VS Code Live Server 확장 사용 권장
- ESLint 및 Prettier 확장 설치하여 꾸준한 코드 포맷 유지
- 브라우저 개발자 도구를 통한 JavaScript 디버깅
- Vue 프로젝트는 Vue DevTools 브라우저 확장 설치
### 성능 고려 사항
- 50개 이상 언어 번역 파일 다수로 전체 클론 시 용량 큼
- 콘텐츠 작업 시는 얕은 복제 사용 권장: `git clone --depth 1`
- 50개 이상 언어 번역 파일 다수로 인해 전체 클론 시 용량 큼
- 콘텐츠 작업 시`git clone --depth 1`를 사용한 얕은 클론 권장
- 영어 콘텐츠 작업 시 번역 파일 검색 제외 권장
- 첫 빌드 시 (npm install, Vite 빌드) 속도 느릴 수 있음
- 빌드 프로세스는 초기 실행 시 (npm 설치, Vite 빌드) 다소 느릴 수 있음
## 보안 고려사항
### 환경 변수
- API 키는 절대 저장소에 커밋 금지
- `.env` 파일 사용(이미 `.gitignore`에 포함)
- API 키는 절대 저장소에 커밋하지 말 것
- `.env` 파일 사용 (이미 `.gitignore`에 포함)
- 프로젝트 README에 필요한 환경 변수 문서화
### Python 프로젝트
- 가상 환경 사용: `python -m venv venv`
- 가상 환경 사용 권장: `python -m venv venv`
- 의존성 최신 상태 유지
- GitHub 토큰 최소 권한 부여
- GitHub 토큰 최소 권한 부여
### GitHub Models 접근
- 개인 액세스 토큰(PAT) 필요
- GitHub Models 사용 위해 개인 접근 토큰(PAT) 필수
- 토큰은 환경 변수로 저장
- 절대 토큰이나 자격 증명 저장소 커밋 금지
- 토큰 및 인증 정보 절대 커밋 금지
## 추가 참고 사항
## 추가 참고사항
### 대상 사용자
- 웹 개발 완전 초보자
- 학생 및 독학자
- 교실에서 커리큘럼 용하는 교사
- 접근성과 점진적 기술 향상에 중점 둔 콘텐츠
- 교실에서 커리큘럼 용하는 교사
- 접근성 및 점진적 실력 향상에 맞게 설계된 콘텐츠
### 교육 철학
- 프로젝트 기반 학습 방법론
- 프로젝트 기반 학습 방
- 빈번한 지식 점검(퀴즈)
- 실습 코딩 연습
- 실제 적용 사례 예시
- 프레임워크보다 기본기에 집중
- 실습 위주의 코딩 연습
- 실세계 적용 사례 제공
- 프레임워크보다 기에 집중
### 저장소 유지 관리
- 활발한 학습자 및 기여자 커뮤니티
- 의존성 및 콘텐츠 정기 업데이트
- 유지관리자가 이슈 및 토론 모니터링
- 번역 업데이트는 GitHub Actions로 자동화
- 의존성 및 콘텐츠 지속적 업데이트
- 유지 관리자 모니터링 하 이슈 및 토론 관리
- GitHub Actions로 번역 자동화
### 관련 리소스
- [Microsoft Learn 모듈](https://docs.microsoft.com/learn/)
- [Student Hub 자료](https://docs.microsoft.com/learn/student-hub/)
- 학습자 추천: [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- 추가 강좌: 생성 AI, 데이터 과학, ML, IoT 커리큘럼 제공
- [학생 허브 리소스](https://docs.microsoft.com/learn/student-hub/)
- 학습자에게 권장되는 [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- 생성형 AI, 데이터 사이언스, ML, IoT 커리큘럼 등의 추가 과정 제공
### 개별 프로젝트 작업
### 특정 프로젝트 작업
개별 프로젝트 관련 자세한 지침은 다음 README 파일 참고:
개별 프로젝트 지침은 각 프로젝트 README 참고:
- `quiz-app/README.md` - Vue 3 퀴즈 애플리케이션
- `7-bank-project/README.md` - 인증 기능 포함 뱅킹 애플리케이션
- `7-bank-project/README.md` - 인증 포함 은행 애플리케이션
- `5-browser-extension/README.md` - 브라우저 확장 개발
- `6-space-game/README.md` - 캔버스 기반 게임 개발
- `9-chat-project/README.md` - AI 채팅 어시스턴트 프로젝트
### 모노레포 구조
전통적 모노레포는 아니지만, 이 저장소에는 여러 독립 프로젝트가 포함됨:
전통적인 모노레포는 아니지만, 이 저장소는 여러 독립 프로젝트로 구성됨:
- 각 수업은 독립적
- 프로젝트 간 의존성 공유 없음
- 개별 프로젝트 작업 시 다른 프로젝트에 영향 없음
- 전체 커리큘럼 체험을 위해 전체 저장소 클론 가능
- 전체 커리큘럼 경험을 위해 전체 저장소 클론 권장
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**면책 조항**:
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 노력하고 있으나, 자동 번역은 오류나 부정확성이 포함될 수 있음을 유의해 주시기 바랍니다. 원문은 해당 언어의 원본 문서가 권위 있는 자료로 간주되어야 합니다. 중요한 정보의 경우, 전문 인간 번역가의 번역을 권장합니다. 본 번역의 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임지지 않습니다.
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 노력하고 있지만, 자동 번역에는 오류나 부정확성이 포함될 수 있음을 알려드립니다. 원문 문서는 권위 있는 출처로 간주되어야 합니다. 중요한 정보에 대해서는 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임지지 않습니다.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Loading…
Cancel
Save