본문 바로가기

2022/05

(26)
타입스크립트의 타입 추론과 힌들리 밀러 타입 시스템 https://mostly-adequate.gitbook.io/mostly-adequate-guide/ch07 Chapter 07: Hindley-Milner and Me - mostly-adequate-guide Looking at head, we see that it takes [a] to a. Besides the concrete type array, it has no other information available and, therefore, its functionality is limited to working on the array alone. What could it possibly do with the variable a if it knows not mostly-adequate.gitbo..
Recoil로 Excel(SpreadSheet) 만들기 원래 Xstate로 만드려다가 실패했다. Xstate는 이전 비즈니스 로직에서 다음 비즈니스 로직으로의 전환을 관리하는덴 좋지만, 지금같은 Reactivity가 필요한 솔루션에는 별 도움이 안되는것 같다~ 라고 생각했는데 해당 내용을 정리하면서 다시 한번 생각해보니 굳이 XState로 만들려 하면 할 수도 있을 것 같다. 원래 Recoil과 같이 변경되는 부분만 최적화 하는게 어려울 것이라 생각했는데, selector를 잘 응용하면 될것 같기도 하다. Recoil로 중간에 변경한 이유는 중첩 참조 때문인데, 구현해보니 어차피 중첩 참조는 직접 구현해줘야 했다(...) 일단 cellsAtom에는 순수하게 입력한 input만 넣어두고, 셀렉터로 input을 평가해서 화면에 뿌려준다. 왜냐햐면 input에 포..
함수형 자바스크립트 : Frisby 교수의 Composable Functional JavaScript https://egghead.io/courses/professor-frisby-introduces-composable-functional-javascript Professor Frisby Introduces Composable Functional JavaScript This course teaches the ubiquitous abstractions for modeling pure functional programs. Functional languages have adopted these algebraic constructs across the board as a way to compose applications in a principled way. We can do the same in JavaScri..
React 디자인 패턴 : 관심사의 분리 (Seperation Of Concern) https://dmitripavlutin.com/orthogonal-react-components/ The Benefits of Orthogonal React Components How to design React components that are easy to change, maintain, and test? Strive to orthogonal React components. dmitripavlutin.com Orthogonal components A와 B가 직교하는 경우 A를 변경해도 B는 변경되지 않으며 그 반대의 경우도 마찬가지입니다. 그것이 직교성(통계적 무연관)의 개념입니다. 아래 그림에서 FM/AM 라디오 방송국 선택과 볼륨 조절은 서로 영향을 주면 안됩니다. 한 컴포넌트의 변경이 다른 ..
Recoil, Redux. 상태관리 라이브러리의 Selector 개념 Redux의 셀렉터 Deriving Data with Selectors | Redux Usage > Redux Logic > Selectors: deriving data from the Redux state redux.js.org 모든 앱의 상태를 싱글턴 기반으로 추적하는 개념인 Redux는 탑 다운 스타일로 상태 그래프의 해당 상태를 컴포넌트와 연결한다. 즉, 기본적으로 상태가 변경되면 전부 변경되지만, 그렇게 되면 최적화가 어려울 것이기에, 일부 데이터만 구독하도록 최적화한다. https://redux.js.org/usage/deriving-data-selectors 반대로 contextAPI는 컴포넌트 하단으로 데이터를 전달하기 위한 도구이다. 즉 props drilling을 피하기 위한 도구지, ..
resizable table(row, col) with React Unfortunately it's not an optimized solution. If you have any ideas for refactoring and optimization, feel free to contact me. note : This table's height is not fixed, so scrollTop is calculated with document.documentElement HTML 삽입 미리보기할 수 없는 소스 reference https://adamlynch.com/flexible-data-tables-with-css-grid/ Flexible data tables with CSS Grid Now that we've launched, I can finally talk abou..
Recoil 실전 패턴 : 상태의 계층화와 분리 원문 보기 Recoil Patterns: Hierarchic & Separation This article will discuss practical patterns in Recoil. It’s an advance topic that goes beyond Recoil basics, so we won’t spend time… medium.com 이 아티클에서는 Recoil의 실전 패턴에 대해 설명합니다. * 공식 Recoil YouTube * Recoil documentation 이 기사는 WeKnow에서 제공했으며 REDUX에서 Recoil로 이동하는 동안 아키텍처 작업에서 얻은 통찰들을 보여줍니다. 글로벌 상태를 분리된 자율적인 상태로 유지하며, 높은 레벨의 추상화, 합성을 통해 그 상태들을 조합하는 방..
reveal.js - 웹 기술로 PPT(발표자료)를 만들어보자! https://revealjs.com/ The HTML presentation framework | reveal.js Documentation and demos for the open source reveal.js HTML presentation framework. revealjs.com 개발자에게 ppt(발표자료) 제작 프로그램 (키노트, 파워포인트)로 발표자료를 만드는 작업은 여간 고된 일이 아닙니다. 만약 발표자료를 css와 html, 때때로 js를 활용하여 만든다면 어떨까요? 특히 개발자들이 문서 작성 시애용하는 markdown을 이용하면, 더 쉽게 문서를 만들 수 있을 것입니다. reveal.js를 이용해 웹 기술로 간단한 발표자료를 만들어 보겠습니다. 기본 설정하기 해당 튜토리얼은 코드 샌드..