오묘한

1장. 자바스크립트의 개요 1. 프로그래밍 언어란 컴퓨터 프로그램을 작성하기 위한, 즉 알고리즘을 설명하기 위한 언어이다. 2. 프로그래밍 언어는 컴파일 언어와 인터프리터 언어로 나뉜다. 3. 프로그래밍 언어는 방식에 따라 절차적 언어, 객체 지향 언어, 함수형 언어, 논리형 언어로 나뉜다. 자바스크립트는 객체 지향 언어이지만 함수형 언어의 특징도 가진다. 4. 자바스크립트는 인터프리터 언어이다. 실행 속도가 느릴 것 같지만 최근 웹브라우저 대부분에 실행시간에 자바스크립트 코드를 컴파일하는 JIT 컴파일러가 내장돼있어 실행 속도가 매우 빨라졌다. 이는 자바스크립틀르 활용한 고기능 웹 애플리케이션을 구현할 수 있게 된 중요한 요인 중 하나이다. 5. 자바스크립트는 C++나 Java처럼 클래스를 이용해 객체..

자바스크립트 프로토타입은 이해하기 매우 어려운 주제이다. 책을 읽었지만 그래도 이해하지 못했는데, 프로토타입을 철학의 맥락에서 살펴본 아래 자료를 읽고 이해를 한방에 했다! 정말 이해하기 쉽게 되어있고 문과라면 오히려 더 잘 이해할 수 있으니 꼭 읽어보시는 걸 추천! 자바스크립트는 왜 프로토타입을 선택했을까 프로토타입으로 검색하면 으레 나오는 서두처럼 저 또한 자바스크립트를 처음 접했을 때 가장 당황스러웠던 게 프로토타입이었습니다. medium.com 정리 - 프로토타입은 이미 존재하는 객체, 즉 생성된 객체를 통해 정의하는 방식이다. - 그래서 프로토타입 선언 시에 객체 선언의 과정이 포함되어 있는 것이다! - 프로토타입을 적용한 후, 적용시킨 객체가 해당 속성을 변경해도 프로토타입의 객체 속성은 변경..

1. array의 Constructor :Array() 2. array의 Property: 1) Array[@@species] => 현재 이 기능은 사라질 준비 중. toReserved() 같은 최신 배열 메서드가 새 Array 기반 클래스 인스턴스를 반환한다. 기존 배열을 변경하지 않고, 새 배열 인스턴스를 반환하는 배열 메서드(filter(), map())에서 생성자로 작용해, 반환된 생성자는 원 배열과 관련 없는 새로운 배열 메서드의 반환 값을 구성하게끔 된다. 2) Array.prototype[@@unscopables] => 이 속성이 있음으로서 ECMAScript 2015에 도입된 Array 속성이 with 문 바인딩 목적으로 무시돼 2015 이전에 작성된 코드가 중단되지 않고 예상대로 계속 작..

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