전체 글
-
서버 상태 관리를 위한 라이브러리 선택Frameworks, Platforms and Libraries/React 2023. 10. 15. 15:04
Store에서 전역 상태 관리뿐만 아니라 서버 상태 관리(비동기 처리 상태 관리)에 대한 처리도 같이 하다 보니 Store가 너무 비대해지는 현상이 발생했습니다. 이에 따라 전역 상태 관리와 서버 상태 관리를 분리시켜 Store의 경량화를 위해 서버 상태 관리 라이브러리를 찾아보게 되었습니다. 관련 라이브러리 레퍼런스가 가장 많은 React Query와 SWR 그리고 현재 RTK(Redux Toolkit)를 사용 중이기 때문에 RTK Query 이렇게 도입을 위해 세 라이브러리를 비교해 보았습니다. React Query https://react-query.tanstack.com/overview SWR https://swr.vercel.app/ko RTK Query https://redux-toolkit...
-
Vue application with React componentFrameworks, Platforms and Libraries/Vue.js 2023. 10. 8. 16:09
현재 회사에서 운영 중인 세 개의 application 중 두 개의 application의 경우 React, 남은 하나의 application는 Vue.js 기반이었습니다. 운영 중인 Vue.js 기반의 application을 React로 포팅할려는 니즈가 있었지만 한 번에 빅뱅 하기엔 시간이 부족하여 점진적으로 React로 포팅하고 신규 기능 페이지의 경우는 미리 React로 구성하기로 했습니다. 그렇다 보니 기존 Vue.js 기반의 application에 React component를 띄워야 했고 이때 사용한 방식을 포스팅하고자 합니다. react → vue 변환 모듈 ※ Vue는 Class Component 형태로 작성되었습니다. ReactDOMClient의 createRoot()를 통해 렌더링 되..
-
Styled Components with Tailwind CSSStyle/Libraries 2023. 9. 24. 21:36
기존에 CSS in JS 라이브러리로 Styled Components를 사용 중에 이전에 사용해 경험이 좋았던 Tailwind CSS를 도입하여 같이 사용해 보기로 했습니다. Tailwind CSS의 클래스들을 CSS Objects로 변환하여 Styled Components나 emotion 같은 CSS in Js 라이브러리에서 해당 클래스를 사용할 수 있도록 twin.macro를 이용한 기본적인 셋업과 사용 방식에 대해 알아보겠습니다. 필요 라이브러리 Styled Components를 사용하기 위해 필요한 라이브러리를 설치합니다. npm install styled-components npm install @types/styled-components # or yarn add styled-components..
-
Vue Class Component with DecoratorFrameworks, Platforms and Libraries/Vue.js 2023. 9. 16. 16:00
기존에 Vue 2 버전을 쓰는 경우 TypeScript의 도입이 매끄럽지 않지만 TypeScript와 같이 사용하기 위하여 Vue.extend()를 사용하여 객체로 만들어 사용하는 방법과 Class Component 형태로 만들어 쓰는 두 가지 방법 중 하나를 선택하여 사용합니다. 현재 운영 중인 Vue.js기반의 application의 경우는 이 중에서 Class Component로 만들어 사용하고 있으며 Decorator를 좀 더 활용하기 위해 추가로 라이브러리를 이용하여 구성했습니다. 그래서 어떻게 Decorator를 이용하여 Vue Class Component를 어떻게 구성했는지 소개하려고 합니다. Vue Class Component Example 기본적인 Vue Class Component 형태..
-
Redux Selector 최적화Frameworks, Platforms and Libraries/React 2023. 9. 10. 15:19
작업 중 Reference type(object or array)의 state를 Selector를 통해 변환하여 사용하는 경우 아래와 같은 warning을 접할 수 있습니다. Selector customSelector returned a different result when called with the same parameters. This can lead to unnecessary rerenders. Selectors that return a new reference (such as an object or an array) should be memoized // warning example export const conformUserSelector = (state: RootState) => { ret..
-
eslint-plugin-import 도입기Build/Lint 2023. 9. 2. 16:23
ESLint와 Prettier을 통해 기본적인 코드 컨벤션을 잡아 사용하던 중에 import 구문에 대한 컨벤션 필요성을 느끼게 되었습니다. 개발자마다 import구문을 추가하는 방식과 순서가 다르다 보니 가독성이 많이 떨어졌기 때문입니다. 그래서 import 구문을 lint로 잡고자 eslint-plugin-import를 찾아 도입하게 되었습니다. eslint-plugin-import? eslint-plugin-import의 GitHub을 보면 다음과 같이 설명하고 있습니다. This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths..
-
Redux Toolkit으로 상태 관리 하기Frameworks, Platforms and Libraries/React 2023. 8. 20. 16:40
도입하여 사용한지는 꽤 됐지만 현재 도입하여 사용 중인 상태 관리 기술 스택 중 하나인 Redux Toolkit에 대해 이야기하려고 합니다. 기존에 Redux를 사용하며 겪었던 여러 이슈들이 있었습니다. 복잡한 환경설정, 추가로 설치해야 하는 수많은 서드파티 라이브러리, 불어 나는 Boilerplate 등 Redux를 제대로 쓸려면 꽤나 많은 부분에 대해 신경을 써야 했습니다. 하지만 Redux Toolkit이 나와 도입을 하면서 이런 점들이 많이 해소될 수 있게 되었습니다. Redux Toolkit 셋업 ※ Redux Toolkit을 RTK로 줄여서 명시하며 TypeScript 환경에서 예시를 보이겠습니다. store부터 구성해보겠습니다. RTK에서 제공하는 configureStore를 이용하여 구성하..
-
GraphQL Code GeneratorLanguages/GraphQL 2023. 8. 15. 16:46
이전 GraphQL 포스팅에서 언급되었던 Code Generator에 대해 소개하려고 합니다. Code Generator은 BE에서 설계된 데이터 모델링을 GraphQL 스키마를 기반으로 TypeScript로 가져오기 위해 사용합니다. Code Generator의 이점 1. 설계된 데이터 모델링을 찾아보는데 편합니다. 어떤 필드를 가지는지, 그리고 그 타입이 무엇인지 등 확인할 수 있습니다. graphiql을 사용하는 것보다 generator로 스키마를 직접 확인하는 게 편합니다. 2. 차후에 GQL을 통해 가져온 데이터들을 타입 체킹 하는 데 사용합니다. Code Generator 셋업 1. Installing Codegen npm install graphql @graphql-codegen/cli @g..