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

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

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

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

• 기본부터 RAG까지 다루는 수업
• 생성 AI 및 동반 앱을 사용해 역사적 인물과 상호작용
• 재미있고 몰입감 있는 스토리텔링, 시간 여행을 떠나는 기분!

각 수업에는 과제, 지식 확인 및 다음과 같은 주제를 학습할 수 있는 챌린지가 포함됩니다:

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

시작하려면 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에는 내장 터미널도 포함되어 있습니다. 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 기본	JavaScript 데이터 타입	JavaScript 데이터 타입 기본 학습	데이터 타입	Jasmine
05	JS 기본	함수와 메서드	애플리케이션의 논리 흐름 관리를 위한 함수 및 메서드 학습	함수와 메서드	Jasmine and Christopher
06	JS 기본	JS로 조건 만들기	조건문을 사용하여 코드 내 조건을 만드는 방법 학습	조건 만들기	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를 활용한 고급 게임 개발	상속(클래스 및 합성), 퍼블리시/서브스크라이브 패턴 학습, 게임 구축 준비	고급 게임 개발 소개	Chris
16	우주 게임	캔버스 그리기	화면에 요소를 그리기 위한 캔버스 API 학습	캔버스 그리기	Chris
17	우주 게임	화면 요소 이동	데카르트 좌표와 캔버스 API를 사용한 요소 움직임 학습	요소 이동	Chris
18	우주 게임	충돌 감지	키 입력을 활용한 요소 간 충돌 및 반응 구현, 게임 성능 유지를 위한 쿨다운 기능 제공	충돌 감지	Chris
19	우주 게임	점수 계산	게임 상태와 성과에 기반한 수학 계산 수행	점수 계산	Chris
20	우주 게임	게임 종료 및 재시작	게임 종료 및 재시작, 자산 정리 및 변수 값 초기화 학습	종료 조건	Chris
21	은행 앱	웹 앱에서 HTML 템플릿 및 라우팅	멀티페이지 웹사이트 구조를 라우팅과 HTML 템플릿으로 스캐폴드하는 방법 학습	HTML 템플릿 및 라우팅	Yohan
22	은행 앱	로그인 및 등록 폼 만들기	폼 작성 및 검증 루틴 처리 방법 학습	폼	Yohan
23	은행 앱	데이터 가져오기 및 사용	앱 내 데이터 흐름, 데이터 조회, 저장, 폐기 방법	데이터	Yohan
24	은행 앱	상태 관리 개념	앱의 상태 유지 방법과 프로그래밍 방식으로 상태 관리하는 법 학습	상태 관리	Yohan
25	브라우저/VScode 코드	Visual Studio Code 사용법	코드 편집기 사용 방법 학습	VScode 코드 편집기 사용법	Chris
26	AI 어시스턴트	AI 작업	자신만의 AI 어시스턴트 구축법 학습	AI 어시스턴트 프로젝트	Chris

🏫 교육 철학

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

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

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

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

프로젝트에 내용이 맞춰지도록 하여 학생의 참여도를 높이고 개념의 기억을 강화합니다. 또한 JavaScript 기본에 대한 여러 스타터 강의와 함께, 이 커리큘럼에 기여한 몇몇 저자의 영상 모음 “초보자를 위한 JavaScript 시리즈” 동영상 강의를 마련하였습니다.

추가로, 수업 전의 저강도 퀴즈는 학생이 학습 주제에 집중하는 데 도움을 주며, 수업 후 퀴즈는 추가 학습 기억을 보장합니다. 이 커리큘럼은 유연하고 재미있게 설계되어 전체 또는 일부만 수강할 수 있습니다. 프로젝트들은 작게 시작해 12주 과정 종료 시점에 점점 복잡해집니다.

JavaScript 프레임워크 대신 웹 개발자로서 필요한 기본 기술에 집중하도록 의도적으로 피하고 있지만, 이 커리큘럼을 완료한 후 좋은 다음 단계는 또 다른 동영상 모음인 “초보자를 위한 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를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역본에는 오류나 부정확성이 포함될 수 있음을 알려드립니다. 원문은 해당 언어의 공식 문서가 권위 있는 출처임을 인정해 주시기 바랍니다. 중요한 정보의 경우 전문적인 인간 번역을 권장합니다. 본 번역 사용으로 인한 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.