코린이[코딩 어린이]

You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '?' at Line 1

위 에러 내용은 기본적인 문법 오류입니다.

그런데 이번에 위 오류가 특이한 상황에 떠서 적은 내용입니다.

sql

const _sql = `UPDATE messages SET read='1', updatedAt='${new Date()}' WHERE _id='${_id}';`;

위처럼 ''가 잘못되거나 오타가 있는 내용이 아니었습니다.

그런데... 칼럼 중에 read라는 칼럼을 사용하고 있었는데, 생성할 때, 불러올 때는 전혀 문제가 없었는데 UPDATE를 사용하려고 하니까 계속해서 위 에러 구문이 나오는 상황이었습니다...!

read라는 예약어가 있었던 것 같습니다.

뭔가 검색해봐도 없길래 문제없는 줄 알았더니 예약어 목록을 찾아보니 READ라는 이름이 있었습니다..ㅠ

그래서 read의 이름을 바꿔주고 에러를 해결했습니다. 역시 있을법한 이름은 사용하지 않는 것이 좋을 듯합니다.

예약어 목록

MySQL 예약어 바로가기

Uncaught TypeError: Cannot read properties of null (reading 'default')

Uncaught TypeError: null의 속성을 읽을 수 없습니다('default' 읽기)

조금 전까지 잘 되던 NextJS에서 위와 같은 문구의 에러가 뜨기 시작했습니다.

문제는 아래처럼 Image에 null이 들어가기 때문에 발생했던 내용이었던 것 같습니다.

( 특이한 점은 5분 전까지만 해도 잘 작동하던 게 갑자기 작동을 하지 않아서 조금 의아합니다.. ㅠ )

popularData에 내용이 들어간걸 확인 한 이후에 map을 통해 내용을 뿌려줬던 건데.. 

아무튼 null이 먼저 들어간 이후에 내용이 덧씌워져서 생겼던 문제인듯 하여 item.coverImage로 한번 더 감싸주었습니다.

해결방법

// 수정 전
<Image src={item.coverImage} alt={item.title} layout="fill" />

// 수정 후
{
    item.coverImage && <Image src={item.coverImage} alt={item.title} layout="fill" />
}

next-dev.js?3515:20 Warning: Cannot update a component (`Side`) while rendering a different component (`Main`). To locate the bad setState() call inside `Main`, follow the stack trace as described in

NextJS를 작성중 위와 같은 에러가 발생했습니다.

Main을 렌더링하는 동안 Side를 업데이트할 수 없다는 내용 같습니다. 

:: 부모 컴포넌트가 렌더링 될 때, 부모 컴포넌트 안의 자식 컴포넌트에 상태 업데이트를 할당할 때 일어난다고 합니다.

( 이 에러의 이상한 점은 첫 렌더링에서는 버그가 발생하지 않고 라우터를 이동할 때 생겨서 당황했습니다. )

여러 글을 읽어보니 redux를 사용하기 위해 사용했던 useDispatch를 렌더링중에 실행되는 useMemo에서 호출해서 문제가 생겼던 것 같습니다.

그래서 문제점을 해결하기 위해 화면에 렌더링이 완료된 이후에 수행되는 useEffect를 사용을 했더니 문제점이 해결되었습니다.

/* 전 */
const dispatch = useAppDispatch();

const test = useMemo(() => dispatch(), [])

/* 후 */
const dispatch = useAppDispatch();

useEffect(() => {
    dispatch()
}, [])

Firebase Error

FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options).

평소에 잘 사용하던 파이어베이스에 위와같은 에러가 생겼습니다.

NodeJS에서 파이어베이스에서 스토리지를 사용하기 위해 getStorage()를 불러오면서 에러가 발생했습니다.

firebase에서 정보를 긁어오지 못해서 발생한 현상 같습니다.

해결방법

import { fireStorage } from "../config/firebase";
import { getDownloadURL, ref, getStorage } from "firebase/storage";

router.post("/fileAdd", editMulter.array("multipartFiles"), async (req: Request, res: Response) => {
    
    const files: any | Express.Multer.File[] = req.files;

    try {
        const storage = getStorage();
        await getDownloadURL(ref(storage, files[0].path))
        .then((url: any) => {
            res.status(200).json({
                code: "y",
                data: url
            })
        })
        .catch((err: any) => console.log("getDownLoad Err", err));
    }
    catch(err) {
        console.log(err);
    }

});

router.post("/test", async (req: Request, res: Response) => {

    const storage = fireStorage;

});

export default router;

위 코드처럼 firebase storage정보가 담긴 fireStorage;를 호출만 해주었더니 문제없이 실행되었습니다.

app.ts에서 불러올 수 있는지 나중에 확인을 해봐야겠습니다.

ERROR  ~/.vuerc may be outdated. Please delete it and re-run vue-cli in manual mode.

Vue3로 프로젝트를 새로 만드려고 하는데 갑작스레 이런 오류가 발생했습니다.

에러 내용에서 vue-cli가 오래되었다고 해서 vue-cli vue 등등 제거하고, 캐시까지 지우고 나서 다시 깔았는데도 문제는 사라지지 않았습니다.

그래서 .vuerc 파일을 지우고 vue 프로젝트를 생성해보니 정상 작동되는 것을 확인할 수 있었습니다.

해결방법

.vuerc가 있는 폴더로 이동해 .vuerc를 제거 -> 다시 프로젝트 생성합니다.

에러 내용

Error: node_modules/@angular/material/core/index.d.ts:794:21 - error TS2694: Namespace '"/Users/junhyeok/project/new/new-project/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

794     static ɵfac: i0.ɵɵFactoryDeclaration<MatRipple, [null, null, null, { optional: true; }, { optional: true; }]>;

Error: ./src/main.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Unknown import type?
    at Object.reflectTypeEntityToDeclaration (/Users/junhyeok/project/new/new-project/node_modules/@angular/compiler-cli/src/ngtsc/reflection/src/typescript.js:448:23)
    at /Users/junhyeok/project/new/new-project/node_modules/@angular/compiler-cli/src/ngtsc/metadata/src/util.js:34:35
    at Array.map (<anonymous>)
    at Object.extractReferencesFromType (/Users/junhyeok/project/new/new-project/node_modules/@angular/compiler-cli/src/ngtsc/metadata/src/util.js:29:29)

문제 이유

angular version 문제라고 합니다.

angular v11 에서 angular v14로 업그레이드

공식 홈페이지에서 하라던 내용

$ ng update @angular/core@12 @angular/cli@12

CLI 버전이 오래되어서 업데이트 하라던 내용인것 같습니다.

해결 방법

$ npm install -g npm-check-updates

$ ncu -u

$ npm install

버전이 호환되지 않아서 그랬던 내용인것 같습니다.

버전이 올라가면서 옛날 버전과는 호환이 되지 않았던 것인듯 싶습니다. 

새로운 프로젝트를 할 때는 항상 최신 버전으로 하는 방향으로 생각해야 할 듯 합니다.

MySQLWorkbench 다운받으러가기

MySQLWorkbench 응용 프로그램이 예기치 않게 종료되었습니다

Mac을 업데이트 했더니 어제까지 잘 작동되던 workbench가 작동이 되지 않았다.

이것저것 다양한 방법으로 접속을 시도했지만 끝내 실패하고 workbench를 재설치를 했다.

재설치하고 접속하니 수신양호

응용프로그램 --> MySQLWorkbench 삭제 --> Workbench다운로드