분류 전체보기 검색 결과

해당 글 777건

예시로 공부하는 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 2021. 5. 27. 16:16

Lazy Evaluation(지연 평가)와 지연성 map, filter

아래는 즉시 평가되는 함수들이다. 매 연산마다 새로운 배열을 만들어야 하는데, 이 방법은 배열의 크기가 작으면 편리하지만, 배열의 크기가 큰 경우에는 계속해서 불필요한 연산을 해야 합니다. // eager evaluation go( range(10), map(a => a + 10), filter(a => a % 2), take(2), console.log ); // [0, 1, 2, 3, ...] // [10, 11, 12, ...] // [false, true, false, ...] // [11, 13] // lazy evaluation go( L.range(10), L.map(a => a + 10), L.filter(a => a % 2), take(2), console.log ); // 0 (L.ra..
Programming paradigm/🧱 functional JS 2021. 5. 24. 20:48

Array.prototype.[method]보다 다형성 높은 map, filter, reduce

Array.prototype.map보다 개선된 Map 함수형 프로그래밍을 위해선 이터러블 프로토콜을 따르는 객체들을 다루고, 이를 수용할 수 있게 만드는 것이 중요하다. 대표적으로, 유사 배열은 배열이 아니기 때문에 Array.prototype.map 메서드를 사용할 수 없었다. 별도의 배열에 담아두는 작업을 해왔지만, 함수형 프로그래밍을 공부하니, 별도의 map 함수를 만들어두는 것이 좀 더 많은 경우 활용할 수 있어서 좋다. iterable에 속하는 것으로, String, Array, 유사 배열, TypedArray, Map, Set, 그리고 유저가 직접 정의한 iterable가 속한다. https://darrengwon.tistory.com/1407 유사 배열은 iterable이기 때문에, 아래와 ..
Programming paradigm/🧱 functional JS 2021. 5. 23. 19:24

iteration : iterable(순회할 수 있는 객체)와 iterator(순환체)

for...of 이건 되고 이건 왜 안됨? iterable, iterator에 대해 직접적으로 공부하면 감이 잘 안 옵니다. 우선, javascript의 여러 for문을 살펴보도록합시다. 고전적 for문과 es6 이상부터 가능해진 for...of 와 for... in은 비슷해보이지만 차이가 존재합니다. 간단하게 정리하자면, 고전적 for문 : length 측정 후 하나씩 looping for...in : 객체를 순회합니다. for...of : iterable을 looping. (한국어판에서는 '순회 가능한 객체'라고 번역해놨는데 오히려 더 헷갈림. 이터러블이라고 부르자) const arr = [1, 2, 3]; // 고전적인 for문. length에 의존하여 index를 올리는 방식 for (let i ..
Programming Language/🟨 Javascript (Core) 2021. 5. 23. 00:53

immer로 redux state 불변성 유지하기

무지성스럽게 불변성 관리를 할 수 있다길래 배웠다. 솔직히 지금까지 한 프로젝트에서 immer라 필요한 정도로 depth가 깊게 들어간 객체를 불변성 유지할 일이 없어서 사용을 안해왔다. 그 정도로 복잡해지기 전에 어떻게든 객체를 쪼개놓아야 한다는 생각이었다. 그런데 아무래도 다음 프로젝트에서는 사용해야 할 것 같아서 찾아보기로. ㅎ 아래는 velopert가 reducer에 immer를 붙인 꼴이다. 아래와 같은 immer의 produce 함수를 활용하면 된다. produce(currentState, producer: (draftState) => void): nextState 일반 local state에 사용해도 되고, redux에서 사용해도 된다. local state에서 사용할 사람들은 아래 글을 읽..
State Management/⚛ Redux 2021. 5. 21. 16:36

브라우저의 렌더링 과정, 렌더큐와 리플로우/리페인팅, Virtual DOM

브라우저는 어떻게 구성되어 있는가 사용자 인터페이스(UI) 레이어는 브라우저에서 볼 수 있는 거의 모든 것으로, 요청한 페이지를 보여주는 창 외의 모든 UI를 의미합니다. 주소창, 뒤로가기, 앞으로 가기, 새로고침, 북마크, 환경설정과 같은 UI가 있습니다. 일종의 '틀' 브라우저 엔진은 사용자 인터페이스와 렌더링 엔진 사이에서 중재자 역할을 합니다. 만약 여러분들이 사용자 인터페이스 레이어에 있는 새로고침 버튼을 눌렀다면, 브라우저 엔진은 이를 이해하고 새로고침 명령을 수행합니다. 렌더링 엔진은 HTML과 CSS, JavaScript를 파싱하고 그 결과물을 바탕으로 페이지를 그려내는 역할을 합니다. 각 브라우저는 다양한 엔진을 사용하는데, Chrome과 Opera, Edge는 Blink를, Firefo..
미분류/Tip 2021. 5. 20. 01:09

브라우저에 적합한 애니메이션 구동하기 : requestAnimationFrame

딱히 canvas에서만 사용되지는 않는데, canvas에서 애니메이션을 그릴 때 주로 사용되긴 한다. 아래는 MDN에서 가져온 코드인데, timestamp가 찍힐 때마다 progress를 증가시키는 애니메이션이라 가정할 때, 분명 매우 많은 수의 이벤트가 일어날 것이다. 많은 수의 이벤트가 발생하는 경우에 취하는 일반적인 조치에선 (소켓, 리사이징, 폴링 이벤트 같은 경우가 있겠다) 의도에 따라 debounceTime, thrtottlingTime 등을 지정해주면 되는데 애니메이션의 경우 이런 식의 핸들링을 할 경우 '부드러움'이 부족하다. var start = null; var element = document.getElementById('SomeElementYouWantToAnimate'); elem..
📈 js 그래픽/🎨 Canvas 2021. 5. 20. 00:34

bitcoin whitepaper를 기반으로 한 blockchain 관련 이해

1. Double spending 이중지불 현금을 사용하면 이중 지불이 문제되지 않는다. 현금을 줘버리면 끝나니까. 그러니 디지털 거래의 경우 데이터를 기반으로 작동하기 때문에 이중 지불을 할 수도 있다. A는 K뱅크에 있는 1,000원을 B와, C에게 동시에 송금하고 싶다는 호기심이 발동하였습니다. 그래서 컴퓨터를 이용하여 인터넷 뱅킹에 접속한 후 B에게 1,000원을 송금할 준비를 합니다, 마찬가지로 동시에 이번엔 모바일에서 C에게 송금할 준비를 한 후 동시에 송금하기 버튼을 눌렀다면 결과는 어떻게 이루어질까요? - 출처 https://steemit.com/kr/@yahweh87/23-double-spent 전자 결제에 있어 이중 지불 문제를 해결하기 위해 비트코인에서는 p2p 기반의 분산 서버를 통..
⛓️ blockchain/Bitcoin (BTC) 2021. 5. 16. 13:17

interface (2): interface 변환하기

인터페이스는 (1) 구체화된 타입으로 변환할 수도 있고, (2) 다른 인터페이스로 변환할 수도 있습니다. interface.(type) 꼴로 두 경우 다 방법은 똑같습니다. 인터페이스 변수에서 다른 구체화된 타입으로 변환하기 인터페이스 변수에서는 인터페이스에 해당하는 구조체의 필드에 직접 접근할 수 없습니다. 따라서 인터페이스 변수를 받는 함수는 변수를 구조체로 타입 변환해줄 필요가 있습니다. 아래 코드를 보면 직관적으로 이해할 수 있습니다. package main import "fmt" // String 메서드를 가지면 모두 Stringer 인터페이스 타입 type Stringer interface{ String() string } type Student struct { Age int } // Stud..
Programming Language/🐿️ Go (Golang) 2021. 5. 15. 21:54

interface (1) : 구조체를 추상화해보자

인터페이스? inteface는 polymorphism(다형성)을 구현할 수 있는 좋은 타입이다. interface도 타입이다! lang spec을 찾아보라. 그리고 애초에 선언이 type xxx interface 꼴이다. interface는 타입(type)이 구현해야 하는 메서드 원형(prototype)들을 정의한다. 아래 처럼. // Area 메서드를 가지는 것은 Figure 타입이다. 이렇게 이해하는 게 편하다 (Todd McLeod) type Figure interface { Area() float32 } 잘 생각해보면, typescript에서의 interface도 같았다. 타입처럼 지정하고, 특정 속성(그 속성이 함수일 수도 있다)을 가져야만 interface를 만족했었다. 이런 관점에서 보면 g..
Programming Language/🐿️ Go (Golang) 2021. 5. 15. 13:42