Javascript

배경맡고 있는 프로젝트가 Electron, React로 개발된 데스크탑 애플리케이션으로 초기에 모놀리식 아키텍처로 개발 되었다. 혼자 진행하던 프로젝트라서 모놀리식 구조를 유지하였다.모놀리식 아키텍처는 단일 코드 베이스의 애플리케이션 구조를 의미한다. 프로그램의 전통적인 구조로 모든 기능이 하나로 결합되어 있으며 타 애플리케이션과 독립적인 것이 특징이다. 프로젝트가 통합되어 있어 단순하며 보편성이 장점이다. 하지만 규모가 커졌을 경우 복잡도로 인해 유지 보수 및 유연한 확장이 어려울 수 있다. 하지만 UI 변경이 있을 때마다 앱을 새로 빌드하고 배포하는 과정이 비효율적이었다. 반복되는 작업이 점점 번거로워지면서, Electron과 React 코드를 분리해 멀티레포 방식으로 전환했다. React 앱은 S3..

span, div와 같은 비대화형 컨텐츠에 focus 기능을 추가한다. tabindextabindex 특성을 갖는 요소는 포커스가 가능하며 Tab 키를 사용하는 연속적인 키보드 탐색에서 어느 순서에 위치할지 지정한다. 정수 값을 지정할 수 있다.양수(1)tab을 이용한 키보드 탐색 시 값의 순서로 탐색된다0모든 양수 값 요소 탐색 이후에 document 소스 순서에 따라 탐색된다.음수(-1)tab을 이용한 키보드 탐색에서 제외된다. tabindex: 0을 사용하는 것이 일반적인 방법인 것 같다.주의tabindex 값은 0 또는 음수(-1)를 권장하고 있다. 요소의 순서를 변경할 수 있는 CSS 속성 보다 큰 값을 사용할 경우 키보드 사용자가 컨트롤하기 어려워 진다고 한다. 참고https://develop..

JavaScript에서 연속적으로 이벤트가 발생할 경우 핸들러 내부의 코드가 여러 번 실행된다. 예를 들어 핸들러가 서버에 HTTP 요청을 한다고 가정했을 때 연속적으로 이벤트가 발생하면 서버에 부담을 줄 것이다. Debouncing과 Throttling은 이런 상황을 방지하여 성능을 최적화하는 프로그래밍 기법이다. 대표적으로 스크롤, 버튼 클릭, 텍스트 입력 등과 같이 연속으로 발생하는 이벤트에 사용된다. 1. Debouncing특정 이벤트가 연속해서 발생할 때, 마지막 이벤트가 발생하고 일정 시간이 지난 후에 함수를 실행하는 방법이다. 에 입력하는 동안 불필요한 HTTP 요청을 줄이기 위해 많이 사용한다. 예를 들어 검색창을 구현할 때, 텍스트 입력이 완료되고 일정 시간이 지난 후에 요청을 보낸다.예..

목표Iterator 객체를 생성하고, 반복 처리에 활용한다. 사용이유여러 HTTP Request를 보내서 받은 stream 데이터를 사용자 입장에서 가시적으로 확인할 수 있도록 진행바가 필요했다. 구현Set을 이용한 UniqueQueue작업이 담긴 배열을 순차적으로 진행하고 진행 중인 작업 수가 최대치일 경우 보류하여 이후에 진행되도록 작업하였다.class Worker { private readonly works: Work[]; private readonly workQueue: UniqueQueue; private readonly maxWorker = 60; constructor(requests: WorkRequest[]) { this.works = requests.ma..

목표Electron 내에서 태그 또는 window.open()을 사용 시 Electron BrowserWindow로 새로운 창이 열린다.위 동작 대신 애플리케이션이 실행되고 있는 데스크탑의 환경에 따라 인터넷 브라우저 새 창으로 열리도록 설정한다. 코드import { BrowserWindow, shell } from "electron";...const window = new BrowserWindow({ ...});window.webContents.setWindowOpenHandler((details) => { shell.openExternal(details.url); return { action: 'deny' };}); 설명WebContents.setWindowOpenHandler(ha..

사용목적React 컴포넌트는 공통된 상위 요소까지 끌어올려야만 공유될 수 있기에 거대한 트리가 다시 렌더링 되는 상황이 존재한다. Recoil은 React 자체 내장된 상태 관리 기능의 한계를 개선하기 위해 사용한다. 장점get/set 인터페이스로 사용할 수 있도록 boilerplate-free API를 제공React 기능들과 호환 가능성을 갖음상태 정의가 점진적이고 분산되어 있어 코드 분할이 용이함컴포넌트 수정 없이 상태(Atom)를 파생된 데이터(Selector)로 대체 가능 설치npm install recoil 사용RecoilRootRecoil 상태 컴포넌트를 부모 트리에 넣어준다. 예제는 루트 컴포넌트를 활용한다.import React from 'react';import { RecoilRoot, ..

정규표현식 /(https?:\/\/[^\s]+)/g https?:\/\/ http:// 또는 https:// 찾음 [^\s]+ 공백이 아닌 문자열을 하나 또는 그 이상 찾음 g Global을 표현하며 문자열 내 모든 패턴을 검색 활용 var str = `Kakao: https://www.kakaocorp.com` let formatted = str.replace(/(https?:\/\/[^\s]+)/g, '$1');

설치 Nest CLI npm i -g @nestjs/cli nest new project-name git clone git clone https://github.com/nestjs/typescript-starter.git project cd project npm install npm run start 프로젝트 하위요소 (src/) app controller.ts - 단일 경로가 있는 기본 컨트롤러 controller.spec.ts - 컨트롤러에 대한 단위 테스트 module.ts - 애플리케이션의 루트 모듈 service.ts - 하나의 방법으로 기본 서비스를 제공 main.ts - 핵심 기능 NestFactory을 사용하여 Nest 애플리케이션 인스턴스를 생성하는 애플리케이션의 항목 파일 BootStr..

개요vue 프로젝트를 생성하려는데 에러가 발생했다.vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\User\User\AppData\Roaming\npm\vue.ps1 파일을 로드할 수 없습니다.  원인분석실행정책(about_Execution_Policies) 설정과 관련된 이슈로 보여진다. PowerShell에서 악의적인 스크립트가 실행되지 않도록 제어하는 안전 기능이다.  PowerShell execution policiesPolicyName설정AllSigned모든 스크립트와 구성 파일에 신뢰할 수 있는 발행자의 서명이 존재할때 실행가능Bypass어떤 것도 차단하지 않고, 경고나 안내 없이 실행가능DefaultWindows 클라이언트는 Restricted를, Windows 서버는 Remot..