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

pull/1793/head
localizeflow[bot] 3 months ago
parent 9841823f1c
commit ed05b9146a

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-04-06T18:05:49+00:00",
"translation_date": "2026-04-20T15:35:04+00:00",
"source_file": "AGENTS.md",
"language_code": "hi"
},

@ -2,29 +2,29 @@
## परियोजना अवलोकन
यह शुरुआती लोगों को वेब विकास के मूलभूत सिद्धांत सिखाने के लिए एक शैक्षिक पाठ्यक्रम भंडार है। यह पाठ्यक्रम Microsoft Cloud Advocates द्वारा विकसित एक व्यापक 12-सप्ताह का कोर्स है, जिसमें जावास्क्रिप्ट, CSS, और HTML को कवर करते हुए 24 व्यावहारिक पाठ शामिल हैं।
यह शुरुआती लोगों को वेब विकास के मूल तत्व सिखाने के लिए एक शैक्षिक पाठ्यक्रम रिपॉजिटरी है। यह पाठ्यक्रम एक संपूर्ण 12-सप्ताह का कोर्स है जिसे Microsoft क्लाउड एडवोकेट्स द्वारा विकसित किया गया है, जिसमें JavaScript, CSS, और HTML को कवर करने वाले 24 व्यावहारिक पाठ होते हैं।
### मुख्य घटक
### प्रमुख घटक
- **शैक्षिक सामग्री**: परियोजना-आधारित मॉड्यूल में व्यवस्थित 24 संरचित पाठ
- **व्यावहारिक परियोजनाएँ**: टेररियम, टाइपिंग गेम, ब्राउज़र एक्सटेंशन, स्पेस गेम, बैंकिंग ऐप, कोड संपादक, और एआई चैट सहायक
- **इंटरैक्टिव क्विज़**: प्रत्येक में 3 प्रश्नों के साथ 48 क्विज़ (पाठ से पहले/बाद के मूल्यांकन)
- **मल्टी-भाषा समर्थन**: GitHub Actions के माध्यम से 50+ भाषाओं के लिए स्वचालित अनुवाद
- **व्यावहारिक परियोजनाएँ**: टेररियम, टाइपिंग गेम, ब्राउज़र एक्सटेंशन, स्पेस गेम, बैंकिंग ऐप, कोड संपादक, और एआई चैट असिस्टेंट
- **इंटरएक्टिव क्विज़**: 48 क्विज़, प्रत्येक में 3 प्रश्न (पाठ से पहले और बाद में मूल्यांकन)
- **बहु-भाषा समर्थन**: GitHub Actions के माध्यम से 50+ भाषाओं के लिए स्वचालित अनुवाद
- **प्रौद्योगिकियाँ**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (एआई परियोजनाओं के लिए)
### वास्तुकला
- पाठ-आधारित संरचना वाला शैक्षिक भंडार
- प्रत्येक पाठ फोल्डर में README, कोड उदाहरण, और समाधान होते हैं
- स्वतंत्र परियोजनाएँ अलग-अलग निर्देशिकाओं में (quiz-app, विभिन्न पाठ परियोजनाएँ)
- GitHub Actions का उपयोग करते हुए अनुवाद प्रणाली (co-op-translator)
- Docsify के माध्यम से प्रलेखन सेवा प्रदान और PDF के रूप में उपलब्ध
- शैक्षिक रिपॉजिटरी जो पाठ-आधारित संरचना पर आधारित है
- प्रत्येक पाठ फोल्डर में README, कोड उदाहरण, और समाधान हैं
- स्वायत्त परियोजनाएँ अलग-अलग निर्देशिकाओं में (quiz-app, विभिन्न पाठ परियोजनाएँ)
- GitHub Actions (co-op-translator) का उपयोग करते हुए अनुवाद प्रणाली
- डॉक्सिफाई के माध्यम से प्रलेखन और PDF के रूप में उपलब्ध
## सेटअप कमांड
यह भंडार मुख्य रूप से शैक्षिक सामग्री उपभोग के लिए है। विशिष्ट परियोजनाओं के साथ काम करने के लिए:
यह रिपॉजिटरी मुख्य रूप से शैक्षिक सामग्री उपभोग के लिए है। विशिष्ट परियोजनाओं के साथ काम करने के लिए:
### मुख्य भंडार सेटअप
### मुख्य रिपॉजिटरी सेटअप
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
@ -37,7 +37,7 @@ cd Web-Dev-For-Beginners
cd quiz-app
npm install
npm run dev # विकास सर्वर शुरू करें
npm run build # उत्पादन के लिए निर्माण करें
npm run build # प्रोडक्शन के लिए निर्माण करें
npm run lint # ESLint चलाएं
```
@ -48,7 +48,7 @@ cd 7-bank-project/api
npm install
npm start # एपीआई सर्वर शुरू करें
npm run lint # ESLint चलाएं
npm run format # Prettier के साथ स्वरूपित करें
npm run format # Prettier के साथ फॉर्मेट करें
```
### ब्राउज़र एक्सटेंशन परियोजनाएँ
@ -64,10 +64,10 @@ npm install
```bash
cd 6-space-game/solution
npm install
# ब्राउज़र में index.html खोलें या लाइव सर्वर का उपयोग करें
# index.html को ब्राउज़र में खोलें या लाइव सर्वर का उपयोग करें
```
### चैट परियोजना (Python बैकएंड)
### चैट प्रोजेक्ट (Python Backend)
```bash
cd 9-chat-project/solution/backend/python
@ -80,29 +80,29 @@ python api.py
### सामग्री योगदानकर्ताओं के लिए
1. **अपने GitHub खाते में** भंडार को फोर्क करें
2. **अपने फोर्क को** स्थानीय रूप से क्लोन करें
3. **अपने परिवर्तनों के लिए** एक नई शाखा बनाएं
1. अपने GitHub खाते में रिपॉजिटरी को **फोर्क** करें
2. अपने फोर्क को स्थानीय रूप से **क्लोन** करें
3. अपने परिवर्तनों के लिए एक नई शाखा बनाएं
4. पाठ सामग्री या कोड उदाहरणों में परिवर्तन करें
5. संबंधित परियोजना निर्देशिकाओं में कोड परिवर्तनों का परीक्षण करें
6. योगदान दिशानिर्देशों का पालन करते हुए पुल रिक्वेस्ट सबमिट करें
5. संबंधित परियोजना निर्देशिकाओं में कोड परिवर्तन का परीक्षण करें
6. योगदान दिशानिर्देशों का पालन करते हुए पुल अनुरोध जमा करें
### शिक्षार्थियों के लिए
1. भंडार को फोर्क या क्लोन करें
2. क्रमशः पाठ निर्देशिकाओं में जाए
3. प्रत्येक पाठ के README फाइल पढ़ें
4. https://ff-quizzes.netlify.app/web/ पर पूर्व-पठ क्विज़ पूरी करें
5. पाठ फ़ोल्डर में कोड उदाहरणों पर काम करें
1. रिपॉजिटरी को फोर्क या क्लोन करें
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 एक्सटेंशन का उपयोग करें
- **API परियोजनाएँ**: संबंधित API निर्देशिकाओं में `npm start` चलाए
- **प्रलेखन**: रूट में `docsify serve` चलाए (पोर्ट 3000)
- **क्विज़ ऐप**: क्विज़-ऐप निर्देशिका में `npm run dev` चलाएं
- **परियोजनाएँ**: HTML परियोजनाओं के लिए VS कोड लाइव सर्वर एक्सटेंशन का उपयोग करें
- **API परियोजनाएँ**: संबंधित API निर्देशिकाओं में `npm start` चलाए
## परीक्षण निर्देश
@ -110,82 +110,82 @@ 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` चलाए
- मार्कडाउन लिंक मान्य ह
- `package.json` वाले निर्देशिकाओं में `npm run lint` चलाए
- मार्कडाउन लिंक मान्य हैं यह पुष्टि करे
- ब्राउज़र या Node.js में कोड उदाहरणों का परीक्षण करें
- सुनिश्चित करें कि अनुवाद संरचना बनाए रखते हैं
- जांचें कि अनुवाद उचित संरचना बनाए रखते हैं
## कोड स्टाइल दिशानिर्देश
### JavaScript
### जावास्क्रिप्ट
- आधुनिक ES6+ सिंटैक्स का उपयोग करें
- परियोजनाओं में उपलब्ध मानक ESLint कंफिगरेशन का पालन करें
- शैक्षिक स्पष्टता के लिए सार्थक वेरिएबल और फ़ंक्शन नाम चुनें
- शिक्षार्थियों के लिए अवधारणाओं को समझाते हुए टिप्पणियाँ जोड़ें
- Prettier का उपयोग करें जहाँ कॉन्फ़िगर हो
- परियोजनाओं में दिए गए मानक ESLint कॉन्फ़िगरेशन का पालन करें
- शिक्षार्थियों के लिए समझने योग्य वैरिएबल और फंक्शन नामों का उपयोग करें
- अवधारणाओं की व्याख्या करने वाले टिप्पणियाँ जोड़ें
- जहाँ कॉन्फ़िगर हो, Prettier का उपयोग कर स्वरूपित करें
### HTML/CSS
- सेमांटिक 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)
### क्विज़ ऐप तैनाती (Azure Static Web Apps)
क्विज़ ऐप Azure Static Web Apps परिनियोजन के लिए कॉन्फ़िगर है:
क्विज़-ऐप Azure Static Web Apps तैनाती के लिए कॉन्फ़िगर किया गया है:
```bash
cd quiz-app
npm run build # dist/ फ़ोल्डर बनाता है
# मुख्य शाखा में पुश करने पर GitHub Actions वर्कफ़्लो के माध्यम से डिप्लॉय करता है
# मुख्य पर पुश करने पर GitHub Actions वर्कफ़्लो के माध्यम से डिप्लॉय करता है
```
Azure Static Web Apps कॉन्फ़िगरेशन:
@ -196,30 +196,30 @@ Azure Static Web Apps कॉन्फ़िगरेशन:
### प्रलेखन PDF निर्माण
```bash
npm install # docsify-to-pdf इंस्टॉल करें
npm install # docsify-to-pdf स्थापित करें
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] टेरारियम परियोजना में टाइपो सुधारें`
- `[Lesson-3] टेररियम परियोजना में वर्तनी सुधारें`
- `[Translation] पाठ 5 के लिए स्पेनिश अनुवाद जोड़ें`
- `[Docs] सेटअप निर्देश अपडेट करें`
@ -228,35 +228,35 @@ docsify serve # localhost:3000 पर सर्व करें
PR सबमिट करने से पहले:
1. **कोड गुणवत्ता**:
- प्रभावित परियोजना निर्देशिकाओं में `npm run lint` चलाए
- सभी लिंटिंग त्रुटियाँ और वार्निंग्स ठीक करें
- प्रभावित परियोजना निर्देशिकाओं में `npm run lint` चलाए
- सभी linting त्रुटियों और चेतावनियों को ठीक करें
2. **बिल्ड सत्यापन**:
- लागू हो तो `npm run build` चलाएँ
- सुनिश्चित करें कि कोई बिल्ड त्रुटि न हो
2. **निर्माण सत्यापन**:
- जहां लागू हो, `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 विवरण में इश्यू नंबर संदर्भित करें
- विस्तृत दिशानिर्देशों के लिए [CONTRIBUTING.md](./CONTRIBUTING.md) देखें
- यदि लागू हो, तो PR विवरण में मुद्दा संख्या का संदर्भ दें
### समीक्षा प्रक्रिया
- PR मेंटेनर्स और समुदाय द्वारा समीक्षा की जाती है
- PRs मेंटेनर्स और समुदाय द्वारा समीक्षा किए जाते हैं
- शैक्षिक स्पष्टता को प्राथमिकता दी जाती है
- कोड उदाहरण नवीनतम सर्वोत्तम प्रथाओं का पालन करें
- अनुवाद सटीकता और सांस्कृतिक उपयुक्तता के लिए समीक्षा किए जाते हैं
- कोड उदाहरणों को वर्तमान सर्वोत्तम प्रथाओं का पालन करना चाहिए
- अनुवादों को सटीकता और सांस्कृतिक उपयुक्तता के लिए समीक्षा किया जाता है
## अनुवाद प्रणाली
@ -264,19 +264,19 @@ PR सबमिट करने से पहले:
- GitHub Actions के साथ co-op-translator वर्कफ़्लो का उपयोग करता है
- 50+ भाषाओं में स्वचालित रूप से अनुवाद करता है
- मुख्य निर्देशिकाओं में स्रोत फ़ाइले
- `translations/{language-code}/` निर्देशिकाओं में अनूदित फाइले
- स्रोत फाइलें मुख्य निर्देशिकाओं में होती है
- अनुवादित फाइलें `translations/{language-code}/` निर्देशिकाओं में होती है
### मैनुअल अनुवाद सुधार जोड़ना
1. `translations/{language-code}/` में फ़ाइल खोजे
1. `translations/{language-code}/` में फ़ाइल का पता लगाए
2. संरचना बनाए रखते हुए सुधार करें
3. कोड उदाहरण कार्यक्षमता सुनिश्चित करें
3. सुनिश्चित करें कि कोड उदाहरण कार्यशील बने रहें
4. स्थानीयकृत क्विज़ सामग्री का परीक्षण करें
### अनुवाद मेटाडेटा
अनदित फ़ाइलों में मेटाडेटा हेडर शामिल है:
अनुवादित फ़ाइलों में मेटाडेटा हेडर शामिल होता है:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -295,114 +295,114 @@ CO_OP_TRANSLATOR_METADATA:
**क्विज़ ऐप शुरू नहीं होता**:
- Node.js संस्करण जांचें (v14+ अनुशंसित)
- `node_modules` और `package-lock.json` हटाएँ, फिर `npm install` चलाएँ
- `node_modules` और `package-lock.json` हटाएं, फिर `npm install` चलाएं
- पोर्ट संघर्ष जांचें (डिफ़ॉल्ट: 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 पर्यावरण परिवर्तनशील सेट है
- GitHub मॉडल्स एक्सेस अनुमतियाँ जांचें
**पायथन चैट प्रोजेक्ट समस्याएँ**:
- OpenAI पैकेज स्थापित है: `pip install openai`
- सुनिश्चित करें कि GITHUB_TOKEN पर्यावरण चर सेट है
- GitHub मॉडल पहुँच अनुमतियाँ जांचें
**Docsify प्रलेखन सर्व नहीं कर रहा**:
- docsify-cli ग्लोबली इंस्टॉल करें: `npm install -g docsify-cli`
- रिपॉजिटरी रूट डायरेक्टरी से चलाएं
**डॉक्सिफाई दस्तावेज़ सेवा नहीं करता**:
- docsify-cli ग्लोबली स्थापित करें: `npm install -g docsify-cli`
- रिपॉजिटरी रूट निर्देशिका से चलाएं
- जांचें कि `docs/_sidebar.md` मौजूद है
### विकास वातावरण सुझाव
### विकास पर्यावरण सुझाव
- HTML परियोजनाओं के लिए VS Code में Live Server एक्सटेंशन का उपयोग करें
- consistent फॉर्मेटिंग के लिए ESLint और Prettier एक्सटेंशन इंस्टॉल करें
- जावास्क्रिप्ट डिबगिंग के लिए ब्राउज़र DevTools का उपयोग करें
- HTML परियोजनाओं के लिए VS Code में लाइव सर्वर एक्सटेंशन का उपयोग करें
- सुसंगत फॉर्मेटिंग के लिए ESLint और Prettier एक्सटेंशन इंस्टॉल करें
- JavaScript डिबगिंग के लिए ब्राउज़र DevTools का उपयोग करें
- Vue परियोजनाओं के लिए Vue DevTools ब्राउज़र एक्सटेंशन इंस्टॉल करें
### प्रदर्शन विचार
- अनुवादित बड़ी संख्या वाली फाइलें (50+ भाषाएँ) क्लोन को बड़ा बनाती हैं
- केवल सामग्री पर काम करते समय शैलो क्लोन का उपयोग करें: `git clone --depth 1`
- अंग्रेज़ी सामग्री पर काम करते हुए अनुवादों को खोज से बाहर रखें
- बिल्ड प्रक्रिया पहले रन पर धीमी हो सकती है (npm install, Vite build)
- अनुवादित फ़ाइलों की बड़ी संख्या (50+ भाषाएँ) के कारण पूर्ण क्लोन बड़े होते हैं
- केवल सामग्री पर काम करने के लिए शैलो क्लोन का उपयोग करें: `git clone --depth 1`
- अंग्रेज़ी सामग्री पर काम करते समय अनुवाद खोजों से बाहर करें
- बिल्ड प्रक्रियाएँ पहली बार धीमी हो सकती हैं (npm install, Vite build)
## सुरक्षा विचार
### पर्यावरण परिवर्तनशील
### पर्यावरण चर
- API कुंजी कभी भंडार में प्रतिबद्ध न करें
- `.env`ाइलों का उपयोग करें (पहले से `.gitignore` में शामिल)
- परियोजना README में आवश्यक पर्यावरण चर दस्तावेज़ित करें
- API कुंजी को कभी रिपॉजिटरी में कमिट न करें
- `.env`़ाइलें उपयोग करें (पहले से `.gitignore` में हैं)
- आवश्यक पर्यावरण चर परियोजना READMEs में दस्तावेजीकृत करें
### Python परियोजनाएँ
### पायथन परियोजनाएँ
- वर्चुअल वातावरण का उपयोग करें: `python -m venv venv`
- वर्चुअल एनवायरनमेंट का उपयोग करें: `python -m venv venv`
- निर्भरताओं को अपडेट रखें
- GitHub टोकन न्यूनतम आवश्यक अनुमतियों के साथ होने चाहिए
- GitHub टोकन के पास न्यूनतम आवश्यक अनुमतियाँ होनी चाहिए
### GitHub मॉडल्स एक्सेस
- GitHub मॉडल्स के लिए व्यक्तिगत एक्सेस टोकन (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)
- अतिरिक्त पाठ्यक्रम: Generative AI, Data Science, ML, IoT पाठ्यक्रम उपलब्ध
- [Microsoft Learn मॉड्यूल](https://docs.microsoft.com/learn/)
- [स्टूडेंट हब संसाधन](https://docs.microsoft.com/learn/student-hub/)
- शिक्षार्थियों के लिए अनुशंसित: [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)
- अतिरिक्त पाठ्यक्रम: जनरेटिव एआई, डेटा साइंस, एमएल, आईओटी पाठ्यक्रम उपलब्ध
### विशिष्ट परियोजनाओं के साथ का करना
### विशिष्ट परियोजनाओं के साथ कार्य करना
व्यक्तिगत परियोजनाओं के विस्तृत निर्देशों के लिए संबंधित 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` - एआई चैट सहायक परियोजना
- `6-space-game/README.md` - कैनवास-आधारित गेम डेवलपमेंट
- `9-chat-project/README.md` - एआई चैट असिस्टेंट प्रोजेक्ट
### मोनोरिप संरचना
### मोनोरिप संरचना
यह पारंपरिक मोनोरिपो नहीं है, लेकिन यह भंडार कई स्वतंत्र परियोजनाएँ शामिल करता है:
- प्रत्येक पाठ स्व-निहित है
- परियोजनाएँ निर्भरताएं साझा नहीं करती
- व्यक्तिगत परियोजनाओं पर काम करें बिना दूसरों को प्रभावित किए
- पूर्ण पाठ्यक्रम अनुभव के लिए पूर रिपॉजिटरी क्लोन करें
हालांकि यह पारंपरिक मोनोरिपॉ नहीं है, इस रिपॉजिटरी में कई स्वतंत्र परियोजनाएँ है:
- प्रत्येक पाठ स्वतंत्र है
- परियोजनाएँ निर्भरताओं को साझा नहीं करती है
- अन्य परियोजनाओं को प्रभावित किए बिना व्यक्तिगत परियोजनाओं पर काम करें
- पूर्ण पाठ्यक्रम अनुभव के लिए पूर रिपॉजिटरी क्लोन करें
---
<!-- 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 -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-04-06T18:03:22+00:00",
"translation_date": "2026-04-20T15:32:13+00:00",
"source_file": "AGENTS.md",
"language_code": "ja"
},

@ -2,27 +2,27 @@
## プロジェクト概要
これは初心者向けにウェブ開発の基礎を教えるための教育カリキュラムリポジトリです。カリキュラムはMicrosoft Cloud Advocatesによって作成された包括的な12週間コースで、JavaScript、CSS、HTMLを扱う24の実践的なレッスンが含まれています。
これは初心者にウェブ開発の基礎を教えるための教育カリキュラムリポジトリです。カリキュラムはMicrosoft Cloud Advocatesによって開発された包括的な12週間のコースで、JavaScript、CSS、HTMLをカバーする24の実践的なレッスンが含まれています。
### 主な構成要素
- <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プロジェクト
- <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形式で利用可能
## セットアップコマンド
このリポジトリは主に教育コンテンツの閲覧用です。特定のプロジェクトを扱う場合は以下を参照してください。
このリポジトリは主に教育用コンテンツの利用を目的としています。特定のプロジェクトで作業する場合:
### メインリポジトリのセットアップ
@ -31,7 +31,7 @@ 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
@ -41,22 +41,22 @@ 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 run lint # ESLint を実行する
npm run format # Prettier で整形する
```
### ブラウザ拡張機能プロジェクト
### ブラウザ拡張機能プロジェクト
```bash
cd 5-browser-extension/solution
npm install
# ブラウザ固有の拡張機能読み込み手順に従ってください
# ブラウザ固有の拡張機能読み込み手順に従ってください
```
### スペースゲームプロジェクト
@ -64,15 +64,15 @@ npm install
```bash
cd 6-space-game/solution
npm install
# index.html ブラウザで開くか、Live Server を使用してください
# ブラウザーでindex.htmlを開くか、Live Serverを使用してください
```
### チャットプロジェクトPythonバックエンド
### チャットプロジェクト (Pythonバックエンド)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# GITHUB_TOKEN環境変数を設定する
# GITHUB_TOKEN 環境変数を設定する
python api.py
```
@ -80,62 +80,62 @@ python api.py
### コンテンツ寄稿者向け
1. リポジトリをGitHubアカウント<strong>フォーク</strong>する
2. フォークをローカルに<strong>クローン</strong>する
3. 変更用に<strong>新しいブランチ</strong>を作成する
4. レッスンコンテンツやコード例を編集する
5. 関連プロジェクトディレクトリでコード変更をテストする
6. 貢献ガイドラインに沿ってプルリクエストを提出する
1. リポジトリをGitHubアカウント<strong>フォーク</strong>
2. フォークをローカルに<strong>クローン</strong>
3. 変更用に<strong>新しいブランチを作成</strong>
4. レッスン内容やコード例の変更を行う
5. 関連プロジェクトディレクトリでコード変更をテスト
6. コントリビューションガイドラインに従いプルリクエストを提出
### 学習者向け
1. リポジトリをフォークまたはクローンする
2. レッスンディレクトリを順に移動する
1. リポジトリをフォークまたはクローン
2. レッスンディレクトリを順に移動
3. 各レッスンのREADMEを読む
4. https://ff-quizzes.netlify.app/web/ でレッスン前クイズを完了する
5. レッスンフォルダーのコード例に取り組む
6. 課題チャレンジを完了する
7. レッスン後のクイズを受験す
4. https://ff-quizzes.netlify.app/web/ でレッスン前クイズを完了
5. レッスンフォルダ内のコード例を進める
6. 課題チャレンジを完了する
7. レッスン後クイズを受け
### ライブ開発
- <strong>ドキュメント</strong>: ルートで `docsify serve` 実行ポート3000
- <strong>ドキュメント</strong>: ルートで `docsify serve` 実行ポート3000
- <strong>クイズアプリ</strong>: quiz-appディレクトリで `npm run dev` 実行
- <strong>プロジェクト</strong>: HTMLプロジェクトはVS CodeLive Server拡張を使用
- **APIプロジェクト**: 該当APIディレクトリで `npm start` 実行
- <strong>プロジェクト</strong>: HTMLプロジェクトはVS Code Live Server拡張を使用
- **APIプロジェクト**: 対応するAPIディレクトリで `npm start` 実行
## テスト手順
### クイズアプリテスト
### クイズアプリテスト
```bash
cd quiz-app
npm run lint # コードスタイルの問題をチェックする
npm run build # ビルドが成功する確認する
npm run build # ビルドが成功することを確認する
```
### バンクAPIのテスト
### 銀行APIテスト
```bash
cd 7-bank-project/api
npm run lint # コードスタイルの問題をチェックする
npm run lint # コーディングスタイルの問題を確認する
node server.js # サーバーがエラーなく起動することを確認する
```
### 一般的なテスト方針
### 一般的なテストアプローチ
- 本リポジトリは包括的な自動テストを含みません
- 手動テストは以下に重点を置く:
- このリポジトリは包括的な自動テストを備えていない教育用
- 手動テストは以下に注力:
- コード例がエラーなく動作すること
- ドキュメント内リンクが正しく機能すること
- プロジェクトが正常にビルドできること
- 例がベストプラクティスにっていること
- ドキュメント内リンクが動作すること
- プロジェクトビルドが成功すること
- 例がベストプラクティスに沿っていること
### 提出前チェック
### 提出前チェックポイント
- package.jsonあるディレクトリで `npm run lint` を実行
- マークダウンリンクが有効か確認
- ブラウザやNode.jsでコード例を検証
- package.jsonあるディレクトリで `npm run lint` を実行
- マークダウンリンクが有効か確認
- ブラウザやNode.jsでコード例をテスト
- 翻訳が正しい構造を維持していることを確認
## コードスタイルガイドライン
@ -143,54 +143,54 @@ node server.js # サーバーがエラーなく起動することを確認
### JavaScript
- モダンなES6+構文を使用
- プロジェクトの標準ESLint設定に従う
- 教育目的でわかりやすい変数・関数名を使用
- プロジェクト提供の標準ESLint設定に従う
- 教育的明確さを考慮した意味のある変数・関数名を使用
- 学習者向けに概念を説明するコメントを追加
- Prettierでフォーマット(設定されている場合)
- Prettier設定がある場合は整形使用
### HTML/CSS
- セマンティックなHTML5要素を使用
- レスポンシブデザインの原則を守る
- セマンティックなHTML5要素
- レスポンシブデザイン原則の適用
- 明確なクラス命名規則
- CSS手法を説明するコメントを
- CSS手法を説明するコメントを学習者向けに追
### Python
- PEP 8スタイルガイドに準拠
- わかりやすく教育的なコード例
- 学習を助ける型ヒントを適宜使用
- PEP 8スタイルガイドに従う
- 分かりやすい教育的コード例
- 学習に役立つ場合はタイプヒントを使用
### Markdownドキュメン
### Markdownドキュメンテーション
- 明確な見出し階層
- 言語指定付きコードブロック
- 追加リソースへのリンク
- `images/` ディレクトリ内のスクリーンショットや画像
- アクセシビリティ対応のための代替テキスト
- `images/`フォルダ内のスクリーンショット・画像
- アクセシビリティのための画像のaltテキスト
### ファイル構成
- レッスンは番号付きで順番に並ぶ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構成:
- <strong>アプリロケーション</strong>: `/quiz-app`
- <strong>出力</strong>: `dist`
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,80 +203,80 @@ 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] テラリウムプロジェクトのタイプミス修正`
- `[Translation] レッスン5のスペイン語翻訳追加`
- `[Docs] セットアップ手順更新`
明確で説明的なタイトルを使用:
- `[Quiz-app] レッスンXの新しいクイズ追加`
- `[Lesson-3] テラリウムプロジェクトの誤字修正`
- `[Translation] レッスン5のスペイン語翻訳追加`
- `[Docs] セットアップ手順更新`
### 必須チェック
PR提出前に以下を実施:
PR提出前に:
1. <strong>コード品質</strong>:
- 該当プロジェクトディレクトリで `npm run lint` 実行
- すべてのリンティングエラーと警告を修正
- 影響を受けるプロジェクトディレクトリで `npm run lint` 実行
- すべてのエラー・警告を修正
2. <strong>ビルド確認</strong>:
- 必要に応じて `npm run build` 実行
2. <strong>ビルド検証</strong>:
- 該当すれば `npm run build` 実行
- ビルドエラーなしを確認
3. <strong>リンク検証</strong>:
- すべてのマークダウンリンクをテスト
- 画像の参照が正しいことを確認
- 画像参照が有効か確認
4. <strong>コンテンツレビュー</strong>:
- スペルと文法の校正
- コード例が正しく教育的であること確認
- 翻訳が原文の意味を忠実に反映していることを検証
- スペル・文法を校正
- コード例が正しく教育的確認
- 翻訳が意味を維持しているか検証
### 貢献条
### コントリビューション要
- Microsoft CLAへの同意初回PR時に自動チェック)
- [Microsoft Open Source Code of Conduct](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説明に該当する場合はイシュー番号を記載
### レビュー過程
### レビュー手順
- メンテナとコミュニティによるレビュー
- 教育のわかりやすさを最優先
- コード例は最新のベストプラクティスに合致させる
- 翻訳は正確さと文化的適切さもチェック
- PRはメンテナーとコミュニティがレビュー
- 教育的明確さを最優先
- コード例は最新のベストプラクティスに従うこと
- 翻訳は正確性と文化的適切性をレビュー
## 翻訳システム
### 自動翻訳
- GitHub Actionsのco-op-translatorワークフローを
- 50以上の言語自動翻訳
- ソースファイルはメインディレクトリ
- GitHub Actionsのco-op-translatorワークフローを使
- 50以上の言語自動翻訳
- ソースファイルはメインディレクトリ
- 翻訳ファイルは `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:
### よくある問題
<strong>クイズアプリが起動しない</strong>:
- Node.jsのバージョンを確認v14以上推奨)
- `node_modules``package-lock.json` を削除し、`npm install` を再実行
- ポート競合の確認デフォルトはViteのポート5173
- Node.jsバージョンを確認v14+推奨)
- `node_modules``package-lock.json` を削除し `npm install` 実行
- ポート競合を確認(デフォルト: Viteはポート5173
**APIサーバーが起動しない**:
- Node.jsバージョンが最小要件(node >=10)を満たしているか
- ポートが使用中でないか確認
- すべての依存を `npm install` でインストール済みか
- Node.jsのバージョン確認node >=10必要
- ポートがすでに使われていないかチェック
- 依存関係がすべて `npm install` でインストールされているか確認
<strong>ブラウザー拡張機能が読み込めない</strong>:
- manifest.jsonの適切なフォーマットを確認
- ブラウザコンソールのエラーを確認
- ブラウザ固有のインストール手順に従う
<strong>ブラウザ拡張機能が読み込まれない</strong>:
- manifest.jsonのフォーマットが正しいか確認
- ブラウザのコンソールでエラーをチェック
- ブラウザ別の拡張機能インストール手順に従う
**Pythonチャットプロジェクトの問題**:
- OpenAIパッケージのインストールを確認: `pip install openai`
- GITHUB_TOKEN環境変数が設定されていることを確認
- GitHub Modelsアクセス権を確認
- OpenAIパッケージがインストールされているか: `pip install openai`
- GITHUB_TOKEN環境変数が設定されている
- GitHub Modelsアクセス権を確認
**Docsifyがドキュメントを提供しない**:
**Docsifyがドキュメントを配信しない**:
- docsify-cliをグローバルにインストール: `npm install -g docsify-cli`
- リポジトリルート実行
- `docs/_sidebar.md` が存在することを確認
- リポジトリルートから実行
- `docs/_sidebar.md` が存在する確認
### 開発環境ヒント
### 開発環境ヒント
- HTMLプロジェクトはVS CodeのLive Server拡張を利
- ESLintとPrettier拡張をインストールして一貫性あるフォーマット
- JavaScriptデバッグにはブラウザのDevToolsを使用
- VueプロジェクトではVue DevToolsのブラウザ拡張をインストール
- HTMLプロジェクトにはVS CodeのLive Server拡張を使
- ESLintとPrettier拡張をインストールしてコード整形を統
- JavaScriptのデバッグにはブラウザの開発者ツールを使用
- VueプロジェクトにはVue DevToolsブラウザ拡張を導入
### パフォーマンス考慮事項
### パフォーマンスの考慮点
- 翻訳ファイルが50以上あるため、フルクローンは大容量
- コンテンツ作業のみなら浅いクローンを推奨`git clone --depth 1`
- 英語コンテンツ作業時は検索から翻訳を除外すると効果的
- 最初のビルドnpm install、Viteビルドは時間がかかる場合あり
- 翻訳ファイルは多数50以上の言語あり、フルクローンは大きい
- コンテンツ作業のみなら浅いクローンを推奨: `git clone --depth 1`
- 英語コンテンツ作業時は翻訳ファイルを検索対象から除外
- 初回実行はビルドや依存インストールのため遅い可能性あり
## セキュリティ考慮事項
### 環境変数
- APIキーはリポジトリにコミットしない
- `.env` ファイルを利用(既に `.gitignore` で除外
- 必須環境変数をプロジェクトREADMEに記載
- `.env`ファイルを利用(`.gitignore`に含まれている
- 必要な環境変数は各プロジェクトのREADMEに記載
### Pythonプロジェクト
- 仮想環境を使用:`python -m venv venv`
- 依存最新に保つ
- GitHubトークンは必要最小限の権限で管理
- 仮想環境の利用推奨: `python -m venv venv`
- 依存関係は常に最新に保つ
- GitHubトークンは必要最小限の権限で
### GitHub Modelsアクセス
- 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カリキュラムもあり
- [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を参照
各プロジェクトの詳細手順はREADMEを参照:
- `quiz-app/README.md` - Vue 3クイズアプリケーション
- `7-bank-project/README.md` - 認証付きバンキングアプリ
- `5-browser-extension/README.md` - ブラウザ拡張機能開発
- `6-space-game/README.md` - Canvasベースゲーム開発
- `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 -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-04-06T18:04:20+00:00",
"translation_date": "2026-04-20T15:33:41+00:00",
"source_file": "AGENTS.md",
"language_code": "ko"
},

@ -2,23 +2,23 @@
## 프로젝트 개요
이 저장소는 초보자를 위한 웹 개발 기초 교육 커리큘럼 저장소입니다. 이 커리큘럼은 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로도 이용 가능
## 설정 명령어
@ -37,11 +37,11 @@ cd Web-Dev-For-Beginners
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
@ -64,7 +64,7 @@ npm install
```bash
cd 6-space-game/solution
npm install
# index.html을 브라우저에서 열거나 Live Server를 사용하세요
# 브라우저에서 index.html을 열거나 Live Server를 사용하세요
```
### 채팅 프로젝트 (Python 백엔드)
@ -78,33 +78,33 @@ python api.py
## 개발 워크플로우
### 콘텐츠 기여자
### 콘텐츠 기여자를 위한 절차
1. GitHub 계정에 저장소를 <strong>포크</strong>합니다
2. 포크한 저장소를 로컬에 <strong>클론</strong>합니다
3. 변경사항을 위한 <strong>새 브랜치</strong>를 만듭니다
4. 수업 콘텐츠 또는 코드 예제 수정합니다
5. 관련 프로젝트 디렉토리에서 코드 변경사항을 테스트합니다
6. 기여 가이드라인에 따라 풀 리퀘스트를 제출합니다
1. <strong>저장소를 포크</strong>하여 개인 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. 수업 후 퀴즈 풀기
### 실시간 개발
### 라이브 개발
- <strong>문서</strong>: 루트에서 `docsify serve` 실행 (포트 3000)
- **퀴즈 앱**: quiz-app 디렉리에서 `npm run dev` 실행
- **퀴즈 앱**: quiz-app 디렉리에서 `npm run dev` 실행
- <strong>프로젝트</strong>: HTML 프로젝트는 VS Code Live Server 확장 사용
- **API 프로젝트**: 각 API 디렉리에서 `npm start` 실행
- **API 프로젝트**: 각 API 디렉리에서 `npm start` 실행
## 테스트 지침
## 테스트 안내
### 퀴즈 앱 테스트
@ -114,78 +114,78 @@ 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` 실행
- 마크다운 링크가 유효한지 확인
- package.json이 있는 디렉리에서 `npm run lint` 실행
- 마크다운 링크 유효성 확인
- 브라우저 또는 Node.js에서 코드 예제 테스트
- 번역본이 올바른 구조를 유지하는지 확인
- 번역 파일이 올바른 구조 유지하는지 확인
## 코드 스타일 가이드라인
## 코드 스타일 가이드
### JavaScript
- 최신 ES6+ 문법 사용
- 프로젝트 내 표준 ESLint 설정 준수
- 교육 목적상 의미 있는 변수 및 함수명 사용
- 학습자를 위한 개념 설명 주석 포함
- Prettier로 포매팅(설정된 경우)
- 프로젝트 내 기본 ESLint 설정 준수
- 교육 목적의 명확한 변수 및 함수 명칭 사용
- 학습자 이해를 돕는 주석 추가
- 설정된 경우 Prettier로 포맷팅
### HTML/CSS
- 의미론적 HTML5 요소 사용
- 반응형 디자인 원칙 적용
- 의미론적 HTML5 태그 사용
- 반응형 디자인 원칙 준수
- 명확한 클래스 네이밍 규칙
- 학습자 대상 CSS 기법 설명 주석 포함
- CSS 기법 설명하는 주석 포함
### Python
- PEP 8 스타일 가이드 준수
- 명확하고 교육적인 코드 예제 작성
- 학습에 도움이 되는 경우 타입 힌트 사
- 명확하고 교육적인 코드 예제 제공
- 학습에 도움이 되는 타입 힌트 활
### 마크다운 문서
### 마크다운 문서
- 명확한 헤딩 계층 구조
- 언어 명시된 코드 블록
- 추가 리소스 링크 포함
- `images/` 폴더 내 스크린샷 및 이미지 포함
- 접근성을 위한 이미지 대체 텍스트 제공
- 명확한 제목 계층 구조
- 언어 지정된 코드 블록
- 추가 리소스 링크
- `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)
quiz-app은 Azure Static Web Apps 배포 구성되어 있습니다:
quiz-app은 Azure Static Web Apps 배포용으로 구성됨:
```bash
cd quiz-app
npm run build # dist/ 폴더를 생성합니다
# main 브랜치에 푸시 시 GitHub Actions 워크플로를 통해 배포합니다
# main 브랜치에 푸시할 때 GitHub Actions 워크플로우를 통해 배포합니다
```
Azure Static Web Apps 구성:
@ -203,59 +203,59 @@ 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`로 프로덕션 번들 생성
- 정적 프로젝트: 빌드 단계 없이 파일을 직접 서
- 정적 프로젝트: 빌드 단계 없이 파일을 직접 서비스
## 풀 리퀘스트 가이드라인
### 제목 형식
변경 내용을 명확히 드러내는 제목 사용:
- `[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`
변경 영역을 명확히 나타내는 제목 사용:
- `[Quiz-app] 수업 X를 위한 새 퀴즈 추가`
- `[Lesson-3] 테라리움 프로젝트 오타 수정`
- `[Translation] 5과 스페인어 번역 추가`
- `[Docs] 설정 지침 업데이트`
### 필수 체크 사항
### 필수 점검 사항
PR 제출 전:
1. **코드 품질**:
- 영향받은 프로젝트 디렉토리에서 `npm run lint` 실행
- 모든 린트 오류 및 경고 수정
- 관련 프로젝트 디렉터리에서 `npm run lint` 실행
- 모든 린트 에러 및 경고 수정
2. **빌드 검증**:
- 해당 시 `npm run build` 실행
- 빌드 에러 없음 확인
- 빌드 오류 없을 것
3. **링크 검증**:
3. **링크 확인**:
- 모든 마크다운 링크 테스트
- 이미지 참조 확인
4. **콘텐츠 리뷰**:
- 맞춤법 및 문법 검토
- 코드 예제가 정확하고 교육적임 확인
- 번역이 원문 의미를 유지하는지 검증
4. **내용 검토**:
- 맞춤법 및 문법 교정
- 코드 예제 올바르고 교육적임 확인
- 번역 내용 원문 의미 유지 확인
### 기여 요
### 기여 요구 사항
- Microsoft CLA 동의 (첫 PR 제출 시 자동 확인)
- [Microsoft 오픈소스 행동 강령](https://opensource.microsoft.com/codeofconduct/) 준수
- 자세한 가이드는 [CONTRIBUTING.md](./CONTRIBUTING.md)를 참조
- 이슈 번호 PR 설명에 명시(해당 시)
- Microsoft CLA 동의 (첫 PR 시 자동 확인)
- [Microsoft 오픈 소스 행동 강령](https://opensource.microsoft.com/codeofconduct/) 준수
- 자세한 지침은 [CONTRIBUTING.md](./CONTRIBUTING.md) 참고
- PR 설명에 관련 이슈 번호 명시 (해당 시)
### 리뷰 프로세스
### 검토 절차
- PR은 유지보수자 및 커뮤니티에서 리뷰
- 교육적 명확성 우선
- 코드 예제는 최신 모범 사례를 따름
- PR은 유지 관리자 및 커뮤니티가 검토
- 교육적 명확성 우선 고려
- 코드 예제는 최신 모범 사례에 부합해야 함
- 번역은 정확성과 문화적 적합성 검토
## 번역 시스템
@ -263,20 +263,20 @@ PR 제출 전:
### 자동 번역
- GitHub Actions의 co-op-translator 워크플로우 사용
- 50개 이상 언어로 자동 번역
- 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:
@ -291,118 +291,118 @@ CO_OP_TRANSLATOR_METADATA:
## 디버깅 및 문제 해결
### 일반 문제
### 자주 발생하는 문제
**퀴즈 앱이 시작되지 않을 때**:
**퀴즈 앱 실행 실패**:
- Node.js 버전 확인 (v14 이상 권장)
- `node_modules` `package-lock.json` 삭제 후 `npm install` 재실행
- 포트 충돌 여부 확인 (기본 Vite 포트 5173)
- `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`
- GITHUB_TOKEN 환경 변수 설정 확인
- OpenAI 패키지 설치 확인: `pip install openai`
- GITHUB_TOKEN 환경 변수 설정 여부
- GitHub Models 접근 권한 확인
**Docsify가 문서를 서빙하지 않을 때**:
**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`
- 영어 콘텐츠 작업 시 번역 제외 검색
- 첫 빌드 실행 시 (npm install, Vite 빌드) 지연 가능
- 번역 파일 다수가 존재(50개 이상 언어)해 전체 클론 시 용량 큼
- 콘텐츠 작업만 할 경우 얕은 복제 사용: `git clone --depth 1`
- 영어 콘텐츠 작업 시 번역 검색 제외
- 초기 빌드 과정은 느릴 수 있음 (npm install, Vite 빌드)
## 보안 고려사항
### 환경 변수
- API 키는 절대 저장소에 커밋하지 말 것
- `.env` 파일 사용(이미 `.gitignore`에 포함)
- 각 프로젝트 README에 필수 환경 변수 문서화
- API 키는 저장소에 커밋 금지
- `.env` 파일 사용 (이미 `.gitignore`에 포함)
- 필수 환경 변수는 프로젝트 README에 문서화
### Python 프로젝트
- 가상 환경 사용: `python -m venv venv`
- 의존성 최신 상태 유지
- GitHub 토큰 최소 권한 설정
- 가상 환경 사용 권장: `python -m venv venv`
- 의존성 최신 상태 유지
- GitHub 토큰 최소 권한 설정
### GitHub Models 접근
- 개인 접근 토큰(PAT)이 필요
- 토큰은 환경 변수로 관리
- GitHub Models 접근을 위한 개인 액세스 토큰(PAT) 필요
- 토큰은 환경 변수로 저장
- 토큰이나 자격 증명 절대 커밋 금지
## 추가 참고사항
### 대상
### 대상 사용자
- 웹 개발 완전 초보자
- 학생 및 독학 학습
- 교실에서 커리큘럼 사용하는 교사
- 접근성과 단계적 기술 향상을 목표로 한 콘텐츠
- 학생 및 독학자
- 교실 수업에서 커리큘럼 사용하는 교사
- 접근성 및 점진적 기술 향상을 고려한 콘텐츠 설계
### 교육 철학
- 프로젝트 기반 학습 방식
- 잦은 지식 확인(퀴즈)
- 프로젝트 기반 학습 접근법
- 빈번한 지식 점검(퀴즈)
- 실습 코딩 연습
- 실생활 적용 사례
- 프레임워크보다 기초에 집중
- 실제 적용 사례 예시
- 프레임워크 도입 전 기초기에 집중
### 저장소 유지 관리
- 활동적인 학습자 및 기여자 커뮤니티
- 의존성과 콘텐츠 정기 업데이트
- 이슈 및 토론을 유지보수자가 모니터링
- GitHub Actions를 통해 번역 자동 업데이트
- 활발한 학습자 및 기여자 커뮤니티
- 의존성과 콘텐츠 정기 업데이트
- 유지 관리자가 이슈 및 토론 지속 모니터링
- 번역 업데이트 자동화(GitHub Actions 활용)
### 관련 자료
### 관련 리소스
- [Microsoft Learn 모듈](https://docs.microsoft.com/learn/)
- [학생 허브 리소스](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` - 인증 기능 있는 뱅킹
- `7-bank-project/README.md` - 인증 기능이 있는 은행
- `5-browser-extension/README.md` - 브라우저 확장 개발
- `6-space-game/README.md` - 캔버스 기반 게임 개발
- `9-chat-project/README.md` - AI 채팅 도우미 프로젝트
- `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