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을 통해 지원 (자동화 및 항상 최신 상태 유지)

아랍어 | 벵골어 | 불가리아어 | 버마어 (미얀마) | 중국어 (간체) | 중국어 (번체, 홍콩) | 중국어 (번체, 마카오) | 중국어 (번체, 대만) | 크로아티아어 | 체코어 | 덴마크어 | 네덜란드어 | 에스토니아어 | 핀란드어 | 프랑스어 | 독일어 | 그리스어 | 히브리어 | 힌디어 | 헝가리어 | 인도네시아어 | 이탈리아어 | 일본어 | 칸나다어 | 한국어 | 리투아니아어 | 말레이어 | 말라얄람어 | 마라티어 | 네팔어 | 나이지리아 피진 | 노르웨이어 | 페르시아어 (파르시) | 폴란드어 | 포르투갈어 (브라질) | 포르투갈어 (포르투갈) | 펀자브어 (구르무키) | 루마니아어 | 러시아어 | 세르비아어 (키릴문자) | 슬로바키아어 | 슬로베니아어 | 스페인어 | 스와힐리어 | 스웨덴어 | 따갈로그어 (필리피노어) | 타밀어 | 텔루구어 | 태국어 | 터키어 | 우크라이나어 | 우르두어 | 베트남어

로컬 클론 선호하시나요?

이 저장소에는 50개 이상의 언어 번역이 포함되어 있어 다운로드 크기가 크게 증가합니다. 번역 없이 클론하려면 sparse checkout을 사용하세요:

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 어시스턴트 프로젝트가 추가되었습니다. 프로젝트를 확인하세요 project

📣 공지 - Generative AI for JavaScript 새 커리큘럼 공개

새 Generative AI 커리큘럼을 놓치지 마세요!

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

• 기본부터 RAG까지 다루는 강의.
• GenAI와 동반 앱을 이용해 역사적 인물과 상호작용하기.
• 재미있고 몰입도 높은 스토리텔링, 시간 여행을 체험하세요!

각 강의에는 주제 학습을 돕는 과제, 지식 점검, 챌린지가 포함되어 있습니다:

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

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

🌱 시작하기

교사분들께, 이 커리큘럼 활용법에 대한 제안을 포함했습니다. 토론 포럼에서 의견을 들려주세요!

학습자 여러분, 각 강의는 강의 전 퀴즈로 시작해, 강의 자료 읽기, 다양한 활동 수행, 강의 후 퀴즈로 마무리하세요.

학습 경험을 향상하기 위해 동료들과 소통하며 프로젝트를 함께 진행해보세요! 토론 포럼에서 토론을 권장하며, 모더레이터 팀이 질문에 답변할 준비가 되어 있습니다.

추가 학습 자료는 Microsoft Learn에서 확인하는 것을 강력히 추천합니다.

📋 개발 환경 설정

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

저장소 생성

작업을 쉽게 저장하려면, 자신의 GitHub 계정에 이 저장소의 복사본을 만드는 것이 좋습니다. 페이지 상단의 Use this template 버튼을 클릭하면 커리큘럼 복사본이 새로운 저장소로 생성됩니다.

단계별로 진행하세요:

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 내에서 터미널을 열고, 방금 복사한 URL을 <your-repository-url>에 대체하여 다음 명령어를 실행합니다:

   git clone <your-repository-url>
   

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

추천하는 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 기본	자바스크립트 데이터 유형	자바스크립트 데이터 유형의 기본	데이터 유형	Jasmine
05	JS 기본	함수 및 메서드	애플리케이션 로직 흐름을 관리하는 함수 및 메서드 학습	함수 및 메서드	Jasmine and Christopher
06	JS 기본	자바스크립트 조건문 만들기	조건문을 사용하여 코드 내 의사 결정을 만드는 방법 학습	조건문 만들기	Jasmine
07	JS 기본	배열 및 반복문	자바스크립트에서 배열과 반복문을 사용해 데이터 작업하기	배열 및 반복문	Jasmine
08	테라리움	HTML 실습	온라인 테라리움 생성을 위한 HTML 마크업 구성, 레이아웃 구축 중심	HTML 소개	Jen
09	테라리움	CSS 실습	온라인 테라리움 스타일링 CSS 작성, 기본 CSS와 반응형 웹페이지 만들기 중심	CSS 소개	Jen
10	테라리움	자바스크립트 클로저, DOM 조작	드래그 앤 드롭 인터페이스 구현을 위한 자바스크립트 작성, 클로저 및 DOM 조작 중심	자바스크립트 클로저, DOM 조작	Jen
11	타이핑 게임	타이핑 게임 만들기	키보드 이벤트를 사용해 자바스크립트 앱의 로직 제어 방법 학습	이벤트 기반 프로그래밍	Christopher
12	그린 브라우저 확장	브라우저 작동 원리	브라우저 작동원리, 역사, 첫 브라우저 확장 요소 구조 방법 학습	브라우저 개요	Jen
13	그린 브라우저 확장	API 호출, 폼 빌드, 로컬 저장소 변수 사용	API 호출을 위한 브라우저 확장 자바스크립트 요소 작성, 로컬 저장소 변수 활용	API, 폼, 로컬 저장소	Jen
14	그린 브라우저 확장	브라우저 백그라운드 프로세스 및 웹 성능	확장 아이콘 관리를 위한 백그라운드 프로세스 사용법, 웹 성능 및 최적화 학습	백그라운드 작업 및 성능	Jen
15	우주 게임	고급 자바스크립트 게임 개발	클래스와 컴포지션, 퍼블리시/서브스크라이브(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	브라우저/VScode 코드	VScode 사용법	코드 편집기 사용법 학습	VScode 코드 편집기 사용	Chris
26	AI 어시스턴트	AI 활용	나만의 AI 어시스턴트 만들기 학습	AI 어시스턴트 프로젝트	Chris

🏫 교육 방식

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

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

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

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

내용을 프로젝트와 연계하여 학생들의 몰입도와 개념 기억력을 높였습니다. 또한, 개념 소개를 위한 자바스크립트 기본 강의와 함께 "초보자를 위한 자바스크립트 시리즈" 영상 튜토리얼 중 일부 저자들이 이 커리큘럼에 기여하였습니다.

수업 전 저위험 퀴즈는 학습 주제에 대한 학생 의도를 설정하며, 수업 후 두 번째 퀴즈는 이해도를 높입니다. 이 커리큘럼은 유연하고 재미있도록 설계되었으며 전체 또는 일부만 수강할 수 있습니다. 프로젝트는 작게 시작해 12주 과정 후 점점 복잡해집니다.

웹 개발자로서 프레임워크 도입 전 필요한 기본기들에 집중하기 위해 자바스크립트 프레임워크 도입은 일부러 배제하였으며, 다음 단계로 "초보자를 위한 Node.js 시리즈" 영상을 통해 Node.js를 학습하는 것을 추천합니다.

우리 행동 강령 및 기여 지침을 참조하세요. 건설적인 피드백을 환영합니다!

🧭 오프라인 접근

이 문서를 오프라인에서 실행하려면 Docsify를 사용하세요. 이 저장소를 포크하고, 로컬 머신에 Docsify를 설치한 뒤 저장소 루트 폴더에서 docsify serve를 입력하세요. 웹사이트는 로컬호스트 3000번 포트에서 서비스됩니다: localhost:3000.

📘 PDF

전체 수업 PDF는 여기에서 찾을 수 있습니다.

🎒 다른 강좌

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

LangChain

---

Azure / Edge / MCP / Agents

---

생성 AI 시리즈

---

핵심 학습

---

코파일럿 시리즈

도움 받기

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

제품 피드백이나 개발 중 오류가 발생하면 다음을 방문하세요:

라이선스

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

---

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