전체 글123 상태 관리 라이브러리 비교해보기 개발을 해보며 사용해본 상태 관리 라이브러리가 어느덧 꽤 늘었다.이제껏 써본 상태 관리 라이브러리는 Redux Toolkit/Recoil/Zustand 의 3가지 였는데, 여기에 많이 들어본 Jotai 까지 총 4가지의 라이브러리를 사용해보고 어떤 차이점이 보이는지 한 눈으로 확인해보기 위해 간단한 투두 화면을 만들었다.공통 조건 위에서 언급한 대로 간단한 Todo List 화면을 만든다고 가정하고, 이 때 필요한 상태들을 위 4개의 라이브러리로 구현한다. 아래의 항목들을 구현했다(Recoil의 공식 문서 튜토리얼을 참고했다). interface TodoItem { id: string; title: string; description: string; isDone: boolean; date: Date;}.. 2024. 12. 19. 이분 탐색 문제 풀어보기 빈말로라도 알고리즘 문제를 잘 풀진 못하지만(...) 특히나 잘 접하지 않았던 유형의 문제들을 풀어보고자 과거에 풀었던 문제들을 돌아보던 중, 이분 탐색 문제를 엄청나게 안 풀어봤다는 것을 깨달았다.개념적으로는 이분 탐색이 어떤 것인지 알고 있지만, 알고리즘 문제 풀이에 대해서는 확실히 익숙하지 않다는 느낌이 들어, 이분 탐색 문제를 풀고 문제 유형에 익숙해지고자 글을 남기기로 했다.이분 탐색 문제이분 탐색 형식의 풀이를 요구하는 알고리즘 문제들은 주로 방대한 범위의 수에서 특정 조건을 만족하는 값을 찾는 문제에서 많이 쓰이는 듯 하다.이분 탐색의 이론은, 정렬된 배열 혹은 리스트 내에서 탐색 범위(인덱스)를 절반으로 나누어 가며 탐색 대상의 범위를 좁혀나가는 것이다.이를 알고리즘 문제 풀이에 대입하면,.. 2024. 12. 13. Three.js and TypeScript (11) Udemy의 Three.js and TypeScript 강의를 듣고 정리한 내용을 기록한다.31. GLTF DRACO 부터 33. Rapier Debug Renderer 까지.DRACO loader three.js docs threejs.org 3D Mesh를 압축하거나 압축을 풀기 위해 사용하는 오픈소스 라이브러리.그동안 사용해온 GLTF 파일도 압축될 수 있으며, GLTFLoader를 통해 불러오는 것도 가능하다. gltf-transform 설치gltf 파일 형식을 읽고, 수정할 수 있게 한다(참고)강의에서는 모델 파일을 압축하기 위해 사용한다.// 설치yarn global add @gltf-transform/cli// 예제 파일을 압축한다gltf-transform optimize './public/.. 2024. 12. 3. 오블완 챌린지를 마치며 11월 7일부터 시작한 오블완 챌린지가 오늘로 드디어 막을 내린다. 3주동안 챌린지를 해오며 느낀 이런저런 감상을 읊어보려 한다.오블완 챌린지 끝! 11월 7일부터 오늘(27일)까지 3주간의 챌린지가 끝난다. 오늘의 이 글만 작성하면 챌린지가 마무리된다. 지난 글에서 강의 기록으로 챌린지를 하면 동기부여도 되고 어느 정도의 강제성(?)도 생기니 일석이조가 아닐까 하고 올렸었는데, 결론적으로는 의도대로 잘 된 기분이다. 물론 순수하게 강의만 올리진 않았지만... 챌린지 포스트를 작성하며 나름 이런저런 고민을 했던 것 같다. 강의를 들으며 내가 공부한 기록을 올리는 것은 좋은데, '타인이 전하는 내용만 너무 수동적으로 적게 되는 것은 아닌가?' 하는 생각도 들었다. 그래서 강의를 듣는 와중에도 .. 2024. 11. 27. 함수형 자바스크립트 훑어보기 함수형 프로그래밍이 정확히 어떤 것일까 했는데, 자세히 공부하려고 사놨던 책(함수형 자바스크립트)을 이제서야 읽어보기 시작했다(ㅎㅎ).이전의 내 짧은 지식으로는 함수를 위주로 구성하는 프로그래밍(?) 정도의 얕팍한 이해 정도만 하고 있었는데, 1장을 읽어보며 조금의 이해를 쌓아보기로.함수형 프로그래밍이 무엇인가요?말 그대로 ‘함수의 사용을 강조하는 프로그래밍 스타일’이다.다만, 단순히 ‘함수를 사용하자’는 것은 아니고 고려하고 반영해야 하는 원칙이 존재한다. 함수형 프로그래밍의 원칙부수 효과 (Side Effect)를 방지한다.상태 변이를 줄이기 위해 데이터의 제어 흐름 및 연산을 추상화한다.⇒ 이 원칙을 준수하기 위해 ‘재사용성 & 신뢰성(Reliability)’을 고려하여, 가능한 작게 기능을 나눈.. 2024. 11. 26. Three.js and TypeScript (10) Udemy의 Three.js and TypeScript 강의를 듣고 정리한 내용을 기록한다.29. JEasings 부터 30. GLTF Animations 까지.JEasings애니메이션에 사용할 수 있는 자바스크립트의 Easing 엔진.Easing: 사전적 의미로는 ‘완화’라는 의미를 갖는다. 애니메이팅에서는 애니메이션을 자연스럽게 만들기 위해 천천히 움직이도록 완화하는 기법을 의미하는 것 같다.일정 시간동안 물체의 속성을 새로운 값으로 변하도록 해주는 기능을 제공한다.아래의 값들을 설정할 수 있다.변환 시간새로이 설정할(변환될) 값시작하기 까지의 딜레이변환이 끝났을 때 실행될 스크립트변환 시간 동안 변환에 걸리는 시간을 변경하는 Easing 함수등등…강사분이 직접 만드신 패키지같다. Tween.js에 .. 2024. 11. 25. 이전 1 2 3 4 ··· 21 다음
