어제 우분투 20.04 를 올린 후 발생한 문제들에 대해서 짚어보기로 한다.

 

1. mysql 8 로 업그레이드 되면서 일부 config 제거 (cache_* 등이 먹히지 않았다.)

2. mysql strict mode가 켜짐

3. mysql 8에서 password function 이 제거되었고 groups keyword를 사용할수 없음

-> PASSWORD 로 처리된 부분들을 아래와 같이 처리하면 된다.

password = CONCAT('*', UPPER(SHA1(UNHEX(SHA1(:password)))))

4. php7.4 에서 Object class를 쓸수없음. "new Object" 또는 "extends Object" 로 된 부분들을 모두 BaseObject 로 바꿔주어야 함

-> 아래 명령어로 일괄 치환이 가능하다.

find ./ -name "*.php" -exec sed -i 's/new Object/new BaseObject/g' {} \;
find ./ -name "*.php" -exec sed -i 's/extends Object/extends BaseObject/g' {} \;

5. 설치만 해두고 안쓰던 서비스들이 죄다 재설치되면서 살아나면서 사용중인 서비스들과 포트충돌이 일어난다. --;;

기존에 포트가 충돌되는 서비스들의 포트를 변경해주거나 미사용 서비스들을 제거하여 충돌을 풀어준다. 

 

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

 

Release v5.1.0 · ReactTraining/react-router

Read the blog post List of commits Features Add useParams, useLocation, useHistory, and useRouteMatch hooks (d6224d6) Add support for forwardRef in (b5528ed) Add support for functions in <l...< p=""> </l...<>

github.com

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/

 

패키지 매니저로 Node.js 설치하기 | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

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

"endOfLine":"auto" 를 .prettierrc 에 넣어준다.

그러면 우측에 세로로 빨간줄이 전체 뜨던게 싹 사라짐. ㅎㅎ 

 

출처: https://stackoverflow.com/questions/53516594/why-do-i-keep-getting-delete-cr-prettier-prettier

이제 은행앱이나 오프라인 종이통장이 아닌 편리하고 실속있는 토스앱에서 금융자산을 관리하세요 ^^

아래 링크를 통해 가입시 3,000원이 지급됩니다. 아직 가입안하셨다면 서두르세요!!

 

toss.im/_m/7k99dmc4

 

3,000 원을 드려요

신규회원이라면 초대장으로 가입 시 바로 지급!

og.toss.im

 

+ Recent posts