데브코스 til 17,18 - 마주친 버그종류 && 노션클로닝 프로젝트에 들어가면서..

조주영·2021년 8월 26일

TIL 데브코스

데브코스-TIL

목록 보기

18/34

🧑‍💻배운것:

그동안의 배웠던 지식을 바탕으로, 필요에 따라 api를 호출하면서 todoList, totoApp 을 만들었다.
코드는 강사님의 코드가 대부분이라 공개가 어렵다ㅠ 사실 배운내용이 거기안에 다 있는데 포스팅에 담지 못해 아쉽다.

그래서 오늘은, 브라우저 환경에서 마주칠 수 있는,
(진짜 ~~bug(벌레)~~를 마주친 기분이 드는)
내가 경험했었던 버그에 대해 알아 보려고 한다.

🚨마주친 버그🚨

🚨첫번째 버그

Uncaught TypeError: is not a function

함수가 아니다????? TYPE에러???? 내가 함수를 썼는데 함수가 아니라니?

원인:

무조건 내 잘못이다. 함수 내에 오류가 발생하는 코드가 있을때 발생한다.

나의경우:

현재상태를 받아 map()을 써 mapping을 하려고 하는데, 자꾸 이 오류가 떴다.

해결방법:

내가 mapping하려는 대상은 map()을 쓸 수 있는 배열이 아니었다.
배열의 상태로 map에게 넘겨 줘야 한다.

ex)
this.state.map(어쩌구) =>  Uncaught TypeError!
this.state.array.map(어쩌구) => 해결```

그외에도

map 함수안의 로직이 잘못되었거나,
함수명을 겹치지 않게 사용하거나,
할때도 오류가 난다고 한다.
어디서 오류가 뜨는지 log로 출력해보면서 확인해보아야 한다.

🚨두번째 버그

Uncaught SyntaxError: Unexpected reserved word

기대하지않은 단어?? 뭔 소리지;;

원인:

또 무조건 내 잘못이다. 써야할 단어를 뺴먹었을때 나온다.

나의경우:

비동기 처리를 위해 async await 방식으로 처리 하려는데, 이 오류가 떴다.

해결방법:

async키워드를 앞에 안붙혔다.....
빼먹은
async키워드를 앞에 붙히면 됩니다.

ex)
const request =  (url,options={})=>{
       const res =await fetch(어쩌구) } 
       =>Uncaught SyntaxError 발생!!!
해결:
const request = async (url,options={})=>{
       const res =await fetch(어쩌구) } =

그외에도

써야할 키워드를 빼먹으면 이렇게 된다.
빼먹지 말고 꼭 쓰자

🚨세번째 버그

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

버그내용도 길어서 다 읽지도 않았다. module load가 실패?

원인:

또또 무조건 내 잘못이다. import 해올때, 뒤의 확장자명인 (.js .html)등을 안붙혀서 그렇다.

나의경우:

모듈을 배웠으므로, 적용시키기위해 export import를 해왔는데 안되서 키보를 있는 힘껏 첬다.

해결방법:

확장자 명을 제대로 써주자.

ex)
import PostsPage from "./PostsPage." =>Failed to load module script!
해결방법:
import PostsPage from "./PostsPage.js"

그외에도

경로를 제대로 지정안해도 그렇다. 나의경우, 앞의 ./를 빼먹어 이런적도 있었다...

ex)
import PostsPage from "PostsPage." =>Failed to load module script!
해결방법:
import PostsPage from "./PostsPage.js"

🚨네번째 버그

uncaught syntaxerror: invalid shorthand property initializer

하 뭐가 짧다고??~

원인:

또또 무조건 내 잘못이다. '='가 들어갈 자리에 ':' 가 들어가거나, 그 반대의 경우거나다.

나의경우:

객체는 ':'를 써야하는데 '='를 쓰고 왜 안되냐고 컴퓨터한테 화낸다.

해결방법:

제대로 매칭시켜주자.

ex)
    const postEditPage = new PostEditPage({
        initialState= {  !!!오류발생!!!!
            posdtId: 'new',
            post: {
                title: '',
                content: '',
해결방법:
initialState= { 를  이렇게 initialState: {