분류 전체보기(289)
-
[SQS] Long Polling & Short Polling
Usecase 자사의 메세지 큐를 AWS의 SQS로 대체하려는 서비스 회사가 있다고 가정합니다. 이 회사가 SQS로의 마이그레이션을 고려할 때 가장 중요하게 생각하는 요소가 '비용'이라고 할 때, 고려할 수 있는 옵션은 어떤 것이 있나요? Short Polling 기본적으로 SQS(Simple Queue Service)는 대기열에서 메세지를 수신하기 위해 Short Polling을 사용합니다. Short Polling의 경우 SQS로 보내는 쿼리(ReceiveMessage)에 메세지가 없는 경우에도 즉시 응답을 전송하며, SQS서버의 부분 집합(Weighted Random Distribution Method를 통해 선정한 전체 서버 노드들의 일부)에서 메세지를 꺼내어 Response를 리턴합니다. 따라서..
2021.07.27 -
[Global Accelerator] Introduction & Usecases
AWS Global Accelerator에 대한 개요 및 기타 기능은 AWS 공식 문서에 자세하게 나와있으므로 이를 참고하시는 것이 좋습니다 Usecase 마이크로 서비스 아키텍처(MSA)를 사용해 서비스를 구성하는 회사(이를테면 게임회사)가 있다고 가정합니다. 이 회사는 글로벌 서비스를 지원하기 위해 Multi Region에 퍼져 있는 ALB(Application Load Balancer)를 통해 각각의 마이크로 서비스들을 제공합니다. 서비스의 규모가 커지면서 여러 서비스들이 추가되는데, 서비스를 추가한다는 것은 곧 엔드포인트(Endpoint)를 추가한다는 의미이고, 이는 보안을 위한 방화벽 설정, 트래픽 라우팅 로직들을 서비스를 추가 / 제거할 때마다 수행해야 한다는 것을 의미합니다. 과정을 단순화하..
2021.07.25 -
[CloudWatch] Alarm & Events Usecases
UseCase CloudWatch Alarm을 사용하여 EC2 인스턴스를 자동 복구하려면 어떻게 해야 하는가? CloudWatch Events를 사용하여 데이터베이스 rollover등의 Cron job을 정기적으로 수행하기 위해서는 어떻게 해야 하는가? CloudWatch Alarm CloudWatch Alarm은 AWS 리소스에 대한 실시간 모니터링을 제공하고, Alarm 하나당 CloudWatch Metric하나를 모니터링하다가 사용자가 설정한 임계치를 돌파했을 경우 "In Alarm" 상태로 바뀌어 이후 동작을 수행하게 됩니다. SNS Topic을 사용해서 Slack, Email등을 통해 알림을 주기도 하고 기본적으로 제공하는 Action을 통해 인스턴스를 복구하거나, 재시작하는 등의 동작을 수행할..
2021.07.22 -
React Deep Dive - React Event System (1)
위 아티클은 React 17버전(17.0.1) 기준으로 작성되었습니다. 17버전 이전(16버전 이하)에서는 조금 다르게 동작할 수 있으며, 이 차이점에 대해서는 이어지는 시리즈(2)에서 다룰 예정입니다. Overview 리액트로 웹 애플리케이션을 개발하다보면 사용자와 유연하게 상호작용하는 컴포넌트를 만들기 위해 onClick, onChange등의 이벤트 핸들러(Eventhandler)를 사용해야 합니다. 크로스 브라우저 대응 등을 위해 리액트 자체적으로 제공하는 안정성 있는 이벤트 핸들링 시스템 덕분에 대부분의 경우 핸들러를 붙이기 원하는 컴포넌트에 다음과 같은 형태로 이벤트 핸들러를 넣어주면 되지만, 컴포넌트들이 복잡하게 상호작용하고 있는 대형 애플리케이션의 경우, 때로는 이 이벤트 핸들러들로 인해 의..
2021.07.19 -
Async / Await Under the Hood
Overview 자바스크립트 ES6부터 비동기 코드 처리를 위해 async / await 문법이 추가되었습니다. ES6(=ES2015) 문법 자체가 도입된 지 꽤 많은 시간이 지났기 때문에 최근의 웹 개발은 async / await 을 통해 대부분의 비동기 처리를 하는 것이 일반적입니다. 서버로 네트워크 요청을 보내고, 그 결과를 가지고 다시 서버에 요청을 보내는 등의 비동기 처리를 할 때, ES6이후의 문법에서는 async / await을 사용해 다음과 같이 처리할 수 있습니다. async function getResult(id) { const result = await getSearchResult(id); const video = await getVideo(result); return video; }..
2021.06.29 -
[Webpack] Code Splitting
위 포스팅은 이전 포스트의 내용을 이어서 진행합니다. [Webpack] Config file & Asset Modules [Webpack] Introduction & Setup [Webpack] Loaders [Webpack] Plugins Code Splitting 애플리케이션을 번들링 할 때, 적절한 단위로 번들을 쪼개는 것은 애플리케이션 성능에 있어서 중요한 요소 중 하나입니다. 규모가 크고 많은 페이지를 가지고 있는 애플리케이션이더라도 사용자의 화면에 보이는 페이지는 하나이기 때문에 사용자가 보지 않을 수도 있는 페이지까지 함께 가져오는 것은 잠재적인 대역폭 낭비이고, 초기 렌더링 시간을 잡아먹게 됩니다. 따라서 적절한 단위로 번들을 나누어서(Code Splitting) 빌드하는 것이 중요합니다...
2021.06.17