ALL

[Electron.js] electron 의 rebuild 란?

electron 의 rebuid 라는 커맨드는, 현재 설치된 Electron 버전에 대해 네이티브 Node.js 모듈을 재 구축하기 위해 사용한다. 일전에 사내 프로젝트에서 electron 과 serialport 라이브러리를 사용할 때, 이 rebuild 커맨드에 대해 알지 못해 상당히 해멨던 적이 있는데... 간단하게나마 정리해 보고자 한다. 왜 reubild 와 같은 작업이 필요하냐? rebuild - 그러니까 재컴파일 과정이 없으면 일렉트론 앱과 네이티브 Node.js 모듈, 그러니까 파일 시스템, 운영체제 등 저수준 기능에 접근하는 모듈간에 문제가 발생할 수 있다. 왜냐면, 일렉트론의 Node.js 는 표준 Node.js 환경과 다른 버전을 사용하기 때문이다... 알다시피 일렉트론은 크로미움 + ..

[Node.js] Node의 require module 은 어떻게 동작하는가?

CommonJS 모듈 시스템 하나의 자바스크립트 파일은 분리된 모듈로서 취급된다. 그리고 nodejs는 CommonJS 시스템을 쓴다. require() 그리고 exports 혹은 module.exports 프론트에서 쓰이는 import/export 는 ES Module 시스템 mjs 를 사용하면 Node 에서도 ES 모듈 시스템을 쓸 수 있다. 하지만 대중적인 pick 은 아닌 것 같음. 모듈을 require 하면 무슨 일이 일어나느냐? const http = require('http'); const fs = require('fs'); 아래와 같은 단계를 거친다. Resolving & Loading 모듈의 주어진 경로를 해석하고 로딩한다. 모듈의 종류는 크게 세 가지가 있음. http 와 같은 Node..

[Node.js] Streams 에 대해서 알아봐요.

Streams 란 데이터를 작은 조각(chunk) 로 나누어서 처리하는 방식 전체 데이터를 읽거나 쓰지 않고, 메모리에 저장도 하지 않는다. 따라서 큰 데이터를 효율적으로 다룰 수 있고, 메모리 절약 및 더 빠른 I/O 작업 처리가 가능해진다. Streams 또한 Event Emitter 의 인스턴스 따라서 Event 를 emit 하고 그에 대한 리스너 & 핸들러에 의해 이벤트 루프를 통해 핸들링된다. 4가지 종류의 Streams Readable 말 그대로 데이터를 읽을 수 있는 stream http request, fs read streams 가 있다. 발생시키는 주요 이벤트로는 data, end Wrieable 말 그대로 데이터를 쓸 수 있는 stream http response, fs write s..

[TIL] 2024-0123 : this 바인딩

Findings - 자바스크립트의 this 문제 : 취준때 공부했던 내용을 실무에서 마주하다니... - 일반적인 함수선언 방식에서 this 는 호출 시점에 결정. - 화살표 함수 방식에서 this 는 선언 시점에 결정. 만약 클래스의 메서드로 일반 함수를 정의해두고 외부에서 호출한다면 그 호출 시점에 결정이 된다. 일반 함수 문법을 사용한다면... - 객체의 메서드로 호출시, 해당 메서드를 호출한 객체를 가리킴 - 단독 함수로 호출될 시, 전역객체 혹은 undefined - 생성자 함수로 사용이 된다면 새로 생긴 객체 인스턴스 오늘 내 코드의 경우엔, 다른 클래스에서 this를 사용해 메서드를 정의해두고 그 메서드를 또 다른 클래스에서 호출했기 때문에, 그 시점의 this 를 가리켜 의도치 않게 동작을 ..

[Electron.js] 일렉트론에 대해서 알아보자!

최근 사내에서 진행하는 키오스크 프로젝트에서 일렉트론을 사용해 데스크탑 앱을 만들어보고 있다. Introduction | Electron Welcome to the Electron documentation! If this is your first time developing an Electron app, read through this Getting Started section to get familiar with the basics. Otherwise, feel free to explore our guides and API documentation! www.electronjs.org 일렉트론이란 웹에서 사용하는 기술, HTML, CSS, JS 를 가지고 데스크탑 프로그램을 개발할 수 있는 프레임워크이다..

[Node.js] Node란 무엇이냐..이벤트 루프란..?

최근에 Nest 를 공부하기 시작했는데, 뭔가 더 기본적인 개념을 알고 싶어서 먼저 Node.js 에 대해 정리를 해보려고 한다. Node.js 란? 자바스크립 런타임 환경, 자바스크립트로 서버 환경을 개발할 수 있는 런타임이다. 비동기 이벤트 기반의 런타임이라고 하는데... 그래서 이벤트 루프가 주요한 개념으로 포함된다. 노드의 구성 요소로는 크게 V8 엔진과 libuv 라이브러리가 있다. V8 엔진은 구글 크롬의 브라우저 엔진과 동일한 것이고, 인터프리터를 기반으로 자바스크립트 코드를 기계어로 변환하는 역할을 함. 그리고 libuv 라이브러리는 비동기 I/O를 담당한다. 이벤트 루프 및 비동기식 태스크 처리, 파일시스템 접근 및 네트워크 등... 서버사이드 개발을 위해 필요한 동작을 libuv 라이브..

[TIL] 2024-0110

Facts - 어제에 이어 여전히 electron 을 파헤치는 중... Feelings - 어쩌다보니 키오스크 개발을 웹 프론트에서 핸들링 하게 되었다. (사실 내가 할 수 있다고! 좋다고 했음..~) - 처음엔 Next.js 로 빌드해서 웹 서버로 띄웠었는데, 기기 펌웨어와 요러쿵 죠러쿵 통신을 해야하는 부분이 있어서 일렉트론으로 로컬 서버를 띄운 뒤에 private Ip 로 post 요청을 보내는 방식으로 했다가... - 동료 개발자분께서 여러 날의 디깅을 해주신 끝에 자동 업데이트 기능이 완성되어서, 본격적으로 일렉트론으로 코드를 옮겨 수정하고 있다. - 일단 전에 하던 것에 비해 새롭게 배우고 부딪혀야 할 것이 많긴 한데, 그게 꽤 재밌다. 웹 환경이 아닌 네이티브 환경이다보니 IPC 라던지, 보..

[TIL] 2024-0109 electron IPC 모듈로 통신하기

Facts - Next.js 로 웹서버에서 띄워주던 UI 를 Electron 내의 renderer 로 옮기는 통합 작업 진행 Findings - Electron 에서 로컬 경로의 이미지를 로드하려면, custom protocol 을 설정해주어야 한다. 그 이유는 일렉트론이 chronium 과 node를 기반으로 하는데 이 두 환경 사이의 상호작용에서 보안 이슈가 발생할 가능성이 있기 때문에 그렇다고 한다. (어떻게 동작하길래 보안 이슈가 발생할 수 있는거지..?) - electron 에서는 main 프로세스와 UI를 띄워주는(브라우저 같은..) renderer 프로세스를 갖는다. 이 두 프로세스 간 통신을 위해서는 IPC 모듈을 사용해야 하는데, 렌더러 프로세스에서 사용할 수 있는 IpcRenderer ..

file, blob 객체의 차이점

최근 사내 프로젝트를 진행하던 도중, ai 인식을 위해 키오스크 기기에서 촬영한 이미지 파일을 서버로 보내야 하는 상황이 있었다. 이미지 파일을 blob 형식으로 보냈는데, 서버에서 정상 인식이 되지 않는 상황이 발생해 디깅을 하다, File 형식으로 보내야 한다는 것을 깨닫고... 두 형식의 차이점이 무엇인지 궁금해졌다. 결론부터 말하자면, File 객체는 Blob 의 확장이다. 만약 input 을 통해 file 을 업로드 하면, 이 데이터의 형식이 바로 File 형식이다. 테스트를 위해 임시로 input 을 통해 file 을 받아 업로드 했을 때 정상 동작했던게 바로 이런 차이가 있기 때문이다... 그렇다면 Blob 객체란 무엇이냐? Blob 은 Binary Large Object 의 약자로, 이진 ..

151. Reverse Words in a String

Reverse Words in a String - LeetCode Can you solve this real interview question? Reverse Words in a String - Given an input string s, reverse the order of the words. A word is defined as a sequence of non-space characters. The words in s will be separated by at least one space. Return a strin leetcode.com 내 풀이 /* [문제] - 문자열 s가 주어졌을 때, 단어들의 순서를 뒤집어라 - 단어들은 공백을 기준으로 나뉘고, 공백을 기점으로 뒤집어야함 - s가 주어질 때 ..