오묘한

https://youtu.be/SswrP0JLNGY // false: 0, -0, ''/"", null, undefined, NaN, false // true: [], {}, 'false'(string) let obj; //undefined if (obj) { console.log(obj); } obj && console.log(obj.name); // 조건문 안걸어주면 obj 내에 아무것도 없을 때 Error 나서 프로그램 뻗어버림 // 값 유무를 따지는 것은 Error을 피하게 하는 방법이다.

https://youtu.be/-cAPq25P-68 함수에 대해 소개하는 아주 기초적인 부분이지만, 혹시나 내가 놓친 부분이 있을 수 있는데다 기초를 잘 이해하는 것이 가장 중요하니 넘기지 않고 들었다. // 가령 똑같은 기능을 여러번 반복하는 코드를 작성한다 해보자. const num1 = 1; const num2 = 2; const result = num1 + num2; console.log(result); const num3 = 1; const num4 = 2; const result2 = num3 + num4; //... 이렇게 계속 쓸 순 없잖아? // 그러니까 특정 기능을 재사용할 수 있는 함수로 만드는거야! function add(a, b) { // 함수 호출 전까지 a,b는 undefine..

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..