담백한 웹 개발 이야기

Decorators Proposal 1) tc39/proposal-decorators에 제안서 정의됨. 2) Orthogonal Classes와 Class Evaluation Order 제안을 바탕으로 Decorators와 Class Field 및 Private methods를 함께 작동시키는 방법에 대한 결합된 비전을 제안. 3) Decorators는 이미 정의된 클래스, 함수, 변수의 코드를 수정하지 않고, 기능을 추가하는 것에 유용함 4) 메모이제이션, 접근 제어, 인증, 계측, 타이밍 처리, 로깅, 속도 제한 등에 사용된다. Decorators 실용성 JavaScript에서는 Decorators를 사용할 수 없지만 TypeScript에서 Decorators를 사용할 수 있다. 그래서 Node.js..

글의 목적 기존에 사용하던 콜스택 구조를 코루틴으로 변경하고, 코루틴를 통해 지연 평가를 발생시켜 콜스택과 차이를 설명한다. 콜스택과 코루틴 비교 배열을 인자로 받아 홀수만 리턴하는 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

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

Nuxt 기반한 프로젝트에서 vue/eslint-plugin-vue를 사용중이다. prettier 를 사용하려고 검토하는 도중 우연히 vue/eslint-plugin-vue에 룰이 많다는 것을 알게 되었다. 초기 세팅 시에 잡혀있는 plugin:vue/recommended는 굉장히 약한 수준의 룰이다. eslint-plugin-vue를 참고해서 아래와 같이 룰을 수정했다. 1. rules에 prettier로 작업했던 유사한 룰을 추가했다. 2. 기본룰 수준을 plugin:vue/recommended에서 plugin:vue/strongly-recommended로 변경했다. module.exports = { root: true, env: { browser: true, es6: true }, plugins: ..