오묘한

https://youtu.be/BUAhpB3FmS4 1) Ternary Operator (삼항 연산자) /** Ternary Operator */ { // 💩Bad code { function getResult(score) { let result; if (score > 5) { result = "👍"; } else { result = "👎"; } return result; } console.log(getResult(6)); } // ✨ { function getResult(score) { return score > 5 ? "👍" : "👎"; } console.log(getResult(6)); } } 2) Nullish coalescing operator ( + OR 논리 연산자와의 차이) /** Null..

https://youtu.be/LYQvmDuQAMI - 자바는 객체 지향적 언어이고, 클래스 기반의 언어이다. - 자바는 어플리케이션을 만들기 위해 사용된다. - 자바는 컴파일 -> 바이트코드로 바뀌어 JVM 상에서 디바이스에 상관 없이 작동된다. - 백엔드에서 많이 사용한다. - 자바스크립트는 스크립트 언어라 컴파일 과정이 없다.(근데 You Don't Know JS는 자바스크립트는 컴파일레이션 과정이 있는 컴파일 언어라 한다. 한번 찾아봐야지...) - 프론트엔드에서 많이 사용한다. - 브라우저 상에서 컴파일 과정 없이 바로바로 실행된다. - dyanamic typing(동적 타입)으로 변수에 값 할당한다. - 프로토타입 기반의 객체지향(처럼 보이는) 언어이다. - 함수는 일급 객체이다.(C언어처럼 ..

https://youtu.be/36HrZHzPeuY 1) ES6에 추가된 기능들 : Shorthand property names, Destructuring Assignment, Spread Syntax, Default Parameters, Tenary Operator, Template Literals /* * Shorthand property names * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer */ { const ellie1 = { name: "Ellie", age: "18", }; // 전역 변수 const name = "Ellie"; const age = "18"; // 💩 ..

https://youtu.be/We2Kv1HMGvc 이제까지 배운 JavaScript, 그리고 HTML과 CSS를 활용해 동적으로 움직이는 온라인 쇼핑몰을 만드는 실습! 뒤에 있을 해설 강의를 아예 안보고 한 5시간 정도 걸려서 혼자 만들었다. 프로젝트 하는 동안 react와 jsx만 써오다가, Vanilla JS로 DOM을 조작하는 방식을 하게 되니 querySelector, createElement 등 예전에 배운 메서드를 다시 복습하게 됐다. 그리고 CSS media query를 배운 후 자주 안쓰다 보니 많이 까먹어서 다시 찾아봤다(부끄럽군..복습 열심히 해야지😥) 1. 설계(개발 순서) 항상 플젝 할 때 본격적인 코드 구현 전에는, 저렇게 디자인을 태그로 묶어서 개발할 부분을 나눈다. 그래야 나..

https://youtu.be/fU25vI0EOOk class Counter { constructor(runEveryFiveTimes) { //2) 메서드 대신 콜백 함수를 생성자에 집어넣으면 더 간단하다. this.counter = 0; this.callback = runEveryFiveTimes; } increase() { this.counter++; console.log(this.counter); if (this.counter % 5 === 0) { this.callback && this.callback(this.counter); } } } function printSomething(num) { console.log(`Wow! ${num}`); } function alertNum(num) { ale..

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