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

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

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


Javascript74

프론트 개발 환경의 중심 번들러(Javascript development environment bundler) 자바스크립트(Javascript)는 브라우저에서 동작하기 위한 방법을 위해 개발된 인터프리터 언어 입니다. 웹 개발자(web developer)에 의해서 js파일 또는 html파일에 각종 명령어로 해당 페이지에서 동작 할 행위를 기술하고, 사용자는 http 또는 https같은 프로토콜을 활용하여 브라우저에서 해당 파일들을 받아서 화면을 구성 합니다. ECMA5 버전, HTML4 까지만 하더라도 웹에서의 할 수 있는 기능은 제한적이였습니다. 그래서 플래쉬(Flash) 같은 다른 프로그램의 도움을 받아서 화면을 구성하고는 하였습니다. 시간이 흘러 ECMA6, HTML5이상의 버전이 나오면서 많은 기능이 브라우저에서 단독으로 동작 할 수 있게 되었습니다. 다양한 방법과 라이브러리 등이 등장 하였고 규모는 점점.. 2021. 6. 14.
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.
자바스크립트 텍스트 자동 완성 기능(Javascript auto text maker) 네이버, 구글에서 검색을 하기 위해서 텍스트를 입력하면 뭐 하지도 않았는데 자동으로 글씨가 완성되고는 합니다. 네이버에서 "유튜" 까지만 검색하면 아래사진처럼 문구가 바로바로 완성이 됩니다. 이러한 자동완성 기능은 일반적으로 사용자가 텍스트를 입력 할 때 마다 서버로 텍스트를 전송하여 가장 비슷하고, 많이 찾는 유형의 문자를 가져와서 채워주는 기능 입니다. 이러한 기능을 비슷하게 만들기 위해서는 텍스트를 입력받는 곳과 만들어주는 영역을 분리 해야 합니다. 위 기능을 구현하기 위해 먼저 개념을 정리하여 보았습니다. 1. 입력받는 영역에서 텍스트가 들어올 때 마다 정보를 전달 합니다. 2. 텍스트 선택 영역을 만듭니다. 3. 만약 같은 유형의 텍스트가 존재하면 선택하는 영역에 채워 줍니다. 기초 공사를 위해.. 2021. 2. 17.
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.

티스토리툴바