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

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

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


Javascript72

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.
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.
프론트와 백그라운드 개발 환경 분리, 파셀(Parcel) 파셀(Parcel)은 나온지 얼마되지 않는 젊은(?)축에 속하는 기술 입니다. 웹 어플리케이션 번들러라고 불리는 파셀의 정의는 아래와 같습니다. Parcel은 워커 프로세스를 이용하여 멀티코어 컴파일을 가능케 하고, 심지어 재시작 후라 해도 빠른 리빌드를 할 수 있도록 파일시스템 캐시를 갖고 있습니다. 말이 쉽지가 않는데, 요약을 하면 장황하게 쓰여진 자바스크립트(Javascript)와 각종 css, 기타 파일들을 한번에 압축 및 정리하여 배포 가능한 형태로 만들어주는 역할을 하는 번들러 입니다. - 번들러(bundler) : 지정한 단위로 파일들을 하나로 만들어 요청에 대한 응답으로 전달할 수 있는 환경을 만들어주는 역할 파셀(Parcel)을 통해 개발 영역을 분리함으로써 앵귤러(Angular) 또는 .. 2021. 1. 5.

티스토리툴바