livlog

The goals 💪🏻What & Why? ✌🏻Usage Serve sudo npm install -g serve Module 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. 이때 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다. 자신만의 파일 스코프를 갖는 모듈의 자산(모듈에 포함되어 있는 변수, 함수, 객체 등)은 기본적으로 비공개 상태다. 다시 말해, 자신만의 파일스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없다. 즉, 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다. 자바스크립트에서 지정한 변수들은 global scope로 지정되기 때문에..

The goals 💪🏻What & Why? ✌🏻Examples 👍🏻Easier Http Usage with Libraries Lodash jQuery Sources https://lodash.com/ Lodash _.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });_.partition([1, 2, 3, 4], n => n % 2);DownloadLodash is released under the MIT license & supports modern environments. Review the build differences & pick one that’s right for you.InstallationIn lodash.com https://jquery.com/ jQuery Wha..

The goals 💪🏻What & Why? ✌🏻XMLHttpRequest & fetch() API 👍🏻JSON Data & FormData 👊🏻GETting Data, POSTing Data const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts'); xhr.responseType = 'json'; xhr.onload = function() { // const listOfPosts = JSON.parse(xhr.response); // we can do like this but there is another simple way const listOfPosts = xhr.response; // ..

The goals 💪🏻What is "Async Code"? ✌🏻Working with Callbacks 👍🏻Promises 👊🏻async / await quiz 질문 1: 동기 코드와 비동기 코드의 차이는 무엇일까요? 동기 코드는 행 단위로 실행되고 비동기 코드는 일부 작업(예: 타이머)이 완료되면 실행됩니다. 동기 코드는 비동기 코드(예: 타이머)가 발견될 때까지 실행되고 이 경우 해당 코드가 실행이 완료될 때까지 실행이 일시 중지됩니다. 둘 사이에는 차이가 없습니다. 질문 2: 이 코드는 콘솔에 무엇을 출력할까요? console.log('Starting!); setTimeout(() => { console.log('Timer completed!'); }, 10); console.log('Finish..

The goals 💪🏻More about Numbers ✌🏻Working with the Number & Math Objects 👍🏻More about Strings & Template Literals Javascript internally works with the binary system as we learned Therefore Javascript converts this number to the binary system for doing the calculation and then basically converts it back to give us an output that makes sense to us humans because we rather work with the decimal syst..

The goals 💪🏻Pure Functions & Side Effects ✌🏻Factory Functions 👍🏻Closures (& Scope Revisited) 👊🏻Recursion Pure vs Impure functions Pure functions In simple terms, pure functions do not have an internal state. Therefore, all operations performed in pure functions are not affected by their state. As a result, the same input parameters will give the same deterministic output regardless of how many t..

The goals 💪🏻A Closer Look at Events ✌🏻Event Propagation 👍🏻Example: Drag & Drop Events in JavaScript 예시: 무한 스크롤링 기초 scroll 이벤트로 무한히 스크롤할 수 있는 목록을 만들어 봅시다(아래 설명 참조)! 이 코드 스니펫은 모든 페이지에서 실행할 수 있습니다- 세로로 스크롤할 수 있는지(충분한 더미 콘텐츠를 추가하거나 height 를 많이 추가하는 몇 가지 스타일을 추가하거나 브라우저 창을 세로로 축소해 보면서) 확인하세요. let curElementNumber = 0; function scrollHandler() { const distanceToBottom = document.body.getBoundingClient..

The goals 💪🏻Attaching Data to Elements ✌🏻Working with Element Coordinates & Sizes 👍🏻Working with Templates & Dynamic Scripts 👊🏻Navigator, Location & Window.history Dataset Offset(Top, Left, Right, Width, Parent ....) cf. client(Top, Left, Right, ...), scroll(Top, Left, Right....) How to load script file dynamically class App { static init() { const activeProjectsList = new ProjectList('active');..

The goals 💪🏻Practice Object-oriented Programming static The static keyword defines a static method or property for a class, or a class static initialization block (see the link for more information about this usage). Neither static methods nor static properties can be called on instances of the class. Instead, they're called on the class itself. Static methods are often utility functions, such a..

The goals 💪🏻What happens behind the scenes of classes and objects? ✌🏻Constructor functions (without classes) 👍🏻Prototype & Prototypical Inheritance class Person { name = 'Max'; constructor() { this.age = 30; } greet() { console.log( "Hi, I am " + this.name + "and I am " + this.age + "years old." ); } } const person = new Person(); person.greet(); function Person() { this.age = 30; this.name = 'M..