연습 - 사용자의 전자 메일 일괄 로드

5분

이 연습에서는 앱을 확장하여 사용자의 전자 메일을 10개 항목씩 일괄 처리로 로드할 수 있도록 합니다.

10개 항목씩 일괄 처리로 전자 메일 로드

먼저 getEmails() 함수를 업데이트하여 10개 항목씩 일괄 처리로 전자 메일을 로드합니다. 로드할 다음 전자 메일 집합이 정의된 경우 함수의 인수로 전달됩니다.

코드 편집기에서 graph.js 파일을 엽니다.
getEmails() 함수의 서명을 업데이트하여 단일 인수 nextLink을(를) 허용하도록 합니다.
```
async function getEmails(nextLink) {
  // ...
}
```

nextLink가 설정된 경우 함수는 이 인수를 SDK에 전달하여 데이터를 검색합니다. nextLink가 설정되지 않은 경우 함수는 초기 데이터 집합을 로드해야 합니다. return 문을 다음 if 문으로 바꿔 getEmails() 함수를 업데이트합니다.

if (nextLink) {
  return await graphClient
    .api(nextLink)
    .get();
}
else {
  return await graphClient
    .api('/me/messages')
    .select('subject,receivedDateTime')
    .orderby('receivedDateTime desc')
    .top(10)
    .get();
}

업데이트된 getEmails() 함수는 다음과 같습니다.

async function getEmails(nextLink) {
  ensureScope('mail.read');

  if (nextLink) {
    return await graphClient
      .api(nextLink)
      .get();
  }
  else {
    return await graphClient
      .api('/me/messages')
      .select('subject,receivedDateTime')
      .orderby('receivedDateTime desc')
      .top(10)
      .get();
  }
}

사용자가 더 많은 전자 메일을 로드하도록 템플릿 확장

더 많은 전자 메일을 로드하도록 getEmails() 함수를 확장했습니다. 다음 단계에서는 사용 가능한 경우 사용자가 더 많은 전자 메일을 로드할 수 있도록 하는 단추를 표시합니다.

코드 편집기에서 index.html 파일을 엽니다.
줄 <ul id="emails"></ul>을(를) 찾은 후 바로 다음 코드를 추가하여 사용자가 더 많은 전자 메일을 로드할 수 있는 단추를 추가합니다.
```
<div id="loadMoreContainer" style="display: none;">
  <button onclick="displayEmail();">Load more</button>
</div>
```

더 많은 전자 메일 로드

사용자가 더 많은 전자 메일을 로드할 수 있도록 앱을 업데이트한 후 마지막 단계에서는 더 많은 전자 메일 로드를 처리하는 기능을 추가합니다.

코드 편집기에서 ui.js 파일을 엽니다.
displayEmail() 함수 앞에 nextLink라는 새 변수를 정의하고 값은 할당하지 않습니다.
```
var nextLink;
```
displayEmail() 함수에서 호출을 업데이트하여 nextLink를 포함하는 getEmails() 함수를 가져옵니다.
```
var emails = await getEmails(nextLink);
```
다음으로, 데이터를 검색한 후 @odata.nextLink 속성의 값을 가져옵니다. 설정된 경우 사용자가 표시할 수 있는 데이터가 더 있음을 나타냅니다. displayEmail() 함수의 if 문 바로 뒤에 다음 코드를 추가합니다.
```
nextLink = emails['@odata.nextLink'];
```
displayEmail() 함수의 끝에서 검색된 전자 메일을 표시한 후 사용자가 검색된 전자 메일을 즉시 확인할 수 있도록 페이지 끝까지 스크롤합니다.
```
window.scrollTo({ top: emailsUl.scrollHeight, behavior: 'smooth' });
```
마지막으로 nextLink가 반환되었는지 확인하고, 반환된 경우 더 많은 전자 메일을 로드하는 단추를 표시합니다.

다음 코드를 displayEmail() 함수의 끝에 추가합니다.
```
if (nextLink) {
  document.getElementById('loadMoreContainer').style = 'display: block';
}
```

전체 displayEmail() 함수는 다음과 같이 표시됩니다.

var nextLink;
async function displayEmail() {
  var emails = await getEmails(nextLink);
  if (!emails || emails.value.length < 1) {
    return;
  }
  nextLink = emails['@odata.nextLink'];

  document.getElementById('displayEmail').style = 'display: none';

  var emailsUl = document.getElementById('emails');
  emails.value.forEach(email => {
    var emailLi = document.createElement('li');
    emailLi.innerText = `${email.subject} (${new Date(email.receivedDateTime).toLocaleString()})`;
    emailsUl.appendChild(emailLi);
  });
  window.scrollTo({ top: emailsUl.scrollHeight, behavior: 'smooth' });

  if (nextLink) {
    document.getElementById('loadMoreContainer').style = 'display: block';
  }
}

앱 실행

Microsoft Graph를 사용하여 10개 항목씩 일괄 처리로 사용자의 전자 메일을 표시하고 더 많은 전자 메일을 로드할 수 있도록 앱을 확장했습니다. 이제 로컬에서 앱을 실행해 보겠습니다.

터미널에서 다음 명령을 실행하여 웹앱을 미리 봅니다.
```
npm start
```
브라우저는 http://localhost:8080을 가리켜야 합니다.
Microsoft에 로그인 단추를 선택하여 Microsoft 365 계정으로 로그인합니다.
계정으로 로그인한 후 전자 메일 표시 단추를 선택합니다.
앱에 표시되는 사용자의 최근 10개 전자 메일 목록이 표시됩니다.
사서함에 10개가 넘는 전자 메일이 있는 경우 다음 10개 메시지를 로드할 수 있는 단추가 표시됩니다.
터미널 창에서 CTRL+C를 선택하여 Node.js 서버를 중지합니다.

연습 - 사용자의 전자 메일 일괄 로드

10개 항목씩 일괄 처리로 전자 메일 로드

사용자가 더 많은 전자 메일을 로드하도록 템플릿 확장

더 많은 전자 메일 로드

앱 실행

피드백