[ SharePoint Framework ] 8.Connect your client-side web part to SharePoint (Hello World part 2 -2

Define list model

 

SharePoint 목록 데이터 작업을 시작하려면 목록 모델이 필요하고, 목록을 검색하려면 두 가지 모델이 필요합니다.

1. Visual Studio Code를 열고서  src \ webparts \ helloWorld \ HelloWorldWebPart.ts로 이동합니다. 

2. HelloWorldWebPart 클래스 interface바로 위에 다음 모델을 정의합니다.

ISPList 인터페이스는 SharePoint 목록 정보를 보유하고 있습니다.

export interface ISPLists {
  value: ISPList[];
}

export interface ISPList {
  Title: string;
  Id: string;

Retrieve lists from mock store

로컬 워크 벤치에서 테스트하려면 모의 데이터를 리턴하는 mock store가 필요합니다.

   To create a mock store

1 .src \ webparts \ helloWorld 폴더 내에 MockHttpClient.ts 라는 새 파일을 작성하십시오 .

2. 다음 코드를 MockHttpClient.ts에 복사합니다

import { ISPList } from './HelloWorldWebPart';

export default class MockHttpClient  {

    private static _items: ISPList[] = [{ Title: 'Mock List', Id: '1' },
                                        { Title: 'Mock List 2', Id: '2' },
                                        { Title: 'Mock List 3', Id: '3' }];

    public static get(): Promise<ISPList[]> {
    return new Promise<ISPList[]>((resolve) => {
            resolve(MockHttpClient._items);
        });
    }
}

3. 파일을 저장하면 HelloWorldWebPart 클래스 에서 MockHttpClient 클래스를 사용할 수 있습니다 .

 

To import the MockHttpClient module

1. HelloWorldWebPart.ts 열어 바로 아래에 다음 코드를 복사하여 붙여 넣습니다

 import * as strings from 'HelloWorldWebPartStrings';.

2. HelloWorldWebPart 클래스 내에서 목록 검색을 보여주는 private method 를 추가합니다. 

private _getMockListData(): Promise<ISPLists> {
  return MockHttpClient.get()
    .then((data: ISPList[]) => {
      var listData: ISPLists = { value: data };
      return listData;
    }) as Promise<ISPLists>;
}

나름의 해석 

-> private인 _getMockListData() 함수는 Promise<ISPLists> { ~ }의 내용을 실행한다.

Promise<ISPLists> { ~ } 는 return 타입이 <ISPLists> 로,

MockHttpClient에서 get( ) 을 통해서 data를 받아올 때 return 한다. 

return 시 MockHttpClient에서 get( ) 을 통해 받아온 data의 타입은 ISPList [ ] 인데  

이것의 value 값을 listData의 값으로 넘겨주고, 해당 값을 반환한다. 

 

 

Retrieve lists from SharePoint site

다음으로 현재 사이트에서 목록을 검색해야합니다. 

SharePoint REST API를 사용하여에있는 사이트에서 목록을 검색합니다.  https://yourtenantprefix.sharepoint.com/_api/web/lists.

SharePoint Framework에는 SharePoint 에 대해 REST API 요청을 실행하기 위한 도우미 클래스 spHttpClient 가 포함되어 있습니다. 기본 헤더를 추가하고, 쓰기에 필요한 다이제스트를 관리하며, 서비스 성능을 모니터링하는 데 도움이되는 원격 분석을 수집합니다.

To use this helper class, import them from the @microsoft/sp-http module

1. HelloWorldWebPart.ts file 의 상단으로 가서,

 import MockHttpClient from './MockHttpClient';:

코드 밑에서 하단의 코드를 붙여 넣습니다.

import {
  SPHttpClient,
  SPHttpClientResponse
} from '@microsoft/sp-http';

2. HelloWorldWebPart 클래스 내에서 SharePoint에서 목록을 검색하려면 다음 메소드를 추가합니다.

private _getListData(): Promise<ISPLists> {
  return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists?$filter=Hidden eq false`, SPHttpClient.configurations.v1)
    .then((response: SPHttpClientResponse) => {
      return response.json();
    });
}

이 메소드는 spHttpClient 헬퍼 클래스를 사용하고 get 요청을 발행합니다. ISPLists 모델을 사용하고 필터를 적용하여 숨겨진 목록을 검색하지 않습니다.

 

* spHttpClient helper class -> ?? 

 

3. gulp serve로 오류가 있는 지 확인한다. 

 

 

Add new styles

SharePoint Framework는 Sass를 CSS 프리 프로세서로 사용하며, 특히 일반적인 CSS 구문을 완전히 준수하는 SCSS 구문을 사용합니다. Sass는 CSS 언어를 확장하고 변수, 중첩 규칙 및 인라인 가져 오기와 같은 기능을 사용하여 웹 파트에 효율적인 스타일 시트를 구성하고 작성할 수 있습니다. SharePoint Framework에는 Sass 파일을 일반 CSS 파일로 변환하고 개발 중에 사용할 형식화 된 버전을 제공하는 SCSS 컴파일러가 이미 제공됩니다.

 

To add new styles

1. 스타일을 정의하는 SCSS 파일인 HelloWorldWebPart.module.scss의 ' .helloWorld'에 기본적인 스타일이 정의되어 있습니다. 

2. .helloWorld 내부의 .button뒤에 다음 코드를 추가합니다.

.list {
  color: #333333;
  font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  box-sizing: border-box;
  margin: 10;
  padding: 10;
  line-height: 50px;
  list-style-type: none;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

.listItem {
  color: #333333;
  vertical-align: center;
  font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  box-shadow: none;
  *zoom: 1;
  padding: 9px 28px 3px;
  position: relative;
}

위 사진의 초록색 줄 부분에 윗 코드를 복사해서 붙여 넣으면 됩니다.

 

3. Gulp는 파일을 저장하자마자 콘솔에서 코드를 다시 작성합니다. HelloWorldWebPart.module.scss.ts 파일에서 해당 유형을 생성합니다. TypeScript로 컴파일 한 후 웹 파트 코드에서 이러한 스타일을 가져 와서 참조 할 수 있습니다. 

HelloWorldWebPart.ts의

import styles from './HelloWorldWebPart.module.scss';

를 통해서 위에서 작성한 스타일이 styles로 연결되게 되고, 

HelloWorldWebPart.ts의 하단의 <div> 태그 속 style 부분을 통해서 웹에 HelloWorldWebPart.module.scss 의 스타일이 적용된다. 

 

Render lists information

SharePoint Workbench는 로컬 환경과 SharePoint 사이트에서 웹 파트를 테스트 할 수 있는 기능을 제공하며, 

SharePoint Framework는 EnvironmentType 모듈을 사용하여 웹 파트가 실행중인 환경을 이해하도록 함으로써 해당 기능을 지원합니다.

 

To use the EnvironmentType module

1. @microsoft / sp-core-library 번들에서 Environment 및 EnvironmentType 모듈을 가져옵니다.  다음 코드를 HelloWorldWebPart.ts 의 상단의 import 섹션에 추가합니다.

import {
  Environment,
  EnvironmentType
} from '@microsoft/sp-core-library';

 

2.  HelloWorldWebPart class 내부에 하단의 코드를 붙여 넣습니다.

private _renderList(items: ISPList[]): void {
  let html: string = '';
  items.forEach((item: ISPList) => {
    html += `
  <ul class="${styles.list}">
    <li class="${styles.listItem}">
      <span class="ms-font-l">${item.Title}</span>
    </li>
  </ul>`;
  });

  const listContainer: Element = this.domElement.querySelector('#spListContainer');
  listContainer.innerHTML = html;
}

이 메소드는 styles 변수를 사용하여 이전에 추가 된 새로운 CSS 스타일 (styles.list) 을 참조하고,

REST API에서 수신 될 목록 정보를 렌더링하는 데 사용됩니다.

 

3. HelloWorldWebPart class 내부에 하단의 코드를 붙여 넣습니다.

 

private _renderListAsync(): void {
  // Local environment
  if (Environment.type === EnvironmentType.Local) {
    this._getMockListData().then((response) => {
      this._renderList(response.value);
    });
  }
  else if (Environment.type == EnvironmentType.SharePoint ||
            Environment.type == EnvironmentType.ClassicSharePoint) {
    this._getListData()
      .then((response) => {
        this._renderList(response.value);
      });
  }
}

_renderListAsync 메소드에서 EnvironmentType에 대해 알아야 할 사항 :

- Environment.type 속성은 로컬 또는 SharePoint 환경에 있는지 확인하는 데 도움이됩니다.

- 워크 벤치가 호스팅되는 위치에 따라 올바른 메소드가 호출됩니다.

 

Retrieve list data

 

1. render 메소드로 이동하여 메소드 내부의 코드를 다음 코드로 바꿉니다.

this.domElement.innerHTML = `
  <div class="${ styles.helloWorld }">
    <div class="${ styles.container }">
      <div class="${ styles.row }">
        <div class="${ styles.column }">
          <span class="${ styles.title }">Welcome to SharePoint!</span>
          <p class="${ styles.subTitle }">Customize SharePoint experiences using web parts.</p>
          <p class="${ styles.description }">${escape(this.properties.description)}</p>
          <p class="${ styles.description }">${escape(this.properties.test)}</p>
          <p class="${ styles.description }">Loading from ${escape(this.context.pageContext.web.title)}</p>
          <a href="https://aka.ms/spfx" class="${ styles.button }">
            <span class="${ styles.label }">Learn more</span>
          </a>
        </div>
      </div>
      <div id="spListContainer" />
    </div>
  </div>`;

this._renderListAsync();

 

2. gulp serve를 통해서 오류를 확입합니다.

3. 로컬 워크 벤치로 전환하고 HelloWorld 웹 파트를 추가하십시오. 모의 데이터가 반환 된 것을 볼 수 있습니다.

여기서 MockHttpClient.ts의 내용을 다음과 같이 바꾸게 되면 

밑의 그림처럼 타이틀이 바뀌는 것을 확인할 수 있습니다. 

 

5. SharePoint에서 호스팅되는 워크 벤치로 전환해서 페이지를 새로 고치고 HelloWorld 웹 파트를 추가하면 현재 사이트에서 반환 된 목록이 표시됩니다.