보노보노의 개발 일기 보노보노의 개발 일기

대세는 쿠버네티스 [초급~중급] 강의를 보고 정리한 글입니다. [중급 편] Autoscaler Autoscaler 종류 replicas가 1인 Controller가 관리하는 Pod가 있고 Service 트래픽의 100%가 이 Pod로 들어온다. 이 상태에서 트래픽이 증가한다면 어떻게 될까? Pod의 Memory, CPU 리소스가 고갈되고 심지어 죽을 수도 있다. 아래 3가지 방법으로 이를 대비해보자. HPA(Horizontal Pod Autoscaler) : Pod 개수 증가 HPA는 Pod의 리소스 상태를 감지하고 있다가 위험한 상황 발생 시 Controller의 replicas를 1 -> 2로 증가시킨다. Controller는 Pod를 하나 더 만들게 되고 Pod는 수평적으로 증가하게 된다. 이를 S..

대세는 쿠버네티스 [초급~중급] 강의를 보고 정리한 글입니다. [중급 편] 컨트롤러 Ingress Ingress use case Service LoadBalancing www.mall.com -> Ingress -> Service1 -> Shopping Pod www.mall.com/customer -> Ingress -> Service2 -> Customer Center Pod www.mall.com/order -> Ingress -> Service3 -> Order Service Pod Canary Upgrade www.app.com -> Ingress -> Service1(90%) -> pod1(app v1), pod2(app v1) www.app.com -> Ingress -> Service2(1..

대세는 쿠버네티스 [초급~중급] 강의를 보고 정리한 글입니다. [중급 편] 컨트롤러 StatefulSet Application의 종류 Stateless Application 앱이 여러 개 배포되어도 다 똑같은 서비스의 역할을 한다. 하나의 앱이 죽는다면 같은 서비스의 역할을 하는 앱을 복제하면 되고 이름도 어떻게 설정하든 상관없다. 볼륨이 반드시 필요하진 않다. 볼륨 하나에 모든 앱의 로그를 저장할 수 있다. 대체로 사용자들이 접속하며 여러 앱에 트래픽을 분산한다. (단순 분산) ReplicaSet 컨트롤러 예) Web Server(Apache, Nginx, IIS) Stateful Application 각각의 앱마다 자신의 역할이 있다. 하나의 앱(Arbiter 역할을 하는 앱)이 죽는다면 반드시 Ar..

페이스북은 Flux 패턴을 왜 만들었을까? 페이스북은 기존의 MVC 패턴이 프로젝트 규모가 커질수록 빠른 속도로 복잡해진다고 결론 내렸다. 프로젝트의 구조가 복잡하면 코드 예측이 어려워지고, 새로운 개발자가 적응하는 데 많은 시간이 필요해지고, 테스트가 어려워진다. MVC 패턴은 아래 그림처럼 모델-뷰가 양방향 통신이 가능하다. 이는 두 개 이상의 모델을 순차적으로 업데이트 하는 기능을 구현할 때 모델 간의 의존성을 높이는 문제를 만들고 종종 데이터 흐름을 꼬이게 한다. 예시) 유저가 뷰에서 액션(키보드, 마우스 등)을 하여 컨트롤러에게 명령이 전달되면 컨트롤러는 A모델을 업데이트 하고 B모델도 업데이트 한다. B 모델의 업데이트가 또 다른 C뷰에 영향을 끼치고 C뷰는 컨트롤러를 거쳐 D모델의 상태를 변..

단말기의 유형(출력물 vs 화면)과 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용하다. 기본 구문 // @media media-type and (media-feature-rule) { /* CSS rules go here */ } media-type 선택사항으로 기본값은 all all print 인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서 screen 화면 speech 음성 장치 논리 연산자 and not 쿼리가 거짓일때만 참을 반환 only 전체 쿼리가 일치할 때만 스타일 적용 ,(쉼표) or 연산자처럼 동작 하나만 true면 true 예제 고밀도 디스플레이를 위한 이미지 다루는 방법 고밀도 디스플레이 기기가 늘어나면서 웹에서도 고 해상도..

DOM(Document Object Model) 문서 객체 모델은 HTML 또는 XML과 상호작용을 위한 일종의 API 브라우저에 로드 되며 DOM tree 형태로 문서를 만듬 (노드로 트리를 구성, element, text string, coment) 스크립트 또는 프로그래밍 언어를 웹 페이지에서 사용할 수 있게 연결 시킴 자바 스크립트를 이용해 DOM을 수정할 수 있음 웹 페이지를 객체 지향적으로 표현한 것 Dom Tree: 트리 구조 형태의 노드들이 문서를 만듬 예시) HTMLElement ← HTMLMediaElement ← HMLTAudioElement ← HTMLElement ← HTMLMediaElement ← HMLTVideoElement ← DOM API Web API DOM의 각 노드와..

SPA(Single Page Application) 앱에 필요한 모든 정적 리소스를 최초 한번만 받아 오고 이후에는 동적으로 DOM을 구성하여 렌더링 되는 화면만 바꾼다. 페이지가 한번 로딩된 이후 데이터를 수정하거나 조회할 때, 페이지가 새로 고침되거나 다른 페이지로 넘어가지 않는다. 클라이언트 렌더링 방식을 채택 장점 전체적인 트래픽을 감소시킨다. 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공한다. -> 모바일 퍼스트 전략에 적합 단점 모든 정적 리소스를 최초에 한번 다운로드하기 때문에 초기 구동 속도가 상대적으로 느리다. -> 최초 첫 페이지(어느 정도 그려진)를 서버로부터 받는 SSR을 진행하여 속도를 개선할 수 있다. SEO(검색엔진 최적화) 문제 -> SPA 프레임워크(앵귤..

CORS SOP(Same-Origin Policy) 동일 출처 정책으로 한 출처(Origin)에서 로드된 문서나 스크립트가 다른 출처의 자원과 상호 작용을 못하도록 제한하는 것을 말한다. 이 정책으로 의해 XMLHttpRequest 객체로 특정 웹 페이지 접근할 때, 해당 페이지와 동일한 출처의 페이지에만 접근이 가능한 것이다. 동일 출처(Origin)란? Protocol, Host, Port 가 모두 같을 때 동일 출처다. CORS(Cross-Origin Resource Sharing) 다른 출처의 자원과의 상호 작용을 위해 SOP 예외 조건으로 CORS 정책이 생겼다. CORS 정책을 위반하지 않는 다면 다른 출처의 리소스를 공유할 수 있다. 어떻게 CORS 정책을 위반했는 지 판단할까? 출처를 비교..