Language & Library31 [Vue] TypeError: sub is not a function 에러 개요 최근 Vue 기반의 서비스 개발 중 아래와 같은 에러가 발생하였다. TypeError: sub is not a function 원인 Vuex 3.1 미만의 버전과 Vue DevTools를 같이 사용하면 오동작을 한다고 합니다. 제가 개발하던 프로젝트는 Vuex 3.0.1 버전을 사용하고 있었습니다. sub is not a function error if vuex dispatch is calling · Issue #1686 · vuejs/devtools Version 6.0.2 Reproduction link https://codesandbox.io/s/535kx57jpx Steps to reproduce Open vue tab in devtools. Call vuex dispatch method W.. 2023. 1. 19. 모노레포에서 NEXT.js 사용 시 Module parse failed: Unexpected token 에러 발생 증상 ../common-styles/src/index.ts Module parse failed: Unexpected token (37:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | backgroundSkeleton, | }; > export type { DesignColorSystem, ButtonTheme, ButtonThemes, Theme }; | 모노레포를 구성하였고 그 중 Next.js를 기반으로 동작하는 A라는 패키지가 있고 해당 패키지는 co.. 2022. 8. 29. (TypeScript) 조금 더 우아하게 Union Literal Types 체크 방법 👋 개요 현직장에서 프로젝트가 바쁘다는 핑계로 미루어 두었던 포스팅을 해보려고 합니다. (벌써 1년이나;;) 현재 개발 중인 FE 서비스는 NextJS와 TypeScript를 기반으로 개발 중 입니다. TypeScript에서는 특정 상수를 타입으로 정의 하는 방법이 몇가지 있고 그 중 다른 언어들과 같이 열거형(ENUM)을 지원해 주지만 저는 Literal Types Union을 사용하는 것을 선호합니다. (그 이유에 관한 글 첨부합니다. TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.) 🤨 Literal Types을 Union하여 사용하는 경우 type UserStatus = 'NORMAL' | 'WITHDRAW' | 'UNKNOWN'; // 일.. 2022. 7. 26. [NEXT.js] 빌드 시 ERR_INVALID_ARG_TYPE 오류, 빌드 시 Freezing 증상 개요 최근에 Next.js를 빌드하는데 아래와 같이 더 이상 동작하지 않는 Freezing 증상이 발견되었다. ❯ yarn build info - Checking validity of types 이상하다 싶어서 next build 옵션 중 린트 제외 옵션(--no-lint)을 실행해보니 ERR_INVALID_ARG_TYPE 오류가 발생했다. 아래는 오류메세지와 빌드 환경이다. [ 환경 ] node version: 14.18.2 next@12.0.10 react@18.0.0-rc.0 react-dom@18.0.0.-rc.0 [ 오류 메세지 ] info - Collecting page data ..internal/validators.js:124 throw new ERR_INVALID_ARG_TYPE(name.. 2022. 5. 25. Storybook에서 Failed to execute 'createElement' on 'Document' 에러 발생 🤔 증상 svg 파일을 로드하는 컴포넌트를 Storybook에서 불러왔으나 위와 같은 메세지가 발생하였다. 바쁘신 분은 바로 😀 조치 사항 확인 🧐 원인 1. svg 파일 로드를 위한 패키지 설치 webpack에서 svg 파일을 로드하기 위해서 아래 패키지를 설치하였다. npm install -D @svgr/webpack # 또는 yarn add -D @svgr/webpack 2. 기존의 storybook의 main.js의 webpack 설정 소스 코드 svg 파일을 로드하기 위해서는 webpack 설정이 선행 되어야하고 본인은 아래와 같이 설정하였음. module.exports = { webpackFinal: async (config) => { config.module.rules.unshift({ te.. 2021. 9. 8. yarn-deduplicate로 번들 사이즈 줄이기 이번에 토스 컨퍼런스에서 발표한 이한님의 'Bundle Diet' 영상을 보고 일부를 적용해 보기로 하였다. 그 중 제일 빠르게 적용 가능한 yarn-deduplicate를 사용하여 bundle 사이즈의 크기를 줄여보려고 한다. ⚽️ yarn-deduplicate 설치 npm install -g yarn-deduplicate # 또는 yarn global add yarn-deduplicate 🏀 yarn-deduplicate 적용 명령어 cd 프로젝트_경로 yarn-deduplicate yarn.lock ⚾️ 적용 전 후 번들 사이즈 비교 [ 적용 전 ] [ 적용 후 ] 🥎 결론 및 간략한 분석 내용 청크 파일에서 미비하지만 4kb의 이득을 얻었다 😅 yarn-deduplicate 적용 명령어를 수행한 .. 2021. 6. 9. Recoil SelectorFamily의 파라미터 사용 중 인덱스 시그니처 오류 발생 (with TypeScript) 🥲 문제 발생 코드 interface ListParam { page?: number; pageSize?: number; orderBy?: "DESC" | "ASC"; sortBy?: string; total?: boolean; } type Param = ListParam; export const listQuery = selectorFamily({ key: "listQuery", get: (param) => async () => { const { data } = await getList(param); return data; }, }); Data는 API 요청 후 반환되는 데이터 타입입니다. Param은 Recoil의 파라미터에 들어갈 타입 입니다. getList 함수는 api를 호출하는 함수 입니다. 🤨 .. 2021. 6. 9. Recoil로 파라미터가 포함된 비동기 데이터 쿼리호출 (with TypeScript) 개요 Recoil로 비동기 데이터 쿼리를 호출 할 때 파라미터 유무에 따른 예제를 공유합니다. 전체적으로 코드에서 import 는 제외 하였습니다 🎃 파라미터가 필요 없는 경우 recoil의 selector를 이용해서 아래와 같이 비동기 데이터 쿼리를 호출 할 수 있습니다. 💁🏼♂️ 코드 예제 interface Data { data1: string; data2: number; data3: boolean; } type Response = AxiosResponse; const getData = (): Promise => axios.get('example.com/data'); const asyncDataQuery = selector({ key: 'asyncDataQuery', get: async () => .. 2021. 6. 2. Recoil의 설치 및 기본 개념 🥸 Recoil은 왜 개발 했을까? 호환성 & 단순함 측면을 봤을때는 다른 상태 관리 라이브러리 보다 React 자체에서 제공해주는 상태 관리 기능을 사용하는 것이 좋습니다. (useState 라던지…) 하지만 React도 한계가 있습니다. (미친듯이 거대한 상태 트리라던가… 미친 랜더링을 야기할 수 있다… 무서웡…) 그럼 어떤 장점이 있을까? Native하다! (동시성 모드 같은 새로운 React 기능들과 호환 가능!… 내가 동시성 모드를 잘모른다는건 함정;;) 사용하는데 간편하다 (hooks 사용자라면 더더욱!) ⚙️ 설치/세팅 방법 1. 설치 잘쓰는게 어렵지! 설치 방법은 쉽다! 🥲 당연히 프로젝트 Root 디렉토리로 이동한 후 아래 명령어를 실행해준다 Recoil은 계속 개발 중입니다! night.. 2021. 5. 25. Yarn 온라인/오프라인, 캐시 유/무로 의존성 패키지 설치 시간 단축해보기 테스트 환경 Mac OS : Macbook Pro 2019, I9, 32GB Docker machine : 프로세서 2개, 메모리 4GB Yarn v1.22.5 사용한 packakge.json은 최하단에 위치 offline node package는 미리 준비한 상태 online install은 인터넷을 통하여 node module package를 설치하는 것을 말한다. offline install은 yarn-offline-mirror 와 yarn-offline-mirror-pruning 옵션이 설정 exist cache는 yarn install 시 생성되는 캐시를 제거하지 않은 상태를 말한다. no cache는 yarn cache clean 명령어로 캐시를 제거한 상태를 말한다. 목적 현재 회사에서 개발.. 2021. 4. 30. [Deno Study 1] Getting Started Deno는? Deno는 V8 엔진을 사용하는 Javascript / Typescript를 위한 런타임 입니다. (Rust로 제작됨!) 한마디로 node의 상위 버전이라고 할수있다 Deno의 4가지 특징 안정성(Safety)을 가짐. 사용자가 명시하지 않는 이상 파일, 네트워크 또는 환경에 접근 불가능함. 기본적으로 TypeScript 지원 단일 실행 파일만 제공 의존성 검사(deno info), 코드 포맷터(deno fmt)가 내장되어있음 Deno의 기본 모듈들 (deno.land/std@0.84.0) 설치 MAC만 취급하려고 했는데 윈도우도 설치 쉽더라 # Mac brew install deno # windows in powershell iwr https://deno.land/x/install/inst.. 2021. 1. 25. [TypeScript] React outSideClick Custom Hooks 컴포넌트 밖을 클릭 했을때 callback 함수를 호출하도록 하는 custom hooks import React, { useEffect } from 'react' export function useOutSideClick( ref: React.MutableRefObject, // generic으로 바꿀 예정 handlerCallback: (event?: CustomEvent) => void, ): void { useEffect(() => { // 커스텀 이벤트 선언 const listener = (event: CustomEvent) => { // reference가 없거나 // 클릭한 element가 reference 하위에 속한 element라면 // 함수 종료 if (!ref.current || ref.. 2020. 12. 10. 이전 1 2 3 다음
