yebeen blog

[ JavaScript ] Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "text/html" 해결하기

'한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지'라는 강의를 들으면서 마주했던 문제이다.순수 자바스크립트로 SPA를 구현하면서 마주한 문제이다. 분명 다 맞게 작성했다고 생각했는데 실행 후 개발자모드로 콘솔을 보면 제목과 같이 MIME 타입 오류가 발생했다. 이전에 실습한 내용이랑 내용이 일치했기 때문에 더욱 미궁이었다. 원인결과적으론 모듈을 import할 때 확장자명을 붙이지 않아서 일어난 에러였다.리액트에서는 모듈 import 시 .js나 ./를 생략해도 문제가 발생하지 않았기에습관적으로 import 할 모듈 이름만 적고 엔터를 눌러 자동완성을 시켰다.그런데 이 자동완성에선 확장자를 붙여주지 않는 것이었다.... 하지만 순수 자바스크립트에서 모듈 import 할 때에는 리..

영화 정보를 가져와서 map함수를 이용해 뿌리기 위해 아래와 같이 코드를 짜고있었다. 그런데 난데없이 TypeError라며 movieList.map is not a function이라는 에러가 발생했다. const readMovieList = async ()=>{ const json = await( await fetch(`https://yts.mx/api/v2/list_movies.json?minimum_rating=8&sort_by=year`) ).json(); setMovieList(json); setLoading(false); } /////////////////// {movieList.map((movie)=>)} 이유가 뭘까 곰곰히 생각해보다가 movieList 데이터에 문제가 있어서 map이 제대..

callback - 다른 함수의 실행이 끝난 뒤 실행되는 함수 ( 매개변수 값으로 들어가는 함수이기 때문 ) - 코드를 통해서 호출되는 게 아니라 등록만 해놓고 어떤 이벤트가 발생하거나 특정시점에 도달했을 때 시스템에서 호출하는 함수 js에서 사용하는 이유 - 이를 사용하면 비동기적 프로그래밍을 할 수 있기때문 - js는 싱글 스레드를 이용하기에 요청에 대한 답이 없으면 다음 작업으로 넘어갈 수 없다는 문제가 있는데 이를 해결하기 위해 사용 즉 blocking을 방지하여 싱글 스레드가 nonBlocking으로 동작하게 한다. 비동기 처리가 가능한 이유 - js는 이벤트 루프만 실행하지 않고 웹 브라우저나 node.js 같은 멀티 스레드 환경에서 실행되기에 동시성을 보장하는 비동기 작업은 js 엔진을 구동..

Canvas api = js로 그래픽 작업을 할 수 있도록 해주며 html 상에서 를 입력한 후 js에서 이를 가져와 그래픽 작업을 할 수 있다. [ 시작 전에 해야할 일 ] canvas.getContext()를 통해 2d와 3d 상의 브러쉬를 가져오기 canvas.width , canvas.height 설정하기 오늘은 2d에 대해 적어볼까한다. [ 도형 그리기 ] 특정 도형을 그리기 위해서는 1. 그리고싶은 위치 잡기 2. 선을 잇기 3. 해당 도형은 단지 선으로만 연결할 지 선만으로 이루어지게 할지 결정하기 크게 이 3단계를 거친다. [ 과정 ] 1단계 canvas상의 좌표는 왼쪽 상단이 (0,0)이다. moveTo(x,y)라는 함수를 통해 시작 점을 찾는다. 2단계 lineTo(x,y)라는 함수를 ..

상황에 따라 css 변경하고 싶을 경우 css 파일에 작성을 해놓고 특정 class를 삽입하거나 삭제해 css를 적용하거나 적용하지 않을 수 있다. 클래스를 추가하고 삭제하는 방법은 classList, className 이 두가지를 이용해 가능하다. ☞ className의 경우 클래스명을 추가시에 ☞ classList.add()의 경우 클래스명을 추가시에 className // html -> const h1 = document.querySelector("screen-header") //h1의 className, 즉 screen-header pink-background가 출력된다. console.log(h1.className) // h1이 가..

[ Event 실행법 ] addEventListener 사용하기 //변수에 eventname에 해당하는 이벤트가 발생할 경우 선언해놓은 함수가 실행된다. function 함수명(){} 변수명.addEventListener("eventname",함수명); onEventname 사용하기 //변수에 EventName에 해당하는 이벤트가 발생시 선언해놓은 함수 실행 function 함수명(){} 변수명.onEventName = 함수명; [ Event 종류 ] click event - 무언가 클릭되었을경우 mouseenter event - 마우스가 해당 요소내에 있을경우 mouseleave event - 마우스가 해당 요소내에서 나간경우 resize event - 화면크기를 조정한 경우 copy event - 무..

Id로 가져오기 //document란 html을 가르키는 객체 //id가 firstname인 element를 불러온다. const name = document.getElementById("firstname"); class명으로 가져오기 //class 이름이 username인 element를 불러온다. const name = document.getElementByClassName("username"); Tag명으로 가져오기 ex. h1, div 등등... //h1 tag를 가진 element를 불러온다. const name = document.getElementByTagName("h1"); selector로 가져오기 //div 속 class이름이 username인 element를 불러온다. const na..

[ 데이터 타입 ] - 정수형 / 실수형 / boolean / null / String [ 데이터 타입 확인 ] - typeof() [ 데이터 타입 변환 ] 문자열 -> int 로 변환 parseInt(); 문자열 -> double 로 변환 parseDouble(); ∴ 만약 바꿀 수 없는 데이터 타입이라면 NaN이 출력 [ 데이터의 NaN 확인 ] isNaN() 사용 -> NaN값일 경우 true 반환 ∴ NaN - Not a Number

[ 배열 선언 ] 같은 데이터타입이 아니거나 변수 이름 자체여도 가능 const name = "yebeen"; const array = [3,"hi",name]; //yebeen 출력 console.log(array[2]); [ 배열 추가 ] 배열의 맨 끝에 값 삽입하기 - .push(); const name ="yebeen"; const array = [3,"hi",name]; array.push("bye"); // array -> [3,"hi",name,"bye"] 배열의 맨 앞에 값 삽입하기 - .unshift() const name ="yebeen"; const array = [3,"hi",name]; array.unshift("bye"); // array -> ["bye",3,"hi",name]..

객체 선언 방법 const 객체이름 = { //변수선언 변수명 : 변수값; //함수선언 함수명 : fucntion (){}; } 객체에 선언된 변수에 접근하는 법 1) 객체명.변수명 2) 객체명["변수명"]