본문 바로가기

FrontEnd

 (437)
[typescript] d.ts 파일을 js 프로젝트에서 사용할 수 있을까? .d.ts 파일을 js 프로젝트에서 사용할 수 있을까요? js 개발자의 타입 안전성을 보장하면서 말입니다. 아래 페이지의 스크립트를 이용하여 js 파일의 대략적인 타입을 .d.ts 파일로 추출한뒤, .d.ts의 타입을 좀 더 상세하게 작성했습니다. https://www.typescriptlang.org/docs/handbook/declaration-files/dts-from-js.html Documentation - Creating .d.ts Files from .js files How to add d.ts generation to JavaScript projects www.typescriptlang.org npx -p typescript tsc src/**/*.js --declaration --allo..
Redux Toolkit : Usage Guide(사용 가이드) 리덕스 툴킷 공식문서의 사용 가이드 항목을 읽어봅니다. https://redux-toolkit.js.org/usage/usage-guide Usage Guide | Redux Toolkit redux-toolkit.js.org Quick Start 페이지에서 설명한 대로 Redux 툴킷의 목표는 Redux 사용을 단순화하는 것입니다. Redux로 하고자 하는 모든 것에 대한 완전한 솔루션은 아니지만 Redux로 앱을 작성하는데 필요한 많은 코드를 자동으로 만들어줍니다. Redux 툴킷은 애플리케이션에서 사용할 수 있는 몇 가지 개별 함수를 내보내고 Redux와 함께 일반적으로 사용되는 다른 패키지(예: Reselect 및 Redux-Thunk)에 대한 종속성을 추가합니다. Redux 툴킷이 Redux 관..
Redux Toolkit : Immer와 함께 사용하기 Redux toolkit 공식 문서에서 Immer의 올바른 활용법을 배워봅니다. https://redux-toolkit.js.org/usage/immer-reducers Writing Reducers with Immer | Redux Toolkit redux-toolkit.js.org Immer와 함께 Reducer 작성하기 변경 불가능한 업데이트 로직을 손으로 작성하는 것은 어렵고, 리듀서에서 실수로 상태를 변경하는 것은 Redux 사용자가 저지르는 가장 흔한 실수입니다. Redux Toolkit의 createReducer 및 createSlice는 자동으로 Immer를 내부적으로 사용하여 "변이" 구문을 사용하여 간단하게 불변 업데이트 논리를 작성할 수 있도록 합니다. 리듀서 구현을 단순화하는 데 도..
[번역] Mobx로 배우는 반응형 프로그래밍(reactive programming)의 원리 Mobx를 통해 반응형 프로그래밍(reactive programming)의 원리에 대해 알아봅니다. MobX는 반응형 프로그래밍을 투명하게 적용하여 상태 관리를 간단하고 확장할 수 있는 실전에서 증명된 라이브러리입니다. mobx 핵심 개념을 이해하려면 먼저 함수형 반응형 프로그래밍에 대해 알아보아야 합니다. Functional Reactive Programming 함수형 프로그래밍은 데이터 구조를 변경하지 않고 부작용이 없는 순수 함수를 사용하여 응용 프로그램을 개발하는 패러다임입니다. 순수 함수는 주어진 동일한 입력에 대해 항상 동일한 출력을 반환하고 함수 범위 밖의 변수에 대해서는 작동하지 않습니다. // Pure function function result(a, b){ return a + b } r..
[30초 CSS] CSS 속성 상속과 !important는 무관하다 상속되는 속성의 !important는 매우 간단하게 오버라이딩 됩니다. 오버라이딩 될 때에는 그냥 해당 속성이 없었다가 생겼다고 생각하시면 됩니다. HTML 삽입 미리보기할 수 없는 소스 참고 : https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#keyword_index CSS reference - CSS: Cascading Style Sheets | MDN Use this CSS reference to browse an alphabetical index of all of the standard CSS properties, pseudo-classes, pseudo-elements, data types, functional notations and ..
리액트 쿼리 : 셀렉터와 폴더 구조 리액트 쿼리 셀렉터 실무 사용 경험, 폴더 구조에 대한 생각을 공유합니다. 리액트 쿼리 셀렉터 놀랍게도 리덕스처럼 리액트 쿼리에는 셀렉터가 있습니다. export const useTodosQuery = (select, notifyOnChangeProps) => useQuery(['todos'], fetchTodos, { select, notifyOnChangeProps }) 위와 같이 셀렉터를 파라미터로 받아 사용할 수 있도록 하는게 좋을까요? 결론은 아닙니다. 리액트 쿼리의 api 디자인은 실제로 리덕스의 영향을 꽤 많이 받았으며, 리덕스의 핵심 철학 중 하나는 함수형 프로그래밍 원리를 따르는 것입니다. 이를 고려하면 데이터의 모양을 캡슐화해야 합니다. 셀렉터 함수의 중복, 메모화, 데이터 캡슐화를..
[번역] Idiomatic Redux: The Tao of Redux, Part 2 - Practice and Philosophy 실무에서의 리덕스의 활용방법과 리덕스의 철학에 대해 좀 더 자세히 알아봅시다. 1편 번역 : https://itchallenger.tistory.com/685 원문 : https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-2/ Idiomatic Redux: The Tao of Redux, Part 2 - Practice and Philosophy More thoughts on what Redux requires, how Redux is intended to be used, and what is possible with Redux blog.isquaredsoftware.com 리덕스 활용 Redux 앱에서 사용되는 일반적인 ..
[Redux] 액션 생성자를 사용해야 하는 이유 (Idiomatic Redux: Why use action creators?) 원문 : https://blog.isquaredsoftware.com/2016/10/idiomatic-redux-why-use-action-creators/ Idiomatic Redux: Why use action creators? First in an occasional series of thoughts on good usage patterns for Redux blog.isquaredsoftware.com 컴포넌트 내에서 비동기 로직을 호출하거나 액션을 인라인으로 디스패치하는것도 가능합니다 왜 우리는 액션 생성자를 사용해야 하나요? 댄 아브라모프의 Stack Overflow 답변에 따르면 프로그래머는 : 동작(메서드, 함수 내부 로직)을 캡슐화하고 관심사를 분리하며 코드 중복을 최소화하는 것이 좋습니..

티스토리툴바