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

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

🧑‍🎓 학생이신가요?

초보자용 리소스, 학생 팩, 무료 인증서 바우처를 얻을 수 있는 방법이 담긴 Student Hub 페이지를 방문하세요. 이 페이지를 북마크하고 매월 업데이트되는 콘텐츠를 확인하세요.

📣 공지 - 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을 복사하면 됩니다:

그런 다음 Visual Studio Code 내의 터미널을 열고 복사한 URL로 다음 명령을 실행하세요(<your-repository-url> 부분을 복사한 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 기초	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	그린 브라우저 확장 프로그램	브라우저 작업	브라우저 작동 방식, 역사 및 브라우저 확장 프로그램의 첫 번째 요소 스캐폴딩 방법 학습	브라우저 정보	Jen
13	그린 브라우저 확장 프로그램	폼 구축, API 호출 및 로컬 스토리지에 변수 저장	로컬 스토리지에 저장된 변수를 사용하여 API를 호출하는 브라우저 확장 프로그램의 JavaScript 요소 구축	API, 폼 및 로컬 스토리지	Jen
14	그린 브라우저 확장 프로그램	브라우저의 백그라운드 프로세스, 웹 성능	브라우저의 백그라운드 프로세스를 사용하여 확장 프로그램 아이콘 관리; 웹 성능 및 최적화 방법 학습	백그라운드 작업 및 성능	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

🏫 교육학

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

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

이 프로그램은 JavaScript, HTML, CSS의 기본과 현대 웹 개발자가 사용하는 최신 도구 및 기술을 가르칩니다. 학생들은 타이핑 게임, 가상 테라리움, 친환경 브라우저 확장 프로그램, 우주 침략자 스타일 게임 및 비즈니스를 위한 뱅킹 앱을 구축함으로써 실습 경험을 쌓을 기회를 갖게 됩니다. 시리즈가 끝날 때까지 학생들은 웹 개발에 대한 확실한 이해를 얻게 될 것입니다.

🎓 이 커리큘럼의 첫 몇 강의를 Microsoft Learn의 학습 경로로 수강할 수 있습니다!

콘텐츠가 프로젝트와 일치하도록 함으로써 학생들에게 더 매력적인 과정이 되고 개념의 기억력이 향상됩니다. 또한 JavaScript 기본 사항에 대한 몇 가지 입문 강의를 작성하여 개념을 소개하고 "JavaScript 초보자 시리즈" 비디오 컬렉션의 비디오와 함께 제공되며, 일부 저자는 이 커리큘럼에 기여했습니다.

또한 수업 전 저부담 퀴즈는 학생의 학습 의도를 설정하고, 수업 후 두 번째 퀴즈는 추가적인 기억력을 보장합니다. 이 커리큘럼은 유연하고 재미있게 설계되었으며 전체 또는 일부를 수강할 수 있습니다. 프로젝트는 작게 시작하여 12주 주기 끝날 때까지 점점 더 복잡해집니다.

우리는 프레임워크를 채택하기 전에 웹 개발자로서 필요한 기본 기술에 집중하기 위해 의도적으로 JavaScript 프레임워크를 소개하지 않았지만, 이 커리큘럼을 완료한 후 좋은 다음 단계는 "Node.js 초보자 시리즈" 비디오 컬렉션을 통해 Node.js에 대해 배우는 것입니다.

행동 강령과 기여 가이드라인을 확인하세요. 건설적인 피드백을 환영합니다!

🧭 오프라인 접근

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

📘 PDF

모든 강의의 PDF는 여기에서 찾을 수 있습니다.

🎒 다른 강의

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

라이선스

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