프로그래밍 248

Volta?! (JavaScript command line tool)

volta (JavaScript command line tool) 원래 node 버전 매니저로 nvm을 제일 많이 썼다. 실제 실무에서도 물리서버에서 쓰거나, jenkins(유물 같지만, 실무에서도 짱짱하게 잘 썼다. 현재는 github action을 쓰고 있다.)에서도 nvm을 설치해서 쓰곤 했는데, 이제 로컬에서는 volta를 쓴다. 쓴지는 좀 됐다. volta를 쓰는 이유는 nvm보다 훨씬 빠르다. 인터랙션이 훨씬 빨라서 쓰게 되었고, nvm 보다 더 가벼운 느낌의 Node 버전 매니저는 n이라는 것도 있는데, 잠시 쓰다가 바로 volta로 왔다. volta install # install Volta curl https://get.volta.sh | bash # install Node volta i..

코드스피츠 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..