codingfarm

1.소개JavaScript는 Iterator를 반환하는 아래와 같은 메서드를 가지고 있을 경우 Iterable로 규정한다.이를 iteration protocol라 칭한다.[Symbol.iterator]() { return {next() {...}}; }대표적인 Iterable은 Array, Map, Set 등이 있으며,Iterator를 통해 for...of 문, 전개연산자, 구조 분해 등 다양한 기능들을 제공한다.2. Iterator특정 크기의 자연수 지연 생성하는 Iterator를 반환하는 일반함수를 구현해보겠다.function naturals(end: number = Infinity): Iterator { let n = 1; return { next(): IteratorResult { ..

1. 소개제너레이터(Generator) 는 함수의 실행을 중간에 멈췄다가 다시 이어서 실행할 수 있게 해주는 설계 방식(구조) 를 지칭하며,자바스크립트의 제너레이터 함수는 iterator를 사용함으로써 함수 내부 코드의 호출타이밍을 사용자가 제어할 수 있게 해준다.2. 문법2-1. function*자바스크립트에서 제너레이터 함수는 function* 키워드로 정의되며, 일반함수와 달리 한번에 끝까지 실행되지 않는다.함수호출시 iterator를 반환하며, next() 함수를 호출할때마다, yield return 지점까지 실행을 재개한다.(유니티 엔진의 코루틴처럼)function* generatorFunc() { yield 1; yield 2; yield 3;}const iterator = generat..

0. 소개반복자 패턴의 구현을 통해 객체지향언어가 함수형 패러다임을 구용하는 방식에 대해 알아보겠다.1. 반복자 (Iterator)반복자는 다수의 데이터를 순차적으로 꺼내어 처리할 수 있게 해주는 객체를 나타낸다.이를통해 사용자는, 특정 자료(트리, 집합, 맵 등)의 내부구조를 몰라도 데이터를 순회할 수 있다.1.1 반복자의 개념반복자는 필수적으로 다음 2가지 개념을 가진다.다음요소 가져오기 (next)남은 요소가 더 있는지 확인하기 (done)1.2 반복자의 특징메모리 효율적모든 데이터를 한번에 메모리에 올리지 않고 순회 가능자료구조와 순회방식 분리어떠한 자료구조에 대해서도 같은 순회 방법을 제공일관된 문법for, foreach 같은 반복문 사용이 가능해짐지연순회 제공순회방식을 객체로 캡슐화Iterat..

1. 소개three.js 에서 post-process를 구현하기 위해 주로 EffectComposer를 사용해왔다.간단한 효과의 경우, ShaderMaterial에 간단히 쉐이더 코드를 작성하지만,복잡한 효과는 Pass를 상속받는 클래스를 구현한다. r3f의 후처리는 주로 @react-three/postprocessing의 EffectComposer를 사용하며, 이는 Three.js addons의 EffectComposer 가 아니라, postprocessing 라이브러리의 Composer 를 감싼것이다.즉, addons와 postprocessing의 EffectComposer는 이름만 같을 뿐 완전히 다른 구현을 가진, 독립적인 대상이다. 2. addons의 EffectComposerThree.js의 ..

1. 소개그동안 실무에서 3d 개발을 위해 R3F를 중점적으로 사용해왔다.캔버스 사이즈 조절, 카메라 시야각 자동 설정, 렌더링 사이클 관리, 메모리 누수 방지, ray-cast 관리 및 이벤트 제공 등 바닐라 Three.js 에서는 제공해주지 않던, 굉장히 많은 편의성 기능들을 누리는 중이다.이전에는 renderer 생성 -> 캔버스 검색 -> html 엘리먼트 부착 -> 캔버스 사이즈 설정-> 카메라 사이즈 설정 -> 렌더링 사이클 호출 등. 복잡한 과정을 거쳐야 했기에, 간단한 테스트를 하나 수행하기 위해 보일러플레이트 코드를 통째로 복붙해야 했지만, 이제는 그저 컴포넌트를 만들고, 내부에 원하는 요소들을 추가하기만 하면 된다.하지만, R3F 컴포넌트를 통해 Three.js의 3d 객체를 정말로..