StudyYeong

내부에서 사용하기 위한 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는 javascript module 번들러이다. 번들링 라이브러리라는 면에서 webpack과 같은 역할을 한다고 볼 수 있는데, 보통 webpack은 애플리케이션 번들링에 사용하고 라이브러리 제작에는 rollup을 사용하는 것이 일반적이라고 한다. rollup 또한 webpack 처럼 모든 기능을 자체적으로 제공하는 것이 아니라 다양한 plugin에 의존한다. 사용자가 필요에 따라 plugin을 설치해 원하는 목적을 달성할 수 있도록 하는 방식이다. Javascript Modulesrollup을 사용하려면 javascript 모듈의 다양한 format을 알고 있어야 한다. CommonJS (CJS) 주로 Node.js 환경에서 사용하는 모듈 시스템이다. 동기적으로 모듈을 로드한다. require() 함수를 사용해 모듈을 가져오고, module.exports 또는 exports 객체를 통해 모듈을 내보낸다. 123456789// math.js (모듈...

Node.js 서버 튜닝을 진행해야 해서 동작 원리부터 정리해 두기로 했다. 분명히 많이 공부한 내용인데 왜 다시보면 새로운 건지 모르겠다. Node.js는 비동기 이벤트 드리븐 Javascript 런타임이다. 프로그램: 컴퓨터가 실행 가능한 코드 모음 프로세스: CPU로부터 자원을 할당받은 독립적인 개체 컴퓨터의 메모리에 적재되어 실행되고 있는 프로그램이다. 스케줄링의 대상이 되는 task이다. 여러 개의 프로세서를 사용하는 것을 멀티프로세싱이라고 한다. 각 프로세스는 최소 한 개의 메인 스레드를 가지고 있다. 멀티태스킹: 프로세스가 CPU를 짧은 시간동안 번갈아가며 점유함으로써 여러 프로세스가 동시에 실행되는 것 처럼 보이게 하는 기법. CPU 코어별 경합이 있는 경우를 일컫는다. 각 프로세스는 서로의 변수나 자료구조에 접근할 수 없으며 접근하기 위해서는 프로세스간 통신(inter-process communication)이나 LPC(local inter-process...

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에 동작하기...

유틸 함수로 만든 함수에서 에러 핸들링에 작성한 코드가 작동하지 않는 것을 발견했다. 원인을 분석하다가 단단히 잘못 작성했다는 것을 깨달았다. 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...

브라우저는 정책이 시시때때로 바뀌어서 언제 에러가 발생할지 모른다. 모바일 디바이스의 경우 iPhone은 하단바 때문에 100vh를 사용해 전체 화면에 적용하려고 하면 하단 부분이 잘리는 경우가 있다. 대부분 최신 브라우저에서 사용 가능한 100dvh 속성이 새로 나왔다고는 하지만 나의 경우 잘 적용되지 않았다. 이를 해결해주는 라이브러리가 있지 않을까 싶어 찾아봤는데 아니나 다를까 좋은 게 있었다. react-div-100vh화요일에 확인했는데 주간 다운로드 수가 10만 정도 되는 것을 보고 써도 되겠구나 싶었다. 사용법은 매우 간단하다. 먼저 라이브러리르 설치한다. 1yarn add react-div-100vh 그리고 사용하고 싶은 곳을 컴포넌트로 감싸주면 된다. 1234567import Div100vh from 'react-div-100vh'const MyFullHeightComponent = () => ( <Div100vh> ...