javascript
[JS] Promise.race를 사용하여 timeout 구현하기
// 1초 후에 실행되는 Timeout Promise 객체 const timeoutPromise = new Promise((resolve, reject) => { setTimeout(reject, 1000, "timeout"); }); // 2초 후에 실행되는 Promise 객체 const myPromise = new Promise((resolve, reject) => { setTimeout(resolve, 2000, "resolve"); }); // Promise 실행 함수 const race = async () => { try { // 프로미스 배열 중에 가장 먼저 resolve/reject가 실행되는 결과를 출력한다. const response = await Promise.race([myPromis..
정규표현식으로 사이에 있는 내용 가져오기
요구사항 태그 내부의 태그 내부의 내용 가져오기 Input const input = ` 나비 치즈 바둑이 냥냥이 `; 구현 function getNamesIncludeTag(input, type) { const reg = new RegExp(`()(.*?)()`, "gs"); const result = input.match(reg); return result; } function getNamesExcludeTag(input, type) { const reg = new RegExp(`(?
HTML 문서 렌더링
옛날부터 HTML 파일이 어떻게 렌더링 되는지에 대해서 궁금증만 있었지 제대로 알아본 적은 없었다. 프론트엔드 개발자로서 더 이상 넘어갈 수 없다. 이번 글을 통해서 브라우저의 HTML 렌더링 순서를 각 잡고 정리해보겠다. 1. 불러오기 로더(Loader)가 서버로부터 전달 받는 리소스 스트림을 읽는 과정. 읽으면서 어떤 파일인지, 데이터인지 파일을 다운로드할 것인지 등을 결정한다. 2. 파싱 (Phasing) 브라우저 웹 엔진이 가지고 있는 HTML/XML 파서가 문서를 파싱해서 DOM Tree를 만든다. -> 순서로 파싱이 진행한다. 그런데 만약 내부의 , 태그를 만나게 된다면 해당 파일이 로드, 파싱이 완료 될 때까지 HTML의 파싱이 중단된다. 이는 DOM 트리가 만들어지는 것을 지연시키기 때문에..
fetch
저번 시간에 XHR에 대하여 공부 및 실습을 해보았다. 그렇다면 이번에는 이후에 탄생한 fetch에 대하여 정리해보도록 하겠다. 우선 fetch가 생겨난 배경부터 설명해보겠다. 그동안 비동기 요청을 위해서는 XHR을 이용해야했다. 하지만 XHR객체를 이용해야하고, EVENT에 따라서 등록된 변경사항을 받아야 했고, 요청의 성공, 실패 여부나 상태에 따라 처리하는 로직이 보기 좋지 않았다고 한다. 이를 보완하기 위해 fetch가 생겨났고, 그 결과 http 요청에 최적화 할 수 있고 상태도 잘 추상화 되어있고, Promise를 기반으로 되어있기 때문에 추가 로직을 다루는대에 최적화 할 수 있게 되었다고 한다. 우선, 기본적인 사용 방법이다. // https://developer.mozilla.org/ko/..
XMLHttpRequest
a, form 태그를 이용하지 않고 get, post 요청이 가능한지 궁금했다. 그래서 fetch api를 공부하던 중, internet Explorer에서는 fetch가 동작하지 않음을 발견했다. 이러한 발견은 fetch, axios 이전에는 서버에 새 페이지를 요청하지 않고 어떻게 데이터를 받아 페이지를 갱신할 수 있었을까? 하는 궁금증으로 이어졌다. explorer에서는 그것이 불가능 했던 것일까? 이러한 이유로 (XHR은 ajax, axios의 기반이 된다고 한다!), fetch를 정리하기 전에 XMLHttpRequest를 먼저 정리해보려고 한다. 이름만 보면 XML 데이터가 큰 역할을 하는 것 같지만, 예전 api들이 xml방식을 주로 썼어서 그런게 아닐지라는 추측이 남아있다고 한다. (최근에는..
Promise
fetch api를 보던 중, Promise에 대한 이해가 부족하다는 것을 알게 되었다. 써볼 일이 없었기 때문에 나에겐 어색한 친구였다. 그래서 이번 글을 통해 막연하게 알고 있던, 하지만 javascript의 중요한 개념 중 하나인 Promise에 대해서 간단하게 정리 및 실습을 해보고자 한다. Promise는 javascript의 표준 내장 객체/ 제어 추상화 객체 중 하나이다. (대표적인 친구로는 제네레이터가 있다.) 아래의 링크를 들어가면 Promise의 정보, 속성, 메소드를 볼 수 있다. developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise Promise 객체는 비동기 작업이 맞이할 미래의 완..
정리할 web api 목록
많다 많아~~ 언제 다 읽어보냐 ㅠㅠㅠ developer.mozilla.org/ko/docs/Web/API/Fetch_API Fetch API Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다. XMLHttpRequest와 같은 비슷한 API가 존재합니다만, 새로운 Fetch API는 좀더 강력하고 유연한 조작이 가능�� developer.mozilla.org developer.mozilla.org/ko/docs/Web/API/Web_Storage_API Web Storage API Web Storage API는 브라우저에서 키/값 쌍을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공합니다. developer.mozilla.org developer.mozi..
;(세미콜론)생략
알고리즘 문제를 풀다가, 가독성이 좋게 String에 반복문으로 접근하는 방법을 찾고 싶었다. 카카오톡 javascript 오픈 채팅방에서 고수님들과 이야기를 통해 아래의 방법들을 알게 되었다. let test = 'test' // 방법 1 Array.from(test).forEach(() => { // console.log(c) }) // 방법 2 for(let c in test) { // console.log(c) } // 방법 3 [...test].forEach((c) => { // console.log(c) }) 방법 3가 제일 마음에 들어서 따라해봤는데, 실행되지않아서 당황했었다. 처음에는 고수님께서 실수로 잘못 알려주신게 아닐까 하고 생각했었다. (원숭이도 나무에서 떨어질 떄가 있으니까!!) ..