음악이 있는 개발자 블로그 음악이 있는 개발자 블로그

MVVM의 등장배경 기존 디자인 패턴(MVC, MVP)등에서 단점으로 이야기되는 View의 의존성을 최소화하기 위해 등장 MVVM 기본 MVVM은 Model, View, ViewModel의 머리만 따와서 명명되었습니다. 기존의 MVC 패턴에서 화면이 복잡해질수록 Controller가 비대해진다는 문제와 View가 Controller와 강하게 결합되어 있는 문제를 해결하기 위해 MVVM 패턴이 제안되었습니다. MVVM에서 가장 중요한 개념이라면 Observer 패턴을 통한 Data Binding이라고 할 수 있습니다. 기존의 Controller에서 Model의 변경에 따라 View를 직접 변경해주었다면 MVVM은 바인딩을 통해 이를 자동으로 업데이트 해줍니다. FrontEnd에서의 MVVM 프론트에서 MV..

(이전 글) NextJS + k8s 프로덕션 환경에서 OOMKilled 현상 CloudWatch의 경보를 Slack으로 전송하는 보편적인 방법에는 두가지가 있다. 1. AWS Chatbot을 Slack과 연결해 메시지 전송 2. AWS Lambda + Webhook을 사용하여 Slack으로 메시지 전송 2번의 경우 메시지와 기타 조건에 대해 자유롭다는 장점이 있으나 세팅까지 손이 많이 가기에 모니터링만을 위한 Slack으로는 Chatbot을 채택했다. 1. AWS Chatbot과 Slack 채널 연결 1-1. Amazon SNS에서 주제를 생성한다. 1-2. AWS Chatbot Console에서 Workspace를 새로 생성하고 사용할 Slack 워크스페이스와 연결한다. 1-3. 만들어진 워크스페이스에..

(이전 글) NextJS + k8s 프로덕션 환경에서 OOMKilled 현상 1. 클러스터의 Worker Node의 IAM 계정에 CloudWatch 접근 정책 연결 1-1. EC2 > 인스턴스 > 사용할 Worker Node 상세 > 보안 탭 > IAM 역할 순서로 접근한다. 따로 Node에 권한 세팅을 해두지 않았다면 현재 상태는 다음과 같을 것이다. 1-2. 권한 추가에서 해당 권한을 IAM 역할에 추가한다. 2. 클러스터 지표 수집을 위해 CloudWatch Agent 설정 2-1. CloudWatch 네임 스페이스 생성 kubectl apply -f https://raw.githubusercontent.com/aws-samples/amazon-cloudwatch-container-insights..

🚫 문제발생 현재 관리 중인 서비스는 EKS를 통해 배포 중이고 NextJS를 쓰는 Front 역시 해당 클러스터에 배포되어있다. 정식 배포 이후 얼마 뒤부터 주기적으로 서버가 다운됐다가 복구된다는 CS요청을 받았다. 현재 상태를 확인한 결과 아래 사진처럼 Front 배포 Pod이 수없이 Evicted, 말 그대로 클러스터에서 추방 당했다. 해당 Pod의 로그를 보니 OOMKilled 상태였고 빠른 조치가 필요했다. 처음엔 당연히 코드 상의 실수로 Memory Leak이 발생해서 해당 문제가 생겼다고 생각했다. 그런데 확인해보니 같은 스펙의 클러스터와 같은 빌드 버전을 사용 중인 Dev, Staging에서는 해당 문제가 전혀 발생하지 않고 있었다. 트래픽에 대한 스트레스 테스트를 진행한 적이 없기에 트래..

dsfsdfsdfsdfsdfsdfㄹㅇㄴㄹㄴㅇㄹㄴㅇㄹㅇㄴㄹzzz

많은 오픈소스 프로젝트에서 CHANGELOG.md와 같은 파일을 통해 명시적으로 버전을 관리한다. 현재 개발 중인 프로젝트에서도 이슈 트래킹을 좀 더 수월하게 하고자 이를 적용하기로 했다. Lerna와 standard-version 사이에서 고민하였으나 standard-version가 versioning에 초점이 맞춰져 있는 것에 비해 Lerna는 Mono-Repo를 위한 패키징에 초점이 맞춰져있어 상대적으로 다양한 기능이 많았으나 그만큼 더 무거워 Standard-Version을 채택했다. Github을 사용하는 경우에는 CHANGELOG.md 파일을 만드는 방식이 아닌 Github에서 제공하는 Release를 활용하기도 한다. (standard-version에서도 Github를 사용할 경우 githu..

React를 사용하다보면 중 부모 컴포넌트의 State 값을 자식 컴포넌트에서 수정해야 하는 경우가 자주 발생한다. State 값을 자식에서 수정해야 할 경우 event 함수로 한번 감싸서 작업을 하는 것을 당연시 생각했지만 그 이유에 대해 명확하게 설명할 수 없어 작성한다. 1. Component의 독립성 유지 Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. React 공식 문서에서 Component에 대해 설명하는 글이다. 이에 맞게 React를 React 답게 사용하려면 Component를 독립적이고 재사용성 있게 만들어야 한다. 자식 컴포넌트의 props..

상황 서버에 파일을 비동기적으로 업로드하며 병렬 처리를 위해 Axios.all을 사용 문제 Axios.all을 활용 시 하나의 Promise만 Reject 되어도 정상적으로 응답이 돌아오지 않아 이후 로직 처리 불가 탐색방법 Case 1 : https://stackoverflow.com/questions/48681126/axios-all-spread-and-catch-all axios.all spread and catch all I'm using .all method of popular library 'axios' for handling my ajax requests. But how can I handle errors in case all requests got 404? for example: axios..