verdaccio private npm registry 구축하기
내부에서 사용하기 위한 npm 라이브러리를 만들게되었다. 테스트를 위해 private npm에 배포하려고 보니 유료 서비스였다. 무료로 해결할 방법을 찾다가 verdaccio를 발견해서 사용해봤는데 사용법이 매우 간편해서 정리해두려한다. registry란 package의 레포지토리이다. yarn, npm, pnpm을 지원한다. 다양한 오픈소스 프로젝트에서 verdaccio를 사용한다. Storybook, pnpm, gatsby, Apollo GraphQL 등 다양하게 사용되고 있다. 설치12npm install -g verdaccioyarn global add verdaccio Verdaccio는 꼭 global로 설치되어야한다. 도커 이미지도 제공하고 있다. 1docker pull verdaccio/verdaccio:nightly-master 사용법사실 설치만 하면 사용할 준비는 모두 끝났다고 볼 수 있다. 123$ verdacciowarn --- config file ...
rollup.js
rollup.js는 javascript module 번들러이다. 번들링 라이브러리라는 면에서 webpack과 같은 역할을 한다고 볼 수 있는데, 보통 webpack은 애플리케이션 번들링에 사용하고 라이브러리 제작에는 rollup을 사용하는 것이 일반적이라고 한다. rollup 또한 webpack 처럼 모든 기능을 자체적으로 제공하는 것이 아니라 다양한 plugin에 의존한다. 사용자가 필요에 따라 plugin을 설치해 원하는 목적을 달성할 수 있도록 하는 방식이다. Javascript Modulesrollup을 사용하려면 javascript 모듈의 다양한 format을 알고 있어야 한다. CommonJS (CJS) 주로 Node.js 환경에서 사용하는 모듈 시스템이다. 동기적으로 모듈을 로드한다. require() 함수를 사용해 모듈을 가져오고, module.exports 또는 exports 객체를 통해 모듈을 내보낸다. 123456789// math.js (모듈...
NodeJS 구조 및 성능 향상 시키기
Node.js 서버 튜닝을 진행해야 해서 동작 원리부터 정리해 두기로 했다. 분명히 많이 공부한 내용인데 왜 다시보면 새로운 건지 모르겠다. Node.js는 비동기 이벤트 드리븐 Javascript 런타임이다. 프로그램: 컴퓨터가 실행 가능한 코드 모음 프로세스: CPU로부터 자원을 할당받은 독립적인 개체 컴퓨터의 메모리에 적재되어 실행되고 있는 프로그램이다. 스케줄링의 대상이 되는 task이다. 여러 개의 프로세서를 사용하는 것을 멀티프로세싱이라고 한다. 각 프로세스는 최소 한 개의 메인 스레드를 가지고 있다. 멀티태스킹: 프로세스가 CPU를 짧은 시간동안 번갈아가며 점유함으로써 여러 프로세스가 동시에 실행되는 것 처럼 보이게 하는 기법. CPU 코어별 경합이 있는 경우를 일컫는다. 각 프로세스는 서로의 변수나 자료구조에 접근할 수 없으며 접근하기 위해서는 프로세스간 통신(inter-process communication)이나 LPC(local inter-process...
serverless esbuild로 패키지 사이즈 줄이기
serverless로 AWS Lambda를 패키징 하다보니 코드가 늘어날 수록 패키징 및 deploy 시간이 점점 더 늘어났다. 이대로 안되겠다 싶어 방법을 찾아보던 중 esbuild를 발견해 적용해보았는데 결과는 대만족! 설치공식 홈페이지에서 자세한 옵션과 설치 및 적용 방법을 볼 수 있다. 적용 방법은 너무너무 간단하다. 1yarn add -D https://www.serverless.com/plugins/serverless-esbuild 그리고 serverless.yml 파일에 plugin을 추가하면 된다. 123# serverless.ymlplugins: - serverless-esbuild 주의할 점은 기존에 사용하고 있던 플러그인과 충돌할 수 있다는 점이다. 나의 경우 타입스크립트 빌드를 위해 사용하던 serverless-plugin-typescript 플러그인과 충돌한 것 같다. serverless-esbuild는 추가 플러그인 없이도 JS와 TS에 동작하기...
Javascript 비동기 에러핸들링
유틸 함수로 만든 함수에서 에러 핸들링에 작성한 코드가 작동하지 않는 것을 발견했다. 원인을 분석하다가 단단히 잘못 작성했다는 것을 깨달았다. 12345678910111213141516171819202122232425const update = async ( tableName: string, PK: string, SK: string, updateExpressions: { UpdateExpression: string; ExpressionAttributeValues: Record<string, any>; ReturnValues?: ReturnValue; ExpressionAttributeNames?: Record<string, any>; ConditionExpression?: string; }, ) => { try { const...
React 모바일 디바이스 100vh 사용하기
브라우저는 정책이 시시때때로 바뀌어서 언제 에러가 발생할지 모른다. 모바일 디바이스의 경우 iPhone은 하단바 때문에 100vh를 사용해 전체 화면에 적용하려고 하면 하단 부분이 잘리는 경우가 있다. 대부분 최신 브라우저에서 사용 가능한 100dvh 속성이 새로 나왔다고는 하지만 나의 경우 잘 적용되지 않았다. 이를 해결해주는 라이브러리가 있지 않을까 싶어 찾아봤는데 아니나 다를까 좋은 게 있었다. react-div-100vh화요일에 확인했는데 주간 다운로드 수가 10만 정도 되는 것을 보고 써도 되겠구나 싶었다. 사용법은 매우 간단하다. 먼저 라이브러리르 설치한다. 1yarn add react-div-100vh 그리고 사용하고 싶은 곳을 컴포넌트로 감싸주면 된다. 1234567import Div100vh from 'react-div-100vh'const MyFullHeightComponent = () => ( <Div100vh> ...
React 컴포넌트 테스트 하기
테스트에 사용한 라이브러리는 @testing-library과 jest이다.@testing-library React 뿐만 아니라 UI 컴포넌트 테스트를 위한 툴을 가지고 있는 패키지이다. test runner는 패키지에 포함되어 있지 않으며 사용자가 원하는 테스트 프레임워크를 사용하면 된다. @testing-library를 사용하지 않고도 테스트를 할 수는 있지만 이 라이브러리를 사용하면 테스트에 필요한 세부 코드 작성을 줄려주기 때문에 사용하는 것이 좋다. 더 궁금하면 이 글을 읽어보면 좋을 것 같다. (Testing implementation details) act테스트에 사용하는 React API로 act가 있다. 도큐먼트에서는 컴포넌트에 변화가 생기는 작업을 수행할 때 act로 감싸라고 한다. 123456it ('renders with button disabled', async () => { await act(async () =>...
EC2 스토리지 용량 변경하기
‘No space left …’ 에러가 발생했을 때 스토리지 용량을 수정하는 방법이다. 그 전에 먼저 스토리지가 모두 사용중인 게 맞는지 확인이 필요하다. 1234567891011ubuntu@[ip]: ~$ df -hFilesystem Size Used Avail Use% Mounted on/dev/root 6.8G 6.7G 0 100% /tmpfs 922M 0 922M 0% /dev/shmtmpfs 369M 34M 336M 10% /runtmpfs 5.0M 0 5.0M 0% /run/lockefivarfs 128K 3.3K 125K 3% /sys/firmware/efi/efivars/dev/nvme0n1p16 891M 129M 700M 16% /boot/dev/nvme0n1p15 98M 6.4M 92M 7%...
AWS cli credential helper로 codecommit 인증하기
이미 저장된 Codecommit credential이 있어서 다른 계정의 codecommit을 이용하려 할 때 credential helper 팝업이 뜨지 않아 이용이 불가능했다. 멀티 계정으로 codecommit을 이용하기 위해 AWS cli credential helper를 등록해 문제를 해결할 수 있었다. 사용 방법 Codecommit 권한이 있는 IAM 유저를 생성한다. (로컬 머신에 이미 계정 프로필이 등록돼있다면 스킵한다.) 새로운 IAM 유저를 생성할 것 이라면 AWSCodeCommitPowerUser 정책을 추가하면 된다. AWS cli가 설치되지 않았다면 설치를 먼저 진행한다. ([링크]( Getting Set Up with the AWS Command Line Interface)) AWS cli에 프로필을 등록한다. 터미널에서 아래 커맨드를 실행한다. 1aws configure 그 이후 나타나는 프롬프트 메세지를 보고 설정값을 입력한다. ...
serverless environment variable
serverless 프레임워크에서 환경 변수를 사용하는 방법은 여러가지가 있다. 그중 가장 간단하다고 생각되는 방법은 비교적 나중에 추가된 기능인 .env 파일을 그대로 읽어오도록 하는 방법이다. 적용 방법 serverless.yml1useDotenv: true serverless.yml 파일에 useDotenv 옵션을 true로 넣어주면 된다. serverless에서 지원하는 .env 파일은 .env.{stage} 파일과 .env 파일이다. 만약 두 파일이 모두 존재한다면 .env.{stage} 파일을 로드하며, 이 때 stage가 명시되지 않은 경우 dev 파일을 로드한다. env 파일 작성여느 ENV 파일과 같은 방식으로 작성하면 된다. 12BASE_URL=my.api.comPROTOCOL=https serverless.yml 파일에 환경 변수 정의.env 파일에 등록한 변수는 serverless의...