오묘한

https://youtu.be/G4eQziVzCTE FPS란 : Frame per Seconds. 기기에 1초당 몇 프레임이 그려지는지를 표현. 대부분의 기기들은 스크린을 1초에 60번을 screen을 refresh한다. 만약 화면 전환 시에 애니메이션이 있다거나, 유저가 스크롤링으로 페이지를 내린다던가 할 때 브라우저는 이 디바이스의 refresh rate에 맞추어서 1개의 새로운 그림이나 프레임을 띄워줘야 한다(스크린이 refresh 될 때 마다!) 60fps는 1초에 60장의 프레임이 그려진다는 의미이다. 그래서 16.6ms만에 1프레임이 그려져야, 즉 브라우저 렌더링이 16.6ms 만에 무사히 수행되어야 애니메이션이 끊김 없이 보일 수 있다.(실제로 브라우저는 다른 하는 일이 많기 때문에 화면에 ..

https://youtu.be/2AMRTAFSh98 목표: 숫자, 날짜, 통화를 잘 나타내보자! // intl 사용해 // 1. 숫자 나타내기 { const views = 9744642; const formatter1 = new Intl.NumberFormat("ko"); console.log(formatter1.format(views)); // 9,744,642 const formatter2 = new Intl.NumberFormat( navigator.language /* 사용자가 지정한 언어 */, { notation: "compact" } ); console.log(formatter2.format(views)); // 974만 const formatter3 = new Intl.NumberForma..

https://youtu.be/wbDpZwDRgRk 1) TypeIt : 타이핑 효과를 주는 애니메이션 라이브러리 https://www.typeitjs.com/docs Documentation | TypeIt It's extremely easy to configure and start using TypeIt. Here's the documentation to show you how to fully leverage it. www.typeitjs.com 장점: 4kb의 작은 용량, SEO 최적화 DreamCoding Youtube 2) ScrollOut: 스크롤링 애니메이션 라이브러리 https://scroll-out.github.io/guide.html#getting-started ScrollOut Eff..

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