Programming Language🟨 Javascript 검색 결과

해당 글 33건

ArrayBuffer, Typed Arrays, DataView : raw binary data를 핸들링해보자

typed array? es6에서 도입된 녀석이다. js의 배열은 raw binary data를 다루지 못했기 때문에 Typed Arrays(형식화 배열)가 도입되었다. 웹에서 영상, 음성, 파일과 같은 binary를 자주 다루게 되면서 여러 값을 담을 수 있고 크기가 가변적인 array보다 좀 더 효율적인 typed array가 필요해진 것이다. 뿐만 아니라 딥러닝에서의 이진 데이터 인코딩/디코딩, GPU 메모리로 데이터를 전달할 때도 typed array를 사용한다. 웹에서 ML하려면 typed array 합시다. 그리고 이름이 배열이고, length 속성을 통해서 byte를 얻을 수 있지만 유사 배열입니다. 따라서 Array.isArray()를 통해 체킹해보면 false를 반환하며 배열이 proto..
Programming Language/🟨 Javascript 3년 전

DOM 구조화 : Range, Parsing, AST 그리고 에디터

Typed에서 구현한 Selector와 Range를 활용한 하이라이트 기능에 대해 대외비임 ㅎ gatsby.js의 mdx의 사례 gatsby.js를 만지다보니 재미있는 점을 발견했다. mdx가 파싱되는 꼴을 보자. const saltyDuckEgg = 'chinese preserved food product' @mdx-js/react의 MDXProvider로 감싸고, prev 태그의 props를 출력하려고 보았을 때 아래와 같은 꼴을 하고 있다. props: { children: { props: { children: [ {props: children: ...}, {props: " saltyDuckEgg "}, {props: children: ...}, {props: " "}, ] } } } 최말단의 ch..
Programming Language/🟨 Javascript 3년 전

예시로 공부하는 javascript 정규식

솔직히 설명 백날 읽어봐야 절대 이해 안된다. 코드로 바로 직행을 추천. 프코캠에서 regex 알려주길래 밤에 커피 마시면서 함 돌려봤다. 설명도 안 쓸테니 코드를 음미하자. let testStr = "Hello, my name is Kevin."; let testRegex = /Kevin/; testRegex.test(testStr); // true let petString = "James has a pet cat."; let petRegex = /dog|cat|bird|fish/; // | 는 pipe char let result = petRegex.test(petString); let myString = "freeCodeCamp"; let fccRegex = /freeCodeCamp/i; // i를..
Programming Language/🟨 Javascript 4년 전

js의 Number, BigInt 타입과 정밀한 숫자 계산에 대하여

js는 Int, long, float, double 이런 타입이 존재하지 않고 상남자스럽게 "number" 타입 하나만 존재한다. 최근에, 돈이 오고가는 프로젝트를 node로 개발해볼까 싶어서 한 번 짚어보았다. - object wrapping var, 일반 var 이건 java할 때도 살펴보았으니 설명은 생략. object로 wrapping 된 녀석은 object 타입이며 자기 자신과 비교할 때만 true를 반환합니다. object라니깐요? const a = new Number("123"); // create a wrapper object const b = Number("123"); // 단순 primitive 값 반환 const c = 123; // 단순 primitive 값 반환 console.lo..
Programming Language/🟨 Javascript 4년 전

throttle과 debounce를 통해 중복된 요청을 줄여보자

요청을 언제 줄여야 하나? 넵 위의 경우입니다. 이를 전문 용어로 '따닥'이라고 합니다. 버튼을 빨리 눌러서 중복된 요청이 가는 경우에 발생합니다. 이런 문제를 해결하기 가장 쉬운건, lodash의 debounce, throttle을 이용하는 방법이 있겠습니다. _.debounce(), _.throttle() 꼴로 사용하면 끝이고(트리 쉐이킹의 측면에서는 최악의 import 방법이긴 한데 뭐 ㅋㅋ), 뭐 직접 구현하셔도 괜찮습니다. throttle이랑 debounce는 뭐가 다른거야? => 제한 시간 연장의 유무 사실 둘 다 비슷하게, 특정 코드의 실행 횟수를 줄여주는 역할을 합니다. 그러나 차이를 명확하게 알아는 둬야 합니다. * 아래 글에 '이벤트'라고 한건, 보통 위 두 함수가 dom에 붙인 이벤트..
Programming Language/🟨 Javascript 4년 전

Date 타입과 ISO, UNIX

# 결국 js에서는 타임존 문제로 라이브러리를 쓸 수 밖에 없다는 결론. + 편의성을 위해서라도 라이브러리를 쓰는게 좋다는 의견 https://meetup.toast.com/posts/125 https://meetup.toast.com/posts/130 # Date는 reference 객체라서 == 연산 해봐야 false를 뱉는다는 설명. 다만 비교 연산은 가능 https://www.delftstack.com/ko/howto/javascript/how-to-compare-two-dates-with-javascript/ # Date => ISO, UTC, UNIX ISO는 string 타입이고 UNIX는 number 타입이다. ISO와 UNIX 둘 중 어느 것도 Date 타입이 아니다. new Date()..
Programming Language/🟨 Javascript 4년 전

Intersection Observer를 활용한 이미지 동적 로딩

다른 포스트에서 옵저저 패턴 ~ Reactive Programming 패러다임 ~ RxJS으로 연결되는 프로그래밍 패러다임을 살펴본 바 있습니다. 여기서는 Intersection Observer(줄여서 io)를 활용하여 이미지를 동적으로 로딩해는 기능을 만들어보고자 합니다. 왜냐하면 Fuze에서 모델들의 사진을 뿌릴 때 이미지를 동적으로 로딩시켜야할 필요가 있기 때문입니다. intersection Observer는 또 뭐야 특정 DOM 객체가 우리가 보는 화면 영역(viewport)과 겹치는 교차 이벤트를 감시합니다. 쉬운 말로, dom이 우리가 보는 스크린에 노출이 되었냐? 아니냐?를 감지하는 겁니다. 기존에 scroll 이벤트를 감지하여 하용하는 방식은 스크롤이 내려가면 계속 트리거되기 때문에 성능에..
Programming Language/🟨 Javascript 4년 전

모바일 감지를 위한 tip

css-tricks.com/touch-devices-not-judged-size/ Touch Devices Should Not Be Judged By Their Size | CSS-Tricks Front-end developers and web designers live in an insane multi-device reality. A few months ago, the Red Hat UXD team discussed how to design enterprise css-tricks.com 이 글을 읽고 생각하게 되었다. React에서는 이렇게 mobile을 감지했는데 브라우저 가로 폭의 길이에 따라 감지하는게 핵심이다. (순수 js라면 media query를 이용하면 된다) 그러나 모바일의 크기가 점차 ..
Programming Language/🟨 Javascript 4년 전

nested Array 다루기 : flat 평탄화, Table 형태의 array

flat flat은 n중 array를 평탄화 하는 메서드입니다. array.prototype.flat(depth) // depth default : 1 예를 들어 다음과 같은 2중 array가 있으면 depth 1을 주어 평탄화 작업을 할 수 있습니다. [[], [], [{name: "xah"}], [{name: "darren"}, {name:"kyung"}]].flat(1) // output : [{name: "xah"},{name: "darren"}, {name:"kyung"}] 만약 모조리 평탄화시키고 싶으시다면 depth에 Infinity를 주시면 됩니다. const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]; arr4.flat(Infinity); // [..
Programming Language/🟨 Javascript 4년 전

외부 패키지 없이 순수하게 Card Slider 만들기

이거 만드는데 5시간이나 걸렸습니다 ㄷㄷ css를 너무 오랜만에 해서 감을 잃은듯... Card import React from "react"; import StyledCard from "./style"; function Card({ img = "", title = "", text = "", author = "" }) { return ( {title} {author} {text} ); } export default Card; import styled from "styled-components"; const StyledCard = styled.div` border-radius: 0.4rem; overflow: hidden; -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0...
Programming Language/🟨 Javascript 4년 전