오류 노트

1. 모듈을 설치안함
2. css파일을 밖으로 export안함
3. js파일 내부로 css엘리먼트를 임포트안함

//해결:결국 자동으로 import,export해주는 extension을 VSC에 추가했다.

4. npm intall안함
5. import에 문제가 있으면 이런 문구를 보게됨
   Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

//해결:아래의 문구를 index파일에 추가하면 모든 요소들이 불러와짐.
import * as All from './layout';
3. 선언안하고 태그지정하면 아래의 오류메세지를 볼것.

ReferenceError: Main is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.

6. 엘리먼트에 flex박스 설치안함
7. 돔사용법할당과 그 돔을 선언하는걸 동시에 했을 때 보이는 에러문구

Server Error

ReferenceError: document is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.

8. useState에 초기값을 0000으로 난사했더니 나오는 오류.

“0000”으로했더니 괜찮아졌다.

ModuleBuildError

:

Module build failed (from ./node_modules/next/dist/build/webpack/loaders/next-swc-loader.js):
Error: error: Legacy octal escape is not permitted in strict mode

./pages/quiz/02-state-quiz/number.js
Error: error: Legacy octal escape is not permitted in strict mode

  |
4 |     const [number,setNumber] = useState(000000);
  |                                         ^^^^^^

Caused by:
    0: failed to process js file
    1: error was recoverable, but proceeding would result in wrong codegen
    2: Syntax Error

9. padStart는 string 타입에만 적용된다.

10.가끔 알수 없는 오류로 코드에 문제가 없어보이는데도 페이지에 오류가 뜰때가 있는데, 오류메세지에 모듈어쩌고가 있다면 대부분 버전문제이거나, 필요한 기능을 install하지 않아서이다. 그럴 시에 해당폴더에 있는 package.json파일로 가서 필요한 모듈과 버전을 수정해주도록 하자. 그후 터미널에서 install하면 정상적으로 작동된다.

10. radio buttn에 onchecked여부에 따라 게시물업로드가능 상태를 지정하던 도중에 만난 오류.
    대충 onchange hendler를 주지말고 form에 prop을 사용하여 처리하라는 뜻 같다.
    (오류메세지 너무 친절하다,..) radio태그에 chencked={}이 속성안에 맞지 않는 무언가를 부여한게 문제인거같은데 mdn을 살짝보고 오니 checked는 dom이 아니라 css관련 속성이었던 모양이다.
    좀찝찝하긴하지만 아직 안 배우지 않은 내용이므로 onChange로 대신하기로 했다.

react-dom.development.js?61bb:67 Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`.