mirror of
https://github.com/microsoft/Web-Dev-For-Beginners.git
synced 2025-08-29 09:30:11 +02:00
FIX : fix url for translations folder
This commit is contained in:
minwook-shin
@@ -1,11 +1,11 @@
|
||||
# 브라우저 확장 프로젝트 파트 1: 브라우저에 대한 모든 것
|
||||
|
||||
|
||||
|
||||
> 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년에 만들었습니다.
|
||||
|
||||
|
||||
|
||||
> 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의 예제와 유사합니다:
|
||||
|
||||
|
||||
|
||||
|
||||
본질적으로, 프로세스는 다음과 같습니다:
|
||||
|
||||
@@ -86,11 +86,11 @@ src
|
||||
|
||||
이 확장은 두 화면을 가집니다. 한 화면에는 API 키와 지역 코드를 수집합니다:
|
||||
|
||||
|
||||
|
||||
|
||||
그리고 두번째 화면에는 지역의 탄소 사용량을 출력합니다:
|
||||
|
||||
|
||||
|
||||
|
||||
이제 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)
|
||||
|
||||
|
||||
@@ -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 폼과 브라우저 확장에 대한 결과 `<div>`를 작성했습니다. 이제부터, `/src/index.js` 파일에서 작업하고 확장을 조금씩 빌드해야 합니다. 프로젝트 설정 및 빌드 프로세스에 대해서는 [이전 강의](../about-browsers/README.md)를 참조하세요.
|
||||
지금까지 HTML 폼과 브라우저 확장에 대한 결과 `<div>`를 작성했습니다. 이제부터, `/src/index.js` 파일에서 작업하고 확장을 조금씩 빌드해야 합니다. 프로젝트 설정 및 빌드 프로세스에 대해서는 [이전 강의](../../1-about-browsers/translations/README.ko.md)를 참조하세요.
|
||||
|
||||
`index.js` 파일에서 작업하면서, 다양한 필드에 값을 저장할 `const` 변수를 만드는 것으로 시작합니다:
|
||||
|
||||
@@ -100,7 +100,7 @@ function reset(e) {
|
||||
|
||||
APIKey를 문자열 값으로 설정한다고 하면, 예를 들어 웹 페이지를 "inspecting" 하고 (브라우저를 우측 클릭하여 검사할 수 있습니다) 애플리케이션 탭으로 이동하여 저장소를 확인했을 때 Edge에 설정되어 있다는 것을 볼 수 있습니다.
|
||||
|
||||
|
||||
|
||||
|
||||
✅ 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)
|
||||
|
||||
|
||||
@@ -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에서 Performance 패널에서 [Microsoft Documentation](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance)를 방문하세요
|
||||
|
||||
@@ -30,11 +30,11 @@ Performance 탭에는 Profiling 도구가 있습니다. 웹 사이트를 열고
|
||||
|
||||
프로필 타임라인의 일부를 선택하고 요약 패널을 보게된 뒤 페이지 performance의 snapshot을 가져옵니다:
|
||||
|
||||
|
||||
|
||||
|
||||
이벤트 로그 패널을 확인하여 15ms 이상 넘긴 이벤트가 있는지 확인합니다:
|
||||
|
||||
|
||||
|
||||
|
||||
✅ 프로파일러에 대해 알아보세요! 이 사이트에서 개발자 도구를 열고 병목 현상이 있는지 확인하세요. 불러오는 속도가 가장 느린 어셋은 무엇인가요? 가장 빠른가요?
|
||||
|
||||
@@ -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)
|
||||
|
||||
|
||||
@@ -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)
|
||||
|
||||
### 크레딧
|
||||
|
||||
|
||||
|
||||
|
||||
## 크레딧
|
||||
|
||||
|
||||
Reference in New Issue
Block a user