담백한 웹 개발 이야기

스케줄링이란? 메인 스레드는 자바스크립트 실행 이외 렌더링, 네트워트 응답, GC 등 다양한 역할을 수행합니다. 메인 스레드에 많은 작업들이 예약되면 웹 사이트의 성능과 사용성 경험이 저하됩니다. 그러므로 스케줄링을 통해 우선순위가 다른 작업을 효율적으로 등록하고 제어합니다. 브라우저 지원 범위 지원 브라우저: Chrome / Edge / Opera 미지원 브라우저: Firefox / Safari Browser compatibility Native Scheduling API가 필요한 이유? 1. 메인 스레드에서 협력하는 행위자들 간의 조정 애플리케이션은 1st-party, 1st-party 라이브러리, 3rd-party 라이브러리 및 프레임워크 스크립트로 구성될 수 있습니다. 동시에 브라우저는 fetch..

글의 목적 기존에 사용하던 콜스택 구조를 코루틴으로 변경하고, 코루틴를 통해 지연 평가를 발생시켜 콜스택과 차이를 설명한다. 콜스택과 코루틴 비교 배열을 인자로 받아 홀수만 리턴하는 odd와 숫자를 인자로 받아 숫자만큼 리턴하는 take를 콜스택과 코루틴 동작을 비교한다 콜스택 중첩함수 중 내부에 사용된 odd가 실행된 뒤, take가 실행된다. 배열의 크기만큼 루프가 반복되는 것을 알 수 있다. function odd(arr) { const newArr = [] for (const v of arr) { console.log(`odd ${v}`) if (v % 2) { newArr.push(v) } } return newArr } function take(arr, n) { const newArr = []..

async 함수 async 함수는 Promise를 반환한다. const f = async () => {} f() // Promise 정상적인 동작으로 값을 반환하면 then에서 받을 수 있다. const f = async () => 'Hi!' f().then(console.log) // Hi! 비정상적인 동작으로 에러를 발생하면 catch에서 받을 수 있다. const f = async () => die; f().catch(error => console.log('에러 발생!')) // 에러 발생! async에서 Promise 반환 async 함수의 반환값으로 Promise를 사용하면 호출자에서는 async 함수 사용과 동일하게 사용된다. resolve 상태면 then으로 처리되고, reject 상태면 c..

목차 Promise 상태 응답 결과 전달 방법 마이크로테스크 연속적인 동작 Promise API catch 케이스 스터디 적용 사례 Promise 상태 Promise의 상태는 대기, 이행, 거부 상태가 있다. 상태는 대기에서 이행/거부로만 변경이 가능하다. 대기 : 초기상태 이행 : 성공 상태, resolve(), Promise.resolve() 거부 : 실패 상태, reject(), Promise.reject() 이행상태는 then으로 처리할 수 있다. resolve를 통해 전달한 값이 then에 인자로 전달된다. Promise.resolve(10) .then(result => console.log(result)) // 10 거부상태는 catch으로 처리할 수 있다. reject를 통해 전달한 값이 c..

출처 : [니콜라스 자카스] 프론트엔드 개발자를 위한 자바스크립트 프로그래밍 글의 목적 자바스크립트에서 this를 다루기 위해서는 this에 대한 깊은 이해가 필요하다. 그리고 프런트 개발자라면 기술면접시 질문을 받아봤을 만한 단골 문제이기도 하다. 이 글은 자바스크립트에 입문할 때 하나의 산이었던 this를 정리한 내용이다. this란 this란 호출부의 참조이다. 호출부의 참조를 결정하는 방법은 네가지가 있다. 첫번째, 단독 함수 실행 할 경우 전역 객체가 기본 바인딩이 된다. 전역에서 함수를 호출하고 함수가 this를 참고하면 전역 객체를 사용하게 된다. function foo() { console.log(this.a); } var a = 'Hello World'; foo(); // Hello Wo..

서사 자바스크립트의 기반이 되는 ECMAScript가 매년 새로운 문법이 추가되기 때문에 자바스크립트는 매년 새로운 문법이 추가됩니다. 프런트 엔드 개발자라면 자바스크립트는 기본적으로 능숙하게 다루겠지만 그렇다고 자바스크립트의 문법을 잘 안다고 할 순 없습니다. 실무에 몇 년, 몇십 년 일해도 가끔은 뒤돌아서 기본을 볼 필요가 있다고 생각합니다. 이 글에서는 현재의 자바스크립트 기반이 되는 ECMAScript 2015를 정리했습니다. var vs let var is Function Scope var 키워드는 Function Scope로 블럭에 정의를 해도 블럭 밖에서 사용이 가능합니다. if (true) { var x = 3 } console.log(x) //3 let is Block Scope let ..

navigator.share를 사용해서 URL, 텍스트, 파일을 공유할 때 커스텀해서 공유할 수 있다. 브라우저 지원 범위 Firefox / WebView Android 에서 미지원하고, 대부분 지원한다. Browser compatibility 코드 예제 6장 코드 스니펫 > Boilerplate 코드를 기반으로 데모가 제작되었습니다. 데모보기 공식 블로그 링크 자바스크립트로 공유 기능 커스텀하기 navigator.share를 사용해서 URL, 텍스트, 파일을 공유할 때 커스텀해서 공유할 수 있다. 브라우저 지원... blog.naver.com

navigator.connection.effectiveType을 실행하면 인터넷 속도를 조회할 수 있다. 브라우저에서 사이트 접속 후 인터넷 속도를 측정하며 결과값은 slow-2g, 2g, 3g, 4g 중에 하나를 알려준다.​ ​ 브라우저 지원 범위 Firefox / Safari 에서 미지원하고, 대부분 지원한다. Browser compatibility ​​ ​항목별 상세 스펙 용어정의 ​ RTT Round Trip Time의 약자로 왕복 시간이라 한다. 네트워크 시작 지점에서 패킷이 타겟으로 전송되는 데 걸리는 시간과 해당 패킷의 승인이 네트워크 시작 지점에 다시 전송되는 시간을 의미한다. ​ Downlink 기지국에서 단말기 방향의 링크다. ​ ​ slow-2g ​ 최소 RTT: 2000ms 최대 D..

class LinkedListNode { constructor(data) { this.data = data; this.next = null; } } class LinkedList { constructor() { this.head = null; this.size = 0; } isEmpty() { return this.size === 0; } insert(data) { const newNode = new LinkedListNode(data); if (this.head !== null) { newNode.next = this.head; } this.head = newNode; this.size++; } remove(data) { if (this.head.data === data) { this.head = th..

class Queue { constructor() { this.arr = [] } getBuffer() { return this.arr.slice(); } isEmpty() { return this.arr.length === 0; } enqueue(item) { this.arr.push(item); } dequeue() { return this.arr.shift(); } peek() { return this.arr[0]; } }

class Stack { #arr = [] constructor() { this.#arr = [] } getBuffer() { return this.#arr.slice(); } isEmpty() { return this.#arr.length === 0; } push(item) { this.#arr.push(item); } pop() { return this.#arr.pop(); } peek() { return this.#arr[this.#arr.length - 1]; } }

2019년 6월 8일에 정리한 포스트입니다. 글의 목적 소프트웨어의 구성요소는 객체, 객체간의 관계, 조건문, 반복문이라는 재료가 대부분 구성된다. 이전에는 조건문과 반복문 재료를 다루기 위해서 현실세계에서 유용한 사항들을 선언형으로 대체 가능한 문법들 정리에 다뤘다. 이번에는 객체에 대한 내용을 정리했다. 객체를 다루는 것은 현실세계를 해결하는 데 있어서 필수라고 할 수 있다. 사견을 정리하는 것보다 도서 몇권을 발췌하여 객체과 객체지향에 대한 내용을 작성했다. 목차 객체란 객체와 자료구조 객체지향의 본질 객체의 역할과 책임 관련 포스트 요약 참고문헌 객체란 객체란 식별 가능한 개체 또는 사물이다. 객체는 자동차처럼 만질 수 있는 구체적인 사물일 수도 있고, 시간처럼 추상적인 개념일 수도 있다. 객체는..