본문 바로가기

📙 자바스크립트 공부19

[js] async와 await 제대로 알고 있었늬!? async를 요러케 작성해서 쓸 수 있는데, 요렇게 쓸 경우 getApple과 getBanana가 순차적으로 (1초 +1초)로 실행이 된다. 1초 끝나고, 1초 기다려가 아니라 동시에 getApple과 getBanana가 실행되게 하려면 아래와 같이 수정하기 Promise.all을 이용하면 동기와 비동기의 차이가 뭔지 아늬?! - 동기 : 모든 일의 진행이 순서대로 일어남 - 비동기 : 비동기 함수의 경우 비동기 함수를 호출한 스레드에서 해당 함수 호출에 대한 결과를 기다리지 않고 바로 다음 작업을 수행할 수 있는 것 async와 await는 붙어 다니는데, async가 비동기고 await가 단어 그대로 기다린다 라는 뜻이고 await의 주체가 되는 함수에 async를 붙여줘야 한다. await 함수들이.. 2023. 1. 2.
리액트는 왜 쓰며, 리액트와 vue와 angular의 차이 REACT vue는 두마리 토끼 다 잡으려하는거고, angular는 내가 모든 걸 해줄게 리액트는 뷰랑 랜더링하는거에만 관심있음 HTML태그들은 , 이미 정해져있는 거지만, 리액트에서 ‘컴포넌트’는 이 태그들을 내가 직접 만든다고 생각하면 됌(css,js,html이 접목된 나만의 태그) 리액트 전까지는 실제 돔을 움직였는데, 리액트는 가상 돔트리를 사용 → 가상의 돔을 가지고 있고, a상태의 벌츄어 돔과 b상태의 벌츄어 돔 상태를 비교해서 바뀐 부분만 찾아내서 바꿔주는 것 CSR vs SSR Client Side Rendering : 기본적으로는 클라이언트사이드랜더링으로 간다. 리액트는 자바스크립트로 이루어진 하나의 커다란 웹어플리케이션이고, js가 모두 다운이 받아져야 리액트가 작동하게 된다. html.. 2022. 12. 20.
구조분해할당과 Named export와 default export의 차이 구조분해할당 const user = { name: "hong", age: 100, email: "abc@google.com ", }; 만약, 해당 속성에 값이 없으면 기본값으로 “~~” 이걸 넣어줘 설정하기 const { name, age, email, address = "기본값" } = user; // user['name'] // 필요한 것들만 꺼내서 사용할 수 있다. console.log(`${name}${age}${email}`); console.log(address); // 8번 라인에서처럼 값이 없다면 기본값을 따로 설정하는 걸 할 수 있다. const user1 = { name: "abc", age: 100, address: "니똥", }; 객체에서 Key이름을 다른 이름으로 데려오고 싶다면?.. 2022. 12. 20.
배열과 객체타입(Object) 메소드 복습하깅 배열(이어서) const fruits = ["Apple", "Banana", "Cherry"]; const numbers = [1, 2, 3, 4]; >> filter const a = numbers.map((item) => item > 3); // 총 map은 4번 실행될거고, 결과값은 false,false,false,true // boolean형이 반환된다. const b = numbers.filter((item) => item > 3); console.log("b:", b); // 4가 담긴 배열이 생성된다. // 조건식이 false면 다음값으로 넘어가고, true인 결과값만 b에 들어간다. map도 아래처럼 쓰고, 출력해보면 d에 ["Apple", "Banana", "Cherry"] 다 담김 ( .. 2022. 12. 18.
자바스크립트 데이터 (String, 문자, Math, Array) 심화공부 // >> JS데이터 // (문자) // String.prototype.indexOf() // 호출한 String객체에서 주어진 값과 일치하는 첫번째 인덱스를 반환 // 일치하는 값이 없으면 -1을 반환한다. // const paragraph = // "The quick brown fox jumps over the lazy dog. if the dog barked , If the dog barked, was it really"; // const searchTerm = "dog"; // const indexOfFirst = paragraph.indexOf(searchTerm); // console.log("index of :", indexOfFirst); // // 'd'가 40번에 있는걸 확인할 수 있음.. 2022. 12. 17.
자바스크립트 this에 대해 다시 복습, 상속과 class 개념 정리!!! function user(first, last) { this.firstName = first; this.lastName = last; } user.prototype.getFullName = function () { return `${this.firstName} ${this.lastName}`; }; // 이렇게 new를 사용한 함수를 '생성자 함수' 라고 한다. // 하나의 객체 데이터가 생성되는 것 // a,b,c => 인스턴스 const a = new user("f1", "l1"); const b = new user("f2", "l2"); const c = new user("f3", "l3"); console.log("a : ", a.getFullName()); console.log("b : ", b.. 2022. 12. 16.