프로그래밍/JavaScript 30

코드스피츠 77 - ES6+ 5회차 (Block, Non-Block & Sync, Async)

코드스피츠 77 - ES6+ 5회차 (Block, Non-Block & Sync, Async) Block, Non-Block Flow를 막고 있는 것을 Block이라고 하고, 그런 상태를 blocking(상태)로 표현 한다. 업계 표준이 존재함. 그 표준 시간 동안 멈춰 있으면, Blocking/Non-Blocking으로도 볼 수 있다. Flow is blocking for(const i of (function*() { let i = 0; while(true) yield i++; })()) console.log(i); // script timeout // 플랫폼의 안정성을 위해 블록 되는 시간이 길면 강제 종료 시킴. Blocking function 점유하는 시간만큼 블록을 일으키는 함수 const f ..

코드스피츠 77 ES6+ 4회차 노트

Complex recursion 단순한 배열을 루프인 경우는 간단히 이터레이션을 작성할 수 있음. { [Symbol.iterator]() { return this; }, data: [1,2,3,4], next() { return { done: this.data.length == 0, value: this.data.shift() } } } 문제는 다층형 그래프는 어떻게 이터레이션을 할 것인가? { [Symbol.iterator]() { return this; }, data: [{ a: [1,2,3,4], b: '-'}, [5,6,7], 8, 9], next() { return /// 어떻게 작성 해야 할까????? } } { [Symbol.iterator]() { return this; }, data: [..

코드스피츠 77 ES6+ 3회차 노트

코드스피츠 77 - ES6+ 3회차 interface 인터페이스란 사양에 맞는 값과 연결된 속성키의 셋트 어떤 Object라도 인터페이스의 정의를 충족시킬 수 있다. 하나의 Object는 여러개의 인터페이스를 충족시킬 수 있다. interface test test라는 키를 갖고 값으로 문자열인자를 1개 받아 불린 결과를 반환하는 함수가 온다. { test(str) { return true; } } interator interface next라는 키를 갖는다. 값으로 인자를 받지 않고, IteratorResultObject를 반환하는 함수가 온다. IteratorResultObject는 value와 done이라는 키를 갖고 있다. 이 중 done은 계속 반복할 수 있을지 없을지에 따라 불린값을 반환한다. ..

코드스피츠 77 ES6+ 2회차 노트

코드스피츠 77 - ES6+ 1/2회차 인사이드 자바스크립트, 자바스크립트를 말하다. 좋은 책이나, 3.1버전의 자바스크립트 엔진 기반으로 설명 되어있다. 현대 ES5이후의 자바스크립트 엔진이 달라졌다. 해마다 엔진 스펙이 달라진다. 엔진 스펙을 공부한다고해서 그게 장점이 되지 않는다. 그러면 뭘 배우냐? 작동원리 보다는 자바스크립트 자체의 추상적인 의미나, 체계를 배우는 게 훨씬 이득이다. 자바스크립트 엔진은 statement를 record로 바꿔주고, Record를 처리 하고, 그 다음 Record를 처리 하는 방식으로 동작한다. statement와 record는 대응 된다. Flow control statement들은 Completion Record로 바뀐다. 그리고 Record를 뭘 선택할지 결정..

코드스피츠 77 ES6+ 1회차 노트

어떤 언어나 프레임워크와 같이 떠내려가지 않게 근본에 대해 공부해야 한다. 프로그램에도 합리주의, 상대주의 철학이 내포되어 있다. 켄트 벡이 말한 프로그램을 작성하는데 3가지를 내포하고 있어야 한다. 가치 의사소통 단순함 유연함 원칙 지역화 중복제거 대칭성 패턴 개발론 설계론 각종 적용 패턴 동기 돈 시간 위에 대해서 켄트벡의 구현 패턴에서 설명하고 있다. 프로그램을 짰을때, 왜 이렇게 했는지? 설명할 수 있어야 한다. 프로그램이 뭔데? 컴퓨터가 뭔데?를 물어보면 그 사람의 기본 지식을 알 수 있다. Program & Timing Language code - Lint Time Machine language - Compile Time File Load 파일이 컴퓨터 메모리에 적재 메모리에 적재 된 것만 프..

Google I/O '19 - Puppeteer 영상 정리

Modern Web Testing and Automation with Puppeteer (Google I/O '19) puppeteer 성능 높이기 cosnt browser = await puppeteer.launch() it ('', async() => { const context = await browser.createIncognitoBrowserContext(); // ... await context.close() }) 브라우저의 새로운 시크릿 컨텍스트를 생성해서 테스팅 하는 것이 더 빠르다. 렌더링이 되기 전에 테스트를 돌리다 보면, 테스트가 실패하는 이슈가 발생하는데, 기본적인 해결책은 sleep을 넣어준다. await page.waitFor(1000) 그런데, 이 방식은 ..

TypeScript에서 뒷통수 맞은 썰 (Promise.all)

Promise.xxx는 인자의 수 제한이 있다? 이 글이 갑자기 순간적으로 리트윗이 되면서 이야기가 많이 오고 갔네요! 잘못된 부분과 설명의 차이를 인지 하는 게 중요하다고 생각합니다. JS에서의 Promise.xxx는 iterable로 처리하기 때문에 실질적인 인자 개수의 제한이 없습니다. MDN-Promise.all Promise.all(iterable); 그런데, TypeScript를 사용하게 되면, 이야기는 달라집니다. (이 설명은 아래에 수정이 있습니다.) TypeScript lib.es2015.promise.d.ts를 보시면 알 수 있습니다. all all all all all all all all all all 위와 같이 총 10개의 all type이 있습니다. 그래서 TS에서의 Promis..

What’s new in JavaScript (Google I/O ’19) 정리

numeric separators BigInt class fields String#matchAll Array#{flat, flatMap} Object.fromEntries globalThis more Intl.* APIs top-level await Promise.{allSettled, any} WeakRef 위와 같은 기능들이 추가 되었고, 모던 브라우저에서는 지원하는 기능도 있고, 아닌 기능도 있다. 그런데, 유용한 기능들이 있어서 정리를 해보고자 한다. class fields const counter = new IncreasingCounter(); counter.value; counter.increment(); counter.value; // ES2015+ class IncreasingCounter..

[React] yarn build fail - query-string 모듈이 문제일 때 해결 방법

query-string module Build 오류 ❯ yarn build yarn run v1.9.4 warning ../package.json: No license field warning ../../package.json: No license field $ NODE_PATH=src node scripts/build.js Creating an optimized production build... Failed to compile. ​ Failed to minify the code from this file: ​ ./node_modules/query-string/index.js:8 ​ Read more here: http://bit.ly/2tRViJ9 ​ error Command failed with e..

[정리] 러닝 리액트 11장 - React Router

Chapter 11. React Router라우팅은 클라이언트의 요청을 처리할 종말점을 찾는 과정이라고 책에서 설명하고 있는데, 쉽게 말하자면, 웹 페이지의 메뉴 버튼을 생각하면 어떠한 일을 하는 것인지 이해하기가 쉽다. 결국 사용자는 원하는 페이지로의 이동을 원하게 되는데, 해당 페이지로 이동을 가능케하는 것이 Router의 역할이다. 11.1 라우터 사용하기export const MainMenu = () => [회사 소개] [이벤트] [제품] [고객 지원] ​ export const AboutMenu = ({ match }) => [회사] [연혁] [서비스] [위치] 라우터를 사용하면, 이 웹사이트의 각 섹션에 대한 경로를 설정할 수 있다. 각 경로는 브라우저의 주소창에 넣을 수 있는 Endpoint..