add 5-1, 5-2, 5-3 readme ko translation (WIP)

5-browser-extension/1-about-browsers/translations/README.ko.md

@@ -1,17 +1,17 @@
-# Browser Extension Project Part 1: All about Browsers
+# 브라우저 확장 프로젝트 파트 1: 브라우저에 대한 모든 것
 
 ![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
+## 강의 전 퀴즈
 
 [Pre-lecture quiz](.github/pre-lecture-quiz.md)
 
-### Introduction
+### 소개
 
 Browser extensions add additional functionality to a browser. But before you build one, you should learn a little about how browsers do their work.
 
-### About the browser
+### 브라우저에 대하여
 
 In this series of lessons, you'll learn how to build a browser extension that will work on Chrome, Firefox and Edge browsers. In this part, you'll discover how browsers work and scaffold out the elements of the browser extension.
 
@@ -34,7 +34,7 @@ A really useful website that you probably should bookmark in whatever browser yo
 
 ✅ How can you tell what browsers are most popular with your web site's user base? Check your analytics - you can install various analytics packages as part of your web development process, and they will tell you what browsers are most used by the various popular browsers.
 
-## Browser extensions
+## 브라우저 확장
 
 Why would you want to build a browser extension? It's a handy thing to attach to your browser when you need quick access to tasks that you tend to repeat. For example, if you find yourself needing to check colors on the various web pages that you interact with, you might install a color-picker browser extension. If you have trouble remembering passwords, you might use a password-management browser extension. 
 
@@ -42,7 +42,7 @@ Browser extensions are fun to develop, too. They tend to manage a finite number
 
 ✅ What are your favorite browser extensions? What tasks do they perform?
 
-### Installing extensions
+### 확장 설치하기
 
 Before you start building, take a look at the process of building and deploying a browser extension. While each browser varies a bit in how they manage this task, the process is similar on Chrome and Firefox to this example on Edge:
 
@@ -57,12 +57,12 @@ In essence, the process will be:
 
 ✅ These instructions pertain to extensions you build yourself; to install extensions that have been released to the browser extension store associated to each browser, you should navigate to those [stores](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) and install the extension of your choice.
 
-### Get Started
+### 시작하기
 
 You're going to build a browser extension that displays your region's carbon footprint, showing your region's energy usage and the source of the energy. The extension will have a form that collects an API key so that you can access
 CO2 Signal's API.
 
-**You need:**
+**필요합니다:**
 
 - [an API key](https://www.co2signal.com/); enter your email in the box on this page and one will be sent to you
 - the [code for your region](http://api.electricitymap.org/v3/zones) corresponding to the [Electricity Map](https://www.electricitymap.org/map) (in Boston, for example, I use 'US-NEISO').
@@ -83,7 +83,7 @@ src
 
 ✅ Once you have your API key and Region code handy, store those somewhere in a note for future use.
 
-### Build the HTML for the extension
+### 확장을 위한 HTML 제작하기
 
 This extension has two views. One to gather the API key and region code:
 
@@ -144,15 +144,15 @@ Congratulations, you've taken the first steps towards building a browser extensi
 
 ---
 
-## 🚀 Challenge
+## 🚀 도전
 
 Take a look at a browser extension store and install one to your browser. You can examine its files in interesting ways. What do you discover?
 
-## Post-Lecture Quiz
+## 강의 후 퀴즈
 
 [Post-lecture quiz](.github/post-lecture-quiz.md)
 
-## Review & Self Study
+## 리뷰 & 자기주도 학습
 
 In this lesson you learned a little about the history of the web browser; take this opportunity to learn about how the inventors of the World Wide Web envisioned its use by reading more about its history. Some useful sites include:
 
@@ -162,7 +162,7 @@ In this lesson you learned a little about the history of the web browser; take t
 
 [An interview with Tim Berners-Lee](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
 
-## Assignment 
+## 과제 
 
 [Restyle your extension](assignment.md)
 

5-browser-extension/2-forms-browsers-local-storage/translations/README.ko.md

@@ -1,16 +1,16 @@
-# Browser Extension Project Part 2: Call an API, use Local Storage
+# 브라우저 확장 프로젝트 파트 2: 로컬 저장소를 사용한, API 호출
 
-## Pre-Lecture Quiz
+## 강의 전 퀴즈
 
 [Pre-lecture quiz](.github/pre-lecture-quiz.md)
 
-### Introduction
+### 소개
 
 In this lesson, you'll call an API by submitting your browser extension's form and display the results in your browser extension. In addition, you'll learn about how you can store data in your browser's local storage for future reference and use.
 
 ✅ Follow the numbered segments in the appropriate files to know where to place your code
 
-### Set up the elements to manipulate in the extension:
+### 확장에서 조작할 요소를 설정합니다:
 
 By this time you have built the HTML for the form and results `<div>` for your browser extension. From now on, you'll need to work in the `/src/index.js` file and building your extension bit by bit. Refer to the [previous lesson](../about-browsers/README.md) on getting your project set up and on the build process.
 
@@ -34,7 +34,7 @@ const clearBtn = document.querySelector('.clear-btn');
 
 All of these fields are referenced by their css class, as you set it up in the HTML in the previous lesson.
 
-### Add listeners
+### 리스너 추가하기
 
 Next, add event listeners to the form and the clear button that resets the form, so that if a user submits the form or clicks that reset button, something will happen, and add the call to initialize the app at the bottom of the file:
 
@@ -46,7 +46,7 @@ init();
 
 ✅ Notice the shorthand used to listen for a submit or click event, and how the event it is passed to the handleSubmit or reset functions. Can you write the equivalent of this shorthand in a longer format? Which do you prefer?
 
-### Build out the init() function and the reset() function:
+### init() 함수와 reset() 함수 작성하기:
 
 Now you are going to build the function that initializes the extension, which is called init():
 
@@ -108,7 +108,7 @@ Notice that you use the Web API to manipulate LocalStorage, either by using `get
 
 Before building the `displayCarbonUsage()` function that is called in `init()`, let's build the functionality to handle the initial form submission.
 
-### Handle the form submission
+### 양식 제출 제어하기
 
 Create a function called `handleSubmit` that accepts an event argument `(e)`. Stop the event from propagating (in this case, we want to stop the browser from refreshing) and call a new function, `setUpUser`, passing in the arguments `apiKey.value` and `region.value`. In this way, you use the two values that are brought in via the initial form when the appropriate fields are populated.
 
@@ -120,7 +120,7 @@ function handleSubmit(e) {
 ```
 ✅ Refresh your memory - the HTML you set up in the last lesson has two input fields whose `values` are captured via the `const` you set up at the top of the file, and they are both `required` so the browser stops users from inputting null values.
 
-### Set up the user
+### 사용자 설정하기
 
 Moving on to the `setUpUser` function, here is where you set local storage values for apiKey and regionName. Add a new function:
 
@@ -137,7 +137,7 @@ function setUpUser(apiKey, regionName) {
 ```
 This function sets a loading message to show while the API is called. At this point, you have arrived at creating the most important function of this browser extension!
 
-### Display Carbon Usage
+### 탄소 사용량 출력하기
 
 Finally it's time to query the API!
 
@@ -204,19 +204,19 @@ Congratulations! If you build your extension (`npm run build`) and refresh it in
 
 ---
 
-## 🚀 Challenge
+## 🚀 도전
 
 We've discussed several types of API so far in these lessons. Choose a web API and research in depth what it offers. For example, take a look at APIs available within browsers such as the [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API). What makes a great API in your opinion?
 
-## Post-Lecture Quiz
+## 강의 후 퀴즈
 
 [Post-lecture quiz](.github/post-lecture-quiz.md)
 
-## Review & Self Study
+## 리뷰 & 자기주도 학습
 
 You learned about LocalStorage and APIs in this lesson, both very useful for the professional web developer. Can you think how these two things work together? Think about how you would architect a web site that would store items to be used by an API.
 
-## Assignment
+## 과제
 
 [Adopt an API](assignment.md)
 

5-browser-extension/3-background-tasks-and-performance/translations/README.ko.md

@@ -1,16 +1,16 @@
-# Browser Extension Project Part 3: Learn about Background Tasks and Performance
+# 브라우저 확장 프로젝트 파트 3: 백그라운드 작업과 성능 학습
 
-## Pre-Lecture Quiz
+## 강의 전 퀴즈
 
 [Pre-lecture quiz](.github/pre-lecture-quiz.md)
 
-### Introduction
+### 소개
 
 In the last two lessons of this module, you learned how to build a form and display area for data fetched from an API. It's a very standard way of creating web presences on the web. You even learned how to handle fetching data asyncronously. Your browser extension is very nearly complete. 
 
 It remains to manage some background tasks, including refreshing the color of the extension's icon, so this is a great time to talk about how the browser manages this kind of task. Let's think about these browser tasks in the context of the performance of your web assets as you build them.
 
-## Web Performance Basics
+## 웹 성능 기초
 
 > "Website performance is about two things: how fast the page loads, and how fast the code on it runs." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
 
@@ -38,17 +38,17 @@ Check the Event Log pane to see if any event took longer than 15 ms:
 
 ✅ Get to know your profiler! Open the developer tools on this site and see if there are any bottlenecks. What's the slowest-loading asset? The fastest?
 
-## Profiling checks
+## 프로파일링 점검
 
 In general there are some "problem areas" that every web developer should watch for when building a site, so as to avoid nasty surprises when it's time to deploy to production.
 
-**Asset sizes**: The web has gotten 'heavier', and thus slower, over the past few years. Some of this weight has to do with the use of images.
+**어셋 크기**: The web has gotten 'heavier', and thus slower, over the past few years. Some of this weight has to do with the use of images.
 
 ✅ Look through the [Internet Archive](https://httparchive.org/reports/page-weight) for a historical view of page weight and more.
 
 A good practice is to ensure that your images are optimized, delivered at the right size and resolution for your users.
 
-**DOM traversals**: The browser has to build its Document Object Model based on the code you write, so it's in the interest of good page performance to keep your tags minimal, only using and styling what the page needs. To this point, excess CSS associated with a page could be optimized; styles that need to be used only on one page don't need to be included in the main style sheet, for example.
+**DOM 순회**: The browser has to build its Document Object Model based on the code you write, so it's in the interest of good page performance to keep your tags minimal, only using and styling what the page needs. To this point, excess CSS associated with a page could be optimized; styles that need to be used only on one page don't need to be included in the main style sheet, for example.
 
 **JavaScript**: Every JavaScript developer should watch for 'render-blocking' scripts that must be loaded before the rest of the DOM can be traversed and painted to the browser. Consider using `defer` with your inline scripts (as is done in the Terrarium module).
 
@@ -56,7 +56,7 @@ A good practice is to ensure that your images are optimized, delivered at the ri
 
 Now that you have an idea on how the browser renders the assets you send to it, let's look at the last few things you need to do to complete your extension:
 
-### Create a function to calculate color
+### 색상 계산하는 함수 생성하기
 
 Working in `/src/index.js`, add a function called `calculateColor()` after the series of `const` variables you set to gain access to the DOM:
 
@@ -89,7 +89,7 @@ The chrome.runtime has [an API](https://developer.chrome.com/extensions/runtime)
 
 > Note, if you want to profile a browser extension, launch the dev tools from within the extension itself, as it is its own separate browser instance.
 
-### Set a default icon color
+### 기본 아이콘 색상 지정하기
 
 Now, in the `init()` function, set the icon to be generic green to start by again calling chrome's `updateIcon` action:
 
@@ -101,7 +101,7 @@ chrome.runtime.sendMessage({
 		},
 });
 ```
-### Call the function, execute the call
+### 함수 호출하고, call 실행하기
 
 Next, call that function you just created by adding it to the promise returned by the C02Signal API:
 
@@ -141,21 +141,21 @@ Congratulations, you've built a useful browser extension and learned more about
 
 ---
 
-## 🚀 Challenge
+## 🚀 도전
 
 Investigate some open source web sites have been around a long time ago, and, based on their GitHub history, see  if you can determine how they were optimized over the years for performance, if at all. What is the most common pain point?
 
-## Post-Lecture Quiz
+## 강의 후 퀴즈
 
 [Post-lecture quiz](.github/post-lecture-quiz.md)
 
-## Review & Self Study
+## 리뷰 & 자기주도 학습
 
 Consider signing up for a [performance newsletter](https://perf.email/)
 
 Investigate some of the ways that browsers gauge web performance by looking through the performance tabs in their web tools. Do you find any major differences?
 
-## Assignment
+## 과제
 
 [Analyze a site for performance](assignment.md)