Merge pull request #101 from donghoon-song/feature/translate-assignment-into-ko
Translating assignments into ko(Korean) (complete)pull/172/head
Jen Looper
4 years ago
committed by
GitHub
commit
e7aae713f3
@ -0,0 +1,11 @@
|
|||||||
|
# 접근성이 좋지 않은 웹 사이트 분석하기
|
||||||
|
|
||||||
|
## 설명
|
||||||
|
|
||||||
|
여러분이 접근할 수 없다고 생각하는 사이트를 식별해보고, 접근성을 개선할 수 있는 실행 계획을 만들어봅니다. 여러분의 첫 과제는 사이트를 식별하고 분석 도구를 사용하지 않고 사이트에 접근할 수 없는 방법을 자세히 설명한 다음, Lighthouse 분석을 통해 그 사이트를 확인하는 것입니다. 분석의 결과를 가지고 사이트를 개선할 수 있는 10가지 포인트를 가진 세부 계획을 개략적으로 설명해봅니다.
|
||||||
|
|
||||||
|
## 평가 기준
|
||||||
|
|
||||||
|
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||||
|
--- | --- | --- | ---
|
||||||
|
학생 보고서 | 보고서에 Lighthouse의 진단 결과 캡쳐본이 pdf파일로 첨부되었고, 10가지의 개선점과 함께 개선방안을 포함한 단락들이 포함된 경우 | 필수조건이 20%정도 부족한 경우 | 필수조건이 50%정도 부족한 경우
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# 데이터 타입 연습
|
||||||
|
|
||||||
|
## 설명
|
||||||
|
|
||||||
|
쇼핑 카트를 만든다고 상상해봅시다. 필요한 데이터 타입들에 대한 문서를 작성해봅시다. 어떻게 그런 타입들을 고르게 됐습니까?
|
||||||
|
|
||||||
|
## 평가 기준
|
||||||
|
|
||||||
|
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||||
|
--- | --- | --- | ---
|
||||||
|
| 6가지 데이터 타입을 나열하고 자세히 살펴본 뒤 용도를 문서화한 경우 | 4가지 데이터 타입을 탐구한 답안 | 2가지 데이터 타입을 탐구한 경우
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
# 함수와 놀기
|
||||||
|
|
||||||
|
## 설명
|
||||||
|
|
||||||
|
무언가를 반환하는 함수와 아무것도 반환하지 않는 또 다른 함수를 만들어봅니다.
|
||||||
|
|
||||||
|
기본값이 없는 매개 변수와 있는 매개 변수를 잘 혼합해 함수를 만들 수 있는지를 확인합니다.
|
||||||
|
|
||||||
|
## 평가 기준
|
||||||
|
|
||||||
|
기준 | <br>모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||||
|
--- | --- | --- | ---
|
||||||
|
| 다양한 매개 변수를 가진 두개 이상의 잘 동작하는 함수를 포함한 답안 | 소수의 매개변수를 가진 한개의 함수를 포함한 답안 | 버그가 있는 답안
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
# 연산자
|
||||||
|
|
||||||
|
## 설명
|
||||||
|
|
||||||
|
연산자를 연습해봅니다. 여러분이 구현해볼 만한 프로그램을 제안해 드립니다.
|
||||||
|
|
||||||
|
서로 다른 방식으로 등급을 매기는 두 개의 시스템과 그 시스템에 속한 학생들이 있습니다.
|
||||||
|
|
||||||
|
### 첫번째 등급 시스템
|
||||||
|
|
||||||
|
이 등급 시스템은 1-5점으로 등급을 나눕니다. 3점 이상이면 과정을 통과했다는 의미입니다.
|
||||||
|
|
||||||
|
### 두번째 등급 시스템
|
||||||
|
|
||||||
|
다른 등급 시스템은 `A, A-, B, B-, C, C-` 등급이 있습니다. `A`가 가장 높은 등급이고 `C`가 가장 낮은 등급입니다.
|
||||||
|
|
||||||
|
### 과제
|
||||||
|
|
||||||
|
학생들과 그들의 등급의 정보가 담긴 배열 `allStudents` 이 주어집니다. 과정을 통과한 학생들을 담은 새로운 배열 `studentsWhoPass`을 만들어 주시면 됩니다.
|
||||||
|
|
||||||
|
> 팁, for-loop, if...else 그리고 비교 연산자를 사용해 보시기 바랍니다.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let allStudents = [
|
||||||
|
'A',
|
||||||
|
'B-',
|
||||||
|
1,
|
||||||
|
4,
|
||||||
|
5,
|
||||||
|
2
|
||||||
|
]
|
||||||
|
|
||||||
|
let studentsWhoPass = [];
|
||||||
|
```
|
||||||
|
|
||||||
|
## 평가 기준
|
||||||
|
|
||||||
|
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||||
|
--- | --- | --- | ---
|
||||||
|
| 완전히 정답인 경우 | 부분적으로 정답인 경우 | 버그가 있는 경우
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
# 배열 순회하기
|
||||||
|
|
||||||
|
## 설명
|
||||||
|
|
||||||
|
1-20 사이의 숫자 중 모든 세 번째 숫자를 나열해 콘솔에 출력하는 프로그램을 만들어봅니다.
|
||||||
|
|
||||||
|
> 팁: for-loop를 사용하고 순회 표현식을 수정해봅니다.
|
||||||
|
|
||||||
|
## 평가 기준
|
||||||
|
|
||||||
|
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||||
|
--- | --- | --- | ---
|
||||||
|
| 프로그램이 올바르게 동작하며 설명하는 주석이 있는 경우 | 프로그램을 설명하는 주석이 없는 경우 | 프로그램이 불완전하거나 버그가 있는 경우
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# HTML 연습하기 : 블로그 모형 만들기
|
||||||
|
|
||||||
|
## 설명
|
||||||
|
|
||||||
|
여러분이 여러분의 개인 웹사이트를 디자인하거나 새로 디자인한다고 상상해봅시다. 여러분의 사이트의 그래픽 마크업을 만들어 봅시다. 그리고 사이트의 여러 요소들을 만드는 데 사용할 HTML 마크업을 작성해 봅시다. 종이에 해서 스캔해도 좋으며, 소프트웨어를 사용해도 좋습니다. HTML 마크업을 손으로 작성해보기만 하면 됩니다.
|
||||||
|
|
||||||
|
## 평가 기준
|
||||||
|
|
||||||
|
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||||
|
--- | --- | --- | ---
|
||||||
|
| 블로그 레이아웃이 10개 이상의 마크업 요소가 표시된 요소들로 표현되는 경우 | 블로그 레이아웃이 5개 정도의 마크업 요소가 표시된 요소들로 표현되는 경우 | 블로그 레이아웃이 최대 3개의 마크업 요소가 표시된 요소들로 표현되는 경우
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# CSS 리팩터링
|
||||||
|
|
||||||
|
## 설명
|
||||||
|
|
||||||
|
Flexbox 또는 CSS Grid를 사용하여 테라리움을 다시 만들고 스크린샷을 찍어 여러 브라우저에서 테스트했음을 보여주시면 좋습니다. 마크업을 변경해야 할 수 있으므로 리팩터링 기술이 적용된 새로운 버전의 앱을 만들어 봅시다. 요소를 드래그할 수 있게 만드는 것은 생각하지 않아도 됩니다. 지금은 HTML과 CSS만 리팩터링 해봅시다.
|
||||||
|
|
||||||
|
## 평가 기준
|
||||||
|
|
||||||
|
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||||
|
--- | --- | --- | ---
|
||||||
|
| 테라리움을 Flexbox 또는 CSS Grid를 사용하여 완전히 다시 만든 경우 | 몇개의 요소만 다시 만든 경우 | 테라리움을 전혀 새로 만들지 못한 경우
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# DOM으로 좀 더 작업하기
|
||||||
|
|
||||||
|
## 설명
|
||||||
|
|
||||||
|
DOM 요소를 '채택'하여 DOM을 조금 더 조사합니다. MSDN의 [DOM 인터페이스 목록](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)을 방문하여 하나를 선택합니다. 웹의 웹 사이트에서 사용중인 것을 찾아 사용 방법에 대한 설명을 작성해봅니다.
|
||||||
|
|
||||||
|
## 평가 기준
|
||||||
|
|
||||||
|
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||||
|
--- | --- | --- | ---
|
||||||
|
| 예시와 함께 단락으로 작성한 경우 | 단락으로 작성했지만 예시가 없는 경우 | 기록이 없는 경우
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
# 새로운 키보드 게임 만들기
|
||||||
|
|
||||||
|
## 설명
|
||||||
|
|
||||||
|
키보드 이벤트를 사용하여 작업을 수행하는 작은 게임을 만듭니다. 다른 종류의 타이핑 게임이거나 키 입력으로 화면에 픽셀을 그리는 예술 유형 게임이 될 수도 있습니다. 창의력을 발휘해보세요!
|
||||||
|
|
||||||
|
## 평가 기준
|
||||||
|
|
||||||
|
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||||
|
--- | --- | --- | ---
|
||||||
|
| 완전한 게임을 구현한 경우 | 최소한의 기능을 가진 게임을 구현한 경우 | 게임에 버그가 있는 경우
|
||||||
|
| | |
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# 나만의 확장 프로그램 만들기
|
||||||
|
|
||||||
|
## 설명
|
||||||
|
|
||||||
|
확장 프로그램의 예시 코드에는 스타일이 적용되어 있으나, 그대로 사용하지 않아도 됩니다. css 파일을 수정해서 나만의 멋진 확장 프로그램을 만들어봅시다.
|
||||||
|
|
||||||
|
## 평가 기준
|
||||||
|
|
||||||
|
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||||
|
--- | --- | --- | ---
|
||||||
|
| 새로운 스타일을 적용한 경우 | 스타일이 미완성된 경우 | 스타일에 오류가 있는 경우
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# API 사용하기
|
||||||
|
|
||||||
|
## 설명
|
||||||
|
|
||||||
|
API를 사용하면 매우 재밌을 것입니다. 여기에 [무료 API 리스트](https://github.com/public-apis/public-apis)가 있습니다. API를 선택하고, 문제를 해결하는 브라우저 확장프로그램을 만들어봅시다. 반려동물 사진을 충분히 가지고 있지 않은 것이 작은 문제일 수 있습니다. (그러면, [dog CEO API](https://dog.ceo/dog-api/)) 또는 더 거대한 API를 이용해보세요. - 재미있게 만들어보세요!
|
||||||
|
|
||||||
|
## 평가 기준
|
||||||
|
|
||||||
|
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||||
|
--- | --- | --- | ---
|
||||||
|
| 위 API를 사용하여 브라우저 확장프로그램을 만든 경우 | 일부만 API를 사용한 경우 | 오류가 있는 경우
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
# 사이트 성능 분석
|
||||||
|
|
||||||
|
웹 사이트에서 성능에 문제가 있는 영역을 보여주는 자세한 보고서를 만들어 봅시다. 사이트가 느린 이유와 속도를 높이기 위해 무엇을 할 수 있는지 분석해보세요. 브라우저 도구에만 의존하지 말고, 성능 분석을 위한 다른 도구들도 알아보세요.
|
||||||
|
|
||||||
|
## 평가 기준
|
||||||
|
|
||||||
|
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||||
|
--- | --- | --- | ---
|
||||||
|
| 브라우저 도구 뿐만 아니라 다른 도구에서 제공하는 세부 정보를 포함하여 보고서를 만든 경우 | 브라우저 도구를 사용하여 기본적인 보고서를 만든 경우 | 최소한의 보고서를 만든 경우
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# 게임 제작하기
|
||||||
|
|
||||||
|
## 설명
|
||||||
|
|
||||||
|
수업에 있는 예제 코드를 사용해서 게임을 만들어 봅시다. 간단한 게임이어야 하며, 목표는 class 또는 composition 패턴과 pub/sub 패턴 중 하나를 사용하여 게임을 만드는 것입니다. 창의력을 보여주세요!
|
||||||
|
|
||||||
|
## 평가 기준
|
||||||
|
|
||||||
|
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||||
|
--- | --- | --- | ---
|
||||||
|
| 화면에 세개의 요소가 있고 조작할 수 있는 경우 | 화면에 두개의 요소가 있고 조작할 수 있는 경우 | 화면에 한개의 요소가 있고 조작할 수 있는 경우
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Canvas API 사용하기
|
||||||
|
|
||||||
|
## 설명
|
||||||
|
|
||||||
|
Canvas API에서 한 요소를 선택하고 그 주위에 재미있는 요소를 추가해 봅시다. 수많은 별이 모인 은하수를 만들수 있나요? 색깔이 있는 선으로 특별한 질감을 만들 수 있나요? 영감이 필요한다면 CodePen을 참고해보세요. (복사하지는 마세요.)
|
||||||
|
|
||||||
|
## 평가 기준
|
||||||
|
|
||||||
|
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||||
|
--- | --- | --- | ---
|
||||||
|
| 특별한 질감 또는 모양을 보여주는 코드를 제출한 경우 | 코드가 제출되었지만 실행되지 않는 경우 | 코드가 제출되지 않은 경우
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# 코드 주석 달기
|
||||||
|
|
||||||
|
## 설명
|
||||||
|
|
||||||
|
게임 폴더에 있는 /app.js 파일을 살펴보고, 주석을 달고 정리해 봅시다. 코드가 많아지면 통제하기가 어려워질 수 있습니다. 지금 주석을 추가해서 나중에도 코드를 쉽게 파악할 수 있도록 조치해 봅시다.
|
||||||
|
|
||||||
|
## 평가 기준
|
||||||
|
|
||||||
|
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||||
|
--- | --- | --- | ---
|
||||||
|
| `app.js` 코드가 주석으로 충분히 설명되어 있고 논리적으로 설계된 경우 | `app.js` 코드가 주석으로 적절히 설명된 경우 | `app.js` 코드가 주석으로 충분히 설명되지 않고 복잡하게 설계된 경우
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# 충돌 감지
|
||||||
|
|
||||||
|
## 설명
|
||||||
|
|
||||||
|
## 평가 기준
|
||||||
|
|
||||||
|
충돌이 어떻게 작용하는지 더 잘 이해하기 위해 충돌하는 몇 가지 항목으로 아주 작은 게임을 만들어 봅시다. 키를 누르거나 마우스 클릭으로 이동하게 하고, 부딪혔을 때는 아이템들 중 하나에 무슨 일이 일어나게 해보세요. 부딪히는 것은 지구를 강타하는 유성이거나, 범퍼카 같은 것일 수도 있습니다. 창의력을 보여주세요!
|
||||||
|
|
||||||
|
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||||
|
--- | --- | --- | ---
|
||||||
|
| 항목을 캔버스에 끌어다 놓거나, 기본 충돌이 발생하고, 반응이 있는 샘플 코드를 만든 경우 | 코드가 일부 미완성인 경우 | 코드에 오류가 있는 경우
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# 득점 게임 만들기
|
||||||
|
|
||||||
|
## 설명
|
||||||
|
|
||||||
|
생명과 포인트를 창의적으로 보여주는 게임을 만들어 봅시다. 화면 가운데 하단에는 생명과 포인트를 큰 숫자로 나타내보세요. [무료 게임 목록](https://www.kenney.nl/)을 참고해보세요.
|
||||||
|
|
||||||
|
# 평가 기준
|
||||||
|
|
||||||
|
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||||
|
--- | --- | --- | ---
|
||||||
|
| 완성도 있는 게임을 만든 경우 | 일부만 작동하는 게임을 만든 경우 | 게임에 오류가 있는 경우
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
# 샘플 게임 만들기
|
||||||
|
|
||||||
|
## 설명
|
||||||
|
|
||||||
|
게임이 끝나는 다양한 조건을 연습할 수 있는 작은 게임을 만들어 봅시다. 점수를 얼마나 얻어야 하는지에 따라 주인공이 목숨을 다 잃거나 모든 몬스터들이 패배합니다. 콘솔 기반 어드벤처 게임과 같은 간단한 것을 만들어봅시다. 아래 예시를 참고해서 영감을 얻어 보세요.
|
||||||
|
|
||||||
|
```
|
||||||
|
영웅> 양날검 휘두르기 - 오크는 3포인트의 데미지를 입는다.
|
||||||
|
오크> 클럽 휘두르기 - 영웅은 2포인트의 데미지를 입는다.
|
||||||
|
영웅> 발차기 - 오크는 1포인트의 데미지를 입는다.
|
||||||
|
게임> 오크가 지는 경우 - 영웅은 2코인을 얻는다.
|
||||||
|
게임> ****해치울 몬스터가 더 이상 없으면 당신은 악마의 요새를 정복한 것입니다****
|
||||||
|
```
|
||||||
|
|
||||||
|
## 평가 기준
|
||||||
|
|
||||||
|
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||||
|
--- | --- | --- | ---
|
||||||
|
| 완성도 있는 게임을 만든 경우 | 부분적인 게임을 구현한 경우 | 게임에 일부 버그가 있는 경우
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
# 라우팅 개선
|
||||||
|
|
||||||
|
## 설명
|
||||||
|
|
||||||
|
경로 선언에는 현재 사용할 템플릿 ID만 포함됩니다. 하지만 새 페이지를 표시할 때는 추가할 것이 더 생기는 경우가 있습니다. 두 가지 추가 기능을 사용하여 라우팅 구현을 개선해 봅시다.
|
||||||
|
|
||||||
|
- 각 템플릿에 제목을 부여하고 템플릿이 변경되면 새 제목으로 창 제목을 변경합니다.
|
||||||
|
- 템플릿 변경 후 일부 코드를 실행하는 옵션을 추가합니다. 대시보드 페이지가 표시될 때마다 개발자 콘솔에 `'대시보드가 보임'`을 출력합니다.
|
||||||
|
|
||||||
|
## 평가 기준
|
||||||
|
|
||||||
|
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||||
|
--- | --- | --- | ---
|
||||||
|
| 두 기능이 구현되고 작동하는 경우. 제목 및 코드 추가는 `routes` 선언에 추가된 새 경로에서도 작동합니다. | 두 기능은 작동하지만, 동작은 하드 코딩되어 있으며 `routes` 선언을 통해 구성할 수 없는 경우. <br> 세 번째 경로를 제목과 코드와 함께 추가하면 작동하지 않거나 부분적으로 작동합니다. | 기능 중 하나가 없거나 제대로 작동하지 않는 경우
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
# 은행 앱 스타일링
|
||||||
|
|
||||||
|
## 설명
|
||||||
|
|
||||||
|
새 `styles.css` 파일을 만들고 현재 `index.html` 파일에 링크를 추가해봅니다. 방금 만든 CSS 파일에서 *로그인* 및 *대시 보드* 페이지가 멋지고 깔끔하게 보이도록 스타일을 추가합니다. 앱에 자체 브랜딩을 제공하기 위해 색상 테마를 만들어봅니다.
|
||||||
|
|
||||||
|
> 팁 : HTML을 수정하고 필요한 경우 새 요소와 클래스를 추가 할 수 있습니다.
|
||||||
|
|
||||||
|
## 평가 기준
|
||||||
|
|
||||||
|
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||||
|
--- | --- | --- | ---
|
||||||
|
| 모든 페이지가 깔끔하고 읽기 쉬우며 일관된 색상 테마와 다양한 섹션들이 적절하게 돋보이는 경우 | 페이지가 스타일링되어있지만 테마가 없거나 섹션들이 명확하게 구분되지 않은 경우 | 페이지가 스타일링되어 있지 않았으며 섹션들이 질서가 없고 정보를 읽기가 어려운 경우
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
# 코드 리팩터링 및 주석
|
||||||
|
|
||||||
|
## 설명
|
||||||
|
|
||||||
|
코드베이스가 커짐에 따라 코드를 자주 리팩터링하여 시간이 지남에 따라 가독성과 유지 관리가 가능하도록 유지하는 것이 중요합니다. 주석을 추가하고 `app.js` 를 리팩터링하여 코드 품질을 개선합니다.
|
||||||
|
|
||||||
|
- 서버 API 기본 URL과 같은 상수 추출
|
||||||
|
- 유사한 코드를 분해합니다. 예를 들어 `createAccount()` 및 `getAccount()` 모두에서 사용되는 코드를 다시 그룹화하는 `sendRequest()` 함수를 만들 수 있습니다.
|
||||||
|
- 읽기 쉽도록 코드 재구성 및 주석 추가
|
||||||
|
|
||||||
|
## 평가 기준
|
||||||
|
|
||||||
|
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||||
|
--- | --- | --- | ---
|
||||||
|
| 코드 주석이 잘 짜여진 여러개의 섹션으로 나뉘며 읽기 쉬운 경우. 그리고 상수들이 추출되고 잘 쪼개진 `sendRequest()` 함수를 생성한 경우 | 코드는 깔끔하지만 더 많은 주석, 지속적인 추출 또는 분해를 통해 개선될 수 있는 경우 | 코드가 지저분하고 주석도 잘 작성하지 않았으며 상수 또한 추출되지 않고 코드도 분해되지 않은 경우
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
# "거래 추가" 대화 상자 구현
|
||||||
|
|
||||||
|
## 설명
|
||||||
|
|
||||||
|
우리 은행 앱에는 여전히 새로운 거래를 입력 할 수 있는 한 가지 중요한 기능이 없습니다. 이전 네 가지 수업에서 배운 모든 것을 사용하여 "트랜잭션 추가" 대화 상자를 구현해봅시다.
|
||||||
|
|
||||||
|
- 대시 보드 페이지에 "거래 추가" 버튼 추가
|
||||||
|
- HTML 템플릿으로 새 페이지를 만들거나 JavaScript를 사용하여 대시 보드 페이지를 벗어나지 않고 대화 상자 HTML을 표시하거나 숨깁니다(해당 항목에 대해 [`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) 속성 또는 CSS 클래스를 사용할 수 있음).
|
||||||
|
- 대화 상자에 대한 [키보드 및 화면 판독기 접근성](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/)을 처리해야합니다.
|
||||||
|
- 입력 데이터 수신을 위한 HTML 양식 구현
|
||||||
|
- 양식 데이터에서 JSON 데이터를 만들어 API로 보냅니다.
|
||||||
|
- 새 데이터로 대시 보드 페이지 업데이트
|
||||||
|
|
||||||
|
호출해야하는 API와 예상되는 JSON 형식을 확인하려면 [서버 API 사양](../api/README.md) 을 살펴보세요.
|
||||||
|
|
||||||
|
다음은 과제를 완료 한 후의 예시 결과입니다.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 평가 기준
|
||||||
|
|
||||||
|
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||||
|
--- | --- | --- | ---
|
||||||
|
| 거래 추가 기능이 수업에서 본 모든 모범 사례에 따라 완전히 구현된 경우 | 거래 추가기능은 구현되지만, 강의에 표시된 모범 사례를 따르지 않거나 부분적으로만 작동하는 경우 | 거래 추가기능이 전혀 동작하지 않는 경우
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# 공식문서 읽기
|
||||||
|
|
||||||
|
## 설명
|
||||||
|
|
||||||
|
웹 개발자들이 필요할 만한 도구들이 [MDN 클라이언트 사이드 도구 문서](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)에 소개되어있습니다. 이번 수업내용에 포함되지 않은 3개의 도구를 선택하고, 왜 웹 개발자들이 사용할만한지를 설명해봅시다. 그리고 이 범주에 속하는 도구를 찾아서 문서를 공유해봅시다. MDN문서에 있는 똑같은 예시를 사용하면 안 됩니다.
|
||||||
|
|
||||||
|
## 평가 기준
|
||||||
|
|
||||||
|
모범 답안 | 적당한 답안 | 개선이 필요한 답안
|
||||||
|
--- | --- | ---
|
||||||
|
웹 개발자가 도구를 사용하는 이유를 설명한 경우 | 개발자가 도구를 사용하는 방법은 설명했지만 도구를 사용하는 이유는 설명하지 않은 경우 | 개발자가 도구를 사용하는 이유나 방법을 설명하지 않은 경우
|
||||||
Loading…
Reference in new issue