본문 바로가기

분류 전체보기

 (148)
Vue.js 기초문법 - 반응형,템플릿,이벤트 루프,메서드 상태유지 Vue.js에서의 핵심 흐름 웹/앱 개발에서 프론트엔드 사이드는 일반적으로 백엔드 사이드에서 데이터를 받아 이를 화면으로 표현합니다. Vue는 백엔드에서 받아온 데이터를 Vue 컴포넌트의 data()에 저장하며, 이를 반응형 객체로 감싸고 감시합니다. 여기서 반응형과 감시라는 개념이 중요합니다. 정적인 HTML 파일은 DOM을 조작할 수 없습니다. 이에따라 Vue 와 같은 동적인 페이지를 구현하는 프레임워크는 반응형 시스템을 통해 데이터면 바꾸면 이를 감시(watch)하며 데이터의 변화를 감지하고 UI를 알아서 조작할 수 있게 지원합니다. 즉 직접 DOM을 조작할 필요가 없이 데이터의 변화에 따라 화면의 구성이 가능합니다. 이를 요약하자면 아래와 같습니다.백엔드에서 데이터 받기데이터를 Vue 컴포넌..
Vue.js의 구조와 인스턴스 Vue.js2 와 Vue.js3 https://dkkim2318.tistory.com/153 Options API 와 Composition APIVue.js의 개발스타일 Vue.js의 개발스타일에는 Options API 와 Composition API 두가지의 방식이 존재합니다. Vue.js의 초창기에는 Options API 방식으로 개발하는 스타일로 출발했지만 Vue 3 가 출시되며 Compositiodkkim2318.tistory.com 이전 Options API 와 Composition API 두 개발 스타일에 대해 포스팅을 했습니다. Vue.js는 현재 3 버전이 가장 최신 버전이며 Composition API가 공식적으로 가장 권장되는 방식입니다(Vue 2는 Composition API 지원 ..
Vue.js 개발환경 세팅 Vue.js 개발환경 setting Vue.js는 하나의 js 패키지 라고 볼 수 있습니다. 공식적으로 Vue.js는 앱을 개발/빌드/구성하는 도구들이 Node.js 환경에서 동작하기 때문에 전 세계의 개발자들이 Vue를 쉽게 설치하고 버전 관리 할 수 있도록 npm 레지스토리에 이를 배포하고 관리합니다https://dkkim2318.tistory.com/22 node.js & npm노드 JS WEB의 초창기 시작은 정적인 체계였습니다. 단순히 웹이라는 것은 조회 즉 읽는 기능만을 제공했습니다. 하지만 nescape 라는 웹브라우저가 등장하고 javascript를 통해 웹에 동적인 체계를 탑dkkim2318.tistory.com따라서 Vue를 설치하고 환경을 setting 하기 위해선 node.js와..
Options API 와 Composition API Vue.js의 개발스타일 Vue.js의 개발스타일에는 Options API 와 Composition API 두가지의 방식이 존재합니다. Vue.js의 초창기에는 Options API 방식으로 개발하는 스타일로 출발했지만 Vue 3 가 출시되며 Composition API라는 스타일이 추가가 됐고 이가 점점 주류가 되고 있기 때문에 앞으로의 Vue 생태계는 Composition API 중심으로 발전될 가능성이 높다고 추축되고 있습니다. Options API data, methods 및 mounted와 같은 vue의 기본 객체를 사용하여 컴포넌트 로직을 적용하는 방식입니다. 대표적인 요소를 살펴보면 아래와 같습니다.data : 컴포넌트에서 사용될 state 즉 데이터를 관리해주는 곳을 의미합니다.metho..
Vue.js란 Vue.js Vue.js는 웹 사용자 인터페이스를 만들기 위한 프레임워크 입니다 웹 프론트엔드 시장에 현재 가장 많이 사용되는 스택은 React지만 그에 못지 않게 vue.js 또한 현업에서 많은 기업들의 선택을 받아 사용되고 있습니다. 최근 프론트엔드 시장에서는 앞서 언급한 대로 React가 표준처럼 자리 잡고 있지만, 그럼에도 불구하고 Vue.js는 많은 개발자들과 기업에서 꾸준히 사용되고 있습니다. 이는 Vue.js만의 직관적인 문법 구조와 낮은 러닝 커브, 빠른 개발 생산성 덕분입니다. 특히 중소규모 프로젝트나, 프론트엔드 와 백엔드의 완전히 독립된 구조가 아닐경우 어느정도의 러닝커브가 존재하는 React나 Angular에 비해 간편하고 효울적인 선택이 될 수 있습니다. Vue.js는 구글..
도커와 방법론 도커와 방법론 지금까지 도커 관련 포스트에서 알 수 있든 도커는 컨테이너 방식으로 서버를 가상화 합니다. 기존 레거시 방식의 프로젝트에서는 VM과 같은 하이퍼 바이저 방식만을 사용한 가상화 서버에 서비스를 배포하는 형태의 프로젝트 들이 많았지만, 도커가 최근 개발 진영에서 핫한 이유는, 애플리케이션의 기능의 세분화/경량화를 점점 추구하는 형태로 진화했기 때문입니다. 세분화/경량화를 중요성이 장조되는 현대 개발에서 가장 추구하는 서버 구성은 클라우드 네이티브 방식입니다. 전통적인 IDC 방식만을 고집하는 것이 아니라 리소스를 필요에 따라 유연하게 구성하는 클라우드 방식을 적용이 점점 더 각광받기 시작했고, https://dkkim2318.tistory.com/102 클라우드 컴퓨팅클라우드 컴퓨팅? ..
도커 가상 네트워크 가상 네트워크 네트워크란 서로 연결된 데이터나 자원을 주고 받는 통신망입니다. 가장 대표적인 네트워크는 인터넷 입니다. 같은 인터넷망에 접속한 사용자라면 누구나 서로 통신을 주고 받는 것이 가능합니다. 네트워크는 실제로 케이블로 연결된 하나의 물리적 망이지만 도커와 같이 서버를 가상화 하는 프로그램에서는 서버의 가상 네트워크라는 개념이 들어갑니다. 네트워크는 물리적 H/W 구성이 필요합니다. 간다하게만 생각해봐도 하나의 여러 통신망의 서버를 연결 하기 위해선 스위치, 라우터, NIC, NAT장비 등등 여러가지 물리적 구성이 필요합니다. 하지만 도커는 한대의 물리적 서버의 여러개의 논리적 서버처럼 구성한 가상화 솔루션 입니다.https://dkkim2318.tistory.com/139 Docker ..
MSA MSA(Microservice Architecture)백앤드 개발자라면 최근 MSA 방법론에 대해 굉장히 많이 들어봤을 것이라 생각합니다. 최근 개발 프로젝트에서 가장 핫한 방법론이며, 특히 백앤드 개발에서 많이 사용되는 방법론 입니다. MSA 란 Microservice Architecture의 약자로 말 그대로 작은 서비스 구조 입니다. 마이크로서비스란 작고 독립적으로 배포 가능한 각각의 기능을 수행하는 서비스를 의미하며, 하나의 프로젝트 안에서도 각가의 마이크로서비스를 독립적으로 개발/테스트하고 배포가 가능 한 구조라고 볼 수 있습니다. 예를들어 쇼핑몰 웹서비스를 개발한다고 가정해 봤을때 클라이언트 관점에서는 그냥 하나의 웹 서비스 이지만, 회원가입/로그인, 구매, 카테고리별 쇼핑 기능, 결재..

티스토리툴바