티스토리

멋진 어른이가 될래요 !

검색하기

블로그 홈

멋진 어른이가 될래요 !

uplifted.tistory.com/m

개발 블로그

구독자: 3

방명록 방문하기

주요 글 목록

[23] 자동차 경주 - 할 일들을 이터러블(리스트)로 바라보기 데이터 구조는 track, 파이프라인 코드는 _.go를 사용1. L.range(Infinity)무한 범위의 이터러블을 생성합니다. Infinity는 무한대이므로, 끝없이 숫자를 생성합니다.이때, 실제로 무한히 반복되는 것이 아니라 나머지 조건에 의해 제한됩니다.2. L.map(i => track[i])L.map()을 사용하여 L.range(Infinity)에서 생성된 각 인덱스를 사용해 track 배열의 요소에 접근합니다.예를 들어, track[0], track[1], track[2] 등을 차례로 접근합니다.3. L.map(({ cars }) => cars)각 track[i]에서 cars 프로퍼티만 추출합니다.즉, [ '철수', '영희', '철희', '영수' ]과 같은 형태의 배열을 얻습니다.4. L.m.. 공감수 1 댓글수 1 2024. 12. 2.
[21~22] range와 take의 재해석 / takeWile, takeUntil range와 take의 재해석range와 take는 보통데이터 생성 및 처리를 쉽게 해주는 함수로, 데이터 파이프라인을 구성할 때 자주 사용됩니다.1. range()range() 함수는 지정된 범위의 숫자들을 순서대로 생성해주는 함수입니다. 보통 이 함수는 반복 작업이나 특정 범위의 값을 생성할 때 사용됩니다.2. take()take() 함수는 특정 개수만큼의 데이터를 추출하는 역할을 합니다. 즉, 입력받은 이터러블이나 배열에서 앞에서부터 원하는 개수만큼의 요소를 가져오는 기능을 합니다. 코드 설명L.range(10): 0부터 9까지의 배열을 생성합니다._.take(3): 생성된 배열에서 처음 3개의 요소만 추출합니다. 즉, [0, 1, 2]를 가져옵니다._.each(console.log): 추출된 각 .. 공감수 0 댓글수 0 2024. 12. 2.
[18~20] Map, Set / Model, Collection 클래스 / Product, Products / MapMap은 ES6에서 추가된 새로운 데이터 구조로, 키-값 쌍을 저장하는 용도로 사용된다. Map 객체는 일반적인 자바스크립트 객체와 비슷하지만 몇 가지 중요한 차이점이 있다.키의 타입: Map의 키는 객체를 포함한 모든 값이 될 수 있다. 반면 일반 객체의 키는 반드시 문자열이나 심볼이어야 한다.저장 순서 유지: Map은 키-값 쌍이 삽입된 순서를 유지한다. 코드 설명1. new Map()으로 빈 Map 객체를 생성2. m.set('a', 1)와 같이 .set() 메서드를 통해 'a', 'b', 'c'라는 키에 각각 1, 2, 3을 설정3. _.go는 함수형 파이프라인을 구현하기 위해 자주 사용되는 형태로, 여러 개의 함수를 순차적으로 실행하는 방식이다.4. 첫 번째 인자로 m (Map 객체)을 넘.. 공감수 0 댓글수 0 2024. 12. 2.
[17] 객체를 이터러블 프로그래밍으로 다루기 (values, entries, keys, object, mapObject, pick, indexBy 및 응용, 그 외) 여기서 말하는 객체는 key value 쌍을 말한다. 이전까지는 iterator를 사용해서 다뤘다. 객체를 이터러블 프로그래밍으로 다루는 이유는 코드의 가독성, 유지보수성, 확장성을 높이고 데이터를 효율적으로 처리하기 위해서입니다. 이터러블 프로그래밍은 데이터를 순차적으로 처리하거나 변환하는 작업을 선언적으로 표현할 수 있는 기능을 제공합니다. 객체를 이터러블로 다루는 것은 특히 데이터 구조가 복잡하거나 동적으로 처리해야 할 때 유용합니다. 객체와 이터러블의 차이객체(Object):키-값 쌍으로 데이터를 표현.직접적으로 이터레이션(반복)할 수는 없음.JavaScript에서는 객체가 기본적으로 이터러블이 아님.이터러블(Iterable):순회 가능한 데이터 구조(예: 배열, 맵, 세트 등).for...of와.. 공감수 0 댓글수 0 2024. 11. 30.
[15~16] map으로 합성하기, find 대신 L.filter 써보기 1. map으로 합성하기map으로 fg를 감싸주고, each로 구분해주기 2. find 대신 L.filter 써보기find를 사용해 users에 특정 사람 찾아보기 take와 filter 사용해보기현재 find와 똑같은 일을 하지만, 훨씬 깔끔하게 정리된 모습을 볼 수 있다. 이제 go를 사용해서 눈에 보이기 쉽게 정리해보기 공감수 0 댓글수 0 2024. 11. 30.
[12~14] query, queryToObject 1. queryquery1 예제(1) obj1 key 출력해보기 (2) obj1 key와 value 출력해보기 (3) res 생성하여 값들을 누적해보기 이전 코드가 꽤 복잡하기 때문에 reduce로 처리해보기query2 예제(1) 우선, (Object.entries(obj) 이용하기 (2) reduce 적용 (3) 구조 분해 해보기 (kv -> [k, v]) + 조건문 추가위 코드는 상당히 복잡함 템플릿화해서 간결해 보이게 표현하기위와 결과 같음. 위 코드도 복잡하기 때문에 더 나은 방법은?query3 예제즉시 평가 필터(_.filter) 사용 + 구조 분해 undefined 추가, 좀 더 보기 좋게 변경, _.reject 함수명 변경 _.map 적용하기위 코드들이 같은 '형'으로 되어 있기 때문에 re.. 공감수 0 댓글수 0 2024. 11. 30.
[10~11] reduce를 사용해 코드 간단하게 만드는 방법 1. reduce + 복잡한 함수 + acc 보다, map + 간단한 함수 + reduce 만들기아래 코드는 복잡하다.위 코드가 복잡하고 하는 이유는이 reduce에서 이 users가 어떻게 생겼는지 분석하기 위해서 이 보조 함수를 만들고 있다. 그리고 시작 값을 통해서 합산하고 있다. 더 좋은 reduce는 시작 값(=0)이 없는 reduce가 더 간단한 연산을 한다.이게 무슨 말이냐면, 아래 사진처럼 a와 b 부분이 모두 숫자인 경우에는 더 심플하게 사용할 수 있다.하나의 함수에서 복잡하게 처리하는 것보다 a와 b를 같은 형태를 오게 한다면 복잡한 코드가 나오지 않게 된다. 아래 코드를 보면, _.reduce((a,b) => a+b, L.map(u => u.age, users)));형태를 사용해 .. 공감수 1 댓글수 1 2024. 11. 30.
FxJS 라이브러리 윈도우에서 사용하기 https://github.com/marpple/FxJS/blob/master/README_kr.md FxJS/README_kr.md at master · marpple/FxJSFunctional Extensions Library for JavaScript. Contribute to marpple/FxJS development by creating an account on GitHub.github.comFxJS는 ECMAScript 6 언어의 Iterable / Iterator, Generator, Promise를 기반으로 작성된 함수형 자바스크립트 라이브러리이다. 브라우저 환경일 때 헤더에 추가 script에 추가const { L, C } = window._; 브라우저에서 fx.js 스크립트 파일이 로.. 공감수 0 댓글수 0 2024. 11. 30.
[8~9] 추억의 별 그리기, 구구단 1. 추억의 별 그리기단계 1 : L.range(5)로 출력해보기_.go( L.range(5), console.log );이렇게 코드를 세우면, console창에 아래와 같이 나타나게 됨-> 소통이 어려움이 발생 단계 2 : 즉시 평가되면 range로 변경_.go( _.range(5), console.log );range는 먼가 여러번의 일을 반복하려고 할 때 그것을 시작하려면 사용함별을 0개부터가 아닌 1개부터 그리는게 좋기 때문에 코드 수정 단계 3 : _.map추가 및 range 1부터 시작_.go( _.range(1, 6), _.map(_.range), console.log );console에 얼추 별 형태와 비슷하게 나타남 단계 4 : reduce를 사용해서 a와 b사이에 아무것.. 공감수 0 댓글수 0 2024. 11. 30.
[6~7] while을 range로, 효과를 each로 구분 (+ go함수) 1. while을 range로 (1) L.range란 무엇인가?L.range는 지연 평가를 활용해 특정 범위의 숫자를 생성하는 함수입니다. 이를 통해 숫자 시퀀스를 동적으로 생성하고, 메모리를 효율적으로 사용합니다. (2) L.range의 특징start와 end 값을 사용해 숫자 시퀀스를 생성합니다.step 값이 있을 경우, 지정된 간격으로 숫자를 생성합니다.지연 평가를 지원하여 실제로 순회하기 전까지 값이 생성되지 않습니다. L.range의 일반적인 형태L.range(start, end, step);start: 시퀀스 시작 값 (기본값: 0).end: 시퀀스 종료 값.step: 시퀀스 증가값 (기본값: 1). 예제 6 while 코드//6. While을 range로 function f3(e.. 공감수 0 댓글수 1 2024. 11. 30.
L객체와 C객체, 지연평가(Lazy Evaluation)와 즉시평가(Eager Evaluation) L객체와 C객체 지연평가(Lazy Evaluation), 즉시평가(Eager Evaluation) 1. L객체과 C객체L 객체:L은 Lazy (지연 평가)를 지원하는 함수 모음여기서 제공되는 함수(deepFlat, deepFlatten, entries, 등)는 데이터를 처리할 때 메모리를 효율적으로 사용하며, 필요할 때만 값을 계산하는 방식으로 작동한다.지연 평가는 큰 데이터셋이나 무한 이터러블을 처리할 때 유용하다.C 객체:C는 병렬적 실행(Concurrency)을 지원하는 함수 모음reduce, take, mapEntries 등의 함수가 포함되어 있으며, 데이터 처리를 병렬적으로 실행하여 속도를 향상시킬 수 있다.특히, 비동기 처리를 다룰 때 유용하다. 2. 지연평가(Lazy Evaluation),.. 공감수 0 댓글수 0 2024. 11. 30.
[1~5] 홀수 n개 더하기, if를 filter로, 값 변화 후 변수 할당을 map으로, break를 take로, 축약 및 합산을 reduce로 (+ 이터러블 프로그래밍과 리스트 프로세싱) 1. 홀수 n개 더하기홀수 n개 더하기 코드 (1) 함수 정의limit : 처리할 홀수의 최대 개수 -> 3list : 숫자 배열 -> [1,2,3,4,5,6,7,8,9,10](2) 배열 순회for...of 문을 사용해 list 배열의 각 요소를 순회(3) 홀수 판별a % 2 는 a가 홀수 인지를 판별홀수 : a % 2 == 1 (참)짝수 : a % 2 == 0 (거짓)(4) 제한된 개수의 홀수만 처리--limit : limit 값을 1 감소시킨limit === 0 : limit이 0이 되면 break문으로 for루프를 종료한다. 2. if를 filter로 적용하기우선, 이터러블 프로그래밍과 리스트 프로세싱에 대해 알아보겠다.이터러블 프로그래밍과 리스트 프로세싱은 데이터를 선언적으로 처리하는 프로.. 공감수 0 댓글수 0 2024. 11. 30.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.