내가 레퍼런스가 되자 내가 레퍼런스가 되자

기존에 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 2 버전을 쓰는 경우 TypeScript의 도입이 매끄럽지 않지만 TypeScript와 같이 사용하기 위하여 Vue.extend()를 사용하여 객체로 만들어 사용하는 방법과 Class Component 형태로 만들어 쓰는 두 가지 방법 중 하나를 선택하여 사용합니다. 현재 운영 중인 Vue.js기반의 application의 경우는 이 중에서 Class Component로 만들어 사용하고 있으며 Decorator를 좀 더 활용하기 위해 추가로 라이브러리를 이용하여 구성했습니다. 그래서 어떻게 Decorator를 이용하여 Vue Class Component를 어떻게 구성했는지 소개하려고 합니다. Vue Class Component Example 기본적인 Vue Class Component 형태..

작업 중 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와 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에 대해 이야기하려고 합니다. 기존에 Redux를 사용하며 겪었던 여러 이슈들이 있었습니다. 복잡한 환경설정, 추가로 설치해야 하는 수많은 서드파티 라이브러리, 불어 나는 Boilerplate 등 Redux를 제대로 쓸려면 꽤나 많은 부분에 대해 신경을 써야 했습니다. 하지만 Redux Toolkit이 나와 도입을 하면서 이런 점들이 많이 해소될 수 있게 되었습니다. Redux Toolkit 셋업 ※ Redux Toolkit을 RTK로 줄여서 명시하며 TypeScript 환경에서 예시를 보이겠습니다. store부터 구성해보겠습니다. RTK에서 제공하는 configureStore를 이용하여 구성하..

이전 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..

GraphQL은 REST API와 달리 클라이언트단에서 Query와 Mutation을 작성하여 호출합니다.(덕분에 Frontend에서 처리해야 할 작업이 많습니다...) 기존 REST API는 URL과 Method를 조합해 다양한 Endpoint가 있는 반면 GQL은 하나의 Endpoint을 가지기 때문에 Endpoint에 따라 DB SQL 쿼리가 달라지지 않고 GQL 스키마의 타입에 따라 쿼리가 달라집니다.(GQL 스키마의 타입을 GQL Code Generator을 통해 Front로 가져와 확인하는 것이 편합니다.) 그래서 GQL의 장점인 한 번의 API 호출로 여러 처리가 가능합니다. Query & Mutation GQL에선 Query와 Mutation으로 나누는데 구조는 비슷합니다. 다만 Query..

Vue.js legacy 코드를 React로 porting 하면서 기존에 사용 중이던 video.js에서 warning이 뜨는 현상이 발견되었습니다. The YouTube player is not attached to the DOM. API calls should be made after the onReady event. 디버깅을 하다 보니 video.js를 Cleanup 하는 상황에서 해당 warning이 발생하였습니다. ... const videoPlayer = useRef(null); useEffect(() => { videoPlayer.current = videojs(video.current!, options()); return () => { if (videoPlayer.current) { // ..