본문 바로가기

Language & Library/React13

모노레포에서 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.
[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.
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.
[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.
React의 Virtual DOM(VDOM)과 Diffing 알고리즘 DOM 이란? DOM은 The Document Object Model의 약어로 직역하자면 문서 객체 모델 입니다. 즉, DOM은 HTML을 객체로 표현한 것이며 외부(JavaScript)와 접속할 인터페이스 입니다. html로 작성된 코드는 HTML 파서에 의해서 DOM이라는 객체가 모인 트리로 변환 됩니다. (DOM 트리) Virtual DOM 이란? React 공식 홈페이지에서 Virtual DOM은 아래와 같이 표한하고 있습니다. "UI로 표현될 객체를 가상 메모리에 저장하고 라이브러리에 의해 실제 DOM으로 동기화 하는 개념" 여기서 UI로 표현될 객체는 DOM을 말하며 라이브러리는 VDOM을 랜더링해주는 ReactDOM같은 것을 말합니다. * 참고 : 바로가기 Virtual DOM의 이점 Rea.. 2020. 9. 9.
"Parsing error: Unexpected token =eslint" 에러 CRA(create-react-app)의 package.json 설정으로 해결 증상 ESLint에서 구문 체크 중 "Parsing error: Unexpected token =eslint" 에러 발생 원인 ESLint가 ES6 ~ 7 파싱할때 위와 같은 문제가 발생할 수 있음. 조치 방법 eslint의 default parser는 Espree 입니다. (Espress는 ES6가 안정화되기 전에 Esprima의 마지막 안정판인 Esprima v1.2.2를 포크해서 시작됨) [https://eslint.org/docs/user-guide/configuring] 따라서 파서를 babel-eslint로 바꿔주면 됩니다. (1) babel-eslint 설치 및 세팅 https://roomedia.tistory.com/entry/%EC%9D%B4%EC%8A%88-9-Parsing-error-.. 2020. 8. 10.
[create-react-app] 다른 host에서 접근하기 (0.0.0.0) node_modules/react-scripts/sripts/start.js를 살펴보면 아래와 같이 되어있어야한다. 예전 버전 create-react-app에는 요런게 없다. JS 문법으로다가 환경 변수 체크해서 없으면 '0.0.0.0' 으로 들어감 근데 요게 예전에는 localhost가 박혀 있었음. (https://github.com/facebook/create-react-app/pull/128/commits/55b93b4002562ccf8fbd6d4034db9bd9a2162a4c) 적용된 create-react-app 버전은 귀찮아서 안찾아봤고 아래와 같이 .env 파일에 HOST 환경 변수를 추가해주면 다른 호스트에서도 접근 가능하다. HOST=0.0.0.0 2020. 5. 18.
create-react-app 쓰지 않고 webpack으로 React 앱 만들기 (3) webpack config 설정하기 const path = require('path'); module.exports = { mode: 'development', // 'production' devtool: 'eval', // hidden-source-map resolve: { extensions: ['.js', '.jsx'], }, // 타겟이 되는 파일 entry: { app: './client', }, // load 할 모듈 module: { rules: [{ test: /\.jsx?/, loader: 'babel-loader', options: { presets: [ ['@babel/preset-env', { targets: { browsers: ['> 1% in KR', 'last 2 chrome.. 2020. 3. 10.
create-react-app 쓰지 않고 webpack으로 React 앱 만들기 (2) 기본 소스 코드 작성 (Hello React & Webpack) JS 파일을 load 할 페이지 생성 (./index.html) ./dist/app.js이 webpack의 결과물이다. 해당 파일을 load하는 소스 코드 html에 react를 랜더링하는 소스(./client.jsx) const React = require('react'); const ReactDom = require('react-dom'); const { hot } = require('react-hot-loader/root'); const HelloReact = require('./HelloReact'); const Hot = hot(HelloReact); ReactDom.render(, document.querySelector('#ro.. 2020. 3. 10.

티스토리툴바