` 요소는 비어 있으므로 우리가 콘텐츠를 추가하기 전까지 화면에 아무것도 표시되지 않습니다. 또한 `id`를 부여하여 JavaScript로 쉽게 가져올 수 있도록 합니다. `app.js` 파일로 돌아가서 새로운 헬퍼 함수 `updateElement`를 생성하세요: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` 이 함수는 매우 간단합니다. 주어진 요소 *id*와 *text*를 사용하여 해당 `id`를 가진 DOM 요소의 텍스트 콘텐츠를 업데이트합니다. 이 메서드를 `login` 함수의 이전 오류 메시지 대신 사용해 보겠습니다: ```js if (data.error) { return updateElement('loginError', data.error); } ``` 이제 유효하지 않은 계정으로 로그인하려고 하면 다음과 같은 메시지가 표시됩니다:  이제 시각적으로 오류 텍스트가 표시되지만, 화면 판독기를 사용해 보면 아무것도 발표되지 않는다는 것을 알 수 있습니다. 페이지에 동적으로 추가된 텍스트가 화면 판독기에 발표되도록 하려면 [라이브 영역](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)을 사용해야 합니다. 여기서는 경고라는 특정 유형의 라이브 영역을 사용할 것입니다: ```html ``` `register` 함수 오류에도 동일한 동작을 구현하세요(HTML 업데이트를 잊지 마세요). ## 대시보드에 정보 표시 방금 본 기술을 사용하여 대시보드 페이지에서 계정 정보를 표시하는 작업도 처리하겠습니다. 서버에서 받은 계정 객체는 다음과 같습니다: ```json { "user": "test", "currency": "$", "description": "Test account", "balance": 75, "transactions": [ { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 }, { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 }, { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 } ], } ``` > 참고: 이미 데이터가 채워진 `test` 계정을 사용하면 작업이 더 쉬워집니다. ### 작업 HTML에서 "Balance" 섹션을 플레이스홀더 요소로 교체하는 작업부터 시작하겠습니다: ```html

Balance:

``` 또한 계정 설명을 표시하기 위해 바로 아래에 새로운 섹션을 추가하겠습니다: ```html

``` ✅ 계정 설명은 아래 콘텐츠의 제목 역할을 하므로 의미론적으로 제목으로 표시됩니다. [제목 구조](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility)가 접근성에 얼마나 중요한지 알아보고 페이지를 비판적으로 검토하여 다른 제목이 될 수 있는 부분을 확인하세요. 다음으로, `app.js`에 새로운 함수를 생성하여 플레이스홀더를 채우겠습니다: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` 먼저, 필요한 계정 데이터가 있는지 확인한 후 진행합니다. 그런 다음 이전에 생성한 `updateElement()` 함수를 사용하여 HTML을 업데이트합니다. > 잔액 표시를 더 보기 좋게 만들기 위해 [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) 메서드를 사용하여 소수점 아래 2자리까지 값을 강제로 표시합니다. 이제 대시보드가 로드될 때마다 `updateDashboard()` 함수를 호출해야 합니다. [강의 1 과제](../1-template-route/assignment.md)를 이미 완료했다면 간단할 것이며, 그렇지 않다면 다음 구현을 사용할 수 있습니다. `updateRoute()` 함수 끝에 다음 코드를 추가하세요: ```js if (typeof route.init === 'function') { route.init(); } ``` 그리고 라우트 정의를 다음과 같이 업데이트하세요: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` 이 변경으로 인해 대시보드 페이지가 표시될 때마다 `updateDashboard()` 함수가 호출됩니다. 로그인 후 계정 잔액, 통화 및 설명을 확인할 수 있어야 합니다. ## HTML 템플릿으로 테이블 행 동적으로 생성 [첫 번째 강의](../1-template-route/README.md)에서 HTML 템플릿과 [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) 메서드를 사용하여 앱의 탐색을 구현했습니다. 템플릿은 더 작게 만들어 페이지의 반복적인 부분을 동적으로 채우는 데도 사용할 수 있습니다. 비슷한 접근 방식을 사용하여 HTML 테이블에서 거래 목록을 표시하겠습니다. ### 작업 HTML ``에 새로운 템플릿을 추가하세요: ```html ``` 이 템플릿은 단일 테이블 행을 나타내며, 우리가 채우고자 하는 3개의 열인 *날짜*, *객체*, *금액*을 포함합니다. 그런 다음, JavaScript로 쉽게 찾을 수 있도록 대시보드 템플릿 내 테이블의 `` 요소에 이 `id` 속성을 추가하세요: ```html ``` HTML이 준비되었으니 JavaScript 코드로 전환하여 새로운 함수 `createTransactionRow`를 생성하겠습니다: ```js function createTransactionRow(transaction) { const template = document.getElementById('transaction'); const transactionRow = template.content.cloneNode(true); const tr = transactionRow.querySelector('tr'); tr.children[0].textContent = transaction.date; tr.children[1].textContent = transaction.object; tr.children[2].textContent = transaction.amount.toFixed(2); return transactionRow; } ``` 이 함수는 이름 그대로의 역할을 합니다. 우리가 이전에 생성한 템플릿을 사용하여 새로운 테이블 행을 생성하고 거래 데이터를 사용하여 내용을 채웁니다. 이를 `updateDashboard()` 함수에서 테이블을 채우는 데 사용할 것입니다: ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` 여기서는 [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) 메서드를 사용하여 작업할 새로운 DOM 프래그먼트를 생성한 후 최종적으로 HTML 테이블에 첨부합니다. 이 코드가 작동하려면 아직 해야 할 일이 하나 더 있습니다. 현재 `updateElement()` 함수는 텍스트 콘텐츠만 지원합니다. 코드를 약간 변경해 보겠습니다: ```js function updateElement(id, textOrNode) { const element = document.getElementById(id); element.textContent = ''; // Removes all children element.append(textOrNode); } ``` [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) 메서드를 사용하면 텍스트 또는 [DOM 노드](https://developer.mozilla.org/docs/Web/API/Node)를 부모 요소에 첨부할 수 있어 모든 사용 사례에 적합합니다. `test` 계정을 사용해 로그인하면 이제 대시보드에서 거래 목록을 볼 수 있을 거예요 🎉. --- ## 🚀 도전 과제 함께 협력하여 대시보드 페이지를 실제 은행 앱처럼 보이도록 만들어 보세요. 이미 앱을 스타일링했다면, [미디어 쿼리](https://developer.mozilla.org/docs/Web/CSS/Media_Queries)를 사용해 [반응형 디자인](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks)을 구현해 보세요. 데스크톱과 모바일 기기 모두에서 잘 작동하도록 만들어 보세요. 다음은 스타일링된 대시보드 페이지의 예시입니다:  ## 강의 후 퀴즈 [강의 후 퀴즈](https://ff-quizzes.netlify.app/web/quiz/46) ## 과제 [코드 리팩터링 및 주석 작성](assignment.md) **면책 조항**: 이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있지만, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서를 해당 언어로 작성된 상태에서 권위 있는 자료로 간주해야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.