본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


Javascript74

Excel파일 웹에서 Table로 표현 xlsx파일을 읽어서 웹에서 표출하는 방법은 Sheetjs라는 라이브러리를 사용하면 편리하게 구현 가능 하다. 위 예제코드는 input type file에서의 예제코드이다. ajax로 바꾸는것도 어렵지는 않다. workbook에 메타데이터를 활용하면 여러 형태로 가공이 편리하다. 2019. 6. 18.
Rxjs기능 Create, from, fromEvent 직관적인 기능이다. 말 그대로 관측하는 대상을 만들어 준다. import { Observable } from 'rxjs'; const hello = Observable.create(function(observer) { observer.next('123'); observer.next('456'); observer.complete(); //행위 종료선언 }); const subscribe = hello.subscribe(val => console.log(val)); //123 456이 출력된다 complete를 통해서 구독을 멈추는 기능을 보았다. complete를 하지 않으면 구독행위는 중단되지 않는다. from은 ~부터의 의미로 데이터가 등록된 이후로의 행위를 정의한다. import { from } fr.. 2019. 5. 13.
RxJs 기본, Subject와 BehaviorSubject 그리고 Observable Rxjs는 데이터의 변화를 감시자를 만들어 바라보게 하다가 데이터가 변하는 순간 사용자가 입력 한 행동을 하도록 구성된, 소위 반응형 방식으로 구성되어 있다. 기본적인 관측은 Subject를 활용하여 간단하게 구현 할 수 있다. import { Subject } from 'rxjs'; const sub = new Subject(); sub.next(1); var a = sub.subscribe(console.log); //a 감시자, 지나간 1에 대해서는 행동을 하지 않음 sub.next(2); // a에서 2 출력 var b = sub.subscribe(console.log); //b 감시자, 지나간 2에 대해서는 행동하지 않음 sub.next(3); //a와 b에서 3출력 위 예제를 보면, Subje.. 2019. 5. 7.
Rxjs 반응형 프로그래밍 시작 - Typescript 개발환경 구축 반응형 프로그래밍이라는 말을 심심치 않게 찾아 볼 수 있다. 반응형 프로그래밍은 쉽게 말하면 한번 코딩을 해 놓으면 이후에 데이터가 변화하는 행동을 알아서 처리하는 것을 의미 한다. 예를들어, 게시판 같은 곳에서 하단의 페이징 버튼을 눌러 다음페이지로 이동하는 부분에서, 기존에 코딩방식은 데이터를 가져와서 기존 데이터를 삭제하고 다시 그려주는 역할을 사용자가 전부 다 코딩하였다면, 반응형 프로그래밍 기법을 활용하면 최초 1번만 사용자가 코딩을 해 주고 이후에 변동되는 데이터에 대해서는 알아서 처리를 해 준다. Rxjs는 Javascript로 이루어진 반응형 프로그래밍으로도 잘 알려진 오픈소스이다. Rxjava, RxPy, RxPhp등등..Reactivex 홈페이지로 이동하면 다른 언어로 만든 오픈소스 라.. 2019. 5. 7.
ES6 문법을 HTML에 활용해보기 export class userClass { constructor() { //생성자를 통해 내부 변수를 만들 수 있다. } accessToServer(server_url, param) { return new Promise((resolve, reject) => { //Promise 객체를 통해 ajax 통신 후 이벤트를 받로독 한다. $.ajax({ url: server_url, //보낼주소 type: 'post', data: param, //보낼 데이터 success: function (result) { resolve(result); //성공시 행위 }, error: function (errors) { reject(errors); //실패시 행위 } }); }); } } 자바스크립트 버전이 ES6이 등장.. 2019. 4. 27.
Input type File 다중 파일 선택 & Ajax 전송 input type file 테그 속성중에 multiple이라는 속성이 있다. 해당 속성을 선택하면 파일이 여러개 선택 되는데, 해당 데이터가 배열로 리턴된다. 해당 내용을 한번에 던져도 상관없지만 만약 프로그래스를 구현하려면 각각 전송하는 것을 권장한다. function sendData(){ $.each(formArray, function (uniquId, DATA) { //앞서 유니크한 아이디로 프로그래스 아이디를 매칭하면 파일마다 각각 //전송상태 효과를 줄 수 있다. $.ajax({ url: '주소', xhr: function() { var myXhr = $.ajaxSettings.xhr(); //PROGRESS_KEY 값에 앞서 지정한 유니크한아이디를 넣어주자. myXhr.upload.PROGR.. 2019. 4. 27.