$ ls -lt posts/ | sed -n 41,60p

SY Tech Blog_

• 2024-10-14

  EC2 스토리지 용량 변경하기

  ’No space left ...’ 에러가 발생했을 때 스토리지 용량을 수정하는 방법이다. 그 전에 먼저 스토리지가 모두 사용중인 게 맞는지 확인이 필요하다. 100% 사용중으로 나와서 스토리지 용량 변경을 진행했다. 변경 방법 1. 콘솔에서 연결된 EBS 스토리지 용량을 수정한다. 2. 인스턴스에서 를 설치한다. 3.…

  [cloud]
• 2024-03-29

  AWS cli credential helper로 codecommit 인증하기

  이미 저장된 Codecommit credential이 있어서 다른 계정의 codecommit을 이용하려 할 때 credential helper 팝업이 뜨지 않아 이용이 불가능했다. 멀티 계정으로 codecommit을 이용하기 위해 AWS cli credential helper를 등록해 문제를 해결할 수 있었다. 사용 방…

  [cloud]
• 2024-03-25

  serverless environment variable

  serverless 프레임워크에서 환경 변수를 사용하는 방법은 여러가지가 있다. 그중 가장 간단하다고 생각되는 방법은 비교적 나중에 추가된 기능인 파일을 그대로 읽어오도록 하는 방법이다. 적용 방법 serverless.yml serverless.yml 파일에 옵션을 true로 넣어주면 된다. serverless에서 지원…

  [cloud]
• 2024-03-05

  VPC 내부 AWS Lambda DynamoDB 연결하기

  Elasticache를 사용하려는데 같은 VPC 내부에서만 접근이 가능해서 Lambda를 VPC 내부에 위치시켰다. 그랬더니 DynamoDB로 직접 접근이 되지 않고 무한히 Timeout만 발생했다. 당연히 안되겠지. DynamoDB VPC 엔드포인트 사용을 보고 문제를 해결할 수 있었다. 다만 문서에서는 CLI 명령으…

  [cloud]
• 2024-01-24

  AWS AppSync DynamoDB Resolver update Add 사용

  AppSync DynamoDB Javascript Resolver에서 update increment, decrement는 이미 존재하는 row에 대해서만 작동하기 때문에 에러가 발생한다. 이는 update의 increment 사용시 DynamoDB 요청으로 변형되기 때문이다. 아래는 increment를 사용한 Javas…

  [cloud]
• 2024-01-15

  NextJS 14 AWS Amplify로 배포하기

  Amplify로 새 애플리케이션을 만들고 자동으로 선택되는 이미지는 Node v16을 사용해 Next.js 빌드 과정에서 에러가 발생한다. 이를 해결하기 위해서는 콘솔의 의 빌드 이미지를 수정하면 된다. 2024.01.15 기준으로 Amazon Linux:2023 을 사용하면 Node.js 버전 관련 에러가 발생하지 않…

  [frontend]
• 2024-01-11

  AWS AppSync & AWS Amplify

  AWS AppSync AWS AppSync는 AWS의 Managed GraphQL 및 Pub/Sub API 서비스이다. 서버리스 WebSocket을 통해 이벤트 소스의 데이터를 구독해 실시간 환경을 만들 수 있다. 단일 엔드포인트를 통해 애플리케이션 개발을 간소화하는 서버리스 GraphQL 및 게시/구독 API를 생성하…

  [backend]
• 2024-01-10

  Node.js 설치 GLIBC_x 에러

  node 설치 후 아래와 같은 에러가 발생할 때가 있다. 에러의 발생 원인은 Node.js를 설치한 서버의 Operating System이 설치한 Node.js가 지원하는 것보다 낮은 버전의 GLIBC를 가지고있기 때문이다. 예를 들어 Node v18.x는 GLIBC v2.7 이상을 지원하기 때문에 GLIBC v2.6을…

  [troubleshooting]
• 2023-12-04

  Mac 관리자권한으로 앱 실행하기 (Eclipse)

  MacOS에서 관리자권한으로 앱을 실행하는 방법은 Windows에 비해 까다롭다. 나의 경우 Eclipse 실행을 관리자권한으로 해야 했다. 시스템 자체에서 root 계정으로 로그인 후 사용하는 방법도 있으나 아래 방식은 한 가지 앱만 superuser 권한으로 실행하는 방법이다. Run an app with super…

  [misc]
• 2023-11-13

  Webpack Bundle Analyzer

  페이지 로드 속도는 매우 중요한 요소이다. 페이지 컨텐츠가 전부 그려지지 못하더라도 무언가 화면에 그려지는 first paint 작업은 최대한 빠르게 처리되어야 유저 이탈률이 줄어든다. webpack을 사용해 bundle을 페이지에 붙이는 경우 bundle의 사이즈가 페이지 성능에 큰 영향을 주게 된다. 따라서 bund…

  [frontend]
• 2023-10-06

  React Native 절대경로 설정

  점점 더 지저분해지는 import 경로를 도저히 볼 수 없어서 절대경로를 추가하기로 했다. 우우.. 👎 리팩토링을 진행하면서 컴포넌트를 더 잘게 쪼개다보니 path level이 너무 깊어졌다. 이대로는 안되겠다 싶었다. 적용 방법 babel plugin module resolver를 설치한다. 프로젝트 root 경로에…

  [mobile]
• 2023-09-27

  React typescript type 지정하기

  각종 리액트 변수 및 함수들을 파라미터로 넘기려는 데 type을 알 수 없어서 몇 번 검색하다가 자주쓰는 건 정리해놓기로 했다. setState onClick Event Handler onClick Event onChange Event Handler

  [frontend]
• 2023-09-25

  OAuth2.0 이란

  OAuth(Open Authorization)는 클라이언트 디벨로퍼가 다양한 환경에서 개발할 때 더 간단한 인증 플로우를 가질 수 있도록 고안된 개념으로 인증 프레임워크이다. 데스크탑 애플리케이션, 모바일 애플리케이션, 각종 가정용 디바이스 등 클라이언트 환경이 다양해졌기 때문에 공통의 인증 서버를 두게 되면 훨씬 간편…

  [misc]
• 2023-09-21

  React에서 setInterval 사용하기

  React에서 를 사용했는데 설정한 것 보다 여러번 실행되었다. 문제를 찾아보니 컴포넌트가 리로드 될 때마다 hook으로 감싸지지 않은 코드들이 재실행되기 때문이었다. 예를들어 아래와 같이 코드를 작성하는 경우에 그렇게 된다. 원하는 대로 동작하게 하려면 훅으로 감싸주면 된다. 또한 컴포넌트가 unmount 되었을 때…

  [frontend]
• 2023-09-18

  React class component lifecycle

  외부 라이브러리를 다운받아 쓰다보니 class 컴포넌트를 쓸 일이 있어서 한 번 정리하기로 했다. lifecycle 순서 DOM이 그려질 때 컴포넌트들은 아래의 순서로 생성되고 소멸한다. Mounting DOM에 인스턴스가 처음 생성될 때의 과정이다. 1. 2. static getDerivedStateFromProps(…

  [frontend]
• 2023-09-05

  Next.js란

  Next.js란 풀스택 애플리케이션을 만들 수 있게 해주는 React 프레임워크이다. React를 사용해 프론트를 개발한 뒤 Next.js의 추가 기능을 사용해 더욱 간편하게 개발을 하거나 최적화를 할 수 있다. Next.js는 자동으로 React에 필요한 번들링, 컴파일링 등의 작업들을 수행해준다. 따라서 사용자는 개…

  [frontend]
• 2023-09-05

  Typescript reducer object key type

  문제 를 이용해 빈 객체에 대상 배열의 string 값을 key로 사용해 값을 지정하려고 했더니 타입 에러가 발생했다. 해결법 reducer의 초기 값으로 넣은 empty object에 타입이 지정되지 않아 생기는 문제다. 로 지정하면 된다.

  [frontend]
• 2023-08-31

  webpack 빌드 속도 향상시키기

  webpack 빌드가 갑자기 너무 느려져서 개발 속도가 정체되었다. 최근 webpack 옵션을 바꾼 적이 있었는데 그 때문인가 하고 성능과 관련된 옵션들을 살펴보다 잘못 사용하고 있던 부분을 발견했다. devtool 옵션 devtool 옵션은 webpack의 소스맵 생성 여부를 제어한다. 나는 처음 생성할 때 되어있던…

  [misc]
• 2023-08-10

  Nest.js dependency injection constructor & property based

  NestJS에는 dependency injection을 하는 다양한 방법이 존재한다. base service를 상속받는 구조로 작성하던 중 construction의 코드가 계속해서 반복되는 현상(bolerplate code)이 나타나 대안을 찾아보니 property based injection을 사용하면 코드 반복을 없…

  [backend]
• 2023-07-11

  React Native New Architecture

  React Native는 버전 0.68부터 새로운 구조를 도입했다. 새로운 구조는 기존 구조에 있던 RN의 고질적인 성능 이슈를 해결했다. 하지만 기존 구조를 바탕으로 만들어진 라이브러리가 많기 때문에 기존의 프로젝트를 마이그레이션 하는 것은 충분히 고려해 본 다음 진행해야 할 것 같다. Old Architecture…

  [mobile]