프로그래밍/JavaScript 33

vite build 오류

최근에 이직한 곳의 플랫폼은 admin 환경이 spring boot + vite(vue3)를 쓰고 있었는데, 빌드가 안되는 케이스가 발견 됐다. 로컬 머신이 m1이라서 이슈가 되는 것 같기도 한데, 아래처럼 하면 이슈가 해결 된다. The package "esbuild-darwin-arm64" could not be found, and is needed by esbuild가 발생한다. 이상해서 찾아보니, 아무래 모듈들을 설치해도 동작을 하지 않는다. npm install -g esbuild-darwin-arm64 npm install -g esbuild해도 안되는데, 특정 링크를 보고 아래 명령어를 실행하니 수정 되었다. npm i -D esbuildref. https://github.com/evanw/..

코드스피츠 77 - ES6+ 기초편 6회차 (Generator, Promise, Async/Await)

Generator const infinity = (function*() { let i = 0; while(true) yield i++; }) console.log(infinity.next()) yield를 이용하면 블록을 중간에 끊어주는 효과가 발생 => JS에서는 하나의 문들을 Record로 만들어 주고, 해당 레코드를 실행 할지 말지를 결정 하게 됨. suspension, generator, command pattern등 여러 가지 개념들이 설명 되어 나오는데, 각각을 잘 이해하는게 중요하다. gererator + async + executor generator => 흐름을 멈춰준다. const profile = function*(end, next, r) { const userid = yield $...

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

반응형