KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #typescript #developer-tools #claude-code #ai-agent #codex #deepseek-harness #ai-agents #cli #react #mcp

Web-Dev-For-Beginners

★ 96,359 Open GitHub ↗

24개의 레슨, 12주의 커리큘럼으로 웹 개발을 시작해 보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)

[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)

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

Microsoft Cloud Advocates가 제작한 12주 간의 종합 과정을 통해 웹 개발의 기초를 배워보세요. 24개의 각 레슨은 테라리움, 브라우저 확장 프로그램, 우주 게임과 같은 실습 프로젝트를 통해 JavaScript, CSS, HTML을 깊이 있게 다룹니다. 퀴즈, 토론, 실무 과제에 참여해 보세요. 효과적인 프로젝트 중심 교육법을 통해 기술을 향상시키고 지식 유지력을 최적화하세요. 지금 코딩 여정을 시작해 보세요!

Azure AI Foundry Discord에 참여하여 전문가 및 동료 개발자들을 만나보세요.

[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)

이 리소스를 사용하려면 다음 단계를 따르세요.
1. **저장소 포크하기(Fork)**: [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) 클릭
2. **저장소 복제하기(Clone)**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Azure AI Foundry Discord에 참여하여 전문가 및 동료 개발자 만나기**](https://discord.com/invite/ByRwuEEgH4)

### 🌐 다국어 지원

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

[Arabic](./translations/ar/README.md) | [Bengali](./translations/bn/README.md) | [Bulgarian](./translations/bg/README.md) | [Burmese (Myanmar)](./translations/my/README.md) | [Chinese (Simplified)](./translations/zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](./translations/zh-HK/README.md) | [Chinese (Traditional, Macau)](./translations/zh-MO/README.md) | [Chinese (Traditional, Taiwan)](./translations/zh-TW/README.md) | [Croatian](./translations/hr/README.md) | [Czech](./translations/cs/README.md) | [Danish](./translations/da/README.md) | [Dutch](./translations/nl/README.md) | [Estonian](./translations/et/README.md) | [Finnish](./translations/fi/README.md) | [French](./translations/fr/README.md) | [German](./translations/de/README.md) | [Greek](./translations/el/README.md) | [Hebrew](./translations/he/README.md) | [Hindi](./translations/hi/README.md) | [Hungarian](./translations/hu/README.md) | [Indonesian](./translations/id/README.md) | [Italian](./translations/it/README.md) | [Japanese](./translations/ja/README.md) | [Kannada](./translations/kn/README.md) | [Khmer](./translations/km/README.md) | [Korean](./translations/ko/README.md) | [Lithuanian](./translations/lt/README.md) | [Malay](./translations/ms/README.md) | [Malayalam](./translations/ml/README.md) | [Marathi](./translations/mr/README.md) | [Nepali](./translations/ne/README.md) | [Nigerian Pidgin](./translations/pcm/README.md) | [Norwegian](./translations/no/README.md) | [Persian (Farsi)](./translations/fa/README.md) | [Polish](./translations/pl/README.md) | [Portuguese (Brazil)](./translations/pt-BR/README.md) | [Portuguese (Portugal)](./translations/pt-PT/README.md) | [Punjabi (Gurmukhi)](./translations/pa/README.md) | [Romanian](./translations/ro/README.md) | [Russian](./translations/ru/README.md) | [Serbian (Cyrillic)](./translations/sr/README.md) | [Slovak](./translations/sk/README.md) | [Slovenian](./translations/sl/README.md) | [Spanish](./translations/es/README.md) | [Swahili](./translations/sw/README.md) | [Swedish](./translations/sv/README.md) | [Tagalog (Filipino)](./translations/tl/README.md) | [Tamil](./translations/ta/README.md) | [Telugu](./translations/te/README.md) | [Thai](./translations/th/README.md) | [Turkish](./translations/tr/README.md) | [Ukrainian](./translations/uk/README.md) | [Urdu](./translations/ur/README.md) | [Vietnamese](./translations/vi/README.md)

> **로컬에서 복제(Clone)하고 싶으신가요?**
>
> 이 저장소는 50개 이상의 언어 번역을 포함하고 있어 다운로드 크기가 크게 증가합니다. 번역을 제외하고 복제하려면 스파스 체크아웃(sparse checkout)을 사용하세요.
>
> **Bash / macOS / Linux:**
> ```bash
> 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'
> ```
>
> **CMD (Windows):**
> ```cmd
> 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"
> ```
>
> 이렇게 하면 훨씬 빠른 다운로드 속도로 과정을 완료하는 데 필요한 모든 것을 얻을 수 있습니다.

**추가 번역을 원하시는 경우, 지원되는 언어 목록은 [여기](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)에서 확인하실 수 있습니다.**

[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)

#### 🧑‍🎓 _학생이신가요?_

초보자용 리소스, 학생 팩, 무료 인증서 바우처를 받는 방법까지 찾을 수 있는 [**학생 허브 페이지(Student Hub page)**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon)를 방문해 보세요. 콘텐츠가 매월 교체되므로 즐겨찾기에 추가하고 수시로 확인해야 하는 페이지입니다.

### 📣 공지 사항 - 완료해야 할 새로운 GitHub Copilot Agent 모드 챌린지!

새로운 챌린지가 추가되었습니다. 대부분의 챕터에서 "GitHub Copilot Agent Challenge 🚀"를 찾아보세요. GitHub Copilot과 Agent 모드를 사용하여 완료할 수 있는 새로운 챌린지입니다. Agent 모드를 사용해 본 적이 없다면, 텍스트 생성뿐만 아니라 파일 생성 및 편집, 명령어 실행 등 다양한 작업을 수행할 수 있습니다.

### 📣 공지 사항 - _생성형 AI를 사용하여 빌드할 새 프로젝트_

새로운 AI Assistant 프로젝트가 방금 추가되었습니다. [프로젝트](./9-chat-project/README.md)를 확인해 보세요.

### 📣 공지 사항 - JavaScript용 생성형 AI _신규 커리큘럼_ 출시

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

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

![Background](https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/main/images/background.png)

- 기초부터 RAG까지 모든 것을 다루는 레슨.
- GenAI와 컴패니언 앱을 사용하여 역사 속 인물들과 상호작용해 보세요.
- 재미있고 몰입감 넘치는 서사 속에서 시간 여행을 하게 될 것입니다!

![character](https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/main/images/character.png)

각 레슨에는 완료해야 할 과제, 이해도 점검(knowledge check), 그리고 다음과 같은 주제를 학습하도록 안내하는 챌린지가 포함되어 있습니다.
- 프롬프팅 및 프롬프트 엔지니어링
- 텍스트 및 이미지 앱 생성
- 검색 앱

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

## 🌱 시작하기

> **강사진**께서는 이 커리큘럼을 사용하는 방법에 대한 [몇 가지 제안 사항](for-teachers.md)을 참고해 주세요. [토론 포럼](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)에 피드백을 남겨주시면 감사하겠습니다!

**[학습자](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**께서는 각 레슨마다 강의 전 퀴즈로 시작하여 강의 자료를 읽고, 다양한 활동을 완료한 후, 강의 후 퀴즈를 통해 이해도를 점검해 보세요.

학습 경험을 향상시키기 위해 동료들과 소통하며 함께 프로젝트를 진행해 보세요! 모더레이터 팀이 질문에 답변해 드릴 [토론 포럼(discussion forum)](https://github.com/microsoft/Web-Dev-For-Beginners/discussions)에서의 토론을 적극 권장합니다.

교육 과정을 더 발전시키기 위해, 추가 학습 자료를 위해 [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon)을 탐색해 보실 것을 강력히 권장합니다.

### 📋 환경 설정

이 커리큘럼은 바로 사용할 수 있는 개발 환경을 갖추고 있습니다! 시작할 때 [Codespace](https://github.com/features/codespaces/)(_브라우저 기반, 설치가 필요 없는 환경_)에서 커리큘럼을 실행하거나, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)와 같은 텍스트 편집기를 사용하여 로컬 컴퓨터에서 실행하도록 선택할 수 있습니다.

#### 저장소 만들기
작업 내용을 쉽게 저장할 수 있도록 이 저장소의 개인 복사본을 만드는 것이 좋습니다. 페이지 상단의 **Use this template** 버튼을 클릭하면 됩니다. 이렇게 하면 커리큘럼의 복사본이 포함된 새 저장소가 GitHub 계정에 생성됩니다.

다음 단계를 따르세요.
1. **저장소 포크하기(Fork)**: 이 페이지 우측 상단의 "Fork" 버튼을 클릭합니다.
2. **저장소 복제하기(Clone)**:   `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`

#### Codespace에서 커리큘럼 실행하기

생성한 저장소 복사본에서 **Code** 버튼을 클릭하고 **Open with Codespaces**를 선택합니다. 그러면 작업할 수 있는 새로운 Codespace가 생성됩니다.

![Codespace](https://raw.githubusercontent.com/microsoft/Web-Dev-For-Beginners/main/images/createcodespace.png)

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

컴퓨터에서 이 커리큘럼을 로컬로 실행하려면 텍스트 편집기, 브라우저, 커맨드 라인 도구가 필요합니다. 첫 번째 레슨인 [프로그래밍 언어 소개 및 필수 도구](./1-getting-started-lessons/1-intro-to-programming-languages)에서 본인에게 가장 잘 맞는 도구를 선택할 수 있도록 각 도구의 다양한 옵션을 안내해 드립니다.

[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)를 편집기로 사용하는 것을 권장하며, 이 편집기에는 [터미널(Terminal)](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)이 내장되어 있습니다. Visual Studio Code는 [여기](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)에서 다운로드할 수 있습니다.

1. 컴퓨터에 저장소를 복제(Clone)합니다. **Code** 버튼을 클릭하고 URL을 복사하여 수행할 수 있습니다.

[CodeSpace](./images/createcodespace.png)

그런 다음, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) 내에서 [터미널(Terminal)](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon)을 열고 방금 복사한 URL로 `<your-repository-url>`을 대체하여 다음 명령어를 실행합니다.

```bash 
    git clone <your-repository-url>
    ```

2. Visual Studio Code에서 폴더를 엽니다. **File** > **Open Folder**를 클릭하고 방금 복제한 폴더를 선택하여 수행할 수 있습니다.

>  권장되는 Visual Studio Code 확장 프로그램:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - Visual Studio Code 내에서 HTML 페이지 미리보기
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - 더 빠른 코드 작성 지원

## 📂 각 레슨 포함 내용:

- 선택적 스케치노트(sketchnote)
- 선택적 보충 비디오
- 레슨 전 워밍업 퀴즈
- 텍스트 강의
- 프로젝트 기반 레슨의 경우, 프로젝트 빌드 방법에 대한 단계별 가이드
- 이해도 점검 (knowledge checks)
- 챌린지
- 보충 읽기 자료
- 과제
- [레슨 후 퀴즈](https://ff-quizzes.netlify.app/web/)

> **퀴즈 관련 참고 사항**: 모든 퀴즈는 Quiz-app 폴더에 포함되어 있으며, 각각 3개 문항으로 구성된 총 48개의 퀴즈가 있습니다. 퀴즈 앱은 [여기](https://ff-quizzes.netlify.app/web/)에서 이용할 수 있으며, 로컬에서 실행하거나 Azure에 배포할 수 있습니다. `quiz-app` 폴더의 지침을 따르세요.

## 🗃️ 레슨

|     |                       프로젝트 이름                       |                            학습 개념                             | 학습 목표                                                                                                                 |                                                         연결된 레슨                                                          |         작성자          |
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01  |                     Getting Started                      |           프로그래밍 소개 및 필수 개발 도구           | 대부분의 프로그래밍 언어 이면에 있는 기본 원리와 전문 개발자의 업무를 돕는 소프트웨어에 대해 학습합니다. | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |
| 02  |                     Getting Started                      |             GitHub 기초, 팀 협업 작업 포함             | 프로젝트에서 GitHub를 사용하는 방법, 코드베이스에서 다른 사람들과 협업하는 방법                                                    |                            [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |
| 03  |                     Getting Started                      |                             웹 접근성                              | 웹 접근성의 기초를 배웁니다.                                                                                               |                       [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |
| 04  |                        JS Basics                         |                         JavaScript 데이터 타입                         | JavaScript 데이터 타입의 기초                                                                                                 |                                       [Data Types](./2-js-basics/1-data-types/README.md)                                        |         Jasmine         |
| 05  |                        JS Basics                         |                         함수와 메서드                          | 애플리케이션의 로직 흐름을 관리하기 위한 함수와 메서드에 대해 배웁니다.                                                             |                              [Functions and Methods](./2-js-basics/2-functions-methods/README.md)                               | Jasmine and Christopher |
| 06  |                        JS Basics                         |                        JS로 조건 판단하기                        | 의사결정 메서드를 사용하여 코드에서 조건을 생성하는 방법을 배웁니다.                                                           |                                 [Making Decisions](./2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |
| 07  |                        JS Basics                         |                            배열과 루프                             | JavaScript의 배열과 루프를 사용하여 데이터 다루기                                                                                 |                                   [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |
| 08  |       [Terrarium](./3-terrarium/solution/README.md)       |                            실전 HTML                             | 레이아웃 구축에 초점을 맞춰 온라인 테라리움을 만들기 위한 HTML을 빌드합니다.                                                         |                                 [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |
| 09  |       [Terrarium](./3-terrarium/solution/README.md)       |                            실전 CSS                              | 페이지 반응형 구현을 포함한 CSS의 기초에 초점을 맞춰 온라인 테라리움의 스타일을 지정하는 CSS를 빌드합니다.                         |                                  [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |
| 10  |            [Terrarium](./3-terrarium/solution/README.md)            |                 JavaScript 클로저, DOM 조작                  | 클로저와 DOM 조작에 초점을 맞춰 테라리움이 드래그 앤 드롭 인터페이스로 작동하도록 JavaScript를 빌드합니다.             |                  [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
| 11  |          [Typing Game](./4-typing-game/solution/README.md)          |                          타이핑 게임 만들기                          | 키보드벤트를 사용하여 JavaScript 앱의 로직을 구동하는 방법을 배웁니다.                                                          |                                [Event-Driven Programming](./4-typing-game/typing-game/README.md)                                |       Christopher       |
| 12  | [Green Browser Extension](./5-browser-extension/solution/README.md) |                         브라우저와 함께 작업하기                         | 브라우저의 작동 방식, 역사, 그리고 브라우저 확장 프로그램의 첫 번째 요소를 스캐폴딩하는 방법을 배웁니다.                           |                               [About Browsers](./5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
| 13  | [Green Browser Extension](./5-browser-extension/solution/README.md) | 폼 구축, API 호출 및 로컬 스토리지 변수 저장 | 로컬 스토리지에 저장된 변수를 사용하여 API를 호출하도록 브라우저 확장 프로그램의 JavaScript 요소를 빌드합니다.                      |                [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
| 14  | [Green Browser Extension](./5-browser-extension/solution/README.md) |          브라우저 백그라운드 프로세스, 웹 성능          | 브라우저의 백그라운드 프로세스를 사용하여 확장 프로그램 아이콘 관리하기; 웹 성능 및 몇 가지 최적화 기법 학습                        |             [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
| 15  |           [Space Game](./6-space-game/solution/README.md)           |             JavaScript를 활용한 고급 게임 개발             | 게임 빌드를 준비하기 위해 클래스(Classes)와 컴포지션(Composition)을 모두 사용한 상속 및 Pub/Sub 패턴에 대해 배웁니다.              |                      [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md)                       |          Chris          |
| 16  |           [Space Game](./6-space-game/solution/README.md)           |                           캔버스에 그리기                            | 화면에 요소를 그리는 데 사용되는 Canvas API에 대해 배웁니다.                                                                       |                                [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
| 17  |           [Space Game](./6-space-game/solution/README.md)           |                   화면 전체에서 요소 이동시키기                    | 데카르트 좌표계와 Canvas API를 사용하여 요소에 움직임을 부여하는 방법을 알아봅니다.                                            |                           [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
| 18  |           [Space Game](./6-space-game/solution/README.md)           |                          충돌 감지                           | 키 입력을 사용하여 요소들이 서로 충돌하고 반응하도록 만들고, 게임 성능을 보장하기 위한 쿨다운 기능을 제공합니다.                   |                              [Collision Detection](./6-space-game/4-collision-detection/README.md)                              |          Chris          |
| 19  |           [Space Game](./6-space-game/solution/README.md)           |                             점수 유지                              | 게임 상태와 성능에 따라 수학적 계산 수행                                                                                            |                                    [Keeping Score](./6-space-game/5-keeping-score/README.md)                                    |          Chris          |
| 20  |           [Space Game](./6-space-game/solution/README.md)           |                     게임 종료 및 재시작                      | 에셋 정리 및 변수 값 초기화를 포함하여 게임 종료 및 재시작에 대해 배웁니다.                                                       |                                [The Ending Condition](./6-space-game/6-end-condition/README.md)                                 |          Chris          |
| 21  |         [Banking App](./7-bank-project/solution/README.md)          |                 웹 앱의 HTML 템플릿과 라우트                 | 라우팅과 HTML 템플릿을 사용하여 멀티페이지 웹사이트 아키텍처의 스캐폴드를 생성하는 방법을 배웁니다.                             |                            [HTML Templates and Routes](./7-bank-project/1-template-route/README.md)                             |          Yohan          |
| 22  |         [Banking App](./7-bank-project/solution/README.md)          |                  로그인 및 회원가입 폼 구축                   | 폼 구축 및 유효성 검사 루틴 처리 방법에 대해 배웁니다.                                                                          |                                           [Forms](./7-bank-project/2-forms/README.md)                                           |          Yohan          |
| 23  |         [Banking App](./7-bank-project/solution/README.md)          |                   데이터 페치 및 사용 메서드                   | 앱 안팎으로 데이터가 흐르는 방식, 페치하고 저장하며 처분하는 방법                                                                  |                                            [Data](./7-bank-project/3-data/README.md)                                            |          Yohan          |
| 24  |         [Banking App](./7-bank-project/solution/README.md)          |                      상태 관리의 개념                      | 앱이 상태를 유지하는 방식과 프로그래밍 방식으로 이를 관리하는 방법을 배웁니다.                                                      |                                [State Management](./7-bank-project/4-state-management/README.md)                                |          Yohan          |
| 25 | [Browser/VScode Code](./8-code-editor/) | VScode 작업 | 코드 편집기 사용법 배우기| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | AI 작업 | 나만의 AI 어시스턴트 구축 방법 배우기 | [AI Assistant project](./9-chat-project/README.md) | Chris |

## 🏫 교육학적 접근 방식

우리 커리큘럼은 두 가지 핵심 교육 원칙을 염두에 두고 설계되었습니다.
* 프로젝트 기반 학습
* 빈번한 퀴즈

이 프로그램은 JavaScript, HTML, CSS의 기초뿐만 아니라 오늘날의 웹 개발자들이 사용하는 최신 도구와 기술을 가르칩니다. 학생들은 타이핑 게임, 가상 테라리움, 친환경 브라우저 확장 프로그램, 스페이스 인베이더 스타일의 게임, 그리고 비즈니스용 뱅킹 앱을 직접 빌드하면서 실습 경험을 쌓을 수 있는 기회를 갖게 됩니다. 이 시리즈가 끝날 때쯤이면 학생들은 웹 개발에 대한 탄탄한 이해를 갖추게 될 것입니다.

> 🎓 Microsoft Learn의 [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon)를 통해 이 커리큘럼의 처음 몇 가지 레슨을 수강할 수 있습니다!

콘텐츠가 프로젝트와 일치하도록 보장함으로써 학생들에게 더욱 흥미로운 학습 과정을 제공하고 개념 유지력을 높일 수 있습니다. 또한, 이 커리큘럼의 일부 저자들이 기여한 비디오 컬렉션 "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"의 비디오와 짝을 이룬 JavaScript 기초 입문 레슨을 여러 개 작성하여 개념을 소개했습니다.

또한, 수업 전의 가벼운 퀴즈는 특정 주제를 학습하려는 학생의 의도를 다져주고, 수업 후의 두 번째 퀴즈는 지식을 더욱 오래 기억하도록 보장합니다. 이 커리큘럼은 유연하고 재미있게 설계되었으며 전체를 수강하거나 일부만 수강할 수도 있습니다. 프로젝트는 작게 시작하여 12주 주기가 끝날 때쯤에는 점점 더 복잡해집니다.

프레임워크를 채택하기 전에 웹 개발자로서 필요한 기본 스킬에 집중하기 위해 의도적으로 JavaScript 프레임워크 도입을 피했지만, 이 커리큘럼을 완료한 후 좋은 다음 단계는 또 다른 비디오 컬렉션인 "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"를 통해 Node.js에 대해 학습하는 것입니다.

> [행동 강령(Code of Conduct)](CODE_OF_CONDUCT.md) 및 [기여 가이드라인(Contributing)](CONTRIBUTING.md)을 확인해 주세요. 건설적인 피드백을 환영합니다!

## 🧭 오프라인 액세스

[Docsify](https://docs.js.org/#/)를 사용하여 이 문서를 오프라인에서 실행할 수 있습니다. 이 저장소를 포크하고 로컬 머신에 [Docsify를 설치](https://docsify.js.org/#/quickstart)한 다음, 이 저장소의 루트 폴더에서 `docsify serve`를 입력하세요. 웹사이트가 로컬 호스트의 3000번 포트(`localhost:3000`)에서 제공됩니다.

## 📘 PDF

모든 레슨의 PDF는 [여기](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)에서 찾을 수 있습니다.

## 🎒 기타 코스

우리 팀은 다른 코스들도 제작하고 있습니다! 확인해 보세요:

### LangChain
[![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners)
[![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---

### Azure / Edge / MCP / Agents
[![AZD for Beginners](https://img.shields.io/badge/AZD%20for%20Beginners-0078D4?style=for-the-badge&labelColor=E5E7EB&color=0078D4)](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Edge AI for Beginners](https://img.shields.io/badge/Edge%20AI%20for%20Beginners-00B8E4?style=for-the-badge&labelColor=E5E7EB&color=00B8E4)](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![MCP for Beginners](https://img.shields.io/badge/MCP%20for%20Beginners-009688?style=for-the-badge&labelColor=E5E7EB&color=009688)](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[![AI Agents for Beginners](https://img.shields.io/badge/AI%20Agents%20for%20Beginners-00C49A?style=for-the-badge&labelColor=E5E7EB&color=00C49A)](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)

---
 
### Generative AI Series
[![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[![Generative AI (JavaScript)](https://img.shields.io/badge/Generative%20AI%20(JavaScript)-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)

---
 
### Core Learning
[![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[![Cybersecurity for Beginners](https://img.shields.io/badge/Cybersecurity%20for%20Beginners-F97316?style=for-the-badge&labelColor=E5E7EB&color=F97316)](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[![Web Dev for Beginners](https://img.shields.io/badge/Web%20Dev%20for%20Beginners-EC4899?style=for-the-badge&labelColor=E5E7EB&color=EC4899)](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[![IoT for Beginners](https://img.shields.io/badge/IoT%20for%20Beginners-14B8A6?style=for-the-badge&labelColor=E5E7EB&color=14B8A6)](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[![XR Development for Beginners](https://img.shields.io/badge/XR%20Development%20for%20Beginners-38BDF8?style=for-the-badge&labelColor=E5E7EB&color=38BDF8)](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)

---
 
### Copilot Series
[![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst)

## 도움 받기

막히는 부분이 있거나 AI 앱 구축에 대해 질문이 있으신가요? MCP에 대한 토론에서 동료 학습자 및 숙련된 개발자들과 함께해 보세요. 질문이 환영받고 지식이 자유롭게 공유되는 지원이 가득한 커뮤니티입니다.

[![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG)

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

[![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum)

## 라이선스

이 저장소는 MIT 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 [LICENSE](LICENSE) 파일을 참조하세요.

Web-Dev-For-Beginners

Was this content helpful?

Recent Feedback

Download README