Huzy의 블로그. IT/재테크/게임!

https://github.com/ReactTraining/react-router/releases/tag/v5.1.0

PathVariable 을 받을 때 match 값을 hook으로 받을 수 있게 react router v5에서 추가되었다.

아래와 같이 사용하면 된다.

import { useRouteMatch } from 'react-router-dom';

const Component = () => {
	const { params }: any = useRouteMatch();
    
    // /path/:idx
    return (
    	<div>{params?.idx}</div>
    );
};

export default Component;

input 에 focus 를 주기 위해, ref 설정을 하고 focus 를 주었는데, "Object is possibly 'null'" 오류가 계속 발생한다.

if 조건문으로 한번 감싸 주었는데도.. 그래서 아래와 같이 tsconfig.json 을 수정해주었다.

// tsconfig.json
{
	...
    "strictNullChecks": false,
    ...
}

React.js 에서 비동기 요청 등의 동작 이후 응답/set state 가 되기 전에 해당 컴포넌트가 unmount 되면서 set state 오류가 나는 경우가 있다. 그럴때는 아래와 같이 해주면 된다.

const mounted = useRef(false);

useEffect(() => {
	mounted.current = true;
    () => {
    	mounted.current = false;
    }
}, []);

const fetch = async () => {
	const res = await fetch();
    if (!mounted.current) {
    	return;
    }
    
    // now mounted. do something else
};

array state 의 index 개수 변동이 없을때에는 re-render가 일어나지 않는다.

이럴때에는 새로운 array 로 set state를 해주면 된다.

const arr = [1, 2, 3];

setArray([...arr]);

프로젝트 구성후 css import 시에 위와 같은 오류 발생시, 구글링을 해본 결과 nodejs 버전이 낮을 경우 발생을 한다.

nodejs 를 업데이트 해준 후 서버를 재시작 해주면 정상 동작한다. windows 경우에는 nodejs 에서 installer 로 업데이트 해주면 된다.

Update to : node version 14.6.* this should resolve it.

https://nodejs.org/ko/download/package-manager/

출처: https://laracasts.com/discuss/channels/laravel/npm-run-dev-problem-in-fresh-laravel-project

Old question, but found myself asking the same thing. How to intercept res render? Using express 4.0x something now.

You can use/write middleware. The concept was a bit daunting to me at first, but after some reading it made a little more sense. And just for some context for anyone else reading this, the motivation for overriding res.render was to provide global view variables. I want session to be available in all my templates without me having to type it in every res object.

The basic middleware format is.

app.use( function( req, res, next ) {
    //....
    next();
} );

The next param and function call are crucial to execution. next is the callback function, to allow multiple middleware to do their thing without blocking. For a better explanation read here

This can then be used to override render logic

app.use( function( req, res, next ) {
    // grab reference of render
    var _render = res.render;
    // override logic
    res.render = function( view, options, fn ) {
        // do some custom logic
        _.extend( options, {session: true} );
        // continue with original render
        _render.call( this, view, options, fn );
    }
    next();
} );

카테고리CSS 값예제설명일반링크와 상태선택드래그 앤 드롭크기 조절과 스크롤확대와 축소

const isJson = (str: string) => {
  try {
    const json = JSON.parse(str);
    return json && typeof json === 'object';
  } catch (e) {
    return false;
  }
};