nvm 이란 Node Version Manager의 약자로 사용자별로 설치되고 셸별로 호출되도록 설계된 node.js용 버전 관리자입니다. nvm은 모든 POSIX 호환 셸(sh, dash, ksh, zsh, bash), 특히 Unix, macOS 및 Windows WSL 플랫폼에서 작동합니다. 설치 방법 설치 링크 사용법 Listing Version To Download, compile, install Long Term Support Use 설치중 겪은 에러 python version 에러 lts/gallium 설치 시 mac에 설치된 python 버전이 3.11 이여서 발생한 오류 해결방법 pyenv 설치 후 호환되는 python 버전을 설치하여 node 설치 재 진행 curl 404 not found 에러 상대적으로 구 버전인 node 의 경우(16 아래버전) Apple Silicon의 아키텍쳐인 arm64를 지원하지 않아 패키지 설치에 오류가 발생하고 node가 정상적으로…

일반적인 로그인 방법 가장 쉬운 방법으로는 git config 에 계정정보를 저장하는 방법이 있다. 이후 아이디와 패스워드를 입력하면 사용하려는 github 계정이 저장된다. 2개이상의 계정을 사용해야할 경우에는?! 검색을 하였을 때 가장 많이 언급되는 방법은 ssh-key를 이용하는 방법이었다. ssh-key 생성 ssh 디렉토리로 이동 github 이메일로 ssh-key 생성 (명령어 실행 시 암호 입력을 받는데 엔터 2번 쳐서 skip 가능) ls 명령으로 생성된 key 정보를 확인할 수 있음 (idrsatest, idrsatest.pub - 개인키, 공개키) ssh-agent에 ssh-key 추가 (계정 수 만큼 ssh-add 진행) github 계정에 ssh 키 등록 생성된 공개키 파일의 내용을 복사 github에 해당 생성한 사용자 계정으로 로그인 프로필의 settings 메뉴로 이동 좌측의 SSH and GPG keys 진입 new SSH 클릭하여 복사한 공개키 저…

React Native React Native 란 iOS, Android 에서 동작하는 네이티브 모바일 앱을 만드는 자바스크립트 프레임워크 HTML, CSS, JS 기반의 웹뷰(webview) 방식이 아닌 네이티브 엘리먼트를 사용하여 구현 Web, Windows, Mac OS, tvOS 기반 등의 Android, iOS 뿐만 아닌 타 플랫폼도 지원함 장점 러닝커브 : Javascript 기반 개발자의 경우 타 네이티브 앱 개발에 비해 진입장벽이 매우낮음 높은 재사용성 : 작성된 코드 대부분 플랫폼 간의 공유가 가능해서 iOS, Android를 동시에 개발 할 수 있다. Fast Refresh : 변경된 코드를 저장하기만 해도 자동으로 변경된 내용이 화면에 적용된다. 이 기능으로  등의 작업을 생략하고 불필요한 작업시간을 줄일 수 있다. 성능 저하 문제점 해결 : 작성된 코드에 따라 각 플랫폼에 알맞은 네이티브 엘리먼트로 전환되기 때문에 큰 성능 저하 없이 개발이 가능하다. 쉬운 접…

React Query 살펴보기 React 앱에서 비동기 로직을 쉽게 다루게 해주는 라이브러리 Server State를 관리 Server State Client에서 제어하거나 소유되지 않은 원격의 공간에서 관리되고 유지됨 Fetching이나 Updating에 비동기 API가 필요함 다른 사람들과 공유되는 것으로 사용자가 모르는 사이에 변경될 수 있음 신경 쓰지 않는다면 잠재적으로 “out of date”가 될 가능성을 지님 라이프사이클 fresh(데이터가 프레시한 상태) : 새롭게 추가된 쿼리 인스턴스 → active 상태의 시작, 기본 staleTime이 0이기 때문에 아무것도 설정을 안해주면 호출이 끝나고 바로 stale 상태로 변한다. staleTime을 늘려줄 경우 fresh한 상태가 유지되는데, 이때는 쿼리가 다시 마운트되도 패칭이 발생하지 않고 기존의 fresh한 값을 반환한다. staleTime: 데이터가 fresh 상태에서 stale로 변경되는데 걸리는 시간 fetch…

Vite 소개 그동안의 프론트엔드 번들링의 문제점 브라우저에서 ES module을 지원하기 전부터 Webpack, Rollup 등 과 같은 도구를 사용하여 번들링 작업을 통해 프론트엔드 개발을 진행 하지만 Webpack과 같은 js 기반의 번들러의 경우 방대한 규모의 프로젝트를 번들링하는 과정에서 병목현상이 발생 이를 해결하기위해 vite는 ES module 및 네이티브 언어로 작성된 번들러를 사용하여 문제를 해결 서버 구동 Cold-Starting(최초로 실행되어 이전에 캐싱한 데이터가 없는 경우)방식으로 개발서버를 구동할 때 번들러 기반의 도구의 경우 모든 소스코드에 대해 빌드작업을 마쳐야만 완전한 페이지를 제공할 수 있었음 vite는 dependencies 와 source code 두가지로 나누어 개발서버를 시작하도록 하여 해결 Dependencies Esbuild를 기반으로한 사전번들링 기능 Esbuild는 자바스크립트 기반이 아닌 Go로 작성되어 기존의 번들러 대비 10~…

rollup.js 개요 Webpack 과 유사한 Javascript 모듈 번들러 ES6 모듈형식으로 빌드 결과물을 출력할 수 있음 loader나 설정파일이 복잡한 Webpack에 비해 설정이 간단한 편 코드 스플리팅에 강점을 가짐(중복 제거에 특화됨) 빠른시작 —format 옵션을 통해 브라우저(iife), node(cjs), 브라우저와 node를 모두(umd) 지원하는 번들링이 가능 설정 input: entry 파일 output dir: build 폴더명 format: build format, cjs로도 설정 가능 exports: Name for UMD export sourcemap: sourcemap generate 여부 preserveModules: 기본값 false, true일 경우 빌드 결과물의 폴더 구조를 유지가능 inlineDynamicImports: 동적 import 해당옵션을 사용하였을때 lazy loading 관련 이슈가 발생할 수 있을 것 으로 보임 https…

Webpack Webpack 옵션 optimization splitChunks chunks initial: 기본 Chunk Spliting async: 비동기로 호출하는 요소 중 중복되는 부분을 Spliting all: 모든 코드의 중복되는 요소들을 확인하여 Spliting minimize Bundle 파일을 압축하는 용도 압축시 TerserPlugin을 사용하여 압축을 진행하여 terser-webpack-plugin 모듈이 필요 Webpack5부터는 TerserPlugin이 내장되어 생략가능 Terser ES6+ 를 위한 자바스크립트 parser 및 mangler/compressor 툴킷 webpack TerserPlugin에서는 자바스크립트를 축소하는데 사용 devtool 빌드된 파일과 원본파일을 연결시켜주는 역할을 수행(배포된 파일을 디버깅 할 때 사용) 옵션 비교 표 Vue Cli 3.x 이상 Vue cli 2 이하에서는 webpack.config.js 파일이 프로젝트 루트…

CASL.js 소개 지정된 클라이언트가 액세스할 수 있는 리소스를 제한하는 JavaScript 동형 인증 라이브러리 User Action 사용자가 APP에서 실제로 수행할 수 있는 작업을 설명, 비즈니스 로직에 따라 단어로 정의(일반적으로는 동사) (ex. prolong, CRUD 형식인 create, read, update, delete) Subject 사용자 작업을 확인하려는 제목 또는 제목의 유형, 일반적으로 비즈니스 또는 도메인 entity Fields 일치하는 Subject’s fields 로만 사용자 작업을 제한하는 데 사용할 수 있습니다. (ex. status field를 업데이트 할 수 있도록 허용하고 description 또는 title의 경우 업데이트를 허용하지 않을 수 있습니다.) Conditions 일치하는 subject에만 사용자 작업을 제한하는 조건 기준입니다. 특정 subject에 대한 권한을 부여해야 할 때 유용하게 사용 규칙 정의 defineAbili…

Lodash.js 소개(문서) 인기있는 JavaScript 라이브러리 중 하나로 주로 Array, Collection, Object등의 데이터 구조를 Native 함수보다 쉽게 사용할 수 있도록 지원해 주는 역할을 합니다. lodash라는 명칭대로 전체 라이브러리를 import 할 경우 위의 방식으로 주로 사용하며 프로젝트 번들 최적화 시 사용할 Method 만 호출하여 사용하는 방식을 이용합니다. tree-shaking 방식을 통해 번들 용량을 좀 더 최적화 시킬 수 있는 lodash-es 라이브러리도 존재합니다.(es모듈형태) Methods Array Methods arguments  (Array)  (Function)  (number) return: index number arguments  (Array)  (Function) return: 제거된 요소가 담긴 배열 arguments  (Array) returns: filtered array 배열내의 false, null…

Functional Programing Js Library 메서드 체이닝 과 메서드 파이프라인 lodash 메서드 체이닝 ramdajs 메서드 파이프라인 메서드 체이닝과 메서드 파이프라인의 차이점 age 필드를 지운다. work 필드 명을 job 으로 바꾼다. 메서드 체이닝 (단단한 결합) 메서드 파이프라인 (느슨한 결합) lodash(lodash/fp) 특징 Promise는 기본적으로 지원되지 않음 오토커링 지원 fp에서 추가된 함수 존재 placeholder eslint-plugin-lodash-fp ramdajs 특징 immutability과 side-effect 발생하지않도록 순수 함수적 스타일을 강조 람다의 모든함수는 오토커링을 지원 재사용 가능한 함수 함수에 대한 매개 변수는 마지막에 제공 주요 기능 Pipe Fx ts(partial.js) 특징 지연평가 동시 요청 처리 타입 추론 iteration protocol 준수 (반복가능, 비동기 가능) 샘플코드 fp-ts 특…

오픈소스 개발(NPM + GitHub) NPM(Node Package Manager) NPM 개념 소프트웨어의 라이브러리 또는 레지스트리의 역할 Node.js의 패키지관리자로 생성되었기 때문에 Node.js 설치 시 함께 설치됨 Package.json npm으로 설치한 패키지가 정의되는 파일 npm init 시 최초 해당파일이 생성되며 npm install 진행 시 해당 파일에 패키지가 명시됨 Package-lock.json Package.json과 달리 npm init 시에 생성되지 않으며 npm 패키지를 설치, 수정, 삭제 등을 진행할때 생성되며 각 패키지의 의존성관리를 목적으로함 각각의 패키지에서 특정 패키지를 여러 패키지에서 사용할 수 도 있고 특정 패키지의 다양한 버전을 다른 패키지에서 사용할 수 있음. 이러한 경우 버전간의 충돌로 인해 빌드가 되지않거나 오류가 발생하는 것을 방지하기위해 존재함 패키지 공유 NPM Registry에 배포하여 공유할 수 있음 가입과 사용은 …

Socket.IO 1. 소개 WebSocket을 기반으로 클라이언트와 서버의 양방향 통신을 가능하게해주는 모듈(라이브러리) WebSocket 기반의 통신을 사용하는 이유 데이터 송/수신이 계속 이루어져야 하는 어플리케이션 개발 시 http 프로토콜만 사용해서는 단방향방식의 특성상 서버에 데이터 업데이트가 존재하지 않았음에도 클라이언트에서 불필요한 요청을 계속 송신해야하기 때문에 굉장히 비효율적으로 동작함 WebSocket 과의 차이점 WebSocket - 양방향 통신을 위한 프로토콜 HTML5 웹 표준 기술 매우 빠르게 작동하며 통신할 때 아주 적은 데이터를 이용함 이벤트를 단순히 듣고, 보내는 것만 가능함 Socket.io WebSocket의 경우 오래된 브라우저의 경우 지원되지 않는문제가 있는데 Socket.io 사용으로써 해결 가능 표준 기술이 아니며, 라이브러리임 소켓 연결 실패 시 fallback을 통해 다른 방식으로 알아서 해당 클라이언트와 연결을 시도함 방 개념을 이용…

Vercel Edge Network Vercel Edge Network는 인터넷과 Vercel 배포 사이에 위치합니다. 이러한 유형의 네트워크 토폴로지는 콘텐츠 전송 네트워크 또는 CDN이라고도 합니다. Regions 가능한 한 빨리 요청을 라우팅하기 위해 Edge Network는 전 세계 수십 곳에서 실행되고 있습니다. 이러한 모든 위치(Regions 라고 함)에서 Serverless Funtion 및/또는 정적 파일을 출력하는 빌드를 생성하는 배포를 생성할 수 있습니다. 그러면 Edge Network는 들어오는 요청을 Serverless Funtion이 실행 중인 가장 가까운 위치로 자동으로 전달합니다(정적 파일은 항상 전체 네트워크에 분산되므로 특정 위치에 국한되지 않음). 배포의 Serverless Funtion이 요청된 지역에 생성되지 않은 경우 요청은 배포된 Serverless Funtion이 포함된 가장 가까운 지역으로 전달됩니다. Caching Vercel Edge …

Vercel Edge middleware Edge middleware란 사이트에서 요청이 처리되기 전에 실행되는 코드입니다. 요청에 따라 응답을 수정할 수 있습니다. 캐시보다 먼저 실행되기 때문에 middleware를 사용하는 것은 정적으로 생성된 콘텐츠에 개인화를 제공하는 효과적인 방법입니다. 들어오는 요청에 따라 응답을 반환하기 전에 사용자 지정 논리를 실행하고 rewrite, redirect, headers 추가 등을 수행할 수 있습니다. Vercel의 Edge Network에 전역적으로 배포되며 서버 측 로직을 방문자의 출처에 가까운 Edge로 이동할 수 있습니다. 미들웨어는 Chrome 브라우저에서 사용 하는 것과 동일한 고성능 V8 JavaScript 및 WebAssembly 엔진 에 구축된 Vercel Edge Runtime 을 사용합니다. Edge Runtime은 Web Standard API(FetchEvent, Response, Request)의 하위 subse…

👋 소개 평소에 개발 관련 이슈나 노트 내용을 정리하고 글로 작성할 블로그형태를 찾다가 뒤늦게 나마 GitHub Pages 기능을 활용하여 블로그를 만들게 되었습니다. 그에 따라 평소에 GitHub Pages에 관심이 있으신 분들을 위해 생성 방법에 대해 공유하려고 합니다. GitHub Pages 란? 웹서버의 경우 직접 웹서버용 PC를 이용하여 운용하는 것은 쉽지 않은 일이며 관리에도 힘이 들기 떄문에 주로 웹호스팅 업체를 사용하여 웹서버에 어플리케이션을 업로드합니다 국내의경우 Cafe24, 가비아, dothome 등의 호스팅 업체들이 있으며 세계적으로는 Amazon Web Services (AWS)를 많이 사용하는 추세입니다. AWS의 경우 세계 각 지역에 데이터센터를 두고 있어 한국에서도 사용하는데 큰 어려움이 있지는 않습니다. 2021년 들어 주목해볼 고객 사례로 AWS측에서 발표한 링크도 추가해 두겠습니다. https://aws.amazon.com/ko/blogs/kore…