담백한 웹 개발 이야기

네트워크 필터에서는 리소스 종류에 따라 필터링을 할 수 있습니다. 이 포스트에서는 자주 사용되는 리소스 위주로 정리했습니다. Doc HTML 문서에 대한 리소스를 확인할 수 있습니다. SSR를 정상적으로 수행 중인지 확인할 때 용이합니다. JS JavaScript에 대한 리소스를 확인할 수 있습니다. Fetch/XHR JavaScript에서 실행된 비동기 요청 리소스를 확인할 수 있습니다. fetch() 함수, XMLHTTPRequest 객체 실행을 확인할 수 있습니다. CSS CSS에 대한 리소스를 확인할 수 있습니다. Font 폰트 파일에 대한 리소스를 확인할 수 있습니다. 웹 페이지 로드 후 폰트가 바뀌거나 로드 시간이 늦을 때 유용합니다. Img 이미지 리소스를 확인할 수 있습니다. 이미지 사이즈..

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

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

배터리의 충전중 상태와 충전까지 남은 시간을 조회할 수 있다. 배터리량과 남은 배터리 사용 시간을 조회할 수 있다. 브라우저 지원 범위 Chrome / Edge / Opera / Android 에서 지원한다. Browser compatibility 코드 예제 6장 코드 스니펫 > Boilerplate 코드를 기반으로 데모가 제작되었습니다. 데모보기 공식 사이트 링크 자바스크립트로 배터리 상태 조회하기 배터리의 충전중 상태와 충전까지 남은 시간을 조회할 수 있다. 배터리량과 남은 배터리 사용 시간을 조회... blog.naver.com

const set = new Set(); set.add(1); set.delete(1); set.add(2); console.log(set.has(1), set.has(2)); // false true 교집합 const intersectSets = (setA, setB) => { const intersection = new Set(); for (const elem of setB) { if (setA.has(elem)) { intersection.add(elem); } } return intersection; }; console.log( intersectSets( new Set([1, 2, 3, 4]), new Set([2, 3]), ) ); // Set {2, 3} 합집합 const unionSets =..