Stacks

[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..

[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 라이브..

[React] Hooks의 동작 원리 파악하기 (useEffect 를 중심으로)

이전에 useEffect 훅을 사용할 때 발생했던 에러 때문에 동작 원리가 궁금해 공부를 했었는데, 오늘은 그 내용을 조금 더 깊게 정리하고 기록으로 남겨 공유하고자 한다. (나를 꽤 괴롭게 했던... 카운터 컴포넌트와 그 에러에 대한 기록) 대부분의 내용은 리액트의 공식 문서 (구버전 및 신버전)을 참고하여 작성되었다. useEffect 는 무엇이고, 어떤 상황에서 사용할 수 있는가? 공식문서에 따르면, Effect 훅을 사용하면 함수형 컴포넌트에서 Side Effect를 발생시킬 수 있다고 한다. 일반적인 의미에서 Side Effect는 부수 효과, 즉 원래 목적과 다르게 외부 상태를 변경하는 등, 변화를 발생시키는 효과 (혹은 부작용) 을 의미한다. 함수형 프로그래밍의 기본 개념인 '순수 함수' 란..

SAP UI5 에 대해서 알아보자

SAP UI5로 서비스를 만드는 과제를 받게 되었다. 프레임워크가 좀 생소하기 때문에 이 과제를 위해 공부하는 과정을 기록해보려고 한다. 글을 작성하는 동안 참고한 자료는 하단 참고자료 섹션을 통해 확인할 수 있다. SAP UI5란 무엇인가? HTML, CSS, JS 베이스로 화면(UI)를 구축할 수 있는 일종의 Frame work 이다. 주로 Enterprise 용 서비스를 만들 때 사용되고, 호환성 / 유지보수성 / 국제화 / 견고성 / 보안 / 접근성 / 대용량 데이터 처리 / 효율적인 ui 개발 및 여러 UI 위젯을 포함한다고 한다. 이 프레임워크를 통해 만들어진 서비스를 통틀어서 Fiori 라고 부른다. (이 글에 따르면 Fiori란 SAP 기반 프로덕트의 디자인 시스템을 의미한다고 함. UI ..

[Redux] redux-toolkit 폴더 구조 / 비동기처리 - createAsyncThunk 사용법

✔️ Redux folder structure https://redux.js.org/style-guide/#structure-files-as-feature-folders-with-single-file-logic 리덕스 공식문서에서 추천하는 폴더구조가 있어서 이 방법을 참고해 셋팅을 해보았다. features 라는 폴더에 기능단위로 컴포넌트와 로직을 담당하는 Slice 가 같이 위치한다. 지난 프로젝트에서 디렉토리 구조를 신경쓰지 않고 진행했다가 몽땅 갈아엎는 대참사를 경험한 뒤로 초기셋팅에서 폴더 구조에 신경을 많이 쓰게되는 것 같다. 정해진 정답이 딱 있지 않아서 가능한 많이 참고하고 고민하고 적용해보는 시도가 필요할 것 같다. 이러한 구조에서는 동작을 담당하는 Slice 에 많이 의존하게 되는 것 같..

React Hook Form

validation, 에러, 이벤트 등 필요한 기능을 넣어 form 을 만드는 것을 도와주는 패키지이다. 이 패키지 없이 직접 로그인 input 을 만들고 유효성 검사를 하려면 다양한 에러상황에 대해 일일히 대응해줘야한다. 관리해야할 상황도 많아진다. form에 대한 사용자 경험을 쾌적하게 제공하려면 아주 많은 경우에 대응해야하고 코드가 복잡해진다. 복잡한 코드를 간소화 하면서 form 을 쉽게 만들 수 있도록 도와주는 패키지라고 할 수 있다. 설치 및 상태 등록 npm i react-hook-form 유효성 검사를 위한 form 을 만들기 위해서는… 각 form 의 value 에 해당하는 상태와, input 의 value 변화를 추적하는 이벤트를 만든다. form 을 위한 submit 함수를 만들고, ..

[Next.js + Prisma + Planet scale] 기본세팅

노마드코더 [풀스택]캐럿마켓 클론코딩 강의 내용을 정리한 글입니다. prisma & planet scale 로 DB 셋팅하기 ✅prisma 설치 및 schema 정의 npm i prisma -D npx prisma init #prisma 사용시에는 앞에 꼭 npx 를 붙여서 사용해야함. # schema.prisma 에서 provider 내가 사용할 언어로 변경 datasource db { provider = "mysql" url = env("DATABASE_URL") referentialIntegrity = "prisma" } # db 모델 (스키마) 정의 => 우리 데이터는 이렇게 생겼어요! model User { id Int @id @default(autoincrement()) name String ..