Web-Dev-For-Beginners/translations/ko

웹 개발 초보자를 위한 커리큘럼

Microsoft Cloud Advocates가 제공하는 12주간의 종합 과정을 통해 웹 개발의 기본을 배워보세요. 24개의 각 레슨은 테라리움, 브라우저 확장 기능, 우주 게임과 같은 실습 프로젝트를 통해 JavaScript, CSS, HTML을 심도 있게 다룹니다. 퀴즈, 토론, 실습 과제에 참여하세요. 효과적인 프로젝트 기반 교수법으로 실력을 향상시키고 지식 습득을 최적화할 수 있습니다. 지금 바로 코딩 여정을 시작하세요!

Azure AI Foundry Discord 커뮤니티에 참여하세요

다음 단계를 따라 이 리소스를 사용하여 시작하세요:

1. 레포지토리 포크하기: 클릭
2. 레포지토리 클론하기: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Azure AI Foundry Discord에 가입하여 전문가와 동료 개발자 만나기

🌐 다국어 지원

GitHub Action을 통한 지원 (자동화 및 항상 최신 상태 유지)

Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese

로컬 클론을 선호하나요?

이 레포지토리는 50개 이상의 언어 번역본을 포함하여 다운로드 크기가 상당히 증가합니다. 번역 없이 클론하려면 스파스 체크아웃을 사용하세요:

git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'

이렇게 하면 훨씬 빠른 다운로드로 코스 완료에 필요한 모든 것을 얻을 수 있습니다.

추가 지원 언어를 원하시면 여기에서 확인하세요

🧑‍🎓 학생이신가요?

초보자 리소스, 학생 팩 및 무료 수료증 바우처 획득 방법도 제공하는 학생 허브 페이지를 방문하세요. 이 페이지는 매달 콘텐츠가 교체되므로 즐겨찾기에 추가하고 가끔 방문하는 것이 좋습니다.

📣 안내 - 완료해야 할 새로운 GitHub Copilot 에이전트 모드 챌린지!

새로운 챌린지가 업데이트 되어 대부분의 챕터에서 "GitHub Copilot Agent Challenge 🚀"를 확인하세요. 이 챌린지는 GitHub Copilot과 에이전트 모드를 사용해 완료할 수 있습니다. 에이전트 모드를 처음 사용하신다면, 텍스트 생성뿐 아니라 파일 생성, 편집, 명령 실행 등도 할 수 있습니다.

📣 안내 - 생성 AI를 활용한 새로운 프로젝트

새로운 AI 어시스턴트 프로젝트가 추가되었습니다, 프로젝트 확인

📣 안내 - JavaScript용 생성 AI 새로운 커리큘럼 출시

새로운 생성 AI 커리큘럼을 놓치지 마세요!

시작하려면 https://aka.ms/genai-js-course 방문하세요!

• 기본부터 RAG까지 모든 내용을 다루는 레슨
• 생성 AI와 동반자 앱을 사용해 역사적 인물과 상호작용
• 재미있고 몰입감 있는 이야기, 시간 여행도 해봐요!

각 레슨에는 과제, 지식 점검, 도전 과제가 포함되어 있어 다음과 같은 주제 학습을 안내합니다:

• 프롬프트 및 프롬프트 엔지니어링
• 텍스트 및 이미지 앱 생성
• 검색 앱

시작하려면 https://aka.ms/genai-js-course 방문하세요!

🌱 시작하기

교사 여러분, 이 커리큘럼 사용법에 대한 제안을 포함했습니다. 여러분의 피드백을 토론 포럼에서 기다립니다!

**학습자**는 각 레슨마다 사전 퀴즈로 시작하고 강의 자료를 읽고, 여러 활동을 완료한 후 사후 퀴즈로 이해도를 확인하세요.

학습 경험을 향상시키려면 동료들과 프로젝트를 함께 작업하며 교류하세요! 토론은 토론 포럼에서 장려되며, 모더레이터 팀이 질문에 답변해 드립니다.

교육을 더욱 심화하려면 추가 학습 자료를 위해 Microsoft Learn도 강력히 추천합니다.

📋 개발 환경 설정하기

이 커리큘럼에는 바로 사용할 수 있는 개발 환경이 준비되어 있습니다! 시작할 때 Codespace (브라우저 기반, 설치 불필요 환경)에서 실행하거나 로컬 컴퓨터에서 Visual Studio Code 같은 텍스트 편집기를 사용해 진행할 수 있습니다.

레포지토리 생성하기

작업 내용을 쉽게 저장하려면 이 레포지토리의 복사본을 만드는 것이 좋습니다. 페이지 상단의 Use this template 버튼을 클릭하여 GitHub 계정에 커리큘럼 복사본이 포함된 새 레포지토리를 생성하세요.

단계별 안내:

1. 레포지토리 포크하기: 이 페이지 오른쪽 상단의 "Fork" 버튼을 클릭하세요.
2. 레포지토리 클론하기: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Codespace에서 커리큘럼 실행하기

생성한 레포지토리 복사본에서 Code 버튼을 클릭하고 Open with Codespaces를 선택하세요. 새로운 Codespace가 생성됩니다.

로컬 컴퓨터에서 커리큘럼 실행하기

커리큘럼을 로컬에서 실행하려면 텍스트 편집기, 브라우저, 명령줄 도구가 필요합니다. 첫 번째 레슨 프로그래밍 언어와 도구 소개에서는 각각의 도구 옵션을 안내해 드립니다.

추천하는 편집기는 Visual Studio Code로, 내장 터미널도 포함되어 있습니다. Visual Studio Code는 여기에서 다운로드할 수 있습니다.

1. 레포지토리를 컴퓨터에 클론하세요. Code 버튼을 클릭해 URL을 복사하면 됩니다:

   CodeSpace 그런 다음, Visual Studio Code 내에서 터미널을 열고, <your-repository-url>을 방금 복사한 URL로 대체하여 다음 명령을 실행하세요:

   git clone <your-repository-url>
   

2. Visual Studio Code에서 폴더를 엽니다. 파일 > 폴더 열기를 클릭하고 방금 복제한 폴더를 선택하면 됩니다.

추천 Visual Studio Code 확장 기능:

• Live Server - Visual Studio Code 내에서 HTML 페이지 미리보기
• Copilot - 코드를 더 빠르게 작성할 수 있도록 도움

📂 각 수업에는 다음이 포함됩니다:

• 선택적 스케치노트
• 선택적 보조 동영상
• 수업 전 워밍업 퀴즈
• 서면 수업 내용
• 프로젝트 기반 수업의 경우, 프로젝트를 단계별로 만드는 안내서
• 지식 점검
• 도전 과제
• 보조 읽기 자료
• 과제
• 수업 후 퀴즈

퀴즈 관련 참고: 모든 퀴즈는 Quiz-app 폴더에 들어 있으며, 각각 세 문제로 이루어진 총 48개의 퀴즈가 있습니다. 여기에서 이용 가능하며, 퀴즈 앱은 로컬에서 실행하거나 Azure에 배포할 수 있습니다; quiz-app 폴더의 지침을 따르세요.

🗃️ 수업 목록

	프로젝트 이름	학습 개념	학습 목표	연결된 수업	저자
01	시작하기	프로그래밍 입문 및 개발 도구 소개	대부분의 프로그래밍 언어의 기본 토대와 전문 개발자들의 작업을 돕는 소프트웨어에 대해 학습	프로그래밍 언어 및 개발 도구 소개	Jasmine
02	시작하기	GitHub 기초, 팀 작업 포함	프로젝트에서 GitHub 사용 방법 및 코드베이스 협업 방법	GitHub 소개	Floor
03	시작하기	접근성	웹 접근성의 기본 개념 학습	접근성 기초	Christopher
04	JS 기본	JavaScript 데이터 타입	JavaScript 데이터 타입의 기초	데이터 타입	Jasmine
05	JS 기본	함수 및 메서드	애플리케이션의 로직 흐름 관리를 위한 함수와 메서드 학습	함수 및 메서드	Jasmine and Christopher
06	JS 기본	JavaScript로 의사결정 하기	의사결정 방법을 사용하여 코드에 조건 만들기 학습	의사결정 만들기	Jasmine
07	JS 기본	배열과 반복문	JavaScript에서 배열과 반복문을 사용하여 데이터 작업	배열과 반복문	Jasmine
08	테라리움	실습용 HTML	온라인 테라리움을 만들기 위한 HTML 구축, 레이아웃 구성에 중점	HTML 소개	Jen
09	테라리움	실습용 CSS	온라인 테라리움 스타일링을 위한 CSS 구축, 기본 CSS 및 반응형 페이지 만들기 포함	CSS 소개	Jen
10	테라리움	JavaScript 클로저, DOM 조작	테라리움을 드래그/드롭 인터페이스로 작동하게 만드는 JavaScript 작성, 클로저와 DOM 조작에 중점	JavaScript 클로저, DOM 조작	Jen
11	타이핑 게임	타이핑 게임 만들기	키보드 이벤트를 활용하여 JavaScript 앱의 로직 구동 방법 학습	이벤트 기반 프로그래밍	Christopher
12	Green Browser Extension	브라우저 작업 이해	브라우저 작동 원리, 역사 및 브라우저 확장 기능의 초기 구성 요소 설계 법 학습	브라우저에 대해	Jen
13	Green Browser Extension	API 호출, 폼 구축 및 로컬 스토리지 변수 저장	API를 호출하는 브라우저 확장 기능의 JavaScript 요소 빌드, 로컬 스토리지에 저장된 변수 사용	API, 폼, 로컬 스토리지	Jen
14	Green Browser Extension	브라우저 백그라운드 프로세스, 웹 성능	브라우저 백그라운드 프로세스로 확장 아이콘 관리; 웹 성능 및 최적화 학습	백그라운드 작업 및 성능	Jen
15	스페이스 게임	고급 게임 개발: 클래스, 구성, Pub/Sub 패턴	클래스와 구성, 퍼블리시/서브스크라이브 패턴을 통한 상속 개념 학습, 게임 만들기 준비	고급 게임 개발 소개	Chris
16	스페이스 게임	캔버스에 그리기	화면에 요소를 그리기 위한 Canvas API 학습	캔버스에 그리기	Chris
17	스페이스 게임	화면 요소 이동시키기	Cartesian 좌표와 Canvas API를 사용해 요소에 동작 부여	요소 이동시키기	Chris
18	스페이스 게임	충돌 감지	키 입력으로 서로 충돌하고 반응하는 요소 만들기, 게임 성능 확보를 위한 쿨다운 함수 제공	충돌 감지	Chris
19	스페이스 게임	점수 기록	게임 상태와 성과에 따른 수학 계산 수행	점수 기록	Chris
20	스페이스 게임	게임 종료 및 재시작	게임 종료 및 재시작 방법 학습, 자원 정리 및 변수 초기화 방법	종료 조건	Chris
21	뱅킹 앱	웹 앱의 HTML 템플릿 및 라우팅	멀티페이지 웹사이트 아키텍처 스캐폴딩, 라우팅 및 HTML 템플릿 생성 방법 학습	HTML 템플릿 및 라우팅	Yohan
22	뱅킹 앱	로그인 및 회원가입 폼 만들기	폼 작성과 검증 처리 방법 학습	폼	Yohan
23	뱅킹 앱	데이터 가져오기 및 사용 방법	앱 내 데이터 흐름, 데이터 가져오기, 저장, 폐기 방법 학습	데이터	Yohan
24	뱅킹 앱	상태 관리 개념	앱 상태 유지 및 프로그래밍 방식 상태 관리 방법 학습	상태 관리	Yohan
25	Browser/VScode 코드	VSCode 사용법	코드를 작성하는 방법 학습	VSCode 코드 에디터 사용법	Chris
26	AI 어시스턴트	AI 활용	나만의 AI 어시스턴트 만들기 학습	AI 어시스턴트 프로젝트	Chris

🏫 교육 철학

우리 교육과정은 두 가지 핵심 교육 원칙을 기반으로 설계되었습니다:

• 프로젝트 기반 학습
• 자주 퀴즈 진행

이 프로그램은 JavaScript, HTML, CSS의 기본 원리와 현대 웹 개발자가 사용하는 최신 도구 및 기법을 가르칩니다. 학생들은 타이핑 게임, 가상 테라리움, 친환경 브라우저 확장 기능, 스페이스 인베이더 스타일 게임, 그리고 비즈니스용 뱅킹 앱을 직접 만들어 보며 실무 경험을 쌓을 기회를 가집니다. 시리즈가 끝날 때쯤 학생들은 웹 개발에 대한 탄탄한 이해를 가지게 됩니다.

🎓 이 교육과정의 처음 몇 개 수업은 Microsoft Learn의 학습 경로로 수강할 수 있습니다!

콘텐츠가 프로젝트와 일치하여 학생들이 과정에 더 몰입할 수 있으며 개념 유지력이 향상됩니다. JavaScript 기초 개념을 소개하는 여러 기초 수업과, 이 과정에 기여한 저자들이 참여한 "JavaScript 초보자 시리즈"의 비디오도 함께 제공합니다.

또한, 수업 전에 간단한 퀴즈를 통해 학생이 주제 학습의 의지를 다지도록 하고, 수업 후 두 번째 퀴즈로 추가 학습 효과를 보장합니다. 이 교육과정은 융통성 있고 재미있도록 설계되었으며 전체 또는 일부만 수강할 수 있습니다. 프로젝트들은 작게 시작하여 12주 과정 마지막에는 점점 복잡해집니다.

기본 웹 개발 기술에 집중하기 위해 JavaScript 프레임워크 도입은 의도적으로 피했지만, 이 교육과정을 완료한 뒤 다음 단계로 "Node.js 초보자 시리즈"의 동영상을 통해 Node.js를 학습하는 것을 권장합니다.

우리의 행동 강령 및 기여 가이드라인을 참고하세요. 건설적인 피드백을 환영합니다!

🧭 오프라인 접근

Docsify를 이용해 이 문서를 오프라인에서 실행할 수 있습니다. 이 저장소를 포크하고, 로컬 머신에 Docsify 설치 후, 이 저장소 루트 폴더에서 docsify serve 명령을 실행하세요. 웹사이트는 로컬호스트 3000번 포트에서 제공됩니다: localhost:3000.

📘 PDF

전체 수업 자료 PDF는 여기에서 확인할 수 있습니다.

🎒 기타 강의

우리 팀은 다른 강좌도 제작합니다! 확인해 보세요:

LangChain

Azure / Edge / MCP / Agents

---

Generative AI Series

---

Core Learning

---

Copilot Series

도움 받기

AI 앱 개발에 막히거나 질문이 있을 경우 MCP에 대해 학습하는 동료 및 경험 많은 개발자들과 토론에 참여하세요. 질문이 환영받고 지식이 자유롭게 공유되는 지원 커뮤니티입니다.

제품 피드백이나 빌드 중 오류가 있는 경우 다음을 방문하세요:

라이선스

이 저장소는 MIT 라이선스 하에 있습니다. 자세한 내용은 LICENSE 파일을 참조하세요.

---

면책 조항:
이 문서는 AI 번역 서비스 Co-op Translator를 사용하여 번역되었습니다. 정확성을 위해 노력하고 있으나, 자동 번역은 오류나 부정확한 부분이 포함될 수 있음을 유의하시기 바랍니다. 원문 문서는 권위 있는 출처로 간주되어야 합니다. 중요한 정보의 경우 전문 인간 번역을 권장합니다. 본 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해서는 당사가 책임지지 않습니다.