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의...
VPC 내부 AWS Lambda DynamoDB 연결하기
Elasticache를 사용하려는데 같은 VPC 내부에서만 접근이 가능해서 Lambda를 VPC 내부에 위치시켰다. 그랬더니 DynamoDB로 직접 접근이 되지 않고 무한히 Timeout만 발생했다. 당연히 안되겠지. DynamoDB VPC 엔드포인트 사용을 보고 문제를 해결할 수 있었다. 다만 문서에서는 CLI 명령으로 VPC 엔드포인트를 만들어 입력하기 조금 귀찮아서 나는 콘솔 조작으로 생성했다. VPC 엔드포인트를 생성하는 방법 이외에도 인터넷 게이트웨이와 VPC를 연결해 통신하는 방법도 있으나 보안이 좀 더 좋은 쪽은 역시 VPC 내부를 이용하는 방식이다.VPC 엔드포인트를 사용하면 프라이빗 IP 주소를 사용해 DynamoDB에 액세스 할 수 있으며 VPC와 AWS 서비스 간 트래픽이 Amazon 네트워크를 벗어나지 않는다.DynamoDB에 대한 VPC 엔드포인트 생성은 리전 내 DynamoDB로의 요청이 모두 프라이빗 DynamoDB 종단점으로 라우팅된다. 서비스...
AWS AppSync DynamoDB Resolver update Add 사용
AppSync DynamoDB Javascript Resolver에서 update increment, decrement는 이미 존재하는 row에 대해서만 작동하기 때문에 에러가 발생한다. 이는 update의 increment 사용시 DynamoDB SET 요청으로 변형되기 때문이다. 아래는 increment를 사용한 Javascript resolver의 요청 mapping template이다. javscript resolver1234567891011121314151617181920import { util } from '@aws-appsync/utils';import * as ddb from '@aws-appsync/utils/dynamodb';export function request(ctx) { const { streamId } = ctx.args.input; return...
NextJS 14 AWS Amplify로 배포하기
Amplify로 새 애플리케이션을 만들고 자동으로 선택되는 이미지는 Node v16을 사용해 Next.js 빌드 과정에서 에러가 발생한다. 1234567891011121314151617181920 # Starting phase: preBuild # Executing command: npm ci2024-01-15T04:25:12.847Z [WARNING]: npm2024-01-15T04:25:12.848Z [WARNING]: WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: 'next@14.0.4', npm WARN EBADENGINE ...