본문 바로가기

분류 전체보기138

[Vue] 상하관계가 아닌 컴포넌트간 통신 이전 게시물에서는 event emit과 props를 이용한 상/하관계의 컴포넌트간의 통신을 다뤘습니다. 이번 게시물에서는 상하관계가 아닌 컴포넌트간의 통신을 다루겠습니다. 한마디로 정리하자면 event, props를 사용하여 컴포넌트 3개간의 통신을 만든다고 생각하시면 됩니다. 그림과 같이 상하관계가 없는 2개의 하위 컴포넌트가 root 또는 상위 컴포넌트를 통해 통신을 할 수 있습니다. event와 props에 관한 설명은 이전 게시물에 하였으니, 바로 예제 코드와 코드에 관한 간력한 설명으로 넘어가겠습니다. lowComponent2에 있는 버튼을 누르면 이벤트를 통해 deliverNum메소드가 동작하여 root 컴포넌트의 num이 1증가합니다. 이러한 num변수는 lowComponent1에 존재하는 .. 2022. 4. 25.
[Vue] 컴포넌트간 통신(event, props) 이전 포스팅에서 컴포넌트는 화면내에서 영역별로 관리하는 것이라고 정리할 수 있습니다. 이렇게 영역별로 구성된 컴포넌트는 상위/하위의 개념이 생겨, 컴포넌트간의 관계(부모/자식)이 형성됩니다. 이번 포스팅에서는 상위/하위 컴포넌트 간의 통신에 대해 다루겠습니다. 컴포넌트간 통신은 상위에서 하위로 이뤄지는 event와 하위에서 상위로 이뤄지는 props가 있습니다. 이러한 event와 props로 컴포넌트간 모든 통신이 제어됩니다. event 하위에서 상위로 데이터를 전달 -> event 발생 먼저, event를 사용하기 위해서는 인스턴스 옵션에서 methods를 이용해야합니다. * 오해하실 수도 있는게 methods옵션은 event를 위한 옵션이 아니라 Vue 인스턴스를 제어하기위한 옵션이고 이러한 특징을.. 2022. 4. 22.
[Vue] 컴포넌트 컴포넌트(Component)란 현재 인기있는 프론트엔드 프레임워크는 SPA(Single Page Application)라고도 불리며, 이러한 SPA는 모듈 단위로 템플릿만 교체하는 것이 특징이며, 이러한 Vue는 컴포넌트를 기반으로 구성됩니다. 이러한 컴포넌트와 이전 게시물에 언급한 필수적으로 생성해야하는 기본 오브젝트 단위인 인스턴스와 햇갈릴 수도 있다고 생각합니다. new Vue() 생성자로 인스턴스이자 Root 컴포넌트를 생성한다고 생각하시면 구조적으로 이해가 휠씬 쉬울거 같습니다. 이러한 컴포넌트로 인해 화면내에 영역을 구분하여 개발할 수 있습니다. 또한, 코드의 재사용성이라는 특징을 가질 수 있습니다. 하지만, 이러한 컴포넌트에는 아래에 설명하겠지만 전역/지역 컴포넌트로 나눠지고 어느정도의 범위.. 2022. 4. 13.
[Vue] 인스턴스 Vue에서 인스턴스(Instance)란 Vue.js로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 오브젝트 단위입니다. 이러한 인스턴스는 다양한 동작을 수행할 수 있는 옵션을 가지고 있습니다. Vue 인스턴스의 생성자는 아래의 코드와 같습니다. 다양한 옵션으로 인스턴스를 구성할 수 있습니다. new Vue(...) 인스턴스의 옵션들 * computed와 watch는 비슷한 설명을 가지는 데, 이에 대해 이후 자세한 내용으로 게시할 예정입니다. 옵션 명 설명 예제 el 대상이 되는 HTML의 DOM 요소를 지정 id가 부여된 태그를 일반적으로 지정 el : '#class_name' data Vue 인스턴스가 담고있을 데이터를 생성 data : { num : 1 } template HTML, CSS 등.. 2022. 4. 7.
[Vue] Vue.js 소개 업무상 필요하여 Vue.js를 공부하게 되었습니다. 인프런에서 캡틴판교님의 강의를 기본으로 학습하고 있습니다. 혹시나 게시물을 읽으시는 분 중 Vue를 학습하고자 한다면 요점을 이해하기 쉽게 설명해주시기 때문에 캡틴판교님의 강의를 추천합니다. Vue란 MVVM 패턴을 기반으로 디자인되었으며 재사용가능한 UI를 묶어서 사용가능합니다. MVVM이란 Model-View-ViewModel의 약어로 아래 3가지로 구성되어 있습니다. 사용자에게 보여지는 UI인 View 요청시 어플리케이션에서 사용되는 데이터 처리 기능의 Model DOM Listeres, DOM BIndings을 통해 View와 Model을 이어주는 역할인 View Model Vue는 이러한 MVVM패턴에서 View Model단에 위치한 JavaS.. 2022. 4. 4.
[Kubernetes] Autoscaler(HPA) Autoscaler 쿠버네티스는 리소스 부족 현상을 해결하기 위해 사용 용도에 따라 몇 가지 오토 스케일러를 제공 HPA(Horizontal Pod Autoscaler) VPA(Vertical Pod Autoscaler) CA(Cluster Autoscaler) 1. HPA 수평적 증/감 Pod의 리소스 상태를 감지하면서 트래픽이 증가하면 Pod의 갯수를 증가(Scale Out)하여 트래픽을 분산 다시 트래픽이 감소하면 생성된 Pod를 삭제(Scale In) 기동이 빨라야하는 App에 사용 -> 장애 복구를 위한 기능이기 때문에 App 자체의 기동이 빨라야함 Stateless의 경우에만 사용 StateFul의 경우에는 어떤 Pod를 Scale Out 해야하는 지 모르기 때문 -> 사용하기 어려움 2. V.. 2022. 2. 17.
Programmers - 주차 요금 계산(Java) https://programmers.co.kr/learn/courses/30/lessons/92341 코딩테스트 연습 - 주차 요금 계산 [180, 5000, 10, 600] ["05:34 5961 IN", "06:00 0000 IN", "06:34 0000 OUT", "07:59 5961 OUT", "07:59 0148 IN", "18:59 0000 IN", "19:09 0148 OUT", "22:59 5961 IN", "23:00 5961 OUT"] [14600, 34400, 5000] programmers.co.kr 2개의 map과 한 개의 set을 이용해 누적 시간 및 차량 내역을 기록 정산한 후 다시 주차하는 차량도 있기 때문에 차량번호가 중복되지 않게 Set을 이용해 기록 요금 계산 시, 분 .. 2022. 2. 13.
[Kubernetes] Ingress(Controller) Ingress란 서비스 앞에 있는 로드벨런스로 클러스터로 유입된 외부의 트래픽을 적절한 마이크로서비스로 라우팅 사용자가 지정한 특정 규칙에 따라 트래픽을 다양한 서비스로 전달하는 Controller 대표적으로 2가지의 사용목적이 존재 Service LoadBalancing Canary Upgrade 이외에도 https 인증서 관리에도 사용 가능 Ingress의 구성 Ingress Controller 클러스터의 인그레스 리소스를 관리 -> Ingress를 실현할 구현체 일반적으로 인그레스의 작동은 인그레스 컨트롤러가 인식할 수 있는 특정 어노테이션을 추가하여 정의 Cloud 환경에서는 각각 제공되는 컨트롤러가 있지만, 자체 운영 중인 클러스터에서는 NGINX을 주로 사용 이외에도 Kong ontour, T.. 2022. 2. 8.
[Kubernetes] StatefulSet(Controller) Application의 2종류 Stateless Application App이 여러개 배포되더라도 같은 서비스의 역할 -> 트래픽을 분산 대표적으로 Web Server {ex) Apache, NGINX, IIS 등} 삭제, 재생성시, 어차피 같은 역할을 하는 서비스를 생성 이름 상관 X 각각의 App마다 볼륨이 필요하지 않음 Stateful Application 각각의 App마다 자신의 역할이 존재 -> 역할에 따라 목적이 있는 연결 대표적으로 Database {ex) MongoDB, MariaDB 등} 삭제, 재생성 시, APP이름이 고유식별에 사용하기 때문에 같은 이름으로 재생성 역할이 다른 만큼, 각각의 App마다 볼륨이 필요함 이러한 Stateless/Stateful Application을 쿠버네.. 2022. 2. 8.

티스토리툴바