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

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

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


Javascript/[기초] Javascript30

Jquery ajax file progress(Jquery ajax 파일 프로그래스) $.ajax(아작스)는 Jquery(제이쿼리)를 활용하여 비동기 방식으로 파일을 전송하는 방법을 의미 합니다. ajax는 XMLHttpRequest(줄여서 XHR)를 사용하여 서버와의 통신을 주고 받습니다. 기존에 XMLHttpRequest를 활용하려면 문법적으로 길고 어려워 좀 더 쉽게 사용할 수 있게 해준 것이 바로 ajax라고 합니다. ajax에 파일이 전송되는 현황을 보려면 ajax속성에 존재하는 xhr이라는 값을 할당하여 주면 됩니다. 전송하는 데이터는 FormData 객체를 사용하여 직관적이고 쉽게 할 수 있습니다. const param = new FormData() param.append('일반데이터1', '값1') param.append('일반데이터2', '값2') param.append(.. 2021. 5. 27.
Javascript에서의 RxJs를 활용한 행위 공유 앵귤러나 리엑트는 컴포넌트 개념을 통하여 이벤트를 자식노드에 전달 하는데.. 자식노드의 갯수가 많아지면 이를 매번 전달하기 힘들기 때문에 특정 객체에 구독 가능한 형태로 묶어두고 사용 합니다. 앵귤러의 rxjs, 리엑트의 모빅스나 레덕스가 그러한 기능을 구현하는 데 사용 되어집니다. 일반 Javascript에서도 이를 구현하는 것은 어렵지가 않습니다. 공통으로 구독행위를 해야되는 기능을 만들고, 이를 서로 바라보게 하면 되는 것 입니다. 서로 공통으로 무언가 사용하려면 역시나 클래스를 통한 상속이 쉽고 간단 합니다. 먼저 아래처럼 공통으로 사용할 클래스를 만들어 줍니다. CommonSubject로 이름을 지어 주었습니다. import { BehaviorSubject } from 'rxjs'; //공통 관.. 2021. 4. 9.
Javascript 페이징, 페이지 알고리즘(자바스크립트 paging) 간단하게 적어보는 페이징과 관련된 내용 입니다. * Javascript로 작성하여 보았습니다. 페이지 알고리즘은 데이터를 보여줄 때 편리하게 자주 사용되는 기능 입니다. 우리가 실제로 만나는 데이터는 소수의 10건, 100건 이내의 데이터 일 수 있습니다. 그러나 실제로는 수만 건 이상의 데이터가 될 수도 있습니다. 만약 100억건의 데이터가 존재한다고 가정하여 봅니다. 100건의 데이터를 가져와서 웹 브라우저에 띄우게 된 다면 얼마나 걸릴까요? 100억건의 데이터가 1개당 10글자로 되어 있다고 가정하여 보면 1,000억개의 텍스트를 화면에 표시해야 되는데.. 과연 해당 데이터가 화면에 나올수나 있을까요? 이처럼 페이징(page, paging)이라는 기술은 이러한 문제를 해결하기 위해 나왔습니다. 한정.. 2021. 3. 30.
ES7, ES8 기능 정리(ECMAScript 7, ECMAScript 8) * ES7 기능 1. 거듭 제곱을 쉽게 할 수 있습니다. var i = 2 i **= 3 // 8이 출력됩니다. 2. 포함여부를 판별하는 includes 입니다. //3이 있는지 찾습니다. [1, 2, 3, 4, 5].includes(3) //true //1이 첫번째에 있는지 찾습니다. [1, 2, 3, 4, 5].includes(1, 0) //true * ES8 기능 1. 문자 앞뒤 간격을 조절할 수 있습니다. //앞으로 10칸 console.log("hello".padStart(10)) // " hello" //뒤로 10칸 console.log("hello".padEnd(10)) // "hello " 2. key와 value로 되어있는 객체(json형식)에 대해서 손쉬운 반복문이 가능 합니다. let.. 2021. 2. 4.
ES6 기능 정리(ECMAScript 6) ECMA라는 것은 표준화된 JavaScript를 만들기 위해 만들어진 사양을 의미 합니다. 그에 따른 버전인 ES6 버전에 대해서 간단하게 내용을 요약하여 보았습니다. 1. 변수 선언 방법의 변화(let, const) - let 은 블록 범위이며 값이 지정되어도 값을 바꿀 수 있습니다. - const도 블록 범위로 사용 되지만 값은 바꿀 수 없는 상수 입니다. var a = 1 if(1 == 1){ var a = 234 //함수 내부에 선언되지 않았으므로 글로별 변수와 대체 console.log(a) //234 } console.log(a) //234 ////////////////////////////////////////////////// let b = 1 if(1 == 1){ let b = 234 /.. 2021. 1. 9.
자바스크립트 new 연산자 (Javascript new operator) 자바스크립트(Javascript)를 활용하여 작업을 하다보면 만날 수 있는 기호가 있습니다. 바로 new 라는 기호입니다! new라는 기호는 자바스크립트의 고유의 예약어이며 고유의 연산자(operator) 입니다. 아래는 자바스크립트의 new라는 연산자(operator)에 대한 정의 입니다. 연산자는 사용자 정의 객체 타입 또는 내장 객체 타입의 인스턴스를 생성한다 new 라는 의미는 영역(block)을 지정하여 함수 내부의 정의된 내용을 실행하여 주는 의미라 볼 수 있습니다. 역시 말이 어려우니 코드를 보는게 낫겠습니다. function structure(first, last) { this.first = first; this.last = last; this.printer = function () { r.. 2020. 12. 17.

티스토리툴바