33 KiB

Raw Blame History

초보자를 위한 웹 개발 - 교육과정

Microsoft Cloud Advocates가 제공하는 12주간의 종합 과정으로 웹 개발의 기본을 배우세요. 총 24개의 수업에서 테라리움, 브라우저 확장 프로그램, 우주 게임과 같은 실습 프로젝트를 통해 JavaScript, CSS, HTML을 깊이 있게 탐구합니다. 퀴즈, 토론, 실습 과제에도 참여하세요. 효과적인 프로젝트 기반 교육법으로 실력을 향상시키고 지식 유지력을 최적화하세요. 오늘부터 코딩 여정을 시작하세요!

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

이 리소스를 사용하기 시작하려면 다음 단계를 따르세요:

저장소 포크하기: 클릭
저장소 클론하기: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Azure AI Foundry Discord에 참여하여 전문가 및 동료 개발자를 만나세요

🌐 다국어 지원

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

로컬 클론을 선호하시나요?

본 저장소에는 50개 이상의 언어 번역이 포함되어 있어 다운로드 크기가 상당히 증가합니다. 번역 없이 클론하려면 스파스 체크아웃(sparse checkout)을 사용하세요:

Bash / macOS / Linux:
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):
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 Agent 모드 챌린지!

새로운 챌린지가 추가되었습니다. 대부분의 장에서 "GitHub Copilot Agent Challenge 🚀"를 찾아보세요. 이는 GitHub Copilot과 Agent 모드를 사용하여 완료하는 새로운 도전입니다. Agent 모드를 처음 사용한다면, 텍스트 생성뿐 아니라 파일 생성 및 편집, 명령 실행 등도 할 수 있습니다.

📣 공지 - 생성 AI를 사용하여 만들 수 있는 새 프로젝트

새로운 AI Assistant 프로젝트가 추가되었습니다. 프로젝트를 확인하세요 project

📣 공지 - JavaScript를 위한 생성 AI 새 교육과정 출시

새로운 생성 AI 교육과정을 놓치지 마세요!

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

기본부터 RAG까지 모두 다루는 수업.
GenAI 및 동반 앱을 이용해 역사적 인물들과 상호작용 가능.
재미있고 몰입감 있는 내러티브로 시간 여행 중!

각 수업에는 완료해야 할 과제, 지식 확인, 그리고 다음 주제를 학습하는 데 도움이 되는 챌린지가 포함되어 있습니다:

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

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

🌱 시작하기

교사분들, 이 교육과정을 활용하는 방법에 대해 제안사항을 포함했습니다. 토론 포럼에서 여러분의 의견을 들려주세요!

**학습자**는 각 수업마다 강의 전 퀴즈를 시작으로, 강의 자료를 읽고 다양한 활동을 완료하며, 강의 후 퀴즈로 이해도를 점검하세요.

학습 경험을 향상시키기 위해 동료들과 협력하여 프로젝트를 진행하세요! 토론은 토론 포럼에서 권장되며, 중재자 팀이 여러분의 질문에 답변할 준비가 되어 있습니다.

교육을 더 확장하고 싶다면, 추가 학습 자료를 위해 Microsoft Learn 탐색을 강력히 추천합니다.

📋 환경 설정

이 교육과정은 바로 사용할 수 있는 개발 환경을 제공합니다! 시작할 때 Codespace (브라우저 기반, 설치 불필요 환경)에서 교육과정을 실행하거나, 컴퓨터에서 텍스트 편집기인 Visual Studio Code를 사용하여 로컬에서 실행할 수 있습니다.

저장소 생성하기

작업을 쉽게 저장하기 위해 본 저장소를 복사하는 것이 좋습니다. 페이지 상단에 있는 Use this template 버튼을 클릭하면 본 교육과정의 복사본이 내 GitHub 계정에 생성됩니다.

단계별로 진행하세요:

저장소 포크하기: 페이지 우측 상단의 "Fork" 버튼을 클릭하세요.
저장소 클론하기: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Codespace에서 교육과정 실행하기

생성한 저장소 복사본에서 Code 버튼을 클릭하고 Open with Codespaces를 선택하세요. 새 Codespace가 생성됩니다.

컴퓨터에서 로컬로 교육과정 실행하기

컴퓨터에서 이 교육과정을 실행하려면 텍스트 편집기, 브라우저, 명령줄 도구가 필요합니다. 첫 번째 수업인 프로그래밍 언어 및 도구 소개에서는 각 도구의 다양한 옵션을 안내하여 자신에게 맞는 것을 선택할 수 있도록 도와줍니다.

추천 편집기는 Visual Studio Code로, 내장된 터미널도 제공합니다. Visual Studio Code는 여기서 다운로드할 수 있습니다.

저장소를 컴퓨터에 복제하세요. 이는 Code 버튼을 클릭하고 URL을 복사하여 할 수 있습니다:

CodeSpace

그런 다음, Visual Studio Code 내에서 Terminal을 열고, 방금 복사한 URL을 <your-repository-url> 대신 사용하여 다음 명령어를 실행하세요:
```
git clone <your-repository-url>
```
Visual Studio Code에서 폴더를 엽니다. File > Open Folder를 클릭한 후 방금 복제한 폴더를 선택하면 됩니다.

권장 Visual Studio Code 확장 프로그램:

Live Server - Visual Studio Code 내에서 HTML 페이지 미리보기용

Copilot - 코드를 더 빠르게 작성하는 데 도움

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

선택적 스케치노트
선택적 보충 동영상
수업 전 준비 퀴즈
작성된 수업 내용
프로젝트 기반 수업의 경우, 프로젝트를 구축하는 단계별 가이드
지식 점검
도전 과제
보충 독서 자료
과제
수업 후 퀴즈

퀴즈에 대한 안내: 모든 퀴즈는 Quiz-app 폴더에 있으며, 총 48개의 퀴즈, 각 퀴즈는 3문제로 구성되어 있습니다. 퀴즈는 여기에서 볼 수 있으며, 퀴즈 앱은 로컬에서 실행하거나 Azure에 배포할 수 있습니다. quiz-app 폴더의 지침을 따르세요.

🗃️ 수업 목록

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

🏫 교수법

우리 커리큘럼은 두 가지 주요 교육 원칙을 기반으로 설계되었습니다:

프로젝트 기반 학습
빈번한 퀴즈

이 프로그램은 JavaScript, HTML, CSS의 기초뿐만 아니라 오늘날 웹 개발자들이 사용하는 최신 도구와 기법을 가르칩니다. 학생들은 타이핑 게임, 가상 테라리움, 친환경 브라우저 확장, 스페이스 인베이더 스타일 게임, 비즈니스용 뱅킹 앱을 만들며 실습 경험을 쌓습니다. 시리즈 마지막에는 웹 개발에 대한 탄탄한 이해를 갖추게 됩니다.

🎓 Microsoft Learn에서 이 커리큘럼의 첫 수업들을 학습 경로로 수강할 수 있습니다!

내용을 프로젝트와 연계함으로써 학생 참여를 높이고 개념 이해도를 향상시킵니다. 또한 JavaScript 기초 수업 몇 개는 개념 소개용으로 "Beginners Series to: JavaScript" 영상과 연계되어 있으며, 일부 저자가 본 커리큘럼에 기여했습니다.

수업 전 저위험 퀴즈로 학습 의도를 설정하고, 수업 후 두 번째 퀴즈로 이해도를 강화하도록 설계되었습니다. 본 커리큘럼은 유연하고 재미있게 진행할 수 있으며, 전체 또는 부분적으로 수강 가능하며, 프로젝트는 작게 시작해 12주 주기 말에는 점점 더 복잡해집니다.

프레임워크 채택 전에 웹 개발 기본기를 집중하고자 JavaScript 프레임워크 도입을 피했으나, 커리큘럼 완료 후 단계로 "Beginner Series to: Node.js" 영상을 통해 Node.js를 학습하는 것이 좋은 다음 단계가 될 것입니다.

우리의 행동 강령과 기여 가이드를 방문하세요. 건설적인 피드백을 환영합니다!

🧭 오프라인 접근

Docsify를 사용하면 이 문서를 오프라인으로도 실행할 수 있습니다. 이 저장소를 포크한 후, 로컬 머신에 Docsify를 설치하고, 이 저장소 루트 폴더에서 docsify serve 명령을 입력하면 됩니다. 웹사이트는 localhost의 3000 포트(localhost:3000)에서 서비스됩니다.

📘 PDF

모든 강의의 PDF는 여기에서 확인할 수 있습니다.

🎒 다른 강의

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

LangChain

Azure / Edge / MCP / Agents

생성 AI 시리즈

핵심 학습

Copilot 시리즈

도움받기

AI 앱 개발 중에 막히거나 질문이 있으면 MCP 관련 토론에 참여하세요. 질문을 환영하고 지식을 자유롭게 공유하는 지원 커뮤니티입니다.

제품 피드백이나 오류가 있으면 다음을 방문하세요:

라이선스

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

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

33 KiB Raw Blame History