From 97de424e91d5b1fc4c7359e9991c149f27d2adca Mon Sep 17 00:00:00 2001 From: minwook-shin Date: Mon, 30 Nov 2020 18:39:54 +0900 Subject: [PATCH] FIX : fix url for translations folder --- .../translations/README.ko.md | 8 +++---- .../2-github-basics/translations/README.ko.md | 10 ++++----- .../3-accessibility/translations/README.ko.md | 8 +++---- .../translations/README.ko.md | 6 ++--- .../1-data-types/translations/README.ko.md | 8 +++---- .../translations/README.ko.md | 8 +++---- .../translations/README.ko.md | 8 +++---- .../4-arrays-loops/translations/README.ko.md | 8 +++---- 2-js-basics/translations/README.ko.md | 8 +++---- .../1-intro-to-html/translations/README.ko.md | 10 ++++----- .../2-intro-to-css/translations/README.ko.md | 12 +++++----- .../translations/README.ko.md | 12 +++++----- 3-terrarium/translations/README.ko.md | 8 +++---- 4-typing-game/translations/README.ko.md | 2 +- .../translations/README.ko.md | 16 +++++++------- .../translations/README.ko.md | 10 ++++----- .../translations/README.ko.md | 14 ++++++------ 5-browser-extension/translations/README.ko.md | 8 +++---- .../1-introduction/translations/README.ko.md | 8 +++---- .../translations/README.ko.md | 16 +++++++------- .../translations/README.ko.md | 8 +++---- .../translations/README.ko.md | 10 ++++----- .../5-keeping-score/translations/README.ko.md | 8 +++---- .../6-end-condition/translations/README.ko.md | 6 ++--- 6-space-game/translations/README.ko.md | 14 ++++++------ .../translations/README.ko.md | 8 +++---- .../README.es.md | 0 .../README.ko.md | 16 +++++++------- .../assignment.es.md | 0 .../3-data/translations/README.ko.md | 22 +++++++++---------- .../translations/README.ko.md | 14 ++++++------ 7-bank-project/translations/README.ko.md | 10 ++++----- 32 files changed, 152 insertions(+), 152 deletions(-) rename 7-bank-project/2-forms/{translation => translations}/README.es.md (100%) rename 7-bank-project/2-forms/{translation => translations}/README.ko.md (96%) rename 7-bank-project/2-forms/{translation => translations}/assignment.es.md (100%) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ko.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ko.md index afc23138..2351bb0b 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ko.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ko.md @@ -2,11 +2,11 @@ 이 강의에서는 프로그래밍 언어의 기초를 다룹니다. 여기에서 다루는 주제는 오늘 날 많은 최신 프로그래밍 언어에 적용됩니다. 'Tools of the Trade' 세션에서는 개발자에게 도움이 되는 유용한 소프트웨어에 대해 알아보겠습니다. -![Intro Programming](webdev101-programming.png) +![Intro Programming](../webdev101-programming.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) ## 소개 @@ -181,7 +181,7 @@ command line 옵션은 사용하는 운영체제에 따라 다릅니다. 일부 프로그래밍 언어를 비교하십시오. JavaScript와 자바의 특징은 무엇입니까? COBOL과 Go는 어떻습니까? ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) ## 리뷰 & 자기주도 학습 @@ -189,4 +189,4 @@ command line 옵션은 사용하는 운영체제에 따라 다릅니다. ## 과제 -[Reading the Docs](assignment.md) +[Reading the Docs](../assignment.md) diff --git a/1-getting-started-lessons/2-github-basics/translations/README.ko.md b/1-getting-started-lessons/2-github-basics/translations/README.ko.md index b36d184c..6f37cdd9 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.ko.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.ko.md @@ -2,11 +2,11 @@ 이 강의에서는 코드 변경점을 호스팅하고 관리하는 플랫폼인 GitHub의 기본 사항을 다룹니다. -![Intro to GitHub](images/webdev101-github.png) +![Intro to GitHub](../images/webdev101-github.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) ## 소개 @@ -242,9 +242,9 @@ pull request는 리뷰, 코멘트, 통합 테스트 등을 통해 브랜치에 먼저, GitHub에서 관심있고 변경 사항을 기여할 저장소를 찾아 보겠습니다. 그 곳의 내용을 자신의 장치에 복사하고 싶을 것입니다. -✅ '입문-친화적'인 저장소를 찾는 좋은 방법은 ['good-first-issue 태그로 검새'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). +✅ '입문-친화적'인 저장소를 찾는 좋은 방법은 ['good-first-issue 태그로 검색하는 것입니다.'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Copy a repo locally](images/clone_repo.png) +![Copy a repo locally](../images/clone_repo.png) 코드를 복사하는 방법에는 여러 가지가 있습니다. 한 가지 방법은 HTTPS, SSH 또는 GitHub CLI (Command Line 인터페이스)를 사용하여 저장소의 내용을 "복제"하는 것입니다. @@ -275,7 +275,7 @@ GitHub의 모든 공개 저장소에 스타 표시, 워치 및/또는 "포크" 친구와 페어링하여 서로의 코드를 작업하세요. 공동으로 프로젝트를 만들고, 코드를 포크하고, 브랜치를 만들고, 변경 사항을 병합합니다. ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) ## 리뷰 & 자기주도 학습 diff --git a/1-getting-started-lessons/3-accessibility/translations/README.ko.md b/1-getting-started-lessons/3-accessibility/translations/README.ko.md index d01004fb..201cfd38 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.ko.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.ko.md @@ -1,10 +1,10 @@ # 접근 가능한 웹 페이지 생성하기 -![All About Accessibility](webdev101-a11y.png) +![All About Accessibility](../webdev101-a11y.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) > 웹의 힘은 보편성에 있습니다. 장애에 관계없이 모든 사람이 접근하는 것은 필수 요소입니다. > @@ -207,7 +207,7 @@ CSS는 페이지에 있는 모든 요소의 형태를 완벽하게 제어합니 ``` ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) ## 리뷰 & 자기주도 학습 @@ -215,6 +215,6 @@ CSS는 페이지에 있는 모든 요소의 형태를 완벽하게 제어합니 ## 과제 -[Analyze a non-accessible web site](assignment.md) +[Analyze a non-accessible web site](../assignment.md) 크레딧: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) by Instrument diff --git a/1-getting-started-lessons/translations/README.ko.md b/1-getting-started-lessons/translations/README.ko.md index 8029df51..7419e0a4 100644 --- a/1-getting-started-lessons/translations/README.ko.md +++ b/1-getting-started-lessons/translations/README.ko.md @@ -4,9 +4,9 @@ ### 토픽 -1. [프로그래밍 언어 및 도구 소개](1-intro-to-programming-languages/README.md) -2. [GitHub의 기초](2-github-basics/README.md) -3. [접근성의 기초](3-accessibility/README.md) +1. [프로그래밍 언어 및 도구 소개](../1-intro-to-programming-languages/translations/README.ko.md) +2. [GitHub의 기초](../2-github-basics/translations/README.ko.md) +3. [접근성의 기초](../3-accessibility/translations/README.ko.md) ### 크레딧 diff --git a/2-js-basics/1-data-types/translations/README.ko.md b/2-js-basics/1-data-types/translations/README.ko.md index cce94b72..b61b8dbe 100644 --- a/2-js-basics/1-data-types/translations/README.ko.md +++ b/2-js-basics/1-data-types/translations/README.ko.md @@ -1,10 +1,10 @@ # JavaScript 기초: 데이터 타입 -![JavaScript Basics - Data types](images/webdev101-js-datatypes.png) +![JavaScript Basics - Data types](../images/webdev101-js-datatypes.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) 해당 강의에서는 웹에서 상호작용을 제공하는 언어인 JavaScript의 기초를 다룹니다. @@ -185,7 +185,7 @@ let myString2 = "World"; JavaScript는 때때로 놀라운 방법으로 데이터 타입을 처리하는 것으로 유명합니다. 'gotchas'에 대해 약간 알아보세요. 예시: 대소문자 구분은 물릴 수 있습니다! 콘솔에서 다음을 시도하십시오: `let age = 1; let Age = 2; age == Age` (resolves `false` -- why?). 다른 문제를 찾을 수 있습니까? ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) ## 리뷰 & 자기주도 학습 @@ -193,4 +193,4 @@ JavaScript는 때때로 놀라운 방법으로 데이터 타입을 처리하는 ## 과제 -[Data Types Practice](assignment.md) \ No newline at end of file +[Data Types Practice](../assignment.md) \ No newline at end of file diff --git a/2-js-basics/2-functions-methods/translations/README.ko.md b/2-js-basics/2-functions-methods/translations/README.ko.md index bec0c1e3..e33f7a73 100644 --- a/2-js-basics/2-functions-methods/translations/README.ko.md +++ b/2-js-basics/2-functions-methods/translations/README.ko.md @@ -1,10 +1,10 @@ # JavaScript 기초: 메소드와 함수 -![JavaScript Basics - Functions](images/webdev101-js-functions.png) +![JavaScript Basics - Functions](../images/webdev101-js-functions.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) 코드 작성에 대해 생각할 때 항상 코드를 읽을 수 있도록 해야합니다. 직설적이지 않지만, 코드는 작성된 것보다 더 많이 읽힙니다. 개발자의 툴 박스에서 유지관리 가능한 코드를 보장하는 핵심 도구는 **함수**입니다. @@ -181,7 +181,7 @@ setTimeout(3000, () => { 함수와 메소드의 차이점을 한 문장으로 표현할 수 있나요? 시도해보세요! ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) ## 리뷰 & 자기주도 학습 @@ -189,4 +189,4 @@ setTimeout(3000, () => { ## 과제 -[Fun with Functions](assignment.md) \ No newline at end of file +[Fun with Functions](../assignment.md) \ No newline at end of file diff --git a/2-js-basics/3-making-decisions/translations/README.ko.md b/2-js-basics/3-making-decisions/translations/README.ko.md index c395508c..8925dd1e 100644 --- a/2-js-basics/3-making-decisions/translations/README.ko.md +++ b/2-js-basics/3-making-decisions/translations/README.ko.md @@ -1,10 +1,10 @@ # JavaScript 기초: 결정하기 -![JavaScript Basics - Making decisions](images/webdev101-js-decisions.png) +![JavaScript Basics - Making decisions](../images/webdev101-js-decisions.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) 결정을 내리고 코드가 실행되는 순서를 제어하면 코드를 재사용하며 강력하게 만들 수 있습니다. 이 강의에서는 JavaScript에서 데이터 흐름을 제어하기 위한 구문과 논리 자료형 데이터 타입을 함께 사용하는 중요성을 다룹니다. @@ -160,7 +160,7 @@ if (firstNumber > secondNumber) { 논리 연산자로 프로그램을 먼저 만든 뒤, 삼항 표현식을 사용하여 다시 작성하십시오. 어떤 구문을 선호합니까? ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) ## 리뷰 & 자기주도 학습 @@ -170,4 +170,4 @@ Josh Comeau'의 wonderful [operator lookup](https://joshwcomeau.com/operator-loo ## 과제 -[Operators](assignment.md) +[Operators](../assignment.md) diff --git a/2-js-basics/4-arrays-loops/translations/README.ko.md b/2-js-basics/4-arrays-loops/translations/README.ko.md index 406d9fe2..901ccb10 100644 --- a/2-js-basics/4-arrays-loops/translations/README.ko.md +++ b/2-js-basics/4-arrays-loops/translations/README.ko.md @@ -1,10 +1,10 @@ # JavaScript 기초: 배열과 반복 -![JavaScript Basics - Arrays](images/webdev101-js-arrays.png) +![JavaScript Basics - Arrays](../images/webdev101-js-arrays.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) 이 강의에서는 웹에서 상호 작용을 제공하는 언어인 JavaScript의 기본 사항을 다룹니다. 데이터를 컨트롤하는 데 사용하는 배열과 반복문에 대해 알아 봅니다. @@ -112,7 +112,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) { for문과 while문 외에 배열을 반복하는 다른 방법이 있습니다. [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) 그리고 [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)도 있습니다. 해당 기술 중 하나를 사용하여 배열 반복을 다시 작성하십시오. ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) ## 리뷰 & 자기주도 학습 @@ -121,4 +121,4 @@ JavaScript의 배열에는 많은 메서드를 가져서 데이터 조작에 매 ## 과제 -[Loop an Array](assignment.md) +[Loop an Array](../assignment.md) diff --git a/2-js-basics/translations/README.ko.md b/2-js-basics/translations/README.ko.md index 559ca603..d4d0d31e 100644 --- a/2-js-basics/translations/README.ko.md +++ b/2-js-basics/translations/README.ko.md @@ -4,10 +4,10 @@ JavaScript는 웹의 언어입니다. 이 네 가지 강의에서 기초를 배 ### 주제 -1. [변수와 데이터 타입](1-data-types/README.md) -2. [함수와 메소드](2-functions-methods/README.md) -3. [JavaScript로 결정하기](3-making-decisions/README.md) -4. [배열과 반복](4-arrays-loops/README.md) +1. [변수와 데이터 타입](../1-data-types/translations/README.ko.md) +2. [함수와 메소드](../2-functions-methods/translations/README.ko.md) +3. [JavaScript로 결정하기](../3-making-decisions/translations/README.ko.md) +4. [배열과 반복](../4-arrays-loops/translations/README.ko.md) ### 크레딧 diff --git a/3-terrarium/1-intro-to-html/translations/README.ko.md b/3-terrarium/1-intro-to-html/translations/README.ko.md index 812201fc..2d94e03d 100644 --- a/3-terrarium/1-intro-to-html/translations/README.ko.md +++ b/3-terrarium/1-intro-to-html/translations/README.ko.md @@ -1,11 +1,11 @@ # Terrarium 프로젝트 파트 1: HTML 소개 -![Introduction to HTML](images/webdev101-html.png) +![Introduction to HTML](../images/webdev101-html.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) ### 소개 @@ -17,7 +17,7 @@ HTML, HyperText Markup Language는 웹의 '뼈대' 입니다. CSS가 HTML과 Jav 컴퓨터에서, 'terrarium' 이라는 폴더를 만들고 그 안에 'index.html' 파일을 만듭니다. 새 VS Code 윈도우를 열어서 'open folder'를 클릭하고, terrarium 폴더를 만들면 Visual Studio Code에서 이 작업을 할 수 있습니다. 탐색기에서 작은 'file' 버튼을 클릭하고 새 파일을 만듭니다: -![explorer in VS Code](images/vs-code-index.png) +![explorer in VS Code](../images/vs-code-index.png) 또는 @@ -217,7 +217,7 @@ HTML에는 여전히 재미있고 '오래된' 태그가 있지만, 마크업에 ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) ## 리뷰 & 자기주도 학습 @@ -228,4 +228,4 @@ HTML은 웹을 오늘 날의 웹으로 구축하는 데 도움이 준 'tried and ## 과제 -[Practice your HTML: Build a blog mockup](assignment.md) +[Practice your HTML: Build a blog mockup](../assignment.md) diff --git a/3-terrarium/2-intro-to-css/translations/README.ko.md b/3-terrarium/2-intro-to-css/translations/README.ko.md index 722d607c..c86204a6 100644 --- a/3-terrarium/2-intro-to-css/translations/README.ko.md +++ b/3-terrarium/2-intro-to-css/translations/README.ko.md @@ -1,11 +1,11 @@ # Terrarium 프로젝트 파트 2: CSS 소개 -![Introduction to CSS](images/webdev101-css.png) +![Introduction to CSS](../images/webdev101-css.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) ### 소개 @@ -69,7 +69,7 @@ body { 브라우저의 콘솔에서 'Elements'을 열고 H1 폰트를 보십시오. 브라우저에 기록된대로 본문에서 폰트를 상속합니다: -![inherited font](images/1.png) +![inherited font](../images/1.png) ✅ 중첩된 스타일이 다른 속성을 상속하도록 만들 수 있습니까? @@ -246,13 +246,13 @@ HTML 마크업의 각 식물에는 id와 클래스의 조합이 있습니다. id jar 좌측 하단 부분에 'bubble' 광택을 추가하여 유리처럼 보이도록 합니다. `.jar-glossy-long`과 `.jar-glossy-short`를 빛 반사되는 것처럼 보이도록 꾸밉니다. 다음과 같이 표시됩니다. -![finished terrarium](./images/terrarium-final.png) +![finished terrarium](.././images/terrarium-final.png) 강의 후 퀴즈를 완료하려면, 다음 학습 모듈을 진행하십시오: [Style your HTML app with CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics) ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) ## 리뷰 & 자기주도 학습 @@ -260,4 +260,4 @@ CSS는 믿을 수 없게 간단해 보이지만, 모든 브라우저와 모든 ## 과제 -[CSS Refactoring](assignment.md) +[CSS Refactoring](../assignment.md) diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ko.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ko.md index 169fba17..92f867f1 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ko.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ko.md @@ -1,11 +1,11 @@ # Terrarium 프로젝트 파트 3: DOM 조작과 클로저 -![DOM and a closure](images/webdev101-js.png) +![DOM and a closure](../images/webdev101-js.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) ### 소개 @@ -17,7 +17,7 @@ DOM을 조작하기 위해 클로저를 사용할 예정입니다. > DOM을 웹 페이지 문서를 제어할 수 있는 모든 방법으로 나타낼 수 있는 트리로 생각하십시오. 프로그래머가 선택한 프로그래밍 언어를 사용하여 DOM에 접근하고 편집, 변경, 재배치하며 관리할 수 있는 다양한 API(Application Program Interfaces)가 작성되어 있습니다. -![DOM tree representation](./images/dom-tree.png) +![DOM tree representation](.././images/dom-tree.png) > DOM과 참조하는 HTML 마크업의 표현입니다. From [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -189,7 +189,7 @@ function stopElementDrag() { 이제 프로젝트를 완료했습니다! -🥇 축하합니다! 아름다운 terrarium을 완성했습니다. ![finished terrarium](./images/terrarium-final.png) +🥇 축하합니다! 아름다운 terrarium을 완성했습니다. ![finished terrarium](.././images/terrarium-final.png) --- @@ -199,7 +199,7 @@ function stopElementDrag() { ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) ## 리뷰 & 자기주도 학습 @@ -211,5 +211,5 @@ function stopElementDrag() { ## 과제 -[Work a bit more with the DOM](assignment.md) +[Work a bit more with the DOM](../assignment.md) diff --git a/3-terrarium/translations/README.ko.md b/3-terrarium/translations/README.ko.md index 7ec8d815..773580ac 100644 --- a/3-terrarium/translations/README.ko.md +++ b/3-terrarium/translations/README.ko.md @@ -2,13 +2,13 @@ 작은 드래그 앤 드롭 코드-명상. 약간의 HTML, JS와 CSS를 사용하여 웹 인터페이스를 구축하고, 스타일을 지정하고, 상호 작용을 추가합니다. -![my terrarium](images/screenshot_gray.png) +![my terrarium](../images/screenshot_gray.png) # Lessons -1. [HTML 소개](./1-intro-to-html/README.md) -2. [CSS 소개](./2-intro-to-css/README.md) -3. [DOM 및 JS Closures](./3-intro-to-DOM-and-closures/README.md) +1. [HTML 소개](.././1-intro-to-html/translations/README.ko.md) +2. [CSS 소개](.././2-intro-to-css/translations/README.ko.md) +3. [DOM 및 JS Closures](.././3-intro-to-DOM-and-closures/translations/README.ko.md) ## 크레딧 diff --git a/4-typing-game/translations/README.ko.md b/4-typing-game/translations/README.ko.md index 590eaf6f..959cafde 100644 --- a/4-typing-game/translations/README.ko.md +++ b/4-typing-game/translations/README.ko.md @@ -8,7 +8,7 @@ 타이핑 게임을 만들기 위해 지금까지 배운 JavaScript, HTML 및 CSS 스킬을 사용합니다. 게임은 플레이어에게 무작위 인용문([Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes) 인용문 사용)과 플레이어가 정확하게 입력하는 데 걸리는 시간을 제시합니다. -![demo](images/demo.gif) +![demo](../images/demo.gif) ## 사전 조건 diff --git a/5-browser-extension/1-about-browsers/translations/README.ko.md b/5-browser-extension/1-about-browsers/translations/README.ko.md index 83a83103..9f088dfc 100644 --- a/5-browser-extension/1-about-browsers/translations/README.ko.md +++ b/5-browser-extension/1-about-browsers/translations/README.ko.md @@ -1,11 +1,11 @@ # 브라우저 확장 프로젝트 파트 1: 브라우저에 대한 모든 것 -![Browser sketchnote](images/sketchnote.jpg) +![Browser sketchnote](../images/sketchnote.jpg) > Sketchnote by [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) ### 소개 @@ -19,7 +19,7 @@ ✅ 약간의 역사: 첫번째 브라우저는 'WorldWideWeb'라고 불렸으며 Sir Timothy Berners-Lee가 1990년에 만들었습니다. -![early browsers](images/earlybrowsers.jpg) +![early browsers](../images/earlybrowsers.jpg) > Some early browsers, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) 사용자가 URL(Uniform Resource Locator) 주소를 사용하여 인터넷에 연결하고, `http` 혹은 `https` 주소를 통해 Hypertext Transfer Protocol을 사용하면, 브라우저가 웹 서버와 통신하여 웹 페이지를 가져옵니다. @@ -46,7 +46,7 @@ 만들기 전에, 브라우저 확장을 작성하고 배포하는 프로세스를 찾아보세요. 브라우저마다 이 작업을 관리하는 방법이 다소 다르지만, 프로세스는 Chrome과 Firefox와 같이 Edge의 예제와 유사합니다: -![install a browser extension](images/install-on-edge.png) +![install a browser extension](../images/install-on-edge.png) 본질적으로, 프로세스는 다음과 같습니다: @@ -86,11 +86,11 @@ src 이 확장은 두 화면을 가집니다. 한 화면에는 API 키와 지역 코드를 수집합니다: -![extension form](images/1.png) +![extension form](../images/1.png) 그리고 두번째 화면에는 지역의 탄소 사용량을 출력합니다: -![carbon usage](images/2.png) +![carbon usage](../images/2.png) 이제 HTML 폼을 작성하고 CSS 스타일을 지정하는 것으로 시작하겠습니다. @@ -149,7 +149,7 @@ npm install ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) ## 리뷰 & 자기주도 학습 @@ -163,5 +163,5 @@ npm install ## 과제 -[Restyle your extension](assignment.md) +[Restyle your extension](../assignment.md) diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/README.ko.md b/5-browser-extension/2-forms-browsers-local-storage/translations/README.ko.md index cfe75231..6967bd1c 100644 --- a/5-browser-extension/2-forms-browsers-local-storage/translations/README.ko.md +++ b/5-browser-extension/2-forms-browsers-local-storage/translations/README.ko.md @@ -2,7 +2,7 @@ ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) ### 소개 @@ -12,7 +12,7 @@ ### 확장에서 조작할 요소를 설정합니다: -지금까지 HTML 폼과 브라우저 확장에 대한 결과 `
`를 작성했습니다. 이제부터, `/src/index.js` 파일에서 작업하고 확장을 조금씩 빌드해야 합니다. 프로젝트 설정 및 빌드 프로세스에 대해서는 [이전 강의](../about-browsers/README.md)를 참조하세요. +지금까지 HTML 폼과 브라우저 확장에 대한 결과 `
`를 작성했습니다. 이제부터, `/src/index.js` 파일에서 작업하고 확장을 조금씩 빌드해야 합니다. 프로젝트 설정 및 빌드 프로세스에 대해서는 [이전 강의](../../1-about-browsers/translations/README.ko.md)를 참조하세요. `index.js` 파일에서 작업하면서, 다양한 필드에 값을 저장할 `const` 변수를 만드는 것으로 시작합니다: @@ -100,7 +100,7 @@ function reset(e) { APIKey를 문자열 값으로 설정한다고 하면, 예를 들어 웹 페이지를 "inspecting" 하고 (브라우저를 우측 클릭하여 검사할 수 있습니다) 애플리케이션 탭으로 이동하여 저장소를 확인했을 때 Edge에 설정되어 있다는 것을 볼 수 있습니다. -![Local storage pane](images/localstorage.png) +![Local storage pane](../images/localstorage.png) ✅ LocalStorage에 일부 데이터를 저장하기 꺼리는 상황을 생각해보세요. 일반적으로 API 키를 LocalStorage에 배치하는 것은 좋지 않은 생각입니다! 알 수 있나요? 우리 경우, 앱은 순수하게 학습을 위함이고, 앱 스토어에도 배포하지 않으므로 이 방법을 사용합니다. @@ -210,7 +210,7 @@ async function displayCarbonUsage(apiKey, region) { ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) ## 리뷰 & 자기주도 학습 @@ -218,5 +218,5 @@ async function displayCarbonUsage(apiKey, region) { ## 과제 -[Adopt an API](assignment.md) +[Adopt an API](../assignment.md) diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.ko.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.ko.md index 0044bddd..4638ada4 100644 --- a/5-browser-extension/3-background-tasks-and-performance/translations/README.ko.md +++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.ko.md @@ -2,7 +2,7 @@ ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) ### 소개 @@ -20,7 +20,7 @@ Performance 탭에는 Profiling 도구가 있습니다. 웹 사이트를 열고 (예를 들어, https://www.microsoft.com) 'Record' 버튼을 클릭한 뒤에, 사이트를 새로 고칩니다. 언제든 recording을 중단하면, 사이트를 'script', 'render', 그리고 'paint' 하려고 만든 루틴을 볼 수 있습니다: -![Edge profiler](./images/profiler.png) +![Edge profiler](.././images/profiler.png) ✅ Edge에서 Performance 패널에서 [Microsoft Documentation](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance)를 방문하세요 @@ -30,11 +30,11 @@ Performance 탭에는 Profiling 도구가 있습니다. 웹 사이트를 열고 프로필 타임라인의 일부를 선택하고 요약 패널을 보게된 뒤 페이지 performance의 snapshot을 가져옵니다: -![Edge profiler snapshot](./images/snapshot.png) +![Edge profiler snapshot](.././images/snapshot.png) 이벤트 로그 패널을 확인하여 15ms 이상 넘긴 이벤트가 있는지 확인합니다: -![Edge event log](./images/log.png) +![Edge event log](.././images/log.png) ✅ 프로파일러에 대해 알아보세요! 이 사이트에서 개발자 도구를 열고 병목 현상이 있는지 확인하세요. 불러오는 속도가 가장 느린 어셋은 무엇인가요? 가장 빠른가요? @@ -133,7 +133,7 @@ function drawIcon(value) { ``` 코드에서, 백엔드 작업 매니저로 들어오는 모든 메시지 리스너를 추가합니다. 'updateIcon' 이라고 불리면, 다음 코드가 수행되고, Canvas API를 사용해서 적절한 색상의 아이콘을 그립니다. -✅ [Space Game lessons](../../space-game/drawing-to-canvas/README.md)에서 Canvas API에 대해 더 배울 것 입니다. +✅ [Space Game lessons](../../../6-space-game/2-drawing-to-canvas/translations/README.ko.md)에서 Canvas API에 대해 더 배울 것 입니다. 이제, 확장을 (`npm run build`)로 다시 빌드합니다, 확장을 새로 고치고 시작한 뒤, 색상이 변하는 것을 봅니다. 심부름을 하거나 설거지를 하기에 좋을 때 인가요? 이제 압니다! @@ -147,7 +147,7 @@ function drawIcon(value) { ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) ## 리뷰 & 자기주도 학습 @@ -157,5 +157,5 @@ function drawIcon(value) { ## 과제 -[Analyze a site for performance](assignment.md) +[Analyze a site for performance](../assignment.md) diff --git a/5-browser-extension/translations/README.ko.md b/5-browser-extension/translations/README.ko.md index e63d06dc..802a26ee 100644 --- a/5-browser-extension/translations/README.ko.md +++ b/5-browser-extension/translations/README.ko.md @@ -8,13 +8,13 @@ Edge, Chrome과 Firefox에서 작동하는 브라우저 확장을 만듭니다. ### 주제 -1. [브라우저에 대하여](1-about-browsers/README.md) -2. [폼과 로컬 저장소](2-forms-browsers-local-storage/README.md) -3. [백그라운드 작업과 성능](3-background-tasks-and-performance/README.md) +1. [브라우저에 대하여](../1-about-browsers/translations/README.ko.md) +2. [폼과 로컬 저장소](../2-forms-browsers-local-storage/translations/README.ko.md) +3. [백그라운드 작업과 성능](../3-background-tasks-and-performance/translations/README.ko.md) ### 크레딧 -![a green browser extension](extension-screenshot.png) +![a green browser extension](../extension-screenshot.png) ## 크레딧 diff --git a/6-space-game/1-introduction/translations/README.ko.md b/6-space-game/1-introduction/translations/README.ko.md index 9b347a47..010ffbc3 100644 --- a/6-space-game/1-introduction/translations/README.ko.md +++ b/6-space-game/1-introduction/translations/README.ko.md @@ -1,10 +1,10 @@ # Space 게임 제작하기 파트 1: 소개 -![video](../images/pewpew.gif) +![video](../../images/pewpew.gif) ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) ### 게임 개발의 상속과 구성 @@ -213,7 +213,7 @@ pub-sub 패턴이 어떻게 게임을 발전시킬 수 있는지 생각해보세 ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) ## 리뷰 & 자기주도 학습 @@ -221,4 +221,4 @@ pub-sub 패턴이 어떻게 게임을 발전시킬 수 있는지 생각해보세 ## 과제 -[Mock up a game](assignment.md) +[Mock up a game](../assignment.md) diff --git a/6-space-game/2-drawing-to-canvas/translations/README.ko.md b/6-space-game/2-drawing-to-canvas/translations/README.ko.md index 5bce27da..abf7e63d 100644 --- a/6-space-game/2-drawing-to-canvas/translations/README.ko.md +++ b/6-space-game/2-drawing-to-canvas/translations/README.ko.md @@ -2,7 +2,7 @@ ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) ## Canvas @@ -26,7 +26,7 @@ canvas는 내용이 없는 게 기본인 HTML 요소입니다; 빈 상태입니 캔버스는 데카르트 좌표계로 사물을 그립니다. 따라서 x-축과 y-축을 이용하여 무언가의 위치를 나타냅니다. 위치 `0,0`은 죄측 상단이며 우측 하단은 캔버스의 너비와 높이라고 말한 위치입니다. -![the canvas's grid](canvas_grid.png) +![the canvas's grid](../canvas_grid.png) > Image from [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) 캔버스 요소에 그리려면 다음 단계를 거쳐야 합니다: @@ -123,11 +123,11 @@ Canvas 요소가 있는 웹 페이지를 만듭니다. 검은 화면 `1024 * 768 - Hero ship - ![Hero ship](solution/assets/player.png) + ![Hero ship](../solution/assets/player.png) - 5*5 monster - ![Monster ship](solution/assets/enemyShip.png) + ![Monster ship](../solution/assets/enemyShip.png) ### 개발 시작하기 위한 권장 단계 @@ -191,11 +191,11 @@ npm start 완성된 결과는 아래와 같이 보이게 됩니다: -![Black screen with a hero and 5*5 monsters](partI-solution.png) +![Black screen with a hero and 5*5 monsters](../partI-solution.png) ## 솔루션 -먼저 직접 해결해보고 문제가 발생한다면, [solution](solution/app.js)을 보세요 +먼저 직접 해결해보고 문제가 발생한다면, [solution](../solution/app.js)을 보세요 --- @@ -205,7 +205,7 @@ npm start ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) ## 리뷰 & 자기주도 학습 @@ -213,4 +213,4 @@ npm start ## 과제 -[Play with the Canvas API](assignment.md) \ No newline at end of file +[Play with the Canvas API](../assignment.md) \ No newline at end of file diff --git a/6-space-game/3-moving-elements-around/translations/README.ko.md b/6-space-game/3-moving-elements-around/translations/README.ko.md index c6527a3c..4c2a042d 100644 --- a/6-space-game/3-moving-elements-around/translations/README.ko.md +++ b/6-space-game/3-moving-elements-around/translations/README.ko.md @@ -2,7 +2,7 @@ ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) 외계인이 화면을 돌아다니기 전까지는 게임이 재미 없습니다! 이 게임에서는, 두 가지 타입의 동작을 씁니다: @@ -115,7 +115,7 @@ let gameLoopId = setInterval(() => ## Space 게임 계속하기 -기존 코드를 가져와 확장합니다. 파트 I 에서 작성한 코드로 시작하거나 [Part II- starter](your-work)의 코드를 사용합니다. +기존 코드를 가져와 확장합니다. 파트 I 에서 작성한 코드로 시작하거나 [Part II- starter](../your-work)의 코드를 사용합니다. - **영웅을 움직이기**: 화살표 키를 사용하여 영웅을 이동할 수 있도록 코드를 추가합니다. - **적을 움직이기**: 적들이 주어진 속도로 상단에서 하단으로 이동할 수 있도록 코드를 추가합니다. @@ -378,7 +378,7 @@ npm start ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) ## 리뷰 & 자기주도 학습 @@ -386,4 +386,4 @@ npm start ## 과제 -[Comment your code](assignment.md) +[Comment your code](../assignment.md) diff --git a/6-space-game/4-collision-detection/translations/README.ko.md b/6-space-game/4-collision-detection/translations/README.ko.md index af8b63ff..fd6b86ba 100644 --- a/6-space-game/4-collision-detection/translations/README.ko.md +++ b/6-space-game/4-collision-detection/translations/README.ko.md @@ -2,7 +2,7 @@ ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) 이 강의에서는 JavaScript로 레이저를 쏘는 방법을 배웁니다! 게임에 다음 두 가지를 추가합니다: @@ -104,7 +104,7 @@ class Weapon { ## 무엇을 만드나요 -이전 강의에 존재한 기존 코드 (정리하고 리팩토링함)를 가져와서, 확장합니다. 파트 II에서 코드를 시작하거나 [Part III- starter](/your-work) 코드를 사용합니다. +이전 강의에 존재한 기존 코드 (정리하고 리팩토링함)를 가져와서, 확장합니다. 파트 II에서 코드를 시작하거나 [Part III- starter](../your-work) 코드를 사용합니다. > tip: 작업할 레이저는 이미 어셋 폴더에 있으므로 코드에서 참조합니다 @@ -282,11 +282,11 @@ npm start ## 🚀 도전 -폭발을 추가합니다! [the Space Art repo](../solution/spaceArt/readme.txt)에서 게임 어셋을 살펴보고 레이저가 외계인을 칠 때 폭발하도록 추가해보세요 +폭발을 추가합니다! [the Space Art repo](../../solution/spaceArt/readme.txt)에서 게임 어셋을 살펴보고 레이저가 외계인을 칠 때 폭발하도록 추가해보세요 ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) ## 리뷰 & 자기주도 학습 @@ -294,4 +294,4 @@ npm start ## 과제 -[Explore collisions](assignment.md) +[Explore collisions](../assignment.md) diff --git a/6-space-game/5-keeping-score/translations/README.ko.md b/6-space-game/5-keeping-score/translations/README.ko.md index db8d197c..88e761c1 100644 --- a/6-space-game/5-keeping-score/translations/README.ko.md +++ b/6-space-game/5-keeping-score/translations/README.ko.md @@ -2,7 +2,7 @@ ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) 이 강의에서는 어떻게 게임에서 점수를 내고 생명을 구하는 가에 대하여 배웁니다. @@ -28,7 +28,7 @@ ctx.fillText("show this on the screen", 0, 0); 게임에 다음을 추가하겠습니다: - **게임 점수**: 적의 배가 파괴될 때마다, 영웅은 점수를 받아야하고, 하나의 배마다 100점을 제안합니다. 게임 점수는 좌측 하단에 보여야 합니다. -- **생명**: 여러분의 배는 세 생명이 있습니다. 적의 배로 부딪칠 때마다 생명을 잃습니다. 생명 점수는 우측 하단에 보여야되고 ![life image](solution/assets/life.png)로 만들어야 합니다. +- **생명**: 여러분의 배는 세 생명이 있습니다. 적의 배로 부딪칠 때마다 생명을 잃습니다. 생명 점수는 우측 하단에 보여야되고 ![life image](../solution/assets/life.png)로 만들어야 합니다. ## 권장 단계 @@ -178,7 +178,7 @@ npm start ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) ## 리뷰 & 자기주도 학습 @@ -186,4 +186,4 @@ npm start ## 과제 -[Build a Scoring Game](assignment.md) +[Build a Scoring Game](../assignment.md) diff --git a/6-space-game/6-end-condition/translations/README.ko.md b/6-space-game/6-end-condition/translations/README.ko.md index 9fe5aa5d..9e4ade94 100644 --- a/6-space-game/6-end-condition/translations/README.ko.md +++ b/6-space-game/6-end-condition/translations/README.ko.md @@ -2,7 +2,7 @@ ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) 게임에서 *조건을 표현하고 종료*하는 여러 방식이 있습니다. 게임이 종료된 이유를 말하는 것은 게임 크리에이터의 일입니다. 지금까지 만든 space 게임에 대해 말하고 있다고 가정하면, 몇 가지 이유가 있습니다: @@ -211,7 +211,7 @@ npm start ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) ## 리뷰 & 자기주도 학습 @@ -219,4 +219,4 @@ npm start ## 과제 -[Build a Sample Game](assignment.md) +[Build a Sample Game](../assignment.md) diff --git a/6-space-game/translations/README.ko.md b/6-space-game/translations/README.ko.md index 6bf3b0f0..d2041de0 100644 --- a/6-space-game/translations/README.ko.md +++ b/6-space-game/translations/README.ko.md @@ -4,7 +4,7 @@ 이 강의에서는 자신만의 스페이스 게임을 만드는 방법을 배웁니다. 만약 "Space Invaders" 게임을 해본 적이 있다면, 이 게임은 같은 아이디어를 가지고 있습니다: 우주선을 조종하고 위에서 내려오는 몬스터를 향해서 발사하는 것입니다. 완성된 게임의 모습은 다음과 같습니다. -![Finished game](images/pewpew.gif) +![Finished game](../images/pewpew.gif) 6개의 강의에서 다음을 학습합니다: @@ -17,13 +17,13 @@ ## 개요 - 이론 - - [JavaScript를 사용한 게임 빌드 소개](1-introduction/README.md) + - [JavaScript를 사용한 게임 빌드 소개](../1-introduction/translations/README.ko.md) - 실습 - - [canvas로 그리기](2-drawing-to-canvas/README.md) - - [화면에 요소 이동](3-moving-elements-around/README.md) - - [충돌 감지](4-collision-detection/README.md) - - [점수 유지](5-keeping-score/README.md) - - [게임 종료 및 재시작](6-end-condition/README.md) + - [canvas로 그리기](../2-drawing-to-canvas/translations/README.ko.md) + - [화면에 요소 이동](../3-moving-elements-around/translations/README.ko.md) + - [충돌 감지](../4-collision-detection/translations/README.ko.md) + - [점수 유지](../5-keeping-score/translations/README.ko.md) + - [게임 종료 및 재시작](../6-end-condition/translations/README.ko.md) ## Credits diff --git a/7-bank-project/1-template-route/translations/README.ko.md b/7-bank-project/1-template-route/translations/README.ko.md index 3f0537d5..9abdd80d 100644 --- a/7-bank-project/1-template-route/translations/README.ko.md +++ b/7-bank-project/1-template-route/translations/README.ko.md @@ -2,7 +2,7 @@ ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) ### 소개 @@ -253,7 +253,7 @@ HTML의 *Login*과 *Logout* 버튼에 바인딩을 추가하여 내비게이션 `history.pushState`를 사용하면 브라우저의 탐색 기록에 새로운 항목이 생성됩니다. 브라우저의 *back button*을 누르고 있으면 다음처럼 내용이 표시되는지 볼 수 있습니다: -![Screenshot of navigation history](./history.png) +![Screenshot of navigation history](.././history.png) 뒤로가기 버튼을 몇 번 클릭하면, 현재 URL이 변경되며 히스토리가 갱신되지만 동일한 템플릿이 계속 출력되는 것을 볼 수 있습니다. @@ -284,7 +284,7 @@ updateRoute(); ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) ## 리뷰 & 자기주도 학습 @@ -292,4 +292,4 @@ updateRoute(); ## 과제 -[Improve the routing](assignment.md) +[Improve the routing](../assignment.md) diff --git a/7-bank-project/2-forms/translation/README.es.md b/7-bank-project/2-forms/translations/README.es.md similarity index 100% rename from 7-bank-project/2-forms/translation/README.es.md rename to 7-bank-project/2-forms/translations/README.es.md diff --git a/7-bank-project/2-forms/translation/README.ko.md b/7-bank-project/2-forms/translations/README.ko.md similarity index 96% rename from 7-bank-project/2-forms/translation/README.ko.md rename to 7-bank-project/2-forms/translations/README.ko.md index 58bb5272..e8a5142c 100644 --- a/7-bank-project/2-forms/translation/README.ko.md +++ b/7-bank-project/2-forms/translations/README.ko.md @@ -2,7 +2,7 @@ ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) ### 소개 @@ -12,7 +12,7 @@ ### 준비물 -이 강의를 위해 웹 앱의 [HTML templates and routing](../1-template-route/README.md)을 완료해야합니다. 또한 [Node.js](https://nodejs.org)와 [run the server API](../api/README.md)를 로컬에 설치해야 계정을 만들 데이터를 보낼 수 있습니다. +이 강의를 위해 웹 앱의 [HTML templates and routing](../../1-template-route/translations/README.ko.md)을 완료해야합니다. 또한 [Node.js](https://nodejs.org)와 [run the server API](../../api/README.md)를 로컬에 설치해야 계정을 만들 데이터를 보낼 수 있습니다. 터미널에서 다음 명령을 실행하여 서버가 잘 실행되고 있는지 테스트할 수 있습니다: @@ -99,7 +99,7 @@ curl http://localhost:5000/api 브라우저의 URL 섹션에서 변경된 것을 알고 있나요? -![Screenshot of the browser's URL change after clicking the Register button](./images/click-register.png) +![Screenshot of the browser's URL change after clicking the Register button](.././images/click-register.png) `
`의 기본 작업은 [GET method](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3)를 사용하여 현재 서버 URL에 폼을 제출하고, 폼 데이터를 URL에 직접 추가하는 것입니다. 이 방식에는 몇 가지 단점이 있습니다: @@ -121,7 +121,7 @@ curl http://localhost:5000/api 이제 이름으로 새로운 계정을 가입합니다. *Register* 버튼을 클릭하면 다음과 같은 내용이 표시됩니다: -![](./images/form-post.png) +![](.././images/form-post.png) 모든 것이 잘 되면, 서버에 생성된 계정 데이터가 포함되어 [JSON](https://www.json.org/json-en.html)으로 응답해야 합니다. @@ -219,7 +219,7 @@ async function register() { 조금 길지만 도착했습니다! [browser developer tools](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools)를 열고, 새 계정을 가입하면, 웹 페이지에 변경 사항이 표시되지 않으면서 콘솔에 작동을 확인할 메시지가 나타납니다. -![Screenshot showing log message in the browser console](./images/browser-console.png) +![Screenshot showing log message in the browser console](.././images/browser-console.png) ✅ 데이터가 안전하게 서버로 보내졌다고 생각하나요? 누군가 요청을 가져갈 수 있다면 어떤가요? 보안 데이터 통신에 대해 자세히 보려면 [HTTPS](https://en.wikipedia.org/wiki/HTTPS)를 읽어보세요. @@ -275,11 +275,11 @@ async function register() { 다음은 살짝 스타일을 적용한 뒤에 최종 로그인 페이지를 보여주는 예시입니다: -![Screenshot of the login page after adding CSS styles](./images/result.png) +![Screenshot of the login page after adding CSS styles](.././images/result.png) ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) ## 리뷰 & 자기주도 학습 @@ -287,4 +287,4 @@ async function register() { ## 과제 -[Style your bank app](assignment.md) +[Style your bank app](../assignment.md) diff --git a/7-bank-project/2-forms/translation/assignment.es.md b/7-bank-project/2-forms/translations/assignment.es.md similarity index 100% rename from 7-bank-project/2-forms/translation/assignment.es.md rename to 7-bank-project/2-forms/translations/assignment.es.md diff --git a/7-bank-project/3-data/translations/README.ko.md b/7-bank-project/3-data/translations/README.ko.md index e7aa6a53..df04b4fd 100644 --- a/7-bank-project/3-data/translations/README.ko.md +++ b/7-bank-project/3-data/translations/README.ko.md @@ -2,7 +2,7 @@ ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) ### 소개 @@ -12,7 +12,7 @@ ### 준비물 -이 강의에서 웹 앱의 [Login and Registration Form](../2-forms/README.md) 부분을 작성하는 것이 필요합니다. 또한 계정 데이터를 가져오려면 [Node.js](https://nodejs.org)와 [run the server API](../api/README.md)를 로컬에 설치해야 합니다. +이 강의에서 웹 앱의 [Login and Registration Form](../../2-forms/translations/README.ko.md) 부분을 작성하는 것이 필요합니다. 또한 계정 데이터를 가져오려면 [Node.js](https://nodejs.org)와 [run the server API](../../api/README.md)를 로컬에 설치해야 합니다. 터미널에서 이 명령을 실행하여 서버가 실행되고 있는지 테스트할 수 있습니다: @@ -27,11 +27,11 @@ curl http://localhost:5000/api 기존 웹 사이트는 모든 HTML 페이지를 다시 불러오기 위해서 사용자가 링크를 클릭하거나 폼으로 데이터를 제출할 때 표시되는 콘텐츠를 갱신합니다. 새로운 데이터를 불러와야 할 때마다, 웹 서버는 브라우저에서 처리하는 새 HTML 페이지를 반환하여, 현재 사용자의 액션을 중단하고 다시 불러오는 동안 상호 작용을 제한합니다. 이 과정을 *Multi-Page Application* 혹은 *MPA*라고 합니다. -![Update workflow in a multi-page application](./images/mpa.png) +![Update workflow in a multi-page application](.././images/mpa.png) 웹 애플리케이션이 더 복잡해지고 상호 작용하기 시작하면서, [AJAX (Asynchronous JavaScript and XML)](https://en.wikipedia.org/wiki/Ajax_(programming))이라는 새로운 기술이 나타났습니다. 이 기술을 쓰면 웹 앱은 HTML 페이지를 다시 불러오지 않고, JavaScript를 사용하여 비동기로 서버에서 데이터를 보내고 찾을 수 있으므로, 갱신 속도가 빨라지고 사용자 상호 작용이 부드러워집니다. 서버에서 새로운 데이터를 받으면, [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) API로 현재 HTML 페이지를 JavaScript로 갱신할 수도 있습니다. 시간이 지나면서, 이 방식은 이제 [*Single-Page Application* or *SPA*](https://en.wikipedia.org/wiki/Single-page_application)라는 것으로 발전했습니다. -![Update workflow in a single-page application](./images/spa.png) +![Update workflow in a single-page application](.././images/spa.png) AJAX가 처음 소개되었을 때, 데이터를 비동기로 가져올 유일한 API는 [`XMLHttpRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)였습니다. 그러나 모던 브라우저는 이제 promises를 사용하고 JSON 데이터를 조작할 때 적당하며, 더 편리하고 강력한 [`Fetch` API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)도 구현합니다. @@ -39,7 +39,7 @@ AJAX가 처음 소개되었을 때, 데이터를 비동기로 가져올 유일 ### 작업 -[이전 강의](../2-forms/README.md)에서는 계정을 만들기 위해 가입 폼을 구현했습니다. 이제 이미 있는 계정으로 로그인하는 코드를 추가하고, 데이터를 가져올 것 입니다. `app.js` 파일을 열고 새로운 `login` 함수를 추가합니다: +[이전 강의](../../2-forms/translations/README.ko.md)에서는 계정을 만들기 위해 가입 폼을 구현했습니다. 이제 이미 있는 계정으로 로그인하는 코드를 추가하고, 데이터를 가져올 것 입니다. `app.js` 파일을 열고 새로운 `login` 함수를 추가합니다: ```js async function login() { @@ -155,7 +155,7 @@ if (data.error) { 이제 유효하지 않은 계정으로 로그인 시도하면, 다음과 같이 보입니다: -![Screenshot showing the error message displayed during login](./images/login-error.png) +![Screenshot showing the error message displayed during login](.././images/login-error.png) `register` 함수 오류와 동일한 동작을 하도록 구현합니다 (HTML을 갱신하는 것을 잊지 마세요). @@ -217,7 +217,7 @@ function updateDashboard() { > 잔액을 더 예쁘게 보이게 만드려면, [`toFixed(2)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) 방법으로 소수점 이하 2자리 값을 강제로 출력합니다. -이제 대시보드를 불러올 때마다 `updateDashboard()` 함수를 호출해야 합니다. 이미 [lesson 1 assignment](../1-template-route/assignment.md)를 완료했다면 간단해야 합니다. 그렇지 않다면 이미 구현된 내용으로 쓸 수 있습니다. +이제 대시보드를 불러올 때마다 `updateDashboard()` 함수를 호출해야 합니다. 이미 [lesson 1 assignment](../../1-template-route/assignment.md)를 완료했다면 간단해야 합니다. 그렇지 않다면 이미 구현된 내용으로 쓸 수 있습니다. `updateRoute()` 함수 끝에 이 코드를 추가합니다: @@ -240,7 +240,7 @@ const routes = { ## HTML 템플릿으로 동적 테이블 row 만들기 -[first lesson](../1-template-route/README.md)에서는 HTML 템플릿과 [`appendChild()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) 메소드로 앱의 탐색을 구현했습니다. 템플릿은 더 작아 질 수 있고 페이지의 반복적인 부분을 동적으로 채우는 데 쓸 수 있습니다. +[first lesson](../../1-template-route/translations/README.ko.md)에서는 HTML 템플릿과 [`appendChild()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) 메소드로 앱의 탐색을 구현했습니다. 템플릿은 더 작아 질 수 있고 페이지의 반복적인 부분을 동적으로 채우는 데 쓸 수 있습니다. 유사한 접근 방식을 사용하여 HTML 테이블에 트랜잭션 목록을 출력합니다. @@ -315,12 +315,12 @@ function updateElement(id, textOrNode) { 여기는 꾸며진 대시보드 페이지의 예시입니다: -![Screenshot of an example result of the dashboard after styling](../images/screen2.png) +![Screenshot of an example result of the dashboard after styling](../../images/screen2.png) ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) ## 과제 -[Refactor and comment your code](assignment.md) +[Refactor and comment your code](../assignment.md) diff --git a/7-bank-project/4-state-management/translations/README.ko.md b/7-bank-project/4-state-management/translations/README.ko.md index d645e9ea..ae8e47ee 100644 --- a/7-bank-project/4-state-management/translations/README.ko.md +++ b/7-bank-project/4-state-management/translations/README.ko.md @@ -2,7 +2,7 @@ ## 강의 전 퀴즈 -[Pre-lecture quiz](.github/pre-lecture-quiz.md) +[Pre-lecture quiz](../.github/pre-lecture-quiz.md) ### 소개 @@ -12,7 +12,7 @@ ### 준비물 -이 강의의 웹 앱 [data fetching](../3-data/README.md) 파트를 완료해둬야 합니다. [Node.js](https://nodejs.org)와 [run the server API](../api/README.md)를 로컬에 설치해야 계정 정보를 관리할 수 있습니다. +이 강의의 웹 앱 [data fetching](../../3-data/translations/README.ko.md) 파트를 완료해둬야 합니다. [Node.js](https://nodejs.org)와 [run the server API](../../api/README.md)를 로컬에 설치해야 계정 정보를 관리할 수 있습니다. 터미널에서 다음 명령을 수행하여 서버가 잘 실행되고 있는지 테스트할 수 있습니다: @@ -25,7 +25,7 @@ curl http://localhost:5000/api ## 상태 관리에 대하여 다시 생각하기 -[이전 강의](../3-data/README.md)에서는, 현재 로그인한 사용자의 은행 데이터를 포함하는 전역 `account` 변수를 사용하여 앱에 기초 상태 개념을 도입했습니다. 그러나, 현재 구현에는 조금 취약점이 있습니다. 대시보드에서 페이지를 새로 고쳐보기 바랍니다. 무슨 일이 일어나고 있나요? +[이전 강의](../../3-data/translations/README.ko.md)에서는, 현재 로그인한 사용자의 은행 데이터를 포함하는 전역 `account` 변수를 사용하여 앱에 기초 상태 개념을 도입했습니다. 그러나, 현재 구현에는 조금 취약점이 있습니다. 대시보드에서 페이지를 새로 고쳐보기 바랍니다. 무슨 일이 일어나고 있나요? 현재 코드에는 3가지 이슈가 있습니다: @@ -44,7 +44,7 @@ curl http://localhost:5000/api 이런 문제를 해결한 후에는 다른 이슈가 이미 고쳐졌거나 더 쉽게 고칠 수 있습니다. 이러한 문제를 해결하기 위한 여러 가능한 방식들이 있지만, **데이터를 중앙 집중화하고 변경하는 방법**으로 구성된 공통 솔루션을 사용합니다. 데이터 흐름은 다음과 같습니다: -![Schema showing the data flows between the HTML, user actions and state](./images/data-flow.png) +![Schema showing the data flows between the HTML, user actions and state](.././images/data-flow.png) > 데이터와 뷰 갱신을 자동으로 연결하는 부분은, [Reactive Programming](https://en.wikipedia.org/wiki/Reactive_programming)의 고급 컨셉과 연결되었으므로 여기서 다루지는 않습니다. 깊게 분석한다면 좋게 팔로우 업할 주제입니다. @@ -270,12 +270,12 @@ const routes = { ## 강의 후 퀴즈 -[Post-lecture quiz](.github/post-lecture-quiz.md) +[Post-lecture quiz](../.github/post-lecture-quiz.md) ## 과제 -[Implement "Add transaction" dialog](assignment.md) +[Implement "Add transaction" dialog](../assignment.md) 다음은 과제를 완료한 뒤의 예시 결과입니다: -![Screenshot showing an example "Add transaction" dialog](./images/dialog.png) +![Screenshot showing an example "Add transaction" dialog](.././images/dialog.png) diff --git a/7-bank-project/translations/README.ko.md b/7-bank-project/translations/README.ko.md index fe786937..617268d6 100644 --- a/7-bank-project/translations/README.ko.md +++ b/7-bank-project/translations/README.ko.md @@ -2,14 +2,14 @@ 이 프로젝트에서는, 가상의 은행을 만드는 방법을 배웁니다. 이 강의에는 웹 앱을 레이아웃과 라우트를 제공하고, 폼을 작성하며 상태를 관리하고, 은행 데이터 API에서 데이터를 가져오는 방법에 대한 지침이 포함되어 있습니다. - + ## 강의 -1. [웹 앱에서 HTML 템플릿과 라우트](1-template-route/README.md) -2. [로그인과 가입 폼 제작](2-forms/README.md) -3. [데이터를 가져오고 사용하는 방식](3-data/README.md) -4. [상태 관리의 개념](4-state-management/README.md) +1. [웹 앱에서 HTML 템플릿과 라우트](../1-template-route/translations/README.ko.md) +2. [로그인과 가입 폼 제작](../2-forms/translations/README.ko.md) +3. [데이터를 가져오고 사용하는 방식](../3-data/translations/README.ko.md) +4. [상태 관리의 개념](../4-state-management/translations/README.ko.md) ### 크레딧