mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
freeCodeCamp Camper-bot
9821 lines
505 KiB
JSON
9821 lines
505 KiB
JSON
{
|
|
"responsive-web-design": {
|
|
"title": "레거시(legacy) 반응형 웹 디자인",
|
|
"intro": [
|
|
"이 반응형 웹 다자인 자격증 코스에서는, 개발자들이 웹페이지를 만들기 위해 쓰는 언어들을 배울 수 있습니다. 컨텐츠를 위한 HTML(Hypertext Markup Language) 그리고 디자인을 위한 CSS(Cascading Style Sheets)와 같은 것들을 배우게 됩니다.",
|
|
"먼저 HTML과 CSS의 기본을 배우기 위한 고양이 사진 앱을 만들어 볼 것입니다. 후에는 CSS 변수와 같은 최신 기술을 이용해 펭귄을 만들어보고, 또한 웹 입력 양식을 만들어 보며 웹 접근성 모범사례를 배워보도록 하겠습니다. ",
|
|
"마지막으로 플렉스박스(Flexbox)를 이용한 트위터 카드와 CSS 그리드(Grid)를 이용해 복잡한 블로그 레이아웃을 만들어 보며 다양한 스크린 사이즈에 반응하는 웹 페이지를 만드는 법을 배울 것 입니다. "
|
|
],
|
|
"note": "참고: 광고 차단 프로그램 및 다크 모드 확장 프로그램과 같은 일부 브라우저 확장 프로그램은 테스트에 영향을 줄 수 있습니다. 문제가 발생하는 경우, 강의 수강 중에 콘텐츠나 레이아웃을 수정하는 확장 프로그램을 비활성화하는 것을 권장합니다.",
|
|
"blocks": {
|
|
"basic-html-and-html5": {
|
|
"title": "기본 HTML과 HTML5",
|
|
"intro": [
|
|
"HTML은 특정한 문법을 이용하여 웹페이지의 구조를 브라우저에 명기하는 마크업 언어입니다. HTML 요소들은 보통 오프닝 태그와 클로징 태그로 감싸고 있는 그 안의 컨텐츠에 의미를 부여합니다. 예를 들면 다양한 HTML 요소들은 같은 문자라 하더라도 헤딩, 본문, 혹은 목록 요소과 같은 것들로 나타낼 수 있습니다.",
|
|
"이 강의에서는 고양이 사진 앱을 만들어보면서 어느 웹페이지에서나 찾아볼 수 있는 빌딩 블록들, 즉 가장 일반적인 HTML 요소들을 배워볼 것 입니다."
|
|
]
|
|
},
|
|
"basic-css": {
|
|
"title": "CSS 기본",
|
|
"intro": [
|
|
"CSS, 혹은 캐스캐이딩 스타일 시트(영어: Cascading Style Sheet) 는 HTML로 작성한 텍스트와 다른 여러가지 컨텐츠를 어떻게 보여줄지를 알려줍니다. CSS를 이용하면 색, 폰트, 사이즈, 간격, 그리고 다른 여러가지 HTML 요소들의 측면들을 원하는 대로 바꿀 수 있습니다.",
|
|
"고양이 사진 앱의 구조를 결정했으니 이제 CSS를 이용해서 스타일을 더해줍니다."
|
|
]
|
|
},
|
|
"applied-visual-design": {
|
|
"title": "응용 시각 디자인",
|
|
"intro": [
|
|
"시각 디자인은 타이포그래피, 색 이론, 그래픽, 애니메이션, 페이지 레이아웃, 그리고 다른 여러가지 것들을 포괄하는 개념으로써 전달하고자 하는 메세지를 더 효과적으로 말할 수 있도록 도와줍니다.",
|
|
"이번 강의에서는 시각 디자인의 여러가지 요소들을 어떻게 웹페이지에 적용할 수 있는지 배워보도록 하겠습니다."
|
|
]
|
|
},
|
|
"applied-accessibility": {
|
|
"title": "접근성",
|
|
"intro": [
|
|
"웹 개발에서 접근성이란 보다 넓은 사용자층이 두루두루 웹 컨텐츠와 사용자 인터페이스(UI: user interface) 를 이해할 수 있고, 쉽게 이용할 수 있도록 하는 것을 뜻합니다. 여기에서 말하는 넓은 사용자층이란 시각, 청각, 움직임의 자유로움 혹은 인지 능력에 장애가 있는 모든 사람들을 포함합니다.",
|
|
"이 강의에서는 높은 접근성을 갖춘 웹페이지를 만드는 방법을 배워보도록 하겠습니다."
|
|
]
|
|
},
|
|
"responsive-web-design-principles": {
|
|
"title": "반응형 웹 디자인 원칙",
|
|
"intro": [
|
|
"웹사이트를 이용하기 위한 다양한 크기와 모양의 기기들이 많이 있습니다. 반응형 웹 디자인은 다양한 스크린 사이즈나 가로/세로 모드, 그리고 화면 해상도에 유연하게 적용될 수 있는 웹사이트를 만드는 기법입니다.",
|
|
"이번 강의에서는 CSS를 이용해서 어떤 기기에서든지간에 직접 만든 웹사이트가 잘 보일 수 있도록 하는 것을 배워보도록 하겠습니다."
|
|
]
|
|
},
|
|
"css-flexbox": {
|
|
"title": "CSS 플렉스박스",
|
|
"intro": [
|
|
"플렉스박스는 최신 CSS 버전인 CSS3에서 소개된 강력하고 잘 지원되는 레이아웃 방식입니다. 플렉스박스를 사용하면 페이지 내 요소를 쉽게 가운데 정렬할 수 있으며, 크기를 자동으로 조절하는 동적 사용자 인터페이스를 만들 수 있습니다.",
|
|
"이 강의에서는 트위터 카드를 만들면서 플렉스박스와 동적 레이아웃의 기본 개념을 배우게 됩니다."
|
|
]
|
|
},
|
|
"css-grid": {
|
|
"title": "CSS 그리드",
|
|
"intro": [
|
|
"CSS 그리드는 복잡한 반응형 레이아웃을 쉽게 만들 수 있도록 해주는 최신 표준 기술입니다. 이 기술은 HTML 요소를 그리드로 변환하여 자식 요소를 그리드 내 어느 곳에든 배치할 수 있게 해줍니다.",
|
|
"이 강의에서는 블로그를 비롯한 다양한 복잡한 레이아웃을 만들며 CSS 그리드의 기본 개념을 배우게 됩니다."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"2022/responsive-web-design": {
|
|
"title": "레거시 Responsive Web Design",
|
|
"intro": [
|
|
"이 반응형 웹 디자인 자격증 과정에서, 웹 페이지를 만드는 데 개발자들이 사용하는 언어들인 콘텐츠를 위한 HTML (하이퍼텍스트 마크업 언어)과 디자인을 위한 CSS (캐스캐이딩 스타일 시트)에 대해 배우게 됩니다.",
|
|
"먼저 HTML과 CSS의 기본을 배우기 위한 고양이 사진 앱을 만들어 볼 것입니다. 후에는 CSS 변수와 같은 최신 기술을 이용해 펭귄을 만들어보고, 퀴즈 사이트를 만들어 보며 웹 접근성에 대한 최상의 실천 방법을 배우게 됩니다.",
|
|
"마지막으로, Flexbox를 사용하여 사진 갤러리를 만들고 CSS Grid를 사용하여 매거진 기사 레이아웃을 만들며, 다양한 화면 크기에 반응하는 웹 페이지를 만드는 방법을 배우게 됩니다."
|
|
],
|
|
"note": "참고: 광고 차단 프로그램 및 다크 모드 확장 프로그램과 같은 일부 브라우저 확장 프로그램은 테스트에 영향을 줄 수 있습니다. 문제가 발생하는 경우, 강의 수강 중에 콘텐츠나 레이아웃을 수정하는 확장 프로그램을 비활성화하는 것을 권장합니다.",
|
|
"blocks": {
|
|
"build-a-tribute-page-project": {
|
|
"title": "예우(Tribute) 페이지",
|
|
"intro": [
|
|
"이것은 자격증을 획득하기 위해 필요한 프로젝트 중 하나입니다.",
|
|
"이 프로젝트에서는 선택한 주제(실제인물 또는 허구의 인물)에 대한 예우(Tribute) 페이지를 만들게 됩니다."
|
|
]
|
|
},
|
|
"build-a-personal-portfolio-webpage-project": {
|
|
"title": "개인 포트폴리오 웹페이지",
|
|
"intro": [
|
|
"이것은 자격증을 획득하기 위해 필요한 프로젝트 중 하나입니다.",
|
|
"이 프로젝트에서는 자신만의 개인 포트폴리오 페이지를 만들어야 합니다."
|
|
]
|
|
},
|
|
"build-a-product-landing-page-project": {
|
|
"title": "제품 랜딩 페이지",
|
|
"intro": [
|
|
"이것은 자격증을 획득하기 위해 필요한 프로젝트 중 하나입니다.",
|
|
"이 프로젝트에서는 자신이 선택한 제품을 마케팅하기 위한 제품 랜딩 페이지를 만들어야 합니다."
|
|
]
|
|
},
|
|
"build-a-survey-form-project": {
|
|
"title": "설문지 양식",
|
|
"intro": [
|
|
"이것은 자격증을 획득하기 위해 필요한 프로젝트 중 하나입니다.",
|
|
"이 프로젝트에서는 사용자로부터 데이터를 수집하기 위한 설문조사 양식을 만들게 됩니다."
|
|
]
|
|
},
|
|
"build-a-technical-documentation-page-project": {
|
|
"title": "기술 문서 페이지",
|
|
"intro": [
|
|
"이것은 자격증을 획득하기 위해 필요한 프로젝트 중 하나입니다.",
|
|
"이 프로젝트에서는 주제에 대한 설명서 또는 참조 자료로 사용할 기술 문서 페이지를 작성해야 합니다."
|
|
]
|
|
},
|
|
"learn-html-by-building-a-cat-photo-app": {
|
|
"title": "고양이 사진 앱을 만들어보며 HTML 배우기",
|
|
"intro": [
|
|
"HTML 태그는 웹페이지에 구조를 부여합니다. HTML 태그를 사용하여 웹페이지에 사진, 버튼 및 기타 요소를 추가할 수 있습니다.",
|
|
"이 과정에서는 고양이 사진 앱을 만들면서 가장 일반적인 HTML 태그를 배울 수 있습니다."
|
|
]
|
|
},
|
|
"learn-basic-css-by-building-a-cafe-menu": {
|
|
"title": "카페 메뉴를 만들며 기본적인 CSS를 배워보세요.",
|
|
"intro": [
|
|
"CSS는 브라우저에게 웹페이지를 어떻게 표시할지 알려줍니다. CSS를 사용하여 HTML 요소의 색상, 글꼴, 크기 및 기타 측면을 설정할 수 있습니다.",
|
|
"이 과정에서는 카페 웹페이지의 메뉴 페이지 디자인을 통해 CSS를 배우게 됩니다."
|
|
]
|
|
},
|
|
"learn-the-css-box-model-by-building-a-rothko-painting": {
|
|
"title": "로스코(역주: Mark Rothko는 미국의 화가 입니다.)의 그림을 만들면서 CSS 박스 모델을 배우세요.",
|
|
"intro": [
|
|
"각 HTML 요소는 자체적인 여백과 테두리(border)를 갖고 있는 상자(box)입니다. 이를 박스 모델(Box Model)이라고 합니다.",
|
|
"이 강좌에서는 CSS와 박스 모델을 사용하여 로스코 스타일의 직사각형 예술 작품을 만드는 방법을 배울 수 있습니다."
|
|
]
|
|
},
|
|
"learn-css-variables-by-building-a-city-skyline": {
|
|
"title": "도시 스카이라인을 만들면서 CSS 변수를 배워보세요.",
|
|
"intro": [
|
|
"CSS 변수는 스타일을 구성하고 재사용하는 데 유용합니다.",
|
|
"이 코스에서는 도시 스카이라인을 만들면서 CSS 변수를 배우게 됩니다. CSS 변수를 구성하여 필요할 때마다 재사용하는 방법을 배울 수 있습니다."
|
|
]
|
|
},
|
|
"learn-html-forms-by-building-a-registration-form": {
|
|
"title": "등록 양식을 만들어 배우며 HTML 폼을 익혀보세요.",
|
|
"intro": [
|
|
"웹사이트를 방문하는 사람들로부터 정보를 수집하기 위해 HTML 폼을 사용할 수 있습니다.",
|
|
"이 과정에서는 회원 가입 페이지를 만들며 HTML 폼을 배우게 됩니다. 이를 통해 어떤 종류의 데이터를 폼에 입력할 수 있는지 제어하는 방법과 페이지를 스타일링하는 데 유용한 새로운 CSS 도구들을 배우게 됩니다."
|
|
]
|
|
},
|
|
"learn-accessibility-by-building-a-quiz": {
|
|
"title": "퀴즈를 만들며 접근성을 배워보세요.",
|
|
"intro": [
|
|
"접근성이란 장애를 가진 사람들도 쉽게 사용할 수 있는 웹페이지를 만드는 것입니다.",
|
|
"이 강좌에서는 퀴즈 웹페이지를 만들면서 키보드 단축키, ARIA 속성 및 디자인 가이드라인과 같은 접근성 도구를 배울 수 있습니다."
|
|
]
|
|
},
|
|
"learn-intermediate-css-by-building-a-picasso-painting": {
|
|
"title": "피카소의 그림을 만들면서 중급 CSS 배워보세요",
|
|
"intro": [
|
|
"이 과정에서는, 피카소의 그림 웹 페이지를 만들어보며 중급 CSS 기술을 배우게 될 것입니다. SVG 아이콘, CSS 포지셔닝, 그리고 이전에 배운 다른 CSS 스킬들을 다시 리뷰하게 될 것입니다."
|
|
]
|
|
},
|
|
"learn-responsive-web-design-by-building-a-piano": {
|
|
"title": "피아노를 만들어 보며 반응형 웹 디자인을 배워보세요",
|
|
"intro": [
|
|
"반응형 디자인은 웹페이지가 다양한 크기의 화면에서 어떻게 보여야 하는지를 지시합니다.",
|
|
"이 과정에서는 CSS와 반응형 디자인을 사용해 피아노를 코딩으로 구현하고, 미디어 쿼리와 의사 선택자에 대해 더 배우세요."
|
|
]
|
|
},
|
|
"learn-css-flexbox-by-building-a-photo-gallery": {
|
|
"title": "사진 갤러리를 만들면서 CSS Flexbox를 배워보세요.",
|
|
"intro": [
|
|
"\b플렉스박스는 웹 페이지를 어떤 화면 크기에서든 알맞게 보이도록 디자인하는 데 도움을 줍니다.",
|
|
"이 강의에서는 Flexbox를 이용하여 반응형 사진 갤러리 웹페이지를 만드는 방법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"learn-css-grid-by-building-a-magazine": {
|
|
"title": "잡지를 만들어 보며 CSS Grid를 배워보세요.",
|
|
"intro": [
|
|
"CSS Grid는 웹 페이지 디자인의 행과 열을 제어할 수 있도록 해줍니다.",
|
|
"이 과정에서는 CSS Grid를 사용하여 잡지 기사를 만들어봅니다. 그리드 행과 그리드 열과 같은 그리드 개념을 비롯하여 CSS Grid의 사용 방법을 배우게 될 것입니다."
|
|
]
|
|
},
|
|
"learn-typography-by-building-a-nutrition-label": {
|
|
"title": "영양 성분표를 만들면서 타이포그래피를 배워보세요.",
|
|
"intro": [
|
|
"타이포그래피란 글자를 쉽게 읽을 수 있고 쓰이는 목적에 맞게끔 스타일링하는 예술입니다.",
|
|
"이번 과정에서는 타이포그래피를 사용하여 영양 정보 라벨 웹페이지를 만들게 될 것입니다. CSS를 사용하여 텍스트를 스타일링하고, 줄 간격을 조절하며, 텍스트를 위치\b를 바꾸는 방법을 배우게 될 것입니다."
|
|
]
|
|
},
|
|
"learn-css-transforms-by-building-a-penguin": {
|
|
"title": "펭귄을 만들면서 CSS Transforms를 배워보세요.",
|
|
"intro": [
|
|
"HTML 요소를 변형(transform) 하여 시선을 끌 수 있는 매력적인 디자인을 만들 수 있습니다. 회전, 크기 조정 등을 위해 transform을 사용할 수 있습니다.",
|
|
"이 과정에서는 펭귄을 만들어 볼 것입니다. CSS 변형을 사용하여 펭귄의 각 부분을 위치시키고 크기를 조정하며, 배경을 만들고 애니메이션을 더할 것입니다."
|
|
]
|
|
},
|
|
"learn-css-animation-by-building-a-ferris-wheel": {
|
|
"title": "대관람차를 만들며 CSS 애니메이션을 배워보세요.",
|
|
"intro": [
|
|
"CSS 애니메이션을 사용하여 웹페이지의 특정 부분에 주목을 끌거나 더욱 흥미로운 디자인을 구현할 수 있습니다.",
|
|
"이 과정에서는 대관람차를 만들어 볼 것입니다. CSS를 사용하여 요소에 애니메이션을 더하고 변형시키며 속도를 조절하는 방법을 배우게 될 것입니다."
|
|
]
|
|
},
|
|
"learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet": {
|
|
"title": "CSS의 가상 선택자에 대해 더 많이 알아보기 위해 대차 대조표를 만들어보세요.",
|
|
"intro": [
|
|
"CSS의 가상 선택자를 사용하면 특정한 HTML 요소를 변경할 수 있습니다.",
|
|
"이 과정에서는 가상 선택자를 사용하여 대차대조표를 만들게 됩니다. 마우스를 올려놓으면(마우스 오버) 요소의 스타일을 변경하는 방법, 웹페이지에서 또 다른 여러가지 이벤트를 트리거하는 방법을 배우게 될 것입니다."
|
|
]
|
|
},
|
|
"learn-css-colors-by-building-a-set-of-colored-markers": {
|
|
"title": "색상 마커펜 세트를 만들면서 CSS 색상에 대해 배워보세요.",
|
|
"intro": [
|
|
"웹페이지에 적절한 색상을 사용하면 \b방문자들이 시각적으로 더 크게 매력을 느낄 수 있습니다.",
|
|
"이 과정에서는 마커펜 세트를 만들어 보면서 다양한 색상 값을 설정하는 방법과 서로 다른 색상들을 조합하는 방법을 배워보도록 하겠습니다."
|
|
]
|
|
},
|
|
"learn-intermediate-css-by-building-a-cat-painting": {
|
|
"title": "고양이 그림을 만들면서 중급 CSS 배우기",
|
|
"intro": [
|
|
"CSS 포지셔닝을 마스터하는 것은 시각적으로 매력적이고 반응성이 뛰어난 웹 레이아웃을 만드는 데 필수적입니다",
|
|
"이 과정에서는 고양이 그림을 그려보고 absolute 포지셔닝, z-index 속성, transform 속성에 대해 알아봅니다."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"javascript-algorithms-and-data-structures": {
|
|
"title": "기존 JavaScript 알고리즘과 데이터 구조 V7",
|
|
"intro": [
|
|
"HTML과 CSS가 페이지의 콘텐츠와 스타일을 만든다면, JavaScript는 그것을 인터랙티브하게 만들 수 있습니다. JavaScript 알고리즘과 데이터 구조 인증 과정에서는 변수, 배열, 객체, 반복문, 함수 등을 포함한 JavaScript의 기본 개념을 배울 수 있습니다.",
|
|
"기본 개념을 이해한 후에는, 문자열 조작, 팩토리얼 계산, 심지어 국제 우주 정거장의 궤도 계산과 같은 알고리즘을 만들어 보면서 배웠던 지식을 실전에 적용할 수 있게 될 것입니다.",
|
|
"중요한 프로그래밍 패러다임인 객체지향 프로그래밍 (OOP)과 함수형 프로그래밍 (FP)에 대해서도 배우게 될 것입니다."
|
|
],
|
|
"note": "참고: 광고 차단 프로그램 및 스크립트 차단 프로그램과 같은 일부 브라우저 확장 프로그램은 테스트에 영향을 줄 수 있습니다. 문제가 발생하는 경우, 강의 수강 중에 페이지의 내용을 수정하거나 차단하는 확장 프로그램을 비활성화하는 것을 권장합니다.",
|
|
"blocks": {
|
|
"basic-javascript": {
|
|
"title": "기본 JavaScript",
|
|
"intro": [
|
|
"JavaScript는 웹 페이지를 인터랙티브하게 만들기 위해 사용할 수 있는 스크립팅 언어입니다. HTML과 CSS와 함께 웹에 쓰이는 핵심 기술 중 하나이며, 모든 최신 브라우저에서 지원됩니다.",
|
|
"이 과정에서는 JavaScript를 통해 기본적인 프로그래밍 개념을 배울 것입니다. 숫자와 문자열과 같은 기본적인 데이터 구조부터 시작하여 배열, 객체, 함수, 반복문, if/else 문 등을 다루는 방법을 배우게 될 것입니다."
|
|
]
|
|
},
|
|
"es6": {
|
|
"title": "ES6",
|
|
"intro": [
|
|
"ECMAScript 또는 ES는 JavaScript의 표준화된 버전입니다. 주요 브라우저들이 이 조건을 따르기 때문에 ECMAScript와 JavaScript는 상호 교환이 가능합니다.",
|
|
"지금까지 학습한 대부분의 JavaScript는 ES5 (ECMAScript 5)입니다. ES5는 2009년에 완성되었습니다. ES5로 여전히 프로그램을 만들 수 있지만, JavaScript는 지속적으로 발전하고 매년 새로운 기능이 출시됩니다.",
|
|
"2015년에 출시된 ES6는 언어에 많은 강력한 새로운 기능을 추가했습니다. 이 과정에서 화살표 함수, 구조 분해, 클래스, 프로미스, 모듈 등의 새로운 기능을 배우게 될 것입니다."
|
|
]
|
|
},
|
|
"regular-expressions": {
|
|
"title": "정규 표현식",
|
|
"intro": [
|
|
"정규 표현식은 프로그래머가 텍스트를 일치시키고 검색하며 대체하는 데 도움을 주는 패턴입니다. 정규 표현식은 매우 강력하지만 더 복잡하면서도 유연한 검색 결과 일치를 위해 특수 문자를 사용하기 때문에 읽기 어려울 수 있습니다. 정규 표현식은 종종 \"regex\" 또는 \"regexp\"로 줄여서 표현됩니다.",
|
|
"이 과정에서는 특수 문자, 캡처 그룹, 긍정적 및 부정적 룩어헤드(역주 - 룩어헤드(lookahead)는 정규 표현식에서 사용되는 특수한 패턴 매칭 기술입니다. 긍정적 룩어헤드(positive lookahead)는 특정 패턴이 뒤따라오는 경우에만 일치하고, 부정적 룩어헤드(negative lookahead)는 특정 패턴이 뒤따라오지 않는 경우에만 일치합니다. ) 등을 사용하여 원하는 텍스트를 일치시키는 방법을 배우게 됩니다. 이를 통해 원하는 텍스트 패턴에 일치하는 정규 표현식을 작성하는 기술을 익힐 수 있습니다."
|
|
]
|
|
},
|
|
"debugging": {
|
|
"title": "디버깅",
|
|
"intro": [
|
|
"디버깅(Debugging)은 코드를 검토하여 문제를 찾고 수정하는 과정입니다.",
|
|
"코드의 문제는 일반적으로 세 가지 형태로 나타납니다: 프로그램 실행을 방해하는 구문 오류(syntax error), 코드가 예기치 않은 동작을 하는 런타임 오류, 의도한 대로 작동하지 않는 논리적 오류입니다.",
|
|
"이 과정에서는 JavaScript 콘솔을 사용하여 프로그램을 디버깅하고 일반적인 문제가 발생하기 전에 예방하는 방법을 배우게 될 것입니다."
|
|
]
|
|
},
|
|
"basic-data-structures": {
|
|
"title": "기본 데이터 구조",
|
|
"intro": [
|
|
"데이터는 다양한 방식으로 저장하고 접근할 수 있습니다. 이미 몇 가지 일반적인 JavaScript 데이터 구조인 배열과 객체에 대해 배웠습니다.",
|
|
"이 기본 데이터 구조 과정에서는 배열과 객체의 차이점과 각각 언제 사용하는지를 자세히 알아볼 것입니다. 또한 <code>splice()</code>와 <code>Object.keys()</code>와 같은 유용한 JavaScript 메서드를 사용하여 데이터에 접근하고 조작하는 방법을 배우게 될 것입니다."
|
|
]
|
|
},
|
|
"basic-algorithm-scripting": {
|
|
"title": "기본 알고리즘 스크립팅",
|
|
"intro": [
|
|
"알고리즘은 무언가를 수행하는 과정을 설명하는 단계별 지침들의 시리즈입니다.",
|
|
"효과적인 알고리즘을 작성하기 위해서는 문제를 작은 부분으로 나누고, 각 부분을 어떤 코드로 해결할지 신중하게 고려하는 것이 도움이 됩니다.",
|
|
"이 과정에서는 온도 변환 알고리즘부터 복잡한 2D 배열 처리 알고리즘까지 모두 작성해 봄으로써 알고리즘적 사고의 기본 원리를 배우게 될 것입니다."
|
|
]
|
|
},
|
|
"object-oriented-programming": {
|
|
"title": "객체 지향 프로그래밍",
|
|
"intro": [
|
|
"OOP, 또는 객체 지향 프로그래밍(Object-Oriented Programming), 은 소프트웨어 개발 프로세스의 주요한 접근 방식 중 하나입니다. 객체와 클래스로 코드를 구성하여 어떤 것을 묘사하고 어떤 작업을 할 수 있는지 설명합니다.",
|
|
"이 과정에서는 <code>this</code> 키워드, 프로토타입 체인, 생성자, 상속 등을 포함한 JavaScript OOP의 기본 원리를 배우게 됩니다."
|
|
]
|
|
},
|
|
"functional-programming": {
|
|
"title": "함수형 프로그래밍",
|
|
"intro": [
|
|
"함수형 프로그래밍은 소프트웨어 개발에서 많이 쓰이는 또 다른 접근 방식입니다. 함수형 프로그래밍에서는 코드를 작은 단위의 기본 함수로 구성하여 복잡한 프로그램을 구축할 수 있습니다.",
|
|
"이 과정에서는 순수 함수(pure functions), 변경사항(mutation) 회피 방법, 그리고 <code>.map()</code>과 <code>.filter()</code>와 같은 메서드를 사용하여 더 깔끔한 코드를 작성하는 방법과 같은 함수형 프로그래밍의 핵심 개념을 배우게 됩니다."
|
|
]
|
|
},
|
|
"intermediate-algorithm-scripting": {
|
|
"title": "중급 알고리즘 스크립팅",
|
|
"intro": [
|
|
"이제 알고리즘적 사고, 객체 지향 프로그래밍, 함수형 프로그래밍의 기본 개념을 알았으므로, 중급 알고리즘 스크립팅 도전과제로 여러분의 기술을 테스트해 보세요."
|
|
]
|
|
},
|
|
"javascript-algorithms-and-data-structures-projects": {
|
|
"title": "JavaScript 알고리즘과 데이터 구조 프로젝트",
|
|
"intro": [
|
|
"이제까지 배운 새로운 JavaScript 기술을 활용하는 시간입니다. 이 프로젝트들은 이전에 했던 알고리즘 스크립팅 도전과제와 비슷하지만, 훨씬 어렵습니다.",
|
|
"JavaScript 알고리즘과 데이터 구조 인증을ㄹ 받기 위해 이 5개의 JavaScript 프로젝트를 완성하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"javascript-algorithms-and-data-structures-v8": {
|
|
"title": "기존 JavaScript 알고리즘과 데이터 구조 V8",
|
|
"intro": [
|
|
"개발자들은 HTML과 CSS를 사용하여 페이지의 내용과 스타일을 제어하고 자바스크립트를 사용하여 해당 페이지를 인터렉티브하게 만듭니다.",
|
|
"이 자바스크립트 알고리즘 및 데이터 구조 인증에서는 변수, 배열, 객체, 루프, 함수, DOM 등과 같은 자바스크립트의 기본 원리를 배우게 됩니다.",
|
|
"또한 OOP(Object Oriented Programming), 기능 프로그래밍, 알고리즘적 사고, 로컬 스토리지와 연동하는 방법, API를 사용하여 데이터를 가져오는 방법에 대해서도 배울 수 있습니다."
|
|
],
|
|
"note": "참고: 애드-블로커 및 스크립트-블로커와 같은 일부 브라우저 확장 기능은 테스트를 방해할 수 있습니다. 문제가 발생할 경우 해당 과정을 수강하는 동안 페이지 내용을 수정하거나 차단하는 확장 기능을 비활성화하는 것이 좋습니다.",
|
|
"blocks": {
|
|
"build-an-rpg-creature-search-app-project": {
|
|
"title": "RPG 크리처 검색 앱 프로젝트 만들기",
|
|
"intro": [
|
|
"이 프로젝트는 인증을 취득하기 위한 필수 프로젝트 중 하나입니다.",
|
|
"이 프로젝트에서는 RPG 크리처 검색 앱을 만드세요."
|
|
]
|
|
},
|
|
"build-a-cash-register-project": {
|
|
"title": "금전 등록기 프로젝트 구축",
|
|
"intro": [
|
|
"이것은 인증을 받기 위해 필요한 프로젝트 중 하나입니다.",
|
|
"이 프로젝트를 위해 금전 등록기 웹 앱을 구축합니다."
|
|
]
|
|
},
|
|
"build-a-palindrome-checker-project": {
|
|
"title": "회문 검사 프로젝트 구축",
|
|
"intro": [
|
|
"이것은 인증을 받기 위해 필요한 프로젝트 중 하나입니다.",
|
|
"이 프로젝트를 위해 주어진 단어가 회문인지 여부를 확인하는 응용 프로그램을 구축합니다."
|
|
]
|
|
},
|
|
"build-a-roman-numeral-converter-project": {
|
|
"title": "로마 숫자 변환기 프로젝트 구축",
|
|
"intro": [
|
|
"이것은 인증서 요청을 위해 필요한 프로젝트 중 하나입니다.",
|
|
"이 프로젝트에서는 정수를 로마 숫자로 변환하는 응용 프로그램을 구축합니다."
|
|
]
|
|
},
|
|
"build-a-telephone-number-validator-project": {
|
|
"title": "전화번호 검증 프로젝트 구축",
|
|
"intro": [
|
|
"이것은 인증서를 요청하기 위해 필요한 프로젝트 중 하나입니다.",
|
|
"이 프로젝트는번호가 유효한 미국 전화 번호인지 확인하는 응용 프로그램을 구축합니다."
|
|
]
|
|
},
|
|
"learn-basic-javascript-by-building-a-role-playing-game": {
|
|
"title": "롤플레잉 게임을 구축하여 기본 자바스크립트 학습",
|
|
"intro": [
|
|
"자바스크립트는 강력한 스크립트 언어로 웹 페이지를 대화형으로 만들 수 있습니다. HTML, CSS와 함께 웹의 핵심 기술 중 하나입니다. 현대의 모든 브라우저는 자바스크립트를 지원합니다.",
|
|
"이 연습 프로젝트에서는 자신만의 롤플레잉 게임을 코딩하여 자바스크립트로 된 기본적인 프로그래밍 개념을 배우게 됩니다. 배열, 문자열, 객체, 함수, 루프, <code>if/else</code>문 등을 다루는 방법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"learn-form-validation-by-building-a-calorie-counter": {
|
|
"title": "칼로리 카운터를 구축하여 유효성 검사 배우기",
|
|
"intro": [
|
|
"가끔 웹 애플리케이션을 코딩할 때는 사용자의 입력을 받아들일 수 있어야 할 것이다. 이 칼로리 카운터 프로젝트에서는 사용자 입력의 유효성을 확인하고, 그 입력에 근거한 계산을 수행하고, 인터페이스를 동적으로 업데이트하여 결과를 표시하는 방법을 배우게 된다.",
|
|
"이 연습 프로젝트에서는 기본 정규 표현식, 템플릿 리터럴, <code> addEventListener()</code> 메소드 등을 배우게 됩니다."
|
|
]
|
|
},
|
|
"learn-functional-programming-by-building-a-spreadsheet": {
|
|
"title": "스프레드시트 구축을 통한 기능 프로그래밍 학습",
|
|
"intro": [
|
|
"함수형 프로그래밍은 소프트웨어 개발에 대한 대중적인 접근 방식입니다. 함수형 프로그래밍에서 개발자들은 코드를 더 작은 기능으로 구성한 다음, 그 기능들을 결합하여 복잡한 프로그램을 만듭니다.",
|
|
"이 스프레드시트 응용 프로젝트에서는 수학식 구문 분석 및 평가, 스프레드시트 기능 구현, 셀 참조 처리, 대화형 웹 인터페이스 생성에 대해 배우게 됩니다. 사용자 입력을 기반으로 페이지를 동적으로 업데이트하는 방법에 대해 배우게 됩니다.",
|
|
"이 프로젝트에서는 <code>map()</code>, <code>find()</code>, <code>includes()</code> 메서드와 <code>parseInt()</code> 함수와 같은 개념을 다룰 것입니다."
|
|
]
|
|
},
|
|
"learn-modern-javascript-methods-by-building-football-team-cards": {
|
|
"title": "축구팀 카드를 만들어 모던 자바스크립트 방법 배우기",
|
|
"intro": [
|
|
"웹 애플리케이션을 구축하는 데 있어 공통적인 한 가지 측면은 데이터 세트를 처리한 다음 화면에 정보를 출력하는 것입니다. 이 스포츠 팀 카드 프로젝트에서는 DOM 조작, 객체 구조분해 할당, 이벤트 처리 및 데이터 필터링 작업을 수행하는 방법을 배우게 됩니다.",
|
|
"이 프로젝트는 기본 매개변수, <code>Object.freeze()</code>와 같은 개념을 다루며, <code>switch</code> 문과 <code>map()</code> 메서드에 대한 지식을 강화할 것입니다."
|
|
]
|
|
},
|
|
"learn-advanced-array-methods-by-building-a-statistics-calculator": {
|
|
"title": "통계 계산기를 구축하여 고급 배열 메서드 배우기",
|
|
"intro": [
|
|
"자바스크립트 기술을 확장하면 <code>map()<code>, <code>reduce()<code>, <code>filter()<code>와 같은 배열 조작 방법에 익숙해질 것입니다.",
|
|
"이 통계 계산기 프로젝트에서는 사용자 입력 처리, DOM 조작, 메소드 체이닝 처리 등의 경험을 쌓을 것이다. 평균, 중앙값, 최빈값, 분산, 표준편차 등의 통계 계산을 수행함으로써 실습을 하게 될 것이다."
|
|
]
|
|
},
|
|
"learn-basic-oop-by-building-a-shopping-cart": {
|
|
"title": "장바구니를 만들어 기초 OOP 배우기",
|
|
"intro": [
|
|
"OOP 또는 객체 지향 프로그래밍(Object Oriented Programming)은 소프트웨어 개발 과정에 대한 주요 접근 방식 중 하나이다. OOP에서 개발자들은 객체와 클래스를 사용하여 코드를 구조화한다.",
|
|
"이 장바구니 프로젝트에서는 클래스를 정의하고 이를 활용하는 방법을 배우게 되며, 클래스 인스턴스를 생성하고 데이터 조작을 위한 방법을 구현하게 된다.",
|
|
"이 프로젝트는 3항 연산자, 스프레드 연산자, <code> this</code> 키워드 등의 개념을 다룰 것이다."
|
|
]
|
|
},
|
|
"learn-fetch-and-promises-by-building-an-fcc-authors-page": {
|
|
"title": "Fcc 작성자 페이지를 만들며 Fetch 및 Promises 학습",
|
|
"intro": [
|
|
"웹 개발의 일반적인 측면 중 하나는 외부 API로부터 데이터를 가져온 다음 비동기식 자바스크립트로 작업하는 방법을 배우는 것이다.",
|
|
"이 freeCodeCamp 저자 페이지 프로젝트는 fetch 방법을 사용하는 방법을 보여주고 DOM을 동적으로 업데이트하여 페치된 데이터를 표시합니다.",
|
|
"이 프로젝트는 데이터를 페이지로 나누어 결과를 일괄로 로드할 수 있는 방법을 가르쳐줄 것입니다."
|
|
]
|
|
},
|
|
"learn-regular-expressions-by-building-a-spam-filter": {
|
|
"title": "스팸 필터를 구축하여 정규 표현식 학습",
|
|
"intro": [
|
|
"정규 표현식은 종종 \"regex\" 또는 \"regexp\"로 줄여지는데, 이는 프로그래머들이 텍스트를 매칭, 검색 및 대체하는 데 도움이 되는 패턴입니다. 정규 표현식은 강력하지만, 너무 많은 특수 문자를 사용하기 때문에 이해하기 어려울 수 있습니다.",
|
|
"이 스팸 필터 프로젝트에서는 캡처 그룹, positive lookheads, negative lookheads 및 원하는 텍스트와 일치하는 기타 기술에 대해 배우게 됩니다."
|
|
]
|
|
},
|
|
"learn-basic-algorithmic-thinking-by-building-a-number-sorter": {
|
|
"title": "숫자정렬기 구축을 통한 기초적인 알고리즘 사고 학습",
|
|
"intro": [
|
|
"컴퓨터 공학에서 모든 개발자가 배워야 할 기본 정렬 알고리즘이 있다. 이 번호 정렬 프로젝트에서는 버블 정렬, 선택 정렬, 삽입 정렬 등 다양한 정렬 알고리즘을 자바스크립트로 구현하고 시각화하는 방법을 배우게 된다.",
|
|
"이 프로젝트는 이러한 알고리즘의 기본 개념과 웹 응용 프로그램에서 수치 데이터를 정렬하는 데 어떻게 적용할 수 있는지 이해하는 데 도움이 될 것입니다."
|
|
]
|
|
},
|
|
"review-algorithmic-thinking-by-building-a-dice-game": {
|
|
"title": "주사위 게임을 만들면서 알고리즘 사고 복습하기",
|
|
"intro": [
|
|
"알고리즘 사고는 복잡한 문제를 잘 정의된 단계별 지침의 순서로 나누는 능력을 포함합니다.",
|
|
"이 주사위 게임 프로젝트에서 게임 상태를 관리하고, 주사위 굴리기, 점수 유지 및 다양한 조합에 대한 규칙 적용을 위한 게임 로직을 구현하는 방법을 배우게 됩니다.",
|
|
"이 프로젝트는 이벤트 처리, 배열 조작, 조건부 로직, 그리고 게임 상태에 따라 동적으로 사용자 인터페이스를 업데이트하는 개념을 다룹니다."
|
|
]
|
|
},
|
|
"learn-intermediate-oop-by-building-a-platformer-game": {
|
|
"title": "중급 객체 지향 프로그래밍을 플랫폼 게임을 만들면서 배우기",
|
|
"intro": [
|
|
"게임을 코딩하는 것은 기본적인 프로그래밍 원리를 이해하는 훌륭한 방법이며, 동시에 인터렉티브한 게임을 만들 수 있습니다.",
|
|
"이 플랫폼 게임 프로젝트에서는 클래스, 객체, 상속 및 캡슐화에 대해 계속 학습하게 될 것입니다. 또한 게임 요소를 효율적으로 설계하고 구성하는 방법을 배우게 되며, 문제 해결 및 코드 재사용성에 대한 통찰력을 얻게 될 것입니다."
|
|
]
|
|
},
|
|
"learn-localstorage-by-building-a-todo-app": {
|
|
"title": "Todo 앱 만들면서 로컬스토리지 학습하기",
|
|
"intro": [
|
|
"로컬 스토리지는 웹 브라우저 기능으로, 웹 애플리케이션이 키-값 쌍을 사용자의 브라우저에 지속적으로 저장할 수 있게 해줍니다. 이를 통해 웹 애플리케이션은 하나의 세션 동안 데이터를 저장하고, 이후의 페이지 세션에서 이를 다시 불러올 수 있습니다.",
|
|
"이 Todo 애플리케이션에서는 폼 입력을 처리하고, 로컬 스토리지를 관리하며, 작업에 대한 CRUD(생성, 읽기, 업데이트, 삭제) 작업을 수행하고, 이벤트 리스너를 구현하며, UI 요소를 토글하는 방법을 배우게 될 것입니다."
|
|
]
|
|
},
|
|
"learn-the-date-object-by-building-a-date-formatter": {
|
|
"title": "날짜 형식 설정기를 만들면서 Data 객체 학습하기",
|
|
"intro": [
|
|
"JavaScript에서 날짜를 다루는 것은 도전적일 수 있습니다. 다양한 메서드, 형식, 시간대를 탐색해야 하기 때문입니다. 이 프로젝트에서는 JavaScript Date 객체와 그 메서드 및 속성을 사용하는 방법을 배우게 될 것입니다. 또한 날짜를 올바르게 포맷하는 방법도 익히게 될 것입니다.",
|
|
"이 프로젝트는 <code>getDate()</code>, <code>getMonth()</code>, 그리고 <code>getFullYear()</code> 메서드와 같은 개념들을 다룰 것입니다."
|
|
]
|
|
},
|
|
"learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard": {
|
|
"title": "비동기 프로그래밍을 학습하며 fCC 포럼 리더보드를 구축하기",
|
|
"intro": [
|
|
"JavaScript는 비동기 프로그래밍 언어입니다. 이 프로젝트는 비동기 개념에 대한 숙련도를 높이는 데 도움을 줄 것입니다. 여러분은 freeCodeCamp 포럼 리더보드를 직접 코딩하게 될 것입니다.",
|
|
"이 프로젝트는 Fetch API, 프로미스(Promises), 비동기/대기(Async/Await), 그리고 try..catch 문에 대해 다룰 것입니다."
|
|
]
|
|
},
|
|
"learn-basic-string-and-array-methods-by-building-a-music-player": {
|
|
"title": "기본 문자열 및 배열 메서드를 배우며 음악 플레이어 만들기",
|
|
"intro": [
|
|
"이제 <code>find()</code>, <code>forEach()</code>, <code>map()</code>, <code>join()</code>과 같은 필수적인 문자열 및 배열 메서드를 배워봅시다. 이러한 메서드는 동적 웹 애플리케이션 개발에 매우 중요합니다.",
|
|
"이 프로젝트에서 여러분은 HTML, CSS, JavaScript를 사용하여 기본 MP3 플레이어를 코딩할 것입니다. 이 프로젝트는 오디오 재생 처리, 재생 목록 관리, 재생, 일시 정지, 다음 곡, 이전 곡, 셔플 기능 구현과 같은 기본 개념을 다룹니다. 현재 재생 중인 노래에 따라 사용자 인터페이스를 동적으로 업데이트하는 방법도 배우게 될 것입니다."
|
|
]
|
|
},
|
|
"learn-recursion-by-building-a-decimal-to-binary-converter": {
|
|
"title": "재귀를 배우며 십진수를 이진수로 변환하는 변환기를 만들어보세요.",
|
|
"intro": [
|
|
"재귀는 함수가 자기 자신을 호출하는 프로그래밍 개념입니다. 이를 통해 복잡한 문제를 더 간단한 하위 문제로 나눌 수 있으며, 하위 문제가 충분히 단순해질 때까지 반복됩니다.",
|
|
"이 프로젝트에서 여러분은 JavaScript를 사용하여 십진수를 이진수로 변환하는 변환기를 만들 것입니다. 재귀의 기본 개념을 배우고, 호출 스택을 탐구하며, 애니메이션을 통해 재귀 과정의 시각적 표현을 구축하게 될 것입니다."
|
|
]
|
|
},
|
|
"learn-introductory-javascript-by-building-a-pyramid-generator": {
|
|
"title": "피라미드 생성기를 만들어 기초 자바스크립트를 배우세요.",
|
|
"intro": [
|
|
"JavaScript는 웹 페이지를 인터랙티브하게 만들 수 있는 강력한 스크립트 언어입니다. HTML과 CSS와 함께 웹의 핵심 기술 중 하나이며, 모든 현대 브라우저에서 지원됩니다.",
|
|
"이 연습 프로젝트에서는 나만의 피라미드 생성기를 코딩하면서 자바스크립트의 기본 프로그래밍 개념을 배우게 됩니다. 배열, 문자열, 함수, 루프, <code>if/else</code> 문 등을 다루는 방법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"review-js-fundamentals-by-building-a-gradebook-app": {
|
|
"title": "성적부 앱 만들기를 통해 JavaScript 기초 복습하기",
|
|
"intro": [
|
|
"이 미니 프로젝트에서는 성적부 앱을 만들면서 함수, 변수, 조건문 등과 같은 JavaScript 기초를 복습하게 됩니다.",
|
|
"이를 통해 작은 문제들을 해결하고 기본 개념에 대한 이해를 더욱 높일 수 있는 기회를 갖게 됩니다."
|
|
]
|
|
},
|
|
"learn-basic-debugging-by-building-a-random-background-color-changer": {
|
|
"title": "랜덤 배경색 변경기를 만들며 기본 디버깅 배우기",
|
|
"intro": [
|
|
"디버깅은 코드를 검토하고 문제를 찾아 수정하는 과정입니다.",
|
|
"이 프로젝트에서 당신은 CamperBot이 랜덤 배경색 변경기를 만드는 것을 도와주고, 그들이 오류를 찾고 수정하도록 도와줄 것입니다."
|
|
]
|
|
},
|
|
"review-dom-manipulation-by-building-a-rock-paper-scissors-game": {
|
|
"title": "가위 바위 보 게임을 만들며 DOM 조작 복습하기",
|
|
"intro": [
|
|
"이전 프로젝트에서 기본적인 DOM 조작 방법을 배웠습니다. 이제 가위바위보 게임을 만들어 배운 내용을 복습할 시간입니다.",
|
|
"이 미니 프로젝트에서는 조건문, 함수, <code>getElementById</code> 등을 복습할 것입니다. 이 프로젝트는 작은 문제를 해결하고 기본 개념을 더 잘 이해할 수 있는 기회를 제공할 것입니다."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"front-end-development-libraries": {
|
|
"title": "프론트엔드 개발 라이브러리 V8",
|
|
"intro": [
|
|
"이제 HTML, CSS, JavaScript에 익숙해졌으니 업계에서 인기 있는 프론트엔드 라이브러리를 배우며 실력을 향상하세요.",
|
|
"프론트엔드 개발 라이브러리 인증 과정에서는 Bootstrap으로 사이트를 빠르게 스타일링하는 방법을 배우세요. 또한 CSS 스타일에 논리를 추가하고 Sass로 확장하는 방법을 배우게 됩니다.",
|
|
"나중에 React와 Redux를 사용하여 강력한 단일 페이지 응용 프로그램 (SPA)을 만드는 방법을 배우기 위해 쇼핑 카트 및 기타 응용 프로그램을 개발하게 될 것입니다."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"bootstrap": {
|
|
"title": "Bootstrap",
|
|
"intro": [
|
|
"Bootstrap은 반응형 웹 페이지와 애플리케이션을 디자인하는 데 사용하는 프론트엔드 프레임워크입니다. 모바일 우선 접근법을 적용하며 미리 만든 CSS 스타일과 클래스, 일부 JavaScript 기능을 포함합니다.",
|
|
"이 과정에서는 Bootstrap을 사용하여 반응형 웹사이트를 구축하는 방법을 배우고, Bootstrap에서 제공하는 클래스를 사용하여 버튼, 이미지, 폼, 내비게이션 등과 같은 일반적인 요소들에 스타일을 적용하는 방법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"jquery": {
|
|
"title": "jQuery",
|
|
"intro": [
|
|
"jQuery는 세계에서 가장 널리 사용되는 JavaScript 라이브러리 중 하나입니다.",
|
|
"2006년 jQuery가 출시되었을 당시, 주요 브라우저들은 JavaScript를 다소 다른 방식으로 처리했습니다. jQuery는 클라이언트 사이드 JavaScript 작성 과정을 간소화하고, 코드가 모든 브라우저에서 동일한 방식으로 작동되도록 보장했습니다.",
|
|
"이 과정에서는 jQuery를 사용하여 페이지의 다양한 요소를 선택, 삭제, 복제 및 수정하는 방법을 배울 것입니다."
|
|
]
|
|
},
|
|
"sass": {
|
|
"title": "SASS",
|
|
"intro": [
|
|
"Sass 또는 \"Syntactically Awesome StyleSheets\"는 CSS의 언어 확장입니다. 기본 CSS에는 없는 기능을 추가하여 프로젝트의 스타일 시트를 간소화하고 유지하기 쉽게 만들어줍니다.",
|
|
"이 Sass 강좌에서는 변수에 데이터를 저장하는 방법, CSS를 중첩하는 방법, 믹스인(mixin)을 사용하여 재사용 가능한 스타일을 만드는 방법, 스타일에 논리와 반복문을 추가하는 방법 등을 배울 수 있습니다."
|
|
]
|
|
},
|
|
"react": {
|
|
"title": "React",
|
|
"intro": [
|
|
"React는 인기있는 JavaScript 라이브러리 입니다. 웹 페이지 또는 애플리케이션을 위한 재사용 가능한 컴포넌트 중심의 사용자 인터페이스를 구축할 수 있습니다.",
|
|
"React는 HTML과 JavaScript 기능을 자체 마크업 언어인 JSX로 결합합니다. 또한 React는 애플리케이션에서의 데이터 흐름을 쉽게 관리할 수 있도록 도와줍니다.",
|
|
"이 과정에서는 다양한 React 컴포넌트를 생성하는 방법, 상태(state) 속성(prop)을 통해 데이터를 관리하는 방법, <code>componentDidMount</code>와 같은 다양한 라이프사이클 메소드의 사용 방법 등을 배우게 됩니다.\n"
|
|
]
|
|
},
|
|
"redux": {
|
|
"title": "Redux",
|
|
"intro": [
|
|
"애플리케이션이 커지고 범위가 넓어짐에 따라 공유 데이터를 관리하는 것은 매우 어려워집니다. Redux는 \"JavaScript 앱을 위한 예측 가능한 상태 컨테이너\"로 정의되며, 앱이 예측대로 작동하면서 테스트하기 쉽도록 도와줍니다.",
|
|
"Redux는 다른 어떤 UI 라이브러리나 프레임워크 (예를 들면 React, Angular, Vue - 옮긴이) 와 함께 사용할 수 있지만, 이 강의 시리즈에서는 Redux를 먼저 소개하고 다음에 React와 함께 사용하는 방법을 다룹니다.",
|
|
"이 과정에서는 Redux의 스토어, 액션, 리듀서 및 미들웨어의 기본 개념을 배우게 됩니다. 이를 통해 애플리케이션 전반에서 데이터를 관리할 수 있습니다."
|
|
]
|
|
},
|
|
"react-and-redux": {
|
|
"title": "React와 Redux",
|
|
"intro": [
|
|
"React와 Redux는 종종 함께 언급되는데, 그 이유가 있습니다. Redux를 만든 개발자는 React 개발자로서 다양한 컴포넌트 간에 데이터를 공유하기 쉽게 만들기 위해 Redux를 개발했습니다.",
|
|
"이제 Redux를 사용하여 공유 데이터의 흐름을 관리하는 방법을 알았으니, 이제 그 지식을 React와 결합해보는 시간입니다. React와 Redux 과정에서 React 컴포넌트를 만들고, 컴포넌트 수준에서 상태를 관리하고, Redux를 사용하여 전체 애플리케이션에서 상태를 관리하는 방법을 배우게 될 것입니다."
|
|
]
|
|
},
|
|
"front-end-development-libraries-projects": {
|
|
"title": "프론트엔드 개발 라이브러리 프로젝트",
|
|
"intro": [
|
|
"이제 프론트엔드 개발 라이브러리 실력을 시험할 때입니다. Bootstrap, jQuery, Sass, React, Redux를 사용해 지금까지 배운 내용을 검증할 5개의 프로젝트를 만드세요.",
|
|
"5개의 프로젝트를 모두 완료하면 프론트엔드 개발 라이브러리 인증을 받게 됩니다."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"data-visualization": {
|
|
"title": "데이터 시각화 V8",
|
|
"intro": [
|
|
"우리 주변에는 데이터가 넘쳐나지만, 형태나 맥락 없이는 큰 의미가 없습니다.",
|
|
"데이터 시각화 자격증 과정에서는 D3.js 라이브러리를 사용하여 차트, 그래프, 지도 등을 구축하여 다양한 유형의 데이터를 표현합니다.",
|
|
"또한 JSON (JavaScript Object Notation)에 대해 배우며, API (Application Programming Interface)를 사용하여 온라인 상의 데이터를 이용하는 방법에 대해 알게 될 것입니다."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"data-visualization-with-d3": {
|
|
"title": "D3를 이용한 데이터 시각화",
|
|
"intro": [
|
|
"D3 또는 D3.js는 \"Data Driven Documents\"의 약자로, 브라우저에서 \b실시간으로 변하며 상호작용이 가능한 데이터 시각화를 위한 JavaScript 라이브러리입니다.",
|
|
"D3는 주로 HTML, CSS, 그리고 확장 가능한 벡터 그래픽(SVG)와 같은 일반적인 웹 표준에 맞춰 작동하도록 만들어졌습니다.",
|
|
"D3는 다양한 종류의 입력 데이터 형식을 지원합니다. 이렇게 입력된 데이터는 강력한 내장 메서드를 사용하여 다양한 차트, 그래프, 지도 등으로 나타낼 수 있습니다.",
|
|
"D3를 사용한 데이터 시각화 과정에서는 데이터를 활용하여 다양한 차트, 그래프, 호버 요소 등을 만들어 동적이면서도 매력적인 디자인의 데이터 시각화를 구현하는 방법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"json-apis-and-ajax": {
|
|
"title": "JSON APIs와 AJAX",
|
|
"intro": [
|
|
"사용자 인터페이스(UI)가 사람들이 프로그램을 사용하는 데 도움을 주는 것과 마찬가지로, API(애플리케이션 프로그래밍 인터페이스)는 프로그램이 다른 프로그램과 상호작용하는 데 도움을 줍니다. API는 컴퓨터가 서로 통신하고 데이터를 주고받는 데 사용하는 도구입니다.",
|
|
"프로그래머들은 API와 작업할 때 종종 AJAX (비동기식 자바스크립트 및 XML)를 사용합니다. AJAX는 서버에 비동기 요청을 보내고 데이터를 전송한 다음 반환된 데이터를 페이지에 로드하는 일련의 기술들을 가리킵니다. 그리고 브라우저와 서버 간 전송되는 데이터는 일반적으로 JSON (JavaScript Object Notation)이라는 형식을 갖고 있습니다.",
|
|
"이 과정에서는 브라우저에서 API와 다양한 AJAX 기술을 활용하는 방법에 대한 기초를 배울 수 있습니다."
|
|
]
|
|
},
|
|
"data-visualization-projects": {
|
|
"title": "데이터 시각화 프로젝트",
|
|
"intro": [
|
|
"이제 D3, API, 그리고 AJAX를 사용하는 방법을 배웠으니, 이제 이 모두를 활용하여 5개의 데이터 시각화 프로젝트를 하며 배운 것들을 확인해 보세요.",
|
|
"이 프로젝트들에서는 데이터를 fetch하고 데이터 세트를 파싱한 다음, D3를 사용하여 다양한 데이터 시각화를 합니다. 모든 프로젝트를 완료하여 데이터 시각화 자격증을 획득해 보세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"relational-database": {
|
|
"title": "관계형 데이터베이스 V8",
|
|
"intro": [
|
|
"이 코스에서는 VS Code, PostgreSQL 및 Linux/Unix 명령행을 포함한 실제 개발자 도구 및 소프트웨어를 사용하여 인터렉티브 튜토리얼을 완성하고 프로젝트를 구축합니다.",
|
|
"이 과정들은 기본적인 Bash 명령으로 시작합니다. 터미널을 사용하면 파일 시스템 탐색 및 조작, Bash 스크립트, 고급 사용법에 이르기까지 모든 것을 배울 수 있습니다.",
|
|
"다음으로 데이터베이스 관리 시스템인 PostgreSQL과 이들 데이터베이스의 언어인 SQL로 관계형 데이터베이스를 생성하고 사용하는 방법에 대해 알아보겠습니다.",
|
|
"마지막으로 모든 개발자의 필수 도구인 버전 제어 시스템인 Git을 배우게 됩니다."
|
|
],
|
|
"blocks": {
|
|
"build-a-celestial-bodies-database-project": {
|
|
"title": "천체 데이터베이스",
|
|
"intro": [
|
|
"이것은 인증서을 받기 위해 필요한 프로젝트 중 하나입니다.",
|
|
"이번 프로젝트에서는 PostgreSQL을 이용하여 천체 데이터베이스를 구축하게 됩니다."
|
|
]
|
|
},
|
|
"build-a-number-guessing-game-project": {
|
|
"title": "숫자 맞추기 게임",
|
|
"intro": [
|
|
"이것은 인증서을 받기 위해 필요한 프로젝트 중 하나입니다.",
|
|
"이 프로젝트에서는 Bash 스크립팅, PostgreSQL, Git을 사용하여 터미널에서 실행되는 숫자 맞추기 게임을 만들고 사용자 정보를 저장합니다."
|
|
]
|
|
},
|
|
"build-a-periodic-table-database-project": {
|
|
"title": "주기율표 데이터베이스",
|
|
"intro": [
|
|
"이것은 인증서을 받기 위해 필요한 프로젝트 중 하나입니다.",
|
|
"이 프로젝트의 경우 주기율표 데이터베이스에서 화학 원소에 대한 정보를 가져오는 Bash 스크립트를 생성합니다."
|
|
]
|
|
},
|
|
"build-a-salon-appointment-scheduler-project": {
|
|
"title": "살롱 예약 스케줄러",
|
|
"intro": [
|
|
"이것은 인증서을 받기 위해 필요한 프로젝트 중 하나입니다.",
|
|
"이 프로젝트를 위해 PostgreSQL을 사용하여 살롱의 고객과 약속을 추적하는 대화형 Bash 프로그램을 만듭니다."
|
|
]
|
|
},
|
|
"build-a-world-cup-database-project": {
|
|
"title": "월드컵 데이터베이스",
|
|
"intro": [
|
|
"이것은 인증서을 받기 위해 필요한 프로젝트 중 하나입니다.",
|
|
"이 프로젝트의 경우 월드컵 경기의 정보를 PostgreSQL에 입력하는 Bash 스크립트를 생성한 다음 데이터베이스에 유용한 통계를 질의합니다."
|
|
]
|
|
},
|
|
"learn-advanced-bash-by-building-a-kitty-ipsum-translator": {
|
|
"title": "Kitty Ipsum 번역기를 만들어 고급 Bash 배우기",
|
|
"intro": [
|
|
"Bash의 명령문은 생각보다 훨씬 많습니다",
|
|
"140개의 강의를 통해 좀 더 복잡한 명령어와 명령어의 작동 방식에 대한 자세한 내용을 배울 수 있습니다."
|
|
]
|
|
},
|
|
"learn-bash-and-sql-by-building-a-bike-rental-shop": {
|
|
"title": "자전거 렌탈샵을 구축하여 Bash 및 SQL 학습하기",
|
|
"intro": [
|
|
"PostgreSQL을 사용하여 자전거 대여소의 대여 정보를 저장하는 대화형 Bash 프로그램을 210개 과정으로 구성합니다."
|
|
]
|
|
},
|
|
"learn-bash-by-building-a-boilerplate": {
|
|
"title": "Boilerplate를 만들어 Bash 배우기",
|
|
"intro": [
|
|
"터미널을 사용하면 파일 시스템을 조작하고 프로그램을 실행하고 작업을 자동화하는 등의 작업을 수행할 수 있는 텍스트 명령을 컴퓨터로 보낼 수 있습니다.",
|
|
"170개 과정의 이 강좌에서는 Commnad line 을 사용하여 웹사이트 boilerplate를 만들어 터미널 명령어를 배우게 됩니다"
|
|
]
|
|
},
|
|
"learn-bash-scripting-by-building-five-programs": {
|
|
"title": "5개의 프로그램을 구축하여 Bash 스크립트 학습",
|
|
"intro": [
|
|
"Bash 스크립트는 터미널 명령과 로직을 작업을 실행하거나 자동화할 수 있는 프로그램 등으로 결합합니다.",
|
|
"220개의 강의에서는 5개의 소규모 프로그램을 만들어 Bash 스크립트 내에서 터미널 명령어와 사용법에 대해 더 자세히 배우게 됩니다."
|
|
]
|
|
},
|
|
"learn-git-by-building-an-sql-reference-object": {
|
|
"title": "SQL 참조 개체를 구축하여 Git 학습하기",
|
|
"intro": [
|
|
"Git는 코드베이스에 대한 모든 변경 사항을 추적하는 버전 제어 시스템입니다.",
|
|
"240회에 걸쳐 진행되는 이 강좌에서는 일반적으로 사용되는 SQL 명령어가 포함된 객체를 만들어 Git이 코드를 추적하는 방법을 배울 수 있습니다."
|
|
]
|
|
},
|
|
"learn-nano-by-building-a-castle": {
|
|
"title": "성을 쌓으며 Nano 배우기",
|
|
"intro": [
|
|
"Nano는 터미널에서 바로 파일을 편집할 수 있는 프로그램입니다.",
|
|
"이번 40차시 과정에서는 성을 쌓는 동안 Nano로 터미널에서 파일을 편집하는 방법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"learn-relational-databases-by-building-a-database-of-video-game-characters": {
|
|
"title": "비디오 게임 캐릭터 데이터베이스를 구축하며 관계형 데이터베이스를 배우세요",
|
|
"intro": [
|
|
"관계형 데이터베이스는 데이터를 관계를 통해 연결된 테이블로 구성합니다.",
|
|
"165개 레슨으로 구성된 이 과정에서 비디오 게임 캐릭터로 채워진 PostgreSQL 데이터베이스를 만들어 관계형 데이터베이스의 기초를 배우세요."
|
|
]
|
|
},
|
|
"learn-sql-by-building-a-student-database-part-1": {
|
|
"title": "학생 데이터베이스 구축을 통한 SQL 학습: 1부",
|
|
"intro": [
|
|
"SQL 또는 Structured Query Language는 관계형 데이터베이스와 통신하기 위한 언어입니다.",
|
|
"140개의 수업 과정에서 컴퓨터 과학을 전공하는 학생들에 대한 정보를 PostgreSQL에 입력하기 위해 SQL을 사용하는 Bash 스크립트를 작성하게 됩니다."
|
|
]
|
|
},
|
|
"learn-sql-by-building-a-student-database-part-2": {
|
|
"title": "학생 데이터베이스 구축을 통한 SQL 학습: 2부",
|
|
"intro": [
|
|
"SQL join 명령은 관계형 데이터베이스에서 여러 테이블의 정보를 결합하는 데 사용됩니다",
|
|
"140개의 강의를 통해 SQL 명령어에 대해 자세히 알아보면서 학생 데이터베이스를 완성할 수 있습니다."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"back-end-development-and-apis": {
|
|
"title": "백엔드 개발 및 API V8",
|
|
"intro": [
|
|
"지금까지는 프론트엔드에서만 JavaScript를 사용했지만, JavaScript는 백엔드(서버)에서도 전체 웹 애플리케이션을 구축하는 데 사용될 수 있습니다.",
|
|
"오늘날 응용프로그램을 구축하는 일반적인 방법 중 하나는 마이크로서비스입니다. 마이크로서비스는 서로 협력하여 더 큰 전체를 형성하는 작은 모듈식 응용프로그램입니다.",
|
|
"백엔드 개발 및 API 인증 과정에서는 Node.js와 npm으로 백엔드 앱을 작성하는 방법을 배우세요. 또한 Express로 웹 애플리케이션을 구축하고 MongoDB와 Mongoose로 People Finder 마이크로서비스를 만듭니다."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"managing-packages-with-npm": {
|
|
"title": "NPM으로 패키지 관리",
|
|
"intro": [
|
|
"npm(Node Package Manager)은 Node.js용으로 작성된 자바스크립트 코드의 패키지를 설치, 생성 및 공유하기 위한 명령줄 도구입니다. npm에서 사용할 수 있는 오픈 소스 패키지가 많으므로 프로젝트를 시작하기 전에 날짜 작업이나 API에서 데이터를 가져오는 것과 같은 작업을 위해 휠을 다시 만드는 일이 없도록 탐색하는 시간을 가지세요.",
|
|
"이 고스에서 당신은 package.json을 어떻게 사용하는지 그리고 어떻게 dependencies를 설치하는지를 포함하여 npm사용의 기초를 배울 것이다\n\n이 과정에서는 <code>package.json</code>를 사용하는 방법과 설치된 dependencies를 관리하는 방법 등 npm을 사용하는 기본 사항에 대해 배우게 됩니다."
|
|
]
|
|
},
|
|
"basic-node-and-express": {
|
|
"title": "Node와 Express의 기초",
|
|
"intro": [
|
|
"Node.js는 개발자가 JavaScript로 백엔드(서버측) 프로그램을 작성할 수 있게 해주는 JavaScript 런타임입니다. Node.js는 이를 도와주는 몇 개의 내장 모듈(작고 독립적인 프로그램)을 포함합니다. 핵심 모듈 중 일부는 서버 역할을 하는 HTTP와 파일을 읽고 수정하는 파일시스템(File System) 모듈입니다.",
|
|
"마지막 과정에서는 더 작은 모듈 모음인 npm에서 패키지를 설치하고 관리하는 방법을 배웠습니다. 이러한 패키지는 더 크고 복잡한 응용프로그램을 만드는데 도움이 됩니다.",
|
|
"Express는 가벼운 웹 응용 프로그램 프레임워크이며 npm에서 가장 인기 있는 패키지 중 하나입니다. Express를 사용하면 응용 프로그램을 위한 서버 생성 및 라우팅 처리가 훨씬 쉬워지므로 사용자가 <pre>/blog</pre>와 같은 특정 엔드포인트를 방문했을 때 올바른 페이지로 안내하는 등의 작업을 처리할 수 있습니다.",
|
|
"이 과정에서는 서버 생성, 다양한 파일 제공, 브라우저와 다른 요청을 처리하는 방법 등 노드와 익스프레스의 기본 사항에 대해 알아봅니다."
|
|
]
|
|
},
|
|
"mongodb-and-mongoose": {
|
|
"title": "MongoDB 와 Mongoose",
|
|
"intro": [
|
|
"MongoDB는 응용 프로그램에서 사용할 수 있는 JSON 문서(또는 레코드) 를 저장하는 데이터베이스 응용 프로그램입니다. 다른 데이터베이스 유형인 SQL과 달리 MongoDB는 관계가 없거나 \"NoSQL\" 데이터베이스입니다. 즉, MongoDB는 SQL 데이터베이스처럼 미리 설정된 여러 테이블에 걸쳐 저장하는 대신 하나의 레코드 내에 모든 관련 데이터를 저장합니다.",
|
|
"Mongoose는 MongoDB와 상호 작용하기 위한 인기 있는 npm 패키지입니다. Mongoose를 사용하면, JSON 대신 평이한 자바스크립트 객체를 사용할 수 있어 MongoDB와 더 쉽게 작업할 수 있습니다. 또한 스키마라고 하는 문서에 대한 Blueprint를 생성할 수 있어 잘못된 유형의 데이터를 저장하여 나중에 버그를 발생시키지 않습니다.",
|
|
"MongoDB 와 Mongoose 과정에서는 모델 설정 방법, 데이터베이스에 문서 저장, 삭제, 찾기 등 영구적인 데이터 작업에 대한 기본적인 내용을 배울 수 있습니다."
|
|
]
|
|
},
|
|
"back-end-development-and-apis-projects": {
|
|
"title": "백엔드 개발 및 API 프로젝트",
|
|
"intro": [
|
|
"이전에 API로 작업한 적이 있지만 npm, Node, Express, MongoDB, Mongoose를 알았으니 이제는 자신만의 것을 구축해야 할 때입니다. 지금까지 배운 모든 것을 바탕으로 범위가 제한된 5가지의 더 작은 애플리케이션을 만들 수 있습니다.",
|
|
"이 프로젝트들을 만들면 친구나 가족, 잠재적 고용주에게 보여줄 수 있는 멋진 마이크로서비스 API 5개를 갖게 됩니다. 그리고 새로운 백엔드 개발 및 API 인증도 획득하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"quality-assurance": {
|
|
"title": "품질 보증",
|
|
"intro": [
|
|
"프로그램 또는 웹 응용 프로그램이 더 복잡해지면서 새 변경 내용이 원래의 기능을 손상시키지 않도록 테스트해야 합니다.",
|
|
"Quality Assurance Certification(품질 보증 인증) 에서는 Chai와 함께 테스트를 작성하는 방법을 학습하여 애플리케이션이 원하는 대로 작동하는지 확인할 수 있습니다.",
|
|
"그런 다음 고급 Node 및 Express 개념을 학습할 수 있는 채팅 어플리케이션을 구축하고, Pug를 템플릿 엔진으로, Passport를 인증용으로, Socket.io 를 서버와 연결된 클라이언트 간의 실시간 통신을 위해 사용할 수 있습니다."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"quality-assurance-and-testing-with-chai": {
|
|
"title": "Chai를 이용한 품질보증 및 테스트",
|
|
"intro": [
|
|
"Chai는 자바스크립트 테스트 라이브러리로, 코드를 변경한 후에도 프로그램이 여전히 기대한 대로 동작하는지 확인하는 데 도움을 주는 것입니다.",
|
|
"Chai를 사용하면 프로그램의 요구 사항을 설명하는 테스트를 작성하고, 프로그램이 이러한 요구 사항을 충족하는지 호가인할 수 있습니다.",
|
|
"이 강좌에서는 어셔선, 깊은 동등성, 참/거짓 판별, API 테스트 및 자바스크립트 애플리케이션을 테스트하기 위한 기본 사항 등에 대해 배우게 됩니다."
|
|
]
|
|
},
|
|
"advanced-node-and-express": {
|
|
"title": "고급 Node 및 Express",
|
|
"intro": [
|
|
"이제 Node.js와 Express.js에 대해 깊이 파고들어 채팅 애플리케이션과 로그인 시스템을 구축 해 보는 시간입니다.",
|
|
"로그인 시스템을 안정적으로 삽입하기 위해서, 당신은 authentication에 대해 배울 필요가 있습니다. 이것은 사람 또는 프로세스의 식별을 verify하는 것입니다.\n\n안전하게 로그인시스템을 구현하기 위해서는 인증에 대한 학습이 필요할 것입니다. 이것은 사람 또는 과정의 신원을 확인하는 행위입니다.",
|
|
"이 과정에서는 Passport로 인증을 관리하는 방법, Pug로 프론트엔드를 빠르게 구축할 재사용 가능한 템플릿을 만드는 방법, 그리고 클라이언트와 서버 간 실시간 통신을 위한 웹소켓 사용법을 배우세요."
|
|
]
|
|
},
|
|
"quality-assurance-projects": {
|
|
"title": "품질 보증 프로젝트",
|
|
"intro": [
|
|
"프론트엔드와 백엔드 모두를 숙지했다면 이제까지 배운 모든 기술과 개념을 적용할 차례입니다. 5개의 웹 애플리케이션을 구축하고 각각에 대해 테스트를 작성해 작동 여부와 다양한 엣지 케이스를 처리할 수 있는지 확인하세요.",
|
|
"이러한 품질 보증 프로젝트를 완료한 후에는 5개의 프로젝트를 추가로 수행할 수 있으며 포트폴리오에 보여줄 새로운 인증도 획득할 수 있습니다."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"scientific-computing-with-python": {
|
|
"title": "파이썬을 이용한 과학 컴퓨팅",
|
|
"intro": [
|
|
"파이썬을 이용한 과학적 컴퓨팅 커리큘럼은 강력하고 다재다능한 프로그래밍 언어인 파이썬을 사용하여 데이터를 분석하고 조작하는 데 필요한 기술을 제공합니다. 데이터 구조, 알고리즘, 객체 지향 프로그래밍과 같은 주요 개념을 배우고 다양한 도구를 사용하여 복잡한 계산을 수행하는 방법을 익히게 됩니다.",
|
|
"이 종합 과정은 데이터 구조와 알고리즘을 포함하여 과학적 컴퓨팅의 기초를 안내해 줄 것입니다."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"learn-string-manipulation-by-building-a-cipher": {
|
|
"title": "암호 만들기를 통해 문자열 조작 배우기",
|
|
"intro": [
|
|
"Python은 데이터 사이언스, 데이터 시각화, 웹 개발, 게임 개발, 기계 학습 등 다양한 분야에서 널리 사용되는 강력하고 인기 있는 프로그래밍 언어입니다.",
|
|
"이 프로젝트에서는 변수, 함수, 루프, 조건문과 같은 Python의 기본 프로그래밍 개념을 배우게 됩니다. 이러한 개념을 사용하여 첫 번째 프로그램을 작성하게 될 것입니다."
|
|
]
|
|
},
|
|
"learn-how-to-work-with-numbers-and-strings-by-implementing-the-luhn-algorithm": {
|
|
"title": "Luhn 알고리즘을 구현하여 숫자와 문자열을 다루는 방법 배우기",
|
|
"intro": [
|
|
"Luhn 알고리즘은 신용 카드 번호 검증과 같은 다양한 응용 프로그램에서 오류를 검사하는 데 널리 사용됩니다.",
|
|
"이 프로젝트를 구축함으로써 숫자 계산과 문자열 조작 작업에 대한 경험을 쌓을 수 있습니다."
|
|
]
|
|
},
|
|
"learn-list-comprehension-by-building-a-case-converter-program": {
|
|
"title": "케이스 변환 프로그램을 구축하며 Python 리스트 컴프리헨션 배우기",
|
|
"intro": [
|
|
"리스트 컴프리헨션은 리스트, 튜플, 문자열과 같은 반복 가능한 타입에서 새로운 Python 리스트를 구성하는 방법입니다. 이는 for 루프나.append() 리스트 메서드를 사용하지 않고도 가능합니다.",
|
|
"이 프로젝트에서는 Camel Case나 Pascal Case 형식으로 된 문자열을 입력받아 Snake Case로 변환하는 프로그램을 작성하게 됩니다.",
|
|
"이 프로젝트는 두 단계로 구성됩니다. 첫 번째 단계에서는 for 루프를 사용하여 프로그램을 구현합니다. 그런 다음 루프 대신 리스트 컴프리헨션을 사용하여 동일한 결과를 얻는 방법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"learn-regular-expressions-by-building-a-password-generator": {
|
|
"title": "비밀번호 생성기를 만들면서 정규식을 학습해보세요",
|
|
"intro": [
|
|
"파이썬 모듈은 코드에서 사용할 수 있는 여러 문장과 정의를 포함하는 파일입니다.",
|
|
"이 프로젝트에서는 Python 표준 라이브러리에서 모듈을 가져오는 방법을 배우게 됩니다. 또한 정규 표현식을 사용하는 방법을 배우며, 직접 비밀번호 생성 프로그램을 만드는 것도 진행하게 될 것입니다."
|
|
]
|
|
},
|
|
"learn-algorithm-design-by-building-a-shortest-path-algorithm": {
|
|
"title": "최단 경로 알고리즘을 구축하면서 알고리즘 설계 방법을 배우세요.",
|
|
"intro": [
|
|
"알고리즘은 개발자가 계산을 수행하고 컴퓨팅 문제를 해결하기 위해 사용하는 단계별 절차입니다.",
|
|
"이 프로젝트에서는 함수, 반복문, 조건문, 그리고 딕셔너리 컴프리헨션을 사용하여 최단 경로 알고리즘을 구현하는 방법을 배우게 될 것입니다."
|
|
]
|
|
},
|
|
"learn-recursion-by-solving-the-tower-of-hanoi-puzzle": {
|
|
"title": "하노이 탑 퍼즐을 풀면서 재귀를 배우세요.",
|
|
"intro": [
|
|
"재귀는 복잡한 계산 문제를 적은 코드로 해결할 수 있게 해주는 프로그래밍 기법입니다.",
|
|
"이 프로젝트에서는 먼저 반복문을 사용하여 하노이 탑 수학 퍼즐을 푸는 방법을 배운 후, 재귀를 이용한 해결 방법을 구현하는 법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"learn-data-structures-by-building-the-merge-sort-algorithm": {
|
|
"title": "병합 정렬 알고리즘 구현을 통해 데이터 구조 배우기",
|
|
"intro": [
|
|
"병합 정렬 알고리즘은 분할과 정복 원칙에 기반한 정렬 알고리즘 입니다.",
|
|
"이 프로젝트에서, 당신은 데이터 구조와 상호작용하는 방법을 배우게 되며, 병합 정렬 알고리즘을 사용해 무작위 숫자 목록을 정렬합니다."
|
|
]
|
|
},
|
|
"learn-classes-and-objects-by-building-a-sudoku-solver": {
|
|
"title": "클래스와 객체를 배우며 스도쿠 해결사 구축하기",
|
|
"intro": [
|
|
"클래스와 객체는 중요한 프로그래밍 개념입니다. 이러한 객체 지향 프로그래밍 도구는 개발자가 코드 모듈화, 추상화 및 가독성을 달성하도록 도와줍니다. 또한 재사용성을 촉진합니다.",
|
|
"이 스도쿠 해결기 프로젝트에서, 당신은 클래스와 객체를 사용해 스도쿠 그리드를 생성하고 스도쿠 퍼즐을 해결하는 방법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"learn-tree-traversal-by-building-a-binary-search-tree": {
|
|
"title": "이진 탐색 트리를 만들어 트리 탐색 배우기",
|
|
"intro": [
|
|
"이진 탐색 트리(BST)는 데이터가 계층적으로 정렬되어 있는 일반적인 데이터 구조입니다.",
|
|
"이 프로젝트에서, 당신은 자신의 BST를 구성하고 중위 순회를 수행하는 방법을 배우게 될 것입니다. 또한 삽입, 검색 및 삭제와 같은 주요 작업들을 배우게 됩니다."
|
|
]
|
|
},
|
|
"learn-lambda-functions-by-building-an-expense-tracker": {
|
|
"title": "지출 추적기를 만들어 람다 함수 배우기",
|
|
"intro": [
|
|
"람다 함수는 코드에서 작은 일회용 함수를 간결하게 작성할 수 있는 방법을 제공합니다.",
|
|
"이 프로젝트에서 람다 함수의 힘을 탐구하여 지출 추적기를 만듭니다. 결과 앱은 효율적이고 간소화된 작업을 위해 람다 함수를 사용하는 방법을 보여줄 것입니다."
|
|
]
|
|
},
|
|
"build-an-arithmetic-formatter-project": {
|
|
"title": "산술 포맷터 프로젝트 구축",
|
|
"intro": [
|
|
"이것은 인증서를 요청하기 위해 필요한 프로젝트 중 하나입니다."
|
|
]
|
|
},
|
|
"build-a-time-calculator-project": {
|
|
"title": "시간 계산기 프로젝트 구축",
|
|
"intro": [
|
|
"이것은 인증서를 요청하기 위해 필요한 프로젝트 중 하나입니다."
|
|
]
|
|
},
|
|
"build-a-budget-app-project": {
|
|
"title": "예산 앱 프로젝트 구축",
|
|
"intro": [
|
|
"이것은 인증서를 요청하기 위해 필요한 프로젝트 중 하나입니다."
|
|
]
|
|
},
|
|
"build-a-polygon-area-calculator-project": {
|
|
"title": "다각형 영역 계산기 프로젝트 구축",
|
|
"intro": [
|
|
"이것은 인증서를 요청하기 위해 필요한 프로젝트 중 하나입니다."
|
|
]
|
|
},
|
|
"build-a-probability-calculator-project": {
|
|
"title": "확률 계산기 프로젝트 구축",
|
|
"intro": [
|
|
"이것은 인증서를 요청하기 위해 필요한 프로젝트 중 하나입니다."
|
|
]
|
|
},
|
|
"learn-interfaces-by-building-an-equation-solver": {
|
|
"title": "방정식 해결사를 개발하며 인터페이스 배우기",
|
|
"intro": [
|
|
"추상 클래스는 클래스의 청사진 역할을 하는 객체로서, 공식 인터페이스를 정의할 수 있게 해줍니다.",
|
|
"이 프로젝트에서는 파이썬에서 인터페이스를 구현하는 방법을 발견하며 간단한 방정식 해결사 프로그램을 개발하게 됩니다."
|
|
]
|
|
},
|
|
"learn-special-methods-by-building-a-vector-space": {
|
|
"title": "벡터 공간을 개발하며 특별한 메서드 배우기",
|
|
"intro": [
|
|
"Python 특수 메서드는 특정 연산에 대한 응답으로 호출되어 객체의 동작을 상세하고 효과적으로 커스터마이즈할 수 있게 합니다.",
|
|
"이 프로젝트에서는 벡터를 배우며 가장 일반적인 특수 메서드 중 일부를 탐색하고 벡터 공간을 구축할 것입니다."
|
|
]
|
|
},
|
|
"learn-encapsulation-by-building-a-projectile-trajectory-calculator": {
|
|
"title": "발사체 궤적 계산기를 개발하며 캡슐화 배우기",
|
|
"intro": [
|
|
"캡슐화는 데이터에 대한 직접 접근을 제한하는 코드를 작성하는 데 기반을 둔 기본적인 OOP 원칙입니다.",
|
|
"이 프로젝트에서는 getter, setter, 그리고 이름 맹글링과 같은 캡슐화와 관련된 새 개념을 발견하고, 이들을 이미 배운 것과 함께 사용하여 발사체 궤적을 계산하는 프로그램을 작성하게 됩니다."
|
|
]
|
|
},
|
|
"learn-the-bisection-method-by-finding-the-square-root-of-a-number": {
|
|
"title": "숫자의 제곱근을 찾으며 분류법 배우기",
|
|
"intro": [
|
|
"수치적 방법은 어려운 수학적 문제를 분석적으로 해결하는 데 사용됩니다.",
|
|
"이 프로젝트에서는 제곱근을 포함하는 가능한 값의 범위를 반복적으로 좁혀가며 분할 수치 방법을 사용하여 숫자의 제곱근을 찾습니다."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"data-analysis-with-python": {
|
|
"title": "파이썬을 통한 데이터 분석",
|
|
"intro": [
|
|
"데이터 분석은 오랫동안 존재해 왔습니다. 하지만 몇 년 전까지만 해도, 개발자들은 타블로와 같은 값비싼 비공개 소스 도구를 사용하여 그것을 연습했습니다. 그러나 최근 파이썬, SQL및 기타 오픈 라이브러리가 데이터 분석을 영원히 바꾸어 놓았습니다.",
|
|
"파이썬 인증과 함께하는 데이터 분석에서는 파이썬과 함께하는 데이터 분석의 기초를 배우게 됩니다. 이 인증이 끝나면 CSV나 SQL과 같은 소스에서 데이터를 읽는 방법과 Numpy, Panders, Matplotlib, Seaborn과 같은 라이브러리를 사용하여 데이터를 처리하고 시각화하는 방법을 알게 될 것입니다."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"data-analysis-with-python-course": {
|
|
"title": "파이썬을 통한 데이터 분석",
|
|
"intro": [
|
|
"Santiago Basulto가 만든 이러한 종합적인 비디오 과정에서는 데이터 분석의 모든 과정을 배우게 됩니다. 여러 소스(CSV, SQL, Excel) 에서 데이터를 읽고 NumPy와 Panders를 사용하여 데이터를 처리하고 Matplotlib와 Seaborn을 사용하여 시각화합니다,",
|
|
"또한 전체 주피터 노트북 과정과 프로그래밍 기술을 기억해내기 위한 간단한 파이썬 참조도 포함되어 있습니다."
|
|
]
|
|
},
|
|
"numpy": {
|
|
"title": "Numpy",
|
|
"intro": [
|
|
"Keith Galli가 만든 영상 과정에서 NumPy 라이브러리의 기본 사항에 대해 알아봅시다.",
|
|
"이 과정에서는 NumPy가 어떻게 작동하는지, Python의 기본 제공 목록과 어떻게 비교되는지 배울 것입니다. NumPy로 코드를 작성하는 방법, 인덱싱, 재구성, 응용 통계 등에 대해서도 배울 것입니다."
|
|
]
|
|
},
|
|
"data-analysis-with-python-projects": {
|
|
"title": "Python 프로젝트를 통한 데이터 분석",
|
|
"intro": [
|
|
"Python으로 데이터를 분석하는 방법에는 여러 가지가 있습니다. 이러한 프로젝트를 완료함으로써 Python으로 데이터 분석에 대한 좋은 기초지식을 가지고 있음을 입증할 수 있을 것입니다.",
|
|
"Python 인증으로 데이터 분석을 청구하려면 모든 작업을 완료해야 합니다."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"learn-python-for-beginners": {
|
|
"title": "초보자를 위한 Python 배우기",
|
|
"summary": [
|
|
"기초 개념을 연습하고 작은 프로젝트를 만들어 Python 프로그래밍의 기초를 처음부터 배우세요."
|
|
],
|
|
"intro": [
|
|
"Python은 오늘날 가장 인기 있는 프로그래밍 언어 중 하나입니다. 배우기 쉽고 가독성이 좋으며 다재다능합니다.",
|
|
"이 종합 과정에서 Python 프로그래밍의 기초를 처음부터 배우세요. 변수와 데이터 타입 같은 기본 개념부터 시작해 제어 흐름과 함수로 진행하며, 배운 내용을 연습할 프로젝트를 만드세요."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"python-setup-first-steps": {
|
|
"title": "Python 설정 및 첫 단계",
|
|
"intro": [
|
|
"이 영상들에서 인기 강사 Mike Dane가 Python을 소개하고 로컬 개발 환경 설정 방법을 보여줍니다."
|
|
]
|
|
},
|
|
"core-primitives-in-python": {
|
|
"title": "Python의 핵심 원시 타입",
|
|
"intro": [
|
|
"이 영상들에서 변수, 데이터 타입, 문자열, 숫자, 사용자 입력 받기 등을 배우세요."
|
|
]
|
|
},
|
|
"small-python-projects": {
|
|
"title": "작은 Python 프로젝트들",
|
|
"intro": [
|
|
"이 영상들에서 기본 계산기 앱과 매드 립스 게임을 만들어 지금까지 배운 내용을 연습하세요."
|
|
]
|
|
},
|
|
"lists-and-tuples": {
|
|
"title": "리스트와 튜플",
|
|
"intro": ["이 영상들에서 리스트, 튜플과 일반적인 연산을 배우세요."]
|
|
},
|
|
"control-flow-and-functions-in-python": {
|
|
"title": "제어 흐름과 함수",
|
|
"intro": [
|
|
"이 영상들에서 if 문으로 프로그램 흐름을 제어하는 방법과 재사용 가능한 코드를 위한 함수 작성법을 배우세요."
|
|
]
|
|
},
|
|
"dictionaries-and-loops": {
|
|
"title": "사전과 루프",
|
|
"intro": [
|
|
"이 영상들에서 사전과 while 및 for 루프 같은 다양한 루프를 다루는 방법을 배우세요."
|
|
]
|
|
},
|
|
"error-handling-files-and-modules-in-python": {
|
|
"title": "오류 처리, 파일, 모듈",
|
|
"intro": [
|
|
"이 영상들에서 오류를 우아하게 처리하는 방법, 파일 읽기·쓰기, 모듈과 외부 패키지로 코드 정리하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"object-oriented-programming-with-python": {
|
|
"title": "Python으로 객체지향 프로그래밍",
|
|
"intro": [
|
|
"이 영상들에서 클래스와 객체를 생성하여 객체지향 프로그래밍을 배우세요. 객관식 퀴즈 애플리케이션을 만들어 이 기술을 연습하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"introduction-to-algorithms-and-data-structures": {
|
|
"title": "알고리즘 및 데이터 구조 소개",
|
|
"summary": ["이 입문 과정에서 일반적인 알고리즘과 데이터 구조를 배우세요."],
|
|
"intro": [
|
|
"알고리즘과 데이터 구조는 프로그래밍의 중추입니다. 따라서 이를 다루는 방법을 배우는 것이 중요합니다.",
|
|
"이 종합 과정에서 병합 정렬(merge sort), 퀵소트(quicksort), 이진 탐색(binary search) 등 일반적인 정렬 및 탐색 알고리즘을 배우세요.",
|
|
"배열(array)과 연결 리스트(linked list) 같은 일반적인 데이터 구조를 다루는 방법도 배우세요."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"searching-algorithms": {
|
|
"title": "탐색 알고리즘",
|
|
"intro": [
|
|
"이 비디오들에서 알고리즘이 무엇인지 배우고 이진 탐색과 선형 탐색 알고리즘을 다루는 방법을 배우세요."
|
|
]
|
|
},
|
|
"time-complexity": {
|
|
"title": "시간 복잡도",
|
|
"intro": [
|
|
"이 비디오들에서 시간 복잡도와 알고리즘의 효율성을 측정하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"algorithms-in-code": {
|
|
"title": "코드 속 알고리즘",
|
|
"intro": [
|
|
"이 비디오들에서 선형 탐색과 이진 탐색 알고리즘을 Python 코드로 작성하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"recursion-and-space-complexity": {
|
|
"title": "재귀와 공간 복잡도",
|
|
"intro": [
|
|
"이 비디오들에서 재귀와 알고리즘의 공간 복잡도에 대해 배우세요."
|
|
]
|
|
},
|
|
"introduction-to-arrays": {
|
|
"title": "배열 소개",
|
|
"intro": [
|
|
"이 비디오들에서는 배열을 다루는 방법을 배우고 삽입, 삭제, 탐색 등 다양한 연산을 학습하세요."
|
|
]
|
|
},
|
|
"introduction-to-linked-lists": {
|
|
"title": "연결 리스트 소개",
|
|
"intro": [
|
|
"이 비디오들에서 연결 리스트에 대해 배우고 노드를 추가·제거하며 리스트를 탐색하는 방법을 연습하세요."
|
|
]
|
|
},
|
|
"merge-sort-algorithm": {
|
|
"title": "병합 정렬 알고리즘",
|
|
"intro": ["이 비디오들에서 병합 정렬 알고리즘에 대해 배우세요."]
|
|
},
|
|
"sorting-a-linked-list": {
|
|
"title": "연결 리스트 정렬",
|
|
"intro": ["이 비디오들에서 연결 리스트를 정렬하는 방법을 더 배우세요."]
|
|
},
|
|
"sorting-algorithms": {
|
|
"title": "정렬 알고리즘",
|
|
"intro": [
|
|
"이 비디오들에서 선택 정렬, 퀵 정렬 등 일반적인 정렬 알고리즘에 대해 배우세요."
|
|
]
|
|
},
|
|
"searching-names-using-sorting-and-searching-algorithms": {
|
|
"title": "정렬 및 탐색 알고리즘을 사용한 이름 검색",
|
|
"intro": [
|
|
"이 비디오들에서 이진 탐색과 선형 탐색으로 이름을 검색하고 실행시간을 비교하는 연습을 하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"learn-rag-mcp-fundamentals": {
|
|
"title": "RAG와 MCP 기초 배우기",
|
|
"summary": ["이 종합 비디오 과정에서 RAG와 MCP의 기초를 배우세요."],
|
|
"intro": [
|
|
"RAG는 Retrieval-Augmented Generation의 약자입니다. MCP는 Model Context Protocol의 약자입니다. 이들은 지식베이스에서 정보를 검색하고 해당 정보를 바탕으로 응답을 생성하며 행동을 계획하는 AI 에이전트 구축용 강력한 프레임워크입니다.",
|
|
"이 과정에서 RAG와 MCP의 기초를 배우고 이를 프로젝트에 구현하는 방법을 학습하세요. 검색, 생성, 메모리, 컨텍스트, 계획 등 RAG와 MCP의 구성 요소를 탐색하세요. 과정 종료 시 RAG와 MCP의 작동 원리를 이해하고 지능형 에이전트를 구축하는 방법을 알게 됩니다."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"understanding-rag": {
|
|
"title": "RAG 이해하기",
|
|
"intro": [
|
|
"Retrieval-Augmented Generation(RAG)이 무엇인지, 언제 사용해야 하는지, 핵심 개념을 배우세요."
|
|
]
|
|
},
|
|
"retrieval-engine-internals": {
|
|
"title": "검색 엔진 내부 구현",
|
|
"intro": [
|
|
"시맨틱 검색, 임베딩 모델, 벡터 데이터베이스, 청킹(chunking)을 자세히 살펴보며 검색이 내부에서 어떻게 작동하는지 이해하세요."
|
|
]
|
|
},
|
|
"designing-reliable-rag-systems": {
|
|
"title": "신뢰성 있는 RAG 시스템 설계",
|
|
"intro": [
|
|
"RAG 아키텍처, 모니터링, 오류 처리, 프로덕션에 RAG 시스템을 배포하는 방법을 탐구하세요."
|
|
]
|
|
},
|
|
"mcp-ecosystem-and-tooling": {
|
|
"title": "MCP 생태계 및 도구",
|
|
"intro": [
|
|
"MCP가 존재하는 이유, 아키텍처, JSON-RPC, MCP 서버와 클라이언트를 효과적으로 구축하고 사용하는 방법을 배우세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"introduction-to-precalculus": {
|
|
"title": "프리칼큘러스 입문",
|
|
"summary": ["함수와 삼각법을 포함한 프리칼큘러스 기초를 배우세요."],
|
|
"intro": [
|
|
"프리칼큘러스는 미적분학을 준비시키는 수학의 한 분야로 함수와 삼각법 등 다양한 주제를 다룹니다."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"function-basics": {
|
|
"title": "함수 기초",
|
|
"intro": ["이 비디오들에서 함수와 함수 다루는 방법을 배우세요."]
|
|
},
|
|
"angles-and-circular-motion": {
|
|
"title": "각도와 원운동",
|
|
"intro": ["이 비디오들에서 각도와 원운동에 대해 배우세요."]
|
|
},
|
|
"right-triangle-trigonometry": {
|
|
"title": "직각 삼각형 삼각법",
|
|
"intro": ["이 비디오들에서 직각 삼각법과 이를 다루는 방법을 배우세요."]
|
|
},
|
|
"trig-graphs-inverses": {
|
|
"title": "삼각함수 그래프와 역함수",
|
|
"intro": ["이 비디오들에서 삼각함수 그래프와 역함수에 대해 배우세요."]
|
|
},
|
|
"solving-trig-equations": {
|
|
"title": "삼각방정식 풀기",
|
|
"intro": ["이 비디오들에서 삼각방정식을 푸는 방법을 배우세요."]
|
|
},
|
|
"trig-identities-formulas": {
|
|
"title": "삼각정체성과 공식",
|
|
"intro": [
|
|
"이 비디오들에서 삼각함수 항등식(trigonometric identities)과 공식을 배우세요."
|
|
]
|
|
},
|
|
"advanced-trig-conics": {
|
|
"title": "고급 삼각법과 원뿔곡선",
|
|
"intro": [
|
|
"이 비디오들에서 고급 삼각법과 원뿔곡선(conic sections)을 배우세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"introduction-to-bash": {
|
|
"title": "Bash 소개",
|
|
"summary": [
|
|
"터미널 사용법과 Bash 스크립트를 작성해 작업을 자동화하고 파일과 프로세스를 관리하는 방법을 배우세요."
|
|
],
|
|
"intro": [
|
|
"Bash는 유닉스 셸이자 명령어 언어로, 운영체제와 상호작용하기 위한 강력한 인터페이스를 제공합니다. 명령 실행, 작업 자동화, 파일 및 프로세스 관리를 효율적으로 할 수 있습니다.",
|
|
"이 과정에서는 파일 시스템을 탐색하고 파일 및 디렉터리를 조작하는 등 Bash 스크립팅 기초를 배우세요."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-understanding-the-command-line-and-working-with-bash": {
|
|
"title": "명령줄과 Bash 작업 이해하기",
|
|
"intro": ["이 강의들에서 명령줄과 Bash 작업에 대해 배우세요."]
|
|
},
|
|
"workshop-bash-boilerplate": {
|
|
"title": "보일러플레이트 만들기",
|
|
"intro": [
|
|
"터미널을 통해 파일 시스템을 조작하고 프로그램을 실행하며 작업을 자동화하는 텍스트 명령을 컴퓨터로 보낼 수 있습니다.",
|
|
"이 170강짜리 워크숍에서 명령줄만 사용해 웹사이트 보일러플레이트를 만들며 터미널 명령을 배우게 됩니다."
|
|
]
|
|
},
|
|
"review-bash-commands": {
|
|
"title": "Bash 명령 복습",
|
|
"intro": ["다가오는 퀴즈를 대비해 Bash 명령 개념을 복습하세요."]
|
|
},
|
|
"quiz-bash-commands": {
|
|
"title": "Bash 명령 퀴즈",
|
|
"intro": ["이 퀴즈로 bash 명령어에 대해 배운 내용을 테스트하세요."]
|
|
}
|
|
}
|
|
},
|
|
"introduction-to-sql-and-postgresql": {
|
|
"title": "SQL 및 PostgreSQL 소개",
|
|
"summary": [
|
|
"SQL과 PostgreSQL을 사용해 관계형 데이터베이스를 생성하고 관리하는 방법을 배우세요."
|
|
],
|
|
"intro": [
|
|
"SQL(구조화 질의 언어)은 관계형 데이터베이스를 관리하고 조작하는 데 사용하는 프로그래밍 언어입니다. 데이터베이스에서 생성, 조회, 업데이트, 삭제를 수행할 수 있습니다.",
|
|
"PostgreSQL은 SQL을 쿼리 언어로 사용하는 강력한 오픈소스 관계형 데이터베이스 관리 시스템입니다. 데이터를 저장하고 관리하기 위한 견고하고 확장 가능한 플랫폼을 제공합니다."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-working-with-relational-databases": {
|
|
"title": "관계형 데이터베이스 작업",
|
|
"intro": ["이 강의들에서 관계형 데이터베이스 작업 방법을 배우세요."]
|
|
},
|
|
"workshop-database-of-video-game-characters": {
|
|
"title": "비디오 게임 캐릭터 데이터베이스 만들기",
|
|
"intro": [
|
|
"관계형 데이터베이스는 데이터를 관계를 통해 서로 연결된 테이블로 구성합니다.",
|
|
"이 165강짜리 워크숍에서 비디오 게임 캐릭터로 채운 PostgreSQL 데이터베이스를 생성하며 관계형 데이터베이스의 기초를 배우세요."
|
|
]
|
|
},
|
|
"lab-celestial-bodies-database": {
|
|
"title": "천체 데이터베이스 만들기",
|
|
"intro": [
|
|
"이번 프로젝트에서는 PostgreSQL을 사용해 천체 데이터베이스를 구축하세요."
|
|
]
|
|
},
|
|
"review-sql-and-postgresql": {
|
|
"title": "SQL 및 PostgreSQL 복습",
|
|
"intro": ["다가오는 퀴즈를 대비해 SQL과 PostgreSQL 개념을 복습하세요."]
|
|
},
|
|
"quiz-sql-and-postgresql": {
|
|
"title": "SQL 및 PostgreSQL 퀴즈",
|
|
"intro": ["이 퀴즈로 SQL과 PostgreSQL에 대해 배운 내용을 테스트하세요."]
|
|
}
|
|
}
|
|
},
|
|
"learn-bash-scripting": {
|
|
"title": "Bash 스크립팅 배우기",
|
|
"summary": [
|
|
"작업을 자동화하고 파일과 프로세스를 관리하기 위해 Bash 스크립트 작성법을 배우세요."
|
|
],
|
|
"intro": [
|
|
"Bash 스크립트는 터미널 명령과 로직을 결합해 작업을 실행하거나 자동화하는 프로그램을 만듭니다.",
|
|
"이 과정에서는 다섯 개의 작은 프로그램을 만들어 Bash 스크립트에서 터미널 명령어를 사용하는 방법을 더 배우세요."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-understanding-bash-scripting": {
|
|
"title": "Bash 스크립팅 이해하기",
|
|
"intro": ["이 강의들에서 Bash 스크립팅에 대해 배우세요."]
|
|
},
|
|
"workshop-bash-five-programs": {
|
|
"title": "다섯 개 프로그램 만들기",
|
|
"intro": [
|
|
"Bash 스크립트는 터미널 명령과 로직을 결합해 작업을 실행하거나 자동화하는 프로그램을 만듭니다.",
|
|
"이 220강짜리 워크숍에서 다섯 개의 소규모 프로그램을 만들며 Bash 스크립트 내에서 터미널 명령 사용법을 더 배우세요."
|
|
]
|
|
},
|
|
"review-bash-scripting": {
|
|
"title": "Bash 스크립팅 복습",
|
|
"intro": [
|
|
"다가오는 퀴즈를 대비해 배운 Bash 스크립팅 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-bash-scripting": {
|
|
"title": "Bash 스크립팅 퀴즈",
|
|
"intro": ["이 퀴즈로 Bash 스크립팅에 대해 배운 내용을 테스트하세요."]
|
|
}
|
|
}
|
|
},
|
|
"learn-sql-and-bash": {
|
|
"title": "SQL과 Bash 배우기",
|
|
"summary": [
|
|
"SQL과 Bash를 함께 사용해 관계형 데이터베이스를 관리하고 조작하는 방법을 배우세요."
|
|
],
|
|
"intro": [
|
|
"SQL은 관계형 데이터베이스와 통신하는 언어입니다. Bash는 운영체제와 상호작용하기 위한 강력한 유닉스 셸이자 명령어 언어입니다.",
|
|
"이 과정에서 PostgreSQL에 컴퓨터과학 학생 정보를 입력하기 위해 SQL을 사용하는 Bash 스크립트를 작성하세요."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-working-with-sql": {
|
|
"title": "SQL 작업하기",
|
|
"intro": [
|
|
"이 강의들에서 SQL 인젝션, 정규화(normalization), N+1 문제 등을 배우세요."
|
|
]
|
|
},
|
|
"workshop-sql-student-database-part-1": {
|
|
"title": "학생 데이터베이스 만들기: 1부",
|
|
"intro": [
|
|
"SQL은 관계형 데이터베이스와 통신하기 위한 언어입니다.",
|
|
"이 140강짜리 워크숍에서 PostgreSQL에 컴퓨터과학 학생 정보를 입력하는 SQL 사용 Bash 스크립트를 만드세요."
|
|
]
|
|
},
|
|
"workshop-sql-student-database-part-2": {
|
|
"title": "학생 데이터베이스 만들기: 2부",
|
|
"intro": [
|
|
"SQL의 join 명령은 관계형 데이터베이스에서 여러 테이블의 정보를 결합하는 데 사용됩니다",
|
|
"이 140강짜리 워크숍에서 SQL 명령어를 더 깊게 다루며 학생 데이터베이스를 완성하세요."
|
|
]
|
|
},
|
|
"lab-world-cup-database": {
|
|
"title": "월드컵 데이터베이스 만들기",
|
|
"intro": [
|
|
"이 프로젝트에서 월드컵 경기 정보를 PostgreSQL에 입력하는 Bash 스크립트를 만들고, 유용한 통계를 질의하세요."
|
|
]
|
|
},
|
|
"workshop-kitty-ipsum-translator": {
|
|
"title": "키티 입숨 번역기 만들기",
|
|
"intro": [
|
|
"Bash 명령에는 생각보다 더 많은 기능이 있습니다.",
|
|
"이 140강짜리 워크숍에서 더 복잡한 명령과 명령 작동 방식의 세부를 배우세요."
|
|
]
|
|
},
|
|
"workshop-bike-rental-shop": {
|
|
"title": "자전거 대여점 만들기",
|
|
"intro": [
|
|
"이 210강짜리 워크숍에서 PostgreSQL을 사용해 자전거 대여점의 대여 정보를 저장하는 대화형 Bash 프로그램을 만드세요."
|
|
]
|
|
},
|
|
"lab-salon-appointment-scheduler": {
|
|
"title": "미용실 예약 스케줄러 만들기",
|
|
"intro": [
|
|
"이 실습에서는 PostgreSQL을 사용해 미용실의 고객과 예약을 추적하는 대화형 Bash 프로그램을 만드세요."
|
|
]
|
|
},
|
|
"review-bash-and-sql": {
|
|
"title": "Bash와 SQL 복습",
|
|
"intro": ["다가오는 퀴즈를 대비해 Bash와 SQL 개념을 복습하세요."]
|
|
},
|
|
"quiz-bash-and-sql": {
|
|
"title": "Bash와 SQL 퀴즈",
|
|
"intro": ["이 퀴즈로 Bash와 SQL에 대해 배운 내용을 테스트하세요."]
|
|
}
|
|
}
|
|
},
|
|
"introduction-to-nano": {
|
|
"title": "Nano 소개",
|
|
"summary": [
|
|
"터미널에서 파일을 생성하고 편집하기 위해 Nano 텍스트 편집기 사용법을 배우세요."
|
|
],
|
|
"intro": [
|
|
"Nano는 터미널에서 실행되는 간단하고 사용하기 쉬운 텍스트 편집기입니다. 명령줄을 벗어나지 않고 파일을 생성하고 편집할 수 있습니다.",
|
|
"이 과정에서 Nano로 파일을 생성하고 편집하는 방법, 텍스트 탐색 및 기본 편집 작업을 배우세요."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-working-with-nano": {
|
|
"title": "Nano 작업하기",
|
|
"intro": ["이 강의에서 Nano에 대해 배우세요."]
|
|
},
|
|
"workshop-castle": {
|
|
"title": "성 만들기",
|
|
"intro": [
|
|
"Nano는 터미널에서 바로 파일을 편집할 수 있게 해주는 프로그램입니다.",
|
|
"이 40강짜리 워크숍에서 성을 만들며 Nano로 터미널에서 파일을 편집하는 방법을 배우세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"introduction-to-git-and-github": {
|
|
"title": "Git과 GitHub 소개",
|
|
"summary": [
|
|
"Git과 GitHub로 소프트웨어 프로젝트를 관리하고 협업하는 방법을 배우세요."
|
|
],
|
|
"intro": [
|
|
"Git은 코드 변경 사항을 추적하고 다른 사람과 협업할 수 있게 하는 버전 관리 시스템입니다. GitHub는 Git 저장소 호스팅을 제공하는 웹 기반 플랫폼으로, 개발자가 프로젝트를 공유하고 협업하기 쉽게 합니다.",
|
|
"이 과정에서 저장소 생성, 변경 사항 커밋, 다른 사람과의 협업 등 Git과 GitHub의 기본을 배우세요."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-introduction-to-git-and-github": {
|
|
"title": "Git과 GitHub 소개",
|
|
"intro": ["이 강의들에서 Git과 GitHub 작업 방법을 배우세요."]
|
|
},
|
|
"lecture-working-with-code-reviews-branching-deployment-and-ci-cd": {
|
|
"title": "코드리뷰, 브랜칭, 배포 및 CI/CD 작업하기",
|
|
"intro": [
|
|
"이 강의들에서 코드리뷰, 브랜칭, 배포, CI/CD에 대해 배우세요."
|
|
]
|
|
},
|
|
"workshop-sql-reference-object": {
|
|
"title": "SQL 참조 객체 만들기",
|
|
"intro": [
|
|
"Git은 코드베이스에 대한 모든 변경을 추적하는 버전 관리 시스템입니다.",
|
|
"이 240강짜리 워크숍에서 자주 쓰는 SQL 명령을 담은 객체를 만들어 Git이 코드를 어떻게 추적하는지 배우세요."
|
|
]
|
|
},
|
|
"review-git": {
|
|
"title": "Git 복습",
|
|
"intro": ["다가오는 퀴즈를 대비해 Git 개념을 복습하세요."]
|
|
},
|
|
"quiz-git": {
|
|
"title": "Git 퀴즈",
|
|
"intro": ["이 퀴즈로 Git에 대해 배운 내용을 테스트하세요."]
|
|
}
|
|
}
|
|
},
|
|
"learn-oop-with-python": {
|
|
"title": "Python으로 배우는 OOP",
|
|
"summary": [
|
|
"이 동영상 과정에서 Python을 사용한 객체지향 프로그래밍을 배우세요."
|
|
],
|
|
"intro": [
|
|
"객체지향프로그래밍(OOP)은 객체라는 개념에 기반한 프로그래밍 패러다임으로, 객체는 데이터를 포함하고 그 데이터를 조작하는 코드를 담을 수 있습니다. 이 과정에서는 클래스, 객체, 상속 등 OOP의 주요 원리를 소개하고 실무에 적용하는 방법을 보여줍니다."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"oop-basics": {
|
|
"title": "OOP 기초",
|
|
"intro": [
|
|
"이 비디오들에서 클래스 생성 방법과 생성자 사용법을 포함한 OOP 기초를 배우세요."
|
|
]
|
|
},
|
|
"methods-and-inheritance": {
|
|
"title": "메서드와 상속",
|
|
"intro": ["이 비디오들에서 OOP의 메서드와 상속에 대해 배우세요."]
|
|
},
|
|
"advanced-oop-concepts": {
|
|
"title": "고급 OOP 개념",
|
|
"intro": [
|
|
"이 비디오들에서 getter, setter 등 고급 OOP 개념과 기타 중요한 원칙을 배우세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"introduction-to-python-basics": {
|
|
"title": "Python 기초 소개",
|
|
"summary": ["Python 프로그래밍의 기본을 배우세요."],
|
|
"intro": [
|
|
"이 인터랙티브 과정에서 Python의 기본 문법, 데이터 타입, 제어 구조를 배우세요."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-introduction-to-python": {
|
|
"title": "Python 소개",
|
|
"intro": [
|
|
"이 강의들에서 Python이 무엇인지와 개발 환경 설정 방법을 배우세요."
|
|
]
|
|
},
|
|
"lecture-understanding-variables-and-data-types": {
|
|
"title": "변수와 데이터 타입 이해하기",
|
|
"intro": ["이 강의들에서 Python의 변수와 데이터 타입에 대해 배우세요."]
|
|
},
|
|
"workshop-report-card-printer": {
|
|
"title": "성적표 출력기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 Python의 기본 데이터 타입을 다루는 성적표 출력기를 빌드하세요."
|
|
]
|
|
},
|
|
"lecture-introduction-to-python-strings": {
|
|
"title": "문자열 소개",
|
|
"intro": ["이 강의들에서 Python의 문자열에 대해 배우세요."]
|
|
},
|
|
"workshop-employee-profile-generator": {
|
|
"title": "직원 프로필 생성기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 형식화된 직원 배지를 생성하고 직원 코드를 분석하는 도구를 만들어 문자열 조작 기본을 연습하세요."
|
|
]
|
|
},
|
|
"lecture-numbers-and-mathematical-operations": {
|
|
"title": "숫자와 수학 연산",
|
|
"intro": ["이 강의들에서 Python의 숫자와 수학 연산에 대해 배우세요."]
|
|
},
|
|
"workshop-bill-splitter": {
|
|
"title": "계산서 분할기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 Python으로 숫자와 수학 연산을 연습하기 위한 계산서 분할기를 빌드하세요."
|
|
]
|
|
},
|
|
"lecture-booleans-and-conditionals": {
|
|
"title": "불리언과 조건문",
|
|
"intro": ["이 강의들에서 Python의 불리언과 조건문에 대해 배우세요."]
|
|
},
|
|
"workshop-movie-ticket-booking-calculator": {
|
|
"title": "영화 티켓 예약 계산기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 영화 티켓 예약 계산기를 만들어 불리언과 조건문 사용법을 연습하세요."
|
|
]
|
|
},
|
|
"lab-travel-weather-planner": {
|
|
"title": "여행 기상 계획표 만들기",
|
|
"intro": ["이 실습에서 조건문을 사용해 여행 기상 계획표를 빌드하세요."]
|
|
},
|
|
"lecture-understanding-functions-and-scope": {
|
|
"title": "함수와 스코프 이해하기",
|
|
"intro": ["이 강의들에서 Python의 함수와 스코프에 대해 배우세요."]
|
|
},
|
|
"lab-discount-calculator": {
|
|
"title": "할인 적용 함수 만들기",
|
|
"intro": [
|
|
"이 실습에서 가격에 할인을 적용하는 계산기를 빌드하여 Python 기본을 연습하세요."
|
|
]
|
|
},
|
|
"workshop-caesar-cipher": {
|
|
"title": "시저 암호 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 문자열, 조건문, 함수 등 기본 Python 개념을 사용해 시저 암호를 구현하세요."
|
|
]
|
|
},
|
|
"lab-rpg-character": {
|
|
"title": "RPG 캐릭터 만들기",
|
|
"intro": ["이 실습에서 RPG 캐릭터를 만들어 Python 기본을 연습하세요."]
|
|
},
|
|
"review-python-basics": {
|
|
"title": "Python 기초 복습",
|
|
"intro": [
|
|
"Python 기초 퀴즈를 보기 전에 배운 내용을 복습하세요.",
|
|
"이 복습 페이지에서 문자열, 함수, 비교 연산자 등 작업 내용을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-python-basics": {
|
|
"title": "Python 기초 퀴즈",
|
|
"intro": ["이 퀴즈로 Python 기초에 대해 배운 내용을 테스트하세요."]
|
|
}
|
|
}
|
|
},
|
|
"learn-python-loops-and-sequences": {
|
|
"title": "Python 반복문과 시퀀스 배우기",
|
|
"summary": ["Python에서 반복문과 시퀀스를 다루는 방법을 배우세요."],
|
|
"intro": [
|
|
"이 인터랙티브 과정에서 Python의 반복문과 시퀀스 사용법을 배우세요."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-working-with-loops-and-sequences": {
|
|
"title": "반복문과 시퀀스 다루기",
|
|
"intro": ["이 강의들에서 루프와 시퀀스 다루기를 배우세요."]
|
|
},
|
|
"workshop-pin-extractor": {
|
|
"title": "핀 추출기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 시에 숨겨진 비밀 PIN을 추출하는 함수를 만드세요."
|
|
]
|
|
},
|
|
"lab-number-pattern-generator": {
|
|
"title": "숫자 패턴 생성기 만들기",
|
|
"intro": ["이 실습에서 숫자 패턴 생성기를 빌드하세요."]
|
|
},
|
|
"review-loops-and-sequences": {
|
|
"title": "반복문과 시퀀스 복습",
|
|
"intro": [
|
|
"반복문과 시퀀스 퀴즈를 보기 전에 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 반복문, 리스트, 튜플과 그들의 일반적인 메서드 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-loops-and-sequences": {
|
|
"title": "반복문과 시퀀스 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 Python의 반복문과 시퀀스에 대해 배운 내용을 테스트하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"learn-python-dictionaries-and-sets": {
|
|
"title": "Python 딕셔너리와 집합 배우기",
|
|
"summary": ["Python에서 딕셔너리와 집합을 다루는 방법을 배우세요."],
|
|
"intro": [
|
|
"이 인터랙티브 과정에서 Python의 딕셔너리와 집합 사용법을 배우세요."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-working-with-dictionaries-and-sets": {
|
|
"title": "딕셔너리와 집합 다루기",
|
|
"intro": ["이 강의들에서 딕셔너리와 집합 사용법을 배우세요."]
|
|
},
|
|
"lecture-working-with-modules": {
|
|
"title": "모듈 다루기",
|
|
"intro": ["이 강의들에서 모듈 사용법을 배우세요."]
|
|
},
|
|
"workshop-medical-data-validator": {
|
|
"title": "의료 데이터 검증기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 딕셔너리와 집합을 사용해 의료 데이터 컬렉션을 검증하는 연습을 하세요."
|
|
]
|
|
},
|
|
"lab-user-configuration-manager": {
|
|
"title": "사용자 구성 관리자 만들기",
|
|
"intro": ["이 실습에서 Python의 딕셔너리 작업을 연습하세요."]
|
|
},
|
|
"review-dictionaries-and-sets": {
|
|
"title": "딕셔너리와 집합 복습",
|
|
"intro": [
|
|
"딕셔너리와 집합 퀴즈를 보기 전에 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 딕셔너리, 집합(set), 모듈 가져오기(import) 관련 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-dictionaries-and-sets": {
|
|
"title": "딕셔너리와 집합 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 Python의 딕셔너리와 집합에 대해 배운 내용을 테스트하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"learn-error-handling-in-python": {
|
|
"title": "Python 오류 처리 배우기",
|
|
"summary": ["Python에서 오류와 예외를 처리하는 방법을 배우세요."],
|
|
"intro": [
|
|
"이 인터랙티브 과정에서 Python의 오류와 예외 처리 방법을 배우세요."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-understanding-error-handling": {
|
|
"title": "오류 처리 이해하기",
|
|
"intro": [
|
|
"이 강의들에서 오류 처리에 대해 배우세요. 다양한 오류 유형, 좋은 디버깅 관행, 예외가 무엇인지, 그리고 예외 처리 방법을 배우세요."
|
|
]
|
|
},
|
|
"lab-isbn-validator": {
|
|
"title": "ISBN 검증기 디버깅",
|
|
"intro": [
|
|
"이 실습에서는 버그가 있는 앱으로 시작해 버그를 디버깅하고 수정하여 제대로 동작하도록 만드세요."
|
|
]
|
|
},
|
|
"review-error-handling": {
|
|
"title": "오류 처리 복습",
|
|
"intro": ["오류 처리 퀴즈를 보기 전에 배운 내용을 복습하세요."]
|
|
},
|
|
"quiz-error-handling": {
|
|
"title": "오류 처리 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 Python의 오류 처리에 대해 배운 내용을 테스트하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"learn-python-classes-and-objects": {
|
|
"title": "Python 클래스와 객체 배우기",
|
|
"summary": ["Python에서 클래스와 객체를 다루는 방법을 배우세요."],
|
|
"intro": [
|
|
"이 인터랙티브 과정에서 Python의 클래스와 객체 사용법을 배우세요."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-classes-and-objects": {
|
|
"title": "클래스와 객체",
|
|
"intro": ["이 강의들에서 클래스와 객체에 대해 배우세요."]
|
|
},
|
|
"workshop-musical-instrument-inventory": {
|
|
"title": "악기 재고 관리기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 간단한 악기 재고 관리기를 만들어 클래스, 객체, 메서드를 배우세요."
|
|
]
|
|
},
|
|
"lab-planet-class": {
|
|
"title": "행성 클래스 만들기",
|
|
"intro": ["이 실습에서 행성을 나타내는 클래스를 생성하세요."]
|
|
},
|
|
"workshop-email-simulator": {
|
|
"title": "이메일 시뮬레이터 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 클래스를 구현하고 서로 다른 사용자 간에 이메일을 전송·수신·관리하는 이메일 시뮬레이터를 만들어 클래스와 객체를 연습하세요."
|
|
]
|
|
},
|
|
"lab-budget-app": {
|
|
"title": "예산 앱 만들기",
|
|
"intro": [
|
|
"이 실습에서 예산 앱을 빌드하고 해당 클래스와 메서드를 생성하는 연습을 하세요."
|
|
]
|
|
},
|
|
"review-classes-and-objects": {
|
|
"title": "클래스와 객체 복습",
|
|
"intro": [
|
|
"클래스와 객체 퀴즈를 보기 전에 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 클래스 작동 방식, 객체란 무엇인지, 메서드·속성·특수 메서드 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-classes-and-objects": {
|
|
"title": "클래스와 객체 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 Python의 클래스와 객체에 대해 배운 내용을 테스트하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"introduction-to-oop-in-python": {
|
|
"title": "Python의 OOP 소개",
|
|
"summary": ["Python에서 객체지향프로그래밍(OOP)의 기초를 배우세요."],
|
|
"intro": [
|
|
"이 인터랙티브 과정에서 Python의 객체지향프로그래밍(OOP) 기초를 배우세요."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-understanding-object-oriented-programming-and-encapsulation": {
|
|
"title": "객체지향프로그래밍과 캡슐화 이해하기",
|
|
"intro": ["이 강의들에서 객체지향 프로그래밍과 캡슐화 이해를 배우세요."]
|
|
},
|
|
"workshop-salary-tracker": {
|
|
"title": "급여 추적기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 캡슐화, 프로퍼티 등 OOP 개념을 연습하며 직원 급여 추적 시스템을 빌드하세요."
|
|
]
|
|
},
|
|
"lab-game-character-stats": {
|
|
"title": "게임 캐릭터 능력치 추적기 만들기",
|
|
"intro": [
|
|
"이 실습에서 객체지향프로그래밍으로 다양한 능력치를 가진 게임 캐릭터를 빌드하세요."
|
|
]
|
|
},
|
|
"lecture-understanding-inheritance-and-polymorphism": {
|
|
"title": "상속과 다형성 이해하기",
|
|
"intro": ["이 강의들에서 상속과 다형성 이해를 배우세요."]
|
|
},
|
|
"workshop-media-catalogue": {
|
|
"title": "미디어 카탈로그 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 객체지향 원칙을 사용해 미디어 카탈로그 애플리케이션을 만들어 보세요."
|
|
]
|
|
},
|
|
"lecture-understanding-abstraction": {
|
|
"title": "추상화 이해하기",
|
|
"intro": ["이 강의들에서 추상화 이해를 배우세요."]
|
|
},
|
|
"workshop-discount-calculator": {
|
|
"title": "할인 계산기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 추상 기본 클래스를 통해 유연한 할인 계산기를 만들어 여러 할인 알고리즘을 핵심 로직을 수정하지 않고 교체해서 적용할 수 있게 하세요."
|
|
]
|
|
},
|
|
"lab-player-interface": {
|
|
"title": "플레이어 인터페이스 만들기",
|
|
"intro": [
|
|
"이 실습에서 <code>abc</code> 모듈을 사용해 플레이어 인터페이스를 빌드하세요."
|
|
]
|
|
},
|
|
"lab-polygon-area-calculator": {
|
|
"title": "다각형 면적 계산기 만들기",
|
|
"intro": [
|
|
"이 실습에서 객체지향프로그래밍을 사용해 정사각형·직사각형 등 다양한 다각형의 면적을 계산하세요."
|
|
]
|
|
},
|
|
"review-object-oriented-programming": {
|
|
"title": "객체지향프로그래밍 복습",
|
|
"intro": ["객체지향프로그래밍 퀴즈를 보기 전에 배운 내용을 복습하세요."]
|
|
},
|
|
"quiz-object-oriented-programming": {
|
|
"title": "객체지향프로그래밍 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 Python의 객체지향프로그래밍에 대해 배운 내용을 테스트하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"introduction-to-linear-data-structures-in-python": {
|
|
"title": "Python 선형 자료구조 소개",
|
|
"summary": ["Python의 선형 자료구조 기초를 배우세요."],
|
|
"intro": ["이 인터랙티브 과정에서 Python의 선형 자료구조 기초를 배우세요."],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-working-with-common-data-structures": {
|
|
"title": "일반적인 자료구조 다루기",
|
|
"intro": ["이 강의들에서 일반적인 자료구조를 다루는 방법을 배우세요."]
|
|
},
|
|
"workshop-linked-list-class": {
|
|
"title": "연결 리스트 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 자료구조 지식을 사용해 연결 리스트를 빌드하는 연습을 하세요."
|
|
]
|
|
},
|
|
"lab-hash-table": {
|
|
"title": "해시 테이블 만들기",
|
|
"intro": [
|
|
"해시 테이블은 키-값 쌍을 저장하고 빠른 조회에 최적화된 자료구조입니다.",
|
|
"이 실습에서 자료구조에 관한 지식을 사용해 해시 테이블을 빌드하세요."
|
|
]
|
|
},
|
|
"review-data-structures": {
|
|
"title": "자료구조 복습",
|
|
"intro": [
|
|
"자료구조 퀴즈를 보기 전에 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 다양한 자료구조, 알고리즘, 시간 및 공간 복잡도, 빅오 표기법 관련 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-data-structures": {
|
|
"title": "자료구조 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 Python의 자료구조에 대해 배운 내용을 테스트하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"learn-algorithms-in-python": {
|
|
"title": "Python에서 알고리즘 배우기",
|
|
"summary": ["Python에서 알고리즘의 기초를 배우세요."],
|
|
"intro": ["이 인터랙티브 과정에서 Python의 알고리즘 기초를 배우세요."],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-searching-and-sorting-algorithms": {
|
|
"title": "탐색 및 정렬 알고리즘",
|
|
"intro": [
|
|
"이 강의들에서 선형 탐색, 이진 탐색, 병합 정렬을 포함한 기본적인 탐색 및 정렬 알고리즘을 배우세요.",
|
|
"이 강의들은 알고리즘 구현, 시간 및 공간 복잡도 분석, 분할 정복 프로그래밍 패러다임을 다룹니다."
|
|
]
|
|
},
|
|
"workshop-binary-search": {
|
|
"title": "이진 탐색 알고리즘 구현",
|
|
"intro": [
|
|
"이진 탐색 알고리즘은 정렬된 리스트에서 목표 항목을 찾는 탐색 알고리즘입니다.",
|
|
"이 워크숍에서 이진 탐색 알고리즘을 구현하고 목표를 찾기 위해 거친 경로를 반환하거나 \"Value not found\"를 반환하세요."
|
|
]
|
|
},
|
|
"lab-bisection-method": {
|
|
"title": "이분법(Bisection) 메서드 구현하기",
|
|
"intro": ["이 실습에서 이분법을 구현해 수의 제곱근을 찾으세요."]
|
|
},
|
|
"workshop-merge-sort": {
|
|
"title": "병합 정렬 알고리즘 구현",
|
|
"intro": [
|
|
"병합 정렬 알고리즘은 분할 정복 원리에 기반한 정렬 알고리즘입니다.",
|
|
"이 워크숍에서 병합 정렬 알고리즘을 구현해 무작위 수 목록을 정렬하세요."
|
|
]
|
|
},
|
|
"lab-quicksort": {
|
|
"title": "퀵 정렬 알고리즘 구현",
|
|
"intro": [
|
|
"이 실습에서 정수 리스트를 정렬하기 위해 퀵 정렬 알고리즘을 구현하세요."
|
|
]
|
|
},
|
|
"lab-selection-sort": {
|
|
"title": "선택 정렬 알고리즘 구현",
|
|
"intro": ["이 실습에서 선택 정렬 알고리즘을 구현하세요."]
|
|
},
|
|
"lab-luhn-algorithm": {
|
|
"title": "룬 알고리즘(Luhn Algorithm) 구현하기",
|
|
"intro": [
|
|
"이 실습에서 신용카드 번호와 같은 식별 번호를 검증하기 위해 룬 알고리즘을 구현하세요."
|
|
]
|
|
},
|
|
"lab-tower-of-hanoi": {
|
|
"title": "하노이의 탑 알고리즘 구현",
|
|
"intro": [
|
|
"이 실습에서 하노이의 탑 퍼즐을 해결하는 알고리즘을 구현하세요."
|
|
]
|
|
},
|
|
"review-searching-and-sorting-algorithms": {
|
|
"title": "탐색 및 정렬 알고리즘 복습",
|
|
"intro": [
|
|
"탐색 및 정렬 알고리즘 퀴즈를 보기 전에 배운 내용을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-searching-and-sorting-algorithms": {
|
|
"title": "탐색 및 정렬 알고리즘 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 Python의 탐색 및 정렬 알고리즘에 대해 배운 내용을 테스트하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"learn-graphs-and-trees-in-python": {
|
|
"title": "Python에서 그래프와 트리 배우기",
|
|
"summary": ["Python에서 그래프와 트리의 기초를 배우세요."],
|
|
"intro": ["이 인터랙티브 과정에서 Python의 그래프와 트리 기초를 배우세요."],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-understanding-graphs-and-trees": {
|
|
"title": "그래프와 트리 이해하기",
|
|
"intro": [
|
|
"이 강의에서 그래프, 트리 같은 기본 자료구조와 컴퓨터과학에서의 실제 적용 사례를 배우세요."
|
|
]
|
|
},
|
|
"workshop-shortest-path-algorithm": {
|
|
"title": "최단 경로 알고리즘 구현",
|
|
"intro": [
|
|
"이 워크숍에서 그래프 내 두 노드 간 최단 경로를 찾는 알고리즘을 구현하세요."
|
|
]
|
|
},
|
|
"lab-adjacency-list-to-matrix-converter": {
|
|
"title": "인접 리스트를 행렬로 변환기 만들기",
|
|
"intro": [
|
|
"이 실습에서 그래프의 인접 리스트 표현을 인접 행렬 표현으로 변환하는 함수를 구현하세요."
|
|
]
|
|
},
|
|
"workshop-breadth-first-search": {
|
|
"title": "너비 우선 탐색 알고리즘 구현",
|
|
"intro": [
|
|
"이 워크숍에서 너비 우선 탐색 알고리즘을 사용해 모든 유효한 괄호 조합을 생성하세요."
|
|
]
|
|
},
|
|
"lab-depth-first-search": {
|
|
"title": "깊이 우선 탐색 알고리즘 구현",
|
|
"intro": ["이 실습에서 깊이 우선 탐색 알고리즘을 구현하세요."]
|
|
},
|
|
"lab-n-queens-problem": {
|
|
"title": "N-퀸 문제 구현",
|
|
"intro": ["이 실습에서 N-퀸 문제에 대한 해법을 구현하세요."]
|
|
},
|
|
"review-graphs-and-trees": {
|
|
"title": "그래프와 트리 복습",
|
|
"intro": ["그래프와 트리 퀴즈를 보기 전에 배운 내용을 복습하세요."]
|
|
},
|
|
"quiz-graphs-and-trees": {
|
|
"title": "그래프와 트리 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 Python의 그래프와 트리에 대해 배운 내용을 테스트하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"learn-dynamic-programming-in-python": {
|
|
"title": "Python에서 동적 계획법 배우기",
|
|
"summary": ["Python에서 동적 계획법의 기초를 배우세요."],
|
|
"intro": ["이 인터랙티브 과정에서 Python의 동적 계획법 기초를 배우세요."],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-understanding-dynamic-programming": {
|
|
"title": "동적 계획법 이해하기",
|
|
"intro": [
|
|
"이 강의에서 동적 계획법이 무엇인지, 복잡한 문제를 더 단순한 하위 문제로 나누어 효율적으로 해결하는 알고리즘 기법에 대해 배우세요."
|
|
]
|
|
},
|
|
"lab-nth-fibonacci-number": {
|
|
"title": "Nth 피보나치 수 계산기 만들기",
|
|
"intro": [
|
|
"이 실습에서 동적 계획법 접근법을 사용해 피보나치 수열 계산기를 구현하세요."
|
|
]
|
|
},
|
|
"review-dynamic-programming": {
|
|
"title": "동적 계획법 복습",
|
|
"intro": ["동적 계획법 퀴즈를 보기 전에 배운 내용을 복습하세요."]
|
|
},
|
|
"quiz-dynamic-programming": {
|
|
"title": "동적 계획법 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 Python의 동적 계획법에 대해 배운 내용을 테스트하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"introduction-to-variables-and-strings-in-javascript": {
|
|
"title": "JavaScript의 변수와 문자열 소개",
|
|
"summary": ["JavaScript의 변수와 문자열 기초를 배우세요."],
|
|
"intro": [
|
|
"이 인터랙티브 과정에서 JavaScript의 기본 개념인 변수와 문자열에 대해 배우세요."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-introduction-to-javascript": {
|
|
"title": "JavaScript 소개",
|
|
"intro": [
|
|
"이 강의들에서 변수, 데이터 타입, JavaScript와 HTML/CSS의 상호작용, 문자열 등 JavaScript의 기초를 배우세요."
|
|
]
|
|
},
|
|
"lecture-introduction-to-strings": {
|
|
"title": "문자열 소개",
|
|
"intro": [
|
|
"이 강의들에서 문자열과 문자열 연결(concatenation) 사용법을 배우세요."
|
|
]
|
|
},
|
|
"lecture-understanding-code-clarity": {
|
|
"title": "코드 가독성 이해하기",
|
|
"intro": [
|
|
"이 강의들에서 JavaScript의 주석과 세미콜론의 역할에 대해 배우세요."
|
|
]
|
|
},
|
|
"workshop-greeting-bot": {
|
|
"title": "인사 봇 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 인사 봇을 만들어 JavaScript 기초를 배우세요.",
|
|
"변수, <code>let</code>, <code>const</code>, <code>console.log</code> 및 기본 문자열 사용법을 배우세요."
|
|
]
|
|
},
|
|
"lab-javascript-trivia-bot": {
|
|
"title": "JavaScript 퀴즈 봇 만들기",
|
|
"intro": [
|
|
"이 실습에서 JavaScript 변수와 문자열을 다루며 퀴즈 봇을 만들어 연습하세요."
|
|
]
|
|
},
|
|
"lab-sentence-maker": {
|
|
"title": "문장 생성기 만들기",
|
|
"intro": [
|
|
"이 실습에서 문자열과 연결을 계속 연습하며 다양한 이야기를 생성하고 맞춤화하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-data-types": {
|
|
"title": "데이터 타입 다루기",
|
|
"intro": [
|
|
"다음 강의들에서 JavaScript의 데이터 타입을 다루는 방법, 동적 타이핑과 정적 타이핑의 차이, <code>typeof</code> 연산자 및 <code>typeof null</code> 버그에 대해 배우세요."
|
|
]
|
|
},
|
|
"review-javascript-variables-and-data-types": {
|
|
"title": "JavaScript 변수와 데이터 타입 복습",
|
|
"intro": [
|
|
"JavaScript 변수와 데이터 타입에 대한 퀴즈 전에 개념을 먼저 복습하세요.",
|
|
"이 페이지를 열어 변수, 데이터 타입, 로그 출력과 주석 관련 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-variables-and-data-types": {
|
|
"title": "JavaScript 변수와 데이터 타입 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 JavaScript의 변수와 데이터 타입에 대한 지식을 테스트하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-strings-in-javascript": {
|
|
"title": "JavaScript에서 문자열 다루기",
|
|
"intro": [
|
|
"이 강의들에서 문자열의 문자 접근법, 템플릿 리터럴과 보간법, 문자열에서 새 줄 생성 방법 등 문자열 다루는 법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-teacher-chatbot": {
|
|
"title": "교사용 챗봇 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 챗봇을 만들어 JavaScript 문자열을 더 배우세요.",
|
|
"템플릿 리터럴과 <code>indexOf</code> 메서드 사용법을 배우세요."
|
|
]
|
|
},
|
|
"lecture-working-with-string-character-methods": {
|
|
"title": "문자열 문자 메서드 다루기",
|
|
"intro": [
|
|
"이 강의에서 ASCII 문자 인코딩과 JavaScript의 <code>charCodeAt()</code>, <code>fromCharCode()</code> 메서드를 사용해 문자와 숫자 ASCII 값 간을 변환하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"lecture-working-with-string-search-and-slice-methods": {
|
|
"title": "문자열 검색 및 슬라이스 메서드 다루기",
|
|
"intro": [
|
|
"이 강의에서 <code>includes()</code> 메서드로 부분 문자열을 검색하는 방법과 <code>slice()</code>로 문자열의 일부를 추출하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-string-inspector": {
|
|
"title": "문자열 검사기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 <code>includes()</code>와 <code>slice()</code> 메서드를 사용해 문자열 검사기를 빌드하며 연습하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-string-formatting-methods": {
|
|
"title": "문자열 포맷팅 메서드 다루기",
|
|
"intro": [
|
|
"이 강의에서 <code>toUpperCase()</code>, <code>toLowerCase()</code>로 대소문자 변환하는 방법과 <code>trim()</code>, <code>trimStart()</code>, <code>trimEnd()</code>로 공백을 제거하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-string-formatter": {
|
|
"title": "문자열 포매터 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 <code>trim()</code>, <code>toUpperCase()</code>, <code>toLowerCase()</code> 등 다양한 문자열 메서드를 연습하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-string-modification-methods": {
|
|
"title": "문자열 수정 메서드 다루기",
|
|
"intro": [
|
|
"이 강의에서 <code>replace()</code>로 문자열 일부를 바꾸는 방법과 <code>repeat()</code>로 문자열을 여러 번 반복하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-string-transformer": {
|
|
"title": "문자열 변환기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 <code>replace()</code>, <code>replaceAll()</code>, <code>repeat()</code> 메서드를 사용해 연습하세요."
|
|
]
|
|
},
|
|
"review-javascript-strings": {
|
|
"title": "JavaScript 문자열 복습",
|
|
"intro": [
|
|
"JavaScript 문자열 관련 퀴즈를 보기 전에 먼저 복습하세요.",
|
|
"이 페이지를 열어 템플릿 리터럴, <code>slice</code>, <code>includes</code>, <code>trim</code> 메서드 등 문자열 관련 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-strings": {
|
|
"title": "JavaScript 문자열 퀴즈",
|
|
"intro": ["이 퀴즈로 JavaScript 문자열에 대한 지식을 테스트하세요."]
|
|
}
|
|
}
|
|
},
|
|
"introduction-to-booleans-and-numbers-in-javascript": {
|
|
"title": "JavaScript의 불리언과 숫자 소개",
|
|
"summary": ["JavaScript의 불리언과 숫자 기초를 배우세요."],
|
|
"intro": [
|
|
"이 인터랙티브 과정에서 JavaScript의 불리언과 숫자 사용법을 배우세요."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-working-with-numbers-and-arithmetic-operators": {
|
|
"title": "숫자와 산술 연산자 다루기",
|
|
"intro": [
|
|
"이 강의들에서 숫자 타입, 산술 연산자 및 숫자와 문자열과 함께 사용할 때의 동작 등을 배우세요."
|
|
]
|
|
},
|
|
"lab-debug-type-coercion-errors": {
|
|
"title": "형 변환(Type Coercion) 오류 디버깅",
|
|
"intro": [
|
|
"이 실습에서는 여러 형 변환 오류가 있는 버그 있는 앱을 다루게 됩니다.",
|
|
"앱이 올바르게 동작하도록 오류를 찾아 수정하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-operator-behavior": {
|
|
"title": "연산자 동작 다루기",
|
|
"intro": [
|
|
"이 강의들에서 연산자 우선순위, 증감 연산자, 복합 할당 연산자에 대해 배우세요."
|
|
]
|
|
},
|
|
"lab-debug-increment-and-decrement-operator-errors": {
|
|
"title": "증감 연산자 오류 디버깅",
|
|
"intro": [
|
|
"이 실습에서 증감 연산자와 관련된 여러 오류가 있는 앱을 디버깅하세요.",
|
|
"앱이 의도대로 동작하도록 오류를 찾아 수정하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-comparison-and-boolean-operators": {
|
|
"title": "비교 연산자와 불리언 연산자 다루기",
|
|
"intro": [
|
|
"이 강의들에서 불리언과 동등성·부등성 연산자 등 여러 비교 연산자에 대해 배우세요."
|
|
]
|
|
},
|
|
"workshop-logic-checker-app": {
|
|
"title": "논리 검사 앱 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 조건문과 비교 연산자를 사용해 논리 검사 앱을 빌드하며 연습하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-unary-and-bitwise-operators": {
|
|
"title": "단항 및 비트 연산자 다루기",
|
|
"intro": ["이 강의들에서 단항 연산자와 비트 연산자에 대해 배우세요."]
|
|
},
|
|
"lecture-working-with-conditional-logic-and-math-methods": {
|
|
"title": "조건문과 <code>Math</code> 메서드 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 조건문, 이진 논리 연산자, 그리고 <code>Math</code> 객체에 대해 배우게 됩니다."
|
|
]
|
|
},
|
|
"workshop-mathbot": {
|
|
"title": "Mathbot 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 Math 객체의 다양한 메서드를 사용해 Mathbot을 만들어보며 복습합니다."
|
|
]
|
|
},
|
|
"lab-fortune-teller": {
|
|
"title": "운세점 만들기",
|
|
"intro": [
|
|
"이 실습에서는 사용 가능한 운세들 중에서 무작위로 운세를 선택해 운세점 프로그램을 만들게 됩니다.",
|
|
"<code>Math.random()</code> 메서드와 <code>Math.floor()</code> 메서드를 사용해 난수를 생성하는 방법을 연습합니다."
|
|
]
|
|
},
|
|
"lecture-working-with-numbers-and-common-number-methods": {
|
|
"title": "숫자와 일반적인 숫자 메서드 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 숫자와 자주 쓰이는 숫자 메서드(예: <code>isNaN()</code>, <code>parseInt()</code>, <code>parseFloat()</code>, <code>toFixed()</code>)에 대해 배우세요."
|
|
]
|
|
},
|
|
"review-javascript-math": {
|
|
"title": "자바스크립트 Math 복습",
|
|
"intro": [
|
|
"<code>Math</code> 객체에 대해 퀴즈 보기 전에 지금까지 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>Math.random()</code>, <code>Math.floor()</code> 등 <code>Math</code> 메서드 사용법을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-math": {
|
|
"title": "자바스크립트 Math 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 자바스크립트의 <code>Math</code> 객체에 대한 지식을 확인하세요."
|
|
]
|
|
},
|
|
"lecture-understanding-comparisons-and-conditionals": {
|
|
"title": "비교 연산과 조건문 이해하기",
|
|
"intro": [
|
|
"이 강의들에서는 비교 연산자와 조건문을 배웁니다. 다양한 조건문이 서로 어떻게 다른지, 그리고 <code>null</code>과 <code>undefined</code>와의 비교가 어떻게 작동하는지 배우게 됩니다."
|
|
]
|
|
},
|
|
"review-javascript-comparisons-and-conditionals": {
|
|
"title": "자바스크립트 비교연산·조건문 복습",
|
|
"intro": [
|
|
"조건문 관련 퀴즈를 보기 전에 지금까지 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>switch</code> 문과 다른 형식의 조건문 사용법 등을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-comparisons-and-conditionals": {
|
|
"title": "자바스크립트 비교연산·조건문 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 자바스크립트의 비교 연산과 조건문에 대한 지식을 확인하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"introduction-functions-in-javascript": {
|
|
"title": "자바스크립트 함수 소개",
|
|
"summary": ["자바스크립트 함수의 기초를 배우세요."],
|
|
"intro": [
|
|
"이 인터랙티브 강좌에서는 자바스크립트 함수 사용법을 배우게 됩니다."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-working-with-functions": {
|
|
"title": "함수 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 함수를 사용해 코드 블록을 재사용하는 방법, 함수의 목적과 동작 방식, 그리고 프로그래밍에서 스코프가 어떻게 동작하는지 배우세요."
|
|
]
|
|
},
|
|
"workshop-calculator": {
|
|
"title": "계산기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 계산기를 만들어 함수를 이용한 지식을 복습합니다."
|
|
]
|
|
},
|
|
"lab-boolean-check": {
|
|
"title": "불리언 검사 함수 만들기",
|
|
"intro": ["이 실습에서는 값이 불리언인지 검사하는 함수를 구현합니다."]
|
|
},
|
|
"lab-email-masker": {
|
|
"title": "이메일 마스커 만들기",
|
|
"intro": [
|
|
"이 실습에서는 이메일 주소를 받아 가리는 기능(email masker)을 구현하세요.",
|
|
"문자열 자르기, 연결, 함수 사용을 연습합니다."
|
|
]
|
|
},
|
|
"workshop-loan-qualification-checker": {
|
|
"title": "대출 자격 검사기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 조건문을 이용해 대출 자격 검사기 앱을 만들어 조건문 사용법을 계속 학습합니다.",
|
|
"<code>if</code> 문과 비교 연산자, 그리고 <code>if</code> 문에서 여러 조건을 사용하는 방법을 더 배우게 됩니다."
|
|
]
|
|
},
|
|
"lab-celsius-to-fahrenheit-converter": {
|
|
"title": "섭씨-화씨 변환기 만들기",
|
|
"intro": ["이 실습에서는 섭씨를 화씨로 변환하는 함수를 구현합니다."]
|
|
},
|
|
"lab-counting-cards": {
|
|
"title": "카드 계산 도우미 만들기",
|
|
"intro": [
|
|
"이 실습에서는 자바스크립트를 사용해 딜된 카드를 세는 기능을 구현합니다."
|
|
]
|
|
},
|
|
"lab-leap-year-calculator": {
|
|
"title": "윤년 계산기 만들기 ",
|
|
"intro": [
|
|
"이 실습에서는 조건문과 반복문을 사용해 특정 연도가 윤년인지 판별합니다."
|
|
]
|
|
},
|
|
"lab-truncate-string": {
|
|
"title": "문자열 자르기 알고리즘 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 문자열을 특정 길이에서 잘라내는 연습을 합니다."
|
|
]
|
|
},
|
|
"lab-string-ending-checker": {
|
|
"title": "문자열 끝 확인 도구 만들기",
|
|
"intro": [
|
|
"이 실습에서는 주어진 문자열이 특정 대상 문자열로 끝나는지 확인하는 함수를 구현합니다."
|
|
]
|
|
},
|
|
"review-javascript-functions": {
|
|
"title": "자바스크립트 함수 복습",
|
|
"intro": [
|
|
"자바스크립트 함수에 대해 퀴즈 보기 전에 지금까지 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 함수, 화살표 함수, 스코프를 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-functions": {
|
|
"title": "자바스크립트 함수 퀴즈",
|
|
"intro": ["이 퀴즈로 자바스크립트 함수에 대한 지식을 확인하세요."]
|
|
}
|
|
}
|
|
},
|
|
"introduction-to-arrays-in-javascript": {
|
|
"title": "자바스크립트 배열 소개",
|
|
"summary": ["자바스크립트 배열의 기초를 배우세요."],
|
|
"intro": [
|
|
"이 인터랙티브 강좌에서는 자바스크립트 배열 사용법을 배우게 됩니다."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-working-with-arrays": {
|
|
"title": "배열 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 자바스크립트 배열의 구성 요소, 1차원 및 2차원 배열, 배열 요소에 접근하고 업데이트하는 방법 등 다양한 내용을 배우세요."
|
|
]
|
|
},
|
|
"workshop-shopping-list": {
|
|
"title": "쇼핑 목록 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 쇼핑 목록을 만들어 배열을 다루는 방법을 연습합니다.",
|
|
"<code>push</code>, <code>pop</code>, <code>shift</code>, <code>unshift</code> 같은 메서드를 사용해 배열에 요소를 추가하고 제거하는 방법을 복습합니다."
|
|
]
|
|
},
|
|
"lab-lunch-picker-program": {
|
|
"title": "점심 고르기 프로그램 만들기",
|
|
"intro": [
|
|
"이 실습에서는 점심 고르기 프로그램을 만들어 배열과 난수 사용법을 복습합니다."
|
|
]
|
|
},
|
|
"lab-golf-score-translator": {
|
|
"title": "골프 점수 번역기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 배열 메서드를 사용해 골프 점수를 별명으로 변환합니다."
|
|
]
|
|
},
|
|
"lecture-working-with-common-array-methods": {
|
|
"title": "일반적인 배열 메서드 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 배열에서 항목의 위치를 얻거나 특정 요소 포함 여부를 확인하고, 배열을 복사하는 등 고급 작업을 수행하는 배열 메서드들에 대해 배웁니다."
|
|
]
|
|
},
|
|
"review-javascript-arrays": {
|
|
"title": "자바스크립트 배열 복습",
|
|
"intro": [
|
|
"자바스크립트 배열에 대해 퀴즈 보기 전에 지금까지 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 배열 구조 분해, 배열에 요소를 추가·제거하는 방법 등을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-arrays": {
|
|
"title": "자바스크립트 배열 퀴즈",
|
|
"intro": ["이 퀴즈로 자바스크립트 배열에 대한 지식을 확인하세요."]
|
|
}
|
|
}
|
|
},
|
|
"introduction-to-objects-in-javascript": {
|
|
"title": "자바스크립트 객체 소개",
|
|
"summary": ["자바스크립트 객체의 기초를 배우세요."],
|
|
"intro": [
|
|
"이 인터랙티브 강좌에서는 자바스크립트 객체 사용법을 배우게 됩니다."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-introduction-to-javascript-objects-and-their-properties": {
|
|
"title": "자바스크립트 객체와 그 프로퍼티 소개",
|
|
"intro": [
|
|
"이 강의들에서는 자바스크립트 객체의 기본, 객체 생성법, 프로퍼티 접근법, 원시형과 비원시형 데이터 타입의 차이를 이해하는 방법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"lecture-working-with-json": {
|
|
"title": "JSON 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 JavaScript Object Notation(JSON)과 JSON 데이터 접근법, <code>JSON.parse()</code> 및 <code>JSON.stringify()</code> 메서드 사용법을 배웁니다."
|
|
]
|
|
},
|
|
"lecture-working-with-optional-chaining-and-object-destructuring": {
|
|
"title": "옵셔널 체이닝과 객체 구조 분해 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 옵셔널 체이닝 연산자와 객체 구조 분해 문법 등 자바스크립트의 고급 객체 조작 기법을 배웁니다."
|
|
]
|
|
},
|
|
"workshop-recipe-tracker": {
|
|
"title": "레시피 추적기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 레시피 추적기를 만들어 자바스크립트 객체 작업을 복습합니다."
|
|
]
|
|
},
|
|
"lab-quiz-game": {
|
|
"title": "퀴즈 게임 만들기",
|
|
"intro": [
|
|
"이 실습에서는 자바스크립트 배열과 객체를 사용해 퀴즈 게임을 만듭니다.",
|
|
"배열에서 문제와 답을 무작위로 선택하고 비교하기 위해 함수를 사용하는 연습도 합니다."
|
|
]
|
|
},
|
|
"lab-record-collection": {
|
|
"title": "레코드 컬렉션 만들기",
|
|
"intro": ["이 실습에서는 레코드 컬렉션을 관리하는 함수를 만듭니다."]
|
|
},
|
|
"review-javascript-objects": {
|
|
"title": "자바스크립트 객체 복습",
|
|
"intro": [
|
|
"자바스크립트 객체에 대한 퀴즈를 보기 전에 지금까지 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 객체에서 정보 접근하는 방법, 객체 구조 분해, JSON 다루기 등을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-objects": {
|
|
"title": "자바스크립트 객체 퀴즈",
|
|
"intro": ["이 퀴즈로 자바스크립트 객체에 대한 지식을 확인하세요."]
|
|
}
|
|
}
|
|
},
|
|
"introduction-to-loops-in-javascript": {
|
|
"title": "자바스크립트 반복문 소개",
|
|
"summary": ["자바스크립트 반복문의 기초를 배우세요."],
|
|
"intro": [
|
|
"이 인터랙티브 강좌에서는 자바스크립트 반복문 사용법을 배우게 됩니다."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-working-with-loops": {
|
|
"title": "반복문 다루기",
|
|
"intro": [
|
|
"반복문은 자바스크립트의 필수 요소입니다. 다음 강의들에서는 다양한 반복문 유형과 동작 방식, 그리고 반복(iteration)이 어떻게 작동하는지 배우실 수 있도록 준비했습니다."
|
|
]
|
|
},
|
|
"workshop-sentence-analyzer": {
|
|
"title": "문장 분석기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 문장 분석기 앱을 만들어 자바스크립트 반복문 사용법을 복습합니다."
|
|
]
|
|
},
|
|
"lab-longest-word-in-a-string": {
|
|
"title": "가장 긴 단어 찾기 앱 만들기",
|
|
"intro": [
|
|
"이 실습에서는 자바스크립트 반복문을 사용해 주어진 문장에서 가장 긴 단어의 길이를 찾습니다."
|
|
]
|
|
},
|
|
"lab-factorial-calculator": {
|
|
"title": "팩토리얼 계산기 만들기 ",
|
|
"intro": [
|
|
"이 실습에서는 팩토리얼 계산기를 만듭니다.",
|
|
"반복문과 조건문을 사용해 숫자의 팩토리얼을 계산하는 연습을 합니다."
|
|
]
|
|
},
|
|
"lab-mutations": {
|
|
"title": "변이(Mutations) 알고리즘 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 두 문자열을 반복하며 문자들을 비교하는 연습을 하세요."
|
|
]
|
|
},
|
|
"lab-chunky-monkey": {
|
|
"title": "Chunky Monkey 알고리즘 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 배열을 원하는 방식으로 작은 배열들로 분할하는 연습을 합니다."
|
|
]
|
|
},
|
|
"lab-profile-lookup": {
|
|
"title": "프로필 조회 만들기",
|
|
"intro": ["이 실습에서는 프로필 정보를 조회하는 함수를 만듭니다."]
|
|
},
|
|
"lab-repeat-a-string": {
|
|
"title": "문자열 반복 함수 만들기",
|
|
"intro": [
|
|
"이 실습에서는 문자열을 지정한 횟수만큼 반복하는 반복문을 구현합니다."
|
|
]
|
|
},
|
|
"lab-missing-letter-detector": {
|
|
"title": "누락된 문자 탐지기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 연속된 문자 범위에서 누락된 문자를 찾아 반환하는 함수를 만듭니다."
|
|
]
|
|
},
|
|
"review-javascript-loops": {
|
|
"title": "자바스크립트 반복문 복습",
|
|
"intro": [
|
|
"다양한 자바스크립트 반복문에 대해 퀴즈 보기 전에 복습하세요.",
|
|
"이 페이지를 열어 <code>for...of</code> 반복문, <code>while</code> 반복문, <code>break</code>와 <code>continue</code> 문 등 사용법을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-loops": {
|
|
"title": "자바스크립트 반복문 퀴즈",
|
|
"intro": ["이 퀴즈로 자바스크립트 반복문에 대한 지식을 확인하세요."]
|
|
}
|
|
}
|
|
},
|
|
"javascript-fundamentals-review": {
|
|
"title": "자바스크립트 기초 복습",
|
|
"summary": ["자바스크립트의 핵심 개념을 복습하세요."],
|
|
"intro": [
|
|
"이 인터랙티브 강좌에서는 반복문, 객체, 배열 등 자바스크립트의 핵심 개념을 연습합니다."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-working-with-types-and-objects": {
|
|
"title": "타입과 객체 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 문자열 객체, <code>toString()</code> 메서드, <code>Number</code> 생성자 등 타입과 객체 관련 내용을 배웁니다."
|
|
]
|
|
},
|
|
"lecture-working-with-arrays-variables-and-naming-practices": {
|
|
"title": "배열, 변수, 명명 관행 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 변수와 함수 명명에 관한 일반적인 관행과 배열 사용법을 배웁니다."
|
|
]
|
|
},
|
|
"lecture-working-with-code-quality-and-execution-concepts": {
|
|
"title": "코드 품질 및 실행 개념 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 린터와 포매터, 메모리 관리, 클로저 등 실행과 코드 품질 관련 개념을 배웁니다."
|
|
]
|
|
},
|
|
"lab-reverse-a-string": {
|
|
"title": "문자열 뒤집기기 만들기",
|
|
"intro": ["이 실습에서는 주어진 문자열을 뒤집는 함수를 만듭니다."]
|
|
},
|
|
"lab-largest-number-finder": {
|
|
"title": "최댓값 찾기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 자바스크립트 기초를 사용해 주어진 배열의 각 서브배열에서 가장 큰 수를 찾는 함수를 만듭니다."
|
|
]
|
|
},
|
|
"lab-first-element-finder": {
|
|
"title": "첫 번째 요소 찾기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 배열을 순회해 “참값 테스트”를 통과하는 첫 번째 요소를 반환하는 함수를 만듭니다."
|
|
]
|
|
},
|
|
"lab-slice-and-splice": {
|
|
"title": "Slice와 Splice 알고리즘 구현하기",
|
|
"intro": ["이 실습에서는 한 배열을 다른 배열과 병합하는 연습을 합니다."]
|
|
},
|
|
"lab-pyramid-generator": {
|
|
"title": "피라미드 생성기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 피라미드 생성기를 만듭니다.",
|
|
"숫자를 입력으로 받아 그 수만큼 레벨을 가진 피라미드를 반복문으로 생성합니다."
|
|
]
|
|
},
|
|
"lab-gradebook-app": {
|
|
"title": "성적부 앱 만들기",
|
|
"intro": [
|
|
"이 실습에서는 성적부(gradebook) 앱을 만드세요.",
|
|
"조건문을 사용해 학생의 점수에 따라 등급을 결정하는 연습을 합니다."
|
|
]
|
|
},
|
|
"lecture-the-var-keyword-and-hoisting": {
|
|
"title": "var 키워드와 호이스팅",
|
|
"intro": [
|
|
"이 강의들에서는 <code>var</code> 키워드와 왜 더 이상 권장되지 않는지, 그리고 자바스크립트의 호이스팅에 대해 배워 미묘한 버그를 피하는 방법을 학습합니다."
|
|
]
|
|
},
|
|
"lab-title-case-converter": {
|
|
"title": "타이틀 케이스 변환기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 문자열을 타이틀 케이스로 변환하는 함수를 만듭니다."
|
|
]
|
|
},
|
|
"lab-falsy-remover": {
|
|
"title": "Falsy 값 제거기 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 배열에서 모든 falsy 값을 제거하는 함수를 만듭니다."
|
|
]
|
|
},
|
|
"lab-inventory-management-program": {
|
|
"title": "재고 관리 프로그램 만들기",
|
|
"intro": [
|
|
"이 실습에서는 자바스크립트를 사용해 재고 관리 프로그램을 만듭니다.",
|
|
"객체 배열을 사용해 재고를 관리하는 연습을 합니다."
|
|
]
|
|
},
|
|
"lecture-understanding-modules-imports-and-exports": {
|
|
"title": "모듈, import, export 이해하기",
|
|
"intro": [
|
|
"이 강의에서는 자바스크립트의 모듈, import, export에 대해 배웁니다."
|
|
]
|
|
},
|
|
"lecture-working-with-the-arguments-object-and-rest-parameters": {
|
|
"title": "arguments 객체와 rest 매개변수 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 <code>arguments</code> 객체와 rest 매개변수 문법을 다루는 방법을 배웁니다."
|
|
]
|
|
},
|
|
"lab-unique-sorted-union": {
|
|
"title": "고유 정렬 합집합 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 두 개 이상의 배열을 받아 원래 제공된 배열 순서대로 고유한 값들만 담은 새 배열을 반환하는 함수를 만듭니다."
|
|
]
|
|
},
|
|
"lab-password-generator": {
|
|
"title": "비밀번호 생성기 앱 만들기",
|
|
"intro": [
|
|
"이 실습에서는 사용자의 입력을 기반으로 비밀번호 생성기 앱을 만듭니다."
|
|
]
|
|
},
|
|
"lab-sum-all-numbers-algorithm": {
|
|
"title": "모든 숫자 합산 알고리즘 설계하기",
|
|
"intro": [
|
|
"이 실습에서는 두 수로 구성된 배열을 입력받아 그 두 수와 그 사이의 모든 수를 더한 합을 반환하는 알고리즘을 설계합니다."
|
|
]
|
|
},
|
|
"lab-dna-pair-generator": {
|
|
"title": "DNA 쌍 생성기 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 단일 DNA 가닥을 대응하는 염기 쌍으로 변환하는 알고리즘을 구현합니다."
|
|
]
|
|
},
|
|
"lab-html-entitiy-converter": {
|
|
"title": "HTML 엔티티 변환기 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 문자열의 특수 문자를 해당 HTML 엔티티로 변환합니다."
|
|
]
|
|
},
|
|
"lab-odd-fibonacci-sum-calculator": {
|
|
"title": "홀수 피보나치 합 계산기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 주어진 수보다 작거나 같고 홀수인 모든 피보나치 수의 합을 반환하는 계산기를 만듭니다."
|
|
]
|
|
},
|
|
"lab-element-skipper": {
|
|
"title": "요소 건너뛰기 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 지정한 단계 값(step)에 따라 배열의 요소를 건너뛰는 함수를 만드세요."
|
|
]
|
|
},
|
|
"review-javascript-fundamentals": {
|
|
"title": "자바스크립트 기초 복습",
|
|
"intro": [
|
|
"자바스크립트 기초에 대해 퀴즈 보기 전에 개념을 먼저 복습하세요.",
|
|
"이 페이지를 열어 클로저, 메모리 관리 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-fundamentals": {
|
|
"title": "자바스크립트 기초 퀴즈",
|
|
"intro": ["이 퀴즈로 자바스크립트 기초에 대한 지식을 확인하세요."]
|
|
}
|
|
}
|
|
},
|
|
"introduction-to-higher-order-functions-and-callbacks-in-javascript": {
|
|
"title": "자바스크립트의 고차함수와 콜백 소개",
|
|
"summary": ["자바스크립트의 고차함수와 콜백 기초를 배우세요."],
|
|
"intro": [
|
|
"이 인터랙티브 강좌에서는 자바스크립트의 고차함수와 콜백 사용법을 배우게 됩니다."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-working-with-higher-order-functions-and-callbacks": {
|
|
"title": "고차함수와 콜백 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 <code>map()</code>, <code>filter()</code>, <code>reduce()</code>, <code>sort()</code>, <code>every()</code>, <code>some()</code> 같은 고차함수와 콜백 사용법을 배우고, 이러한 메서드들을 체이닝해 원하는 결과를 만드는 방법을 익힙니다."
|
|
]
|
|
},
|
|
"workshop-library-manager": {
|
|
"title": "라이브러리 관리자 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 라이브러리 관리자를 만들어 고차 배열 메서드를 학습합니다."
|
|
]
|
|
},
|
|
"lab-book-organizer": {
|
|
"title": "책 정리기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 자바스크립트의 고차함수를 사용해 책 정리기를 만듭니다."
|
|
]
|
|
},
|
|
"lab-sorted-index-finder": {
|
|
"title": "정렬된 인덱스 찾기 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 정렬된 배열에서 특정 숫자를 삽입해야 하는 인덱스를 찾아 배열의 정렬 상태를 유지하는 함수를 만듭니다."
|
|
]
|
|
},
|
|
"lab-symmetric-difference": {
|
|
"title": "대칭 차집합 함수 만들기",
|
|
"intro": [
|
|
"이 실습에서는 고차함수를 사용해 두 배열 간의 대칭 차집합을 찾는 연습을 합니다."
|
|
]
|
|
},
|
|
"lab-value-remover-function": {
|
|
"title": "값 제거 함수 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 배열에서 지정한 값의 모든 인스턴스를 제거하는 함수를 만듭니다."
|
|
]
|
|
},
|
|
"lab-matching-object-filter": {
|
|
"title": "일치 객체 필터 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 객체 배열을 검사해 특정 프로퍼티와 값이 일치하는 모든 객체를 반환하는 함수를 만듭니다."
|
|
]
|
|
},
|
|
"lab-prime-number-sum-calculator": {
|
|
"title": "소수 합 계산기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 주어진 수보다 작거나 같고 소수인 모든 수의 합을 반환하는 소수 합 계산기를 만듭니다."
|
|
]
|
|
},
|
|
"lab-range-based-lcm-calculator": {
|
|
"title": "범위 기반 LCM 계산기 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 두 수로 이루어진 배열을 입력받아 그 두 수와 그 사이의 모든 수의 최소공배수(LCM)를 반환하는 함수를 만듭니다."
|
|
]
|
|
},
|
|
"lab-deep-flattening-tool": {
|
|
"title": "깊은 평탄화 도구 만들기",
|
|
"intro": [
|
|
"이 실습에서는 내장 flat 메서드를 사용하지 않고도 깊게 중첩된 배열을 모든 수준에서 평탄화할 수 있는 함수를 만듭니다."
|
|
]
|
|
},
|
|
"lab-all-true-property-validator": {
|
|
"title": "모든 참 프로퍼티 검증기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 배열의 모든 객체가 특정 프로퍼티에 대해 truthy 값을 갖는지 확인하는 함수를 만듭니다."
|
|
]
|
|
},
|
|
"review-javascript-higher-order-functions": {
|
|
"title": "자바스크립트 고차함수 복습",
|
|
"intro": [
|
|
"자바스크립트 고차함수에 대해 퀴즈 보기 전에 복습하세요.",
|
|
"이 페이지를 열어 <code>map()</code>, <code>filter()</code>, <code>reduce()</code> 메서드 사용법 등을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-higher-order-functions": {
|
|
"title": "자바스크립트 고차함수 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 자바스크립트 고차함수에 대해 배운 내용을 확인하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"learn-dom-manipulation-and-events-with-javascript": {
|
|
"title": "자바스크립트로 DOM 조작과 이벤트 배우기",
|
|
"summary": ["DOM을 조작하고 이벤트를 다루는 방법을 배우세요."],
|
|
"intro": [
|
|
"이 인터랙티브 강좌에서는 DOM 조작과 자바스크립트 이벤트 사용법을 배우게 됩니다."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-working-with-the-dom-click-events-and-web-apis": {
|
|
"title": "DOM, 클릭 이벤트, 웹 API 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 문서 객체 모델(DOM), <code>addEventListener()</code> 메서드와 이벤트, 웹 API 사용법을 배웁니다."
|
|
]
|
|
},
|
|
"workshop-storytelling-app": {
|
|
"title": "스토리텔링 앱 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 장르별로 다른 스토리를 목록으로 보여주는 스토리텔링 앱을 만듭니다."
|
|
]
|
|
},
|
|
"workshop-emoji-reactor": {
|
|
"title": "이모지 리액터 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 <code>querySelector</code>와 <code>querySelectorAll</code>을 연습하기 위해 이모지 리액터를 만듭니다."
|
|
]
|
|
},
|
|
"lab-favorite-icon-toggler": {
|
|
"title": "즐겨찾기 아이콘 토글러 만들기",
|
|
"intro": [
|
|
"이 실습에서는 자바스크립트 클릭 이벤트를 활용해 즐겨찾기 아이콘 토글러를 만듭니다."
|
|
]
|
|
},
|
|
"lecture-understanding-the-event-object-and-event-delegation": {
|
|
"title": "이벤트 객체와 이벤트 위임 이해하기",
|
|
"intro": [
|
|
"이 강의들에서는 이벤트 객체, change 이벤트, 이벤트 버블링, 이벤트 위임에 대해 배웁니다."
|
|
]
|
|
},
|
|
"workshop-music-instrument-filter": {
|
|
"title": "악기 필터 만들기",
|
|
"intro": ["이 워크숍에서는 자바스크립트로 악기 필터를 만듭니다."]
|
|
},
|
|
"lab-real-time-counter": {
|
|
"title": "실시간 카운터 만들기",
|
|
"intro": [
|
|
"이 실습에서는 실시간 문자수 카운터를 만드세요.",
|
|
"사용자가 입력 필드에 입력할 때 <code>input</code> 이벤트를 다루는 방법을 연습합니다."
|
|
]
|
|
},
|
|
"lab-lightbox-viewer": {
|
|
"title": "라이트박스 뷰어 만들기",
|
|
"intro": [
|
|
"이 실습에서는 이미지를 집중 모드로 볼 수 있는 라이트박스 뷰어를 만듭니다.",
|
|
"클릭 이벤트와 클래스 토글링을 연습합니다."
|
|
]
|
|
},
|
|
"workshop-rps-game": {
|
|
"title": "가위바위보 게임 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 가위바위보 게임을 만들어 DOM 조작과 이벤트를 복습합니다."
|
|
]
|
|
},
|
|
"lab-football-team-cards": {
|
|
"title": "축구팀 카드 세트 만들기",
|
|
"intro": [
|
|
"이 실습에서는 DOM 조작, 객체 구조 분해, 이벤트 핸들링, 데이터 필터링을 사용해 축구팀 카드 세트를 만듭니다."
|
|
]
|
|
},
|
|
"review-dom-manipulation-and-click-events-with-javascript": {
|
|
"title": "DOM 조작 및 클릭 이벤트 복습",
|
|
"intro": [
|
|
"DOM에 대해 퀴즈 보기 전에 지금까지 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>DOM</code>, <code>Web APIs</code>, <code>addEventListener()</code> 메서드, change 이벤트, 이벤트 버블링 등을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-dom-manipulation-and-click-event-with-javascript": {
|
|
"title": "DOM 조작 및 클릭 이벤트 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 자바스크립트에서의 DOM 조작과 클릭 이벤트에 대한 지식을 확인하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"introduction-to-javascript-and-accessibility": {
|
|
"title": "자바스크립트와 접근성 소개",
|
|
"summary": ["자바스크립트로 웹 접근성을 향상시키는 방법을 배우세요."],
|
|
"intro": [
|
|
"이 인터랙티브 강좌에서는 자바스크립트를 사용해 웹 접근성을 향상시키는 방법을 배웁니다."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-understanding-aria-expanded-aria-live-and-common-aria-states": {
|
|
"title": "aria-expanded, aria-live, 일반적인 ARIA 상태 이해하기",
|
|
"intro": [
|
|
"이 강의들에서는 <code>aria-expanded</code>, <code>aria-live</code> 등의 ARIA 속성과 일반적인 ARIA 상태에 대해 더 배웁니다."
|
|
]
|
|
},
|
|
"workshop-planets-tablist": {
|
|
"title": "행성 탭 목록 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 태양계 행성에 대한 사실을 보여주는 동적 탭 인터페이스를 만듭니다."
|
|
]
|
|
},
|
|
"workshop-note-taking-app": {
|
|
"title": "메모 앱 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 접근성이 고려된 메모 작성 앱을 만들게 됩니다.",
|
|
"이것은 <code>aria-live</code> 속성 작업을 연습할 기회를 제공합니다."
|
|
]
|
|
},
|
|
"lab-theme-switcher": {
|
|
"title": "테마 전환기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 테마 전환기를 만들고 <code>aria-haspopup</code>, <code>aria-expanded</code>, <code>aria-controls</code> 속성 작업을 연습합니다."
|
|
]
|
|
},
|
|
"review-js-a11y": {
|
|
"title": "자바스크립트와 접근성 복습",
|
|
"intro": [
|
|
"자바스크립트와 접근성에 대해 퀴즈 보기 전에 지금까지 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>aria-expanded</code>, <code>aria-live</code>, <code>aria-controls</code> 속성 등 관련 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-js-a11y": {
|
|
"title": "자바스크립트와 접근성 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 자바스크립트와 접근성 모범 사례에 대한 지식을 확인하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"learn-javascript-debugging": {
|
|
"title": "자바스크립트 디버깅 배우기",
|
|
"summary": ["자바스크립트 코드를 효과적으로 디버깅하는 방법을 배우세요."],
|
|
"intro": [
|
|
"이 인터랙티브 강좌에서는 자바스크립트 코드를 디버깅하는 방법을 배우게 됩니다."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-debugging-techniques": {
|
|
"title": "디버깅 기법",
|
|
"intro": [
|
|
"이 강의들에서는 자바스크립트의 흔한 오류와 이를 수정하기 위한 기법, 즉 디버깅 과정을 배웁니다."
|
|
]
|
|
},
|
|
"lab-random-background-color-changer": {
|
|
"title": "랜덤 배경색 변경기 디버깅하기",
|
|
"intro": [
|
|
"이 실습에서는 랜덤 배경색 변경기의 오류를 디버그하고 정상 동작하도록 수정합니다."
|
|
]
|
|
},
|
|
"review-debugging-javascript": {
|
|
"title": "자바스크립트 디버깅 복습",
|
|
"intro": [
|
|
"일반적인 디버깅 기법에 대해 퀴즈 보기 전에 복습하세요.",
|
|
"이 페이지를 열어 <code>throw</code> 문, <code>try...catch...finally</code> 등 디버깅 관련 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-debugging-javascript": {
|
|
"title": "자바스크립트 디버깅 퀴즈",
|
|
"intro": ["이 퀴즈로 자바스크립트 디버깅에 대한 지식을 확인하세요."]
|
|
}
|
|
}
|
|
},
|
|
"learn-basic-regex-with-javascript": {
|
|
"title": "자바스크립트로 기초 정규식 배우기",
|
|
"summary": ["자바스크립트에서 정규표현식의 기초를 배우세요."],
|
|
"intro": [
|
|
"이 인터랙티브 강좌에서는 정규표현식의 기본과 자바스크립트에서의 사용법을 배웁니다."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-working-with-regular-expressions": {
|
|
"title": "정규표현식 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 자바스크립트의 정규표현식, 정규식 작업을 위한 메서드, 수식자(modifier), 문자 클래스, 룩어헤드(lookahead), 룩비하인드(lookbehind), 백참조(back-reference), 수량자(quantifier) 등을 배우세요."
|
|
]
|
|
},
|
|
"workshop-spam-filter": {
|
|
"title": "스팸 필터 만들기",
|
|
"intro": [
|
|
"정규표현식(regex 또는 regexp로 줄여 씀)은 프로그래머가 텍스트를 일치시키고 검색하고 대체하는 데 도움이 되는 패턴입니다. 정규표현식은 강력하지만 많은 특수 문자를 사용하기 때문에 이해하기 어려울 수 있습니다.",
|
|
"이 워크숍에서는 캡처 그룹, 긍정 룩어헤드, 부정 룩어헤드 등 다양한 기법을 사용해 원하는 텍스트와 일치시키는 법을 배웁니다."
|
|
]
|
|
},
|
|
"lab-palindrome-checker": {
|
|
"title": "회문 검사기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 주어진 단어가 회문(palindrome)인지 확인하는 애플리케이션을 만드세요."
|
|
]
|
|
},
|
|
"lab-regex-sandbox": {
|
|
"title": "정규식 샌드박스 만들기",
|
|
"intro": ["이 실습에서 정규식 샌드박스를 만드세요."]
|
|
},
|
|
"lab-spinal-case-converter": {
|
|
"title": "스파인 케이스 변환기 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 주어진 문자열을 모든 문자가 소문자이고 하이픈으로 구분되는 표기법인 스파인 케이스로 변환하는 함수를 만드세요."
|
|
]
|
|
},
|
|
"lab-pig-latin": {
|
|
"title": "픽 라틴 번역기 구현하기",
|
|
"intro": [
|
|
"이 실습에서 자바스크립트를 사용해 픽 라틴 번역기를 구현하세요.",
|
|
"문자열 조작, 조건 로직, 정규식을 연습하세요."
|
|
]
|
|
},
|
|
"lab-smart-word-replacement": {
|
|
"title": "스마트 단어 교체 함수 만들기",
|
|
"intro": [
|
|
"이 실습에서는 정규식을 사용해 주어진 문자열에서 검색 및 교체 작업을 수행하는 함수를 만드세요."
|
|
]
|
|
},
|
|
"lab-markdown-to-html-converter": {
|
|
"title": "Markdown을 HTML로 변환하는 변환기 만들기",
|
|
"intro": [
|
|
"이 실습에서 자바스크립트를 사용해 Markdown을 HTML로 변환하는 변환기를 만드세요.",
|
|
"정규식과 문자열 조작 등을 연습하세요."
|
|
]
|
|
},
|
|
"review-javascript-regular-expressions": {
|
|
"title": "자바스크립트 정규식 복습",
|
|
"intro": [
|
|
"정규식 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 룩어헤드, 룩비하인드, 일반적인 정규식 수식자 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-regular-expressions": {
|
|
"title": "자바스크립트 정규식 퀴즈",
|
|
"intro": ["이 퀴즈로 자바스크립트 정규식에 대한 지식을 테스트하세요."]
|
|
}
|
|
}
|
|
},
|
|
"introduction-to-dates-in-javascript": {
|
|
"title": "자바스크립트 날짜 소개",
|
|
"summary": ["자바스크립트에서 날짜를 다루는 방법을 배우세요."],
|
|
"intro": [
|
|
"이 대화형 과정에서 자바스크립트로 날짜를 다루는 방법을 배우세요."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-working-with-dates": {
|
|
"title": "날짜 다루기",
|
|
"intro": [
|
|
"이 강의들에서 자바스크립트의 Date 객체에 대해 배우세요. 날짜를 다루는 메서드와 날짜 포맷 방법을 배우세요."
|
|
]
|
|
},
|
|
"lab-date-conversion": {
|
|
"title": "날짜 변환 프로그램 만들기",
|
|
"intro": [
|
|
"이 실습에서 한 형식의 날짜를 다른 형식으로 변환하는 프로그램을 만드세요."
|
|
]
|
|
},
|
|
"review-javascript-dates": {
|
|
"title": "자바스크립트 날짜 복습",
|
|
"intro": [
|
|
"날짜 관련 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>Date()</code> 객체와 자주 사용하는 메서드를 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-dates": {
|
|
"title": "자바스크립트 날짜 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 자바스크립트 날짜에 대해 학습한 내용을 테스트하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"learn-audio-and-video-events-with-javascript": {
|
|
"title": "자바스크립트로 오디오·비디오 이벤트 배우기",
|
|
"summary": [
|
|
"자바스크립트에서 오디오와 비디오 이벤트를 다루는 방법을 배우세요."
|
|
],
|
|
"intro": [
|
|
"이 대화형 과정에서 자바스크립트로 오디오와 비디오 이벤트를 다루는 방법을 배우세요."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-working-with-audio-and-video": {
|
|
"title": "오디오와 비디오 다루기",
|
|
"intro": [
|
|
"이 강의들에서 자바스크립트로 오디오 및 비디오 파일을 다루는 방법을 배우세요. <code>Audio</code>와 <code>Video</code> 생성자, 해당 메서드와 프로퍼티, 오디오·비디오 형식과 코덱, <code>HTMLMediaElement</code> API 등을 배우세요."
|
|
]
|
|
},
|
|
"workshop-music-player": {
|
|
"title": "뮤직 플레이어 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 HTML, CSS, 자바스크립트를 사용해 기본 MP3 플레이어를 코딩하세요.",
|
|
"이 프로젝트에서는 오디오 재생 처리, 재생목록 관리, 재생·일시정지·다음·이전 기능 구현 등 기본 개념을 다루고 현재 재생 중인 곡에 따라 UI를 동적으로 업데이트하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"lab-drum-machine": {
|
|
"title": "드럼 머신 만들기",
|
|
"intro": [
|
|
"이 실습에서는 <code>audio</code> 요소를 사용해 드럼 머신을 만드세요."
|
|
]
|
|
},
|
|
"review-javascript-audio-and-video": {
|
|
"title": "자바스크립트 오디오·비디오 복습",
|
|
"intro": [
|
|
"자바스크립트로 오디오·비디오를 다루는 내용에 대한 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>Audio</code> 생성자, <code>HTMLMediaElement</code> API 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-audio-and-video": {
|
|
"title": "자바스크립트 오디오·비디오 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 자바스크립트 오디오·비디오에 대해 학습한 내용을 테스트하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"introduction-to-maps-and-sets-in-javascript": {
|
|
"title": "자바스크립트의 Map과 Set 소개",
|
|
"summary": ["자바스크립트의 Map과 Set 객체에 대해 배우세요."],
|
|
"intro": [
|
|
"이 대화형 과정에서 자바스크립트의 Map과 Set 객체에 대해 배우세요."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-working-with-maps-and-sets": {
|
|
"title": "Map과 Set 다루기",
|
|
"intro": [
|
|
"이 강의들에서 자바스크립트의 <code>Map</code>과 <code>Set</code>에 대해 배우세요. 또한 <code>WeakSet</code>과 <code>WeakMap</code>과의 차이점도 배우세요."
|
|
]
|
|
},
|
|
"workshop-plant-nursery-catalog": {
|
|
"title": "식물원 카탈로그 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 Map과 Set을 사용해 식물원 카탈로그를 만드세요."
|
|
]
|
|
},
|
|
"lab-voting-system": {
|
|
"title": "투표 시스템 만들기",
|
|
"intro": [
|
|
"이 실습에서는 Map과 Set을 사용해 투표 시스템을 만드세요.",
|
|
"<code>Map</code> 객체로 키-값 쌍을 저장하고 <code>Set</code> 객체로 유일한 값을 저장하는 방법을 연습하세요."
|
|
]
|
|
},
|
|
"review-javascript-maps-and-sets": {
|
|
"title": "자바스크립트 Map과 Set 복습",
|
|
"intro": [
|
|
"자바스크립트 Map과 Set에 대한 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>Map</code>과 <code>Set</code> 객체 및 WeakSet·WeakMap 같은 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-maps-and-sets": {
|
|
"title": "자바스크립트 Map과 Set 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 자바스크립트 Map과 Set에 대해 학습한 내용을 테스트하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"learn-localstorage-and-crud-operations-with-javascript": {
|
|
"title": "로컬스토리지와 CRUD 작업을 자바스크립트로 배우기",
|
|
"summary": [
|
|
"로컬스토리지 사용과 자바스크립트에서 CRUD 작업을 수행하는 방법을 배우세요."
|
|
],
|
|
"intro": [
|
|
"이 대화형 과정에서 로컬스토리지 사용과 자바스크립트에서 CRUD 작업을 수행하는 방법을 배우세요."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-working-with-client-side-storage-and-crud-operations": {
|
|
"title": "클라이언트측 저장소와 CRUD 작업 다루기",
|
|
"intro": [
|
|
"이 강의들에서 클라이언트측 저장소와 자바스크립트에서의 CRUD 작업을 배우세요. <code>localStorage</code>, <code>sessionStorage</code>의 메서드와 프로퍼티, 쿠키, Cache API, IndexedDB 등도 배우세요."
|
|
]
|
|
},
|
|
"workshop-todo-app": {
|
|
"title": "로컬 스토리지를 사용한 투두 앱 만들기",
|
|
"intro": [
|
|
"로컬 스토리지는 웹 브라우저 기능으로 웹 애플리케이션이 사용자의 브라우저에 키-값 쌍을 지속적으로 저장할 수 있게 해줍니다. 이를 통해 웹 앱은 한 세션 동안 데이터를 저장하고 이후 페이지 세션에서 이를 불러올 수 있습니다.",
|
|
"이 워크숍에서 폼 입력 처리, 로컬 스토리지 관리, 작업에 대한 CRUD(생성·읽기·업데이트·삭제) 작업 수행, 이벤트 리스너 구현, UI 요소 토글 방법을 배우세요."
|
|
]
|
|
},
|
|
"lab-bookmark-manager-app": {
|
|
"title": "북마크 관리 앱 만들기",
|
|
"intro": [
|
|
"이 실습에서 북마크 관리 앱을 만드세요.",
|
|
"로컬 스토리지를 활용해 북마크를 저장하고 북마크 추가·제거·표시하는 방법을 연습하세요."
|
|
]
|
|
},
|
|
"review-local-storage-and-crud": {
|
|
"title": "로컬 스토리지와 CRUD 복습",
|
|
"intro": [
|
|
"<code>localStorage</code> 관련 퀴즈를 보기 전에 먼저 개념을 복습하세요.",
|
|
"이 페이지를 열어 <code>localStorage</code> 프로퍼티, <code>sessionStorage</code> 프로퍼티 등을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-local-storage-and-crud": {
|
|
"title": "로컬 스토리지와 CRUD 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 로컬 스토리지와 CRUD에 대해 학습한 내용을 테스트하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"introduction-to-javascript-classes": {
|
|
"title": "자바스크립트 클래스 소개",
|
|
"summary": ["자바스크립트의 클래스와 사용법을 배우세요."],
|
|
"intro": ["이 대화형 과정에서 자바스크립트의 클래스와 사용법을 배우세요."],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-understanding-how-to-work-with-classes-in-javascript": {
|
|
"title": "자바스크립트에서 클래스 다루기 이해하기",
|
|
"intro": [
|
|
"이 강의들에서 자바스크립트의 클래스에 대해 배우세요. 상속, <code>this</code> 키워드, 정적 프로퍼티와 메서드 등도 배우세요."
|
|
]
|
|
},
|
|
"workshop-shopping-cart": {
|
|
"title": "장바구니 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 자바스크립트 클래스를 사용해 쇼핑카트를 만드세요.",
|
|
"this 키워드 사용, 클래스 인스턴스 생성, 데이터 조작용 메서드 구현 등을 연습하세요."
|
|
]
|
|
},
|
|
"lab-project-idea-board": {
|
|
"title": "프로젝트 아이디어 보드 만들기",
|
|
"intro": [
|
|
"이 실습에서 자바스크립트 OOP로 프로젝트 아이디어 보드를 만드세요.",
|
|
"클래스 생성, 클래스에 메서드 추가, 클래스 인스턴스 생성 방법을 연습하세요."
|
|
]
|
|
},
|
|
"lab-bank-account-manager": {
|
|
"title": "은행 계좌 관리 프로그램 만들기",
|
|
"intro": ["이 실습에서 은행 계좌의 간단한 거래관리 시스템을 만드세요."]
|
|
},
|
|
"review-javascript-classes": {
|
|
"title": "자바스크립트 클래스 복습",
|
|
"intro": [
|
|
"클래스 관련 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>this</code> 키워드, 클래스 상속 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-classes": {
|
|
"title": "자바스크립트 클래스 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 자바스크립트 클래스에 대해 학습한 내용을 테스트하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"learn-recursion-with-javascript": {
|
|
"title": "자바스크립트로 재귀 학습하기",
|
|
"summary": ["재귀 개념과 자바스크립트에서 구현하는 방법을 이해하세요."],
|
|
"intro": [
|
|
"이 대화형 과정에서 자바스크립트의 재귀와 문제 해결에 재귀를 사용하는 방법을 배우세요."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-understanding-recursion-and-the-call-stack": {
|
|
"title": "재귀와 호출 스택 이해하기",
|
|
"intro": ["이 강의에서 재귀와 호출 스택에 대해 배우세요."]
|
|
},
|
|
"workshop-countup": {
|
|
"title": "카운트업 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 1부터 주어진 수까지 카운트업하는 숫자 배열을 반환하는 countup 함수를 만드세요."
|
|
]
|
|
},
|
|
"lab-countdown": {
|
|
"title": "카운트다운 만들기",
|
|
"intro": [
|
|
"이 실습에서는 주어진 수에서 1까지 카운트다운하는 숫자 배열을 반환하는 countdown 함수를 만드세요."
|
|
]
|
|
},
|
|
"lab-range-of-numbers": {
|
|
"title": "숫자 범위 생성기 만들기",
|
|
"intro": [
|
|
"이 실습에서 재귀를 사용해 지정된 범위 내 숫자 배열을 생성하세요.",
|
|
"재귀 함수 호출, 기본 사례(base case), 재귀로 배열을 구성하는 방법을 연습하세요."
|
|
]
|
|
},
|
|
"workshop-decimal-to-binary-converter": {
|
|
"title": "십진수→이진수 변환기 만들기",
|
|
"intro": [
|
|
"재귀는 함수가 자기 자신을 호출하는 프로그래밍 개념입니다. 이를 통해 복잡한 문제를 더 단순한 하위 문제로 나눌 수 있고, 하위 문제가 충분히 단순해질 때까지 반복하세요.",
|
|
"이 워크숍에서 자바스크립트를 사용해 십진수를 이진수로 변환하는 변환기를 만드세요. 재귀의 기본 개념을 연습하고 호출 스택을 탐구하며 애니메이션으로 재귀 과정을 시각화하세요."
|
|
]
|
|
},
|
|
"lab-permutation-generator": {
|
|
"title": "순열 생성기 만들기",
|
|
"intro": [
|
|
"이 실습에서 주어진 문자열의 모든 가능한 순열을 생성하는 순열 생성기를 만드세요."
|
|
]
|
|
},
|
|
"review-recursion": {
|
|
"title": "재귀 복습",
|
|
"intro": [
|
|
"재귀에 대한 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 재귀가 무엇이고 어디에 사용하는지 복습하세요."
|
|
]
|
|
},
|
|
"quiz-recursion": {
|
|
"title": "재귀 퀴즈",
|
|
"intro": ["이 퀴즈로 재귀에 대한 지식을 테스트하세요."]
|
|
}
|
|
}
|
|
},
|
|
"introduction-to-functional-programming-with-javascript": {
|
|
"title": "자바스크립트로 함수형 프로그래밍 소개",
|
|
"summary": ["자바스크립트에서 함수형 프로그래밍의 기초를 배우세요."],
|
|
"intro": [
|
|
"이 대화형 과정에서 자바스크립트의 함수형 프로그래밍 개념과 기법을 배우세요."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-understanding-functional-programming": {
|
|
"title": "함수형 프로그래밍 이해하기",
|
|
"intro": [
|
|
"이 강의들에서 함수형 프로그래밍과 커링(currying)이라는 기법을 사용해 함수를 중첩하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-recipe-ingredient-converter": {
|
|
"title": "레시피 재료 변환기 만들기",
|
|
"intro": [
|
|
"앞선 강의들에서 함수형 프로그래밍과 커링의 핵심 개념을 배웠습니다.",
|
|
"이제 커링과 함수형 프로그래밍에서 배운 내용을 적용해 레시피 재료 변환기 애플리케이션을 만드세요."
|
|
]
|
|
},
|
|
"lab-optional-arguments-sum-function": {
|
|
"title": "선택적 인자 합계 함수 만들기",
|
|
"intro": [
|
|
"이 실습에서 최대 두 개의 인자를 받아 합을 구하는 함수를 만드세요. 만약 인자가 하나만 들어오면 두 번째 숫자를 받아 합을 계산하는 함수를 반환하세요."
|
|
]
|
|
},
|
|
"lab-sorting-visualizer": {
|
|
"title": "정렬 시각화기 만들기",
|
|
"intro": [
|
|
"이 실습에서 자바스크립트를 사용해 버블 정렬 알고리즘이 정수 배열을 재정렬하는 과정을 시각화하세요."
|
|
]
|
|
},
|
|
"review-javascript-functional-programming": {
|
|
"title": "자바스크립트 함수형 프로그래밍 복습",
|
|
"intro": [
|
|
"함수형 프로그래밍에 대한 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 함수형 프로그래밍, 커링 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-functional-programming": {
|
|
"title": "자바스크립트 함수형 프로그래밍 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 자바스크립트 함수형 프로그래밍에 대해 학습한 내용을 테스트하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"introduction-to-asynchronous-javascript": {
|
|
"title": "비동기 자바스크립트 소개",
|
|
"summary": ["자바스크립트의 비동기 프로그래밍 기초를 배우세요."],
|
|
"intro": [
|
|
"이 대화형 과정에서 자바스크립트의 비동기 프로그래밍 개념과 기법을 배우세요."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"lecture-understanding-asynchronous-programming": {
|
|
"title": "비동기 프로그래밍 이해하기",
|
|
"intro": [
|
|
"이 강의들에서 자바스크립트의 비동기 프로그래밍을 배우세요. 동기와 비동기의 차이, <code>async</code> 키워드 작동 방식, <code>Fetch</code> API, 프라미스, <code>async/await</code>, <code>Geolocation</code> API 등을 배우세요."
|
|
]
|
|
},
|
|
"workshop-fcc-authors-page": {
|
|
"title": "fCC 저자 페이지 만들기",
|
|
"intro": [
|
|
"웹 개발의 일반적인 측면 중 하나는 외부 API에서 데이터를 가져와 비동기 자바스크립트로 처리하는 방법을 배우는 것입니다.",
|
|
"이 워크숍에서 fetch 메서드 사용, 가져온 데이터를 DOM에 동적으로 표시, 데이터를 페이지로 나눠 배치 단위로 로드하는 방법을 연습하세요."
|
|
]
|
|
},
|
|
"lab-fcc-forum-leaderboard": {
|
|
"title": "fCC 포럼 리더보드 만들기",
|
|
"intro": [
|
|
"이 실습에서 비동기 자바스크립트를 연습하며 자체 freeCodeCamp 포럼 리더보드를 코딩하세요."
|
|
]
|
|
},
|
|
"lab-weather-app": {
|
|
"title": "날씨 앱 만들기",
|
|
"intro": [
|
|
"이 실습에서 API를 사용해 날씨 앱을 만드세요.",
|
|
"API에서 데이터를 가져오는 방법과 앱에 저장·표시하는 방법을 연습하세요."
|
|
]
|
|
},
|
|
"review-asynchronous-javascript": {
|
|
"title": "비동기 자바스크립트 복습",
|
|
"intro": [
|
|
"다가오는 퀴즈에 대비해 비동기 자바스크립트 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-asynchronous-javascript": {
|
|
"title": "비동기 자바스크립트 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 비동기 자바스크립트에 대해 학습한 내용을 테스트하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"information-security": {
|
|
"title": "정보 보안",
|
|
"intro": [
|
|
"우리가 온라인으로 하는 모든 일에는 이메일 주소, 비밀번호, 전화번호 등 방대한 양의 민감한 정보가 위험에 노출되어 있습니다.",
|
|
"정보 보안 인증을 통해 HelmetJS로 안전한 웹 앱을 구축하여 온라인에서 사람들의 정보를 보호하는 기본 사항을 배울 수 있습니다.",
|
|
"당신은 또한 TCP 클라이언트와 Nmap 및 포트 스캐너를 파이썬에 구축할 것입니다. 이것은 좋은 정보 보안의 중요한 구성 요소인 모의 해킹의 기초를 배우는 데 도움이 될 것입니다."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"information-security-with-helmetjs": {
|
|
"title": "HelmetJS를 통한 정보 보안",
|
|
"intro": [
|
|
"이 프로그래밍 과정은 Express 기반 애플리케이션을 위한 미들웨어의 종류인 HelmetJS에 중점을 둡니다. 이는 자동으로 HTTP 헤더를 설정합니다. 이렇게 하여 서버와 클라이언트 간에 민감한 정보가 의도치 않게 전달되는 것을 방지할 수 있습니다.",
|
|
"아래의 강좌를 완료하면 악의적인 행동으로부터 웹사이트를 보호하는 방법을 이해하는 데 도움이 될 것입니다."
|
|
]
|
|
},
|
|
"python-for-penetration-testing": {
|
|
"title": "파이썬을 이용한 침투 테스트",
|
|
"intro": [
|
|
"이 비디오 코스에서는 파이썬을 사용한 침투 테스트를 가르칩니다. 침투 테스트는 보통 펜 테스트라고도 하며, 시스템에 대한 모의 공격을 통해 취약점을 확인하는 것입니다.",
|
|
"이 과정에서는 소켓에 대해 배우고, TCP 서버와 클라이언트를 생성하고, Nmap 스캐너, 그리고 펜 테스터들이 매일 사용하는 다른 도구와 기술을 다룰 것입니다."
|
|
]
|
|
},
|
|
"information-security-projects": {
|
|
"title": "정보 보안 프로젝트",
|
|
"intro": [
|
|
"이제 새로운 정보 보안 기술을 적용할 시간입니다. 이러한 프로젝트는 배운 정보 보안 기술, 원칙 및 개념을 적용할 기회를 제공합니다.",
|
|
"작업이 끝나면 친구, 가족 및 고용주에게 자랑할 수 있는 많은 정보 보안 프로젝트와 인증서를 얻게 될 것입니다."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"machine-learning-with-python": {
|
|
"title": "파이선을 통한 머신 러닝",
|
|
"intro": [
|
|
"머신 러닝은 프로젝트나 직장에서 활용할 수 있는 많은 실용적인 응용 분야를 가지고 있습니다.",
|
|
"파이선을 통한 머신 러닝 자격증에서 TensorFlow 프레임워크를 사용하여 여러 신경망을 구축하고 자연어 처리 및 강화 학습과 같은 보다 고급 기술을 탐구할 것입니다.",
|
|
"또한 신경망에 대해 깊이 있게 배우며, 심층 신경망, 순환 신경망 및 합성곱 신경망이 어떻게 작동하는지 배울 것입니다."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"tensorflow": {
|
|
"title": "TensorFlow",
|
|
"intro": [
|
|
"TensorFlow는 머신 러닝과 신경망 작업을 쉽게 해주는 오픈 소스 프레임워크입니다.",
|
|
"다음 비디오 강좌는 'Tech With Tim'으로 알려진 Tim Ruscica에 의해 만들어졌습니다. TensorFlow와 그 강력한 기능을 이해하는 데 도움이 될 것입니다."
|
|
]
|
|
},
|
|
"how-neural-networks-work": {
|
|
"title": "신경망의 작동 방식",
|
|
"intro": [
|
|
"신경망은 오늘날 우리가 인공지능이라고 부르는 것의 핵심입니다. 하지만 역사적으로 이해하기 어려운 점도 많았습니다. 특히 머신 러닝 분야의 초보자들에게 그렇습니다.",
|
|
"신경망에 완전히 익숙하지 않더라도, Brandon Rohrer가 진행하는 이 비디오 강좌를 통해 개념과 그 뒤에 있는 수학을 쉽게 이해할 수 있습니다."
|
|
]
|
|
},
|
|
"machine-learning-with-python-projects": {
|
|
"title": "파이선을 통한 머신 러닝 프로젝트",
|
|
"intro": [
|
|
"머신 러닝은 많은 실용적인 응용 분야를 가지고 있습니다. 이러한 무료 도전 코딩 프로젝트를 완료하면 머신 러닝에 대한 기본 지식이 충분하다는 것을 입증할 수 있으며, 파이슨을 통한 머신 러닝 자격증을 받을 수 있습니다."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"college-algebra-with-python": {
|
|
"title": "고등교육 대수학 파이썬",
|
|
"intro": [
|
|
"이 과정은 한 학기 대학교 과정처럼 설계되었습니다. 상호작용성을 갖춘 Google Colaboratory 노트북이 포함된 교육 비디오, 과제, 도전 프로젝트로 구성되어 있습니다.",
|
|
"이 코스를 순서대로 진행하면서 대수학에 대한 전체적인 이해를 하게 되고, 대수학 문제를 해결하기 위한 파이썬 코드를 작성하는 방법을 배우게 될 것입니다.",
|
|
"이 과정 전반에 걸쳐 자신만의 대수학 Colab 노트북을 작성하여 맞춤 계산기로 사용할 수 있게 될 것입니다. 이 과정(그리고 여기서 작성한 코드)은 수학 및 데이터 과학에 대한 깊은 이해의 기초가 될 것입니다."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"learn-ratios-and-proportions": {
|
|
"title": "비율 및 비례 배우기",
|
|
"intro": [
|
|
"여기서 비율 및 비례를 설정하는 방법을 배우면서 여정을 시작하세요. 그런 다음 파이썬을 사용하여 비율 및 비례를 배우기 위해 비디오와 함께 노트북을 사용하세요."
|
|
]
|
|
},
|
|
"learn-how-to-solve-for-x": {
|
|
"title": "X를 해결하는 방법 배우기",
|
|
"intro": [
|
|
"이 단원에서는 대수학과 파이썬 코드를 사용하여 종종 <b>('x')</b>로 불리는 미지수를 해결하는 방법에 중점을 둘 것입니다."
|
|
]
|
|
},
|
|
"learn-fractions-and-decimals": {
|
|
"title": "분수와 소수 배우기",
|
|
"intro": [
|
|
"이 단원에서는 소수를 분수 및 백분율로 변환하는 방법에 중점을 둘 것입니다."
|
|
]
|
|
},
|
|
"learn-functions-and-graphing": {
|
|
"title": "함수 및 그래프 배우기",
|
|
"intro": ["이 단원에서는 수학 함수를 배우게 됩니다."]
|
|
},
|
|
"learn-linear-functions": {
|
|
"title": "선형 함수 배우기",
|
|
"intro": [
|
|
"이 단원에서는 두 점에서 선형 방정식을 개발하는 방법을 보여줄 것입니다."
|
|
]
|
|
},
|
|
"learn-common-factors-and-square-roots": {
|
|
"title": "공통 인수 및 제곱근 배우기",
|
|
"intro": [
|
|
"이 단원에서는 공통 인수를 찾고 제거하는 방법을 배우게 됩니다. 이는 분수를 단순화하고 제곱근을 인수분해하는 데 유용할 것입니다."
|
|
]
|
|
},
|
|
"build-a-multi-function-calculator-project": {
|
|
"title": "다중 함수 계산기",
|
|
"intro": [
|
|
"이것은 인증을 받기 위해 필요한 프로젝트 중 하나입니다.",
|
|
"이 프로젝트를 위해, 다중 함수 계산기를 구축하게 됩니다."
|
|
]
|
|
},
|
|
"learn-how-to-graph-systems-of-equations": {
|
|
"title": "방정식 시스템의 그래프 작성 방법 배우기",
|
|
"intro": [
|
|
"이 단원에서는 동일한 좌표 평면에 두 개의 방정식을 그래프로 표현하여 선이 교차하는 지점을 볼 수 있도록 하는 데 중점을 둘 것입니다."
|
|
]
|
|
},
|
|
"learn-how-to-solve-systems-of-equations": {
|
|
"title": "방정식 시스템 해결 방법 배우기",
|
|
"intro": [
|
|
"이 단원에서는 두 개의 변수로 구성된 <b>2개의</b> 방정식 시스템을 그래프 없이 해결하는 방법을 배우게 됩니다. 방정식을 인수분해하고 파이썬에서 특정 변수를 해결하는 방법을 알게 될 것입니다. 이 단원을 마칠 때쯤이면 하나의 코드 블록으로 시스템을 해결하고 그래프로 표현할 수 있을 것입니다."
|
|
]
|
|
},
|
|
"learn-applications-of-linear-systems": {
|
|
"title": "선형 시스템 응용 배우기",
|
|
"intro": [
|
|
"이 단원에서는 지금까지 배운 대수학을 사용하여 실제 문제를 해결하는 방법을 보게 될 것입니다."
|
|
]
|
|
},
|
|
"learn-quadratic-equations": {
|
|
"title": "2차 방정식 배우기",
|
|
"intro": [
|
|
"이 단원에서는 선형 방정식을 넘어 지수를 다루고 포물선 그래프를 그릴 것입니다. 포물선에서 핵심 포인트를 찾는 방법과 2차 방정식을 해결하는 방법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"build-a-graphing-calculator-project": {
|
|
"title": "그래프 계산기",
|
|
"intro": [
|
|
"이것은 인증을 받기 위해 필요한 프로젝트 중 하나입니다.",
|
|
"이 프로젝트를 위해, 그래프 계산기를 구축하게 됩니다."
|
|
]
|
|
},
|
|
"learn-parent-graphs-and-polynomials": {
|
|
"title": "기본 그래프와 다항식 배우기",
|
|
"intro": [
|
|
"이 단원에서는 다양한 종류의 '기본' 그래프와 복잡한 그래프를 구성하는 기본 패턴을 보여줄 것입니다. 다항식은 '다수의 것들'이 있는 수학적 표현으로, 기본 패턴으로 구축된 복잡한 방정식 입니다. 이러한 그래프의 모양, 이를 수정하는 방법, 그리고 이를 모두 파이썬 코드로 해결하는 방법을 알 수 있습니다."
|
|
]
|
|
},
|
|
"build-three-math-games-project": {
|
|
"title": "세 개의 수학 게임",
|
|
"intro": [
|
|
"이것은 인증을 받기 위해 필요한 프로젝트 중 하나입니다.",
|
|
"이 프로젝트를 위해, 세 개의 수학 게임을 구축하게 됩니다."
|
|
]
|
|
},
|
|
"learn-business-applications-of-college-algebra": {
|
|
"title": "고등교육 대수학의 비즈니스 응용 배우기",
|
|
"intro": [
|
|
"이 단원에서는 해결 및 그래프 그리기 기술을 사용하여 비용, 수익 및 이익을 찾는 방법을 배웁니다. 두 점에서 수요 함수를 개발하는 코드를 작성할 것입니다. 가격이 이익 그래프에 어떻게 영향을 미치는지, 이러한 방정식이 서로 어떻게 관련되어 있는지 알게 됩니다."
|
|
]
|
|
},
|
|
"learn-simple-and-compound-interest": {
|
|
"title": "단리 및 복리 배우기",
|
|
"intro": [
|
|
"이 단원에서는 이자, 대출 상환금, 투자 예상 가치를 계산하는 방법을 보여줍니다. 수학적 공식을 보고 코드를 만들 것입니다. 이러한 공식은 복잡하게 되기 때문에, 몇 가지 값을 수정하는 것만으로도 코드의 유용함을 깨닫게 될 것입니다."
|
|
]
|
|
},
|
|
"learn-exponents-and-logarithms": {
|
|
"title": "지수 및 로그 배우기",
|
|
"intro": [
|
|
"이 단원에서는 지수와 로그가 역함수라는 것과, 이러한 함수를 다양한 응용에 사용하는 방법을 보여줍니다."
|
|
]
|
|
},
|
|
"build-a-financial-calculator-project": {
|
|
"title": "금융 계산기",
|
|
"intro": [
|
|
"이것은 인증을 받기 위해 필요한 프로젝트 중 하나입니다.",
|
|
"이 프로젝트를 위해, 금융 계산기를 구축하게 됩니다."
|
|
]
|
|
},
|
|
"college-algebra-with-python-conclusion": {
|
|
"title": "고등교육 대수학 파이썬: 결론",
|
|
"intro": [
|
|
"이 코스의 마지막 단원이 될 것입니다. 수학 및 파이썬 지식을 외부 데이터와 연결하는 방법을 알아봅시다."
|
|
]
|
|
},
|
|
"build-a-data-graph-explorer-project": {
|
|
"title": "데이터 그래프 검색기",
|
|
"intro": [
|
|
"이것은 인증을 받기 위해 필요한 프로젝트 중 하나입니다.",
|
|
"이 프로젝트를 위해, 데이터 그래프 검색기를 구축하게 됩니다."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"python-for-everybody": {
|
|
"title": "레거시 모두를 위한 파이썬",
|
|
"intro": [
|
|
"파이썬은 오늘날 가장 인기 있고 유연한 프로그래밍 언어 중 하나입니다. 기본적인 스크립팅에서부터 머신 러닝에 이르기까지 모든 것에 사용할 수 있습니다."
|
|
],
|
|
"note": "",
|
|
"blocks": {
|
|
"python-for-everybody": {
|
|
"title": "모두를 위한 파이썬",
|
|
"intro": [
|
|
"모두를 위한 파이썬은 파이썬 3 사용의 기초를 가르치는 무료 비디오 강좌 시리즈입니다.",
|
|
"그 과정들은 찰스 세브란스 박사 (척 박사로도 알려져 있음) 에 의해 만들어졌습니다. 그는 프로그래밍, 데이터베이스 디자인, 그리고 웹 개발을 포함한 다양한 기술 지향적인 과정들을 가르치는 미시간 대학교 정보 대학의 임상 교수입니다."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"coding-interview-prep": {
|
|
"title": "코딩 인터뷰 준비",
|
|
"intro": [
|
|
"다음 직업 인터뷰를 준비하기 위한 무료 코딩 연습을 찾고 있다면 저희가 도와드리겠습니다.",
|
|
"이 섹션은 알고리즘, 데이터 구조 및 수학에 대한 여러분의 지식을 테스트하는 수십 개의 코딩 챌린지를 포함하고 있습니다. 또한 자신의 기술을 강화하거나 포트폴리오에 추가할 수 있는 많은 프로젝트가 포함되어 있습니다.",
|
|
"이 작업은 <a href=\"https://www.wikipedia.org/\" target=\"_blank\">Wikipedia</a>에서 가져온 자료를 포함하며 <a href=\"https://creativecommons.org/licenses/by-sa/4.0/\" target=\"_blank\">크리에이티브 커먼즈 저작자 표시-동일 조건 변경 허락 4.0</a> 라이선스로 사용이 허가받았습니다. 원본 콘텐츠는 수정 및 조정되었을 수 있습니다. 변경되지 않은 버전과 추가 세부 사항은 <a href=\"https://www.wikipedia.org/\" target=\"_blank\">Wikipedia</a>의 원본 페이지를 참조하세요."
|
|
],
|
|
"blocks": {
|
|
"algorithms": {
|
|
"title": "알고리즘",
|
|
"intro": [
|
|
"이 무료 프로그래밍 연습은 현실에서 접할 수 있는 몇 가지 일반적인 알고리즘을 배우게 합니다. 이는 논리 및 프로그래밍 기술을 향상시킬 좋은 기회입니다.",
|
|
"이 알고리즘은 종종 인터뷰에서 후보자의 기술을 테스트하기 위해 사용됩니다. 이 서로 다른 알고리즘들이 작동하는 방법에 대해 명확하고 간결한 설명을 제공하겠습니다. 이를 통해 각 알고리즘에 대한 솔루션을 구현할 수 있습니다.",
|
|
"참고: 이 도전 과제는 JavaScript 전용 솔루션을 지원합니다."
|
|
]
|
|
},
|
|
"data-structures": {
|
|
"title": "기본 데이터 구조",
|
|
"intro": [
|
|
"이 무료 프로그래밍 코스는 아직 익숙하지 않을 수 있는 큰 데이터 구조 및 복잡한 데이터 구조를 다루는 데 도움이 됩니다.",
|
|
"아래 과정들을 통해 각 데이터 구조의 유형에 대해 배우고, 이를 강화하기 위한 알고리즘을 구현할 것입니다.",
|
|
"참고: 이 도전 과제는 JavaScript 전용 솔루션을 지원합니다."
|
|
]
|
|
},
|
|
"take-home-projects": {
|
|
"title": "집에서 하는 프로젝트",
|
|
"intro": [
|
|
"프로그래밍 인터뷰는 항상 스트레스가 많습니다. 지원자에게는 인터뷰 외부에서 완료해야 하는 프로젝트가 주어지기도 합니다. 이러한 종류의 인터뷰는 많은 작업을 요구하지만, 고용주가 실제 작업에서 어떻게 수행할 수 있는지를 볼 수 있는 훌륭한 방법입니다.",
|
|
"추가 연습을 위해 아래의 보너스 코딩 프로젝트를 만들어 보세요. 시간을 가지고 잘 구축하여 잠재적인 고용주에게 보여주기 위해 이력서나 포트폴리오에 추가하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"the-odin-project": {
|
|
"title": "오딘 프로젝트 - 프리코드캠프 리믹스",
|
|
"intro": [
|
|
"오딘 프로젝트는 2013년 한 개발자인 에릭 트라우트만에 의해 만들어졌습니다. 시간이 지남에 따라 오픈 소스 커뮤니티가 프로젝트를 유지하고 확장하기 위해 생겨났습니다.",
|
|
"freeCodeCamp는 오픈 소스 커리큘럼을 확장하여 코드 이해도를 평가하고 주요 개념을 이해했는지 확인하기 위해 브라우저에서 상호작용할 수 있도록 만들었습니다.",
|
|
"오딘 프로젝트를 로컬 컴퓨터에서 실행하도록 구성하는 원래 경험을 원한다면 <a href='https://www.theodinproject.com/' target='_blank' rel='noopener noreferrer nofollow'>The Odin Project 웹사이트</a>에서 원래의 오딘 프로젝트를 확인해 볼 수 있습니다. 전 세계 개발자를 위한 가치 있는 교육 자료를 계속 유지해 주셔서 오딘 프로젝트 커뮤니티에 큰 감사를 드립니다.",
|
|
"이 과정은 비공식적이며 The Odin Project의 승인을 받은 과정이 아닙니다. The Odin Project 커리큘럼 내용에 변경이 있었고, 본 강좌의 모든 교육자료는 <a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' target='_blank' rel='noopener noreferrer nofollow'>CC-BY-SA-NC 4.0</a> 라이선스하에 있습니다.",
|
|
"<a href='https://creativecommons.org/licenses/by-nc-sa/4.0/deed' target='_blank' rel='noopener noreferrer nofollow'>© The Odin Project</a>",
|
|
"이 과정에는 <a href='https://javascript.info/' target='_blank' rel='noopener noreferrer nofollow'>JavaScript.info</a>의 콘텐츠가 포함되어 있으며, 해당 자료는 <a href='https://creativecommons.org/licenses/by-nc-sa/4.0/' target='_blank' rel='noopener noreferrer nofollow'>CC-BY-NC-SA 4.0</a>으로 라이선스됩니다."
|
|
],
|
|
"blocks": {
|
|
"top-learn-html-foundations": {
|
|
"title": "HTML 기초 배우기",
|
|
"intro": [
|
|
"이 강좌를 통해 HTML 기초를 확실히 다져보세요. 웹 페이지 구조부터 의미 있는 태그 이해까지 잘 정리된 웹 콘텐츠를 생성하기 위한 견고한 기초를 구축하게 될 것입니다."
|
|
]
|
|
},
|
|
"top-working-with-text": {
|
|
"title": "텍스트 작업",
|
|
"intro": [
|
|
"웹 개발에서 텍스트 작업의 복잡성을 탐구하세요. 텍스트 형식화, 조작, 프레젠테이션에 대해 배우면서 웹 콘텐츠 제작 기술을 향상시키세요."
|
|
]
|
|
},
|
|
"top-links-and-images": {
|
|
"title": "링크와 이미지",
|
|
"intro": [
|
|
"웹 프로젝트에 링크와 이미지를 포함시키는 방법을 배우세요. 이 강좌는 링크 생성 및 이미지 임베딩의 기본을 다루어 웹사이트를 더 상호작용적이고 시각적으로 매력적으로 만드는 방법을 제공합니다."
|
|
]
|
|
},
|
|
"top-build-a-recipe-project": {
|
|
"title": "레시피 페이지 만들기 프로젝트로 HTML 기초 배우기",
|
|
"intro": [
|
|
"HTML 기술을 실습하여 레시피 페이지를 만들어보세요. 이 실습 프로젝트는 HTML 개발의 핵심 개념을 강화하면서 지식을 적용하고 기능적인 웹 페이지를 생성할 수 있도록 합니다."
|
|
]
|
|
},
|
|
"top-learn-css-foundations": {
|
|
"title": "CSS 기초 배우기",
|
|
"intro": [
|
|
"종속형 스타일 시트(CSS) 세계에 뛰어들어 HTML 요소를 스타일링하는 방법을 배우세요. 스타일링 프로퍼티, 선택기, 레이아웃을 탐구하여 웹 페이지에 생명을 불어넣으세요."
|
|
]
|
|
},
|
|
"top-learn-css-foundations-projects": {
|
|
"title": "CSS 기초 프로젝트 배우기",
|
|
"intro": [
|
|
"실제 프로젝트에 적용하여 CSS 기술을 다음 단계로 끌어올리세요. 이 강좌는 실제 사례를 위한 반응형 디자인을 만들며 CSS를 적용하는 실습 경험을 제공합니다."
|
|
]
|
|
},
|
|
"top-learn-css-specificity": {
|
|
"title": "CSS 구체성 배우기",
|
|
"intro": [
|
|
"CSS 특수성을 배우고 HTML 요소에 스타일이 적용되는 방식을 더 잘 이해하세요. 이 강좌는 CSS 규칙의 미세한 차이점을 탐구하고 웹 페이지에서 효율적이고 목표 지향적인 스타일을 작성하는 데 도움을 줍니다."
|
|
]
|
|
},
|
|
"top-the-box-model": {
|
|
"title": "박스 모델 배우기",
|
|
"intro": [
|
|
"이 강좌를 통해 CSS 박스 모델을 배우세요. 요소들이 웹에 렌더링되는 방식을 이해하고 원하는 레이아웃과 디자인을 실현하기 위해 간격, 테두리, 패딩을 조작하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"top-introduction-to-flexbox": {
|
|
"title": "플렉스박스 소개",
|
|
"intro": [
|
|
"유연하고 반응적인 웹 레이아웃 디자인을 간소화하는 레이아웃 모델인 Flexbox의 힘을 발견하세요. 역동적이고 적응적인 페이지 구조를 쉽게 만드는 방법을 배우세요."
|
|
]
|
|
},
|
|
"top-learn-block-and-inline": {
|
|
"title": "블록과 인라인 차이 배우기",
|
|
"intro": [
|
|
"HTML과 CSS에서 블록 요소와 인라인 요소의 차이를 탐구하세요. 이 강좌는 이러한 디스플레이 유형이 레이아웃과 동작에 미치는 영향을 이해하여 정보에 입각한 디자인 결정을 내릴 수 있도록 돕습니다."
|
|
]
|
|
},
|
|
"top-learn-variables-and-operators": {
|
|
"title": "변수와 연산자 배우기",
|
|
"intro": [
|
|
"자바스크립트의 변수와 연산자부터 시작해보세요. 이 강좌는 데이터 타입, 연산자, 변수 선언을 포함한 자바스크립트 프로그래밍의 기초를 다룹니다."
|
|
]
|
|
},
|
|
"top-learn-data-types-and-conditionals": {
|
|
"title": "데이터 타입과 조건문 배우기",
|
|
"intro": ["자바스크립트에서 데이터 타입과 조건문에 대해 배웁니다."]
|
|
},
|
|
"top-learn-function-basics": {
|
|
"title": "함수 기초 배우기",
|
|
"intro": ["자바스크립트에서 함수에 대해 배웁니다."]
|
|
},
|
|
"top-basic-function-projects": {
|
|
"title": "기본 함수 프로젝트",
|
|
"intro": ["기본 함수를 만들며 자바스크립트 기술을 시험해보세요."]
|
|
},
|
|
"top-learn-arrays-and-loops": {
|
|
"title": "배열과 루프 배우기",
|
|
"intro": ["자바스크립트에서 배열과 루프에 대해 배웁니다."]
|
|
},
|
|
"top-learn-to-solve-problems-and-understand-errors": {
|
|
"title": "문제 해결 및 오류 이해를 배우기",
|
|
"intro": [
|
|
"자바스크립트에서 문제를 해결하고 오류를 이해하는 방법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"top-build-a-rock-paper-scissors-game": {
|
|
"title": "가위바위보 게임 만들기",
|
|
"intro": [
|
|
"자바스크립트를 활용하여 가위 바위 보 게임을 만들며 실력을 테스트하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"project-euler": {
|
|
"title": "Project Euler",
|
|
"intro": [
|
|
"아래의 대규모 Project Euler 아카이브에서 프로그래밍 도전 과제를 완료하세요. 이는 알고리즘 및 수학 지식을 강화하는 데 도움이 될 것입니다.",
|
|
"이 문제들은 난이도가 다양하며, 많은 경우 유도학습 경험을 제공합니다. 즉, 한 문제를 해결함으로써 기존에 접근할 수 없던 문제에 접근할 수 있는 새로운 개념을 알게 됩니다. 모두 완료할 수 있습니까?"
|
|
],
|
|
"blocks": {
|
|
"project-euler-problems-1-to-100": {
|
|
"title": "Project Euler 문제 <b>1</b>에서 <b>100</b>까지",
|
|
"intro": [
|
|
"첫 번째 도전 과제 세트에서는 피보나치 수열, 소수 이론, 조합론과 같은 수학 개념을 사용하여 효율적인 알고리즘을 작성하게 될 것입니다.",
|
|
"참고: 이 도전 과제는 JavaScript 전용 솔루션을 지원합니다."
|
|
]
|
|
},
|
|
"project-euler-problems-101-to-200": {
|
|
"title": "Project Euler 문제 <b>101</b>에서 <b>200</b>까지",
|
|
"intro": [
|
|
"이 도전 과제 세트에서는 코스의 첫 번째 부분에서 배운 기술을 확장하고 벡터 계산, 파스칼의 피라미드, RSA 알고리즘과 같은 더 고급 개념을 사용하여 문제를 효율적으로 해결할 것입니다.",
|
|
"참고: 이 도전 과제는 JavaScript 전용 솔루션을 지원합니다."
|
|
]
|
|
},
|
|
"project-euler-problems-201-to-300": {
|
|
"title": "Project Euler 문제 <b>201</b>에서 <b>300</b>까지",
|
|
"intro": [
|
|
"이 도전 과제 세트에서는 이전에 배운 기술을 계속 확장하고 이항 정리, 해밍 수, 콜라츠 수열과 같은 개념을 사용하여 수학 및 문제 해결 능력을 더욱 개발할 것입니다.",
|
|
"참고: 이 도전 과제는 JavaScript 전용 솔루션을 지원합니다."
|
|
]
|
|
},
|
|
"project-euler-problems-301-to-400": {
|
|
"title": "Project Euler 문제 <b>301</b>에서 <b>400</b>까지",
|
|
"intro": [
|
|
"여기에서는 조합 게임 이론, 비트 연산, Golomb의 자기 설명 수열과 같은 개념을 사용하여 이러한 문제에 대한 효율적인 솔루션을 개발함으로써 수학적 및 알고리즘적 기술을 계속 강화할 것입니다.",
|
|
"참고: 이 도전 과제는 JavaScript 전용 솔루션을 지원합니다."
|
|
]
|
|
},
|
|
"project-euler-problems-401-to-480": {
|
|
"title": "Project Euler 문제 <b>401</b>에서 <b>480</b>까지",
|
|
"intro": [
|
|
"이 최종 도전 과제 세트에서는 유일한 인수, Kaprekar 루틴 및 훨씬 더 많은 고급 개념을 사용하여 이 복잡한 문제를 해결해야 합니다.",
|
|
"참고: 이 도전 과제는 JavaScript 전용 솔루션을 지원합니다."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"foundational-c-sharp-with-microsoft": {
|
|
"title": "Microsoft 자격증이 포함된 무료 핵심 C# 과정",
|
|
"intro": [
|
|
"이 과정은 소프트웨어 개발에서의 C# 프로그래밍의 핵심 개념, 구문 및 실제 활용을 다루는 종합적인 소개를 제공합니다.",
|
|
"실습 연습과 프로젝트를 통해 변수, 데이터 유형, 제어 구조 및 객체 지향 프로그래밍 원칙을 포함한 C#의 기본 사항을 배우게 됩니다.",
|
|
"이 과정이 끝날 때쯤이면 자신 있게 애플리케이션을 구축하기 위해 C#을 활용할 수 있는 실용적인 기술과 지식을 습득하게 됩니다."
|
|
],
|
|
"note": "아래 각 섹션에는 취득해야 할 Microsoft Learn 플랫폼의 트로피가 연관되어 있습니다. 각 트로피를 취득한 후, freeCodeCamp에서 이를 검증해야 합니다. 완료하면 자격증 시험에 도전할 수 있습니다.",
|
|
"blocks": {
|
|
"write-your-first-code-using-c-sharp": {
|
|
"title": "C#을 사용하여 첫 번째 코드 작성",
|
|
"intro": [
|
|
"C#을 사용하여 첫 번째 코드를 작성하는 방법을 배우는 것으로 여정을 시작하세요. 언어의 기본 사항 및 구문을 탐색하는 강력한 기반을 구축하여 프로그래밍 모험에 대비하세요."
|
|
]
|
|
},
|
|
"create-and-run-simple-c-sharp-console-applications": {
|
|
"title": "간단한 C# 콘솔 응용 프로그램 만들고 실행하기",
|
|
"intro": [
|
|
"간단한 C# 콘솔 응용 프로그램을 만들고 실행하는 기술을 마스터하세요. 콘솔 기반 프로그래밍의 세계로 뛰어들어 코드를 실행하고 실행된 모습을 직접 경험하게 됩니다."
|
|
]
|
|
},
|
|
"add-logic-to-c-sharp-console-applications": {
|
|
"title": "C# 콘솔 응용 프로그램에 논리 추가하기",
|
|
"intro": [
|
|
"C# 콘솔 응용 프로그램의 논리의 힘을 해제하세요. 코드를 동적 선택을 하고 서로 다른 시나리오에 지능적으로 대응할 수 있도록 만드는 논리 및 의사 결정 기능을 추가하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"work-with-variable-data-in-c-sharp-console-applications": {
|
|
"title": "C# 콘솔 응용 프로그램에서 변수 데이터 작업하기",
|
|
"intro": [
|
|
"변수 데이터를 C# 콘솔 응용 프로그램에서 다루는 기술을 학습하세요."
|
|
]
|
|
},
|
|
"create-methods-in-c-sharp-console-applications": {
|
|
"title": "C# 콘솔 애플리케이션에서 메서드 생성",
|
|
"intro": [
|
|
"C# 콘솔 애플리케이션을 다음 단계로 끌어올리기 위해 메서드 생성 기술을 숙달하세요. 코드의 조직화와 모듈화를 통해 관리하기 쉽고, 재사용 가능하며 효율적으로 만드세요."
|
|
]
|
|
},
|
|
"debug-c-sharp-console-applications": {
|
|
"title": "C# 콘솔 애플리케이션 디버그",
|
|
"intro": [
|
|
"C# 콘솔 애플리케이션의 디버깅 세계에 뛰어들어 문제 해결 능력을 향상시키세요. 코드를 분석하여 문제를 식별하고 해결하는 능력을 획득하여 애플리케이션이 원활하게 실행되고 원하는 결과를 제공하도록 하세요."
|
|
]
|
|
},
|
|
"foundational-c-sharp-with-microsoft-certification-exam": {
|
|
"title": "핵심 C# 마이크로소프트 자격증 시험",
|
|
"intro": [
|
|
"시험을 통과하기 위해 배운 것을 사용하여 핵심 C# 마이크로소프트 자격증을 취득하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"a2-english-for-developers": {
|
|
"title": "A2 English for Developers 자격증(베타)",
|
|
"intro": [
|
|
"이 '개발자를 위한 영어' 커리큘럼에서는 영어 의사소통의 기본을 배우게 됩니다. 이 과정은 유럽 공통 참조 기준(CEFR) A2 레벨을 따르게 됩니다. 특히 개발자들에게 유용한 어휘에 중점을 두었습니다.",
|
|
"첫 번째 절반의 커리큘럼은 영어 문법과 사용법에 익숙해질 수 있도록 도와줍니다. 풍부한 실습 기회를 제공합니다. 자신을 소개하고, 일상적인 대화를 나누고, 작업을 토론하는 기본을 배우게 될 것입니다.",
|
|
"후반부에서는 소프트웨어 개발에 특화된 어휘를 연습합니다. 코드를 설명하고 기술 동향을 논의하며, 스탠드업 회의에 참여하는 방법을 배울 것입니다.",
|
|
"이 A2 수준의 전체 curriculum은 105개의 다양한 대화를 포함합니다. 각각은 어휘를 build하고 전문적인 기술 환경에서 말을 할 때 자신감을 높이도록 설계되었습니다."
|
|
],
|
|
"blocks": {
|
|
"learn-greetings-in-your-first-day-at-the-office": {
|
|
"title": "출근 첫날 인사 배우기",
|
|
"intro": [
|
|
"첫날 직장에서 마주할 수 있는 상황에 대한 일반적인 표현들을 배우게 되는 첫 번째 강좌입니다. 소개, 사람들과 알아가며, 점심 추천을 요청하고, 보안 담당자로부터 출입 카드를 받는 방법을 알게 됩니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-first-day-conversations-at-work": {
|
|
"title": "직장에서의 첫날 대화 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-introductions-in-an-online-team-meeting": {
|
|
"title": "온라인 팀 회의에서 소개 배우기",
|
|
"intro": [
|
|
"이 강좌에서는 개인 소개 방법을 배우게 됩니다. 또한 자신의 직업을 말하는 방법과 그룹 회의에서 목표를 공유하는 법도 배우게 됩니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-meeting-introductions-at-work": {
|
|
"title": "회의 소개하기 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-conversation-starters-in-the-break-room": {
|
|
"title": "휴게실 대화 시작 방법 배우기",
|
|
"intro": [
|
|
"이 강좌에서는 캐주얼한 상황에서 대화를 시작하는 방법을 배웁니다. 또한 취미와 성격 특성에 대해 이야기하는 방법을 배우게 됩니다. 더 나아가 도시 주변 장소에 대해 묻는 방법도 배우게 됩니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-conversation-starters-at-work": {
|
|
"title": "휴게실 대화 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-talk-about-a-typical-workday-and-tasks": {
|
|
"title": "일반적인 작업 일과 및 과제에 대해 말하기 배우기",
|
|
"intro": [
|
|
"이 강좌에서는 작업일 및 업무에 대해 이야기하는 방법과 이를 다른 사람들과 공유하는 방법을 배우게 됩니다. 주로 당신의 활동을 설명하는 데 사용되는 구조와 작업 관련 어휘에 중점을 둡니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-work-routines-and-tasks": {
|
|
"title": "업무일 이야기하기 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-discuss-your-morning-or-evening-routine": {
|
|
"title": "아침이나 저녁 루틴에 대해 논의하는 방법 배우기",
|
|
"intro": [
|
|
"이 강좌에서는 당신의 일상에 관해 이야기하고 그것을 다른 사람과 공유하는 방법을 배우게 됩니다. 주로 일상 행동을 선언하는 데 사용되는 구조와 관련 어휘에 중점을 둡니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-daily-life-routines": {
|
|
"title": "직장 일상 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-describe-your-current-project": {
|
|
"title": "현재 프로젝트를 설명하는 방법 배우기",
|
|
"intro": [
|
|
"이 강좌에서는 참여하고 있는 프로젝트에 대해 이야기하고, 이 프로젝트에서 무엇을 하고 있는지 다른 사람에게 알리는 방법을 배우게 됩니다. 주로 이를 알리는 데 사용되는 구조와 관련 어휘에 중점을 둡니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-what-are-you-working-on": {
|
|
"title": "현재 프로젝트 설명하기 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-ask-and-share-about-educational-and-professional-background": {
|
|
"title": "교육 및 직업적 배경에 대해 묻고 공유하는 방법 배우기",
|
|
"intro": [
|
|
"이 강좌에서는 다른 사람의 교육 및 직업적 배경에 대해 묻고, 자신의 배경에 대한 정보를 공유하는 방법도 배우게 됩니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-educational-and-professional-background": {
|
|
"title": "교육 및 경력 배경 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-talk-about-hobbies-and-interests": {
|
|
"title": "취미와 관심사에 대해 이야기하기 배우기",
|
|
"intro": [
|
|
"이 강좌에서는 취미 및 관심사에 대해 이야기하는 다양한 방법을 배우게 됩니다. 다른 사람의 취미에 대해 묻고 이 활동에 그들을 초대하는 방법도 배우게 됩니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-hobbies-and-interests": {
|
|
"title": "취미와 관심사 이야기하기 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-discuss-roles-and-responsibilities": {
|
|
"title": "역할과 책임에 대해 토론하는 법 배우기",
|
|
"intro": [
|
|
"이 과정에서는 회사 내외의 사람들 역할과 책임에 대해 토론하는 법을 배우고, 이러한 역할과 책임을 묻는 방법과 관련된 정보를 공유하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"en-a2-quiz-discuss-roles-responsibilities": {
|
|
"title": "역할과 책임 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-have-a-conversation-about-preferences-and-motivations": {
|
|
"title": "선호도와 동기에 대한 대화법 배우기",
|
|
"intro": [
|
|
"이 강좌에서는 개인 및 직업 생활에서 무엇이 사람들을 동기부여 하는지에 대해 질문하고, 당신의 동기와 관련된 질문에 답하는 방법, 사람들의 선호도를 논의하는 방법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-preferences-and-motivations": {
|
|
"title": "선호도와 동기 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-discuss-popular-trends-in-technology": {
|
|
"title": "기술의 인기 트렌드에 대해 논의하기 배우기",
|
|
"intro": [
|
|
"이 강좌에서는 요즘 기술에서 모두가 이야기하는 주제에 대해 논의하는 방법을 배웁니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-sharing-opinions": {
|
|
"title": "기술 동향 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-clarify-information-in-different-interactions": {
|
|
"title": "다양한 상호작용에서 정보 명확히 하는 방법 배우기",
|
|
"intro": [
|
|
"이 강좌에서는 정보를 확인하고, 정보를 명확히 하기 위해 질문하고, 명확하지 않은 부분에 대해 설명을 요청하는 방법을 배웁니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-getting-the-details-right": {
|
|
"title": "정보 확인 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-use-basic-programming-vocabulary-in-conversations": {
|
|
"title": "대화에서 기본 프로그래밍 용어를 사용하는 방법 배우기",
|
|
"intro": [
|
|
"이 강좌는 프로그래밍과 관련된 기본 어휘를 제공합니다. 기본 프로그래밍 개념과 관련된 질문을 하는 방법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-basic-programming-vocabulary": {
|
|
"title": "기본 프로그래밍 어휘 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-use-code-related-concepts-and-terms": {
|
|
"title": "코드 관련 개념과 용어를 사용하는 방법 배우기",
|
|
"intro": [
|
|
"이 강좌에서는 코딩과 관련된 용어에 대해 소개받고, 그것을 대화에서 사용하는 방법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-key-programming-terms": {
|
|
"title": "코드 용어 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-discuss-tech-trends-and-updates": {
|
|
"title": "기술 트렌드 및 업데이트에 대해 논의하는 방법 배우기",
|
|
"intro": [
|
|
"이 강좌에서는 기술 세계의 최근 트렌드에 대해 소개받고 그것을 영어로 논의하는 방법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-discussing-new-ideas": {
|
|
"title": "기술 업데이트와 동향 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-help-a-coworker-troubleshoot-on-github": {
|
|
"title": "GitHub에서 동료의 문제 해결을 돕는 방법 배우기",
|
|
"intro": [
|
|
"이 강좌에서는 동료로부터 도움을 요청하는 표현과 그들에게 도움을 제공하는 표현을 배우게 됩니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-discussing-problems-and-solutions": {
|
|
"title": "GitHub에서 동료 돕기 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-share-your-progress-in-weekly-stand-up-meetings": {
|
|
"title": "주간 스탠드업 회의에서 진척 상황을 공유하는 방법 배우기",
|
|
"intro": [
|
|
"이 강좌는 주간 스탠드업 회의에서 당신의 진행 상황을 이미 완료한 것과 현재 진행 중인 것으로 설명하는 방법을 보여줍니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-collaborating-in-meetings": {
|
|
"title": "주간 회의 진행 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-ask-for-clarification-on-code-understanding": {
|
|
"title": "코드 이해를 명확히 하기 위한 방법 배우기",
|
|
"intro": [
|
|
"이 강좌에서는 코드에서 명확하지 않은 부분을 명확히 하기 위해 질문하는 방법을 배웁니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-understanding-problems": {
|
|
"title": "코드 명확화 요청 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-document-code-for-a-project": {
|
|
"title": "프로젝트의 코드 문서를 작성하는 방법 배우기",
|
|
"intro": [
|
|
"이 강좌에서는 프로젝트의 코드를 문서화할 때 할 일을 다루는 관련 표현들을 보여줍니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-document-code-project": {
|
|
"title": "코드 문서화 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-read-and-understand-code-documentation": {
|
|
"title": "코드 문서를 읽고 이해하는 방법 배우기",
|
|
"intro": [
|
|
"이 강좌는 코드 문서화와 관련된 더 많은 표현을 제공하고 이를 이해하는 방법에 대한 팁을 드립니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-read-understand-code-documentation": {
|
|
"title": "코드 문서 이해 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-analyze-code-documentation": {
|
|
"title": "코드 문서 분석하는 방법 배우기",
|
|
"intro": [
|
|
"이 강좌를 통해 문서화를 접근하고 분석하는 데 도움이 되는 몇 가지 아이디어를 보게 됩니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-analyzing-documentation": {
|
|
"title": "문서 분석 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-share-progress-and-accomplishments": {
|
|
"title": "진척 상황과 성과를 공유하는 방법 배우기",
|
|
"intro": [
|
|
"이 강좌를 통해 동료와 진행 상황을 공유하고 프로젝트에서 성공한 내용을 알리는 방법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-discussing-progress-and-results": {
|
|
"title": "진행 상황 및 성과 공유 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-talk-about-updates-and-plans-for-tasks-and-projects": {
|
|
"title": "작업과 프로젝트에 대한 업데이트 및 계획에 대해 이야기하는 방법 배우기",
|
|
"intro": [
|
|
"이 강좌에서는 과제와 프로젝트의 최신 진행 상황과 계획을 발표하는 방법을 보여줍니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-task-project-updates-plans": {
|
|
"title": "작업 및 프로젝트 업데이트 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-express-agreement-or-disagreement": {
|
|
"title": "동의 또는 반대 의견을 표현하는 방법 배우기",
|
|
"intro": [
|
|
"이 강좌에서는 다른 사람의 의견에 동의하거나 반대하는 방법과 이를 정중히 표현하는 방법을 소개합니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-express-agreement-disagreement": {
|
|
"title": "동의와 반대 표현 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-offer-technical-support-and-guidance": {
|
|
"title": "기술 지원 및 안내를 제공하는 방법 배우기",
|
|
"intro": [
|
|
"이 강좌에서는 다른 사람에게 기술적인 도움을 제공하는 방법을 보여줍니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-following-best-practices": {
|
|
"title": "기술 지원 제공 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-request-and-receive-guidance": {
|
|
"title": "안내를 요청하고 받는 방법 배우기",
|
|
"intro": [
|
|
"이 강좌를 통해 필요한 순간에 동료에게 도움을 요청하는 방법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-asking-for-help": {
|
|
"title": "지침 요청과 수신 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-provide-explanations-when-helping-others": {
|
|
"title": "다른 사람을 도울 때 설명 제공 방법 배우기",
|
|
"intro": [
|
|
"이 강좌는 다른 사람을 돕는 동안 설명을 제공하는 방법을 안내합니다."
|
|
]
|
|
},
|
|
"en-a2-quiz-giving-adivice-and-suggestions": {
|
|
"title": "다른 사람에게 설명하기 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"en-a2-certification-exam": {
|
|
"title": "A2 English for Developers 자격증 시험",
|
|
"intro": [
|
|
"이 시험은 A2 English for Developers 자격증을 취득하려면 필요합니다."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"b1-english-for-developers": {
|
|
"title": "B1 English for Developers 자격증(베타)",
|
|
"intro": [
|
|
"이 개발자용 영어 커리큘럼에서는 영어 소통의 필수 사항을 배웁니다. 이를 통해 유럽 공동 참조 프레임워크(CEFR) B1 수준에 따르게 되고, 특히 개발자에게 유용한 어휘에 초점을 맞춥니다.",
|
|
"이 과정은 더 복잡한 문법과 용법을 소개하면서 기초 스킬을 강화하는 데 도움을 줄 것입니다. 장소와 사물을 설명하는 방법, 과거의 경험을 공유하는 방법을 배우고, 현재 완료 및 미래와 같은 시제를 자신 있게 사용할 수 있게 됩니다. 실리적 소통 전략도 포함되어 있어, 대화 관리, 의견 표현, 토론에서의 동의 또는 비동의 구축에 관한 내용을 다루고 있습니다.",
|
|
"또한 이러한 기술을 직업적이고 기술적인 환경에 적용하는 데 중점을 둘 것입니다. 코드 설명, 스탠드업 미팅 참여, 기술 동향 논의 등 개발자에게 필수적인 어휘와 구문을 연습하게 됩니다. 고급 주제로는 조건부, 비교 구조, 대화 관리 등이 포함되어 있어 기술 산업에서 실생활 상호 작용을 준비할 수 있습니다.",
|
|
"이 B1 수준의 전체 커리큘럼에는 73개의 다양한 대화가 포함되어 있습니다. 각각은 전문 기술 환경에서 말할 때 어휘를 늘리고 자신감을 높이도록 설계되었습니다."
|
|
],
|
|
"blocks": {
|
|
"learn-how-to-describe-places-and-events": {
|
|
"title": "장소와 이벤트 설명하는 법 배우기",
|
|
"intro": [
|
|
"이 과정에서는 장소와 이벤트에 대해 대화식으로 이야기하는 방법을 보여줍니다."
|
|
]
|
|
},
|
|
"en-b1-quiz-describe-places-events": {
|
|
"title": "장소 및 이벤트 설명 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-talk-about-past-experiences": {
|
|
"title": "과거 경험에 대해 이야기하는 방법 배우기",
|
|
"intro": [
|
|
"이 과정에서는 과거에 겪었던 경험을 공유하는 방법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"en-b1-quiz-past-experiences": {
|
|
"title": "과거 경험에 대해 말하기 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-talk-about-past-activities": {
|
|
"title": "과거 활동에 대해 이야기하는 방법 배우기",
|
|
"intro": [
|
|
"이 과정에서는 했던 일에 대해 이야기하는 방법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"en-b1-quiz-past-activities": {
|
|
"title": "과거 활동에 대해 말하기 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-present-perfect-while-talking-about-accessibility": {
|
|
"title": "접근성에 대해 이야기하면서 현재 완료형 배우기",
|
|
"intro": [
|
|
"이 과정에서는 현재 완료 구조를 사용하는 방법과 접근성에 대해 조금 더 배우게 됩니다."
|
|
]
|
|
},
|
|
"en-b1-quiz-present-perfect-accessibility": {
|
|
"title": "현재완료와 접근성 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-plan-future-events": {
|
|
"title": "미래 이벤트 계획하는 법 배우기",
|
|
"intro": [
|
|
"이 과정에서는 미래의 다양한 형태를 사용하여 다가오는 이벤트를 계획하는 방법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"en-b1-quiz-plan-future-events": {
|
|
"title": "미래 이벤트 계획 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-future-continuous-while-describing-actions": {
|
|
"title": "행동 묘사하면서 미래 진행형 배우기",
|
|
"intro": [
|
|
"이 과정에서는 미래 진행형 시제를 사용하여 수행할 행동을 설명하는 방법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"en-b1-quiz-future-continuous-actions": {
|
|
"title": "미래 진행형 동작 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-use-conditionals": {
|
|
"title": "조건문 사용법 배우기",
|
|
"intro": [
|
|
"이 과정에서는 특정 조건이 충족될 때 발생할 가상의 결과를 설명하기 위해 조건문을 사용하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"en-b1-quiz-conditionals": {
|
|
"title": "조건문 사용 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-share-feedback": {
|
|
"title": "피드백 공유하는 법 배우기",
|
|
"intro": [
|
|
"이 과정에서는 다른 사람의 작업에 대한 감정을 전달하는 방법을 배우며, 장점과 개선할 부분을 모두 강조하는 방법을 익히세요."
|
|
]
|
|
},
|
|
"en-b1-quiz-share-feedback": {
|
|
"title": "피드백 공유 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-share-your-opinion": {
|
|
"title": "의견 공유하는 법 배우기",
|
|
"intro": [
|
|
"이 과정에서는 토론에서 주제에 대한 의견과 감정을 표현하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"en-b1-quiz-share-opinions": {
|
|
"title": "의견 공유 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-express-agreement": {
|
|
"title": "동의 표현하는 법 배우기",
|
|
"intro": [
|
|
"이 과정에서는 다양한 직장 환경에서 동의 의사를 표현하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"en-b1-quiz-express-agreement": {
|
|
"title": "동의 표현 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-express-disagreement": {
|
|
"title": "반대 의견 표현하는 법 배우기",
|
|
"intro": [
|
|
"이 과정에서는 다양한 직장 환경에서 반대 의견을 표현하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"en-b1-quiz-express-disagreement": {
|
|
"title": "반대 표현 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-express-concerns": {
|
|
"title": "우려 표현하는 법 배우기",
|
|
"intro": [
|
|
"이 과정에서는 프로젝트와 작업에 발생할 수 있는 일에 대해 걱정스러운 점을 다른 사람에게 알리는 방법을 배우세요."
|
|
]
|
|
},
|
|
"en-b1-quiz-express-concerns": {
|
|
"title": "우려 표현 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-express-decisions-based-on-comparisons": {
|
|
"title": "비교를 기반으로 결정을 표현하는 방법 배우기",
|
|
"intro": [
|
|
"이 과정에서는 도구나 회사를 better, faster, the best 같은 표현으로 비교하는 방법을 배우고, 의견을 주고 결정을 내리는 친근한 대화를 연습하세요."
|
|
]
|
|
},
|
|
"en-b1-quiz-decisions-comparisons": {
|
|
"title": "비교로 의사결정하기 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-use-modal-verbs": {
|
|
"title": "조동사 사용법 배우기",
|
|
"intro": [
|
|
"이 과정에서는 규칙에 대해 말하는 법, 필요한 것들을 설명하는 법, 그리고 그것들이 지켜지지 않았을 때 발생할 수 있는 일을 말하는 법을 배우세요. 또한 질문을 명확히 묻고 답하는 연습과 아이디어에 유용한 세부사항을 덧붙이는 연습을 하세요."
|
|
]
|
|
},
|
|
"en-b1-quiz-modal-verbs": {
|
|
"title": "법조동사 사용 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-manage-a-conversation": {
|
|
"title": "대화 관리 방법 배우기",
|
|
"intro": [
|
|
"이 과정에서는 업무상 대화를 관리하는 방법—휴식 후 대화 이어가기, 정중하게 주제 전환하기, 필요 시 끼어들기 등—을 배우고, 대화를 명확하고 친근하며 정돈되게 유지하는 표현들을 연습하세요."
|
|
]
|
|
},
|
|
"en-b1-quiz-manage-conversations": {
|
|
"title": "대화 관리 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-clarify-misunderstandings": {
|
|
"title": "오해를 해명하는 방법 배우기",
|
|
"intro": [
|
|
"이 과정에서는 무언가가 명확하지 않을 때 설명을 요청하고 제공하는 방법을 정중한 질문과 도움이 되는 응답으로 배우세요. 또한 새 단어의 뜻을 추측하고, 문제를 설명하며, 오해를 친절하고 전문적으로 해소하는 연습을 하세요."
|
|
]
|
|
},
|
|
"en-b1-quiz-clarify-misunderstandings": {
|
|
"title": "오해 정정 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-about-speculation-and-requests": {
|
|
"title": "추측 및 요청에 대해 배우기",
|
|
"intro": [
|
|
"이 과정에서는 과거에 있어야 했거나 있었을 수도 있는 일에 대해 말하는 방법과 제안하거나 정중히 요청하는 방법을 배우세요. 또한 문제의 원인을 추측하는 표현과 함께 협력하여 문제를 명확하고 존중하는 방식으로 해결하는 연습을 하세요."
|
|
]
|
|
},
|
|
"en-b1-quiz-speculation-requests": {
|
|
"title": "추측 및 요청 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-about-adverbial-phrases": {
|
|
"title": "부사구에 대해 배우기",
|
|
"intro": [
|
|
"이 과정에서는 언제, 어디서, 얼마나 자주, 얼마나 많이 일이 일어나는지를 설명하는 부사구를 사용하는 법을 배우고, 이를 사용해 작업을 설명하고 계획을 말하며 결과를 더 명확히 설명하는 연습을 하세요."
|
|
]
|
|
},
|
|
"en-b1-quiz-adverbial-phrases": {
|
|
"title": "부사구 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-use-adjectives-in-conversations": {
|
|
"title": "대화에서 형용사 사용하는 방법 배우기",
|
|
"intro": [
|
|
"이 과정에서는 형용사를 사용해 사물을 명확히 묘사하고, 선택지를 비교하며, 직장 대화에서 중요한 세부사항을 강조하는 방법을 배우세요. 또한 아이디어를 더 강력하고 설득력 있게 만드는 방법을 연습하세요."
|
|
]
|
|
},
|
|
"en-b1-quiz-adjectives-conversations": {
|
|
"title": "대화에서 형용사 사용 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-determiners-and-advanced-use-of-articles": {
|
|
"title": "한정사와 기사 고급 사용법 배우기",
|
|
"intro": [
|
|
"이 과정에서는 수량, 선택, 분배에 관한 명확한 정보를 주기 위해 한정사(determiners)를 사용하는 법을 배우세요. 또한 계획·업무·자원에 관한 전문적 대화에서 관사(articles)를 보다 고급스럽게 사용하는 연습을 하세요."
|
|
]
|
|
},
|
|
"en-b1-quiz-determiners-articles": {
|
|
"title": "한정사와 관사 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-use-reported-speech": {
|
|
"title": "간접 화법 사용법 배우기",
|
|
"intro": [
|
|
"이 과정에서는 다른 사람이 말한 내용을 명확하고 자연스럽게 전달하는 방법을 배우세요. 피드백을 전달하고 상황을 설명하며 과거 사건을 말할 때 올바른 동사시제와 문장구조를 사용하는 연습도 하세요."
|
|
]
|
|
},
|
|
"en-b1-quiz-reported-speech": {
|
|
"title": "간접화법 사용 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-use-prepositions-according-to-context": {
|
|
"title": "맥락에 맞는 전치사 사용법 배우기",
|
|
"intro": [
|
|
"이 과정에서는 일상 업무 상황에서 시간, 장소, 방향을 명확히 설명하기 위해 전치사를 사용하는 방법을 배우세요. 일정에 대해 말하고, 길을 안내하며, 사람이나 물건의 위치를 자연스럽고 정확하게 설명하는 연습을 하세요."
|
|
]
|
|
},
|
|
"en-b1-quiz-prepositions-context": {
|
|
"title": "문맥에 따른 전치사 사용 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-how-to-talk-about-numbers-with-a-coworker": {
|
|
"title": "동료와 숫자에 대해 이야기하는 방법 배우기",
|
|
"intro": [
|
|
"이 과정에서는 직장에서 작업, 일정, 예산, 자원에 대해 숫자를 사용해 말하는 방법을 배우세요. 기수와 서수, 백분율, 분수를 사용해 업무를 조직하고 진행 상황을 설명하며 재고나 재정 업데이트를 팀에 명확히 공유하는 연습을 하세요."
|
|
]
|
|
},
|
|
"en-b1-quiz-numbers-at-work": {
|
|
"title": "직장에서 숫자 다루기 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"learn-common-phrasal-verbs-and-idioms": {
|
|
"title": "일반적인 구동사와 관용구 배우기",
|
|
"intro": [
|
|
"이 과정에서는 직장에서 더 자연스럽고 자신감 있게 들리게 하는 일반적인 구동사(phrasal verbs)와 관용구를 배우세요. 의견 제시, 제안하기, 회의 구성, 업무 관련 대화에서 해당 표현을 사용하는 연습을 하세요."
|
|
]
|
|
},
|
|
"en-b1-quiz-phrasal-verbs-idioms": {
|
|
"title": "구동사와 관용구 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"en-b1-certification-exam": {
|
|
"title": "B1 English for Developers 자격증 시험",
|
|
"intro": [
|
|
"이 시험은 B1 English for Developers 자격증을 취득하려면 필요합니다."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"rosetta-code": {
|
|
"title": "로제타 코드",
|
|
"intro": [
|
|
"클래식 로제타 코드 라이브러리의 무료 프로그래밍 과제를 통해 창의적인 문제 해결 능력을 레벨 업하세요.",
|
|
"이러한 도전 과제들은 어렵기도 하지만, 알고리즘 논리를 새로운 경지로 끌어올릴 것입니다.",
|
|
"<a href='https://rosettacode.org/wiki/Rosetta_Code' target='_blank' rel='noopener noreferrer nofollow'>참조: 로제타 코드</a>"
|
|
],
|
|
"blocks": {
|
|
"rosetta-code-challenges": {
|
|
"title": "로제타 코드 챌린지",
|
|
"intro": [
|
|
"이것들은 로제타 코드의 챌린지입니다.",
|
|
"참고: 이 도전 과제는 JavaScript 전용 솔루션을 지원합니다."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"javascript-v9": {
|
|
"title": "JavaScript 자격증",
|
|
"intro": [
|
|
"이 과정은 변수, 함수, 객체, 배열, 제어 흐름 등 핵심 자바스크립트 개념을 가르치며 DOM 조작, 이벤트 처리, 비동기 프로그래밍, 함수형 프로그래밍, 접근성 베스트프랙티스 등도 배우게 됩니다.",
|
|
"JavaScript 자격증을 얻으려면:",
|
|
"- 자격증 시험 응시 자격을 얻으려면 다섯 개의 필수 프로젝트를 완료하세요.",
|
|
"- JavaScript 자격증 시험에 합격하세요."
|
|
],
|
|
"chapters": {
|
|
"javascript": "JavaScript",
|
|
"javascript-certification-exam": "JavaScript 자격증 시험"
|
|
},
|
|
"modules": {
|
|
"javascript-variables-and-strings": "변수와 문자열",
|
|
"javascript-booleans-and-numbers": "불리언과 숫자",
|
|
"javascript-functions": "함수",
|
|
"javascript-arrays": "배열",
|
|
"javascript-objects": "객체",
|
|
"javascript-loops": "루프",
|
|
"review-javascript-fundamentals": "JavaScript 기초 복습",
|
|
"higher-order-functions-and-callbacks": "고차함수와 콜백",
|
|
"dom-manipulation-and-events": "DOM 조작과 이벤트",
|
|
"js-a11y": "JavaScript와 접근성",
|
|
"debugging-javascript": "디버깅",
|
|
"basic-regex": "기본 정규식",
|
|
"lab-markdown-to-html-converter": "Markdown을 HTML로 변환기 만들기",
|
|
"form-validation": "폼 검증",
|
|
"javascript-dates": "날짜",
|
|
"audio-and-video-events": "오디오 및 비디오 이벤트",
|
|
"lab-drum-machine": "드럼 머신 만들기",
|
|
"maps-and-sets": "Map과 Set",
|
|
"lab-voting-system": "투표 시스템 만들기",
|
|
"localstorage-and-crud-operations": "localStorage와 CRUD 연산",
|
|
"classes-and-the-this-keyword": "클래스",
|
|
"lab-bank-account-manager": "은행 계좌 관리 프로그램 만들기",
|
|
"recursion": "재귀",
|
|
"data-structures": "데이터 구조",
|
|
"algorithms": "알고리즘",
|
|
"graphs-and-trees": "그래프와 트리",
|
|
"dynamic-programming": "동적 계획법",
|
|
"functional-programming": "함수형 프로그래밍",
|
|
"asynchronous-javascript": "비동기 자바스크립트",
|
|
"lab-weather-app": "날씨 앱 만들기",
|
|
"review-javascript": "JavaScript 복습",
|
|
"javascript-certification-exam": "JavaScript 자격증 시험"
|
|
},
|
|
"module-intros": {
|
|
"data-structures": {
|
|
"note": "2026년 봄 예정",
|
|
"intro": ["이 모듈에서는 연결 리스트, 스택, 큐 등을 배우세요."]
|
|
},
|
|
"algorithms": {
|
|
"note": "2026년 봄 예정",
|
|
"intro": [
|
|
"이 모듈에서는 버블 정렬, 이진 탐색 등 일반적인 정렬·탐색 알고리즘을 배우세요."
|
|
]
|
|
},
|
|
"graphs-and-trees": {
|
|
"note": "2026년 봄 예정",
|
|
"intro": ["이 모듈에서는 그래프, 트리, 트라이(trie)를 배우세요."]
|
|
},
|
|
"dynamic-programming": {
|
|
"note": "2026년 봄 예정",
|
|
"intro": ["이 모듈에서는 동적 계획법의 작동 원리를 배우세요."]
|
|
}
|
|
},
|
|
"blocks": {
|
|
"lecture-introduction-to-javascript": {
|
|
"title": "JavaScript 소개 강의",
|
|
"intro": [
|
|
"이 강의들에서는 JavaScript 기초를 배우세요. 다루는 주제에는 변수, 데이터 타입, 자바스크립트가 HTML과 CSS와 상호작용하는 방식, 문자열 등이 포함됩니다."
|
|
]
|
|
},
|
|
"lecture-introduction-to-strings": {
|
|
"title": "문자열 소개",
|
|
"intro": [
|
|
"이 레슨들에서는 문자열과 문자열 연결을 다루는 방법을 연습하세요."
|
|
]
|
|
},
|
|
"lecture-understanding-code-clarity": {
|
|
"title": "코드 가독성 이해하기",
|
|
"intro": [
|
|
"이 레슨들에서는 JavaScript의 주석과 프로그래밍에서 세미콜론의 역할을 배우세요."
|
|
]
|
|
},
|
|
"workshop-greeting-bot": {
|
|
"title": "인사 봇 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 인사 봇을 만들어 JavaScript 기초를 배우세요.",
|
|
"변수, <code>let</code>, <code>const</code>, <code>console.log</code>와 기본 문자열 사용법을 배우세요."
|
|
]
|
|
},
|
|
"lab-javascript-trivia-bot": {
|
|
"title": "JavaScript 퀴즈 봇 만들기",
|
|
"intro": [
|
|
"이 실습에서는 JavaScript 변수와 문자열을 다루며 퀴즈 봇을 만들어 연습하세요."
|
|
]
|
|
},
|
|
"lab-sentence-maker": {
|
|
"title": "문장 생성기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 문자열과 연결을 연습하며 여러 이야기를 생성하고 맞춤화하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-data-types": {
|
|
"title": "데이터 타입 다루기",
|
|
"intro": [
|
|
"다음 강의들에서는 JavaScript에서 데이터 타입을 다루는 방법을 배우세요. 동적 타이핑과 정적 타이핑의 차이, <code>typeof</code> 연산자, <code>typeof null</code> 버그 등을 배우세요."
|
|
]
|
|
},
|
|
"review-javascript-variables-and-data-types": {
|
|
"title": "JavaScript 변수와 데이터 타입 복습",
|
|
"intro": [
|
|
"JavaScript 변수와 데이터 타입 퀴즈를 보기 전에 먼저 개념을 복습하세요.",
|
|
"이 페이지를 열어 변수, 데이터 타입, 로깅 및 주석 달기를 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-variables-and-data-types": {
|
|
"title": "JavaScript 변수와 데이터 타입 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 JavaScript 변수와 데이터 타입에 대한 지식을 테스트하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-strings-in-javascript": {
|
|
"title": "JavaScript에서 문자열 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 자바스크립트 문자열을 다루는 방법을 배우세요. 문자열의 문자에 접근하는 법, 템플릿 리터럴과 보간(interpolation) 사용법, 문자열에서 새 줄을 만드는 방법 등을 배우세요."
|
|
]
|
|
},
|
|
"workshop-teacher-chatbot": {
|
|
"title": "교사 챗봇 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 챗봇을 만들어 JavaScript 문자열을 더 배우세요.",
|
|
"템플릿 리터럴과 <code>indexOf</code> 메서드를 배우세요."
|
|
]
|
|
},
|
|
"lecture-working-with-string-character-methods": {
|
|
"title": "문자 메서드 다루기",
|
|
"intro": [
|
|
"이 강의에서는 ASCII 문자 인코딩과 <code>charCodeAt()</code>, <code>fromCharCode()</code> 메서드를 사용해 문자와 숫자 ASCII 값 간 변환하는 법을 배우세요."
|
|
]
|
|
},
|
|
"lecture-working-with-string-search-and-slice-methods": {
|
|
"title": "문자열 검색 및 자르기(slice) 메서드 다루기",
|
|
"intro": [
|
|
"이 강의에서는 <code>includes()</code>로 부분문자열을 검색하는 법과 <code>slice()</code>로 문자열의 일부를 추출하는 법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-string-inspector": {
|
|
"title": "문자열 검사기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 <code>includes()</code>와 <code>slice()</code> 메서드를 사용해 문자열 검사기를 만들며 연습하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-string-formatting-methods": {
|
|
"title": "문자열 포맷 메서드 다루기",
|
|
"intro": [
|
|
"이 강의에서는 <code>toUpperCase()</code>, <code>toLowerCase()</code>로 대소문자 변환하는 법과 <code>trim()</code>, <code>trimStart()</code>, <code>trimEnd()</code>로 공백을 제거하는 법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-string-formatter": {
|
|
"title": "문자열 포매터 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 <code>trim()</code>, <code>toUpperCase()</code>, <code>toLowerCase()</code> 등을 포함한 여러 문자열 메서드를 다루며 연습하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-string-modification-methods": {
|
|
"title": "문자열 수정 메서드 다루기",
|
|
"intro": [
|
|
"이 강의에서는 <code>replace()</code>로 문자열의 일부를 교체하는 법과 <code>repeat()</code>로 문자열을 여러 번 반복하는 법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-string-transformer": {
|
|
"title": "문자열 변환기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 <code>replace()</code>, <code>replaceAll()</code>, <code>repeat()</code> 메서드를 사용하는 연습을 하세요."
|
|
]
|
|
},
|
|
"review-javascript-strings": {
|
|
"title": "JavaScript 문자열 복습",
|
|
"intro": [
|
|
"JavaScript 문자열에 대한 퀴즈를 보기 전에 먼저 복습하세요.",
|
|
"이 페이지를 열어 템플릿 리터럴, <code>slice</code>, <code>includes</code>, <code>trim</code> 메서드 등을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-strings": {
|
|
"title": "JavaScript 문자열 퀴즈",
|
|
"intro": ["이 퀴즈로 JavaScript 문자열에 대한 지식을 테스트하세요."]
|
|
},
|
|
"lecture-working-with-numbers-and-arithmetic-operators": {
|
|
"title": "숫자와 산술 연산자 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 숫자 타입, 산술 연산자, 숫자와 문자열에 연산자를 사용하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"lab-debug-type-coercion-errors": {
|
|
"title": "버그가 있는 앱의 타입 강제 변환 오류 디버깅",
|
|
"intro": [
|
|
"이 실습에서는 여러 타입 강제 변환 오류가 있는 버그 앱을 다루세요.",
|
|
"오류를 찾아 수정하여 앱이 제대로 동작하도록 하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-operator-behavior": {
|
|
"title": "연산자 동작 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 연산자 우선순위, 증감 연산자, 복합 할당 연산자에 대해 배우세요."
|
|
]
|
|
},
|
|
"lab-debug-increment-and-decrement-operator-errors": {
|
|
"title": "버그가 있는 앱의 증감 연산자 오류 디버깅",
|
|
"intro": [
|
|
"이 실습에서는 증감 연산자와 관련된 여러 오류가 있는 앱을 디버그하세요.",
|
|
"오류를 찾아 수정하여 앱이 의도대로 작동하도록 하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-comparison-and-boolean-operators": {
|
|
"title": "비교 및 불리언 연산자 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 불리언, 동등/부등 연산자 및 기타 비교 연산자에 대해 배우세요."
|
|
]
|
|
},
|
|
"workshop-logic-checker-app": {
|
|
"title": "논리 검사기 앱 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 조건문과 비교 연산자를 사용해 논리 검사기 앱을 만들며 연습하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-unary-and-bitwise-operators": {
|
|
"title": "단항 및 비트 연산자 다루기",
|
|
"intro": ["이 강의들에서는 단항 연산자와 비트 연산자에 대해 배우세요."]
|
|
},
|
|
"lecture-working-with-conditional-logic-and-math-methods": {
|
|
"title": "조건 논리와 Math 메서드 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 조건문, 이진 논리 연산자, <code>Math</code> 객체에 대해 배우세요."
|
|
]
|
|
},
|
|
"workshop-mathbot": {
|
|
"title": "Mathbot 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 다양한 Math 객체 메서드를 사용해 Mathbot을 만들어 복습하세요."
|
|
]
|
|
},
|
|
"lab-fortune-teller": {
|
|
"title": "점괘 뽑기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 사용 가능한 점괘 중 랜덤으로 하나를 선택해 점괘 뽑기를 만드세요.",
|
|
"<code>Math.random()</code>과 <code>Math.floor()</code>를 사용해 난수를 생성하는 방법을 연습하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-numbers-and-common-number-methods": {
|
|
"title": "숫자와 공통 숫자 메서드 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 <code>isNaN()</code>, <code>parseInt()</code>, <code>parseFloat()</code>, <code>toFixed()</code> 등 일반적인 숫자 메서드를 배우세요."
|
|
]
|
|
},
|
|
"review-javascript-math": {
|
|
"title": "JavaScript Math 복습",
|
|
"intro": [
|
|
"<code>Math</code> 객체에 대한 퀴즈를 보기 전에 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>Math.random()</code>, <code>Math.floor()</code> 등 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-math": {
|
|
"title": "JavaScript Math 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 JavaScript <code>Math</code> 객체에 대한 지식을 테스트하세요."
|
|
]
|
|
},
|
|
"lecture-understanding-comparisons-and-conditionals": {
|
|
"title": "비교와 조건문 이해하기",
|
|
"intro": [
|
|
"이 강의들에서는 비교 연산자와 조건문을 배우세요. 다양한 조건문이 어떻게 다른지, 그리고 비교가 <code>null</code>과 <code>undefined</code>와 어떻게 작동하는지 배우세요."
|
|
]
|
|
},
|
|
"review-javascript-comparisons-and-conditionals": {
|
|
"title": "JavaScript 비교와 조건문 복습",
|
|
"intro": [
|
|
"조건문에 대한 퀴즈를 보기 전에 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>switch</code> 문과 다른 유형의 조건문 등을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-comparisons-and-conditionals": {
|
|
"title": "JavaScript 비교와 조건문 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 JavaScript 비교와 조건문에 대한 지식을 테스트하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-functions": {
|
|
"title": "함수 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 함수를 사용해 코드 블록을 재사용하는 방법을 배우세요. 함수의 목적과 작동 방식, 프로그래밍에서의 스코프 작동 방식을 배우세요."
|
|
]
|
|
},
|
|
"workshop-calculator": {
|
|
"title": "계산기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 계산기를 만들어 함수에 대한 지식을 복습하세요."
|
|
]
|
|
},
|
|
"lab-boolean-check": {
|
|
"title": "불리언 검사 함수 만들기",
|
|
"intro": ["이 실습에서는 값이 불리언인지 검사하는 함수를 구현하세요."]
|
|
},
|
|
"lab-email-masker": {
|
|
"title": "이메일 마스킹 도구 만들기",
|
|
"intro": [
|
|
"이 실습에서는 이메일 주소를 받아 가려주는 이메일 마스킹 도구를 만드세요.",
|
|
"문자열 자르기, 연결, 함수 사용을 연습하세요."
|
|
]
|
|
},
|
|
"workshop-loan-qualification-checker": {
|
|
"title": "대출 자격 검사기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 대출 자격 검사기 앱을 만들어 조건문 사용법을 더 배우세요.",
|
|
"<code>if</code> 문과 비교 연산자, 여러 조건을 <code>if</code> 문에서 사용하는 법을 배우세요."
|
|
]
|
|
},
|
|
"lab-celsius-to-fahrenheit-converter": {
|
|
"title": "섭씨를 화씨로 변환기 만들기",
|
|
"intro": ["이 실습에서는 섭씨를 화씨로 변환하는 함수를 구현하세요."]
|
|
},
|
|
"lab-counting-cards": {
|
|
"title": "카드 카운팅 보조기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 자바스크립트를 사용해 배분된 카드를 세는 프로그램을 만드세요."
|
|
]
|
|
},
|
|
"lab-leap-year-calculator": {
|
|
"title": "윤년 계산기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 조건문과 루프를 사용해 주어진 연도가 윤년인지 판별하세요."
|
|
]
|
|
},
|
|
"lab-truncate-string": {
|
|
"title": "문자열 자르기 알고리즘 구현하기",
|
|
"intro": ["이 실습에서는 문자열을 특정 길이로 잘라내는 연습을 하세요."]
|
|
},
|
|
"lab-string-ending-checker": {
|
|
"title": "끝 확인 도구 만들기",
|
|
"intro": [
|
|
"이 실습에서는 주어진 문자열이 특정 목표 문자열로 끝나는지 검사하는 함수를 구현하세요."
|
|
]
|
|
},
|
|
"review-javascript-functions": {
|
|
"title": "JavaScript 함수 복습",
|
|
"intro": [
|
|
"JavaScript 함수에 대한 퀴즈를 보기 전에 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 함수, 화살표 함수, 스코프를 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-functions": {
|
|
"title": "JavaScript 함수 퀴즈",
|
|
"intro": ["이 퀴즈로 JavaScript 함수에 대한 지식을 테스트하세요."]
|
|
},
|
|
"lecture-working-with-arrays": {
|
|
"title": "배열 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 자바스크립트 배열을 다루는 방법을 배우세요. 배열의 구성, 일차원 및 이차원 배열, 배열의 요소에 접근하고 업데이트하는 방법 등을 배우세요."
|
|
]
|
|
},
|
|
"workshop-shopping-list": {
|
|
"title": "쇼핑 리스트 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 쇼핑 리스트를 만들어 배열을 다루는 연습을 하세요.",
|
|
"<code>push</code>, <code>pop</code>, <code>shift</code>, <code>unshift</code>와 같은 메서드로 배열에 요소를 추가하거나 제거하는 방법을 복습하세요."
|
|
]
|
|
},
|
|
"lab-lunch-picker-program": {
|
|
"title": "점심 고르기 프로그램 만들기",
|
|
"intro": [
|
|
"이 실습에서는 배열과 난수를 사용해 점심 고르기 프로그램을 만들어 복습하세요."
|
|
]
|
|
},
|
|
"lab-golf-score-translator": {
|
|
"title": "골프 점수 번역기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 배열 메서드를 사용해 골프 점수를 별칭으로 번역하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-common-array-methods": {
|
|
"title": "일반적인 배열 메서드 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 배열에서 항목의 위치 찾기, 특정 요소 포함 여부 확인, 배열 복사 등 고급 연산을 수행하는 배열 메서드를 배우세요."
|
|
]
|
|
},
|
|
"review-javascript-arrays": {
|
|
"title": "JavaScript 배열 복습",
|
|
"intro": [
|
|
"JavaScript 배열에 대한 퀴즈를 보기 전에 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 배열 구조분해, 배열에 요소를 추가하고 제거하는 방법 등을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-arrays": {
|
|
"title": "JavaScript 배열 퀴즈",
|
|
"intro": ["이 퀴즈로 JavaScript 배열에 대한 지식을 테스트하세요."]
|
|
},
|
|
"lecture-introduction-to-javascript-objects-and-their-properties": {
|
|
"title": "JavaScript 객체와 프로퍼티 소개",
|
|
"intro": [
|
|
"이 강의들에서는 객체를 생성하는 방법, 프로퍼티에 접근하는 방법, 원시 타입과 비원시 타입의 차이를 포함해 JavaScript 객체의 기초를 배우세요."
|
|
]
|
|
},
|
|
"workshop-wildlife-tracker": {
|
|
"title": "야생동물 추적기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 자바스크립트 객체를 사용해 간단한 야생동물 추적기를 만드세요.",
|
|
"객체 생성, 프로퍼티 접근·업데이트, 프로퍼티 제거, 프로퍼티 존재 확인, 대괄호 표기법 사용을 연습하세요."
|
|
]
|
|
},
|
|
"lab-cargo-manifest-validator": {
|
|
"title": "화물 명세서 검증기 만들기",
|
|
"intro": [
|
|
"이 실습에서 자바스크립트를 사용해 화물 명세서를 정규화하고 검증하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-json": {
|
|
"title": "JSON 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 JavaScript Object Notation(JSON)을 배우고 JSON 데이터 접근, <code>JSON.parse()</code>와 <code>JSON.stringify()</code> 사용법을 익히세요."
|
|
]
|
|
},
|
|
"lecture-working-with-optional-chaining-and-object-destructuring": {
|
|
"title": "옵셔널 체이닝과 객체 구조분해 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 옵셔널 체이닝 연산자와 객체 분해 구문을 포함한 고급 객체 조작 기법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-recipe-tracker": {
|
|
"title": "레시피 트래커 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 레시피 트래커를 만들어 JavaScript 객체 사용법을 복습하세요."
|
|
]
|
|
},
|
|
"lab-quiz-game": {
|
|
"title": "퀴즈 게임 만들기",
|
|
"intro": [
|
|
"이 실습에서는 JavaScript 배열과 객체를 사용해 퀴즈 게임을 만드세요.",
|
|
"배열에서 무작위로 질문과 답을 선택하고 비교하는 함수를 사용하는 연습을 하세요."
|
|
]
|
|
},
|
|
"lab-record-collection": {
|
|
"title": "레코드 컬렉션 만들기",
|
|
"intro": ["이 실습에서는 레코드 컬렉션을 관리하는 함수를 만드세요."]
|
|
},
|
|
"review-javascript-objects": {
|
|
"title": "JavaScript 객체 복습",
|
|
"intro": [
|
|
"JavaScript 객체에 대한 퀴즈를 보기 전에 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 객체에서 정보 접근하는 방법, 객체 분해, JSON 다루기 등을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-objects": {
|
|
"title": "JavaScript 객체 퀴즈",
|
|
"intro": ["이 퀴즈로 JavaScript 객체에 대한 지식을 테스트하세요."]
|
|
},
|
|
"lecture-working-with-loops": {
|
|
"title": "루프 다루기",
|
|
"intro": [
|
|
"루프는 자바스크립트의 필수 요소입니다. 다음 강의에서 다양한 루프 유형과 작동 방식 및 반복이 어떻게 이루어지는지 배우세요."
|
|
]
|
|
},
|
|
"workshop-word-counter": {
|
|
"title": "Build a Word Counter",
|
|
"intro": [
|
|
"In this workshop, you will practice using <code>for...of</code> loops by building a function that counts the occurrences of a string in an array of strings."
|
|
]
|
|
},
|
|
"workshop-sentence-analyzer": {
|
|
"title": "문장 분석기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 문장 분석기 앱을 만들어 JavaScript 루프에 대한 지식을 복습하세요."
|
|
]
|
|
},
|
|
"workshop-space-mission-roster": {
|
|
"title": "우주 미션 명단 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 자바스크립트 반복문을 활용해 우주 미션 명단을 만드세요."
|
|
]
|
|
},
|
|
"workshop-heritage-library-catalog": {
|
|
"title": "Build a Heritage Library Catalog",
|
|
"intro": [
|
|
"In this workshop, you will digitize historical catalog cards for a heritage library.",
|
|
"You will practice using loops, objects, and string methods to parse raw text data, search and group entries, render formatted output, and export to JSON and CSV."
|
|
]
|
|
},
|
|
"lab-longest-word-in-a-string": {
|
|
"title": "가장 긴 단어 찾기 앱 만들기",
|
|
"intro": [
|
|
"이 실습에서는 JavaScript 루프를 사용해 주어진 문장에서 가장 긴 단어의 길이를 찾으세요."
|
|
]
|
|
},
|
|
"lab-factorial-calculator": {
|
|
"title": "팩토리얼 계산기 만들기 ",
|
|
"intro": [
|
|
"이 실습에서는 팩토리얼 계산기를 만드세요.",
|
|
"루프와 조건문을 사용해 숫자의 팩토리얼을 계산하는 연습을 하세요."
|
|
]
|
|
},
|
|
"lab-mutations": {
|
|
"title": "변이 알고리즘 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 서로 다른 두 문자열을 반복하며 문자를 비교하는 연습을 하세요."
|
|
]
|
|
},
|
|
"lab-chunky-monkey": {
|
|
"title": "Chunky Monkey 알고리즘 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 선택한 기법으로 배열을 더 작은 배열로 나누는 연습을 하세요."
|
|
]
|
|
},
|
|
"lab-profile-lookup": {
|
|
"title": "프로필 조회 만들기",
|
|
"intro": ["이 실습에서는 프로필 정보를 조회하는 함수를 만드세요."]
|
|
},
|
|
"lab-repeat-a-string": {
|
|
"title": "문자열 반복 함수 만들기",
|
|
"intro": [
|
|
"이 실습에서는 루프를 구현해 문자열을 지정한 횟수만큼 반복하세요."
|
|
]
|
|
},
|
|
"workshop-festival-crowd-flow-simulator": {
|
|
"title": "Build a Festival Crowd Flow Simulator",
|
|
"intro": [
|
|
"In this workshop, you will use JavaScript to simulate the flow of attendants at a music festival."
|
|
]
|
|
},
|
|
"lab-missing-letter-detector": {
|
|
"title": "빠진 문자 감지기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 주어진 연속문자 범위에서 빠진 문자를 찾아 반환하는 함수를 만들어 보세요."
|
|
]
|
|
},
|
|
"review-javascript-loops": {
|
|
"title": "JavaScript 루프 복습",
|
|
"intro": [
|
|
"다양한 JavaScript 루프에 대한 퀴즈를 보기 전에 복습하세요.",
|
|
"이 페이지를 열어 <code>for...of</code> 루프, <code>while</code> 루프, <code>break</code>와 <code>continue</code> 문 등을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-loops": {
|
|
"title": "JavaScript 루프 퀴즈",
|
|
"intro": ["이 퀴즈로 JavaScript 루프에 대한 지식을 테스트하세요."]
|
|
},
|
|
"lecture-working-with-types-and-objects": {
|
|
"title": "타입과 객체 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 문자열 객체, <code>toString()</code> 메서드, <code>Number</code> 생성자 등을 배우세요."
|
|
]
|
|
},
|
|
"lecture-working-with-arrays-variables-and-naming-practices": {
|
|
"title": "배열, 변수, 명명 관행 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 변수와 함수의 명명 관행과 배열 다루는 방법을 배우세요."
|
|
]
|
|
},
|
|
"lecture-working-with-code-quality-and-execution-concepts": {
|
|
"title": "코드 품질과 실행 개념 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 린터와 포매터, 메모리 관리, 클로저에 대해 배우세요."
|
|
]
|
|
},
|
|
"lab-reverse-a-string": {
|
|
"title": "문자열 반전기 만들기",
|
|
"intro": ["이 실습에서는 주어진 문자열을 뒤집는 함수를 만드세요."]
|
|
},
|
|
"lab-largest-number-finder": {
|
|
"title": "최댓값 찾기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 JavaScript 기초를 사용해 주어진 배열의 각 서브배열에서 가장 큰 수를 찾는 함수를 만드세요."
|
|
]
|
|
},
|
|
"lab-first-element-finder": {
|
|
"title": "첫 번째 요소 찾기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 배열을 탐색해 “참값 테스트”를 통과하는 첫 번째 요소를 반환하는 함수를 작성하세요."
|
|
]
|
|
},
|
|
"lab-slice-and-splice": {
|
|
"title": "슬라이스와 스플라이스 알고리즘 구현하기",
|
|
"intro": ["이 실습에서는 한 배열을 다른 배열과 합치는 연습을 하세요."]
|
|
},
|
|
"lab-pyramid-generator": {
|
|
"title": "피라미드 생성기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 피라미드 생성기를 만드세요.",
|
|
"숫자를 입력받아 해당 레벨 수만큼 루프를 사용해 피라미드를 생성하세요."
|
|
]
|
|
},
|
|
"lab-gradebook-app": {
|
|
"title": "성적부 앱 만들기",
|
|
"intro": [
|
|
"이 실습에서는 성적부 앱을 만드세요.",
|
|
"점수를 기반으로 학생 성적을 결정하는 조건문을 연습하세요."
|
|
]
|
|
},
|
|
"lecture-the-var-keyword-and-hoisting": {
|
|
"title": "var 키워드와 호이스팅",
|
|
"intro": [
|
|
"이 강의들에서는 <code>var</code> 키워드와 더 이상 권장되지 않는 이유를 배우세요. 또한 자바스크립트의 호이스팅에 대해 배워 코드에서 미묘한 버그를 피하세요."
|
|
]
|
|
},
|
|
"lab-title-case-converter": {
|
|
"title": "타이틀 케이스 변환기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 문자열을 타이틀케이스로 변환하는 함수를 만들어 보세요."
|
|
]
|
|
},
|
|
"lab-falsy-remover": {
|
|
"title": "Falsy 제거기 구현",
|
|
"intro": [
|
|
"이 실습에서는 배열에서 모든 falsy값을 제거하는 함수를 만드세요."
|
|
]
|
|
},
|
|
"lab-inventory-management-program": {
|
|
"title": "재고 관리 프로그램 만들기",
|
|
"intro": [
|
|
"이 실습에서는 자바스크립트를 사용해 재고관리 프로그램을 만드세요.",
|
|
"자바스크립트 객체 배열을 사용해 재고를 관리하세요."
|
|
]
|
|
},
|
|
"lecture-understanding-modules-imports-and-exports": {
|
|
"title": "모듈, import 및 export 이해하기",
|
|
"intro": [
|
|
"이 강의에서는 모듈, import와 export를 자바스크립트에서 어떻게 사용하는지 배우세요."
|
|
]
|
|
},
|
|
"lecture-working-with-the-arguments-object-and-rest-parameters": {
|
|
"title": "arguments 객체와 rest 매개변수 다루기",
|
|
"intro": [
|
|
"이 레슨들에서는 <code>arguments</code> 객체와 rest 파라미터 문법을 다루는 방법을 연습하세요."
|
|
]
|
|
},
|
|
"lab-unique-sorted-union": {
|
|
"title": "고유 정렬 합집합 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 두 개 이상의 배열을 입력받아 원래 제공된 배열 순서대로 고유한 값들로 이루어진 새 배열을 반환하는 함수를 작성하세요."
|
|
]
|
|
},
|
|
"lab-password-generator": {
|
|
"title": "비밀번호 생성기 앱 만들기",
|
|
"intro": [
|
|
"이 실습에서는 사용자의 입력을 기반으로 비밀번호 생성기 앱을 만드세요."
|
|
]
|
|
},
|
|
"lab-sum-all-numbers-algorithm": {
|
|
"title": "모든 숫자 합산 알고리즘 설계하기",
|
|
"intro": [
|
|
"이 실습에서는 모든 숫자의 합을 구하는 알고리즘을 설계하세요. 이 알고리즘은 두 숫자로 이루어진 배열을 받아 그 두 숫자와 그 사이의 모든 숫자의 합을 반환하세요."
|
|
]
|
|
},
|
|
"lab-dna-pair-generator": {
|
|
"title": "DNA 염기쌍 생성기 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 단일 DNA 가닥을 상보 염기쌍으로 변환하는 염기쌍 알고리즘을 구현하세요."
|
|
]
|
|
},
|
|
"lab-html-entitiy-converter": {
|
|
"title": "HTML 엔티티 변환기 구현",
|
|
"intro": [
|
|
"이 실습에서는 문자열의 특수문자를 해당 HTML 엔티티로 변환하는 함수를 만드세요."
|
|
]
|
|
},
|
|
"lab-odd-fibonacci-sum-calculator": {
|
|
"title": "홀수 피보나치 합 계산기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 숫자를 입력받아 그 숫자 이하인 모든 홀수 피보나치 수의 합을 반환하는 계산기를 만들어 보세요."
|
|
]
|
|
},
|
|
"lab-element-skipper": {
|
|
"title": "요소 스키퍼 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 지정된 스텝값에 따라 배열에서 요소를 건너뛰는 함수를 작성하세요."
|
|
]
|
|
},
|
|
"lab-playlist-remix-engine": {
|
|
"title": "Build a Playlist Remix Engine",
|
|
"intro": [
|
|
"In this lab, you will build a Playlist Remix Engine using JavaScript arrays.",
|
|
"You will apply array methods and logic to transform data and generate a final remix schedule."
|
|
]
|
|
},
|
|
"review-javascript-fundamentals": {
|
|
"title": "자바스크립트 기초 복습",
|
|
"intro": [
|
|
"자바스크립트 기초에 대한 퀴즈를 보기 전에 개념을 먼저 복습하세요.",
|
|
"이 페이지를 열어 클로저, 메모리 관리 등과 같은 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-fundamentals": {
|
|
"title": "자바스크립트 기초 퀴즈",
|
|
"intro": ["이 퀴즈로 자바스크립트 기초 지식을 확인하세요."]
|
|
},
|
|
"lecture-working-with-higher-order-functions-and-callbacks": {
|
|
"title": "고차 함수 및 콜백 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 고차함수와 콜백을 다루는 방법을 배우세요. 배우게 될 고차함수에는 <code>map()</code>, <code>filter()</code>, <code>reduce()</code>, <code>sort()</code>, <code>every()</code>, <code>some()</code> 등이 포함됩니다. 또한 원하는 결과를 얻기 위해 이 메서드들을 체이닝하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-library-manager": {
|
|
"title": "라이브러리 관리자 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 라이브러리 관리자를 만들어 고차 배열 메서드를 연습하세요."
|
|
]
|
|
},
|
|
"lab-book-organizer": {
|
|
"title": "책 정리기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 자바스크립트의 고차함수를 사용해 도서 정리기를 만드세요."
|
|
]
|
|
},
|
|
"lab-sorted-index-finder": {
|
|
"title": "정렬된 인덱스 찾기 구현",
|
|
"intro": [
|
|
"이 실습에서는 정렬된 배열에 주어진 숫자를 삽입해 정렬 상태를 유지하려면 어느 인덱스에 넣어야 하는지 찾는 함수를 만드세요."
|
|
]
|
|
},
|
|
"lab-symmetric-difference": {
|
|
"title": "대칭 차집합 함수 만들기",
|
|
"intro": [
|
|
"이 실습에서는 고차함수를 사용해 두 배열 사이의 대칭차(symmetric difference)를 찾는 연습을 하세요."
|
|
]
|
|
},
|
|
"lab-value-remover-function": {
|
|
"title": "값 제거 함수 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 배열에서 지정된 값의 모든 인스턴스를 제거하는 함수를 만들어 보세요."
|
|
]
|
|
},
|
|
"lab-matching-object-filter": {
|
|
"title": "일치 객체 필터 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 객체 배열을 검사하여 특정 프로퍼티와 값 쌍이 일치하는 모든 객체를 반환하는 함수를 만드세요."
|
|
]
|
|
},
|
|
"lab-prime-number-sum-calculator": {
|
|
"title": "소수 합 계산기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 숫자를 입력받아 그 숫자 이하인 모든 소수의 합을 반환하는 계산기를 만들어 보세요."
|
|
]
|
|
},
|
|
"lab-range-based-lcm-calculator": {
|
|
"title": "범위 기반 LCM 계산기 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 두 개의 숫자를 가진 배열을 입력받아 그 두 숫자와 그 사이 모든 숫자의 최소공배수(LCM)를 반환하는 함수를 작성하세요."
|
|
]
|
|
},
|
|
"lab-deep-flattening-tool": {
|
|
"title": "깊은 평탄화 도구 만들기",
|
|
"intro": [
|
|
"이 실습에서는 내장된 flat 메서드를 사용하지 않고 깊게 중첩된 배열을 모든 수준에서 평탄화하는 함수를 구현하세요."
|
|
]
|
|
},
|
|
"lab-all-true-property-validator": {
|
|
"title": "모든 참 프로퍼티 검사기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 배열의 모든 객체가 특정 프로퍼티에 대해 truthy 값을 가지는지 검사하는 함수를 만들어 보세요."
|
|
]
|
|
},
|
|
"review-javascript-higher-order-functions": {
|
|
"title": "자바스크립트 고차 함수 복습",
|
|
"intro": [
|
|
"자바스크립트 고차함수에 대해 퀴즈를 보기 전에 해당 개념을 복습하세요.",
|
|
"이 페이지를 열어 <code>map()</code>, <code>filter()</code>, <code>reduce()</code> 메서드 사용법 등 관련 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-higher-order-functions": {
|
|
"title": "자바스크립트 고차 함수 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 자바스크립트 고차함수에 대해 학습한 내용을 확인하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-the-dom-click-events-and-web-apis": {
|
|
"title": "DOM, 클릭 이벤트 및 웹 API 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 DOM(Document Object Model), <code>addEventListener()</code> 메서드와 이벤트, 그리고 웹 API를 다루는 방법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-storytelling-app": {
|
|
"title": "스토리텔링 앱 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 장르에 따라 서로 다른 이야기를 나열할 수 있는 스토리텔링 앱을 만드세요."
|
|
]
|
|
},
|
|
"workshop-emoji-reactor": {
|
|
"title": "이모지 리액터 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 <code>querySelector</code>와 <code>querySelectorAll</code>을 연습하기 위해 이모지 리액터를 만들어 보세요."
|
|
]
|
|
},
|
|
"lab-favorite-icon-toggler": {
|
|
"title": "즐겨찾기 아이콘 토글러 만들기",
|
|
"intro": [
|
|
"이 실습에서는 자바스크립트 클릭 이벤트를 활용해 즐겨찾기 아이콘 토글러를 만드세요."
|
|
]
|
|
},
|
|
"lecture-understanding-the-event-object-and-event-delegation": {
|
|
"title": "이벤트 객체와 이벤트 위임 이해하기",
|
|
"intro": [
|
|
"이 강의들에서는 이벤트 객체, change 이벤트, 이벤트 버블링, 이벤트 위임 등에 대해 배우세요."
|
|
]
|
|
},
|
|
"workshop-music-instrument-filter": {
|
|
"title": "악기 필터 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 자바스크립트로 악기 필터를 만들어 이벤트와 DOM 조작을 연습하세요."
|
|
]
|
|
},
|
|
"lab-real-time-counter": {
|
|
"title": "실시간 카운터 만들기",
|
|
"intro": [
|
|
"이 실습에서는 실시간 문자 카운터를 만들게 됩니다",
|
|
"입력 필드에 사용자가 입력할 때 <code>input</code> 이벤트를 다루는 방법을 연습하세요."
|
|
]
|
|
},
|
|
"lab-lightbox-viewer": {
|
|
"title": "라이트박스 뷰어 만들기",
|
|
"intro": [
|
|
"이 실습에서는 이미지를 집중 모드로 보여주는 라이트박스 뷰어를 만드세요.",
|
|
"클릭 이벤트와 클래스 토글링을 연습하세요."
|
|
]
|
|
},
|
|
"workshop-rps-game": {
|
|
"title": "가위바위보 게임 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 DOM 조작과 이벤트를 복습하며 가위바위보 게임을 만드세요."
|
|
]
|
|
},
|
|
"lab-football-team-cards": {
|
|
"title": "축구 팀 카드 세트 만들기",
|
|
"intro": [
|
|
"이 실습에서는 DOM 조작, 객체 구조분해, 이벤트 처리 및 데이터 필터링을 사용해 축구팀 카드 세트를 만드세요."
|
|
]
|
|
},
|
|
"review-dom-manipulation-and-click-events-with-javascript": {
|
|
"title": "자바스크립트로 DOM 조작 및 클릭 이벤트 복습",
|
|
"intro": [
|
|
"DOM에 관한 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>DOM</code>, <code>Web APIs</code>, <code>addEventListener()</code> 메서드, change 이벤트, 이벤트 버블링 등 관련 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-dom-manipulation-and-click-event-with-javascript": {
|
|
"title": "자바스크립트로 DOM 조작 및 클릭 이벤트 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 자바스크립트에서의 DOM 조작과 클릭 이벤트 지식을 확인하세요."
|
|
]
|
|
},
|
|
"lecture-understanding-aria-expanded-aria-live-and-common-aria-states": {
|
|
"title": "aria-expanded, aria-live 및 일반 ARIA 상태 이해하기",
|
|
"intro": [
|
|
"이 강의들에서는 <code>aria-expanded</code>, <code>aria-live</code> 같은 ARIA 속성과 일반적인 ARIA 상태에 대해 더 배우세요."
|
|
]
|
|
},
|
|
"workshop-planets-tablist": {
|
|
"title": "행성 탭 목록 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 태양계 행성에 대한 사실을 보여주는 동적 탭 인터페이스를 만드세요."
|
|
]
|
|
},
|
|
"workshop-note-taking-app": {
|
|
"title": "노트 작성 앱 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 접근 가능한 노트 작성 앱을 만드세요.",
|
|
"이를 통해 <code>aria-live</code> 속성을 다루는 연습을 하세요."
|
|
]
|
|
},
|
|
"lab-theme-switcher": {
|
|
"title": "테마 전환기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 테마 스위처를 만들고 <code>aria-haspopup</code>, <code>aria-expanded</code>, <code>aria-controls</code> 속성들을 다루는 연습을 하세요."
|
|
]
|
|
},
|
|
"review-js-a11y": {
|
|
"title": "자바스크립트와 접근성 복습",
|
|
"intro": [
|
|
"자바스크립트와 접근성에 관한 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>aria-expanded</code>, <code>aria-live</code>, <code>aria-controls</code> 속성 등을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-js-a11y": {
|
|
"title": "자바스크립트와 접근성 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 자바스크립트와 접근성 모범사례에 관한 지식을 확인하세요."
|
|
]
|
|
},
|
|
"lecture-debugging-techniques": {
|
|
"title": "디버깅 기법",
|
|
"intro": [
|
|
"이 강의들에서는 자바스크립트에서 흔한 오류와 이를 고치는 기법인 디버깅에 대해 배우세요."
|
|
]
|
|
},
|
|
"lab-random-background-color-changer": {
|
|
"title": "무작위 배경색 변경기 디버깅",
|
|
"intro": [
|
|
"이 실습에서는 무작위 배경색 변경기에서 발생한 오류를 디버깅하고 오류를 수정해 제대로 동작하도록 만드세요."
|
|
]
|
|
},
|
|
"review-debugging-javascript": {
|
|
"title": "자바스크립트 디버깅 복습",
|
|
"intro": [
|
|
"일반적인 디버깅 기법에 관한 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>throw statement</code>, <code>try...catch...finally</code> 등 디버깅 관련 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-debugging-javascript": {
|
|
"title": "자바스크립트 디버깅 퀴즈",
|
|
"intro": ["이 퀴즈로 자바스크립트 디버깅에 대한 지식을 확인하세요."]
|
|
},
|
|
"lecture-working-with-regular-expressions": {
|
|
"title": "정규 표현식 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 자바스크립트 정규표현식에 대해 배우세요. 정규표현식을 다루는 메서드, 수식자(modifiers), 문자 클래스, 룩어헤드(lookaheads), 룩비하인드(lookbehinds), 백레퍼런스, 수량자(quantifiers) 등을 배우세요."
|
|
]
|
|
},
|
|
"workshop-spam-filter": {
|
|
"title": "스팸 필터 만들기",
|
|
"intro": [
|
|
"정규표현식은 종종 “regex” 또는 “regexp”로 줄여 쓰며, 프로그래머가 텍스트를 매치, 검색, 대체하는 데 도움이 되는 패턴입니다. 정규표현식은 강력하지만 많은 특수문자를 사용하기 때문에 이해하기 어려울 수 있습니다.",
|
|
"이 워크숍에서는 캡처 그룹, positive lookaheads, negative lookaheads 및 기타 기술을 사용해 원하는 어떤 텍스트든 매치하는 연습을 하세요."
|
|
]
|
|
},
|
|
"lab-palindrome-checker": {
|
|
"title": "회문 검사기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 주어진 단어가 회문인지 확인하는 애플리케이션을 만드세요."
|
|
]
|
|
},
|
|
"lab-regex-sandbox": {
|
|
"title": "정규식 샌드박스 만들기",
|
|
"intro": ["이 실습에서는 정규식 샌드박스를 만드세요."]
|
|
},
|
|
"lab-spinal-case-converter": {
|
|
"title": "스파이널 케이스 변환기 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 모든 문자를 소문자로 바꾸고 하이픈으로 구분하는 스타일인 spinal case로 문자열을 변환하는 함수를 작성하세요."
|
|
]
|
|
},
|
|
"lab-pig-latin": {
|
|
"title": "Pig Latin 변환기 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 자바스크립트로 Pig Latin 변환기를 구현하세요.",
|
|
"문자열 조작, 조건문 논리, 정규식을 연습하세요."
|
|
]
|
|
},
|
|
"lab-smart-word-replacement": {
|
|
"title": "스마트 단어 대체 함수 만들기",
|
|
"intro": [
|
|
"이 실습에서는 정규식을 사용하여 주어진 문자열에서 검색 및 치환 작업을 수행하는 함수를 만드세요."
|
|
]
|
|
},
|
|
"review-javascript-regular-expressions": {
|
|
"title": "자바스크립트 정규 표현식 복습",
|
|
"intro": [
|
|
"정규표현식에 관한 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 룩어헤드, 룩비하인드, 일반적인 regex 수식자 등 정규표현식 관련 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-regular-expressions": {
|
|
"title": "자바스크립트 정규 표현식 퀴즈",
|
|
"intro": ["이 퀴즈로 자바스크립트 정규표현식에 대한 지식을 확인하세요."]
|
|
},
|
|
"lab-markdown-to-html-converter": {
|
|
"title": "Markdown을 HTML로 변환기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 자바스크립트를 사용해 Markdown을 HTML로 변환하는 변환기를 만드세요.",
|
|
"정규표현식, 문자열 조작 등 다양한 내용을 연습하세요."
|
|
]
|
|
},
|
|
"lecture-understanding-form-validation": {
|
|
"title": "폼 유효성 검사 이해하기",
|
|
"intro": [
|
|
"이 강의들에서는 자바스크립트 폼 검증에 대해 배우세요. 폼을 검증하는 다양한 방법, <code>preventDefault()</code> 메서드의 동작 방식, submit 이벤트의 작동 방식을 배우세요."
|
|
]
|
|
},
|
|
"workshop-calorie-counter": {
|
|
"title": "칼로리 계산기 만들기",
|
|
"intro": [
|
|
"웹 애플리케이션을 코딩할 때 사용자의 입력을 받는 경우가 있습니다. 이 칼로리 카운터 워크숍에서는 사용자 입력의 유효성을 검증하고, 그 입력을 바탕으로 계산을 수행하며, 결과를 표시하도록 인터페이스를 동적으로 업데이트하는 연습을 하세요.",
|
|
"기본 정규표현식, 템플릿 리터럴, <code>addEventListener()</code> 메서드 등도 연습하세요."
|
|
]
|
|
},
|
|
"lab-customer-complaint-form": {
|
|
"title": "고객 불만 양식 만들기",
|
|
"intro": [
|
|
"이 실습에서는 자바스크립트를 사용해 고객 불만 접수 폼을 검증하세요.",
|
|
"폼 입력 검증, 오류 메시지 표시, 오류가 있을 경우 폼 제출을 막는 방법을 연습하세요."
|
|
]
|
|
},
|
|
"review-form-validation-with-javascript": {
|
|
"title": "자바스크립트를 이용한 폼 유효성 검사 복습",
|
|
"intro": [
|
|
"폼 검증에 관한 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>preventDefault()</code> 메서드, submit 이벤트 등 관련 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-form-validation-with-javascript": {
|
|
"title": "자바스크립트를 이용한 폼 유효성 검사 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 자바스크립트 폼 검증에 대해 학습한 내용을 확인하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-dates": {
|
|
"title": "날짜 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 자바스크립트 Date 객체에 대해 배우세요. 날짜를 다루는 메서드와 날짜 포맷 방법을 배우세요."
|
|
]
|
|
},
|
|
"lab-date-conversion": {
|
|
"title": "날짜 변환 프로그램 만들기",
|
|
"intro": [
|
|
"이 실습에서는 한 날짜 형식을 다른 형식으로 변환하는 프로그램을 만드세요."
|
|
]
|
|
},
|
|
"review-javascript-dates": {
|
|
"title": "자바스크립트 날짜 복습",
|
|
"intro": [
|
|
"날짜 다루기에 관한 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>Date()</code> 객체와 일반적인 메서드를 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-dates": {
|
|
"title": "자바스크립트 날짜 퀴즈",
|
|
"intro": ["이 퀴즈로 자바스크립트 날짜에 대한 학습 내용을 확인하세요."]
|
|
},
|
|
"lecture-working-with-audio-and-video": {
|
|
"title": "오디오 및 비디오 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 자바스크립트를 사용해 오디오 및 비디오 파일을 다루는 방법을 배우세요. <code>Audio</code> 및 <code>Video</code> 생성자, 이들의 메서드와 프로퍼티, 오디오/비디오 포맷과 코덱, <code>HTMLMediaElement</code> API 등을 배우세요."
|
|
]
|
|
},
|
|
"workshop-music-player": {
|
|
"title": "음악 플레이어 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 HTML, CSS, 자바스크립트를 사용해 기본 MP3 플레이어를 코딩하세요.",
|
|
"이 프로젝트는 오디오 재생 처리, 재생목록 관리, 재생/일시정지/다음/이전 기능 구현 등 기본 개념을 다루며, 현재 재생 중인 곡에 따라 UI를 동적으로 업데이트하는 방법도 연습하세요."
|
|
]
|
|
},
|
|
"review-javascript-audio-and-video": {
|
|
"title": "자바스크립트 오디오 및 비디오 복습",
|
|
"intro": [
|
|
"자바스크립트로 오디오와 비디오를 다루는 것에 관한 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>Audio</code> 생성자, <code>HTMLMediaElement</code> API 등 관련 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-audio-and-video": {
|
|
"title": "자바스크립트 오디오 및 비디오 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 자바스크립트 오디오 및 비디오에 관한 학습 내용을 확인하세요."
|
|
]
|
|
},
|
|
"lab-drum-machine": {
|
|
"title": "드럼 머신 만들기",
|
|
"intro": [
|
|
"이 실습에서는 <code>audio</code> 요소를 사용해 드럼 머신을 만드세요."
|
|
]
|
|
},
|
|
"lecture-working-with-maps-and-sets": {
|
|
"title": "Map과 Set 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 자바스크립트의 <code>Map</code>과 <code>Set</code>에 대해 배우세요. 또한 <code>WeakSet</code>과 <code>WeakMap</code>과의 차이점도 배우세요."
|
|
]
|
|
},
|
|
"workshop-plant-nursery-catalog": {
|
|
"title": "식물 묘목장 카탈로그 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 식물원 카탈로그를 만들어 Map과 Set 사용을 연습하세요."
|
|
]
|
|
},
|
|
"review-javascript-maps-and-sets": {
|
|
"title": "자바스크립트 Map과 Set 복습",
|
|
"intro": [
|
|
"자바스크립트 Map과 Set에 관한 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>Map</code> 및 <code>Set</code> 객체와 WeakSet, WeakMap 같은 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-maps-and-sets": {
|
|
"title": "자바스크립트 Map과 Set 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 자바스크립트 Map과 Set에 대한 학습 내용을 확인하세요."
|
|
]
|
|
},
|
|
"lab-voting-system": {
|
|
"title": "투표 시스템 만들기",
|
|
"intro": [
|
|
"이 실습에서는 Map과 Set을 사용해 투표 시스템을 만드세요.",
|
|
"<code>Map</code> 객체로 키-값 쌍을 저장하고 <code>Set</code> 객체로 유일한 값을 저장하는 방법을 연습하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-client-side-storage-and-crud-operations": {
|
|
"title": "클라이언트 측 저장소 및 CRUD 작업 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 클라이언트측 저장소와 CRUD 연산을 자바스크립트에서 다루는 법을 배우세요. <code>localStorage</code>와 <code>sessionStorage</code>의 메서드와 프로퍼티, 쿠키, Cache API, IndexedDB 등을 배우세요."
|
|
]
|
|
},
|
|
"workshop-todo-app": {
|
|
"title": "로컬 스토리지를 사용한 할 일 앱 만들기",
|
|
"intro": [
|
|
"로컬 스토리지는 웹 브라우저 기능으로, 웹 앱이 사용자의 브라우저에 키-값 쌍을 영구적으로 저장할 수 있게 합니다. 이를 통해 웹 앱은 한 세션 동안 데이터를 저장하고 이후 페이지 세션에서 이를 불러올 수 있습니다.",
|
|
"이 워크숍에서는 폼 입력 처리, 로컬 스토리지 관리, 작업에 대한 CRUD(생성, 읽기, 업데이트, 삭제) 연산 수행, 이벤트 리스너 구현, UI 요소 토글 방법을 배우세요."
|
|
]
|
|
},
|
|
"lab-bookmark-manager-app": {
|
|
"title": "북마크 관리자 앱 만들기",
|
|
"intro": [
|
|
"이 실습에서는 북마크 관리자 앱을 만드세요.",
|
|
"북마크를 저장하기 위해 로컬 스토리지를 활용하고, 북마크 추가, 삭제, 표시 방법을 연습하세요."
|
|
]
|
|
},
|
|
"review-local-storage-and-crud": {
|
|
"title": "로컬 스토리지 및 CRUD 복습",
|
|
"intro": [
|
|
"<code>localStorage</code> 관련 퀴즈를 보기 전에 개념을 먼저 복습하세요.",
|
|
"이 페이지를 열어 <code>localStorage</code> 프로퍼티, <code>sessionStorage</code> 프로퍼티 등 관련 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-local-storage-and-crud": {
|
|
"title": "로컬 스토리지 및 CRUD 퀴즈",
|
|
"intro": [
|
|
"로컬 스토리지와 CRUD에 대한 학습 내용을 이 퀴즈로 확인하세요."
|
|
]
|
|
},
|
|
"lecture-understanding-how-to-work-with-classes-in-javascript": {
|
|
"title": "자바스크립트에서 클래스 작업 이해하기",
|
|
"intro": [
|
|
"이 강의들에서는 자바스크립트의 클래스에 대해 배우세요. 상속, <code>this</code> 키워드, 정적 프로퍼티와 메서드 등을 배우세요."
|
|
]
|
|
},
|
|
"workshop-shopping-cart": {
|
|
"title": "장바구니 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 자바스크립트 클래스를 사용해 쇼핑카트를 만드세요.",
|
|
"<code>this</code> 키워드 사용법, 클래스 인스턴스 생성, 데이터 조작을 위한 메서드 구현 등을 연습하세요."
|
|
]
|
|
},
|
|
"lab-project-idea-board": {
|
|
"title": "프로젝트 아이디어 게시판 만들기",
|
|
"intro": [
|
|
"이 실습에서는 자바스크립트 OOP를 사용해 프로젝트 아이디어 보드를 만드세요.",
|
|
"클래스 생성, 클래스에 메서드 추가, 클래스 인스턴스 생성 방법을 연습하세요."
|
|
]
|
|
},
|
|
"review-javascript-classes": {
|
|
"title": "자바스크립트 클래스 복습",
|
|
"intro": [
|
|
"클래스 관련 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>this</code> 키워드, 클래스 상속 등 관련 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-classes": {
|
|
"title": "자바스크립트 클래스 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 자바스크립트 클래스에 대해 학습한 내용을 확인하세요."
|
|
]
|
|
},
|
|
"lab-bank-account-manager": {
|
|
"title": "은행 계좌 관리 프로그램 만들기",
|
|
"intro": [
|
|
"이 실습에서는 은행 계좌의 간단한 거래 관리 시스템을 만드세요."
|
|
]
|
|
},
|
|
"lecture-understanding-recursion-and-the-call-stack": {
|
|
"title": "재귀와 호출 스택 이해하기",
|
|
"intro": [
|
|
"이 강의에서는 재귀(recursion)와 호출 스택(call stack)에 대해 배우세요."
|
|
]
|
|
},
|
|
"workshop-countup": {
|
|
"title": "카운트업 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 1부터 주어진 숫자까지 카운트업하는 숫자 배열을 반환하는 함수를 만드세요."
|
|
]
|
|
},
|
|
"lab-countdown": {
|
|
"title": "카운트다운 만들기",
|
|
"intro": [
|
|
"이 실습에서는 주어진 숫자부터 1까지 카운트다운하는 숫자 배열을 반환하는 카운트다운 함수를 만드세요."
|
|
]
|
|
},
|
|
"lab-range-of-numbers": {
|
|
"title": "숫자 범위 생성기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 재귀를 사용해 지정한 범위의 숫자 배열을 생성하세요.",
|
|
"재귀 함수 호출, 기본 사례, 재귀로 배열을 만드는 연습을 하세요."
|
|
]
|
|
},
|
|
"workshop-decimal-to-binary-converter": {
|
|
"title": "십진수→이진수 변환기 만들기",
|
|
"intro": [
|
|
"재귀는 함수가 자기 자신을 호출하는 프로그래밍 개념입니다. 이를 통해 복잡한 문제를 더 단순한 하위 문제로 분해해 하위 문제가 해결 가능할 때까지 진행하세요.",
|
|
"이 워크숍에서는 자바스크립트를 사용해 십진수를 이진수로 변환하는 변환기를 만드세요. 재귀의 기본 개념을 연습하고 호출 스택을 탐구하며 애니메이션으로 재귀 과정을 시각화하세요."
|
|
]
|
|
},
|
|
"lab-permutation-generator": {
|
|
"title": "순열 생성기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 주어진 문자열의 모든 가능한 순열을 생성하는 순열 생성기를 만드세요."
|
|
]
|
|
},
|
|
"review-recursion": {
|
|
"title": "재귀 복습",
|
|
"intro": [
|
|
"재귀에 관한 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 재귀가 무엇이고 어디에 사용하는지 복습하세요."
|
|
]
|
|
},
|
|
"quiz-recursion": {
|
|
"title": "재귀 퀴즈",
|
|
"intro": ["이 퀴즈로 재귀에 대한 지식을 테스트하세요."]
|
|
},
|
|
"lecture-working-with-common-data-structures-js": {
|
|
"title": "일반 데이터 구조 작업하기",
|
|
"intro": [
|
|
"일반적인 데이터 구조와 자바스크립트에서 이를 다루는 방법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-linked-list-js": {
|
|
"title": "연결 리스트 만들기",
|
|
"intro": [
|
|
"앞선 강의들에서 몇 가지 일반 자료구조를 배웠습니다.",
|
|
"이 워크숍에서 자바스크립트를 사용해 연결 리스트를 만드세요."
|
|
]
|
|
},
|
|
"lab-linked-list-operations": {
|
|
"title": "연결 리스트 연산 구현",
|
|
"intro": [
|
|
"이 실습에서는 삽입, 삭제, 순회 같은 일반적인 연결 리스트 연산을 구현하세요."
|
|
]
|
|
},
|
|
"lab-implement-a-stack": {
|
|
"title": "스택 구현하기",
|
|
"intro": ["이 실습에서 함수로 스택 자료구조를 구현하세요."]
|
|
},
|
|
"lab-implement-a-queue": {
|
|
"title": "큐 구현하기",
|
|
"intro": ["이 실습에서는 함수를 사용해 큐 데이터 구조를 구현하세요."]
|
|
},
|
|
"review-data-structures-js": {
|
|
"title": "데이터 구조 복습",
|
|
"intro": [
|
|
"데이터 구조에 대해 퀴즈로 풀기 전에 지금까지 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 다양한 데이터 구조, 알고리즘, 시간 및 공간 복잡도, 빅오 표기법(Big O notation) 같은 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-data-structures-js": {
|
|
"title": "데이터 구조 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 자바스크립트의 데이터 구조에 대해 배운 내용을 테스트하세요."
|
|
]
|
|
},
|
|
"lecture-introduction-to-common-searching-and-sorting-algorithms": {
|
|
"title": "일반적인 탐색 및 정렬 알고리즘 소개",
|
|
"intro": [
|
|
"선형 탐색, 이진 탐색, 병합 정렬 등 기본 탐색·정렬 알고리즘에 대해 배우세요.",
|
|
"이 수업들은 알고리즘 구현, 시간·공간 복잡도 분석, 분할정복 패러다임을 다룹니다."
|
|
]
|
|
},
|
|
"workshop-binary-search-js": {
|
|
"title": "이진 탐색 알고리즘 구현하기",
|
|
"intro": [
|
|
"이진 탐색 알고리즘은 정렬된 목록에서 타겟 항목을 찾는 탐색 알고리즘입니다.",
|
|
"이 워크숍에서 이진 탐색 알고리즘을 구현하고 타겟을 찾기 위해 거친 경로를 반환하거나 'Value not found'를 반환하세요."
|
|
]
|
|
},
|
|
"workshop-merge-sort-js": {
|
|
"title": "병합 정렬 알고리즘 구현하기",
|
|
"intro": [
|
|
"병합 정렬 알고리즘은 분할정복 원리에 기반한 정렬 알고리즘입니다.",
|
|
"이 워크숍에서 무작위 숫자 목록을 정렬하기 위해 병합 정렬 알고리즘을 구현하세요."
|
|
]
|
|
},
|
|
"lab-bubble-sort-algorithm": {
|
|
"title": "버블 정렬 알고리즘 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 정수 배열을 오름차순으로 정렬하는 버블 정렬 알고리즘을 구현하세요."
|
|
]
|
|
},
|
|
"lab-selection-sort-js": {
|
|
"title": "선택 정렬 알고리즘 구현",
|
|
"intro": ["이 실습에서는 선택 정렬 알고리즘을 구현하세요."]
|
|
},
|
|
"lab-insertion-sort": {
|
|
"title": "삽입 정렬 알고리즘 구현",
|
|
"intro": [
|
|
"이 실습에서는 정수 배열을 오름차순으로 정렬하기 위해 삽입 정렬 알고리즘을 구현하세요."
|
|
]
|
|
},
|
|
"lab-quicksort-js": {
|
|
"title": "퀵소트 알고리즘 구현",
|
|
"intro": [
|
|
"이 실습에서는 정수 배열을 정렬하기 위해 퀵소트 알고리즘을 구현하세요."
|
|
]
|
|
},
|
|
"review-searching-and-sorting-algorithms-js": {
|
|
"title": "검색 및 정렬 알고리즘 복습",
|
|
"intro": [
|
|
"알고리즘 퀴즈를 보기 전에 탐색 및 정렬 알고리즘에 대해 배운 내용을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-searching-and-sorting-algorithms-js": {
|
|
"title": "검색 및 정렬 알고리즘 퀴즈",
|
|
"intro": ["이 퀴즈로 검색 및 정렬 알고리즘에 대한 지식을 테스트하세요."]
|
|
},
|
|
"lecture-understanding-graphs-and-trees-js": {
|
|
"title": "그래프와 트리 이해하기",
|
|
"intro": [
|
|
"이 수업에서는 그래프와 트리 같은 기본 데이터 구조와 컴퓨터과학에서의 실용적 응용을 배우세요."
|
|
]
|
|
},
|
|
"workshop-shortest-path-algorithm-js": {
|
|
"title": "최단 경로 알고리즘 구현하기",
|
|
"intro": [
|
|
"최단 경로 알고리즘은 가중 그래프에서 노드 간 최소 거리를 찾습니다.",
|
|
"이 워크숍에서 자바스크립트로 최단 경로 알고리즘을 구현해 최단 거리와 경로를 반환하세요."
|
|
]
|
|
},
|
|
"lab-adjacency-list-to-matrix-converter-js": {
|
|
"title": "인접 리스트를 행렬로 변환기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 그래프의 인접 리스트 표현을 인접 행렬(adjacency matrix) 표현으로 변환하는 함수를 구현하세요."
|
|
]
|
|
},
|
|
"workshop-breadth-first-search-js": {
|
|
"title": "너비우선 탐색 알고리즘 구현하기",
|
|
"intro": [
|
|
"이 워크숍에서 너비우선 탐색 알고리즘을 사용해 괄호의 모든 유효 조합을 생성하세요."
|
|
]
|
|
},
|
|
"lab-depth-first-search-js": {
|
|
"title": "깊이 우선 탐색 알고리즘 구현",
|
|
"intro": ["이 실습에서는 깊이 우선 탐색 알고리즘의 해법을 구현하세요."]
|
|
},
|
|
"lab-n-queens-problem-js": {
|
|
"title": "N-퀸 문제 구현",
|
|
"intro": ["이 실습에서는 N-퀸 문제의 해법을 구현하세요."]
|
|
},
|
|
"review-graphs-and-trees-js": {
|
|
"title": "그래프와 트리 복습",
|
|
"intro": [
|
|
"그래프와 트리 복습",
|
|
"그래프와 트리 퀴즈를 보기 전에 배운 내용을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-graph-and-trees-js": {
|
|
"title": "그래프와 트리 퀴즈",
|
|
"intro": [
|
|
"그래프와 트리 퀴즈",
|
|
"이 퀴즈로 그래프와 트리에 대해 학습한 내용을 테스트하세요."
|
|
]
|
|
},
|
|
"lecture-understanding-dynamic-programming-js": {
|
|
"title": "동적 프로그래밍 이해하기",
|
|
"intro": [
|
|
"이 강의에서는 복잡한 문제를 더 단순한 하위 문제로 분해해 효율적으로 해결하는 알고리즘 기법인 동적 프로그래밍을 배우게 됩니다."
|
|
]
|
|
},
|
|
"lab-nth-fibonacci-number-js": {
|
|
"title": "Nth 피보나치 수 계산기 만들기",
|
|
"intro": [
|
|
"이 실습에서 동적 프로그래밍을 연습하며 자바스크립트로 피보나치 수열 계산기를 구현하세요."
|
|
]
|
|
},
|
|
"review-dynamic-programming-js": {
|
|
"title": "동적 프로그래밍 복습",
|
|
"intro": [
|
|
"동적 프로그래밍에 대해 퀴즈를 보기 전에 지금까지 배운 내용을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-dynamic-programming-js": {
|
|
"title": "동적 프로그래밍 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 JavaScript의 동적 프로그래밍에 대해 배운 내용을 테스트하세요."
|
|
]
|
|
},
|
|
"lecture-understanding-functional-programming": {
|
|
"title": "함수형 프로그래밍 이해하기",
|
|
"intro": [
|
|
"이 강의들에서는 함수형 프로그래밍과 커링(currying)이라는 기법을 사용해 함수를 중첩하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-recipe-ingredient-converter": {
|
|
"title": "레시피 재료 변환기 만들기",
|
|
"intro": [
|
|
"이전 강의들에서 함수형 프로그래밍과 커링의 핵심 개념을 배웠습니다.",
|
|
"이제 커링과 함수형 프로그래밍에서 배운 내용을 레시피 재료 변환기 애플리케이션을 만들어 적용하세요."
|
|
]
|
|
},
|
|
"lab-optional-arguments-sum-function": {
|
|
"title": "선택적 인수 합 함수 만들기",
|
|
"intro": [
|
|
"이 실습에서는 최대 두 개의 인수를 받아 합을 계산하는 함수를 만들고, 인수가 하나만 주어지면 두 번째 숫자를 받을 때까지 기다리는 함수를 반환하세요."
|
|
]
|
|
},
|
|
"lab-sorting-visualizer": {
|
|
"title": "정렬 시각화 도구 만들기",
|
|
"intro": [
|
|
"이 실습에서는 자바스크립트를 사용해 버블 정렬 알고리즘이 정수 배열을 재정렬하는 과정을 시각화하세요."
|
|
]
|
|
},
|
|
"review-javascript-functional-programming": {
|
|
"title": "자바스크립트 함수형 프로그래밍 복습",
|
|
"intro": [
|
|
"함수형 프로그래밍에 관한 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 함수형 프로그래밍, 커링 등 관련 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-javascript-functional-programming": {
|
|
"title": "자바스크립트 함수형 프로그래밍 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 자바스크립트 함수형 프로그래밍에 관해 학습한 내용을 확인하세요."
|
|
]
|
|
},
|
|
"lecture-understanding-asynchronous-programming": {
|
|
"title": "비동기 프로그래밍 이해하기",
|
|
"intro": [
|
|
"이 강의들에서는 자바스크립트의 비동기 프로그래밍에 대해 배우세요. 동기와 비동기의 차이, <code>async</code> 키워드 동작 방식, <code>Fetch</code> API, 프로미스, <code>async/await</code>, <code>Geolocation</code> API 등을 배우세요."
|
|
]
|
|
},
|
|
"workshop-fcc-authors-page": {
|
|
"title": "fCC Authors 페이지 만들기",
|
|
"intro": [
|
|
"웹 개발에서 외부 API로부터 데이터를 가져온 후 비동기 자바스크립트로 처리하는 법을 배우는 것은 일반적인 작업입니다.",
|
|
"이 워크숍에서는 fetch 메서드 사용법을 연습하고, 가져온 데이터를 표시하도록 DOM을 동적으로 업데이트하며 결과를 배치 단위로 불러오도록 페이지네이션을 구현하세요."
|
|
]
|
|
},
|
|
"lab-fcc-forum-leaderboard": {
|
|
"title": "fCC 포럼 리더보드 만들기",
|
|
"intro": [
|
|
"이 실습에서는 비동기 자바스크립트를 연습하며 자체 freeCodeCamp 포럼 리더보드를 코딩하세요."
|
|
]
|
|
},
|
|
"review-asynchronous-javascript": {
|
|
"title": "비동기 JavaScript 복습",
|
|
"intro": [
|
|
"다가오는 퀴즈를 준비하려면 비동기 JavaScript 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-asynchronous-javascript": {
|
|
"title": "비동기 자바스크립트 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 비동기 자바스크립트에 대한 학습 내용을 확인하세요."
|
|
]
|
|
},
|
|
"lab-weather-app": {
|
|
"title": "날씨 앱 만들기",
|
|
"intro": [
|
|
"이 실습에서는 API를 사용하여 날씨 앱을 만들게 됩니다",
|
|
"API에서 데이터를 가져와 앱에 저장하고 표시하는 방법을 연습하세요."
|
|
]
|
|
},
|
|
"review-javascript": {
|
|
"title": "자바스크립트 복습",
|
|
"intro": [
|
|
"자바스크립트 준비 시험을 보기 전에 자바스크립트에 대해 배운 모든 내용을 복습하세요.",
|
|
"이 페이지를 열어 변수, 문자열, 불리언, 함수, 객체, 배열, 디버깅, DOM 작업 등 강의에서 배운 모든 개념을 복습하세요."
|
|
]
|
|
},
|
|
"exam-javascript-certification": {
|
|
"title": "자바스크립트 자격증 시험",
|
|
"intro": ["이 시험에 합격하면 자바스크립트 인증서를 받으세요."]
|
|
}
|
|
}
|
|
},
|
|
"front-end-development-libraries-v9": {
|
|
"title": "프론트엔드 개발 라이브러리 인증",
|
|
"intro": [
|
|
"이 과정에서는 개발자가 웹페이지를 만들 때 사용하는 라이브러리인 React, TypeScript 등을 배우세요.",
|
|
"프론트엔드 개발 라이브러리 인증을 취득하려면:",
|
|
"- 자격증 시험 응시 자격을 얻으려면 다섯 개의 필수 프로젝트를 완료하세요.",
|
|
"- 프론트엔드 개발 라이브러리 인증 시험에 합격하세요."
|
|
],
|
|
"chapters": {
|
|
"front-end-development-libraries": "프론트엔드 개발 라이브러리",
|
|
"front-end-development-libraries-certification-exam": "프론트엔드 개발 라이브러리 인증시험"
|
|
},
|
|
"modules": {
|
|
"react-fundamentals": "React 기초",
|
|
"react-state-hooks-and-routing": "React 상태, 훅, 라우팅",
|
|
"lab-currency-converter": "환율 변환기 만들기",
|
|
"lab-tic-tac-toe": "틱택토 게임 만들기",
|
|
"performance": "성능",
|
|
"testing": "테스팅",
|
|
"css-libraries-and-frameworks": "CSS 라이브러리와 프레임워크",
|
|
"data-visualization": "데이터 시각화와 D3",
|
|
"typescript-fundamentals": "TypeScript 기초",
|
|
"review-front-end-libraries": "프론트엔드 라이브러리 복습",
|
|
"front-end-development-libraries-certification-exam": "프론트엔드 개발 라이브러리 인증시험"
|
|
},
|
|
"module-intros": {
|
|
"data-visualization": {
|
|
"note": "2026년 예정",
|
|
"intro": [
|
|
"이 모듈에서는 데이터 시각화를 소개하고 D3 라이브러리를 다루는 방법을 배우세요."
|
|
]
|
|
},
|
|
"typescript-fundamentals": {
|
|
"note": "2026년 예정",
|
|
"intro": [
|
|
"이 모듈에서는 TypeScript를 소개합니다. TypeScript는 JavaScript의 상위집합으로 JavaScript 코드에 정적 타이핑을 추가할 수 있게 해줍니다. 제네릭, 타입 좁히기, TSX 등을 연습할 수 있는 워크숍과 실습을 만들고, 짧은 퀴즈로 TypeScript 기초 지식을 확인하세요."
|
|
]
|
|
},
|
|
"front-end-development-libraries-certification-exam": {
|
|
"note": "2026년 예정",
|
|
"intro": [
|
|
"이 강의들에서는 자바스크립트 라이브러리와 프레임워크를 소개합니다. 라이브러리와 프레임워크의 역할, 싱글페이지 애플리케이션(SPA) 관련 개념, 가장 인기 있는 프론트엔드 JavaScript 라이브러리인 React를 배우게 됩니다."
|
|
]
|
|
}
|
|
},
|
|
"blocks": {
|
|
"lecture-introduction-to-javascript-libraries-and-frameworks": {
|
|
"title": "JavaScript 라이브러리와 프레임워크 소개",
|
|
"intro": [
|
|
"이 강의들에서는 자바스크립트 라이브러리와 프레임워크를 소개합니다. 자바스크립트 라이브러리와 프레임워크의 역할, 단일 페이지 애플리케이션(SPA)과 그에 따른 문제, 그리고 가장 인기 있는 프론트엔드 자바스크립트 라이브러리인 React에 대해 배우게 됩니다."
|
|
]
|
|
},
|
|
"workshop-reusable-mega-navbar": {
|
|
"title": "재사용 가능한 메가 네브바 만들기",
|
|
"intro": [
|
|
"이전 레슨에서 React 컴포넌트 다루는 방법을 배웠습니다.",
|
|
"이 워크숍에서는 React로 재사용 가능한 Navbar 컴포넌트를 만들어 보세요."
|
|
]
|
|
},
|
|
"lab-reusable-footer": {
|
|
"title": "재사용 가능한 푸터 만들기",
|
|
"intro": [
|
|
"이 실습에서는 React를 사용해 재사용 가능한 푸터를 만들어 보세요."
|
|
]
|
|
},
|
|
"lecture-working-with-data-in-react": {
|
|
"title": "React에서 데이터 다루기",
|
|
"intro": [
|
|
"이 레슨들에서는 React에서 데이터 다루는 방법을 배우세요. <code>props</code> 전달, 조건부 렌더링, 리스트 렌더링, 인라인 스타일 사용법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-reusable-profile-card-component": {
|
|
"title": "재사용 가능한 프로필 카드 컴포넌트 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 프로필 카드 컴포넌트를 만들어 props를 다루는 방법을 연습하세요."
|
|
]
|
|
},
|
|
"lab-mood-board": {
|
|
"title": "무드 보드 만들기",
|
|
"intro": [
|
|
"이 실습에서는 React로 무드 보드를 만들어 보세요.",
|
|
"부모 컴포넌트에서 자식 컴포넌트로 props를 전달하는 방법을 연습하세요."
|
|
]
|
|
},
|
|
"review-react-basics": {
|
|
"title": "React 기초 복습",
|
|
"intro": ["다가오는 퀴즈를 준비하기 위해 기본 React 개념을 복습하세요."]
|
|
},
|
|
"quiz-react-basics": {
|
|
"title": "React 기초 퀴즈",
|
|
"intro": ["이 퀴즈로 React 기초 지식을 확인하세요."]
|
|
},
|
|
"lecture-working-with-state-and-responding-to-events-in-react": {
|
|
"title": "React에서 상태 다루기와 이벤트 응답",
|
|
"intro": [
|
|
"이 레슨들에서는 React에서 상태를 다루고 이벤트에 응답하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-toggle-text-app": {
|
|
"title": "텍스트 토글 앱",
|
|
"intro": [
|
|
"이 워크숍에서는 <code>useState()</code> 훅을 사용하여 화면에 표시되는 텍스트를 숨기고 표시하는 애플리케이션을 만들어 보세요."
|
|
]
|
|
},
|
|
"lab-color-picker": {
|
|
"title": "컬러 픽커 앱 만들기",
|
|
"intro": [
|
|
"이 실습에서는 컬러 픽커를 만들어 보세요.",
|
|
"상태와 훅을 사용해 요소의 프로퍼티를 관리하는 연습을 하세요."
|
|
]
|
|
},
|
|
"lecture-understanding-effects-and-referencing-values-in-react": {
|
|
"title": "Effect와 참조 값 이해하기",
|
|
"intro": ["이 레슨들에서는 React의 effect와 값 참조를 배우세요."]
|
|
},
|
|
"workshop-fruit-search-app": {
|
|
"title": "과일 검색 앱 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 <code>useEffect()</code> 훅을 사용하여 사용자 입력에 따라 API에서 과일 데이터를 가져와 결과를 동적으로 표시하는 애플리케이션을 만들어 보세요."
|
|
]
|
|
},
|
|
"lab-one-time-password-generator": {
|
|
"title": "일회용 비밀번호 생성기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 일회용 비밀번호 생성기를 만들어 보세요.",
|
|
"useEffect 훅을 사용해 타이머를 만들고 무작위 OTP를 생성하는 연습을 하세요."
|
|
]
|
|
},
|
|
"review-react-state-and-hooks": {
|
|
"title": "React 상태와 훅 복습",
|
|
"intro": [
|
|
"React 상태와 훅에 관한 퀴즈를 보기 전에 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 상태, 커스텀 훅 등 작업한 내용을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-react-state-and-hooks": {
|
|
"title": "React 상태와 훅 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 <code>useState</code>와 <code>useEffect</code> 훅에 대한 이해도를 확인하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-forms-in-react": {
|
|
"title": "React에서 폼 다루기",
|
|
"intro": ["이 레슨들에서는 React에서 폼을 다루는 방법을 배우세요."]
|
|
},
|
|
"workshop-superhero-application-form": {
|
|
"title": "슈퍼히어로 지원서 폼 만들기",
|
|
"intro": ["이 워크숍에서는 슈퍼히어로 지원서 폼을 만들어 보세요."]
|
|
},
|
|
"lab-event-rsvp": {
|
|
"title": "이벤트 RSVP 만들기",
|
|
"intro": [
|
|
"이 실습에서는 React로 이벤트 RSVP 폼을 만들어 보세요.",
|
|
"useState 훅을 사용해 폼 입력을 관리하고 사용자 응답을 표시하는 연습을 하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-data-fetching-and-memoization-in-react": {
|
|
"title": "React에서 데이터 페칭과 메모이제이션 다루기",
|
|
"intro": [
|
|
"이 레슨들에서는 React에서 데이터 페칭과 메모이제이션을 배우세요."
|
|
]
|
|
},
|
|
"workshop-shopping-list-app": {
|
|
"title": "쇼핑리스트 앱 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 <code>useMemo()</code>와 <code>useCallback()</code> 훅을 사용해 간단한 쇼핑리스트 앱을 만들어 보세요. 상태와 컴포넌트 라이프사이클에 대해 더 배우고, 메모이제이션을 사용해 리렌더링을 줄여 앱 성능을 향상시키는 방법을 익히세요."
|
|
]
|
|
},
|
|
"lecture-routing-react-frameworks-and-dependency-management-tools": {
|
|
"title": "라우팅, React 프레임워크와 의존성 관리 도구",
|
|
"intro": [
|
|
"이 레슨들에서는 React의 라우팅, React 프레임워크, 의존성 관리 도구를 배우세요."
|
|
]
|
|
},
|
|
"lecture-react-strategies-and-debugging": {
|
|
"title": "React 전략과 디버깅",
|
|
"intro": [
|
|
"이 레슨들에서는 React에서 다양한 전략과 디버깅 방법을 배우세요."
|
|
]
|
|
},
|
|
"review-react-forms-data-fetching-and-routing": {
|
|
"title": "React 폼, 데이터 페칭 및 라우팅 복습",
|
|
"intro": [
|
|
"React 폼, 데이터 페칭 및 라우팅 퀴즈를 보기 전에 지금까지 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 라우팅, 폼, 상태관리, prop 드릴링, 데이터 페칭 등 가르친 개념을 모두 복습하세요."
|
|
]
|
|
},
|
|
"quiz-react-forms-data-fetching-and-routing": {
|
|
"title": "React 폼, 데이터 페칭 및 라우팅 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 라우팅, 폼, 데이터 페칭에 관한 학습 내용을 확인하세요."
|
|
]
|
|
},
|
|
"lab-currency-converter": {
|
|
"title": "환율 변환기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 환율 변환기 앱을 만들어 보세요.",
|
|
"React 상태, 메모이제이션, 제어 컴포넌트를 사용해 통화 간 변환을 구현하세요."
|
|
]
|
|
},
|
|
"lab-tic-tac-toe": {
|
|
"title": "틱택토 게임 만들기",
|
|
"intro": [
|
|
"이 실습에서는 React로 틱택토 게임을 만들어 보세요.",
|
|
"상태 관리, 사용자 상호작용 처리, UI 동적 업데이트를 연습하세요."
|
|
]
|
|
},
|
|
"lecture-understanding-performance-in-web-applications": {
|
|
"title": "웹 애플리케이션 성능 이해하기",
|
|
"intro": ["이 레슨들에서는 웹 애플리케이션 성능을 배우세요."]
|
|
},
|
|
"review-web-performance": {
|
|
"title": "웹 성능 복습",
|
|
"intro": [
|
|
"웹 성능 퀴즈를 보기 전에 지금까지 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 INP, 성능 측정 핵심 지표, Performance Web API 등 가르친 모든 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-web-performance": {
|
|
"title": "웹 성능 퀴즈",
|
|
"intro": ["이 퀴즈로 웹 성능에 대해 배운 내용을 확인하세요."]
|
|
},
|
|
"lecture-understanding-the-different-types-of-testing": {
|
|
"title": "다양한 테스트 유형 이해하기",
|
|
"intro": ["이 레슨들에서는 다양한 테스트 유형을 배우세요."]
|
|
},
|
|
"review-testing": {
|
|
"title": "테스팅 복습",
|
|
"intro": [
|
|
"테스팅 퀴즈를 보기 전에 지금까지 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 단위테스트, 엔드투엔드 테스트, 기능 테스트 등 가르친 개념을 모두 복습하세요."
|
|
]
|
|
},
|
|
"quiz-testing": {
|
|
"title": "테스팅 퀴즈",
|
|
"intro": ["이 퀴즈로 테스팅에 대해 배운 내용을 확인하세요."]
|
|
},
|
|
"lecture-working-with-css-libraries-and-frameworks": {
|
|
"title": "CSS 라이브러리와 프레임워크 다루기",
|
|
"intro": [
|
|
"이 레슨들에서는 CSS 라이브러리와 프레임워크를 다루는 방법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-error-message-component": {
|
|
"title": "오류 메시지 컴포넌트 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 Tailwind CSS로 오류 메시지 컴포넌트를 만들어 Tailwind의 기초를 배우세요."
|
|
]
|
|
},
|
|
"workshop-tailwind-cta-component": {
|
|
"title": "CTA 컴포넌트 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 Tailwind CSS로 콜투액션(CTA) 컴포넌트를 만들어 보세요."
|
|
]
|
|
},
|
|
"workshop-tailwind-pricing-component": {
|
|
"title": "가격표 컴포넌트 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 Tailwind CSS로 가격표 컴포넌트를 만들어 보세요.",
|
|
"Tailwind CSS의 그리드 유틸리티 클래스를 사용해 보는 연습을 하세요."
|
|
]
|
|
},
|
|
"lab-music-shopping-cart-page": {
|
|
"title": "음악 쇼핑카트 페이지 만들기",
|
|
"intro": [
|
|
"이 실습에서는 Tailwind CSS로 음악 쇼핑카트 페이지를 만들어 보세요.",
|
|
"Flexbox 레이아웃, 색상, 브레이크포인트 등 Tailwind 유틸리티 클래스를 사용하는 연습을 하세요."
|
|
]
|
|
},
|
|
"lab-photography-exhibit": {
|
|
"title": "사진 전시회 디자인하기",
|
|
"intro": [
|
|
"이 실습에서는 Tailwind CSS로 사진 전시회 웹페이지를 디자인하는 연습을 하세요."
|
|
]
|
|
},
|
|
"review-css-libraries-and-frameworks": {
|
|
"title": "CSS 라이브러리와 프레임워크 복습",
|
|
"intro": [
|
|
"CSS 라이브러리와 프레임워크 퀴즈를 보기 전에 지금까지 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 CSS 프레임워크, CSS 전처리기, Sass 등 가르친 모든 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-libraries-and-frameworks": {
|
|
"title": "CSS 라이브러리와 프레임워크 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 CSS 라이브러리와 프레임워크에 대해 배운 내용을 확인하세요."
|
|
]
|
|
},
|
|
"lecture-introduction-to-data-visualization": {
|
|
"title": "데이터 시각화 소개",
|
|
"intro": ["이 수업들에서 기본 데이터 시각화 개념을 배우세요."]
|
|
},
|
|
"lab-bar-chart": {
|
|
"title": "막대 그래프 만들기",
|
|
"intro": ["이 실습에서 d3를 사용해 막대 그래프를 만드세요."]
|
|
},
|
|
"lab-scatterplot-graph": {
|
|
"title": "산점도 그래프 만들기",
|
|
"intro": [
|
|
"이 실습에서는 제공된 데이터셋을 사용해 d3 산점도(scatterplot) 그래프를 만드세요."
|
|
]
|
|
},
|
|
"lecture-introduction-to-typescript": {
|
|
"title": "TypeScript 소개",
|
|
"intro": [
|
|
"이 레슨들에서는 TypeScript가 무엇인지와 사용 방법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-type-safe-user-profile": {
|
|
"title": "타입 안전한 사용자 프로필 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 사용자 프로필을 구축하면서 타입 주석, 배열 타입, 객체 타입 등을 다루는 연습을 하게 됩니다."
|
|
]
|
|
},
|
|
"workshop-type-safe-math-toolkit": {
|
|
"title": "Build a Type Safe Math Toolkit",
|
|
"intro": [
|
|
"In this workshop, you will practice typing functions by building a math toolkit project."
|
|
]
|
|
},
|
|
"lecture-understanding-type-composition": {
|
|
"title": "타입 합성 이해하기",
|
|
"intro": [
|
|
"이 강의들에서는 유니언 타입, 인터페이스, void 타입 등 타입 관련 작업 방법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"workshop-shape-manager": {
|
|
"title": "Build a Shape Manager",
|
|
"intro": [
|
|
"In this workshop, you will practice basic TypeScript features like types and interfaces by building a shape manager program."
|
|
]
|
|
},
|
|
"lab-motorcycle-shop": {
|
|
"title": "Build a Motorcycle Shop",
|
|
"intro": [
|
|
"For this lab, you will use TypeScript to build a Motorcycle Shop."
|
|
]
|
|
},
|
|
"lecture-working-with-generics-and-type-narrowing": {
|
|
"title": "제네릭과 타입 좁히기 다루기",
|
|
"intro": [
|
|
"이 레슨들에서는 TypeScript의 제네릭과 타입 좁히기를 배우세요."
|
|
]
|
|
},
|
|
"workshop-bug-emoji-picker": {
|
|
"title": "Build a Bug Emoji Picker",
|
|
"intro": [
|
|
"In this workshop, you will learn about TypeScript abstract classes and generics by building a bug species selector that displays different bug emojis."
|
|
]
|
|
},
|
|
"lab-product-showcase": {
|
|
"title": "Build a Product Showcase",
|
|
"intro": [
|
|
"In this lab, you will practice generics and type narrowing in TypeScript."
|
|
]
|
|
},
|
|
"lecture-working-with-typescript-configuration-files": {
|
|
"title": "TypeScript 구성파일 다루기",
|
|
"intro": ["이 레슨에서는 TypeScript 구성파일과 사용 방법을 배우세요."]
|
|
},
|
|
"workshop-fortune-teller-app": {
|
|
"title": "Build a Fortune Telling App",
|
|
"intro": [
|
|
"In this workshop, you will continue to practice working with TypeScript by building a fortune telling app."
|
|
]
|
|
},
|
|
"lab-flashcard-quiz-app": {
|
|
"title": "Build a Flashcard Quiz App",
|
|
"intro": [
|
|
"In this lab, you will practice using TypeScript by building a flashcard quiz app."
|
|
]
|
|
},
|
|
"lab-digital-pet-game": {
|
|
"title": "Build a Digital Pet Game",
|
|
"intro": [
|
|
"In this lab, you'll practice what you learned about Typescript and React by building a digital pet game."
|
|
]
|
|
},
|
|
"review-typescript": {
|
|
"title": "TypeScript 복습",
|
|
"intro": [
|
|
"TypeScript 퀴즈를 보기 전에 지금까지 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 TypeScript의 데이터 타입, 제네릭, 타입 좁히기 등 가르친 개념을 모두 복습하세요."
|
|
]
|
|
},
|
|
"quiz-typescript": {
|
|
"title": "TypeScript 퀴즈",
|
|
"intro": ["이 퀴즈로 TypeScript 학습 내용을 확인하세요."]
|
|
},
|
|
"review-front-end-libraries": {
|
|
"title": "프론트엔드 라이브러리 복습",
|
|
"intro": [
|
|
"다가오는 퀴즈를 대비해 프론트엔드 라이브러리 개념을 복습하세요."
|
|
]
|
|
},
|
|
"exam-front-end-development-libraries-certification": {
|
|
"title": "프론트엔드 개발 라이브러리 인증시험",
|
|
"intro": ["이 시험에 합격해 프론트엔드 개발 라이브러리 인증을 받으세요"]
|
|
}
|
|
}
|
|
},
|
|
"python-v9": {
|
|
"title": "Python 자격증",
|
|
"intro": [
|
|
"이 과정에서는 Python 프로그래밍 기초를 가르칩니다.",
|
|
"Python 자격증을 취득하려면:",
|
|
"- 자격증 시험 응시 자격을 얻으려면 다섯 개의 필수 프로젝트를 완료하세요.",
|
|
"- Python 자격증 시험에 합격하세요."
|
|
],
|
|
"chapters": {
|
|
"python": "Python",
|
|
"python-certification-exam": "Python 자격증 시험"
|
|
},
|
|
"modules": {
|
|
"python-basics": "Python 기초",
|
|
"python-loops-and-sequences": "루프와 시퀀스",
|
|
"python-dictionaries-and-sets": "딕셔너리와 세트",
|
|
"lab-user-configuration-manager": "사용자 구성 관리자 만들기",
|
|
"python-error-handling": "오류 처리",
|
|
"python-classes-and-objects": "클래스와 객체",
|
|
"lab-budget-app": "예산 앱 만들기",
|
|
"python-object-oriented-programming": "객체지향 프로그래밍 (OOP)",
|
|
"lab-polygon-area-calculator": "다각형 면적 계산기 만들기",
|
|
"python-linear-data-structures": "선형 자료구조",
|
|
"lab-hash-table": "해시 테이블 만들기",
|
|
"python-algorithms": "알고리즘",
|
|
"lab-tower-of-hanoi": "하노이 탑 알고리즘 구현하기",
|
|
"python-graphs-and-trees": "그래프와 트리",
|
|
"python-dynamic-programming": "동적 계획법",
|
|
"review-python": "Python 복습",
|
|
"python-certification-exam": "Python 자격증 시험"
|
|
},
|
|
"blocks": {
|
|
"lecture-introduction-to-python": {
|
|
"title": "파이썬 소개",
|
|
"intro": [
|
|
"이 강의들에서 Python이 무엇인지와 개발 환경 설정 방법을 배우세요."
|
|
]
|
|
},
|
|
"lecture-understanding-variables-and-data-types": {
|
|
"title": "변수와 데이터 타입 이해하기",
|
|
"intro": ["이 수업들에서 Python의 변수와 데이터 타입을 배우세요."]
|
|
},
|
|
"workshop-report-card-printer": {
|
|
"title": "성적표 출력기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 Python의 원시 데이터 타입을 다루는 성적표 출력기를 만드세요."
|
|
]
|
|
},
|
|
"lecture-introduction-to-python-strings": {
|
|
"title": "문자열 소개",
|
|
"intro": ["이 수업들에서 Python의 문자열에 대해 배우세요."]
|
|
},
|
|
"workshop-employee-profile-generator": {
|
|
"title": "직원 프로필 생성기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 문자열 조작의 기초를 연습하며 포맷된 직원 배지를 생성하고 직원 코드를 분석하는 도구를 만드세요."
|
|
]
|
|
},
|
|
"lecture-numbers-and-mathematical-operations": {
|
|
"title": "숫자와 산수 연산",
|
|
"intro": ["이 수업들에서 Python의 숫자와 산수 연산에 대해 배우세요."]
|
|
},
|
|
"workshop-bill-splitter": {
|
|
"title": "계산기 분할기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 Python에서 숫자와 수학 연산을 다루는 연습을 위해 계산기 분할기(bill splitter)를 만드세요"
|
|
]
|
|
},
|
|
"lecture-booleans-and-conditionals": {
|
|
"title": "불리언과 조건문",
|
|
"intro": ["이 수업들에서 Python의 불리언과 조건문을 배우세요."]
|
|
},
|
|
"workshop-movie-ticket-booking-calculator": {
|
|
"title": "영화 티켓 예매 계산기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 불리언과 조건문을 사용해 영화 티켓 예매 계산기를 만드세요."
|
|
]
|
|
},
|
|
"lab-travel-weather-planner": {
|
|
"title": "여행 날씨 플래너 만들기",
|
|
"intro": ["이 실습에서는 조건문을 사용해 여행 날씨 플래너를 만드세요."]
|
|
},
|
|
"lecture-understanding-functions-and-scope": {
|
|
"title": "함수와 스코프 이해하기",
|
|
"intro": ["이 수업들에서 Python의 함수와 스코프를 배우세요."]
|
|
},
|
|
"lab-discount-calculator": {
|
|
"title": "할인 적용 함수 만들기",
|
|
"intro": [
|
|
"이 실습에서는 가격에 할인을 적용하는 계산기를 만들어 기본 Python을 연습하세요."
|
|
]
|
|
},
|
|
"workshop-caesar-cipher": {
|
|
"title": "시저 암호 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 문자열, 조건문, 함수 등 기본 Python 개념을 사용해 시저 암호를 만들어 보세요."
|
|
]
|
|
},
|
|
"lab-rpg-character": {
|
|
"title": "RPG 캐릭터 만들기",
|
|
"intro": ["이 실습에서는 RPG 캐릭터를 만들어 기본 Python을 연습하세요."]
|
|
},
|
|
"review-python-basics": {
|
|
"title": "Python 기초 복습",
|
|
"intro": [
|
|
"Python 기초 퀴즈를 보기 전에 배운 내용을 복습하세요.",
|
|
"이 복습 페이지에서는 문자열, 함수, 비교 연산자 등 작업한 내용을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-python-basics": {
|
|
"title": "Python 기초 퀴즈",
|
|
"intro": ["이 퀴즈로 Python 기초 학습 내용을 확인하세요."]
|
|
},
|
|
"lecture-working-with-loops-and-sequences": {
|
|
"title": "루프와 시퀀스 다루기",
|
|
"intro": ["이 강의들에서 루프와 시퀀스 다루기를 배우세요."]
|
|
},
|
|
"workshop-pin-extractor": {
|
|
"title": "핀 추출기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 시에 숨겨진 비밀 핀을 추출하는 함수를 만들어 보세요."
|
|
]
|
|
},
|
|
"lab-number-pattern-generator": {
|
|
"title": "숫자 패턴 생성기 만들기",
|
|
"intro": ["이 실습에서는 숫자 패턴 생성기를 만들어 보세요."]
|
|
},
|
|
"review-loops-and-sequences": {
|
|
"title": "루프와 시퀀스 복습",
|
|
"intro": [
|
|
"루프와 시퀀스 퀴즈를 보기 전에 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 루프, 리스트, 튜플 및 자주 쓰이는 메서드에 관한 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-loops-and-sequences": {
|
|
"title": "루프와 시퀀스 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 Python의 루프와 시퀀스에 대해 배운 내용을 확인하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-dictionaries-and-sets": {
|
|
"title": "딕셔너리와 세트 다루기",
|
|
"intro": ["이 레슨들에서는 딕셔너리와 세트를 다루는 방법을 배우세요."]
|
|
},
|
|
"lecture-working-with-modules": {
|
|
"title": "모듈 다루기",
|
|
"intro": ["이 레슨들에서는 모듈을 다루는 방법을 배우세요."]
|
|
},
|
|
"workshop-medical-data-validator": {
|
|
"title": "의료 데이터 검증기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 딕셔너리와 세트를 사용해 의료 데이터 모음을 검증하는 연습을 하세요."
|
|
]
|
|
},
|
|
"review-dictionaries-and-sets": {
|
|
"title": "딕셔너리와 세트 복습",
|
|
"intro": [
|
|
"딕셔너리와 세트 퀴즈를 보기 전에 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 딕셔너리, 세트, 모듈 임포트 방법 관련 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-dictionaries-and-sets": {
|
|
"title": "딕셔너리와 세트 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 Python의 딕셔너리와 세트에 대해 배운 내용을 확인하세요."
|
|
]
|
|
},
|
|
"lab-user-configuration-manager": {
|
|
"title": "사용자 구성 관리자 만들기",
|
|
"intro": ["이 실습에서는 Python의 딕셔너리를 다루는 연습을 하세요."]
|
|
},
|
|
"lecture-understanding-error-handling": {
|
|
"title": "오류 처리 이해하기",
|
|
"intro": [
|
|
"이 레슨들에서는 Python의 오류 처리에 대해 배우세요. 다양한 오류 유형, 좋은 디버깅 관행, 예외가 무엇인지, 예외 처리 방법을 배우세요."
|
|
]
|
|
},
|
|
"lab-isbn-validator": {
|
|
"title": "ISBN 검증기 디버그",
|
|
"intro": [
|
|
"이 실습에서는 버그가 있는 앱으로 시작해 버그를 찾아 수정하여 정상 동작하도록 만드세요."
|
|
]
|
|
},
|
|
"review-error-handling": {
|
|
"title": "오류 처리 복습",
|
|
"intro": ["오류 처리 퀴즈를 보기 전에 배운 내용을 복습하세요."]
|
|
},
|
|
"quiz-error-handling": {
|
|
"title": "오류 처리 퀴즈",
|
|
"intro": ["이 퀴즈로 Python의 오류 처리에 대해 배운 내용을 확인하세요."]
|
|
},
|
|
"lecture-classes-and-objects": {
|
|
"title": "클래스와 객체",
|
|
"intro": ["이 강의들에서 클래스와 객체에 대해 배우세요."]
|
|
},
|
|
"workshop-musical-instrument-inventory": {
|
|
"title": "악기 재고 관리 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 클래스를 사용해 간단한 악기 재고 관리 시스템을 만들어 클래스, 객체, 메서드를 배우세요."
|
|
]
|
|
},
|
|
"lab-planet-class": {
|
|
"title": "Planet 클래스 만들기",
|
|
"intro": ["이 실습에서는 행성을 나타내는 클래스를 만드세요."]
|
|
},
|
|
"workshop-email-simulator": {
|
|
"title": "이메일 시뮬레이터 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 클래스를 구현해 서로 다른 사용자 간 이메일 전송, 수신, 관리를 시뮬레이션하는 이메일 시뮬레이터를 만들어 보세요."
|
|
]
|
|
},
|
|
"review-classes-and-objects": {
|
|
"title": "클래스와 객체 복습",
|
|
"intro": [
|
|
"클래스와 객체 퀴즈를 보기 전에 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 클래스 작동 방식, 객체, 메서드, 속성, 특수 메서드 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-classes-and-objects": {
|
|
"title": "클래스와 객체 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 Python의 클래스와 객체에 대해 배운 내용을 확인하세요."
|
|
]
|
|
},
|
|
"lab-budget-app": {
|
|
"title": "예산 앱 만들기",
|
|
"intro": [
|
|
"이 실습에서는 예산 앱을 만들고 해당 클래스와 메서드를 작성하는 연습을 하세요."
|
|
]
|
|
},
|
|
"lecture-understanding-object-oriented-programming-and-encapsulation": {
|
|
"title": "객체지향 프로그래밍과 캡슐화 이해하기",
|
|
"intro": ["이 강의들에서 객체지향 프로그래밍과 캡슐화 이해를 배우세요."]
|
|
},
|
|
"workshop-salary-tracker": {
|
|
"title": "급여 추적기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 캡슐화, 속성 및 기타 OOP 개념을 연습하며 직원 급여 추적 시스템을 만들어 보세요."
|
|
]
|
|
},
|
|
"lab-game-character-stats": {
|
|
"title": "게임 캐릭터 능력치 추적기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 객체지향 프로그래밍으로 다양한 능력치를 가진 게임 캐릭터를 만드세요."
|
|
]
|
|
},
|
|
"lecture-understanding-inheritance-and-polymorphism": {
|
|
"title": "상속과 다형성 이해하기",
|
|
"intro": ["이 강의들에서 상속과 다형성 이해를 배우세요."]
|
|
},
|
|
"workshop-media-catalogue": {
|
|
"title": "미디어 카탈로그 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 객체지향 원칙을 사용해 미디어 카탈로그 애플리케이션을 만들어 보세요."
|
|
]
|
|
},
|
|
"lecture-understanding-abstraction": {
|
|
"title": "추상화 이해하기",
|
|
"intro": ["이 강의들에서 추상화 이해를 배우세요."]
|
|
},
|
|
"workshop-discount-calculator": {
|
|
"title": "할인 계산기 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 추상 기본 클래스를 통해 유연한 할인 가격 계산기를 만들어 여러 할인 알고리즘을 핵심 로직을 수정하지 않고 교체해 적용하는 연습을 하세요."
|
|
]
|
|
},
|
|
"lab-player-interface": {
|
|
"title": "플레이어 인터페이스 만들기",
|
|
"intro": [
|
|
"이 실습에서는 <code>abc</code> 모듈을 사용해 플레이어 인터페이스를 만드세요."
|
|
]
|
|
},
|
|
"review-object-oriented-programming": {
|
|
"title": "객체지향 프로그래밍 복습",
|
|
"intro": [
|
|
"객체지향 프로그래밍 퀴즈를 보기 전에 배운 내용을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-object-oriented-programming": {
|
|
"title": "객체지향 프로그래밍 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 Python의 객체지향 프로그래밍에 대해 배운 내용을 확인하세요."
|
|
]
|
|
},
|
|
"lab-polygon-area-calculator": {
|
|
"title": "다각형 면적 계산기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 객체지향 프로그래밍을 사용해 정사각형, 직사각형 등 다양한 다각형의 면적을 계산하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-common-data-structures": {
|
|
"title": "일반 자료구조 다루기",
|
|
"intro": ["이 강의들에서 일반 자료구조를 다루는 방법을 배우세요."]
|
|
},
|
|
"workshop-linked-list-class": {
|
|
"title": "연결 리스트 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 자료구조를 연습하며 연결 리스트를 만들어 보세요."
|
|
]
|
|
},
|
|
"review-data-structures": {
|
|
"title": "자료구조 복습",
|
|
"intro": [
|
|
"자료구조 퀴즈를 보기 전에 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 다양한 자료구조, 알고리즘, 시간 및 공간 복잡도, 빅오 표기법 등을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-data-structures": {
|
|
"title": "자료구조 퀴즈",
|
|
"intro": ["이 퀴즈로 Python의 자료구조에 대해 배운 내용을 확인하세요."]
|
|
},
|
|
"lab-hash-table": {
|
|
"title": "해시 테이블 만들기",
|
|
"intro": [
|
|
"해시 테이블은 키-값 쌍을 저장하고 빠른 조회에 최적화된 자료구조입니다.",
|
|
"이 실습에서는 자료구조 지식을 사용해 해시 테이블을 구현하세요."
|
|
]
|
|
},
|
|
"lecture-searching-and-sorting-algorithms": {
|
|
"title": "검색과 정렬 알고리즘",
|
|
"intro": [
|
|
"선형 탐색, 이진 탐색, 병합 정렬 등 기본 검색 및 정렬 알고리즘을 배우세요.",
|
|
"이 레슨들에서는 알고리즘 구현, 시간 및 공간 복잡도 분석, 분할정복 패러다임을 다룹니다."
|
|
]
|
|
},
|
|
"workshop-binary-search": {
|
|
"title": "이진 탐색 알고리즘 구현하기",
|
|
"intro": [
|
|
"이진 탐색 알고리즘은 정렬된 리스트에서 목표 항목을 찾는 검색 알고리즘입니다.",
|
|
"이 워크숍에서는 이진 탐색 알고리즘을 구현하고 목표를 찾기 위해 거친 경로를 반환하거나 'Value not found'를 반환하세요."
|
|
]
|
|
},
|
|
"lab-bisection-method": {
|
|
"title": "이분법 메서드 구현하기",
|
|
"intro": ["이 실습에서는 이분법을 구현해 수의 제곱근을 찾으세요."]
|
|
},
|
|
"workshop-merge-sort": {
|
|
"title": "병합 정렬 알고리즘 구현하기",
|
|
"intro": [
|
|
"병합 정렬 알고리즘은 분할정복 원칙에 기반한 정렬 알고리즘입니다.",
|
|
"이 워크숍에서는 무작위 수 리스트를 정렬하기 위해 병합 정렬 알고리즘을 구현하세요."
|
|
]
|
|
},
|
|
"lab-quicksort": {
|
|
"title": "퀵소트 알고리즘 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 정수 리스트를 정렬하기 위해 퀵소트 알고리즘을 구현하세요."
|
|
]
|
|
},
|
|
"lab-selection-sort": {
|
|
"title": "선택 정렬 알고리즘 구현하기",
|
|
"intro": ["이 실습에서는 선택 정렬 알고리즘을 구현하세요."]
|
|
},
|
|
"lab-luhn-algorithm": {
|
|
"title": "Luhn 알고리즘 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 신용카드 번호와 같은 식별번호를 검증하기 위해 Luhn 알고리즘을 구현하세요."
|
|
]
|
|
},
|
|
"review-searching-and-sorting-algorithms": {
|
|
"title": "검색과 정렬 알고리즘 복습",
|
|
"intro": [
|
|
"검색과 정렬 알고리즘 퀴즈를 보기 전에 배운 내용을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-searching-and-sorting-algorithms": {
|
|
"title": "검색과 정렬 알고리즘 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 Python의 검색과 정렬 알고리즘에 대해 배운 내용을 확인하세요."
|
|
]
|
|
},
|
|
"lab-tower-of-hanoi": {
|
|
"title": "하노이 탑 알고리즘 구현하기",
|
|
"intro": [
|
|
"이 실습에서는 하노이 탑 퍼즐을 해결하는 알고리즘을 구현하세요."
|
|
]
|
|
},
|
|
"lecture-understanding-graphs-and-trees": {
|
|
"title": "그래프와 트리 이해하기",
|
|
"intro": [
|
|
"이 레슨에서는 그래프, 트리 같은 기본 자료구조와 컴퓨터과학에서의 실용적 응용을 배우세요."
|
|
]
|
|
},
|
|
"workshop-shortest-path-algorithm": {
|
|
"title": "최단 경로 알고리즘 구현하기",
|
|
"intro": [
|
|
"이 워크숍에서는 그래프에서 두 노드 간 최단 경로를 찾는 알고리즘을 구현하세요."
|
|
]
|
|
},
|
|
"lab-adjacency-list-to-matrix-converter": {
|
|
"title": "인접 리스트를 행렬로 변환하는 도구 만들기",
|
|
"intro": [
|
|
"이 실습에서는 그래프의 인접 리스트 표현을 인접 행렬 표현으로 변환하는 함수를 구현하세요."
|
|
]
|
|
},
|
|
"workshop-breadth-first-search": {
|
|
"title": "너비우선탐색 알고리즘 구현하기",
|
|
"intro": [
|
|
"이 워크숍에서는 너비우선탐색 알고리즘을 사용해 모든 유효한 괄호 조합을 생성하세요."
|
|
]
|
|
},
|
|
"lab-depth-first-search": {
|
|
"title": "깊이우선탐색 알고리즘 구현하기",
|
|
"intro": ["이 실습에서는 깊이우선탐색 알고리즘을 구현하세요."]
|
|
},
|
|
"lab-n-queens-problem": {
|
|
"title": "N-퀸 문제 구현하기",
|
|
"intro": ["이 실습에서는 N-퀸 문제의 해법을 구현하세요."]
|
|
},
|
|
"review-graphs-and-trees": {
|
|
"title": "그래프와 트리 복습",
|
|
"intro": ["그래프와 트리 퀴즈를 보기 전에 배운 내용을 복습하세요."]
|
|
},
|
|
"quiz-graphs-and-trees": {
|
|
"title": "그래프와 트리 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 Python의 그래프와 트리에 대해 배운 내용을 확인하세요."
|
|
]
|
|
},
|
|
"lecture-understanding-dynamic-programming": {
|
|
"title": "동적 계획법 이해하기",
|
|
"intro": [
|
|
"이 레슨에서는 동적 계획법을 배우세요. 복잡한 문제를 더 단순한 하위문제들로 분해해 효율적으로 해결하는 알고리즘 기법입니다."
|
|
]
|
|
},
|
|
"lab-nth-fibonacci-number": {
|
|
"title": "Nth 피보나치 수 계산기 만들기",
|
|
"intro": [
|
|
"이 실습에서는 동적 계획법 접근법을 사용해 피보나치 수열 계산기를 구현하세요."
|
|
]
|
|
},
|
|
"review-dynamic-programming": {
|
|
"title": "동적 계획법 복습",
|
|
"intro": ["동적 계획법 퀴즈를 보기 전에 배운 내용을 복습하세요."]
|
|
},
|
|
"quiz-dynamic-programming": {
|
|
"title": "동적 계획법 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 Python의 동적 계획법에 대해 배운 내용을 확인하세요."
|
|
]
|
|
},
|
|
"review-python": {
|
|
"title": "Python 복습",
|
|
"intro": ["다가오는 시험을 준비하도록 Python 개념을 복습하세요."]
|
|
},
|
|
"exam-python-certification": {
|
|
"title": "Python 자격증 시험",
|
|
"intro": ["이 시험에 합격해 Python 자격증을 취득하세요."]
|
|
}
|
|
}
|
|
},
|
|
"relational-databases-v9": {
|
|
"title": "관계형 데이터베이스 자격증",
|
|
"intro": [
|
|
"이 과정에서는 관계형 데이터베이스 기초를 가르칩니다.",
|
|
"관계형 데이터베이스 자격증을 취득하려면:",
|
|
"- 자격증 시험 응시 자격을 얻으려면 다섯 개의 필수 프로젝트를 완료하세요.",
|
|
"- 관계형 데이터베이스 자격증 시험에 합격하세요."
|
|
],
|
|
"chapters": {
|
|
"relational-databases": "관계형 데이터베이스",
|
|
"relational-databases-certification-exam": "관계형 데이터베이스 자격증 시험"
|
|
},
|
|
"modules": {
|
|
"code-editors": "코드 에디터",
|
|
"bash-fundamentals": "Bash 기초",
|
|
"sql-and-postgresql": "SQL과 PostgreSQL",
|
|
"lab-celestial-bodies-database": "천체 데이터베이스 만들기",
|
|
"bash-scripting": "Bash 스크립팅",
|
|
"sql-and-bash": "SQL과 Bash",
|
|
"lab-world-cup-database": "월드컵 데이터베이스 만들기",
|
|
"lab-salon-appointment-scheduler": "미용실 예약 스케줄러 만들기",
|
|
"git": "Git",
|
|
"lab-periodic-table-database": "주기율표 데이터베이스 만들기",
|
|
"lab-number-guessing-game": "숫자 맞추기 게임 만들기",
|
|
"review-relational-databases": "관계형 데이터베이스 복습",
|
|
"relational-databases-certification-exam": "관계형 데이터베이스 자격증 시험"
|
|
},
|
|
"blocks": {
|
|
"lecture-working-with-code-editors-and-ides": {
|
|
"title": "코드 에디터와 IDE 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 코드 편집기와 IDE를 다루는 방법을 배웁니다. 인기 있는 코드 편집기인 VS Code의 설치, 프로젝트 생성 방법, 키보드 단축키와 확장 기능 등을 학습합니다."
|
|
]
|
|
},
|
|
"lecture-understanding-the-command-line-and-working-with-bash": {
|
|
"title": "명령줄 이해 및 Bash 사용",
|
|
"intro": ["이 강의들에서 명령줄과 Bash 사용법을 배우세요."]
|
|
},
|
|
"workshop-bash-boilerplate": {
|
|
"title": "보일러플레이트 만들기",
|
|
"intro": [
|
|
"터미널을 통해 파일 시스템을 조작하고 프로그램을 실행하며 작업을 자동화하는 등 컴퓨터에 텍스트 명령을 보낼 수 있습니다.",
|
|
"이 170강 워크샵에서는 커맨드라인만 사용하여 웹사이트 보일러플레이트를 만들며 터미널 명령을 배웁니다."
|
|
]
|
|
},
|
|
"review-bash-commands": {
|
|
"title": "Bash 명령어 복습",
|
|
"intro": ["다가오는 퀴즈를 준비하려면 Bash 명령어 개념을 복습하세요."]
|
|
},
|
|
"quiz-bash-commands": {
|
|
"title": "Bash 명령어 퀴즈",
|
|
"intro": ["이 퀴즈로 Bash 명령어 학습 내용을 테스트하세요."]
|
|
},
|
|
"lecture-working-with-relational-databases": {
|
|
"title": "관계형 데이터베이스 다루기",
|
|
"intro": ["이 강의들에서 관계형 데이터베이스를 다루는 방법을 배우세요."]
|
|
},
|
|
"workshop-database-of-video-game-characters": {
|
|
"title": "비디오 게임 캐릭터 데이터베이스 만들기",
|
|
"intro": [
|
|
"관계형 데이터베이스는 데이터를 관계를 통해 서로 연결된 테이블로 구성합니다.",
|
|
"이 165강 워크샵에서는 비디오 게임 캐릭터로 채운 PostgreSQL 데이터베이스를 만들어 관계형 데이터베이스의 기초를 배웁니다."
|
|
]
|
|
},
|
|
"review-sql-and-postgresql": {
|
|
"title": "SQL 및 PostgreSQL 복습",
|
|
"intro": [
|
|
"다가오는 퀴즈를 준비하려면 SQL과 PostgreSQL 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-sql-and-postgresql": {
|
|
"title": "SQL 및 PostgreSQL 퀴즈",
|
|
"intro": ["이 퀴즈로 SQL과 PostgreSQL 학습 내용을 테스트하세요."]
|
|
},
|
|
"lab-celestial-bodies-database": {
|
|
"title": "천체 데이터베이스 만들기",
|
|
"intro": [
|
|
"이번 프로젝트에서는 PostgreSQL을 사용하여 천체 데이터베이스를 구축합니다."
|
|
]
|
|
},
|
|
"lecture-understanding-bash-scripting": {
|
|
"title": "Bash 스크립팅 이해하기",
|
|
"intro": ["이 강의들에서 Bash 스크립팅에 대해 배우세요."]
|
|
},
|
|
"workshop-bash-five-programs": {
|
|
"title": "프로그램 다섯 개 만들기",
|
|
"intro": [
|
|
"Bash 스크립트는 터미널 명령과 로직을 결합하여 작업 실행, 자동화 등 다양한 기능을 하는 프로그램을 만듭니다.",
|
|
"이 220강 워크숍에서는 소규모 프로그램 다섯 개를 만들어 Bash 스크립트에서 터미널 명령어 사용법을 더 배우세요."
|
|
]
|
|
},
|
|
"review-bash-scripting": {
|
|
"title": "Bash 스크립팅 복습",
|
|
"intro": [
|
|
"다가오는 퀴즈를 준비하려면 배운 Bash 스크립팅 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-bash-scripting": {
|
|
"title": "Bash 스크립팅 퀴즈",
|
|
"intro": ["이 퀴즈로 Bash 스크립팅 학습 내용을 테스트하세요."]
|
|
},
|
|
"lecture-working-with-sql": {
|
|
"title": "SQL 다루기",
|
|
"intro": ["이 강의들에서 SQL 인젝션, 정규화, N+1 문제에 대해 배웁니다."]
|
|
},
|
|
"workshop-sql-student-database-part-1": {
|
|
"title": "학생 데이터베이스 만들기: 1부",
|
|
"intro": [
|
|
"SQL, 즉 Structured Query Language는 관계형 데이터베이스와 소통하는 언어입니다.",
|
|
"이 140강 워크샵에서는 컴퓨터과학 학생에 관한 정보를 PostgreSQL에 입력하기 위해 SQL을 사용하는 Bash 스크립트를 작성합니다."
|
|
]
|
|
},
|
|
"workshop-sql-student-database-part-2": {
|
|
"title": "학생 데이터베이스 만들기: 2부",
|
|
"intro": [
|
|
"SQL join 명령은 관계형 데이터베이스에서 여러 테이블의 정보를 결합하는 데 사용됩니다.",
|
|
"이 140강 워크샵에서는 SQL 명령어를 더 자세히 살펴보며 학생 데이터베이스를 완성합니다."
|
|
]
|
|
},
|
|
"workshop-kitty-ipsum-translator": {
|
|
"title": "Kitty Ipsum 번역기 만들기",
|
|
"intro": [
|
|
"Bash 명령은 생각보다 더 많은 기능을 제공합니다.",
|
|
"이 140강 워크샵에서는 더 복잡한 명령어와 명령어의 동작 방식에 대한 세부사항을 배웁니다."
|
|
]
|
|
},
|
|
"workshop-bike-rental-shop": {
|
|
"title": "자전거 대여소 만들기",
|
|
"intro": [
|
|
"이 210강 워크샵에서는 PostgreSQL을 사용해 자전거 대여소의 대여 정보를 저장하는 대화형 Bash 프로그램을 만듭니다."
|
|
]
|
|
},
|
|
"review-bash-and-sql": {
|
|
"title": "Bash 및 SQL 복습",
|
|
"intro": ["다가오는 퀴즈를 준비하려면 Bash와 SQL 개념을 복습하세요."]
|
|
},
|
|
"quiz-bash-and-sql": {
|
|
"title": "Bash 및 SQL 퀴즈",
|
|
"intro": ["이 퀴즈로 Bash와 SQL 학습 내용을 테스트하세요."]
|
|
},
|
|
"lab-world-cup-database": {
|
|
"title": "월드컵 데이터베이스 만들기",
|
|
"intro": [
|
|
"이번 프로젝트에서는 월드컵 경기 정보를 PostgreSQL에 입력하는 Bash 스크립트를 만든 다음 데이터베이스에서 유용한 통계를 질의합니다."
|
|
]
|
|
},
|
|
"lab-salon-appointment-scheduler": {
|
|
"title": "살롱 예약 스케줄러 만들기",
|
|
"intro": [
|
|
"이번 실습에서는 PostgreSQL을 사용해 살롱의 고객과 예약을 추적하는 대화형 Bash 프로그램을 만듭니다."
|
|
]
|
|
},
|
|
"lecture-working-with-nano": {
|
|
"title": "Nano 사용하기",
|
|
"intro": ["이 강의에서 Nano에 대해 배우세요."]
|
|
},
|
|
"workshop-castle": {
|
|
"title": "성 만들기",
|
|
"intro": [
|
|
"Nano는 터미널에서 바로 파일을 편집할 수 있는 프로그램입니다.",
|
|
"이 40강 워크샵에서는 성을 만드는 동안 Nano로 터미널에서 파일을 편집하는 방법을 배웁니다."
|
|
]
|
|
},
|
|
"lecture-introduction-to-git-and-github": {
|
|
"title": "Git 및 GitHub 소개",
|
|
"intro": ["이 강의들에서 Git과 GitHub 사용법을 배우세요."]
|
|
},
|
|
"lecture-working-with-code-reviews-branching-deployment-and-ci-cd": {
|
|
"title": "코드리뷰, 브랜치, 배포 및 CI/CD 다루기",
|
|
"intro": [
|
|
"이 강의들에서 코드리뷰, 브랜치, 배포, CI/CD에 대해 배우세요."
|
|
]
|
|
},
|
|
"workshop-sql-reference-object": {
|
|
"title": "SQL 참조 객체 만들기",
|
|
"intro": [
|
|
"Git은 코드베이스에 가한 모든 변경을 추적하는 버전 관리 시스템입니다.",
|
|
"이 240강 워크샵에서는 자주 사용하는 SQL 명령을 포함한 객체를 만들어 Git이 코드를 어떻게 추적하는지 배웁니다."
|
|
]
|
|
},
|
|
"review-git": {
|
|
"title": "Git 복습",
|
|
"intro": ["다가오는 퀴즈를 준비하려면 Git 개념을 복습하세요."]
|
|
},
|
|
"quiz-git": {
|
|
"title": "Git 퀴즈",
|
|
"intro": ["이 퀴즈로 Git 학습 내용을 테스트하세요."]
|
|
},
|
|
"lab-periodic-table-database": {
|
|
"title": "주기율표 데이터베이스 만들기",
|
|
"intro": [
|
|
"이번 실습에서는 주기율표 데이터베이스에서 화학 원소 정보를 가져오는 Bash 스크립트를 만듭니다."
|
|
]
|
|
},
|
|
"lab-number-guessing-game": {
|
|
"title": "숫자 맞추기 게임 만들기",
|
|
"intro": [
|
|
"이번 실습에서는 Bash 스크립팅, PostgreSQL, Git을 사용해 터미널에서 실행되고 사용자 정보를 저장하는 숫자 맞추기 게임을 만듭니다."
|
|
]
|
|
},
|
|
"review-relational-databases": {
|
|
"title": "관계형 데이터베이스 복습",
|
|
"intro": ["시험을 준비하려면 관계형 데이터베이스 개념을 복습하세요."]
|
|
},
|
|
"exam-relational-databases-certification": {
|
|
"title": "관계형 데이터베이스 자격증 시험",
|
|
"intro": ["이 시험에 합격해 관계형 데이터베이스 자격증을 취득하세요."]
|
|
}
|
|
}
|
|
},
|
|
"back-end-development-and-apis-v9": {
|
|
"title": "백엔드 개발 및 API 인증",
|
|
"intro": [
|
|
"이 과정은 백엔드 개발 및 API의 기초를 가르칩니다.",
|
|
"백엔드 개발 및 API 인증을 취득하려면:",
|
|
"- 자격증 시험 응시 자격을 얻으려면 다섯 개의 필수 프로젝트를 완료하세요.",
|
|
"- 백엔드 개발 및 API 인증 시험에 합격하세요."
|
|
],
|
|
"chapters": {
|
|
"back-end-development-and-apis": "백엔드 개발 및 API",
|
|
"back-end-development-and-apis-certification-exam": "백엔드 개발 및 API 인증시험"
|
|
},
|
|
"modules": {
|
|
"introduction-to-nodejs": "Node.js 소개",
|
|
"nodejs-core-modules": "Node.js 코어 모듈",
|
|
"node-package-manager": "Node 패키지 관리자",
|
|
"http-and-the-web-standards-model": "HTTP 및 웹 표준 모델",
|
|
"rest-api-and-web-services": "REST API 및 웹 서비스",
|
|
"introduction-to-express": "Express 소개",
|
|
"express-middleware": "Express 미들웨어",
|
|
"error-handling-in-express": "Express에서의 오류 처리",
|
|
"websockets": "WebSockets",
|
|
"node-and-sql": "Node와 SQL",
|
|
"security-and-privacy": "보안 및 개인정보",
|
|
"authentication": "인증",
|
|
"tooling-and-deployment": "도구 및 배포",
|
|
"back-end-development-and-apis-certification-exam": "백엔드 개발 및 API 인증시험"
|
|
},
|
|
"module-intros": {
|
|
"introduction-to-nodejs": {
|
|
"note": "2026년 늦게 예정",
|
|
"intro": ["이 모듈에서는 Node.js 작업의 기초를 배우세요."]
|
|
},
|
|
"nodejs-core-modules": {
|
|
"note": "2026년 늦게 예정",
|
|
"intro": [
|
|
"이 모듈에서는 fs, os, path 등 일반적인 Node.js 코어 모듈을 배우고 워크숍과 실습으로 배운 내용을 연습한 뒤 짧은 퀴즈로 지식을 점검하세요."
|
|
]
|
|
},
|
|
"node-package-manager": {
|
|
"note": "2026년 하반기 예정",
|
|
"intro": [
|
|
"이 모듈에서는 개발자가 프로젝트 의존성 및 스크립트를 관리하는 Node 패키지 관리자를 소개합니다. 그런 다음 워크숍과 실습을 통해 배운 내용을 연습하고 짧은 퀴즈로 지식을 테스트합니다."
|
|
]
|
|
},
|
|
"http-and-the-web-standards-model": {
|
|
"note": "2026년 하반기 예정",
|
|
"intro": [
|
|
"이 모듈에서는 HTTP(Hypertext Transfer Protocol)와 요청-응답 모델, 일반적인 응답 코드, DNS, TCP/IP 등 중요한 개념을 배웁니다. 그런 다음 웹 서버 직접 만들기 워크숍을 통해 배운 내용을 실습하고 짧은 퀴즈로 지식을 테스트합니다."
|
|
]
|
|
},
|
|
"rest-api-and-web-services": {
|
|
"note": "2026년 하반기 예정",
|
|
"intro": [
|
|
"이 모듈에서는 REST API(Representational State Transfer Application Programming Interface)와 마이크로서비스의 동작 방식을 배웁니다. 그런 다음 짧은 퀴즈로 지식을 테스트합니다."
|
|
]
|
|
},
|
|
"introduction-to-express": {
|
|
"note": "2026년 하반기 예정",
|
|
"intro": [
|
|
"이 모듈에서는 RESTful API를 구축하는 데 사용하는 프레임워크인 Express.js를 소개합니다. 그런 다음 워크숍과 실습을 통해 기술을 연습하고 짧은 퀴즈로 지식을 테스트합니다."
|
|
]
|
|
},
|
|
"express-middleware": {
|
|
"note": "2026년 하반기 예정",
|
|
"intro": [
|
|
"이 모듈에서는 클라이언트와 서버 간의 요청과 응답을 처리하는 데 사용하는 Express.js의 미들웨어에 대해 배웁니다. 그런 다음 워크숍과 실습을 통해 기술을 연습하고 짧은 퀴즈로 지식을 테스트합니다."
|
|
]
|
|
},
|
|
"error-handling-in-express": {
|
|
"note": "2026년 하반기 예정",
|
|
"intro": [
|
|
"이 모듈에서는 Express.js에서 오류 처리, 디버깅, 헬스체크가 어떻게 작동하는지 배웁니다. 그런 다음 실습에서 배운 내용을 연습하고 짧은 퀴즈로 지식을 테스트합니다."
|
|
]
|
|
},
|
|
"websockets": {
|
|
"note": "2026년 하반기 예정",
|
|
"intro": [
|
|
"이 모듈에서는 클라이언트와 서버 간 실시간 통신에 사용하는 WebSockets 프로토콜을 소개합니다. 그런 다음 실습과 워크숍을 통해 배운 내용을 연습하고 짧은 퀴즈로 지식을 테스트합니다."
|
|
]
|
|
},
|
|
"node-and-sql": {
|
|
"note": "2026년 하반기 예정",
|
|
"intro": [
|
|
"이 모듈에서는 Node와 SQL로 애플리케이션을 구축하는 연습을 합니다. 그런 다음 짧은 퀴즈로 지식을 테스트합니다."
|
|
]
|
|
},
|
|
"security-and-privacy": {
|
|
"note": "2026년 하반기 예정",
|
|
"intro": [
|
|
"이 모듈에서는 보안과 개인정보의 차이점뿐만 아니라 CSP, Permissions-Policy, PII, CORS 처리 등 관련 개념을 배웁니다. 그런 다음 짧은 퀴즈로 지식을 테스트합니다."
|
|
]
|
|
},
|
|
"authentication": {
|
|
"note": "2026년 하반기 예정",
|
|
"intro": [
|
|
"이 모듈에서는 웹 애플리케이션에서 인증이 어떻게 작동하는지와 JWT, CSRF, Passport, Helmet, 암호학 및 암호화 등 기타 중요한 개념을 배웁니다. 그런 다음 실습과 워크숍에서 배운 내용을 연습하고 짧은 퀴즈로 지식을 테스트합니다."
|
|
]
|
|
},
|
|
"tooling-and-deployment": {
|
|
"note": "2026년 하반기 예정",
|
|
"intro": [
|
|
"이 모듈에서는 전체 스택 애플리케이션 배포에 업계에서 사용하는 일반 도구를 배우고, 짧은 퀴즈로 지식을 테스트하세요."
|
|
]
|
|
},
|
|
"back-end-development-and-apis-certification-exam": {
|
|
"note": "2026년 하반기 예정",
|
|
"intro": ["이 시험에 합격해 백엔드 개발 및 API 인증을 받으세요."]
|
|
}
|
|
},
|
|
"blocks": {
|
|
"lecture-working-with-nodejs-and-event-driven-architecture": {
|
|
"title": "NodeJS와 이벤트 기반 아키텍처 작업",
|
|
"intro": [
|
|
"Node.js 핵심 라이브러리, 컴퓨터에 Node.js 설치 방법, 백엔드에서 Node.js 사용의 장단점을 배우세요."
|
|
]
|
|
},
|
|
"review-node-js-intro": {
|
|
"title": "NodeJS 소개 복습",
|
|
"intro": ["다가오는 퀴즈를 준비하려면 NodeJS 기초를 복습하세요."]
|
|
},
|
|
"quiz-node-js-intro": {
|
|
"title": "NodeJS 소개 퀴즈",
|
|
"intro": ["이 퀴즈에서 NodeJS에 대해 배운 내용을 시험하세요."]
|
|
},
|
|
"lecture-working-with-node-core-modules": {
|
|
"title": "Node 코어 모듈 작업",
|
|
"intro": [
|
|
"이 수업들에서는 fs, buffer, stream, path 모듈 등 node.js 코어 모듈을 배우고, 타사 라이브러리에 의존하지 않고도 효율적인 애플리케이션을 빌드할 수 있도록 Node가 제공하는 기능을 이해하세요."
|
|
]
|
|
},
|
|
"review-node-js-core-modules": {
|
|
"title": "Node JS 코어 모듈 복습",
|
|
"intro": [
|
|
"다가오는 퀴즈를 준비하려면 Node JS 코어 모듈 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-node-js-core-modules": {
|
|
"title": "Node.js 핵심 모듈 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 Node.js 핵심 모듈에 대해 배운 내용을 테스트하세요."
|
|
]
|
|
},
|
|
"lecture-introduction-to-npm": {
|
|
"title": "npm 소개",
|
|
"intro": [
|
|
"이 수업들에서는 npm과 프로젝트 의존성 관리를 돕는 방법을 배우세요."
|
|
]
|
|
},
|
|
"lecture-working-with-npm-scripts": {
|
|
"title": "npm 스크립트 다루기",
|
|
"intro": [
|
|
"npm 스크립트, 패키지의 npm 레지스트리 배포, CommonJS와 ES 모듈 작업에 대해 배우세요. 이 수업들은 필수 Node.js 개발 도구와 모듈 시스템을 다룹니다."
|
|
]
|
|
},
|
|
"review-npm": {
|
|
"title": "NPM 복습",
|
|
"intro": ["다가오는 퀴즈에 대비해 npm 개념을 복습하세요."]
|
|
},
|
|
"quiz-npm": {
|
|
"title": "npm 퀴즈",
|
|
"intro": ["이 퀴즈로 npm에 대해 배운 내용을 테스트하세요."]
|
|
},
|
|
"lecture-understanding-how-http-dns-tcpip-work": {
|
|
"title": "HTTP, DNS, TCP/IP 작동 원리 이해하기",
|
|
"intro": [
|
|
"인터넷의 기본 개념을 배우되 HTTP, DNS, TCP/IP에 중점을 두고 학습하세요."
|
|
]
|
|
},
|
|
"lecture-understanding-the-http-request-response-model": {
|
|
"title": "HTTP 요청-응답 모델 이해",
|
|
"intro": [
|
|
"HTTP 요청-응답 모델을 통해 웹 통신의 기본 원리를 배우고, 다양한 웹 자산과 응답 유형을 살펴보며, 여러 HTTP 메서드를 사용해 폼이 데이터 제출을 처리하는 방식을 이해합니다."
|
|
]
|
|
},
|
|
"lecture-understanding-rest-api-and-web-services": {
|
|
"title": "REST API와 웹 서비스 이해하기",
|
|
"intro": [
|
|
"이 강의들에서는 REST API와 웹 서비스가 무엇인지, 그리고 서로 다른 애플리케이션이 인터넷을 통해 서로 통신하도록 어떻게 허용하는지 배우게 됩니다."
|
|
]
|
|
},
|
|
"lecture-working-with-express": {
|
|
"title": "Express 다루기",
|
|
"intro": [
|
|
"이 강의들에서 Express.js가 무엇인지, 웹 서버와 API를 구축할 때 개발자가 왜 사용하는지, 라우트 및 요청 처리로 기본 Express 애플리케이션을 설정하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"lecture-understanding-routing-in-express-js": {
|
|
"title": "Understanding Routing in ExpressJS",
|
|
"intro": [
|
|
"Understanding Routing in ExpressJS",
|
|
"In these lessons, you will learn about routing in ExpressJS, which is how you define the different endpoints of your web application and how they respond to client requests."
|
|
]
|
|
},
|
|
"exam-back-end-development-and-apis-certification": {
|
|
"title": "백엔드 개발 및 API 인증시험",
|
|
"intro": ["이 시험에 합격해 백엔드 개발 및 API 인증을 받으세요"]
|
|
}
|
|
}
|
|
},
|
|
"full-stack-developer-v9": {
|
|
"title": "인증된 풀스택 개발자 커리큘럼",
|
|
"intro": [
|
|
"이 인증은 풀스택 개발자 여정의 정점을 나타냅니다. 시작부터 끝까지 완전하고 현대적인 웹 애플리케이션을 구축할 수 있음을 보여줍니다.",
|
|
"시험 응시 자격을 얻으려면 아래 인증을 취득해야 합니다. 시험에 합격해 풀스택 개발자 인증을 취득하세요."
|
|
],
|
|
"chapters": {
|
|
"certified-full-stack-developer-exam": "인증된 풀스택 개발자 시험"
|
|
},
|
|
"modules": {
|
|
"certified-full-stack-developer-exam": "인증된 풀스택 개발자 시험"
|
|
},
|
|
"module-intros": {
|
|
"certified-full-stack-developer-exam": {
|
|
"note": "2026년 늦게 예정",
|
|
"intro": [
|
|
"이 시험은 이전 여섯 개 자격증 전반에서 배운 내용을 평가합니다."
|
|
]
|
|
}
|
|
},
|
|
"blocks": {
|
|
"exam-certified-full-stack-developer": {
|
|
"title": "인증된 풀스택 개발자 시험",
|
|
"intro": ["이 시험에 합격하여 인증된 풀스택 개발자가 되세요."]
|
|
}
|
|
}
|
|
},
|
|
"html-forms-and-tables": {
|
|
"title": "HTML 폼과 테이블 배우기",
|
|
"summary": [
|
|
"시맨틱 HTML로 접근 가능한 폼과 데이터 테이블을 만드는 방법을 배우세요."
|
|
],
|
|
"intro": [
|
|
"시맨틱 HTML로 접근 가능한 폼과 데이터 테이블 만드는 법을 배우세요.",
|
|
"입력, 라벨, 표 형식 데이터를 구조화하여 모든 사용자가 자신 있게 정보를 탐색하고 제출하도록 연습하세요."
|
|
],
|
|
"blocks": {
|
|
"lecture-working-with-forms": {
|
|
"title": "폼 작업",
|
|
"intro": [
|
|
"이 수업들에서는 폼, 라벨의 역할, 입력과 버튼으로 폼을 만드는 방법, 클라이언트 측 폼 검증과 폼 상태를 배우세요."
|
|
]
|
|
},
|
|
"workshop-hotel-feedback-form": {
|
|
"title": "호텔 피드백 폼 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 호텔 피드백 폼을 만드세요.",
|
|
"라벨, 입력, fieldset, legend, textarea, 버튼 작업을 연습하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-tables": {
|
|
"title": "테이블 작업",
|
|
"intro": [
|
|
"이 수업들에서는 HTML 테이블, 생성 방법, 사용 시점을 배우세요."
|
|
]
|
|
},
|
|
"workshop-final-exams-table": {
|
|
"title": "기말고사 테이블 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 기말시험 표를 만들어 HTML 표를 다루는 연습을 하세요."
|
|
]
|
|
},
|
|
"lab-book-catalog-table": {
|
|
"title": "도서목록 테이블 만들기",
|
|
"intro": [
|
|
"이 실습에서는 도서 정보 테이블을 만들어 HTML 표를 복습하세요.",
|
|
"<code>thead</code>, <code>tbody</code>, <code>th</code>, <code>tr</code>, <code>td</code> 요소와 같은 다양한 표 구성요소를 연습하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-html-tools": {
|
|
"title": "HTML 도구 사용하기",
|
|
"intro": [
|
|
"이 강의들에서는 HTML 도구와 이를 사용해 더 나은 코드를 작성하는 방법을 배우세요. 여기에는 HTML 검사기, DOM 검사기, 브라우저 개발자 도구가 포함됩니다."
|
|
]
|
|
},
|
|
"lab-survey-form": {
|
|
"title": "설문 양식 만들기",
|
|
"intro": [
|
|
"이 실습에서 설문 양식을 만들어 HTML 폼을 복습하세요.",
|
|
"<code>label</code> 요소, 다양한 <code>input</code> 요소, <code>required</code> 속성 등을 다루는 연습을 하세요."
|
|
]
|
|
},
|
|
"review-html-tables-and-forms": {
|
|
"title": "HTML 표와 폼 복습",
|
|
"intro": [
|
|
"HTML 폼, 표 및 도구에 대해 퀴즈를 보기 전에 개념을 먼저 복습하세요.",
|
|
"이 페이지를 열어 <code>table</code>, <code>input</code>, <code>button</code> 요소와 HTML 검사기 등 자주 사용하는 도구를 복습하세요."
|
|
]
|
|
},
|
|
"quiz-html-tables-and-forms": {
|
|
"title": "HTML 표 및 폼 퀴즈",
|
|
"intro": [
|
|
"다음 퀴즈로 HTML 표, 폼 및 자주 사용하는 HTML 도구에 대한 지식을 테스트하세요.",
|
|
"시험을 준비 중이면 연습용 퀴즈 세트가 여러 개 제공됩니다. 퀴즈를 완료한 후 이 페이지로 돌아와 새로운 문제 세트에 접근하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"a1-professional-spanish": {
|
|
"title": "A1 전문 스페인어 자격증(베타)",
|
|
"note": "이 자격증은 현재 개발 중입니다. 현재 처음 세 장을 게시했으며, 이후 장은 교육설계팀이 개발하는 대로 순차적으로 공개됩니다. 모든 장이 제공되면 자격증 시험을 공개하겠습니다.",
|
|
"intro": [
|
|
"이 과정은 Common European Framework of Reference (CEFR)의 A1 수준에 해당하는 스페인어 기초를 전문 환경 중심 수업으로 가르칩니다. 각 모듈은 다음 섹션으로 구성됩니다:",
|
|
"- 빠른 복습을 위한 워밍업 섹션.",
|
|
"- 새로운 어휘와 문법을 배우는 Learn 섹션.",
|
|
"- 이해력과 작문을 확인하는 Practice 섹션.",
|
|
"- 핵심 문법과 어휘를 정리하는 Review 섹션."
|
|
],
|
|
"chapters": {
|
|
"es-a1-chapter-welcome-to-a1-professional-spanish": "A1 전문 스페인어에 오신 것을 환영합니다",
|
|
"es-a1-chapter-spanish-fundamentals": "스페인어 기초",
|
|
"es-a1-chapter-greetings-and-introductions": "인사와 소개",
|
|
"es-a1-chapter-basic-personal-details": "기본 개인정보",
|
|
"es-a1-chapter-describing-company-and-people": "회사와 구성원 설명하기"
|
|
},
|
|
"modules": {
|
|
"es-a1-module-introduction-and-certification-overview": "소개 및 자격증 개요",
|
|
"es-a1-module-letters-sounds-and-first-numbers": "문자, 발음, 첫 수",
|
|
"es-a1-module-greetings-and-farewells": "인사와 작별인사",
|
|
"es-a1-module-introducing-yourself": "자기소개하기",
|
|
"es-a1-module-first-questions": "첫 질문들",
|
|
"es-a1-module-numbers-10-to-29": "숫자 10~29",
|
|
"es-a1-module-sharing-your-personal-details": "개인 정보 공유하기",
|
|
"es-a1-module-numbers-30-to-100": "숫자 30~100",
|
|
"es-a1-module-describing-a-company": "회사 설명하기",
|
|
"es-a1-module-describing-people-at-work": "직장의 사람들 설명하기"
|
|
},
|
|
"module-intros": {
|
|
"es-a1-module-describing-a-company": {
|
|
"note": "2026년 예정",
|
|
"intro": [
|
|
"이 모듈에서는 회사 이름, 웹사이트, 위치, 직원 수, 부서 등 회사의 기본 정보를 식별하고 설명하는 법을 배우세요."
|
|
]
|
|
},
|
|
"es-a1-module-describing-people-at-work": {
|
|
"note": "2026년 예정",
|
|
"intro": [
|
|
"이 모듈에서는 3인칭 서술과 짧은 대화에서 간단한 정정을 식별하는 방법을 배우세요."
|
|
]
|
|
}
|
|
},
|
|
"blocks": {
|
|
"es-a1-warm-up-greetings-and-farewells-basics": {
|
|
"title": "인사와 작별인사 기초",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-learn-greetings-during-the-day": {
|
|
"title": "하루 동안의 인사말",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-practice-greetings-and-farewells": {
|
|
"title": "인사와 작별인사 연습",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-review-greetings-and-farewells": {
|
|
"title": "인사와 작별인사 복습",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-quiz-greetings-and-farewells": {
|
|
"title": "인사와 작별인사 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-learn-certification-introduction": {
|
|
"title": "자격증 소개",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-learn-alphabet-and-accents": {
|
|
"title": "알파벳과 악센트",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-learn-punctuation": {
|
|
"title": "구두점",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-quiz-spanish-fundamentals": {
|
|
"title": "스페인어 기초 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-warm-up-introducing-yourself-basics": {
|
|
"title": "자기소개 기초",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-learn-meet-luna": {
|
|
"title": "루나 만나기",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-learn-meet-mateo": {
|
|
"title": "마테오 만나기",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-learn-meet-julieta": {
|
|
"title": "줄리에타 만나기",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-practice-introducing-yourself": {
|
|
"title": "자기소개 연습",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-review-introducing-yourself": {
|
|
"title": "자기소개 복습",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-quiz-introducing-yourself": {
|
|
"title": "자기소개 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-warm-up-first-questions-basics": {
|
|
"title": "첫 질문 기초",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-learn-meet-angela-and-basti": {
|
|
"title": "안젤라와 바스티 만나기",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-practice-first-questions": {
|
|
"title": "첫 질문 연습",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-review-first-questions": {
|
|
"title": "첫 질문 복습",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-quiz-first-questions": {
|
|
"title": "첫 질문 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-learn-vowels": {
|
|
"title": "모음",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-learn-consonants-and-special-characters": {
|
|
"title": "자음 및 특수 문자",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-review-spanish-fundamentals": {
|
|
"title": "스페인어 기초 복습",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-practice-the-alphabet": {
|
|
"title": "스페인어 알파벳 연습",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-warm-up-remember-first-numbers": {
|
|
"title": "첫 번째 숫자 기억하기",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-learn-numbers-10-to-29": {
|
|
"title": "숫자 10~29",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-practice-using-numbers-10-to-29": {
|
|
"title": "숫자 10~29 사용하기",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-review-numbers-10-to-29": {
|
|
"title": "숫자 10~29 복습",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-quiz-numbers-10-to-29": {
|
|
"title": "숫자 10~29 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-warm-up-getting-ready-to-share-personal-details": {
|
|
"title": "개인 정보 공유 준비하기",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-learn-basic-personal-information": {
|
|
"title": "기본 개인 정보",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-learn-contact-information-and-spelling": {
|
|
"title": "연락처 정보 및 철자",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-practice-personal-details-in-action": {
|
|
"title": "실전 개인 정보",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-review-sharing-your-personal-details": {
|
|
"title": "개인 정보 공유 복습",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-quiz-sharing-your-personal-details": {
|
|
"title": "개인 정보 공유 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-learn-the-first-ten-numbers": {
|
|
"title": "첫 열 숫자",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-practice-the-first-ten-numbers": {
|
|
"title": "첫 열 숫자 연습",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-learn-numbers-30-to-60": {
|
|
"title": "숫자 30~60",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-warm-up-describing-a-company-basics": {
|
|
"title": "회사 설명 기초",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-learn-numbers-61-to-100": {
|
|
"title": "숫자 61~100",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-practice-using-the-first-100-numbers": {
|
|
"title": "첫 100개 숫자 사용하기",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-review-first-100-numbers": {
|
|
"title": "첫 100개 숫자 복습",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-quiz-numbers-30-to-100": {
|
|
"title": "숫자 30~100 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-learn-what-the-company-does": {
|
|
"title": "회사가 하는 일",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-learn-asking-about-a-company": {
|
|
"title": "회사에 대해 묻기",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-practice-company-profile": {
|
|
"title": "회사 프로필",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-review-talking-about-a-company": {
|
|
"title": "회사에 대해 말하기",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-quiz-describing-a-company": {
|
|
"title": "회사 설명 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-warm-up-describing-people-at-work-basics": {
|
|
"title": "직장 사람 설명 기초",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-learn-mini-biographies": {
|
|
"title": "미니 전기 ",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-practice-asking-about-mini-biographies": {
|
|
"title": "미니 전기 묻기",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-learn-short-workplace-profile": {
|
|
"title": "짧은 직장 프로필 ",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-practice-asking-about-short-workplace-profiles": {
|
|
"title": "짧은 직장 프로필 묻기",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-review-describing-people-at-work": {
|
|
"title": "직장 사람 설명하기",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-quiz-describing-people-at-work": {
|
|
"title": "직장 사람 설명하기",
|
|
"intro": ["", ""]
|
|
},
|
|
"es-a1-learn-talking-about-colleagues": {
|
|
"title": "Talking About Colleagues",
|
|
"intro": ["", ""]
|
|
}
|
|
}
|
|
},
|
|
"responsive-web-design-v9": {
|
|
"title": "반응형 웹 디자인 자격증",
|
|
"intro": [
|
|
"이 과정에서는 현대적 레이아웃, 디자인, 접근성 및 반응형 웹 개발을 포함한 HTML과 CSS의 기초를 설명합니다. 실무형 프로젝트를 만들며 전문적이고 사용자친화적인 웹페이지를 제작하는 기술을 익히세요.",
|
|
"Responsive Web Design 자격증을 얻으려면:",
|
|
"- 자격증 시험 응시 자격을 얻으려면 다섯 개의 필수 프로젝트를 완료하세요.",
|
|
"- Responsive Web Design 자격증 시험에 합격하세요."
|
|
],
|
|
"chapters": {
|
|
"html": "HTML",
|
|
"computers": "컴퓨터",
|
|
"css": "CSS",
|
|
"responsive-web-design-certification-exam": "반응형 웹 디자인 자격증 시험"
|
|
},
|
|
"modules": {
|
|
"basic-html": "기본 HTML",
|
|
"semantic-html": "시맨틱 HTML",
|
|
"html-forms-and-tables": "폼 및 테이블",
|
|
"lab-survey-form": "설문 양식 만들기",
|
|
"html-and-accessibility": "접근성",
|
|
"review-html": "HTML 복습",
|
|
"computer-basics": "컴퓨터 기초",
|
|
"basic-css": "CSS 기본",
|
|
"design-for-developers": "디자인",
|
|
"absolute-and-relative-units": "절대 및 상대 단위",
|
|
"pseudo-classes-and-elements": "의사 클래스 및 의사 요소",
|
|
"css-colors": "색상",
|
|
"styling-forms": "폼 스타일링",
|
|
"css-box-model": "박스 모델",
|
|
"css-flexbox": "플렉스박스",
|
|
"lab-page-of-playing-cards": "플레이 카드 페이지 만들기",
|
|
"css-typography": "타이포그래피",
|
|
"css-and-accessibility": "접근성",
|
|
"css-positioning": "포지셔닝",
|
|
"attribute-selectors": "속성 선택자",
|
|
"lab-book-inventory-app": "도서 재고 관리 앱 만들기",
|
|
"responsive-design": "반응형 디자인",
|
|
"lab-technical-documentation-page": "기술 문서 페이지 만들기",
|
|
"css-variables": "변수",
|
|
"css-grid": "그리드",
|
|
"lab-product-landing-page": "제품 랜딩 페이지 만들기",
|
|
"css-animations": "애니메이션",
|
|
"review-css": "CSS 복습",
|
|
"responsive-web-design-certification-exam": "반응형 웹 디자인 자격증 시험"
|
|
},
|
|
"blocks": {
|
|
"workshop-curriculum-outline": {
|
|
"title": "커리큘럼 개요 만들기",
|
|
"intro": [
|
|
"freeCodeCamp에 오신 것을 환영합니다!",
|
|
"이 워크숍은 HTML과 코딩 전반에 대한 입문입니다. 제목 요소와 문단 요소에 대해 배우세요."
|
|
]
|
|
},
|
|
"lab-debug-camperbots-profile-page": {
|
|
"title": "Camperbot의 프로필 페이지 디버깅",
|
|
"intro": [
|
|
"Camperbot도 코딩을 배우고 있어 HTML에 대한 도움이 필요합니다.",
|
|
"이 실습에서는 Camperbot의 코드에서 오류를 찾아 수정하는 것을 도와주세요."
|
|
]
|
|
},
|
|
"lecture-understanding-html-attributes": {
|
|
"title": "HTML 속성 이해하기",
|
|
"intro": [
|
|
"이 강의들에서는 웹페이지를 만들기 위한 마크업 언어인 HTML(HyperText Markup Language)에 대해 더 배우세요.",
|
|
"웹에서의 HTML 역할과 HTML 속성이 무엇인지 배우세요."
|
|
]
|
|
},
|
|
"lab-debug-pet-adoption-page": {
|
|
"title": "애완동물 입양 페이지 디버깅",
|
|
"intro": [
|
|
"이 실습에서는 애완동물 입양 페이지의 오류를 찾아 수정하세요."
|
|
]
|
|
},
|
|
"lecture-understanding-the-html-boilerplate": {
|
|
"title": "HTML 보일러플레이트 이해하기",
|
|
"intro": [
|
|
"이 강의들에서는 웹페이지용으로 미리 만들어진 템플릿인 HTML boilerplate에 대해 배우세요.",
|
|
"<code>link</code> 요소, <code>meta</code> 요소 등과 작업하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-cat-photo-app": {
|
|
"title": "고양이 사진 앱 만들기",
|
|
"intro": [
|
|
"HTML은 HyperText Markup Language의 약자로 웹 페이지의 내용과 구조를 나타냅니다.",
|
|
"이 워크숍에서는 제목, 문단, 이미지, 링크, 목록 같은 기본 HTML 요소를 다루는 방법을 배우세요."
|
|
]
|
|
},
|
|
"lab-recipe-page": {
|
|
"title": "레시피 페이지 만들기",
|
|
"intro": [
|
|
"이 실습에서는 좋아하는 레시피의 웹페이지를 만들어 HTML 기초를 복습하세요. HTML boilerplate를 만들고 제목, 목록, 이미지 등을 다루세요."
|
|
]
|
|
},
|
|
"lecture-html-fundamentals": {
|
|
"title": "HTML 기초",
|
|
"intro": [
|
|
"이 강의들에서는 <code>div</code> 요소, <code>id</code>와 <code>class</code> 속성, HTML boilerplate, HTML 엔티티 등 HTML 기초를 배우세요."
|
|
]
|
|
},
|
|
"workshop-bookstore-page": {
|
|
"title": "서점 페이지 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 클래스와 id, <code>div</code> 요소를 사용해 서점 페이지를 만들며 연습하세요."
|
|
]
|
|
},
|
|
"lecture-understanding-how-html-affects-seo": {
|
|
"title": "HTML이 SEO에 미치는 영향 이해하기",
|
|
"intro": [
|
|
"이 강의들에서는 HTML 코드가 검색엔진 최적화(SEO)에 어떤 영향을 미치는지 배우세요."
|
|
]
|
|
},
|
|
"lab-travel-agency-page": {
|
|
"title": "여행사 페이지 만들기",
|
|
"intro": [
|
|
"이 실습에서는 여행사용 웹페이지를 만들어 이미지, <code>figure</code> 요소, <code>figcaption</code> 요소, 앵커 요소 등을 다루며 HTML 기초를 복습하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-audio-and-video-elements": {
|
|
"title": "오디오 및 비디오 요소 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 <code>audio</code>와 <code>video</code> 요소를 다루는 방법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-html-music-player": {
|
|
"title": "HTML 뮤직 플레이어 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 HTML을 사용해 기본 뮤직 플레이어를 만듭니다.",
|
|
"이 프로젝트에서는 <code>audio</code> 요소와 오디오 플레이어 설정 등을 다룹니다."
|
|
]
|
|
},
|
|
"workshop-html-video-player": {
|
|
"title": "HTML 비디오 플레이어 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 HTML을 사용해 기본 비디오 플레이어를 만드세요.",
|
|
"이 프로젝트에서는 <code>video</code> 요소와 비디오 플레이어 설정 등을 다룹니다."
|
|
]
|
|
},
|
|
"lab-html-audio-and-video-player": {
|
|
"title": "HTML 오디오 및 비디오 플레이어 만들기",
|
|
"intro": [
|
|
"이번 실습에서는 <code>video</code>와 <code>audio</code> 요소를 controls 및 source 속성과 함께 사용해 HTML 오디오 및 비디오 플레이어를 만듭니다."
|
|
]
|
|
},
|
|
"lecture-working-with-images-and-svgs": {
|
|
"title": "이미지 및 SVG 다루기",
|
|
"intro": ["이 강의들에서는 SVG 작업법과 이미지 최적화 기법을 배우세요."]
|
|
},
|
|
"workshop-build-a-heart-icon": {
|
|
"title": "하트 아이콘 만들기",
|
|
"intro": ["이 워크숍에서는 하트 아이콘을 만들어 SVG 작업을 연습합니다"]
|
|
},
|
|
"lecture-working-with-media": {
|
|
"title": "iframe 요소 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 외부 사이트를 웹페이지에 임베드하는 데 쓰이는 <code>iframe</code> 요소를 다루는 방법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-build-a-video-display-using-iframe": {
|
|
"title": "iframe을 사용해 비디오 표시 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 비디오 표시를 만들어 <code>iframe</code> 요소를 다루는 방법을 배웁니다."
|
|
]
|
|
},
|
|
"lab-video-compilation-page": {
|
|
"title": "비디오 모음 페이지 만들기",
|
|
"intro": [
|
|
"이 실습에서는 비디오 컴필레이션 웹페이지를 만들고 <code>iframe</code> 요소를 다루는 연습을 하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-links": {
|
|
"title": "링크 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 링크, <code>target</code> 속성, 다양한 링크 상태, 절대경로와 상대경로 등을 배우세요."
|
|
]
|
|
},
|
|
"review-basic-html": {
|
|
"title": "HTML 기초 복습",
|
|
"intro": [
|
|
"지금까지 쌓은 HTML 지식에 대해 퀴즈를 보기 전에 개념을 먼저 복습하세요.",
|
|
"이 페이지를 열어 HTML boilerplate, <code>audio</code>와 <code>video</code> 요소, 다양한 <code>target</code> 속성 값 등을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-basic-html": {
|
|
"title": "HTML 기초 퀴즈",
|
|
"intro": [
|
|
"다음 퀴즈가 지금까지 배운 기본 HTML 개념에 대한 지식을 테스트합니다.",
|
|
"시험 준비 중이라면 연습용으로 여러 퀴즈 세트가 제공됩니다. 퀴즈를 완료한 후 이 페이지로 돌아와 새 질문 세트에 접근하세요."
|
|
]
|
|
},
|
|
"lecture-importance-of-semantic-html": {
|
|
"title": "시맨틱 HTML의 중요성",
|
|
"intro": [
|
|
"이 강의들에서는 시맨틱 HTML의 중요성과 이를 신경 써야 하는 이유, 시맨틱 요소, 프레젠테이션용 HTML과 시맨틱 HTML의 차이 등을 배우세요."
|
|
]
|
|
},
|
|
"lecture-understanding-nuanced-semantic-elements": {
|
|
"title": "미묘한 시맨틱 요소 이해하기",
|
|
"intro": [
|
|
"이 강의들에서는 <code>em</code> 요소를 <code>i</code> 요소보다 언제 사용해야 하는지, 설명 목록 등 특정 시맨틱 요소 사용 시기를 배우세요."
|
|
]
|
|
},
|
|
"workshop-major-browsers-list": {
|
|
"title": "주요 웹 브라우저 목록 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 설명 목록을 만들고 <code>dl</code>, <code>dt</code>, <code>dd</code> 요소를 다루며 연습하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-text-and-time-semantic-elements": {
|
|
"title": "텍스트 및 시간 관련 시맨틱 요소 다루기 ",
|
|
"intro": [
|
|
"이 강의에서는 텍스트와 시간 관련 콘텐츠의 의미 전달에 있어 시맨틱의 중요성(예: <code>time</code>, <code>blockquote</code> 요소)을 배우세요."
|
|
]
|
|
},
|
|
"workshop-quincys-job-tips": {
|
|
"title": "Quincy의 취업 팁 페이지 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 <code>q</code>, <code>blockquote</code>, <code>cite</code> 요소를 사용해 의미론적 HTML을 연습하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-specialized-semantic-elements": {
|
|
"title": "특수 시맨틱 요소 다루기",
|
|
"intro": [
|
|
"이 강의에서는 <code>u</code>, <code>s</code>, <code>code</code> 같은 특수 시맨틱 요소를 배우세요."
|
|
]
|
|
},
|
|
"workshop-blog-page": {
|
|
"title": "고양이 블로그 페이지 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 <code>main</code>, <code>nav</code>, <code>article</code>, <code>footer</code> 등 시맨틱 요소를 사용해 HTML 전용 블로그 페이지를 만드세요."
|
|
]
|
|
},
|
|
"lab-event-hub": {
|
|
"title": "이벤트 허브 만들기",
|
|
"intro": [
|
|
"이 실습에서는 이벤트 허브를 만들고 <code>header</code>, <code>nav</code>, <code>article</code> 등 시맨틱 요소를 복습하세요."
|
|
]
|
|
},
|
|
"review-semantic-html": {
|
|
"title": "시맨틱 HTML 복습",
|
|
"intro": [
|
|
"시맨틱 HTML에 관한 퀴즈를 보기 전에 개념을 먼저 복습하세요.",
|
|
"이 페이지를 열어 <code>em</code>, <code>strong</code>, <code>blockquote</code>, <code>address</code> 등 시맨틱 HTML 요소를 복습하세요."
|
|
]
|
|
},
|
|
"quiz-semantic-html": {
|
|
"title": "시맨틱 HTML 퀴즈",
|
|
"intro": [
|
|
"다음 퀴즈가 지금까지 배운 시맨틱 HTML 개념에 대한 지식을 테스트합니다.",
|
|
"시험 준비 중이라면 연습용으로 여러 퀴즈 세트가 제공됩니다. 퀴즈를 완료한 후 이 페이지로 돌아와 새 질문 세트에 접근하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-forms": {
|
|
"title": "폼 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 폼, 라벨의 역할, 입력과 버튼이 폼 생성에서 하는 역할, 클라이언트측 폼 검증, 폼 상태 등을 배우세요."
|
|
]
|
|
},
|
|
"workshop-hotel-feedback-form": {
|
|
"title": "호텔 피드백 양식 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 호텔 피드백 양식을 만드세요.",
|
|
"label, input, fieldset, legend, textarea 및 button 요소로 작업하는 연습을 하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-tables": {
|
|
"title": "테이블 작업",
|
|
"intro": [
|
|
"이 강의들에서 HTML 테이블, 테이블 생성 방법과 사용 시점을 배우세요."
|
|
]
|
|
},
|
|
"workshop-final-exams-table": {
|
|
"title": "기말시험 표 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 기말시험 표를 만들어 HTML 테이블 작업을 연습하세요."
|
|
]
|
|
},
|
|
"lab-book-catalog-table": {
|
|
"title": "도서목록 표 만들기",
|
|
"intro": [
|
|
"이 실습에서 도서 정보 표를 만들어 HTML 테이블을 복습하세요.",
|
|
"<code>thead</code>, <code>tbody</code>, <code>th</code>, <code>tr</code>, <code>td</code> 같은 다양한 테이블 구성요소를 연습하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-html-tools": {
|
|
"title": "HTML 도구 작업",
|
|
"intro": [
|
|
"이 강의들에서 HTML 도구와 도구를 사용해 더 나은 코드를 작성하는 방법을 배우세요. 여기에는 HTML 검사기, DOM 검사기, 브라우저 개발자 도구가 포함됩니다."
|
|
]
|
|
},
|
|
"review-html-tables-and-forms": {
|
|
"title": "HTML 테이블 및 폼 복습",
|
|
"intro": [
|
|
"HTML 폼, 테이블 및 도구에 대해 퀴즈를 보기 전에 개념을 먼저 복습하세요.",
|
|
"이 페이지를 열어 <code>table</code>, <code>input</code>, <code>button</code> 요소와 HTML 검사기 같은 자주 사용하는 도구들을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-html-tables-and-forms": {
|
|
"title": "HTML 테이블 및 폼 퀴즈",
|
|
"intro": [
|
|
"다음 퀴즈는 HTML 테이블, 폼 및 자주 사용하는 HTML 도구에 대한 지식을 평가합니다.",
|
|
"시험 준비 중이라면 연습용 퀴즈 세트가 여러 개 있습니다. 퀴즈를 완료한 후 이 페이지로 돌아와 새 문제 세트에 접근하세요."
|
|
]
|
|
},
|
|
"lab-survey-form": {
|
|
"title": "설문 양식 만들기",
|
|
"intro": [
|
|
"이 실습에서 설문 양식을 만들어 HTML 폼을 복습하세요.",
|
|
"<code>label</code> 요소, 다양한 <code>input</code> 요소, <code>required</code> 속성 등을 연습하세요."
|
|
]
|
|
},
|
|
"lecture-importance-of-accessibility-and-good-html-structure": {
|
|
"title": "접근성 및 좋은 HTML 구조의 중요성",
|
|
"intro": [
|
|
"이 강의들에서 접근성과 그 중요성, 장애인을 위한 보조도구, 포괄적인 웹사이트를 만들게 해주는 HTML 속성들, 접근성 모범사례 등을 배우세요."
|
|
]
|
|
},
|
|
"workshop-debug-coding-journey-blog-page": {
|
|
"title": "코딩 여정 블로그 페이지 디버그하기",
|
|
"intro": [
|
|
"이 워크숍에서는 코딩 블로그 페이지의 접근성 오류를 디버그하고 수정합니다."
|
|
]
|
|
},
|
|
"lecture-accessible-tables-forms": {
|
|
"title": "접근 가능한 테이블과 폼 작업",
|
|
"intro": [
|
|
"이 강의들에서 접근 가능한 테이블과 폼을 만드는 방법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-tech-conference-schedule": {
|
|
"title": "기술 컨퍼런스 일정표 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 접근성 있는 기술 컨퍼런스 일정표를 만듭니다."
|
|
]
|
|
},
|
|
"lab-debug-donation-form": {
|
|
"title": "기부 양식 디버그",
|
|
"intro": [
|
|
"이 실습에서는 HTML 문법 오류를 수정하고 접근성을 개선하여 기부 양식을 디버깅하세요."
|
|
]
|
|
},
|
|
"lecture-introduction-to-aria": {
|
|
"title": "ARIA 소개",
|
|
"intro": ["이 강의들에서 ARIA 역할을 다루는 방법을 배우세요."]
|
|
},
|
|
"workshop-accessible-audio-controller": {
|
|
"title": "접근성 있는 오디오 컨트롤러 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 <code>aria-labelledby</code> 속성을 사용한 오디오 컨트롤러를 만들어 접근성 있는 HTML을 연습하세요."
|
|
]
|
|
},
|
|
"lecture-accessible-media-elements": {
|
|
"title": "접근 가능한 미디어 요소 작업",
|
|
"intro": [
|
|
"이 강의들에서 접근 가능한 링크, 오디오 및 비디오 콘텐츠를 만드는 방법을 배우세요."
|
|
]
|
|
},
|
|
"lab-checkout-page": {
|
|
"title": "결제 페이지 만들기",
|
|
"intro": [
|
|
"이 실습에서 접근 가능한 결제 페이지를 만드세요.",
|
|
"<code>alt</code> 속성 및 ARIA 역할 같은 개념을 연습하세요."
|
|
]
|
|
},
|
|
"lab-movie-review-page": {
|
|
"title": "영화 리뷰 페이지 디자인",
|
|
"intro": [
|
|
"이 실습에서 영화 리뷰 페이지를 만드세요.",
|
|
"시맨틱 HTML, <code>alt</code> 속성, 접근 가능한 목록, 장식용 콘텐츠를 <code>aria-hidden</code>으로 스크린리더에서 숨기는 방법 등을 연습하세요."
|
|
]
|
|
},
|
|
"lab-multimedia-player": {
|
|
"title": "멀티미디어 플레이어 만들기",
|
|
"intro": [
|
|
"이 실습에서 멀티미디어 플레이어를 만드세요.",
|
|
"<code>audio</code>와 <code>video</code> 요소, <code>controls</code> 속성, <code>aria-label</code> 속성을 다루는 연습을 하세요."
|
|
]
|
|
},
|
|
"review-html-accessibility": {
|
|
"title": "HTML 접근성 복습",
|
|
"intro": [
|
|
"HTML과 접근성에 대해 퀴즈를 보기 전에 개념을 먼저 복습하세요.",
|
|
"이 페이지를 열어 <code>aria-hidden</code>, <code>aria-describedby</code>, <code>tabindex</code> 속성 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-html-accessibility": {
|
|
"title": "HTML 접근성 퀴즈",
|
|
"intro": [
|
|
"다음 퀴즈는 지금까지 배운 접근성 개념에 대한 지식을 평가합니다.",
|
|
"시험 준비 중이라면 연습용 퀴즈 세트가 여러 개 있습니다. 퀴즈를 완료한 후 이 페이지로 돌아와 새 문제 세트에 접근하세요."
|
|
]
|
|
},
|
|
"review-html": {
|
|
"title": "HTML 복습",
|
|
"intro": [
|
|
"HTML 준비시험을 보기 전에 이전 모듈에서 배운 개념을 먼저 복습하세요.",
|
|
"이 페이지를 열어 HTML 요소 기초, 시맨틱 HTML, 테이블, 폼 및 접근성 관련 개념을 복습하세요."
|
|
]
|
|
},
|
|
"lecture-understanding-computer-internet-and-tooling-basics": {
|
|
"title": "컴퓨터, 인터넷 및 도구 기초 이해",
|
|
"intro": [
|
|
"이 강의들에서 컴퓨터와 구성요소, 인터넷 서비스 제공업체(ISP), 전문 개발자가 사용하는 도구를 배우세요."
|
|
]
|
|
},
|
|
"lecture-working-with-file-systems": {
|
|
"title": "파일 시스템 작업",
|
|
"intro": [
|
|
"이 강의들에서 컴퓨터의 파일 및 폴더 시스템을 다루는 방법을 배우세요. 파일과 폴더 생성, 이동, 삭제 방법, 이름 짓기와 정리 모범사례 등을 배우세요."
|
|
]
|
|
},
|
|
"lecture-browsing-the-web-effectively": {
|
|
"title": "효과적인 웹 검색",
|
|
"intro": [
|
|
"이 강의들에서 웹사이트, 검색엔진, 웹브라우저가 무엇인지, 사용 가능한 다양한 브라우저, 검색엔진을 최대한 활용하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"review-computer-basics": {
|
|
"title": "컴퓨터 기초 복습",
|
|
"intro": [
|
|
"기본 컴퓨터 및 인터넷 개념에 대한 퀴즈를 보기 전에 먼저 복습하세요.",
|
|
"이 페이지를 열어 RAM, 인터넷 서비스 제공업체, 일반적인 웹브라우저, 검색엔진 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-computer-basics": {
|
|
"title": "컴퓨터 기초 퀴즈",
|
|
"intro": ["기초 컴퓨터 지식 퀴즈로 배운 내용을 테스트하세요."]
|
|
},
|
|
"lecture-what-is-css": {
|
|
"title": "CSS란 무엇인가?",
|
|
"intro": [
|
|
"다음 강의는 모두 CSS에 관한 것입니다. CSS가 무엇이며 웹에서의 역할, CSS 규칙 구조, CSS 작성 방법 세 가지와 사용 시점, 인라인 및 블록 요소 등 여러 가지를 배우세요."
|
|
]
|
|
},
|
|
"workshop-cafe-menu": {
|
|
"title": "카페 메뉴 디자인",
|
|
"intro": [
|
|
"CSS는 브라우저에 웹페이지를 어떻게 표시할지 알려줍니다. CSS로 HTML 요소의 색상, 글꼴, 크기 및 기타 측면을 설정하세요.",
|
|
"이 워크숍에서 카페 웹페이지의 메뉴 페이지를 디자인하며 CSS를 배우세요."
|
|
]
|
|
},
|
|
"lab-business-card": {
|
|
"title": "명함 디자인",
|
|
"intro": [
|
|
"이 실습에서 명함을 만들고 CSS로 스타일하세요.",
|
|
"<code>color</code>, <code>font-size</code>, <code>text-align</code> 등의 스타일 속성을 연습하세요."
|
|
]
|
|
},
|
|
"lecture-css-specificity-the-cascade-algorithm-and-inheritance": {
|
|
"title": "CSS 특이성, 캐스케이드 알고리즘 및 상속",
|
|
"intro": [
|
|
"이 강의들에서 CSS 특이성, 일반 선택자와 그 특이성, 캐스케이드 알고리즘, 상속 등과 더 많은 내용을 배우세요."
|
|
]
|
|
},
|
|
"review-basic-css": {
|
|
"title": "CSS 기초 복습",
|
|
"intro": [
|
|
"기본 CSS 개념에 대해 퀴즈를 보기 전에 먼저 복습하세요.",
|
|
"이 페이지를 열어 <code>margin</code>, <code>padding</code>, CSS 결합자, CSS 특이성 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-basic-css": {
|
|
"title": "CSS 기초 퀴즈",
|
|
"intro": ["기초 CSS 지식 퀴즈로 배운 내용을 테스트하세요."]
|
|
},
|
|
"lecture-styling-lists-and-links": {
|
|
"title": "목록과 링크 스타일링",
|
|
"intro": [
|
|
"이 강의들에서 목록과 링크를 효과적으로 스타일링하기 위한 속성들을 배우세요. 여기에는 <code>link</code>, <code>visited</code>, <code>hover</code>, <code>active</code> 같은 링크 상태가 포함됩니다."
|
|
]
|
|
},
|
|
"lab-stylized-to-do-list": {
|
|
"title": "스타일된 할일 목록 만들기",
|
|
"intro": [
|
|
"이 실습에서는 할일 목록을 만들고 링크에 다양한 스타일을 적용하세요.",
|
|
"<code>text-decoration</code>, <code>list-style-type</code> 등과 마우스 오버나 클릭 시 스타일을 바꾸는 방법을 연습하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-backgrounds-and-borders": {
|
|
"title": "배경과 테두리 작업",
|
|
"intro": [
|
|
"이 강의들에서 요소의 배경과 테두리를 스타일링하는 데 필요한 속성과 값, 배경 접근성 고려사항을 배우세요."
|
|
]
|
|
},
|
|
"lab-blog-post-card": {
|
|
"title": "블로그 포스트 카드 디자인",
|
|
"intro": [
|
|
"이 실습에서는 HTML과 CSS를 사용해 블로그 게시물 카드를 디자인하세요.",
|
|
"<code>background-color</code>, <code>border-radius</code>, margin, padding 등과 같은 개념을 연습하세요."
|
|
]
|
|
},
|
|
"review-css-backgrounds-and-borders": {
|
|
"title": "목록, 링크, CSS 배경 및 테두리 복습",
|
|
"intro": [
|
|
"CSS 배경과 테두리에 대한 퀴즈를 보기 전에 먼저 복습하세요.",
|
|
"이 페이지를 열어 <code>background-image</code>, <code>border</code> 속성 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-backgrounds-and-borders": {
|
|
"title": "CSS 배경 및 테두리 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 CSS의 배경과 테두리에 대해 배운 내용을 테스트하세요."
|
|
]
|
|
},
|
|
"lecture-user-interface-design-fundamentals": {
|
|
"title": "사용자 인터페이스 디자인 기초",
|
|
"intro": [
|
|
"이 강의들에서 사용자 인터페이스(UI) 디자인의 기초를 배우세요. 디자이너와 소통할 때 알아야 할 용어, 시각적 계층, 스케일, 정렬, 여백 등 많은 내용을 다룹니다."
|
|
]
|
|
},
|
|
"lecture-user-centered-design": {
|
|
"title": "사용자 중심 디자인",
|
|
"intro": [
|
|
"이 강의들에서 다크 모드, 브레드크럼, 모달 대화상자 같은 사용자 대상 기능 설계 모범사례와 사용자 조사, 요구사항, 테스트 방법을 배우세요."
|
|
]
|
|
},
|
|
"lecture-common-design-tools": {
|
|
"title": "공용 디자인 도구",
|
|
"intro": [
|
|
"이 강의들에서 개발자가 알아야 할 일반적인 디자인 도구를 배우세요. 또한 디자인 브리프와 개발자가 그것을 다루는 방법을 배우세요."
|
|
]
|
|
},
|
|
"review-design-fundamentals": {
|
|
"title": "디자인 기초 복습",
|
|
"intro": [
|
|
"지금까지 배운 디자인 기초에 대해 퀴즈를 보기 전에 먼저 복습하세요.",
|
|
"이 페이지를 열어 사용자 중심 디자인, 비율, 정렬, 좋은 시각적 계층 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-design-fundamentals": {
|
|
"title": "디자인 기초 퀴즈",
|
|
"intro": ["UI 디자인 기초 퀴즈로 배운 내용을 테스트하세요."]
|
|
},
|
|
"lecture-working-with-relative-and-absolute-units": {
|
|
"title": "상대 단위 및 절대 단위 작업",
|
|
"intro": [
|
|
"이 강의들에서 상대 단위와 절대 단위를 배우고 브라우저에서 어떻게 영향을 주는지 학습하세요."
|
|
]
|
|
},
|
|
"lab-event-flyer-page": {
|
|
"title": "이벤트 전단 페이지 만들기",
|
|
"intro": [
|
|
"이 실습에서 이벤트 전단 페이지를 만드세요.",
|
|
"절대 및 상대 CSS를 사용해 요소를 정렬하는 연습을 하세요."
|
|
]
|
|
},
|
|
"review-css-relative-and-absolute-units": {
|
|
"title": "CSS 상대 및 절대 단위 복습",
|
|
"intro": [
|
|
"상대 및 절대 단위에 대해 퀴즈를 보기 전에 먼저 복습하세요.",
|
|
"이 페이지를 열어 백분율, <code>px</code>, <code>rem</code>, <code>em</code> 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-relative-and-absolute-units": {
|
|
"title": "CSS 상대 및 절대 단위 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 CSS의 상대 및 절대 단위에 대해 배운 내용을 테스트하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-pseudo-classes-and-pseudo-elements-in-css": {
|
|
"title": "CSS 의사클래스 및 의사요소 작업",
|
|
"intro": [
|
|
"이 강의들에서 의사클래스와 의사요소, 예제와 동작 방식을 배우세요."
|
|
]
|
|
},
|
|
"workshop-greeting-card": {
|
|
"title": "축하 카드 디자인",
|
|
"intro": [
|
|
"이전 강의에서 다양한 유형의 의사클래스를 다루는 법을 배웠습니다.",
|
|
"이 워크숍에서 배운 내용을 연습하며 축하 카드를 디자인하세요."
|
|
]
|
|
},
|
|
"workshop-parent-teacher-conference-form": {
|
|
"title": "학부모교사 상담 양식 디자인",
|
|
"intro": [
|
|
"이 워크숍에서는 다양한 의사 가상 선택자(pseudo-selector)로 라디오 버튼을 스타일링하는 방법을 연습하며 학부모-교사 상담 양식을 만드세요.",
|
|
"<code>::before</code> 의사요소 선택자, <code>transform</code> 프로퍼티 등 개념을 연습하세요."
|
|
]
|
|
},
|
|
"lab-job-application-form": {
|
|
"title": "구직 신청서 양식 만들기",
|
|
"intro": [
|
|
"이 실습에서 구직 신청 양식을 만들고 의사클래스를 사용해 스타일하세요.",
|
|
"<code>:hover</code>, <code>:active</code>, <code>:focus</code> 등 개념을 연습하세요."
|
|
]
|
|
},
|
|
"review-css-pseudo-classes": {
|
|
"title": "CSS 의사클래스 복습",
|
|
"intro": [
|
|
"CSS 의사클래스 및 의사요소에 대해 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>::before</code>, <code>::after</code> 의사요소와 <code>:hover</code>, <code>:active</code> 의사클래스 등을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-pseudo-classes": {
|
|
"title": "CSS 의사클래스 퀴즈",
|
|
"intro": ["이 퀴즈로 CSS 의사클래스에 대한 지식을 테스트하세요."]
|
|
},
|
|
"lecture-working-with-colors-in-css": {
|
|
"title": "CSS 색상 작업",
|
|
"intro": [
|
|
"이 강의들에서 선형 및 방사형 그라디언트, 색채 이론, 명명된 색상, RGB, Hex, HSL 같은 색상 종류와 사용법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-colored-markers": {
|
|
"title": "색깔 마커 세트 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 색깔 마커 세트를 만드세요. 색상 값을 설정하는 다양한 방법과 색상 조합 방법을 연습하세요."
|
|
]
|
|
},
|
|
"lab-colored-boxes": {
|
|
"title": "색상 박스 세트 디자인",
|
|
"intro": [
|
|
"이 실습에서 색상 그리드를 만들고 hex 코드, RGB, 미리 정의된 색상 이름으로 그리드 항목의 배경색을 추가하는 연습을 하세요."
|
|
]
|
|
},
|
|
"review-css-colors": {
|
|
"title": "CSS 색상 복습",
|
|
"intro": [
|
|
"CSS 색상에 대해 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>rgb()</code>, <code>hsl()</code>, <code>hex code</code> 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-colors": {
|
|
"title": "CSS 색상 퀴즈",
|
|
"intro": ["이 퀴즈로 CSS 색상에 대한 지식을 테스트하세요."]
|
|
},
|
|
"lecture-best-practices-for-styling-forms": {
|
|
"title": "폼 스타일링 모범사례",
|
|
"intro": [
|
|
"이 강의들에서 폼 스타일링 모범사례와 <code>color</code>, <code>datetime-local</code> 같은 특수 입력을 스타일링할 때 발생할 수 있는 문제를 배우세요."
|
|
]
|
|
},
|
|
"workshop-registration-form": {
|
|
"title": "등록 양식 디자인",
|
|
"intro": [
|
|
"이 워크숍에서 가입 페이지를 디자인하며 HTML 폼을 배우세요. 폼에 어떤 종류의 데이터를 입력할 수 있는지 제어하는 방법과 페이지를 스타일링하는 새로운 CSS 도구를 배우세요."
|
|
]
|
|
},
|
|
"lab-contact-form": {
|
|
"title": "문의 양식 디자인",
|
|
"intro": [
|
|
"이 실습에서 HTML로 문의 양식을 디자인하고 CSS로 스타일하세요."
|
|
]
|
|
},
|
|
"workshop-game-settings-panel": {
|
|
"title": "게임 설정 패널 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 게임 설정 패널을 만들어 체크박스 스타일링을 연습하세요."
|
|
]
|
|
},
|
|
"lab-feature-selection": {
|
|
"title": "기능 선택 페이지 디자인하기",
|
|
"intro": [
|
|
"이 실습에서는 사용자 정의 스타일의 체크박스를 사용해 기능 선택 페이지를 만듭니다.",
|
|
"라벨과 체크박스를 포함한 기능 카드를 만든 다음 체크박스에 사용자 정의 스타일을 적용합니다."
|
|
]
|
|
},
|
|
"review-styling-forms": {
|
|
"title": "폼 스타일링 복습",
|
|
"intro": [
|
|
"폼 스타일링에 대해 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 폼 입력 스타일링, <code>appearance: none</code> 사용법 등을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-styling-forms": {
|
|
"title": "폼 스타일링 퀴즈",
|
|
"intro": ["이 퀴즈로 폼 스타일링 지식을 테스트하세요."]
|
|
},
|
|
"lecture-working-with-css-transforms-overflow-and-filters": {
|
|
"title": "CSS 변형, 오버플로우 및 필터 작업",
|
|
"intro": [
|
|
"이 강의들에서 CSS 변형, 오버플로우, 필터를 다루는 방법을 배우세요. 또한 박스 모델이 무엇인지와 작동 방식을 배우세요."
|
|
]
|
|
},
|
|
"workshop-rothko-painting": {
|
|
"title": "로스코 회화 디자인",
|
|
"intro": [
|
|
"각 HTML 요소는 자체 여백과 테두리를 가진 상자입니다. 이를 박스 모델이라고 합니다.",
|
|
"이 워크숍에서 CSS와 박스 모델을 사용해 로스코 스타일의 직사각형 작품을 만드세요."
|
|
]
|
|
},
|
|
"lab-confidential-email-page": {
|
|
"title": "비밀 이메일 페이지 만들기",
|
|
"intro": [
|
|
"이 실습에서 HTML로 웹페이지를 만들고 CSS 속성으로 콘텐츠를 마스킹하세요."
|
|
]
|
|
},
|
|
"review-css-layout-and-effects": {
|
|
"title": "CSS 레이아웃 및 효과 복습",
|
|
"intro": [
|
|
"CSS 레이아웃 및 효과에 대해 퀴즈를 보기 전에 먼저 복습하세요.",
|
|
"이 페이지를 열어 <code>transform</code> 속성, 박스 모델, <code>overflow</code> 속성 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-layout-and-effects": {
|
|
"title": "CSS 레이아웃 및 효과 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 박스 모델, transform, filter, overflow 등 CSS 레이아웃과 효과에 대해 배운 내용을 테스트하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-css-flexbox": {
|
|
"title": "CSS Flexbox 작업",
|
|
"intro": [
|
|
"이 강의들에서 CSS Flexbox의 작동 원리, 속성 및 사용 시점을 배우세요."
|
|
]
|
|
},
|
|
"workshop-flexbox-photo-gallery": {
|
|
"title": "Flexbox 사진 갤러리 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 Flexbox를 사용해 반응형 사진 갤러리 웹페이지를 만드세요."
|
|
]
|
|
},
|
|
"workshop-colorful-boxes": {
|
|
"title": "컬러풀 박스 세트 디자인",
|
|
"intro": [
|
|
"이 워크숍에서는 CSS flexbox로 컬러 박스 모음을 디자인하는 연습을 합니다."
|
|
]
|
|
},
|
|
"lab-pricing-plans-layout": {
|
|
"title": "요금제 레이아웃 페이지 디자인",
|
|
"intro": [
|
|
"이 실습에서는 flexbox를 사용해 일반적인 3카드 티어 레이아웃을 만드세요.",
|
|
"<code>flex</code>, <code>flex-grow</code>, <code>order</code> 등과 같은 flexbox 속성으로 요소 정렬을 연습하세요."
|
|
]
|
|
},
|
|
"review-css-flexbox": {
|
|
"title": "CSS Flexbox 복습",
|
|
"intro": [
|
|
"CSS Flexbox에 대해 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>flex-direction</code>, <code>justify-content</code>, <code>align-items</code>, <code>flex-wrap</code> 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-flexbox": {
|
|
"title": "CSS Flexbox 퀴즈",
|
|
"intro": ["이 퀴즈로 CSS Flexbox에서 배운 내용을 테스트하세요."]
|
|
},
|
|
"lab-page-of-playing-cards": {
|
|
"title": "플레이 카드 페이지 만들기",
|
|
"intro": [
|
|
"이 실습에서 Flexbox를 사용해 플레이 카드 웹페이지를 만드세요.",
|
|
"<code>flex-direction</code>, <code>justify-content</code>, <code>align-self</code> 등과 같은 Flexbox 속성으로 요소 정렬을 연습하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-css-fonts": {
|
|
"title": "CSS 글꼴 작업",
|
|
"intro": [
|
|
"이 강의들에서 타이포그래피 모범사례, 글꼴, <code>text-shadow</code> 속성 등을 배우세요."
|
|
]
|
|
},
|
|
"workshop-nutritional-label": {
|
|
"title": "영양성분 라벨 만들기",
|
|
"intro": [
|
|
"타이포그래피는 텍스트를 읽기 쉽고 목적에 맞게 스타일링하는 기술입니다.",
|
|
"이 워크숍에서 타이포그래피를 사용해 영양성분 라벨 웹페이지를 만드세요. 텍스트 스타일링, 줄간격 조정, CSS로 텍스트 위치 지정 방법을 연습하세요."
|
|
]
|
|
},
|
|
"lab-newspaper-article": {
|
|
"title": "신문 기사 만들기",
|
|
"intro": [
|
|
"이 실습에서 HTML과 CSS로 신문 기사 페이지를 만드세요.",
|
|
"<code>font-family</code>, <code>font-size</code>, <code>font-weight</code> 등으로 글꼴을 스타일링하는 연습을 하세요."
|
|
]
|
|
},
|
|
"review-css-typography": {
|
|
"title": "CSS 타이포그래피 복습",
|
|
"intro": [
|
|
"타이포그래피 기초에 대해 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 웹 세이프 폰트, <code>font-family</code> 속성 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-typography": {
|
|
"title": "CSS 타이포그래피 퀴즈",
|
|
"intro": ["이 퀴즈로 타이포그래피에 대한 지식을 테스트하세요."]
|
|
},
|
|
"lecture-best-practices-for-accessibility-and-css": {
|
|
"title": "접근성과 CSS 모범사례",
|
|
"intro": [
|
|
"이 강의들에서 CSS의 접근성 모범사례와 웹사이트의 좋은 색 대비를 확인하는 도구를 배우세요."
|
|
]
|
|
},
|
|
"workshop-accessibility-quiz": {
|
|
"title": "퀴즈 웹페이지 만들기",
|
|
"intro": [
|
|
"접근성이란 장애가 있는 사람을 포함해 모든 사람이 웹페이지를 사용할 수 있게 만드는 과정입니다.",
|
|
"이 워크숍에서 퀴즈 웹페이지를 만들며 키보드 단축키, ARIA 속성, 디자인 모범사례 같은 접근성 도구를 배우세요."
|
|
]
|
|
},
|
|
"lab-tribute-page": {
|
|
"title": "추모 페이지 만들기",
|
|
"intro": [
|
|
"이 실습에서는 실존 또는 허구의 주제 중 하나를 골라 추모 페이지를 만드세요."
|
|
]
|
|
},
|
|
"review-css-accessibility": {
|
|
"title": "CSS 접근성 복습",
|
|
"intro": [
|
|
"CSS와 접근성에 대해 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 색 대비 도구와 접근성 모범사례 같은 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-accessibility": {
|
|
"title": "CSS 접근성 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 CSS로 웹페이지를 접근 가능하게 만드는 방법에 대해 배운 내용을 테스트하세요."
|
|
]
|
|
},
|
|
"lecture-understanding-how-to-work-with-floats-and-positioning-in-css": {
|
|
"title": "CSS에서 플로트와 포지셔닝 다루기 이해하기",
|
|
"intro": [
|
|
"이 강의들에서 CSS 포지셔닝과 플로트를 사용하는 방법을 배우세요. <code>absolute</code>, <code>relative</code>, <code>fixed</code>, <code>sticky</code> 포지셔닝과 <code>z-index</code> 속성을 다룹니다."
|
|
]
|
|
},
|
|
"workshop-cat-painting": {
|
|
"title": "고양이 그림 만들기",
|
|
"intro": [
|
|
"CSS 포지셔닝을 마스터하는 것은 시각적으로 매력적이고 반응형인 웹 레이아웃을 만드는 데 필수적입니다.",
|
|
"이 워크숍에서 고양이 그림을 만드세요. absolute 포지셔닝, <code>z-index</code>, <code>transform</code> 속성 사용법을 배우세요."
|
|
]
|
|
},
|
|
"lab-house-painting": {
|
|
"title": "집 그림 만들기",
|
|
"intro": [
|
|
"이 실습에서 CSS를 사용해 집 그림을 만드세요.",
|
|
"집의 각 부분을 설계하고 <code>position</code>, <code>top</code>, <code>left</code> 등 CSS 속성으로 위치를 지정하는 연습을 하세요."
|
|
]
|
|
},
|
|
"review-css-positioning": {
|
|
"title": "CSS 포지셔닝 복습",
|
|
"intro": [
|
|
"CSS 포지셔닝 기초에 대해 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 플로트, 상대 포지셔닝, 절대 포지셔닝 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-positioning": {
|
|
"title": "CSS 포지셔닝 퀴즈",
|
|
"intro": ["이 퀴즈로 CSS 포지셔닝에 대한 지식을 테스트하세요."]
|
|
},
|
|
"lecture-working-with-attribute-selectors": {
|
|
"title": "속성 선택자 작업",
|
|
"intro": [
|
|
"이 강의들에서 속성 선택자를 배우고 링크나 목록 같은 요소를 타깃팅하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-balance-sheet": {
|
|
"title": "대차대조표 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 의사 선택자를 사용해 대차대조표를 만드세요. 마우스 오버 시 요소 스타일을 변경하고 웹페이지에서 다른 이벤트를 트리거하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"review-css-attribute-selectors": {
|
|
"title": "CSS 속성 선택자 복습",
|
|
"intro": [
|
|
"CSS 속성 선택자 기초에 대해 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>href</code> 및 <code>title</code> 속성을 가진 링크를 타깃팅하는 다양한 속성 선택자 사용법을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-attribute-selectors": {
|
|
"title": "CSS 속성 선택자 퀴즈",
|
|
"intro": ["이 퀴즈로 CSS 속성 선택자에 대한 지식을 테스트하세요."]
|
|
},
|
|
"lab-book-inventory-app": {
|
|
"title": "도서 재고 앱 만들기",
|
|
"intro": [
|
|
"이 실습에서 도서 재고 앱을 만드세요.",
|
|
"<code>[attribute]</code>, <code>[attribute=value]</code>, <code>[attribute~=value]</code> 등 CSS 속성 선택자를 연습하세요."
|
|
]
|
|
},
|
|
"lecture-best-practices-for-responsive-web-design": {
|
|
"title": "반응형 웹 디자인 모범사례",
|
|
"intro": [
|
|
"이 강의들에서 반응형 웹 디자인 모범사례, 그리드·플렉스박스·미디어 쿼리·미디어 브레이크포인트가 반응형 디자인에서 수행하는 역할 등을 배우세요."
|
|
]
|
|
},
|
|
"workshop-piano": {
|
|
"title": "피아노 디자인",
|
|
"intro": [
|
|
"반응형 디자인은 다양한 크기 화면에서 웹페이지가 어떻게 보여야 하는지 정의합니다.",
|
|
"이 워크숍에서 CSS와 반응형 디자인을 사용해 피아노를 코딩하세요. 미디어 쿼리와 의사 선택자도 연습하세요."
|
|
]
|
|
},
|
|
"review-responsive-web-design": {
|
|
"title": "반응형 웹 디자인 복습",
|
|
"intro": [
|
|
"반응형 디자인 기초에 대해 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 미디어 쿼리, 브레이크포인트, 모바일 우선 접근법 같은 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-responsive-web-design": {
|
|
"title": "반응형 웹 디자인 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 웹페이지를 반응형으로 만드는 방법에 대해 배운 내용을 테스트하세요."
|
|
]
|
|
},
|
|
"lab-technical-documentation-page": {
|
|
"title": "기술 문서 페이지 만들기",
|
|
"intro": [
|
|
"이 실습에서 주제에 대한 설명서나 참조로 사용할 기술 문서 페이지를 만드세요.",
|
|
"미디어 쿼리를 연습해 반응형 디자인을 만드세요."
|
|
]
|
|
},
|
|
"lecture-working-with-css-variables": {
|
|
"title": "CSS 변수 작업",
|
|
"intro": [
|
|
"이 강의들에서 커스텀 속성(또는 CSS 변수)을 정의하고 사용하는 방법을 배우세요. 또한 <code>@property</code> 규칙과 작동 방식을 배우세요."
|
|
]
|
|
},
|
|
"workshop-city-skyline": {
|
|
"title": "도시 스카이라인 만들기",
|
|
"intro": [
|
|
"CSS 변수는 스타일을 구성하고 재사용하는 데 도움이 됩니다.",
|
|
"이 워크숍에서 도시 스카이라인을 만드세요. 필요할 때마다 재사용할 수 있도록 CSS 변수를 구성하는 방법을 연습하세요."
|
|
]
|
|
},
|
|
"lab-availability-table": {
|
|
"title": "가능성 표 만들기",
|
|
"intro": [
|
|
"이 실습에서는 회의 참석 가능성을 보여주는 가능성 표를 만드세요.",
|
|
"CSS 변수를 사용해 색상, 글꼴 및 기타 스타일을 저장하고 재사용하는 연습을 하세요."
|
|
]
|
|
},
|
|
"review-css-variables": {
|
|
"title": "CSS 변수 복습",
|
|
"intro": [
|
|
"CSS 변수 기초에 대해 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 CSS 커스텀 속성(CSS 변수)과 <code>@property</code> 규칙 다루는 방법을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-variables": {
|
|
"title": "CSS 변수 퀴즈",
|
|
"intro": ["이 퀴즈로 CSS 변수에 대한 지식을 테스트하세요."]
|
|
},
|
|
"lecture-working-with-css-grid": {
|
|
"title": "CSS Grid 작업",
|
|
"intro": [
|
|
"이 강의들에서 CSS Grid와 여러 속성의 사용법, 그리고 CSS Grid가 Flexbox와 어떻게 다른지 배우세요."
|
|
]
|
|
},
|
|
"workshop-magazine": {
|
|
"title": "잡지 만들기",
|
|
"intro": [
|
|
"CSS Grid는 웹페이지 디자인의 행과 열을 제어할 수 있게 해줍니다.",
|
|
"이 워크숍에서 CSS Grid를 사용해 잡지 기사 페이지를 만드세요. 그리드 행과 그리드 열 같은 개념을 연습하세요."
|
|
]
|
|
},
|
|
"lab-newspaper-layout": {
|
|
"title": "신문 레이아웃 디자인",
|
|
"intro": [
|
|
"이 실습에서 CSS Grid를 사용해 신문 레이아웃을 디자인하세요. 그리드 행과 그리드 열 같은 개념을 포함합니다."
|
|
]
|
|
},
|
|
"lecture-debugging-css": {
|
|
"title": "CSS 디버깅",
|
|
"intro": [
|
|
"이 강의에서 브라우저 개발자 도구와 CSS 검사기를 사용해 CSS를 디버깅하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"review-css-grid": {
|
|
"title": "CSS Grid 복습",
|
|
"intro": [
|
|
"CSS Grid 기초에 대해 퀴즈를 보기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>grid-template-columns</code>, <code>grid-gap</code> 등 다양한 CSS Grid 속성 다루는 방법을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-grid": {
|
|
"title": "CSS Grid 퀴즈",
|
|
"intro": ["이 퀴즈로 CSS Grid에 대한 지식을 테스트하세요."]
|
|
},
|
|
"lab-product-landing-page": {
|
|
"title": "제품 랜딩 페이지 만들기",
|
|
"intro": [
|
|
"이 프로젝트에서 자신이 선택한 제품을 마케팅하기 위한 제품 랜딩 페이지를 만드세요."
|
|
]
|
|
},
|
|
"lecture-animations-and-accessibility": {
|
|
"title": "애니메이션과 접근성",
|
|
"intro": [
|
|
"이 강의들에서 CSS 애니메이션과 관련된 접근성 문제를 배우세요. 또한 <code>prefers-reduced-motion</code>이 어떻게 접근성 문제를 완화하는 데 도움이 되는지 배우세요."
|
|
]
|
|
},
|
|
"workshop-ferris-wheel": {
|
|
"title": "애니메이션 관람차 만들기",
|
|
"intro": [
|
|
"CSS 애니메이션을 사용해 웹페이지의 특정 부분에 주목을 끌고 더 흥미롭게 만들 수 있습니다.",
|
|
"이 워크숍에서 관람차를 만드세요. 요소에 애니메이션을 적용하고 변형하며 속도를 조절하는 방법을 연습하세요."
|
|
]
|
|
},
|
|
"lab-moon-orbit": {
|
|
"title": "달 궤도 애니메이션 만들기",
|
|
"intro": [
|
|
"이 실습에서 지구 주변을 도는 달의 애니메이션을 만드세요.",
|
|
"<code>animation-name</code>, <code>animation-duration</code>, <code>animation-timing-function</code> 등 애니메이션 속성을 연습하세요."
|
|
]
|
|
},
|
|
"workshop-flappy-penguin": {
|
|
"title": "플래피 펭귄 만들기",
|
|
"intro": [
|
|
"HTML 요소를 변형하여 시선을 끄는 매력적인 디자인을 만들 수 있습니다. transform으로 요소를 회전하거나 크기를 조정하는 등 작업하세요.",
|
|
"이 워크숍에서 펭귄을 만들고 CSS transform으로 펭귄 부분을 위치시키고 크기를 조정하며 배경을 만들고 애니메이션을 적용하세요."
|
|
]
|
|
},
|
|
"lab-personal-portfolio": {
|
|
"title": "개인 포트폴리오 만들기",
|
|
"intro": ["이 프로젝트에서 자신만의 개인 포트폴리오 페이지를 만드세요."]
|
|
},
|
|
"review-css-animations": {
|
|
"title": "CSS 애니메이션 복습",
|
|
"intro": [
|
|
"CSS 애니메이션을 다루기 전에 학습한 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>prefers-reduced-motion</code>, <code>@keyframes</code> 규칙 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-animations": {
|
|
"title": "CSS 애니메이션 퀴즈",
|
|
"intro": ["이 퀴즈로 CSS 애니메이션에 대한 지식을 테스트하세요."]
|
|
},
|
|
"review-css": {
|
|
"title": "CSS 복습",
|
|
"intro": [
|
|
"CSS 준비시험을 보기 전에 이전 모듈에서 배운 개념을 먼저 복습하세요.",
|
|
"이 페이지를 열어 CSS 기초, 반응형 웹 디자인, 애니메이션, 접근성 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"exam-responsive-web-design-certification": {
|
|
"title": "반응형 웹 디자인 자격증 시험",
|
|
"intro": ["이 시험에 합격해 반응형 웹 디자인 자격증을 취득하세요."]
|
|
}
|
|
}
|
|
},
|
|
"a2-professional-spanish": {
|
|
"title": "A2 전문 스페인어 자격증(베타)",
|
|
"note": "이 자격증은 현재 개발 중입니다. 현재 이 섹션에 대해 취득 가능한 자격증은 없지만 곧 제공될 예정입니다. 그동안 아래에 마련된 강좌들을 자유롭게 탐색하세요.",
|
|
"intro": ["도입문(플레이스홀더)"],
|
|
"blocks": {
|
|
"talk-about-who-you-are-by-using-key-verbs": {
|
|
"title": "핵심 동사를 사용해 자기소개하기",
|
|
"intro": [
|
|
"간단하고 전문적인 방식으로 스페인어로 자신을 소개하는 법을 배우세요. 이 모듈에서는 누구인지, 출신지, 직업, 기분, 좋아하거나 싫어하는 것을 말하는 법을 배우세요."
|
|
]
|
|
},
|
|
"get-to-know-others-by-asking-simple-questions": {
|
|
"title": "간단한 질문으로 타인 알아가기",
|
|
"intro": [
|
|
"간단한 대화에서 질문하고 답하는 법을 배우세요. 다섯 편의 짧은 대화를 통해 일상, 감정, 선호, 작업공간, 개인정보에 대해 말하는 연습을 하세요. 정중한 질문을 하고 짧게 답하며 부정을 자연스럽게 사용하는 법도 배우세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"a2-professional-chinese": {
|
|
"title": "A2 전문 중국어 자격증(베타)",
|
|
"note": "이 자격증은 현재 개발 중입니다. 현재 이 섹션에 대해 취득 가능한 자격증은 없지만 곧 제공될 예정입니다. 그동안 아래에 마련된 강좌들을 자유롭게 탐색하세요.",
|
|
"intro": ["도입문(플레이스홀더)"],
|
|
"blocks": {
|
|
"talk-about-what-you-do-by-using-key-verbs": {
|
|
"title": "핵심 동사를 사용해 직업에 대해 말하기",
|
|
"intro": [
|
|
"간단하고 전문적인 방식으로 중국어로 자신을 소개하는 법을 배우세요. 이 모듈에서는 누구인지, 출신지, 직업, 기분, 좋아하거나 싫어하는 것을 말하는 법을 배우세요."
|
|
]
|
|
},
|
|
"get-to-know-colleagues-by-asking-simple-questions": {
|
|
"title": "간단한 질문으로 동료 알아가기",
|
|
"intro": [
|
|
"간단한 대화에서 질문하고 답하는 법을 배우세요. 다섯 편의 짧은 대화를 통해 일상, 감정, 선호, 작업공간, 개인정보에 대해 말하는 연습을 하세요. 정중한 질문을 하고 짧게 답하며 부정을 자연스럽게 사용하는 법도 배우세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"a1-professional-chinese": {
|
|
"title": "A1 전문 중국어 자격증(베타)",
|
|
"note": "이 자격증은 개발 중입니다. 현재 도입 장을 게시했으며 이후 장은 교육설계팀의 개발에 따라 순차적으로 공개됩니다. 모든 장이 제공되면 자격증 시험을 공개하겠습니다.",
|
|
"intro": [
|
|
"이 A1 Professional Chinese 교육과정에서 중국어의 기초 요소를 배우세요. 이는 Common European Framework of Reference (CEFR)의 A1 수준을 따르며 전문 환경에서 특히 유용한 어휘에 중점을 두었습니다.",
|
|
"교육과정은 워밍업, Learn, Practice, Review 페이지와 퀴즈가 포함된 여러 모듈로 나뉘어 있어 다음 모듈로 넘어가기 전에 내용을 충분히 이해했는지 확인할 수 있습니다.",
|
|
"각 챕터에는 중국어 학습의 첫걸음을 확신 있게 내딛도록 돕는 수백 개의 대화형 과제가 포함되어 있습니다."
|
|
],
|
|
"chapters": {
|
|
"zh-a1-chapter-welcome-to-a1-professional-chinese": "A1 Professional Chinese에 오신 것을 환영합니다.",
|
|
"zh-a1-chapter-pinyin": "병음",
|
|
"zh-a1-chapter-greetings-and-introductions": "인사와 소개",
|
|
"zh-a1-chapter-numbers-and-personal-information": "숫자와 개인정보",
|
|
"zh-a1-chapter-expressing-what-you-can-and-cant-do": "할 수 있는 것과 할 수 없는 것 표현하기"
|
|
},
|
|
"modules": {
|
|
"zh-a1-module-introduction-and-certification-overview": "소개 및 자격증 개요",
|
|
"zh-a1-module-initials-and-finals": "초성 및 운모",
|
|
"zh-a1-module-greetings-and-basic-introductions": "인사 및 기본 소개",
|
|
"zh-a1-module-asking-and-giving-basic-information": "기본 정보 묻기 및 제공하기",
|
|
"zh-a1-module-numbers-below-100": "Numbers Below 100",
|
|
"zh-a1-module-communicating-personal-information": "개인정보 전달하기",
|
|
"zh-a1-module-talking-about-personal-skills": "개인 기술에 대해 말하기",
|
|
"zh-a1-module-discussing-team-skills": "팀 기술 논의하기"
|
|
},
|
|
"module-intros": {
|
|
"zh-a1-module-introducing-others": {
|
|
"note": "2026년 예정",
|
|
"intro": [
|
|
"이 모듈에서는 이름, 역할, 국적, 나이 등 다른 사람에 대해 정보를 소개하는 짧은 독백을 이해하는 연습을 하세요."
|
|
]
|
|
},
|
|
"zh-a1-module-getting-to-know-the-team": {
|
|
"note": "2026년 예정",
|
|
"intro": [
|
|
"이 모듈에서는 동료에 대해 간단한 질문을 주고받는 짧은 대화를 이해하는 연습을 하세요."
|
|
]
|
|
},
|
|
"zh-a1-module-communicating-personal-information": {
|
|
"note": "Coming 2026",
|
|
"intro": [
|
|
"In this module, you will practice understanding conversations that communicate personal information, such as age and phone numbers."
|
|
]
|
|
},
|
|
"zh-a1-module-talking-about-personal-skills": {
|
|
"note": "2026년 예정",
|
|
"intro": [
|
|
"이 모듈에서는 사람들이 할 수 있는 것과 할 수 없는 것(예: 언어, 업무 기술)에 대한 짧은 독백을 이해하는 연습을 하세요."
|
|
]
|
|
},
|
|
"zh-a1-module-discussing-team-skills": {
|
|
"note": "2026년 예정",
|
|
"intro": [
|
|
"이 모듈에서는 팀에서 누가 어떤 업무를 할 수 있는지와 프로젝트가 어떻게 시작되는지에 대한 짧은 대화를 이해하는 연습을 하세요."
|
|
]
|
|
}
|
|
},
|
|
"blocks": {
|
|
"zh-a1-learn-certification-introduction": {
|
|
"title": "자격증 소개",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-learn-simple-finals": {
|
|
"title": "심플 운모",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-learn-initials": {
|
|
"title": "초성",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-learn-compound-finals": {
|
|
"title": "복합 운모",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-learn-nasal-finals": {
|
|
"title": "비음 운모",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-warm-up-greeting-new-colleagues": {
|
|
"title": "새 동료에게 인사하기",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-learn-understanding-greetings-and-introductions": {
|
|
"title": "인사와 소개 이해하기",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-practice-introducing-yourself": {
|
|
"title": "자기소개하기",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-review-greetings-and-introductions": {
|
|
"title": "인사 및 소개 복습",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-quiz-greetings-and-introductions": {
|
|
"title": "인사 및 소개 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-learn-understanding-questions-and-answers": {
|
|
"title": "질문과 답변 이해하기",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-practice-exchanging-basic-information": {
|
|
"title": "기본 정보 교환하기",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-review-introduction-questions": {
|
|
"title": "소개 질문 복습",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-quiz-introduction-questions": {
|
|
"title": "소개 질문 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-warm-up-introducing-others-basics": {
|
|
"title": "타인 소개 기초",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-learn-meeting-the-team": {
|
|
"title": "팀 만나기",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-learn-a-new-colleague": {
|
|
"title": "새 동료",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-learn-my-family": {
|
|
"title": "나의 가족",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-practice-introducing-others": {
|
|
"title": "타인 소개 연습",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-review-introducing-others": {
|
|
"title": "타인 소개 복습",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-quiz-check-your-introduction": {
|
|
"title": "자기소개 확인하기",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-warm-up-knowing-the-team-basics": {
|
|
"title": "팀 알기 기초",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-learn-asking-about-the-team": {
|
|
"title": "팀에 대해 묻기",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-practice-talking-about-others": {
|
|
"title": "타인에 대해 말하기",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-review-team-introduction": {
|
|
"title": "팀 소개 복습",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-quiz-team-introduction": {
|
|
"title": "팀 소개 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-warm-up-personal-skills-basics": {
|
|
"title": "개인 기술 기초",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-learn-can-or-cannot": {
|
|
"title": "할 수 있음과 할 수 없음",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-practice-personal-skills": {
|
|
"title": "개인 기술 연습",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-review-describing-skills": {
|
|
"title": "기술 설명 복습",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-quiz-describing-skills": {
|
|
"title": "기술 설명 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-warm-up-team-skills-basics": {
|
|
"title": "팀 기술 기초",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-learn-who-can-do-what-on-the-team": {
|
|
"title": "팀에서 누가 무엇을 할 수 있는지",
|
|
"intro": ["팀 구성원 능력과 역할을 논의하는 방법을 배우세요."]
|
|
},
|
|
"zh-a1-practice-talking-about-skills": {
|
|
"title": "기술에 대해 말하기",
|
|
"intro": ["팀 상황에서 다양한 기술을 논의하는 연습을 하세요."]
|
|
},
|
|
"zh-a1-review-discussing-team-skills": {
|
|
"title": "팀 기술 논의 복습",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-quiz-discussing-team-skills": {
|
|
"title": "팀 기술 논의 퀴즈",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-warm-up-meeting-new-teammates": {
|
|
"title": "새 팀원을 만나기",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-learn-special-spelling-rules": {
|
|
"title": "특수 철자 규칙",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-practice-pinyin": {
|
|
"title": "병음 연습",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-learn-numbers-0-to-10": {
|
|
"title": "0에서 10까지 숫자",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-practice-numbers-0-to-10": {
|
|
"title": "0에서 10까지 숫자 연습",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-learn-numbers-11-to-19": {
|
|
"title": "11에서 19까지 숫자",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-practice-numbers-11-to-19": {
|
|
"title": "11에서 19까지 숫자 연습",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-learn-numbers-20-to-99": {
|
|
"title": "20에서 99까지 숫자",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-practice-numbers-20-to-99": {
|
|
"title": "20에서 99까지 숫자 연습",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-review-numbers-below-100": {
|
|
"title": "Numbers Below 100 Review",
|
|
"intro": ["", ""]
|
|
},
|
|
"zh-a1-quiz-numbers-below-100": {
|
|
"title": "Numbers Below 100 Quiz",
|
|
"intro": ["", ""]
|
|
}
|
|
}
|
|
},
|
|
"basic-html": {
|
|
"title": "기본 HTML 배우기",
|
|
"summary": [
|
|
"HTML 태그를 사용해 텍스트, 이미지, 링크를 추가하여 간단한 웹페이지를 만드는 법을 배우세요."
|
|
],
|
|
"intro": [
|
|
"HTML은 HyperText Markup Language의 약자로 웹페이지의 콘텐츠와 구조를 나타냅니다. 이 과정에서 HTML 작성의 기본을 배우세요."
|
|
],
|
|
"blocks": {
|
|
"workshop-curriculum-outline": {
|
|
"title": "교과과정 개요 만들기",
|
|
"intro": [
|
|
"freeCodeCamp에 오신 것을 환영합니다!",
|
|
"이 워크숍은 HTML과 전반적인 코딩 입문이 됩니다. 제목 요소와 단락 요소에 대해 배우세요."
|
|
]
|
|
},
|
|
"lab-debug-camperbots-profile-page": {
|
|
"title": "Camperbot의 프로필 페이지 디버그하기",
|
|
"intro": [
|
|
"Camperbot도 코드를 배우고 있어 HTML에 도움이 필요합니다.",
|
|
"이 실습에서는 Camperbot의 코드에서 오류를 찾아 고치도록 도와주세요."
|
|
]
|
|
},
|
|
"lecture-understanding-html-attributes": {
|
|
"title": "HTML 속성 이해하기",
|
|
"intro": [
|
|
"이 강의들에서는 웹페이지를 만들기 위한 마크업 언어인 HTML(하이퍼텍스트 마크업 언어)에 대해 더 배우세요.",
|
|
"웹에서의 HTML 역할과 HTML 속성이 무엇인지 배우세요."
|
|
]
|
|
},
|
|
"lab-debug-pet-adoption-page": {
|
|
"title": "반려동물 입양 페이지 디버그하기",
|
|
"intro": [
|
|
"이 실습에서는 반려동물 입양 페이지에서 오류를 찾아 고치세요."
|
|
]
|
|
},
|
|
"lecture-understanding-the-html-boilerplate": {
|
|
"title": "HTML 보일러플레이트 이해하기",
|
|
"intro": [
|
|
"이 강의들에서는 웹페이지용 기초 템플릿인 HTML 보일러플레이트에 대해 배우세요.",
|
|
"<code>link</code>, <code>meta</code> 요소 등 보일러플레이트에서 사용하는 요소를 다루는 방법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-cat-photo-app": {
|
|
"title": "고양이 사진 앱 만들기",
|
|
"intro": [
|
|
"HTML은 HyperText Markup Language의 약자이며 웹페이지의 내용과 구조를 나타냅니다.",
|
|
"이 워크숍에서는 제목, 단락, 이미지, 링크, 목록과 같은 기본 HTML 요소를 다루는 방법을 배우세요."
|
|
]
|
|
},
|
|
"lab-recipe-page": {
|
|
"title": "레시피 페이지 만들기",
|
|
"intro": [
|
|
"이 실습에서는 좋아하는 레시피로 웹페이지를 만들어 HTML 기초를 복습하세요. HTML 보일러플레이트를 만들고 제목, 목록, 이미지 등을 다루세요."
|
|
]
|
|
},
|
|
"lecture-html-fundamentals": {
|
|
"title": "HTML 기초",
|
|
"intro": [
|
|
"이 강의들에서는 <code>div</code> 요소, <code>id</code>와 <code>class</code> 속성, HTML 보일러플레이트, HTML 엔티티 등 HTML 기초를 배우세요."
|
|
]
|
|
},
|
|
"workshop-bookstore-page": {
|
|
"title": "서점 페이지 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 <code>div</code> 요소와 클래스, id를 사용해 서점 페이지를 만들어 연습하세요."
|
|
]
|
|
},
|
|
"lecture-understanding-how-html-affects-seo": {
|
|
"title": "HTML이 SEO에 미치는 영향 이해하기",
|
|
"intro": [
|
|
"이 강의들에서는 HTML 코드가 검색엔진최적화(SEO)에 어떤 영향을 주는지 배우세요."
|
|
]
|
|
},
|
|
"lab-travel-agency-page": {
|
|
"title": "여행사 페이지 만들기",
|
|
"intro": [
|
|
"이 실습에서는 여행사용 웹페이지를 만들어 HTML 기초를 복습하세요. 이미지, <code>figure</code> 요소, <code>figcaption</code> 요소, 앵커(<code>anchor</code>) 요소 등을 다루세요."
|
|
]
|
|
},
|
|
"lecture-working-with-audio-and-video-elements": {
|
|
"title": "오디오 및 비디오 요소 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 <code>audio</code>와 <code>video</code> 요소를 다루는 방법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-html-video-player": {
|
|
"title": "HTML 비디오 플레이어 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 HTML을 사용해 기본 비디오 플레이어를 만들어 보세요.",
|
|
"이 프로젝트에서는 <code>video</code> 요소, 비디오 플레이어 설정 등을 다루세요."
|
|
]
|
|
},
|
|
"lab-html-audio-and-video-player": {
|
|
"title": "오디오·비디오 플레이어 만들기",
|
|
"intro": [
|
|
"이 실습에서는 <code>video</code>와 <code>audio</code> 요소를 사용해 컨트롤과 소스 속성이 있는 오디오·비디오 플레이어를 만드세요."
|
|
]
|
|
},
|
|
"lecture-working-with-images-and-svgs": {
|
|
"title": "이미지 및 SVG 다루기",
|
|
"intro": ["이 강의들에서는 SVG 다루기와 이미지 최적화 기법을 배우세요."]
|
|
},
|
|
"workshop-build-a-heart-icon": {
|
|
"title": "하트 아이콘 만들기",
|
|
"intro": ["이 워크숍에서는 SVG로 하트 아이콘을 만드는 연습을 하세요."]
|
|
},
|
|
"lecture-working-with-media": {
|
|
"title": "iframe 요소 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 외부 사이트를 웹페이지에 포함할 때 사용하는 <code>iframe</code> 요소를 다루는 방법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-build-a-video-display-using-iframe": {
|
|
"title": "iframe로 비디오 표시 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 <code>iframe</code> 요소를 사용해 비디오 표시를 만드는 방법을 배우세요."
|
|
]
|
|
},
|
|
"lab-video-compilation-page": {
|
|
"title": "비디오 컴필레이션 페이지 만들기",
|
|
"intro": [
|
|
"이 실습에서는 비디오 컴필레이션 웹페이지를 만들고 <code>iframe</code> 요소를 연습하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-links": {
|
|
"title": "링크 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 링크, <code>target</code> 속성, 다양한 링크 상태, 절대 경로와 상대 경로 등을 배우세요."
|
|
]
|
|
},
|
|
"review-basic-html": {
|
|
"title": "기본 HTML 복습",
|
|
"intro": [
|
|
"지금까지 배운 HTML 지식을 퀴즈로 보기 전에 개념을 먼저 복습하세요.",
|
|
"이 페이지를 열어 HTML 보일러플레이트, <code>audio</code>와 <code>video</code> 요소, 다양한 <code>target</code> 속성 값 등을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-basic-html": {
|
|
"title": "기본 HTML 퀴즈",
|
|
"intro": [
|
|
"다음 퀴즈로 지금까지 배운 기본 HTML 개념을 테스트하세요.",
|
|
"시험을 준비 중이면 연습용 퀴즈 세트가 여러 개 제공됩니다. 퀴즈를 완료한 후 이 페이지로 돌아와 새로운 문제 세트에 접근하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"semantic-html": {
|
|
"title": "시맨틱 HTML 배우기",
|
|
"summary": [
|
|
"구조, 접근성(accessibility), SEO를 개선하는 시맨틱 태그를 사용해 더 깔끔하고 의미 있는 HTML을 작성하는 방법을 배우세요."
|
|
],
|
|
"intro": ["이 인터랙티브 과정에서 시맨틱 HTML 작성 연습을 하세요."],
|
|
"blocks": {
|
|
"lecture-importance-of-semantic-html": {
|
|
"title": "시맨틱 HTML의 중요성",
|
|
"intro": [
|
|
"이 강의들에서는 시맨틱 HTML과 그 중요성, 시맨틱 요소들, 시맨틱 HTML과 프레젠테이션 HTML의 차이 등을 배우세요."
|
|
]
|
|
},
|
|
"lecture-understanding-nuanced-semantic-elements": {
|
|
"title": "미묘한 시맨틱 요소 이해하기",
|
|
"intro": [
|
|
"이 강의들에서는 <code>em</code> 요소를 <code>i</code> 요소 대신 언제 사용해야 하는지, 설명 목록(description list) 등 특정 시맨틱 요소의 사용 시기를 배우세요."
|
|
]
|
|
},
|
|
"workshop-major-browsers-list": {
|
|
"title": "주요 웹 브라우저 목록 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 설명 목록(<code>dl</code>, <code>dt</code>, <code>dd</code>)을 만들고 다루는 연습을 하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-text-and-time-semantic-elements": {
|
|
"title": "텍스트·시간 시맨틱 요소 다루기 ",
|
|
"intro": [
|
|
"이 강의에서는 <code>time</code>, <code>blockquote</code> 등 시간·텍스트 관련 콘텐츠의 의미 전달을 위한 시맨틱의 중요성을 배우세요."
|
|
]
|
|
},
|
|
"workshop-quincys-job-tips": {
|
|
"title": "Quincy의 취업 팁 페이지 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 <code>q</code>, <code>blockquote</code>, <code>cite</code> 요소를 사용해 시맨틱 HTML을 연습하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-specialized-semantic-elements": {
|
|
"title": "전문화된 시맨틱 요소 다루기",
|
|
"intro": [
|
|
"이 강의에서는 <code>u</code>, <code>s</code>, <code>code</code> 등 전문화된 시맨틱 요소에 대해 배우세요."
|
|
]
|
|
},
|
|
"workshop-blog-page": {
|
|
"title": "고양이 블로그 페이지 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 <code>main</code>, <code>nav</code>, <code>article</code>, <code>footer</code> 등 시맨틱 요소만 사용해 HTML 블로그 페이지를 만드세요."
|
|
]
|
|
},
|
|
"lab-event-hub": {
|
|
"title": "이벤트 허브 만들기",
|
|
"intro": [
|
|
"이 실습에서는 이벤트 허브를 만들고 <code>header</code>, <code>nav</code>, <code>article</code> 등 시맨틱 요소를 복습하세요."
|
|
]
|
|
},
|
|
"review-semantic-html": {
|
|
"title": "시맨틱 HTML 복습",
|
|
"intro": [
|
|
"시맨틱 HTML에 대해 퀴즈를 보기 전에 개념을 먼저 복습하세요.",
|
|
"이 페이지를 열어 <code>em</code>, <code>strong</code>, <code>blockquote</code>, <code>address</code> 등 시맨틱 요소를 복습하세요."
|
|
]
|
|
},
|
|
"quiz-semantic-html": {
|
|
"title": "시맨틱 HTML 퀴즈",
|
|
"intro": [
|
|
"다음 퀴즈로 지금까지 배운 시맨틱 HTML 개념을 테스트하세요.",
|
|
"시험을 준비 중이면 연습용 퀴즈 세트가 여러 개 제공됩니다. 퀴즈를 완료한 후 이 페이지로 돌아와 새로운 문제 세트에 접근하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"html-and-accessibility": {
|
|
"title": "HTML과 접근성 배우기",
|
|
"summary": [
|
|
"접근성 모범사례와 ARIA를 사용해 포용적인 HTML 작성법을 배우세요."
|
|
],
|
|
"intro": ["접근성 있는 HTML 구조와 폼 경험을 연습하세요."],
|
|
"blocks": {
|
|
"lecture-importance-of-accessibility-and-good-html-structure": {
|
|
"title": "접근성과 올바른 HTML 구조의 중요성",
|
|
"intro": [
|
|
"이 강의들에서는 접근성의 중요성, 장애인을 위한 보조도구, 포용적인 웹사이트를 만드는 HTML 속성, 접근성 모범사례 등을 배우세요."
|
|
]
|
|
},
|
|
"workshop-debug-coding-journey-blog-page": {
|
|
"title": "코딩 여정 블로그 페이지 디버그하기",
|
|
"intro": [
|
|
"이 워크숍에서는 코딩 블로그 페이지의 접근성 오류를 디버그하고 수정하세요."
|
|
]
|
|
},
|
|
"lecture-accessible-tables-forms": {
|
|
"title": "접근성 있는 표와 폼 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 접근성 있는 표와 폼을 만드는 방법을 배우세요."
|
|
]
|
|
},
|
|
"workshop-tech-conference-schedule": {
|
|
"title": "기술 컨퍼런스 일정표 테이블 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 접근성 있는 기술 컨퍼런스 일정표 테이블을 만드세요."
|
|
]
|
|
},
|
|
"lab-debug-donation-form": {
|
|
"title": "기부 폼 디버그하기",
|
|
"intro": [
|
|
"이 실습에서는 HTML 문법 오류를 고치고 접근성을 개선하여 기부 폼을 디버그하세요."
|
|
]
|
|
},
|
|
"lecture-introduction-to-aria": {
|
|
"title": "ARIA 소개",
|
|
"intro": ["이 강의들에서는 ARIA 역할을 사용하는 방법을 배우세요."]
|
|
},
|
|
"workshop-accessible-audio-controller": {
|
|
"title": "접근 가능한 오디오 컨트롤러 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 <code>aria-labelledby</code> 속성을 사용하는 오디오 컨트롤러를 만들어 접근성 있는 HTML을 연습하세요."
|
|
]
|
|
},
|
|
"lecture-accessible-media-elements": {
|
|
"title": "접근 가능한 미디어 요소 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 접근 가능한 링크, 오디오 및 비디오 콘텐츠를 만드는 방법을 배우세요."
|
|
]
|
|
},
|
|
"lab-checkout-page": {
|
|
"title": "체크아웃 페이지 만들기",
|
|
"intro": [
|
|
"이 실습에서는 접근성 있는 체크아웃 페이지를 만드세요.",
|
|
"<code>alt</code> 속성 및 ARIA 역할과 같은 개념을 연습하세요."
|
|
]
|
|
},
|
|
"lab-movie-review-page": {
|
|
"title": "영화 리뷰 페이지 디자인하기",
|
|
"intro": [
|
|
"이 실습에서는 영화 리뷰 페이지를 만드세요.",
|
|
"시맨틱 HTML, <code>alt</code> 속성, 접근 가능한 목록, <code>aria-hidden</code>으로 장식용 콘텐츠를 스크린리더에서 숨기는 방법 등을 연습하세요."
|
|
]
|
|
},
|
|
"lab-multimedia-player": {
|
|
"title": "멀티미디어 플레이어 만들기",
|
|
"intro": [
|
|
"이 실습에서는 멀티미디어 플레이어를 만드세요.",
|
|
"<code>audio</code>, <code>video</code> 요소, <code>controls</code> 속성 및 <code>aria-label</code> 속성을 다루는 연습을 하세요."
|
|
]
|
|
},
|
|
"review-html-accessibility": {
|
|
"title": "HTML 접근성 복습",
|
|
"intro": [
|
|
"HTML과 접근성에 관한 퀴즈를 보기 전에 개념을 먼저 복습하세요.",
|
|
"이 페이지를 열어 <code>aria-hidden</code>, <code>aria-describedby</code>, <code>tabindex</code> 속성 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-html-accessibility": {
|
|
"title": "HTML 접근성 퀴즈",
|
|
"intro": [
|
|
"다음 퀴즈로 지금까지 배운 접근성 개념을 테스트하세요.",
|
|
"시험을 준비 중이면 연습용 퀴즈 세트가 여러 개 제공됩니다. 퀴즈를 완료한 후 이 페이지로 돌아와 새로운 문제 세트에 접근하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"computer-basics": {
|
|
"title": "컴퓨터 기초 배우기",
|
|
"summary": ["웹 개발을 위한 컴퓨터, 인터넷, 도구 기초를 쌓으세요."],
|
|
"intro": ["현대 웹 개발을 가능하게 하는 도구와 개념에 익숙해지세요."],
|
|
"blocks": {
|
|
"lecture-understanding-computer-internet-and-tooling-basics": {
|
|
"title": "컴퓨터, 인터넷 및 도구 기초 이해하기",
|
|
"intro": [
|
|
"이 강의들에서는 컴퓨터와 그 구성요소, 인터넷 서비스 제공자(ISP), 전문 개발자가 사용하는 도구에 대해 배우세요."
|
|
]
|
|
},
|
|
"lecture-working-with-file-systems": {
|
|
"title": "파일 시스템 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 컴퓨터에서 파일과 폴더 시스템을 다루는 방법을 배우세요. 파일과 폴더 생성, 이동, 삭제, 이름 짓기와 정리 모범사례 등을 배우세요."
|
|
]
|
|
},
|
|
"lecture-browsing-the-web-effectively": {
|
|
"title": "웹 검색 효율적으로 하기",
|
|
"intro": [
|
|
"이 강의들에서는 웹사이트, 검색엔진, 웹 브라우저가 무엇인지, 다양한 브라우저와 검색엔진을 최대한 활용하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"review-computer-basics": {
|
|
"title": "컴퓨터 기초 복습",
|
|
"intro": [
|
|
"기본적인 컴퓨터와 인터넷 개념에 대한 퀴즈를 보기 전에 복습하세요.",
|
|
"이 페이지를 열어 RAM, 인터넷 서비스 제공자, 일반적인 웹 브라우저, 검색엔진 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-computer-basics": {
|
|
"title": "컴퓨터 기초 퀴즈",
|
|
"intro": ["기본 컴퓨터 지식에 대해 배운 내용을 이 퀴즈로 테스트하세요."]
|
|
}
|
|
}
|
|
},
|
|
"basic-css": {
|
|
"title": "기본 CSS 배우기",
|
|
"summary": ["핵심 CSS 개념을 배우고 실제 레이아웃을 스타일링하세요."],
|
|
"intro": ["CSS 기본을 배우고 이를 실용적인 레이아웃에 적용하세요."],
|
|
"blocks": {
|
|
"lecture-what-is-css": {
|
|
"title": "CSS란 무엇인가?",
|
|
"intro": [
|
|
"다음 강의들은 모두 CSS에 관한 것입니다. CSS의 정의와 웹에서의 역할, CSS 규칙의 구조, CSS를 작성하는 세 가지 방법과 사용 시기, 인라인과 블록 요소 등 여러 내용을 배우세요."
|
|
]
|
|
},
|
|
"workshop-cafe-menu": {
|
|
"title": "카페 메뉴 디자인하기",
|
|
"intro": [
|
|
"CSS는 브라우저에 웹페이지를 어떻게 표시할지 알려줍니다. CSS를 사용해 HTML 요소의 색상, 글꼴, 크기 및 기타 속성을 설정하세요.",
|
|
"이 워크숍에서는 카페 웹페이지의 메뉴 페이지를 디자인하며 CSS를 배우세요."
|
|
]
|
|
},
|
|
"lab-business-card": {
|
|
"title": "명함 디자인하기",
|
|
"intro": [
|
|
"이 실습에서는 명함을 만들고 CSS로 스타일을 지정하세요.",
|
|
"<code>color</code>, <code>font-size</code>, <code>text-align</code> 등의 스타일 속성을 연습하세요."
|
|
]
|
|
},
|
|
"lecture-css-specificity-the-cascade-algorithm-and-inheritance": {
|
|
"title": "CSS 특이성, 캐스케이드 알고리즘 및 상속",
|
|
"intro": [
|
|
"이 강의들에서는 CSS 특이성, 주요 선택자와 그 특이성, 캐스케이드 알고리즘, 상속 등을 배우세요."
|
|
]
|
|
},
|
|
"review-basic-css": {
|
|
"title": "CSS 기초 복습",
|
|
"intro": [
|
|
"기본 CSS 개념에 대한 퀴즈를 보기 전에 먼저 복습하세요.",
|
|
"이 페이지를 열어 <code>margin</code>, <code>padding</code>, CSS 결합자(combinator), CSS 특이성(specificity) 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-basic-css": {
|
|
"title": "CSS 기초 퀴즈",
|
|
"intro": ["기본 CSS 지식에 대해 배운 내용을 이 퀴즈로 테스트하세요."]
|
|
},
|
|
"lecture-styling-lists-and-links": {
|
|
"title": "목록과 링크 스타일링",
|
|
"intro": [
|
|
"이 강의들에서는 목록과 링크를 효과적으로 스타일링하기 위한 속성들을 배우세요. <code>link</code>, <code>visited</code>, <code>hover</code>, <code>active</code> 같은 링크 상태도 포함됩니다."
|
|
]
|
|
},
|
|
"lab-stylized-to-do-list": {
|
|
"title": "스타일된 할 일 목록 만들기",
|
|
"intro": [
|
|
"이 실습에서는 할 일(To-Do) 목록을 만들고 링크에 다양한 스타일을 적용하세요.",
|
|
"<code>text-decoration</code>, <code>list-style-type</code> 등의 스타일 속성과 호버나 클릭 시 스타일 변경 방법을 연습하세요."
|
|
]
|
|
},
|
|
"lecture-working-with-backgrounds-and-borders": {
|
|
"title": "배경과 테두리 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 요소의 배경과 테두리를 스타일링하기 위한 속성과 값, 배경에 대한 접근성 고려사항 등을 배우세요."
|
|
]
|
|
},
|
|
"lab-blog-post-card": {
|
|
"title": "블로그 게시 카드 디자인하기",
|
|
"intro": [
|
|
"이 실습에서는 HTML과 CSS로 블로그 게시 카드 디자인을 하세요.",
|
|
"<code>background-color</code>, <code>border-radius</code>, margin, padding 등 개념을 연습하세요."
|
|
]
|
|
},
|
|
"review-css-backgrounds-and-borders": {
|
|
"title": "목록·링크·CSS 배경 및 테두리 복습",
|
|
"intro": [
|
|
"CSS 배경과 테두리에 관한 퀴즈를 보기 전에 먼저 복습하세요.",
|
|
"이 페이지를 열어 <code>background-image</code> 속성, <code>border</code> 속성 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-backgrounds-and-borders": {
|
|
"title": "CSS 배경과 테두리 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 CSS의 배경과 테두리에 대해 배운 내용을 테스트하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"design-for-developers": {
|
|
"title": "UI/UX 디자인 입문",
|
|
"summary": ["UI 설계 기초와 사용자 중심 설계 원칙을 탐구하세요."],
|
|
"intro": [
|
|
"개발자가 더 나은 인터페이스를 만들도록 돕는 설계 원칙을 배우세요."
|
|
],
|
|
"blocks": {
|
|
"lecture-user-interface-design-fundamentals": {
|
|
"title": "사용자 인터페이스 설계 기초",
|
|
"intro": [
|
|
"이 강의들에서는 UI 디자인의 기초를 배우세요. 디자이너와 소통하기 위한 용어, 시각적 계층, 배율(scaling), 정렬, 여백(whitespace) 등 내용을 다루세요."
|
|
]
|
|
},
|
|
"lecture-user-centered-design": {
|
|
"title": "사용자 중심 설계",
|
|
"intro": [
|
|
"이 강의들에서는 다크 모드, 브레드크럼, 모달 대화상자 등 사용자 대상 기능 설계 모범사례를 배우고 사용자 연구, 요구사항, 테스트 방법을 익히세요."
|
|
]
|
|
},
|
|
"lecture-common-design-tools": {
|
|
"title": "일반적인 디자인 도구",
|
|
"intro": [
|
|
"이 강의들에서는 개발자가 알아야 할 일반적인 디자인 도구와 디자인 브리프를 다루는 방법을 배우세요."
|
|
]
|
|
},
|
|
"review-design-fundamentals": {
|
|
"title": "디자인 기초 복습",
|
|
"intro": [
|
|
"디자인 기초에 관한 퀴즈를 보기 전에 먼저 복습하세요.",
|
|
"이 페이지를 열어 사용자 중심 설계, 규모, 정렬, 시각적 계층 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-design-fundamentals": {
|
|
"title": "디자인 기초 퀴즈",
|
|
"intro": ["UI 설계 기초에 대해 배운 내용을 이 퀴즈로 테스트하세요."]
|
|
}
|
|
}
|
|
},
|
|
"absolute-and-relative-units": {
|
|
"title": "CSS에서 절대 단위와 상대 단위를 배우세요",
|
|
"summary": [
|
|
"절대 및 상대 CSS 단위 사용 시점을 이해해 유연한 레이아웃을 만드세요."
|
|
],
|
|
"intro": [
|
|
"CSS 단위를 사용해 요소 크기를 반응형으로 조절하는 방법을 배우세요."
|
|
],
|
|
"blocks": {
|
|
"lecture-working-with-relative-and-absolute-units": {
|
|
"title": "상대 및 절대 단위 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 상대 단위와 절대 단위가 무엇이며 브라우저에서 어떻게 영향을 주는지 배우세요."
|
|
]
|
|
},
|
|
"lab-event-flyer-page": {
|
|
"title": "이벤트 전단 페이지 만들기",
|
|
"intro": [
|
|
"이 실습에서는 이벤트 전단 페이지를 만드세요.",
|
|
"절대 및 상대 CSS를 사용해 요소 정렬을 연습하세요."
|
|
]
|
|
},
|
|
"review-css-relative-and-absolute-units": {
|
|
"title": "CSS 상대·절대 단위 복습",
|
|
"intro": [
|
|
"상대 및 절대 단위에 관한 퀴즈를 보기 전에 먼저 복습하세요.",
|
|
"이 페이지를 열어 백분율, <code>px</code>, <code>rem</code>, <code>em</code> 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-relative-and-absolute-units": {
|
|
"title": "CSS 상대·절대 단위 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 CSS의 상대 및 절대 단위에 대해 배운 내용을 테스트하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"pseudo-classes-and-elements": {
|
|
"title": "CSS 의사 클래스와 의사 요소 배우기",
|
|
"summary": [
|
|
"의사클래스와 의사요소를 사용해 더 풍부하고 상호작용적인 스타일을 만드세요."
|
|
],
|
|
"intro": ["CSS 의사클래스와 의사요소로 상호작용과 디테일을 추가하세요."],
|
|
"blocks": {
|
|
"lecture-working-with-pseudo-classes-and-pseudo-elements-in-css": {
|
|
"title": "CSS에서 의사클래스와 의사요소 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 의사클래스와 의사요소의 예제와 동작 방식을 배우세요."
|
|
]
|
|
},
|
|
"workshop-greeting-card": {
|
|
"title": "인사 카드 디자인하기",
|
|
"intro": [
|
|
"이전 강의들에서 다양한 유형의 의사클래스 다루는 방법을 배웠습니다.",
|
|
"이 워크숍에서는 인사 카드를 디자인하며 배운 내용을 연습하세요."
|
|
]
|
|
},
|
|
"workshop-parent-teacher-conference-form": {
|
|
"title": "학부모-교사 회의 폼 디자인하기",
|
|
"intro": [
|
|
"이 워크숍에서는 라디오 버튼을 다양한 의사선택자(pseudo-selector)로 스타일링하는 방법을 연습하며 학부모-교사 회의 폼을 만드세요.",
|
|
"<code>::before</code> 의사요소, <code>transform</code> 속성 등 개념을 연습하세요."
|
|
]
|
|
},
|
|
"lab-job-application-form": {
|
|
"title": "구직 신청서 폼 만들기",
|
|
"intro": [
|
|
"이 실습에서는 구직 신청서 폼을 만들고 의사클래스로 스타일을 지정하세요.",
|
|
"<code>:hover</code>, <code>:active</code>, <code>:focus</code> 등 개념을 연습하세요."
|
|
]
|
|
},
|
|
"review-css-pseudo-classes": {
|
|
"title": "CSS 의사클래스 복습",
|
|
"intro": [
|
|
"CSS 의사클래스와 의사요소에 대해 퀴즈를 보기 전에 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>::before</code>, <code>::after</code> 의사요소와 <code>:hover</code>, <code>:active</code> 의사클래스 등을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-pseudo-classes": {
|
|
"title": "CSS 의사클래스 퀴즈",
|
|
"intro": ["이 퀴즈로 CSS 의사클래스에 대한 지식을 테스트하세요."]
|
|
}
|
|
}
|
|
},
|
|
"css-colors": {
|
|
"title": "CSS 색상 배우기",
|
|
"summary": ["CSS 색상 형식을 다루고 일관된 색상 팔레트를 만드세요."],
|
|
"intro": ["CSS로 색상을 적용해 깔끔한 비주얼을 만드세요."],
|
|
"blocks": {
|
|
"lecture-working-with-colors-in-css": {
|
|
"title": "CSS에서 색상 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 선형·방사형 그라디언트, 색채 이론, 명명된 색상, RGB, Hex, HSL 등 다양한 색상 종류와 사용 시기를 배우세요."
|
|
]
|
|
},
|
|
"workshop-colored-markers": {
|
|
"title": "색연필 세트 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 색상 마커 세트를 만들어 색상 값을 설정하는 여러 방법과 색상 짝짓기 방법을 연습하세요."
|
|
]
|
|
},
|
|
"lab-colored-boxes": {
|
|
"title": "색상 박스 세트 디자인하기",
|
|
"intro": [
|
|
"이 실습에서는 색상 그리드를 만들고 16진수(hex), RGB, 미리정의된 색상 이름으로 그리드 항목의 배경색을 설정하는 연습을 하세요."
|
|
]
|
|
},
|
|
"review-css-colors": {
|
|
"title": "CSS 색상 복습",
|
|
"intro": [
|
|
"CSS 색상에 관한 퀴즈를 보기 전에 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>rgb()</code>, <code>hsl()</code>, <code>hex</code> 코드 등 색상 관련 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-colors": {
|
|
"title": "CSS 색상 퀴즈",
|
|
"intro": ["이 퀴즈로 CSS 색상에 대한 지식을 테스트하세요."]
|
|
}
|
|
}
|
|
},
|
|
"styling-forms": {
|
|
"title": "CSS로 폼 스타일링하는 방법을 배우세요",
|
|
"summary": [
|
|
"접근성 있고 포용적인 인터페이스를 지원하는 CSS 기법을 적용하세요."
|
|
],
|
|
"intro": ["폼 요소를 스타일링해 사용성과 시각적 명확성을 향상시키세요."],
|
|
"blocks": {
|
|
"lecture-best-practices-for-styling-forms": {
|
|
"title": "폼 스타일링 모범사례",
|
|
"intro": [
|
|
"이 강의들에서는 폼 스타일링 모범사례와 <code>color</code>, <code>datetime-local</code> 같은 특수 입력을 스타일링할 때 발생할 수 있는 문제를 배우세요."
|
|
]
|
|
},
|
|
"workshop-registration-form": {
|
|
"title": "등록 폼 디자인하기",
|
|
"intro": [
|
|
"이 워크숍에서는 회원가입 페이지를 디자인하며 HTML 폼을 배우세요. 폼에 입력할 수 있는 데이터 유형을 제어하는 방법과 페이지 스타일링을 위한 새로운 CSS 도구를 배우세요."
|
|
]
|
|
},
|
|
"lab-contact-form": {
|
|
"title": "문의 폼 디자인하기",
|
|
"intro": [
|
|
"이 실습에서는 HTML로 문의 폼을 만들고 CSS로 스타일을 지정하세요."
|
|
]
|
|
},
|
|
"workshop-game-settings-panel": {
|
|
"title": "게임 설정 패널 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 체크박스 스타일링을 연습하며 게임 설정 패널을 만드세요."
|
|
]
|
|
},
|
|
"lab-feature-selection": {
|
|
"title": "기능 선택 페이지 디자인하기",
|
|
"intro": [
|
|
"이 실습에서는 커스텀 스타일이 적용된 체크박스로 기능 선택 페이지를 만드세요.",
|
|
"라벨과 체크박스가 있는 기능 카드를 만들고 체크박스에 커스텀 스타일을 적용하세요."
|
|
]
|
|
},
|
|
"review-styling-forms": {
|
|
"title": "폼 스타일링 복습",
|
|
"intro": [
|
|
"폼 스타일링에 대해 퀴즈를 보기 전에 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 폼 입력 스타일링 방법, <code>appearance: none</code> 사용법 등을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-styling-forms": {
|
|
"title": "폼 스타일링 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 폼을 스타일링하는 방법에 대한 지식을 테스트하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"css-box-model": {
|
|
"title": "CSS 박스 모델 배우기",
|
|
"summary": [
|
|
"CSS 박스 모델, 간격, 레이아웃 효과를 마스터해 정밀한 디자인을 만드세요."
|
|
],
|
|
"intro": [
|
|
"여백, 테두리 및 레이아웃 효과가 어떻게 함께 작동하는지 배우세요."
|
|
],
|
|
"blocks": {
|
|
"lecture-working-with-css-transforms-overflow-and-filters": {
|
|
"title": "CSS 변환, 오버플로우, 필터 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 CSS 변형(transform), 오버플로우(overflow), 필터(filter)를 다루는 방법을 배우고 박스 모델의 동작 원리를 이해하세요."
|
|
]
|
|
},
|
|
"workshop-rothko-painting": {
|
|
"title": "로스코 스타일 화풍 만들기",
|
|
"intro": [
|
|
"모든 HTML 요소는 자체 여백과 테두리를 가진 하나의 상자입니다. 이를 박스 모델이라고 합니다.",
|
|
"이 워크숍에서는 CSS와 박스 모델을 사용해 로스코 스타일의 직사각형 작품을 만들어 보세요."
|
|
]
|
|
},
|
|
"lab-confidential-email-page": {
|
|
"title": "비밀 이메일 페이지 만들기",
|
|
"intro": [
|
|
"이 실습에서는 HTML로 웹페이지를 만들고 CSS 속성으로 콘텐츠를 마스킹하세요."
|
|
]
|
|
},
|
|
"review-css-layout-and-effects": {
|
|
"title": "CSS 레이아웃 및 효과 복습",
|
|
"intro": [
|
|
"CSS 레이아웃과 효과에 관한 퀴즈를 보기 전에 먼저 복습하세요.",
|
|
"이 페이지를 열어 <code>transform</code> 속성, 박스 모델, <code>overflow</code> 속성 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-layout-and-effects": {
|
|
"title": "CSS 레이아웃·효과 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 박스 모델, 변환, 필터, 오버플로우에 대한 지식을 테스트하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"css-flexbox": {
|
|
"title": "CSS 플렉스박스 배우기",
|
|
"summary": ["Flexbox 모델과 정렬 도구로 반응형 레이아웃을 만드세요."],
|
|
"intro": ["Flexbox를 사용해 반응형 정렬 레이아웃을 만드세요."],
|
|
"blocks": {
|
|
"lecture-working-with-css-flexbox": {
|
|
"title": "CSS Flexbox 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 CSS Flexbox의 작동 원리, 속성, 사용 시기를 배우세요."
|
|
]
|
|
},
|
|
"workshop-flexbox-photo-gallery": {
|
|
"title": "Flexbox 사진 갤러리 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 Flexbox를 사용해 반응형 사진 갤러리 웹페이지를 만드세요."
|
|
]
|
|
},
|
|
"lab-pricing-plans-layout": {
|
|
"title": "가격 플랜 레이아웃 만들기",
|
|
"intro": [
|
|
"이 실습에서는 가격 플랜 레이아웃을 만드세요.",
|
|
"<code>flex-direction</code>, <code>justify-content</code>, <code>align-self</code> 등 flexbox 속성으로 요소 정렬을 연습하세요."
|
|
]
|
|
},
|
|
"lab-page-of-playing-cards": {
|
|
"title": "플레이 카드 페이지 만들기",
|
|
"intro": [
|
|
"이 실습에서 flexbox를 사용해 플레이 카드로 구성된 웹페이지를 만드세요.",
|
|
"<code>flex-direction</code>, <code>justify-content</code>, <code>align-self</code> 등과 같은 flexbox 프로퍼티로 요소 정렬을 연습하세요."
|
|
]
|
|
},
|
|
"review-css-flexbox": {
|
|
"title": "CSS Flexbox 복습",
|
|
"intro": [
|
|
"CSS Flexbox에 관해 퀴즈를 보기 전에 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>flex-direction</code>, <code>justify-content</code>, <code>align-items</code>, <code>flex-wrap</code> 등의 속성을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-flexbox": {
|
|
"title": "CSS Flexbox 퀴즈",
|
|
"intro": ["이 퀴즈로 CSS Flexbox에 대해 배운 내용을 테스트하세요."]
|
|
}
|
|
}
|
|
},
|
|
"css-typography": {
|
|
"title": "CSS 타이포그래피 배우기",
|
|
"summary": [
|
|
"가독성, 계층, 시각적 균형을 위해 텍스트 스타일링 방법을 배우세요."
|
|
],
|
|
"intro": ["타이포그래피를 사용해 가독성과 시각적 계층을 개선하세요."],
|
|
"blocks": {
|
|
"lecture-working-with-css-fonts": {
|
|
"title": "CSS 글꼴 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 타이포그래피 모범사례, 글꼴, <code>text-shadow</code> 속성 등을 배우세요."
|
|
]
|
|
},
|
|
"workshop-nutritional-label": {
|
|
"title": "영양 성분 라벨 만들기",
|
|
"intro": [
|
|
"타이포그래피는 텍스트를 읽기 쉽고 목적에 맞게 스타일링하는 기법입니다.",
|
|
"이 워크숍에서는 타이포그래피를 사용해 영양 성분 라벨 웹페이지를 만드세요. 텍스트 스타일링, 줄높이 조정, CSS로 텍스트 위치 지정 방법을 연습하세요."
|
|
]
|
|
},
|
|
"lab-newspaper-article": {
|
|
"title": "신문 기사 만들기",
|
|
"intro": [
|
|
"이 실습에서는 HTML과 CSS로 신문 기사 페이지를 만들세요.",
|
|
"<code>font-family</code>, <code>font-size</code>, <code>font-weight</code> 등 글꼴 관련 속성을 스타일링하는 연습을 하세요."
|
|
]
|
|
},
|
|
"review-css-typography": {
|
|
"title": "CSS 타이포그래피 복습",
|
|
"intro": [
|
|
"타이포그래피 기초에 관한 퀴즈를 보기 전에 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 웹 안전 글꼴, <code>font-family</code> 속성 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-typography": {
|
|
"title": "CSS 타이포그래피 퀴즈",
|
|
"intro": ["이 퀴즈로 타이포그래피 지식을 테스트하세요."]
|
|
}
|
|
}
|
|
},
|
|
"css-and-accessibility": {
|
|
"title": "CSS와 접근성 배우기",
|
|
"summary": ["접근성과 포용성을 지원하는 CSS 기법을 적용하세요."],
|
|
"intro": ["UI 요소를 스타일링할 때 접근성을 고려해 디자인하세요."],
|
|
"blocks": {
|
|
"lecture-best-practices-for-accessibility-and-css": {
|
|
"title": "접근성과 CSS 모범사례",
|
|
"intro": [
|
|
"이 강의들에서는 CSS에서의 접근성 모범사례와 사이트의 색 대비를 검사하는 도구를 배우세요."
|
|
]
|
|
},
|
|
"workshop-accessibility-quiz": {
|
|
"title": "퀴즈 웹페이지 만들기",
|
|
"intro": [
|
|
"접근성이란 장애가 있는 사람을 포함해 모두가 웹페이지를 사용할 수 있게 만드는 과정입니다.",
|
|
"이 워크숍에서는 퀴즈 웹페이지를 만들며 키보드 단축키, ARIA 속성, 디자인 모범사례 등의 접근성 도구를 배우세요."
|
|
]
|
|
},
|
|
"lab-tribute-page": {
|
|
"title": "기념 페이지 만들기",
|
|
"intro": [
|
|
"이 실습에서는 실제 인물이나 허구의 대상 등 선택한 주제에 대한 예우 페이지를 만드세요."
|
|
]
|
|
},
|
|
"review-css-accessibility": {
|
|
"title": "CSS 접근성 복습",
|
|
"intro": [
|
|
"CSS와 접근성에 관해 퀴즈를 보기 전에 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 색 대비 도구와 접근성 모범사례 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-accessibility": {
|
|
"title": "CSS 접근성 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 CSS로 웹페이지를 접근 가능하게 만드는 방법에 대해 배운 내용을 테스트하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"css-positioning": {
|
|
"title": "CSS 위치 지정 배우기",
|
|
"summary": [
|
|
"포지셔닝과 플로트를 사용해 레이아웃과 요소 흐름을 제어하세요."
|
|
],
|
|
"intro": ["플로트와 CSS 포지셔닝 도구로 레이아웃을 제어하세요."],
|
|
"blocks": {
|
|
"lecture-understanding-how-to-work-with-floats-and-positioning-in-css": {
|
|
"title": "플로트와 포지셔닝 다루기",
|
|
"intro": [
|
|
"이 강의들에서는 CSS 포지셔닝과 플로트 사용법, <code>absolute</code>, <code>relative</code>, <code>fixed</code>, <code>sticky</code> 포지셔닝, <code>z-index</code> 속성 등을 배우세요."
|
|
]
|
|
},
|
|
"workshop-cat-painting": {
|
|
"title": "고양이 그림 만들기",
|
|
"intro": [
|
|
"CSS 포지셔닝을 마스터하는 것은 시각적으로 매력적이며 반응형인 웹 레이아웃을 만드는 데 필수적입니다.",
|
|
"이 워크숍에서는 고양이 그림을 만들며 absolute 포지셔닝, <code>z-index</code>, <code>transform</code> 속성 사용법을 배우세요."
|
|
]
|
|
},
|
|
"lab-house-painting": {
|
|
"title": "집 그림 만들기",
|
|
"intro": [
|
|
"이 실습에서는 CSS로 집 그림을 만드세요.",
|
|
"집의 개별 요소를 디자인하고 <code>position</code>, <code>top</code>, <code>left</code> 등 CSS 속성으로 위치를 지정하세요."
|
|
]
|
|
},
|
|
"review-css-positioning": {
|
|
"title": "CSS 포지셔닝 복습",
|
|
"intro": [
|
|
"CSS 포지셔닝 기초에 대해 퀴즈를 보기 전에 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 float, 상대 위치 지정(relative positioning), 절대 위치 지정(absolute positioning) 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-positioning": {
|
|
"title": "CSS 위치 지정 퀴즈",
|
|
"intro": ["이 퀴즈로 CSS 위치 지정에 대한 지식을 테스트하세요."]
|
|
}
|
|
}
|
|
},
|
|
"attribute-selectors": {
|
|
"title": "CSS 속성 선택자 배우기",
|
|
"summary": ["CSS 속성 선택자를 사용해 요소를 정밀하게 선택하세요."],
|
|
"intro": ["속성 선택자를 사용하여 요소를 정밀하게 선택하세요."],
|
|
"blocks": {
|
|
"lecture-working-with-attribute-selectors": {
|
|
"title": "속성 선택자 작업",
|
|
"intro": [
|
|
"이 강의에서는 속성 선택자와 링크 및 목록 같은 요소를 타깃팅하는 방법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"workshop-balance-sheet": {
|
|
"title": "대차대조표 만들기",
|
|
"intro": [
|
|
"이 워크숍에서는 의사선택자(pseudo selectors)를 사용해 대차대조표를 만드세요. 마우스를 올렸을 때 요소의 스타일을 변경하는 방법과 웹페이지에서 다른 이벤트를 트리거하는 방법을 배우세요."
|
|
]
|
|
},
|
|
"lab-book-inventory-app": {
|
|
"title": "도서 재고 앱 만들기",
|
|
"intro": [
|
|
"이 실습에서 도서 재고 앱을 만드세요.",
|
|
"<code>[attribute]</code>, <code>[attribute=value]</code>, <code>[attribute~=value]</code> 등 CSS 속성 선택자 사용을 연습하세요."
|
|
]
|
|
},
|
|
"review-css-attribute-selectors": {
|
|
"title": "CSS 속성 선택자 복습",
|
|
"intro": [
|
|
"CSS 속성 선택자의 기본을 퀴즈로 풀기 전에 지금까지 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>href</code>와 <code>title</code> 속성을 가진 링크를 타깃팅하는 다양한 속성 선택자 사용법을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-attribute-selectors": {
|
|
"title": "CSS 속성 선택자 퀴즈",
|
|
"intro": ["이 퀴즈로 CSS 속성 선택자에 대한 지식을 테스트하세요."]
|
|
}
|
|
}
|
|
},
|
|
"responsive-design": {
|
|
"title": "반응형 디자인 배우기",
|
|
"summary": [
|
|
"반응형 디자인 원리를 배우고 모든 화면에 적응하는 레이아웃을 만드세요."
|
|
],
|
|
"intro": ["레이아웃이 다양한 화면 크기와 기기에 적응하도록 만드세요."],
|
|
"blocks": {
|
|
"lecture-best-practices-for-responsive-web-design": {
|
|
"title": "반응형 웹 디자인 모범 사례",
|
|
"intro": [
|
|
"이 강의들에서는 반응형 웹 디자인의 모범 사례, 그리드(grid), 플렉스박스(flexbox), 미디어쿼리(media queries), 미디어 브레이크포인트(media breakpoints)가 반응형 디자인에서 수행하는 역할 등을 배우세요."
|
|
]
|
|
},
|
|
"workshop-piano": {
|
|
"title": "피아노 디자인하기",
|
|
"intro": [
|
|
"반응형 디자인은 웹페이지가 다양한 크기의 화면에서 어떻게 보여야 하는지를 결정합니다.",
|
|
"이 워크숍에서는 CSS와 반응형 디자인을 사용해 피아노를 코딩하세요. 미디어쿼리와 의사선택자(pseudo selectors)도 연습하세요."
|
|
]
|
|
},
|
|
"lab-technical-documentation-page": {
|
|
"title": "기술 문서 페이지 만들기",
|
|
"intro": [
|
|
"이 실습에서 주제에 대한 설명서나 참조용으로 사용할 기술 문서 페이지를 만드세요.",
|
|
"미디어쿼리를 사용해 반응형 디자인을 만드는 연습을 하세요."
|
|
]
|
|
},
|
|
"review-responsive-web-design": {
|
|
"title": "반응형 웹 디자인 복습",
|
|
"intro": [
|
|
"반응형 디자인의 기본을 퀴즈로 풀기 전에 지금까지 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 미디어쿼리, 미디어 브레이크포인트, 모바일 우선 접근법(mobile-first approach) 같은 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-responsive-web-design": {
|
|
"title": "반응형 웹 디자인 퀴즈",
|
|
"intro": [
|
|
"이 퀴즈로 웹페이지를 반응형으로 만드는 것에 대해 배운 내용을 테스트하세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"css-variables": {
|
|
"title": "CSS 변수 배우기",
|
|
"summary": ["CSS 변수로 재사용 가능한, 테마 친화적인 스타일을 만드세요."],
|
|
"intro": [
|
|
"CSS 커스텀 프로퍼티(CSS custom properties)를 사용해 유지보수 가능한 스타일을 만드세요."
|
|
],
|
|
"blocks": {
|
|
"lecture-working-with-css-variables": {
|
|
"title": "CSS 변수 작업",
|
|
"intro": [
|
|
"이 강의들에서는 커스텀 프로퍼티(즉 CSS 변수)를 정의하고 사용하는 방법을 배우게 됩니다. 또한 <code>@property</code> 규칙과 그 작동 방식을 학습하세요."
|
|
]
|
|
},
|
|
"workshop-city-skyline": {
|
|
"title": "도시 스카이라인 만들기",
|
|
"intro": [
|
|
"CSS 변수는 스타일을 구성하고 재사용하는 데 도움이 됩니다.",
|
|
"이 워크숍에서는 도시 스카이라인을 만듭니다. CSS 변수를 구성하여 필요할 때마다 재사용하는 방법을 연습하세요."
|
|
]
|
|
},
|
|
"lab-availability-table": {
|
|
"title": "가용성 표 만들기",
|
|
"intro": [
|
|
"이 실습에서는 회의 참석자의 가용성을 표시하는 가용성 표(availability table)를 만드세요.",
|
|
"CSS 변수를 사용해 색상, 글꼴 및 기타 스타일을 저장하고 재사용하는 연습을 하세요."
|
|
]
|
|
},
|
|
"review-css-variables": {
|
|
"title": "CSS 변수 복습",
|
|
"intro": [
|
|
"CSS 변수의 기본을 퀴즈로 풀기 전에 지금까지 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 CSS 커스텀 프로퍼티(CSS 변수)와 <code>@property</code> 규칙을 다루는 방법을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-variables": {
|
|
"title": "CSS 변수 퀴즈",
|
|
"intro": ["이 퀴즈로 CSS 변수에 대한 지식을 테스트하세요."]
|
|
}
|
|
}
|
|
},
|
|
"css-grid": {
|
|
"title": "CSS Grid 배우기",
|
|
"summary": ["CSS Grid 시스템을 사용해 복잡한 레이아웃을 디자인하세요."],
|
|
"intro": ["CSS Grid로 다차원 레이아웃을 만드세요."],
|
|
"blocks": {
|
|
"lecture-working-with-css-grid": {
|
|
"title": "CSS Grid 작업",
|
|
"intro": [
|
|
"이 강의들에서는 CSS Grid와 그 여러 프로퍼티를 배우고 사용하는 방법, 그리고 CSS Grid가 플렉스박스와 어떻게 다른지 배우게 됩니다."
|
|
]
|
|
},
|
|
"workshop-magazine": {
|
|
"title": "잡지 만들기",
|
|
"intro": [
|
|
"CSS Grid는 웹페이지 디자인의 행과 열을 제어할 수 있도록 해줍니다.",
|
|
"이 워크숍에서는 잡지 기사 레이아웃을 만들고 CSS Grid 사용법(그리드 행, 그리드 열 등)을 연습하세요."
|
|
]
|
|
},
|
|
"lab-newspaper-layout": {
|
|
"title": "신문 레이아웃 디자인",
|
|
"intro": [
|
|
"이 실습에서는 그리드 행과 그리드 열 같은 개념을 포함하여 CSS Grid를 사용해 신문 레이아웃을 디자인하세요."
|
|
]
|
|
},
|
|
"lecture-debugging-css": {
|
|
"title": "CSS 디버깅",
|
|
"intro": [
|
|
"이 강의에서는 브라우저 개발자 도구와 CSS 검증 도구를 사용해 CSS를 디버깅하는 방법을 배우게 됩니다."
|
|
]
|
|
},
|
|
"lab-product-landing-page": {
|
|
"title": "제품 랜딩 페이지 만들기",
|
|
"intro": [
|
|
"이 프로젝트에서 선택한 제품을 마케팅하기 위한 제품 랜딩 페이지를 만드세요."
|
|
]
|
|
},
|
|
"review-css-grid": {
|
|
"title": "CSS Grid 복습",
|
|
"intro": [
|
|
"CSS Grid의 기본을 퀴즈로 풀기 전에 지금까지 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>grid-template-columns</code>, <code>grid-gap</code> 등 다양한 CSS Grid 프로퍼티를 다루는 방법을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-grid": {
|
|
"title": "CSS Grid 퀴즈",
|
|
"intro": ["이 퀴즈로 CSS Grid에 대한 지식을 테스트하세요."]
|
|
}
|
|
}
|
|
},
|
|
"css-animations": {
|
|
"title": "CSS 애니메이션 배우기",
|
|
"summary": [
|
|
"접근성을 고려한 CSS 애니메이션으로 매력적인 UI 모션을 만드세요."
|
|
],
|
|
"intro": ["사용성을 고려하면서 CSS 애니메이션으로 모션을 추가하세요."],
|
|
"blocks": {
|
|
"lecture-animations-and-accessibility": {
|
|
"title": "애니메이션과 접근성",
|
|
"intro": [
|
|
"이 강의들에서는 CSS 애니메이션과 관련된 접근성 문제를 배우고, <code>prefers-reduced-motion</code>이 그런 접근성 문제를 해결하는 데 어떻게 도움이 되는지 학습하세요."
|
|
]
|
|
},
|
|
"workshop-ferris-wheel": {
|
|
"title": "애니메이션된 대관람차 만들기",
|
|
"intro": [
|
|
"CSS 애니메이션을 사용해 웹페이지의 특정 섹션에 주목을 끌고 더 매력적으로 만드세요.",
|
|
"이 워크숍에서는 대관람차를 만듭니다. CSS를 사용해 요소를 애니메이션하고 변형하며 속도를 조정하는 방법을 연습하세요."
|
|
]
|
|
},
|
|
"lab-moon-orbit": {
|
|
"title": "달 궤도 애니메이션 만들기",
|
|
"intro": [
|
|
"이 실습에서는 달이 지구를 도는 애니메이션을 만듭니다.",
|
|
"<code>animation-name</code>, <code>animation-duration</code>, <code>animation-timing-function</code> 등 애니메이션 프로퍼티를 연습하세요."
|
|
]
|
|
},
|
|
"workshop-flappy-penguin": {
|
|
"title": "플래피 펭귄 만들기",
|
|
"intro": [
|
|
"HTML 요소를 변형해 시선을 끄는 매력적인 디자인을 만드세요. 요소를 회전시키고 스케일을 조정하는 등 transform을 사용하세요.",
|
|
"이 워크숍에서는 펭귄을 만듭니다. CSS transform을 사용해 펭귄 부위를 위치시키고 크기를 조정하며, 배경을 만들고 애니메이션을 추가하세요."
|
|
]
|
|
},
|
|
"lab-personal-portfolio": {
|
|
"title": "개인 포트폴리오 만들기",
|
|
"intro": [
|
|
"이 프로젝트에서는 자신만의 개인 포트폴리오 페이지를 만드세요."
|
|
]
|
|
},
|
|
"review-css-animations": {
|
|
"title": "CSS 애니메이션 복습",
|
|
"intro": [
|
|
"CSS 애니메이션 작업에 관한 기본을 퀴즈로 풀기 전에 지금까지 배운 내용을 복습하세요.",
|
|
"이 페이지를 열어 <code>prefers-reduced-motion</code>, <code>@keyframes</code> 규칙 등 개념을 복습하세요."
|
|
]
|
|
},
|
|
"quiz-css-animations": {
|
|
"title": "CSS 애니메이션 퀴즈",
|
|
"intro": ["이 퀴즈로 CSS 애니메이션에 대한 지식을 테스트하세요."]
|
|
}
|
|
}
|
|
},
|
|
"dev-playground": {
|
|
"title": "개발 놀이터",
|
|
"intro": ["도전 과제를 생성하고 테스트하는 놀이터"],
|
|
"blocks": {
|
|
"daily-coding-challenges-javascript": {
|
|
"title": "일일 코딩 도전 과제 JavaScript",
|
|
"intro": ["JavaScript 일일 코딩 도전을 생성하는 공간입니다."]
|
|
},
|
|
"daily-coding-challenges-python": {
|
|
"title": "일일 코딩 도전 과제 Python",
|
|
"intro": ["Python 일일 코딩 도전을 생성하는 공간입니다."]
|
|
}
|
|
}
|
|
},
|
|
"full-stack-open": {
|
|
"title": "Full-Stack Open",
|
|
"intro": ["여기에 좋은 도입문을 추가해야 합니다."],
|
|
"blocks": {
|
|
"workshop-blog-page": {
|
|
"title": "고양이 블로그 페이지 만들기",
|
|
"intro": [
|
|
"이 워크숍에서 <code>main</code>, <code>nav</code>, <code>article</code>, <code>footer</code> 등 시맨틱 요소를 사용해 HTML만으로 블로그 페이지를 만드세요."
|
|
]
|
|
}
|
|
},
|
|
"chapters": {
|
|
"part-0": "웹앱 기초",
|
|
"part-1": "React 소개",
|
|
"part-2": "서버와의 통신",
|
|
"part-3": "NodeJS와 Express로 서버 프로그래밍하기",
|
|
"part-4": "Express 서버 테스트, 사용자 관리",
|
|
"part-5": "React 앱 테스트",
|
|
"part-6": "고급 상태 관리",
|
|
"part-7": "React 라우터, 커스텀 훅, CSS와 webpack으로 앱 스타일링",
|
|
"part-8": "GraphQL",
|
|
"part-9": "TypeScript",
|
|
"part-10": "React Native",
|
|
"part-11": "CI/CD",
|
|
"part-12": "컨테이너",
|
|
"part-13": "관계형 데이터베이스 사용하기"
|
|
},
|
|
"modules": {
|
|
"basic-html": "기본 HTML"
|
|
},
|
|
"module-intros": {
|
|
"basic-html": {
|
|
"title": "기본 HTML",
|
|
"intro": [
|
|
"HTML 태그를 사용해 텍스트, 이미지, 링크를 추가하여 간단한 웹페이지를 만드는 법을 배우세요."
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"daily-coding-challenge": {
|
|
"title": "일일 코딩 도전",
|
|
"blocks": {
|
|
"daily-coding-challenge": {
|
|
"title": "일일 코딩 도전"
|
|
}
|
|
}
|
|
},
|
|
"misc-text": {
|
|
"browse-other": "다른 무료 자격증 둘러보기",
|
|
"courses": "강의",
|
|
"requirements": "요구사항",
|
|
"steps": "단계",
|
|
"expand": "강좌 확장",
|
|
"collapse": "강좌 축소",
|
|
"legacy-header": "레거시 코스",
|
|
"legacy-desc": "이 과정은 더 이상 자격증 경로의 일부가 아니지만, 학습을 확장하기 위해 여전히 사용할 수 있습니다.",
|
|
"legacy-go-back": "현재 커리큘럼 버전으로 가기.",
|
|
"course-maintenance": "이 과정들은 유지 보수 중입니다. 작동이 안 되는 경우, <0>https://www.freecodecamp.org/news/how-to-run-freecodecamps-relational-databases-curriculum-using-docker-vscode-and-coderoad</0>에서 로컬로 실행하는 방법을 배울 수 있습니다.",
|
|
"course-disabling-soon": "이 강좌의 브라우저 버전은 곧 일시적으로 비활성화될 예정이며, 가상 머신이 삭제될 것입니다. 가상 머신의 모든 진행 상황이 사라지게 됩니다. 필요한 파일이 있으면 컴퓨터에 저장해주세요. 불편을 끼쳐드려서 죄송합니다. 몇 주 내로 개선된 브라우저 버전을 다시 제공할 수 있기를 바랍니다.",
|
|
"course-disabled": "이 강좌는 브라우저에서 실행할 수 없습니다. 불편을 끼쳐드려서 죄송합니다. <0>https://www.freecodecamp.org/news/how-to-run-freecodecamps-relational-databases-curriculum-using-docker-vscode-and-coderoad</0>에서 로컬로 실행하는 방법을 알아볼 수 있습니다. 곧 개선된 브라우저 버전을 다시 제공할 수 있기를 바랍니다.",
|
|
"run-locally": "현재로서는 컴퓨터에서 강좌를 로컬로 실행하는 것을 권장합니다. <0>https://www.freecodecamp.org/news/how-to-run-freecodecamps-relational-databases-curriculum-using-docker-vscode-and-coderoad</0>에서 방법을 알아볼 수 있습니다.",
|
|
"progress-wont-save": "생존 모드에서 실행하는 동안 달성한 진도는 본인의 freeCodeCamp 계정에 저장되지 않습니다.",
|
|
"go-back-to-learn": "안정적인 커리큘럼 버전으로 돌아가기.",
|
|
"read-database-cert-article": "진행하기 전에 이 포럼 게시글을 읽어주세요.",
|
|
"enable-cookies": "시작하기 전에 타사 쿠키를 활성화해야 합니다.",
|
|
"english-only": "이 섹션의 강의는 영어로만 제공됩니다. 현재 제목과 소개만 번역 가능합니다.",
|
|
"exam-english-only": "인증 시험은 현재 영어로만 제공됩니다. 나머지 강좌는 몇몇 언어로 제공됩니다."
|
|
}
|
|
}
|