[ SharePoint Framework ] 5.Build your first SharePoint client-side web part (Hello World part 1) -2

[ Preview the web part ]

웹 파트를 미리 보려면 로컬 웹 서버에서 웹 파트를 빌드하고 실행하십시오. 클라이언트 측 툴체인은 기본적으로 HTTPS 엔드 포인트를 사용합니다. 이 설정은 config 폴더에있는 serve.json 파일에서 구성 할 수 있지만 기본값을 사용하는 것이 좋습니다. 콘솔로 전환하여 여전히 helloworld-webpart 디렉토리에 있는지 확인한 후 다음 명령을 입력하십시오. 

gulp trust-dev-cert

위의 명령어를 치면 밑의 창이 뜨게 되고, 여기서 예를 누르면 인증서가 설치됩니다,

 

 콘솔에 다음 명령을 입력하여 웹 파트를 빌드하고 미리보십시오.

gulp serve

해당 명령은 gulp 작업을 실행해 localhost : 4321 및 localhost : 5432에 로컬 노드 기반 HTTPS 서버를 만들고,

기본 브라우저에서 워크 벤치를 시작하여 로컬 개발 환경에서 웹 파트를 보여주는 역할을 합니다.

해당 명령어을 통해  이처럼 새로운 웹페이지가 생성됩니다.

SharePoint 클라이언트 쪽 개발 도구는 다음과 같은 빌드 프로세스 작업을 처리하기 위해 gulp를 작업 러너로 사용합니다.

- JavaScript 및 CSS 파일 번들 및 축소

- 각 빌드 전에 번들링 및 축소 작업을 호출하는 도구 실행

- SASS 파일을 CSS로 컴파일

- TypeScript 파일을 JavaScript로 컴파일

Visual Studio Code는  gulp 및 기타 작업 러너를 기본적으로 지원합니다. 웹 파트를 디버깅하고 미리 보려면 Windows의 경우 Ctrl + Shift + B 또는 Mac의 경우 Cmd + Shift + B를 누릅니다. 

SharePoint Workbench는 웹 파트를 SharePoint에 배포하지 않고 신속하게 미리보고 테스트 할 수있는 개발자 디자인 영역입니다. SharePoint Workbench에는 개발중인 웹 파트를 추가, 삭제 및 테스트 할 수있는 클라이언트 쪽 페이지와 클라이언트 쪽 캔버스가 포함되어 있습니다.

 

 

[ To use SharePoint Workbench to preview and test your web part ]

 

 

2. HelloWorld를 선택하여 웹 파트를 페이지에 추가합니다.

첫 번째 클라이언트 측 웹 파트를 클라이언트 측 페이지에 추가했습니다.

 

3. 웹 파트 속성 창을 보기 위해서 웹 파트의 가장 왼쪽에있는 연필 아이콘을 선택합니다. 

속성 창에서는 웹 파트를 사용자 지정하기위한 속성을 정의 할 수 있습니다.

 속성 창은 클라이언트 쪽에서 구동되며 SharePoint 전체에서 일관된 디자인을 제공합니다.

 

4. 설명 텍스트 상자의 텍스트를 클라이언트 측 웹 파트로 수정합니다. 

  입력이 변경되면 바로 변경 된 입력이 반영되어 바뀌는 것을 확인할 수 있습니다.

 

속성 창에서 사용할 수있는 새로운 기능 중 하나는 업데이트 동작을 구성하는 것입니다.

업데이트 동작은 Reactive 또는 Non- Reactive로 설정 될 수 있습니다.

기본적으로 업데이트 동작은 Reactive이며 속성을 편집 할 때 변경 사항을 볼 수 있습니다.

동작이 반응하면 변경 사항이 즉시 저장됩니다.