전체 글

AWS Load Balancer (ELB) 생성

Load Balancing? 하나의 인터넷 서비스가 발생하는 트래픽이 많을 때 여러 대의 서버가 분산처리하여 서버의 로드율 증가, 부하량, 속도저하 등을 고려하여 적절히 분산처리하여 해결해주는 서비스입니다. ​ EC2 서버를 구축할 때 Auto Scailing 서비스 만을 이용했었는데 최근 외주를 하면서 로드 밸런서 이야기가 나와 사용하였습니다. ​ AWS 내에 Load Balancer 서비스가 존재합니다. 아래 사이트에서 AWS Load Balancer 서비스 내용을 확인하실 수 있습니다. https://docs.aws.amazon.com/elasticloadbalancing/latest/userguide/what-is-load-balancing.html https://docs.aws.amazon.co..

AWS EC2에 AWS RDS를 연동해보자

AWS RDS를 이용하여 MySQL 데이터베이스를 연결해보겠습니다. ​ RDS내의 MySQL 장점을 찾아본다면 · Storage & IOPS 쉽게 확장이 가능합니다. · 백업을 신경 쓸 필요가 없습니다. (스냅샷으로 백업이 가능합니다.) · Auto Failover 가능합니다. · Multi AZ (DB 인스턴스를 다중 AZ 배포로 실행할 수 있습니다.)가 가능합니다. ​ 1. AWS EC2 내의 DB보안 그룹 설정하기 자신의 AWS EC2 내의 VPC ID를 확인합니다. 현재 저의 인스턴스 보안 그룹은 launch-wizard-2 입니다. ​ 인스턴스 보안 그룹을 선택 후 [보안 그룹 생성]을 눌러 생성합니다. ​ 보안 그룹 이름과 설명을 입력한 후, 인바운드 유형을 MySQL을 선택하면 자동적으로 포..

Vue 애플리케이션 구현 심화편

이전 글에서 삭제할 때 List.vue와 Footer.vue가 연결되지 않아 삭제할 때 List Data가 삭제되지 않았습니다. 같은 데이터 속성을 사용하기 위해 최상위 컴포넌트인 App 컴포넌트에 Data를 정의하고, 하위 컴포넌트에 props로 전달하면 됩니다. ​ props와 이벤트 전달 최상위 컴포넌트에 이전 글에 선언했던 Data를 구성해야합니다. ... export default { data() { return { ItemLists: [] } } ... } App.vue에 data() 속성을 선언 후, 이전 List.vue에는 props로 전달해야 합니다. List 컴포넌트의 propsdata 속성에 props로 전달하였습니다. ​ ​ export default { props: ['propsd..

Vue 애플리케이션 만들기

프로젝트 초기 설정 반응형 웹 디자인 태그를 설정해봅시다. 반응형 웹 디자인은 하나의 웹 사이트로 다양한 기기에서 깨지지 않고 자연스럽게 레이아웃을 제공해줍니다. //index.html File width=device-width 속성은 기기 너비만큼 웹 페이지의 너비를 지정하는 의미입니다. ​ ​ 아이콘과 폰트 파비콘 등 head 라인에서 추가할 수 있습니다. 저는 구그 폰트와 어썸 아이콘, 파비콘을 아래와 같이 추가하였습니다. 컴포넌트 생성 ​ src 폴더 내의 components 폴더에 vue파일을 만들어줍니다. 저는 Header.vue, Input.vue, List.Vue, Footer.vue를 생성하였습니다. ​ 컴포넌튼는 src/components 폴더에서 관리합니다. 또한 해당 폴더 내의 여러..

Vue 프로젝트 구성

싱글 파일 컴포넌트 체계 .vue 파일로 프로젝트 구조를 구성하는 방식입니다. 그럼 vue 파일을 작성해봅시다. {{ message }} 보시면 template, script, style 구조로 되어있습니다. ​ ​ https://blog.naver.com/rile1036/221690277816 mac 맥에서 Vue.js 설치해보자 최근에 장고 공부하면서 글을 올리다가 vuex 관련 공부를 해보고 싶어 정리겸 올리게 되었습니다.​Vue.js... blog.naver.com 만약 nvm 부터 설치를 원하시면 제가 이전 네이버 블로그에 설치법을 작성하였습니다. 위의 사이트를 클릭하셔서 차례대로 진행하시면 됩니다. ​ Vue CLI 위의 싱글 파일 컴포넌트를 일용하기 위해서는 .vue파일을 인식할 수 있도록 ..

Vue 템플릿

뷰 템플릿은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성입니다. 사용자가 볼 수 없지만, 라이브러리 내부적으로 Template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환합니다. ​ ​ ​ 데이터 바인딩 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미합니다. {{ }} 방식 이전 글에서 자주 봤던 방식입니다. {{ message }} 를 이용하여 script 내의 data와 연결하여 사용했습니다. message 값을 바꾸면 Vue 반응성에 의해 화면이 자동적으로 갱신됩니다. ​ ​ 만약 Vue 데이터가 변경 되어도 값을 바꾸고 싶지 않으면..