React

Property ‘xxxx’ does not exist on type ‘MyComponent’

P

class MyComponent extends Component<Props,States> {
constructor(props: Props) {
super(props);
this.spells = 'abc'
}
}

javascript였다면 spells를 추가하는게 문제가 안되는데, typescript에서는 내 맘대로 프로퍼티를 추가하면 안된다. MyComponent라는 타입에다가 먼저 spells라는 프로퍼티가 들어갈것이라고 알려줘야한다.

class MyComponent extends Component<Props,States> {
constructor(props: Props) {
super(props);
this.spells = 'abc'
}
}

Uncaught Error: Maximum update depth exceeded

U

배경설명 reactreact-routergraphqljwt 관리자 사이트에 들어갈때, 로그인을 해야만 들어갈 수 있게 한다. localStorage에 로그인 정보가 없으면, login페이지로 넘어가도록 한다. 문제상황 처음에 myAdmin.com/ 요기가 Admin page, myAdmin.com/login 요기가 login page다. /로 들어왔을때 로그인 정보가 없으면 /login으로 redirect 시켰다. 그런데 다음과 같은 에러가 나왔다. Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or...

JSX element type ‘Component’ does not have any construct or call signatures.

J

문제상황 export namespace VC { ... export interface AuthRouteProps extends RouteProps { authenticated: boolean } ... } import React, { FC, ReactElement } from "react"; import { Route, Redirect } from "react-router-dom"; import { VC } from "../../types"; const AuthRoute: FC<VC.AuthRouteProps> = ({ authenticated, render, component: Component, ...rest }): ReactElement => { return ( <Route {...

Reduxtoolkit : INTERMEDIATE TUTORIAL

R

원문 : 주의 : 제가 이해하기 쉬운 방식으로 번역 및 첨언했습니다. 이전글 : 이번 글에서는 original Redux Todo App을 Redux-Toolkit을 사용한 Todo App으로 바꿔보면서 Redux-Toolkit의 사용법을 익혀볼것이다. Reviewing the Redux Todos Example original Redux Todo App을 보면 아래것들을 발견할 수 있다. todos reducer function 은 state의 불변성을 유지하기 위해서 "직접" object를 deep copy하고있다.actions file 에서 action 생성자 함수를 "직접" 작성하고 있다. 또한, aciton의 type을 string으로 "직접" 적어주고 있으며, 다른 파일에서 도 중복으로...

Redux-Toolkit : Basic Tutorial

R

원문 : 주의 : 제가 이해하기 쉬운 방식으로 번역 및 첨언했습니다. Introduction: Writing a Counter Application Redux "Counter-Vanilla" Example function counterReducer(state, action) { if (typeof state == 'undefined') { return 0 } switch (action.type) { case 'INCREMENT': return state + 1 case 'DECREMENT': return state -1 default: return state } } var store = Redux.createStore(counterReducer); document...

Module not found: Error: Can’t resolve ‘object-assign’

M

문제상황 webpack.config.js const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const join = require('path').join; module.exports = { entry: join(__dirname, '/src/index.tsx'), devtool: 'source-map', output: { filename: "main.js", path: join(__dirname, '/dist'), }, module: { rules: [{ test: /\.(ts|tsx)$/, exclude: /node_modules/...

Create React App없이 React + Typescript 환경설정

C

NPM npm init 이것저것 설치하기 (스크롤을 많이 내리다 보면, 한번에 설치하도록 코드를 작성해 놓았습니다. 일일이 복붙 할 필요 없습니다.) Webpack webpack / webpack-cli webpack을 쓰려면 당연히 필요하니까, webpack과 webpack-cli모듈을 설치해준다. npm install --save-dev webpack webpack-cli webpack-dev-server local 환경에서 편하게 테스트해보려면 필요하다. npm install --save-dev webpack-dev-server typescript typescript -> javascript 변환해주는 typescript모듈이 필요하다. npm install --save-dev typescript...