Web-Dev-For-Beginners/translations/ko

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

Microsoft Cloud Advocates가 제공하는 12주 과정의 종합 강좌를 통해 웹 개발의 기초를 배워보세요. 24개의 강의는 JavaScript, CSS, HTML을 다루며, 테라리움, 브라우저 확장 프로그램, 우주 게임과 같은 실습 프로젝트를 통해 학습합니다. 퀴즈, 토론, 실습 과제를 통해 학습을 심화하고, 프로젝트 기반 학습법으로 지식을 효과적으로 습득하세요. 지금 코딩 여정을 시작하세요!

🧑‍🎓 학생이신가요?

학생 허브 페이지를 방문해보세요. 초보자를 위한 자료, 학생 팩, 무료 인증서 바우처를 받을 수 있는 방법 등을 확인할 수 있습니다. 이 페이지를 즐겨찾기에 추가하고 매달 업데이트되는 콘텐츠를 확인하세요.

📣 공지 - 새로운 커리큘럼 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 계정에 커리큘럼 복사본이 생성됩니다.

다음 단계를 따르세요:

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을 복사한 후, Visual Studio Code의 터미널에서 아래 명령어를 실행하세요. <your-repository-url>을 복사한 URL로 대체하세요:

   git clone <your-repository-url>
   

2. 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	Green Browser Extension	브라우저 작업하기	브라우저의 작동 방식, 역사, 브라우저 확장의 첫 요소를 구성하는 방법을 배웁니다.	브라우저에 대하여	Jen
13	Green Browser Extension	폼 생성, API 호출 및 로컬 스토리지에 변수 저장	로컬 스토리지에 저장된 변수를 사용하여 API를 호출하는 브라우저 확장의 JavaScript 요소를 만듭니다.	API, 폼, 로컬 스토리지	Jen
14	Green Browser Extension	브라우저의 백그라운드 프로세스와 웹 성능	브라우저의 백그라운드 프로세스를 사용하여 확장의 아이콘을 관리하고, 웹 성능 및 최적화 방법에 대해 배웁니다.	백그라운드 작업 및 성능	Jen
15	Space Game	JavaScript를 활용한 고급 게임 개발	클래스와 컴포지션을 사용한 상속 및 Pub/Sub 패턴에 대해 배우며 게임 개발을 준비합니다.	고급 게임 개발 소개	Chris
16	Space Game	캔버스에 그리기	화면에 요소를 그리기 위해 사용되는 Canvas API에 대해 배웁니다.	캔버스에 그리기	Chris
17	Space Game	화면에서 요소 이동시키기	요소가 데카르트 좌표와 Canvas API를 사용하여 움직임을 얻는 방법을 알아봅니다.	요소 이동시키기	Chris
18	Space Game	충돌 감지	키 입력을 사용하여 요소가 서로 충돌하고 반응하도록 만들고, 게임 성능을 보장하기 위한 쿨다운 기능을 제공합니다.	충돌 감지	Chris
19	Space Game	점수 기록	게임 상태와 성능에 따라 수학적 계산을 수행합니다.	점수 기록	Chris
20	Space Game	게임 종료 및 재시작	자산 정리 및 변수 값 초기화를 포함하여 게임을 종료하고 재시작하는 방법을 배웁니다.	종료 조건	Chris
21	Banking App	웹 앱에서 HTML 템플릿과 라우트	라우팅과 HTML 템플릿을 사용하여 다중 페이지 웹사이트의 구조를 구성하는 방법을 배웁니다.	HTML 템플릿과 라우트	Yohan
22	Banking App	로그인 및 등록 폼 생성	폼 생성 및 유효성 검사 루틴 처리에 대해 배웁니다.	폼	Yohan
23	Banking App	데이터 가져오기 및 사용 방법	앱에서 데이터가 어떻게 흐르고, 가져오고, 저장하고, 삭제하는지에 대해 배웁니다.	데이터	Yohan
24	Banking App	상태 관리 개념	앱이 상태를 유지하는 방법과 이를 프로그래밍적으로 관리하는 방법을 배웁니다.	상태 관리	Yohan

🏫 교육 방법론

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

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

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

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

프로젝트와 콘텐츠를 일치시킴으로써 학습 과정을 학생들에게 더 흥미롭게 만들고 개념의 이해도를 높일 수 있습니다. 또한 JavaScript 기본 개념을 소개하는 여러 입문 수업을 작성했으며, "JavaScript 초보자 시리즈" 비디오 튜토리얼 컬렉션과 함께 제공됩니다. 이 비디오의 일부 저자들은 이 커리큘럼 제작에 기여했습니다.

또한, 수업 전 간단한 퀴즈는 학생들이 주제 학습에 집중하도록 의도를 설정하며, 수업 후 두 번째 퀴즈는 개념의 추가적인 이해를 보장합니다. 이 커리큘럼은 유연하고 재미있게 설계되었으며, 전체 또는 일부를 선택적으로 수강할 수 있습니다. 프로젝트는 작게 시작하여 12주 과정이 끝날 때쯤 점점 더 복잡해집니다.

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

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

🧭 오프라인 접근

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

📘 PDF

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

🎒 다른 강좌

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

• 초보자를 위한 생성형 AI
• 초보자를 위한 생성형 AI .NET
• JavaScript로 생성형 AI 배우기
• Java로 생성형 AI 배우기
• 초보자를 위한 AI
• 초보자를 위한 데이터 과학
• 초보자를 위한 머신러닝
• 초보자를 위한 사이버 보안
• 초보자를 위한 웹 개발
• 초보자를 위한 IoT
• 초보자를 위한 XR 개발
• GitHub Copilot 마스터하기: 에이전트적 사용
• C#/.NET 개발자를 위한 GitHub Copilot 마스터하기
• GitHub Copilot 모험 선택하기

라이선스

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

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