본문 바로가기

JavaScript9

[ JavaScript ] TypeError: [].map is not a function 해결하기 영화 정보를 가져와서 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이 제대.. 2023. 7. 14.
[JavaScript] 비동기 호출 - callback, promise, async & await ( 내용 추가 예정 ) callback - 다른 함수의 실행이 끝난 뒤 실행되는 함수 ( 매개변수 값으로 들어가는 함수이기 때문 ) - 코드를 통해서 호출되는 게 아니라 등록만 해놓고 어떤 이벤트가 발생하거나 특정시점에 도달했을 때 시스템에서 호출하는 함수 js에서 사용하는 이유 - 이를 사용하면 비동기적 프로그래밍을 할 수 있기때문 - js는 싱글 스레드를 이용하기에 요청에 대한 답이 없으면 다음 작업으로 넘어갈 수 없다는 문제가 있는데 이를 해결하기 위해 사용 즉 blocking을 방지하여 싱글 스레드가 nonBlocking으로 동작하게 한다. 비동기 처리가 가능한 이유 - js는 이벤트 루프만 실행하지 않고 웹 브라우저나 node.js 같은 멀티 스레드 환경에서 실행되기에 동시성을 보장하는 비동기 작업은 js 엔진을 구동.. 2023. 4. 28.
[ Java Script ] Canvas api 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)라는 함수를 .. 2023. 2. 4.
[JavaScript] Class 삽입 및 수정 / className과 classList 차이점 상황에 따라 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이 가.. 2022. 11. 21.
[JavaScript] Event 실행 및 종류 [ Event 실행법 ] addEventListener 사용하기 //변수에 eventname에 해당하는 이벤트가 발생할 경우 선언해놓은 함수가 실행된다. function 함수명(){} 변수명.addEventListener("eventname",함수명); onEventname 사용하기 //변수에 EventName에 해당하는 이벤트가 발생시 선언해놓은 함수 실행 function 함수명(){} 변수명.onEventName = 함수명; [ Event 종류 ] click event - 무언가 클릭되었을경우 mouseenter event - 마우스가 해당 요소내에 있을경우 mouseleave event - 마우스가 해당 요소내에서 나간경우 resize event - 화면크기를 조정한 경우 copy event - 무.. 2022. 11. 21.
[JavaScript] html 파일 속 요소 가져오기 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.. 2022. 11. 21.
[JavaScript] 데이터 타입 확인 및 형변환 [ 데이터 타입 ] - 정수형 / 실수형 / boolean / null / String [ 데이터 타입 확인 ] - typeof() [ 데이터 타입 변환 ] 문자열 -> int 로 변환 parseInt(); 문자열 -> double 로 변환 parseDouble(); ∴ 만약 바꿀 수 없는 데이터 타입이라면 NaN이 출력 [ 데이터의 NaN 확인 ] isNaN() 사용 -> NaN값일 경우 true 반환 ∴ NaN - Not a Number 2022. 11. 21.
[JavaScript] 배열 선언, 추가, 삭제 [ 배열 선언 ] 같은 데이터타입이 아니거나 변수 이름 자체여도 가능 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].. 2022. 11. 21.
[JavaScript] 객체 선언 및 접근법 객체 선언 방법 const 객체이름 = { //변수선언 변수명 : 변수값; //함수선언 함수명 : fucntion (){}; } 객체에 선언된 변수에 접근하는 법 1) 객체명.변수명 2) 객체명["변수명"] 2022. 11. 21.

티스토리툴바