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

웹 파트를 SharePoint에 연결하여 SharePoint의 기능 및 데이터에 액세스하고 최종 사용자에게보다 통합 된 환경을 제공합니다.

 

우선  helloworld-webpart 프로젝트 디렉토리로 이동해 gulp serve명령을 실행해야 합니다.

cd helloworld-webpart
gulp serve

Get access to page context

워크 벤치가 로컬로 호스팅되면 SharePoint 페이지 컨텍스트가 없습니다. 

다양한 방법으로 웹 파트를 계속 테스트 할 수 있습니다. 

예를 들어, 웹 파트의 UX 작성에 집중하고 SharePoint 컨텍스트가 없을 때

모의 데이터를 사용하여 SharePoint 상호 작용을 시뮬레이션 할 수 있습니다.

그러나 Workbench가 SharePoint에서 호스팅되면 다음과 같은 다양한 주요 속성을 제공하는 페이지 컨텍스트에 액세스 할 수 있습니다.

 

• 웹 타이틀
• 웹 절대 URL
• 웹 서버 기준 URL
• 사용자 로그인 이름

To get access to the page context

웹 파트의 컨텍스트 정보에 액세스하려면 코드에서 다음 객체를 사용합니다.

this.context.pageContext

1. Visual Studio 코드 (또는 선호하는 IDE)로 전환하고 src \ webparts \ helloWorld \ HelloWorldWebPart.ts를 엽니 다 .

 

2. render 메소드 안에서 innerHTML 코드 블록을 다음 코드로 바꿉니다 .

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>
  </div>`;

3. ${ }HTML 블록에  this.context.pageContext.web.title 를 담아서 p 태그 안에 넣습니다.

이 웹 파트는 로컬 환경에서로드되므로 제목은 Local Workbench 입니다.'

 

4. 파일을 저장하고,  gulp serve 를 다시 실행합니다.

 

5. 브라우저에서 https://localhost:4321/temp/workbench.html 로 이동합니다.

6. SharePoint에서 호스팅되는 SharePoint Workbench로 이동합니다.  

   URL : https://your-sharepoint-site-url/_layouts/workbench.aspx입니다.

    이제 웹 파트에서 페이지 컨텍스트를 사용할 수있는 웹 파트에서 SharePoint 사이트 제목을 볼 수 있습니다.

https://docs.microsoft.com/ko-kr/sharepoint/dev/spfx/web-parts/get-started/connect-to-sharepoint