공부106 상태 관리 라이브러리 비교해보기 개발을 해보며 사용해본 상태 관리 라이브러리가 어느덧 꽤 늘었다.이제껏 써본 상태 관리 라이브러리는 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. 함수형 자바스크립트 훑어보기 함수형 프로그래밍이 정확히 어떤 것일까 했는데, 자세히 공부하려고 사놨던 책(함수형 자바스크립트)을 이제서야 읽어보기 시작했다(ㅎㅎ).이전의 내 짧은 지식으로는 함수를 위주로 구성하는 프로그래밍(?) 정도의 얕팍한 이해 정도만 하고 있었는데, 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. 프로그래머스 단어 변환 풀이 지난 글에서 프로그래머스 문제도 많이 풀어봐야 겠다고 다짐했었는데, 오늘에서야 건드려보기 시작했다(^^...문제 풀이 - 프로그래머스 단어 변환 DFS/BFS 문제. 단어 배열이 주어지고 시작 단어와 타겟 단어가 주어지면 시작 단어를 단어 배열 내에 주어진 단어로 차례차례 바꿔가며 타겟 단어를 만드는 것이 문제의 목표이다. 문제에서 주어지는 조건은 다음과 같다. 시작 단어에서 시작하여 주어진 단어 배열 내의 단어로 단어를 바꿔가며 타겟 단어를 만들어야 한다.이 때, 글자를 한 글자만 바꿀 수 있다. 즉 다음 단어로 고를 수 있는 단어는 바꾸기 전 단어와 '딱 한 글자만 차이나는 단어'이다.ex) lot에서 get(2글자가 차이난다)으로의 변환은 불가능하지만, let으로의 변환은 가능하다.변환을 완료하였.. 2024. 11. 24. 이전 1 2 3 4 ··· 18 다음
