오묘한

https://youtu.be/__Zz17_5FRU // number, string, boolean, null, undefined let number = 2; let number2 = number; console.log(number); console.log(number2);//call by value(메모리에 값 자체 복사) number2 = 3; console.log(number); console.log(number2); // object : primitive type 아니면 다 object // object가 담긴 메모리는 따로 있고(변수 메모리 공간에 저장되긴 너무 큰 데이터라), // obj 변수의 메모리에는 주소값이 저장된다. const obj = { name:'ellie', age: 5 } c..

https://youtu.be/PuG2VW18O1E // Don't give up // 포기하지 말자 // 함수 선언, use parameter(매개변수) function doSomething(add) { console.log(add); const result = add(1, 2); //즉, callback 함수를 인자로 넣어 호출하고 싶다면 이렇게 호출부를 함수 선언부에 넣자. console.log(result); }; function add(a, b) { const sum = a + b; return sum; } // 함수 호출, use argument(전달인자) // 함수 전달 시에는 함수명만 전달하자 // doSomething(add()) 이런 식으로 하면, add()가 먼저 호출돼 실행되면서, ..

요즘 삼성 S22 울트라에 꽂혀서 공식 홈페이지(https://www.samsung.com/sec/smartphones/galaxy-s22-ultra/)를 들어갔는데 스크롤에 따라 애니메이션이 굉장히 스무스하게 움직여서 '이거 어떻게 한거지?!' 이러고 방법을 찾아보았다. 소스코드를 뜯어보니 .mp4 파일을 비디오 태그로 삽입한 후에 JS로 스크롤 위치에 따라 재생되도록 한 것 같아서 한번 비슷한 튜토리얼이 있나 찾아봤고, 찾았다! gsap라는 라이브러리를 사용하는 방식이었다. https://greensock.com/forums/topic/32782-video-scroll-animation/ Video Scroll Animation Where can I find a tutorial or maybe doc..

https://youtu.be/aoQSOZfz3vQ Promise 를 조금 더 간결하고, 동기적으로 보이게 만들어주는 것이 async, await! 기존에 존재하는 기능을 더 좋아보이게 만드는 Syntatic sugar 로 볼 수 있다. // async & await // clear style of using promise :) //1. async async function fetchUser() { // do network request in 10 secs... return 'ellie'; } const user = fetchUser(); user.then(console.log); console.log(user); // 2. await ✨ function delay(ms) { return new Prom..

https://youtu.be/JB_yU6Oe2eE 'use strict'; // Promise is a javascript object for asynchronous operation. // 학슾 포인트: 1. state / 2.Producer vs Consumer // State: pending -> fulfilled or rejected // Producer vs Consumer // 1. Producer // when new Promise is created, the executor runs automatically. // Promise는 만드는 즉시 execute 함수 실행된다. // 따라서 가령 네트워크 요청을 사용자가 요구할 때만 하고자 한다면, 사용자 요구하지도 않았는데 불필요한 통신 일어..

https://youtu.be/s1vpVCrT8f4 'use strict'; // JavaScript is synchronous. // Execute the code block by order after hoisting. // hoisting : var, function declaration console.log('1'); setTimeout(() => console.log('2'), 1000); console.log('3'); // Synchronous callback function printImmediately(print) { print(); } printImmediately(() => console.log('hello')); // Asynchronous callback function printW..

https://youtu.be/FN_D4Ihs3LE HTTP란? Hypertext Trasfer protocol의 약자. 하이퍼텍스트 문자를 클라이언트와 서버 간 주고받기 위한 프로토콜 규약. client는 서버에 request를 주고, 서버가 이에 맞는 response를 전달한다. 여기서 하이퍼텍스트는 단순히 링크를 말할 뿐 아니라, 브라우저에 렌더링돼야 하는 이미지나 문서 등을 포함하는 개념이다. AJAX란? Asynchronous JavaScript And XML의 약자. 동적으로 클라이언트와 서버가 데이터를 주고 받을 수 있는 기술을 의미한다. 대표적으로 XHR(XMLHttpRequest) 객체를 사용하는 방법이 있다. 이 XHR 객체는 브라우저에서 제공하는 객체(object) 중에 하나로, 이를..

https://youtu.be/3CUjtKJ7PJg // Q1. make a string out of an array { const fruits = ['apple', 'banana', 'orange']; console.log(fruits.join(',')); } // Q2. make an array out of a string { const fruits = '🍎, 🥝, 🍌, 🍒'; const result = fruits.split(','); //구분자 전달 안하면 length 1개 console.log(result); } // Q3. make this array look like this: [5, 4, 3, 2, 1] { const array = [1, 2, 3, 4, 5]; const reverseAr..

https://youtu.be/yOdAVDuHUKQ 배열과 리스트의 차이? : 배열은 인덱스가 존재하고(즉, 저장할 공간의 크기가 미리 지정되어 있고) 맨 앞과 중간에 삽입/삭제 작업에 O(n) 시간이 걸리나, 탐색에는 O(1) 시간이 걸린다. 리스트는 인덱스가 없으며, 저장할 공간의 크기가 가변적이다. 맨 앞과 맨 뒤에 삽입/삭제하는 시간은 O(1)이나 중간에 삽입/삭제하거나 탐색하는 작업에 시간 복잡도가 O(n)이 소요된다(인덱스가 없으므로) 'use strict'; // Array // 1. Declaration const arr1 = new Array(); const arr2 = [1, 2]; // 2. Index position const fruits = ['🍧','🧀'] console.log(..

https://youtu.be/1Lbr29tzAA8 참고하기 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object Object - JavaScript | MDN Object 클래스는 JavaScript의 데이터 유형 중 하나를 나타냅니다. 다양한 키 모음 및 더 복잡한 엔티티들을 저장하는 데 사용됩니다. 객체는 Object() 생성자 또는 객체 초기자 / 리터럴 구문를 통해 생 developer.mozilla.org // Objects // one of the JavaScript's data types. // a collection of related data and/or functionality // 1...