하루 하루

일반적으로, 웹 파트를 구축 할 때는 웹 파트 속성이 SharePoint와 분리되어 최종 사용자가 그 값을 관리했습니다. SharePoint Framework는 웹 파트 속성 값 관리를 단순화하고 이를 SharePoint 검색과 통합 할 수있는 새로운 기능을 제공합니다. 이 문서에서는 SharePoint Framework 클라이언트 쪽 웹 파트를 작성할 때 이러한 기능을 사용하는 방법에 대해 설명합니다. Client-side web part properties SharePoint Framework 클라이언트 측 웹 파트를 작성할 때 사용자가 구성 할 수있는 속성을 정의 할 수 있습니다. 고정 된 값 대신 속성을 사용하면 웹 파트가 더 유연하고 다양한 시나리오에 적합합니다. 기존 웹 파트와 비교하여 Sha..

CDN (Office 365 Content Delivery Network)은 간편하게 자신의 Office 365 테넌트에서직접 호스팅 할 수있는 솔루션을 제공합니다. SharePoint Online에서 사용되는 static assets을 호스팅하는 데 사용할 수 있습니다. Enable CDN in your Office 365 tenant 1. 관리자 역할로 PowerShell을 실행하고 다음 PowerShell cmdlet을 실행하여 PowerShell 갤러리에서 최신 버전의 cmdlet을 다운로드하여 최신 버전의 SharePoint Online 관리 셸이 있는지 확인합니다. 2. powershell에서 Get-Host 를 누르면 프레임 워크의 버전 및 정보를 알 수 있습니다. 3. 해당 명령으로 모듈을..

Package the HelloWorld web part 1. 콘솔 창에서 첫 번째 SharePoint 클라이언트 측 웹 파트 작성에서 작성된 웹 파트 프로젝트 디렉토리로 이동합니다. cd helloworld-webpart 2. 혹시 gulp serve 가 실행되고 있다면 중지합니다. ( ctrl + c ) 워크 벤치와 달리 최신 SharePoint 서버 쪽 페이지에서 클라이언트 쪽 웹 파트를 사용하려면 웹 파트를 SharePoint에 배포하고 등록해야합니다. 먼저 웹 파트를 패키지해야합니다. config 폴더에서 패키지 메타 데이터를 정의하는 package-solution.json를 확인할 수 있습니다. { "$schema": "https://developer.microsoft.com/json-sche..

Define list model SharePoint 목록 데이터 작업을 시작하려면 목록 모델이 필요하고, 목록을 검색하려면 두 가지 모델이 필요합니다. Visual Studio Code를 열고서 src \ webparts \ helloWorld \ HelloWorldWebPart.ts로 이동합니다. HelloWorldWebPart 클래스 interface바로 위에 다음 모델을 정의합니다. ISPList 인터페이스는 SharePoint 목록 정보를 보유하고 있습니다. export interface ISPLists { value: ISPList[]; } export interface ISPList { Title: string; Id: string; Retrieve lists from mock store 로컬..

웹 파트를 SharePoint에 연결하여 SharePoint의 기능 및 데이터에 액세스하고 최종 사용자에게보다 통합 된 환경을 제공합니다. 우선 helloworld-webpart 프로젝트 디렉토리로 이동해 gulp serve명령을 실행해야 합니다. cd helloworld-webpart gulp serve Get access to page context 워크 벤치가 로컬로 호스팅되면 SharePoint 페이지 컨텍스트가 없습니다. 다양한 방법으로 웹 파트를 계속 테스트 할 수 있습니다. 예를 들어, 웹 파트의 UX 작성에 집중하고 SharePoint 컨텍스트가 없을 때 모의 데이터를 사용하여 SharePoint 상호 작용을 시뮬레이션 할 수 있습니다. 그러나 Workbench가 SharePoint에서 호..

[ Web part project structure ] Visual Studio Code를 사용하여 웹 파트 프로젝트 구조를 탐색하려면 콘솔에서 Ctrl + C를 선택하여 처리를 중단하고 다음 명령을 입력하여 Visual Studio Code에서 웹 파트 프로젝트를 열거 나 즐겨 사용하는 편집기를 사용합니다 code . 비주얼 스튜디오 코드가 설치되어 있으면 해당 디렉토리의 위치가 비쥬얼스튜디오 코드에서 열리게 됩니다. TypeScript는 SharePoint 클라이언트 측 웹 파트를 작성하기위한 기본 언어입니다. TypeScript는 일반 JavaScript로 컴파일되는 JavaScript의 형식화 된 슈퍼 세트입니다. SharePoint 클라이언트 쪽 개발 도구는 TypeScript 클래스, 모듈 및..

[ Preview the web part ] 웹 파트를 미리 보려면 로컬 웹 서버에서 웹 파트를 빌드하고 실행하십시오. 클라이언트 측 툴체인은 기본적으로 HTTPS 엔드 포인트를 사용합니다. 이 설정은 config 폴더에있는 serve.json 파일에서 구성 할 수 있지만 기본값을 사용하는 것이 좋습니다. 콘솔로 전환하여 여전히 helloworld-webpart 디렉토리에 있는지 확인한 후 다음 명령을 입력하십시오. gulp trust-dev-cert 위의 명령어를 치면 밑의 창이 뜨게 되고, 여기서 예를 누르면 인증서가 설치됩니다, 콘솔에 다음 명령을 입력하여 웹 파트를 빌드하고 미리보십시오. gulp serve 해당 명령은 gulp 작업을 실행해 localhost : 4321 및 localhost :..

클라이언트 쪽 웹 파트는 SharePoint 페이지 컨텍스트 내에서 실행되는 클라이언트 쪽 구성 요소입니다. 클라이언트 쪽 웹 파트는 SharePoint Online에 배포 할 수 있으며 최신 JavaScript 도구 및 라이브러리를 사용하여 이를 구축 할 수도 있습니다. [ Create a new web part project ] 1. 원하느 위채ㅣ에 새로운 프로젝트 디렉토리를 만듭니다. md helloworld-webpart 2. 만든 프로젝트 디렉토리로 이동합니다. cd helloworld-webpart 3. Yeoman SharePoint Generator를 실행하여 새로운 HelloWorld 웹 파트를 작성합니다. yo @microsoft/sharepoint 해당 명령어를 shell에 입력하면 ..

Install NodeJS Install NodeJS LTS version 10. Windows를 사용하는 경우는 링크의 msi installers를 사용해서 쉽게 node.js를 사용할 수 있습니다. 이미 node.js가 설치되어 있다면 -v로 버전이 맞는지 확인하세요. ( version 10.20.1. ) Install a code editor 클라이언트 측 개발을 지원하는 코드 편집기 또는 IDE를 사용하여 웹 파트를 빌드 할 수 있습니다. Visual Studio Code Atom Webstorm Install Yeoman and gulp Yeoman은 웹 애플리케이션을위한 오픈 소스 클라이언트 측 스캐 폴딩 툴입니다. Yeoman은 Node.js 용으로 작성된 명령 행 인터페이스로 실행되며 시작..

SharePoint Framework를 사용하여 클라이언트 쪽 웹 파트를 작성 및 배포하려면 Office 365 테넌트가 필요합니다. https://developer.microsoft.com/en-us/microsoft-365/dev-program Developer Program - Microsoft 365 Your session has expired. Please sign-in again to continue. Unfortunately any unsaved changes will be lost. developer.microsoft.com 우선 위 사이트에 가입해서 테넌트를 생성합니다. [ Create app catalog site ] 1. 브라우저에 다음 URL을 입력하여 SharePoint 관리 센터..

SPFx (SharePoint Framework)는 클라이언트 측 SharePoint 개발, SharePoint 데이터와의 쉬운 통합 및 오픈 소스 툴링을 완벽하게 지원하는 페이지 및 웹 파트 모델입니다. SharePoint 프레임 워크를 통해서 원하는 개발환경에서 최신 웹 기술 및 도구를 사용해 생산적인 경험을 만들고 반응형 (responsive) 모바일에 적합한 app을 빠르게 만들 수 있습니다 SharePoint Framework는 SharePoint Online 및 on-premises (SharePoint 2016 기능 팩 2 및 SharePoint 2019)에서도 작동합니다. [ 주요 기능 ] 1. 현재 사용자의 컨텍스트에서 실행되고 브라우저에서 연결됩니다. 사용자화(customization)..

개념 [ 미디어쿼리 ] 사용자가 어떤 미디어를 사용하는 가에 따라 사이트의 형태가 바뀌도록 css를 작성하는 방법 [ 플렉서블 박스 레이아웃 ] 플렉서블 박스 레이아웃은 그리드 레이아웃으로 기본으로 해서 플렉스 박스를 원하는 위치에 배치는 하는 것입니다. 플렉스 박스를 이용하게 되면 여유 공간에 따라 나타나는 높이, 위치를 자유롭게 변형할 수 있습니다. [ 미디어 쿼리 + 플렉서블 박스 레이아웃 코드 보기 ] 1 2 3 4 5 /* 가로 320px 이하 */ .c1, .c2, .c3, .c4,.c5{ width:100%; } @media (min-width:320px){ .c1, { width:100%; } .c2, .c3, .c4,.c5 {width:50%;} } @media (min-width:480..

https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video?hl=ko 이미지 및 동영상의 지연 로딩 | Web Fundamentals | Google Developers 사이트에 수많은 이미지와 동영상이 있지만 이를 줄이고 싶지 않다면, 지연 로딩이 초기 페이지 로드 시간을 향상하고 페이지당 페이로드를 낮추는 데 가장 적합한 기술일 수 있습니다. developers.google.com Lazy Loading은 간단히 페이지 로드 시간에 중요하지 않은 리소스의 로딩을 늦추는 기술이라고 할 수 있습니다. 지연 로딩은 사용자에게 보여지지않는 이미지나 동영상을 로딩하면서 낭비되는 데이터, 처리 시..

https://www.youtube.com/watch?v=V08wXKHF_Xw 1. 기본 버튼 만들기 Open Modal cursor 속성을 이용하면 해당 태그 위에 위치하는 마우스 커서의 모양을 바꿀 수 있다. Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize Text Wait Help 2. 기본 modal 창 생성 Open Modal I'm a modal ❌ box-shadow : 수평 방향의 그림자 오프셋 길이 수직 그림자 오프셋 길이 그림자의 흐림 반경(blur radius) 그림자의 색상 (color) 3. modal_overlay 뒷 배경 css..

모듈은 어떠한 기능을 수행하는 코드를 묶은 것입니다. 모듈은 독립적인 구조를 가지고 있어, 추가 및 삭제가 가능합니다. [ 모듈 장점 ] 모듈이 JS 에 주는 장점에는 1. 깔끔한 전역 범위, 2. 코드를 파일로 패키징하기, 3. 재사용 이 있습니다. 1. 깔끔한 전역범위 프로젝트가 일정 규모이상 커지게 되면, 이미 정의되어 있는 속성을 재정의하는 위험이 존재하게 됩니다. // 개발자 1의 코드 - a.js var num = 1; // 개발자 2의 코드 - b.js var num = 2; 이와 같이 '개발자2' 가 변수 값을 재정의하게 되면 '개발자1'의 코드는 제대로 동작하지 않게 되고 오류가 발생하게 됩니다. 모듈은 독립적으로 변수를 사용하면서 재정의를 방지합니다. 2. 코드를 파일로 패키징하기 애플..

[ Types of Execution Context ] excution context는 자바스크립트 코드가 평가되고 실행되는 환경입니다. 즉, 자바스크립트 코드는 excution context 내에서 실행됩니다. Global Execution Context default 실행 컨텍스트로 함수 안에 없는 코드의 경우 해당 excution context에서 실행됩니다. 여기서는 두 가지의 작업이 실행되는데, 첫번째는 전역 개체( window object )를 만들고, 이 값을 전역 개체와 동일하게 설정합니다. 프로그램에는 하나의 전역 실행 컨텍스트만 존재합니다. Functional Execution Context 함수가 호출될 때마다, 해당 함수에 대한 새로운 excution context이 만들어집니다. ..

3-7 Making a To Do List part Three const toDoForm = document.querySelector(".js-toDoForm"), toDoInput = toDoForm.querySelector("input"), toDoList = document.querySelector(".js-toDoList"); const TODOS_LS='toDos'; let toDos =[]; function deleteToDo(event){ const btn = event.target ; const li = btn.parentNode; toDoList.removeChild(li); const cleanToDos = toDos.filter(function(todo){ return todo.id ..

3-6 Making a To Do List part Two www.youtu.be/JEbOaI_0phc const toDoForm = document.querySelector(".js-toDoForm"), toDoInput = toDoForm.querySelector("input"), toDoList = document.querySelector(".js-toDoList"); const TODOS_LS='toDos'; const toDos =[]; function saveToDos(){ localStorage.setItem(TODOS_LS,JSON.stringify(toDos)); } function paintToDo(text){ const li = document.createElement("li"); c..

3-5 Making a To Do List part One www.youtu.be/YD1yDErhMa4 const toDoForm = document.querySelector(".js-toDoForm"), toDoInput = toDoForm.querySelector("input"), toDoList = document.querySelector(".js-toDoList"); const TODOS_LS='toDos'; function paintToDo(text){ console.log(text); const li = document.createElement("li"); /*delete 버튼 생성 */ const delBtn = document.createElement("button"); delBtn.inn..

본 내용은 https://programmers.co.kr/learn/courses/10 강의의 내용들을 한 번에 볼 수 있도록 한 것으로 자세한 내용은 본 강의를 참고하시길 바랍니다. Part5. Extra 1. script 위치에 따른 실행 • 브라우저는 HTML 문서를 읽으면서 script tag를 실행함 - HTML 문서 Element 파싱 보다 스크립트가 먼저 실행되면 접근되지 않음 - 페이지의 상단의 script 에서 이후 파싱될 Element에 접근하고 싶다면 onload 등의 eventhandler로 실행되도록 해야 함 • async, defer 속성을 이용하면 스크립트의 실행과 문서의 로딩을 동시에 진행할 수 있음(비 동기적) 2. Chrome 디버거 활용 [ 프로그램 오류의 종류 ] - ..

본 내용은 https://programmers.co.kr/learn/courses/10 강의의 내용들을 한 번에 볼 수 있도록 한 것으로 자세한 내용은 본 강의를 참고하시길 바랍니다. Part4. Networking 1. AJAX - Request 보내기 [ AJAX : Asynchronous Javascript and XML ] -> 더 나은 사요영험 브라우저에서 페이지를 이동하지 않고 자바스크립트를 통해 HTTP Request를 보내고 받아 JS에서 처리할 수 있음 1. var req = new XMLHttpRequest(); - AJAX를 위한 객체 생성 : HTTP 요청을 만들 수 있는 새로운 객체를 생성하는 명령 2. req.open("GET", "./data.txt"); - 요청의 방식과 UR..

본 내용은 https://programmers.co.kr/learn/courses/10 강의의 내용들을 한 번에 볼 수 있도록 한 것으로 자세한 내용은 본 강의를 참고하시길 바랍니다. Part3. Event + JS 1. Callback function 조건을 등록해 두고 그 조건을 만족한 경우, 나중에 호출되는 함수 [ 시간을 기반으로 콜백함수를 호출하는 명령 ] • setTimeout( function, time ) : time 시간이 지난 경우 function 함수를 콜백하는 함수 ( 1/1000초 단위 / timerId를 반환 ) • clearTimeout( timerId ) : timerId를 인자로 받아 function호출을 취소 ( 이미 호출시 해당 x ) • setInterval( func..

본 내용은 https://programmers.co.kr/learn/courses/10 강의의 내용들을 한 번에 볼 수 있도록 한 것으로 자세한 내용은 본 강의를 참고하시길 바랍니다. Part2. DOM + JS 1. DOM 소개 및 탐색 [ DOM, Document Object Model ] • 컴퓨터가 문서를 잘 처리할 수 있도록 문서의 구조를 약속한 것 ( Tree 형태 ) • document object - javascript에서 document로 접근 가능 - children에는 문서의 최상위 엘리먼트인 html이 존재 [ Element API ] • 자식, 부모 엘리먼트에 접근하는 방법 - .children : 해당 object의 자식 노드에 대한 배열 - .parentNode : 부모 노드 ..

3-1 Making a JS Clock part One www.youtu.be/f0nBj0YMBUI const clockContainer = document.querySelector(".js-clock"), clockTitle = clockContainer.querySelector("h1"); function getTime(){ const date = new Date(); const minutes = date.getMinutes(); const hours = date.getHours(); clockTitle.innerText = `${hours}:${minutes}`; } function init(){ getTime(); } init(); 3-2 Making a JS Clock part Two www.y..

2-2 JS DOM Functions www.youtu.be/VBmQUMUGznU Document 관련한 추가 정보 사이트 http://tcpschool.com/javascript/js_dom_document 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com 2-3 Modifying the DOM with JS www.youtu.be/JscDdICRvgo

2-1 너의 첫번째 함수! (Your first JS Function) www.youtu.be/Q0S6l_gkpeU 2.1.1 More Function Fun www.youtu.be/mLTUtMARkqc function sayHello (name, age ){ console.log(` Hello ${name} you are ${age} years old`); } sayHello("Nicolas", 14 ) const calculator = { plus: function( a,b){ return a+b; } } const plus = calculator.plus(5,5); console.log(plus); // 5

1-8 Data Types on JS 1-9 Organizing Data with Arrays const dayOfWeek = ["M","T","W","T","F","S","S",45,true]; 1-10 Organizing Data with Objects const nicoInfo = { name:"Nico", age : 33, gender:"Male", favMovie = ["Intern","Oldboy"], favFood = [ { name : "Kimchi", fatty : false; }, { name : "Cheese burger", fatty : true; } ] }; console.log( nicoInfo.gender );

1-6 Your first JS Variable(변수!) 1-7 let, const, var const a = 221; let b = a -5 ; var c = 3; c = 5; b = 5 ; a = 4 ; // error 발생

1-5 Hello World with Javascript 1-5-1 What are we learning

1-4 VanillaJS