반응형
모듈 내보내기 및 가져오기 포스팅 썸네일 이미지

프로그래밍/Node.js

모듈 내보내기 및 가져오기

노드 모듈 시스템은 CommonJS 모듈 시스템과 ES 모듈시스템이 있다. 그리고 보통 하나의 모듈 시스템으로 개발한다. 여러 패키지 설명글을 보다 보면 모듈을 가져오는 예제 코딩을 볼 수 있다. 이때 CommonJS 방식으로 설명하는 곳이 있는가 하면 ES 방식으로 설명하는 곳도 있다. 이런 모듈 시스템 차이를 모르고 맞지 않는 방법으로 모듈을 내보내거나 가져올려고 하면 당연히 에러나 발생한다. CommonJS 모듈 시스템 내보내기 및 가져오기 환경설정 환경 설정에서 모듈 시스템을 따로 설정하지 않았다면 디폴트는 CommonJS 시스템이다. 내보내기 (modusl.exports) CommonJS 방식에서 모듈은 module.exports = 변수나 함수 방식으로 내보낸다. // cj_testFnc.js..

2024.04.17 게시됨

[에러] opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ] 포스팅 썸네일 이미지

프로그래밍/개발 일기

[에러] opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ]

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ] 포토폴리오 정리를 위해서 예전 작업물을 빌드 했더니 위와 같은 에러가 발생했다. 구글링을 해보니 Node.js 버전에 따른 에러였다. 단순한 해결 방법은 Node.js 버전을 다운그레이드 하는 것이다. 하지만 이 방법은 정말 해결이 안될 때 할 수 있는 마지막 방법이고... 현 Node.js 버전을 유지하면서 쉽게 빌드 가능하게 할려면 package.json 에서 scripts를 수정하는 것이다. 내가 예전에 작업한 작업물은 vue.js 기반이고 scripts 내용은 아래와 같다. "scripts": { "serve": "vue-cli-service..

2024.04.02 게시됨

pixi-sound 사용하기 포스팅 썸네일 이미지

프로그래밍/Pixi.js7

pixi-sound 사용하기

Pixi.js는 그래픽 라이브러리다. 그래서 사운드를 제어하는 기능은 지원하지 않는다. 그렇다고 사운드를 다른 라이브러리나 바닐라.js로 관리하기엔 여러모로 불편하다. 다행히 pixi-sound 라이브러리를 설치하면 pixi.js 기반에서 리소스로서 사운드 제어가 가능하다. 설치 pixi.js는 버전에 따라서 리소스 관리나 메서드가 다른점이 있다. 그래서 사용하는 버전에 맞게 pixi-sound도 설치 해줘야 한다. 글을 작성하는 지금 pixi.js는 8버전까지 나왔지만 최근 진행한 업무는 pixi.js 7버전으로 하고 있기에 v5.x 버전으로 설치해 줬다. npm i @pixi/sound@5.2.2 사용 방법 기본 방법 사용 방법은 어렵지 않다. add() 메서드로 색인과 경로를 등록하고, play()..

2024.03.27 게시됨

PIXI.Graphics GPU 최적화 포스팅 썸네일 이미지

프로그래밍/Pixi.js7

PIXI.Graphics GPU 최적화

PIXI.Graphics 은 도형을 그릴 수 있는 클래스이다. 캔버스 화면에 렌더링 되는 요소이기에 사용함에 있어서 성능을 고려해야 한다. 그래서 몇가지 방법으로 GPU 성능 테스트를 해보았다. 테스트 방법 테스트 방법은 간단하다. 가로 세로 100픽셀인 사각형 10,000개를 화면에 그릴 것이다. 그려지는 위치는 모두 동일하다. 결과는 아래 이미지 처럼 나오게 된다. [테스트 1] 그래픽 객체를 10,000개 생성해서 그리기 사각형을 그리는 그래픽 객체를 개별로 10,000개를 생성해서 배치한다. import * as PIXI from 'pixi.js'; export default class Exam_0 extends PIXI.Container { constructor() { super(); this...

2024.03.19 게시됨

반응형