본문 바로가기

분류 전체보기

 (989)
[Babel] 바벨 플러그인을 작성하며 AST 배우기 바벨 플러그인을 만들어보며 JS AST(Abstract syntax trees)를 배워봅시다. 해당 글의 번역입니다 : https://dev.to/viveknayyar/revealing-the-magic-of-ast-by-writing-babel-plugins-1h01 Revealing the magic of AST by writing babel plugins When you hear Abstract syntax trees, what is the first thought that occurs in your mind? Something t... dev.to 추상 구문 트리를 들었을 때 가장 먼저 떠오르는 생각은 무엇입니까? 컴파일러? 복잡한 트리 조작? 비트 조작? 🤔 경력이 얼마 안될 때 AST는 낮은 ..
[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..
[모질라 읽기] Viewport 메타 태그 모질라의 viewport 메타 태그 섹션을 읽어봅니다. https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag Viewport meta tag - HTML: HyperText Markup Language | MDN This article describes how to use the "viewport" tag to control the viewport's size and shape. developer.mozilla.org 최근 사내 모바일 앱을 개편하면서, 이곳저곳에서 날라오는 여러 무질서한 html을 표준화하는 스크립트를 작성할 일이 있었습니다. viewport meta 태그 설정들이 모바일 앱 레이아웃에서 상당히 중요한 역할을 한다는 것..
[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 디자인은 실제로 리덕스의 영향을 꽤 많이 받았으며, 리덕스의 핵심 철학 중 하나는 함수형 프로그래밍 원리를 따르는 것입니다. 이를 고려하면 데이터의 모양을 캡슐화해야 합니다. 셀렉터 함수의 중복, 메모화, 데이터 캡슐화를..

티스토리툴바