본문 바로가기

Front-end/javascript22

[JavaScript] API 호출 API란 ? 클리이언트(브라우저)가 서버를 통해 데이터베이스에서 정보를 가져오려고 할 때 서버에 정보를 요청하고 응답을 받는 과정을 api 호출이라고 한다. api호출 과정이 언제 끝날지 모르기 때문에 비동기호출을 해야한다. 이 사이트는 무료로 가상 데이터를 응답해주는 서비스를 지원해준다. 이 사이트에 들어가서 /posts를 누르면 이렇게 코드들과 함께 상단에 주소가 나타난다. 이 때 우리가 사용할 것은 주소이므로 이를 복사해준다. 여기서의 코드는 json형태로, 이렇게 응답하겠다 라는 것을 나타낸다. let response = fetch("https://jsonplaceholder.typicode.com/posts").then((res) => console.log(res) ); 복사한 값을 fetch문.. 2023. 7. 30.
[JavaScript] async와 await async async function 함수명(){ return 1; } /////////////////////////////////////////////////////////////// async function 함수명(){ return Promise.resolve(1); } async는 항상 promise 객체를 반환한다. 위 코드에서 빗금을 기준으로 위, 아래 코드는 동일하다. function hello(){ return "hello"; } anync function helloAsync(){ return "hello abc"; } helloAsync.then((res) => { console.log(res); }); 이 코드를 실행하면 hello abc가 출력된다. function delay(ms){.. 2023. 7. 28.
[JavaScript] 콜백지옥과 promise 우선 콜백이 무엇인지 헷갈리시는 분은 아랫글을 참고해주세요 https://ethereal-coder.tistory.com/32 [JavaScript] 콜백함수 콜백함수는 함수를 매개변수로 받는 함수이다. 예시 코드 function day(time, morning, night){ if(time === "morning"){ morning(); //wakeUp이 출력 } else{ night(); //goToSchool이 출력 } } function wakeUp(){ console.log("wakeUp"); } f ethereal-coder.tistory.com Promise는 정말 자바스크립트를 공부하면서 고비라고 생각할 정도로 어려웠다. 강의 영상을 정말 5번 정도 돌려봤는데도 이해가 안돼서 앞에 내용을 .. 2023. 7. 25.
[JavaScript] 동기, 비동기 동기/ 비동기 차이 스레드는 코드를 한 줄 한 줄 실행시켜준다. 동기적 방식으로 처리한다는 것은 단일 스레드를 이용하여 taskA, taskB, teskC가 있다면 동기방식은 세 일을 하나씩 차례로 수행한다. -> 동기적 방식의 문제점 : 하나의 작업이 오래걸린다면 모든 작업이 그때문에 올스탑되기 때문에 전반적인 흐름이 느려진다. 멀티스레드 : 스레드를 여러개 사용해서 일들을 동시에 해결함 하지만 자바스크립트는 이를 지원하지 않는다. function one(){ return 1; } function two(){ return ont() + 1; } function three(){ return two() + 1; } 위 함수들은 동기함수이므로 그림과 같이 callstack에 함수들이 스택형식으로 쌓이고 차례.. 2023. 7. 18.
[JavaScript] spread 연산자 객체에 사용 객체를 여러개 생성할 때 프로퍼티가 겹치는 경우 유용하게 사용할 수 있는 기능이다. const cookie = { base : "cookie"; madeIn : "korea"; }; const chocochipCookie = { ...cookie, toping : "chocochip"; }; 새로운 객체에 ...객체명을 프로퍼티에 넣으면 해당 객체에 있는 프로퍼티가 자동으로 생성된다. 배열에 사용 const list1 = ["a","b"]; const list2 = ["c","d","e"]; const list3 = [...list1,"s",...list2];//["a","b","s","c","d","e"]; 앞서 배열을 concat로 합치는 것을 했었는데, spread로 이와 같은 기능을 .. 2023. 7. 17.
[JavaScript] 비 구조화 할당 변수에 배열, 객체에 있는 값들을 간단하게 넣을 수 있는 기능이다. let arr = ["one", " two", "three"]; let one1 = "one"; let two2 = "two"; let three3 = "three"; //////////////////////////////////////////// let[one1, two2, three3] = arr //비구조화 할당 빗금친 부분의 위 아래 코드가 같은 기능을 한다. 이렇게 비구조화 할당으로 간단하게 정리할 수 있다. let [one1,two2,three3] = ["one","two","three"]; 위와 같은 방식처럼 따로 선언하지 않고도 가능하다. swap에 활용 let a = 9; let b = 7; [a,b] = [b,a]; 객.. 2023. 7. 17.