Develop/Vue

Vue 템플릿

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

Vue HTTP 통신

웹 앱을 이용하는데 HTTP 통신은 필수로 구현해야 하는 기능입니다. 대표적으로 jQuery, ajax가 있습니다. ​ 뷰에서도 ajax를 지원하기 위한 라이브러리를 제공합니다. 필수 라이브러리로 뷰 리소스와 최근 많이 이용하는 axios가 있습니다. ​ ​ 뷰 리소스 CDN을 이용해서 라이브러리를 로딩하는 방식과 NPM으로 라이브러리를 설치하는 방법이 있습니다. CDN 설치 방법을 이용하여 특정 데이터를 받아와 로그를 출력해보겠습니다. Data 버튼을 클릭 시 지정한 URL의 데이터를 가져옵니다. 불러오는 데이터는 JSON 형식의 간단한 파일로 가져옵니다. ​ ​ 뷰 리소스 라이브러리를 이용 시, 서버로부터 데이터를 받아와 화면에 나타낼 수 있습니다. ​ ​ ​ Axios 현재 뷰 커뮤니티에서 가장 많..

Vue Router

Vue Router 웹 페이지 간의 이동을 하기 위해 이용됩니다. Main Component Login Component : 해당 주소 끝에 링크를 추가합니다. ex) kimn.com ​/login : 갱신된 주소에 해당하는 화면을 보여줍니다. $mount API : el 속성과 동일하게 인스턴스를 화면에 붙이는 역할을 합니다. 각 컴포넌트를 클릭하면 해당 화면이 나타나게 됩니다. ​ ​ 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있습니다. Component 위에 했던 main 컴포넌트 주소 뒤에 /posts 와 /profile 컴포넌트를 하위 컴포넌트로 화면에 나타낸 소스입니다. ​ ​ 이러한 방식은 한 번에 더 많은 컴포넌트를 표시하는 데에 한계가 있습니다. 이러한 문제를 해결하는데 사..

Vue 컴포넌트

뷰 컴포넌트 컴포넌트는 조합하여 화면을 구성할 수 있는 블록을 의미합니다. 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있습니다. ​ 뷰에서 웹하면을 구성할 때 흔히 네비게이션 바, 테이블, 리스트, 인풋 박스 등 화면 구성 요소들을 컴포넌트로 관리합니다. ​ ​ 컴포넌트 등록 그럼 전역 컴포넌트와 지역 컴포넌트를 등록해보겠습니다. 전역 컴포넌트는 Vue 생성자에 .component()를 호출하면 됩니다. 지역 컴포넌트는 인스턴스에 components 속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의합니다. ​ ​ ​ 지역과 전역 컴포넌트의 차이는 유효 범위입니다. 위에 이미지는 모두 출력시킨 화면이며 차이를 보이도록 소스를 작성해봅시다! First Component Sec..

Vue 세팅하기

1. vue 학습을 위한 개발환경 세팅 윈도우, Mac os 모두 이용할 수 있습니다. 먼저 인터넷 환경은 크롬 브라우저를 이용하시는 것을 추천드립니다. 크롬 개발자 도구가 서버에서 불러와 화면에 표시하기까지 모든 과정들을 확인할 수 있고, 자바스크립트 디버깅, 성능 진단 모두 가능하기 때문입니다. ​ 아톰 에디터 아톰은 깃허브에서 제작한 무로 에디터입니다. 서브라임이나 visual code를 이용하셔도 괜찮습니다. 해당 글에서는 아톰으로 해보겠습니다. ​ https://atom.io/ A hackable text editor for the 21st Century At GitHub, we’re building the text editor we’ve always wanted: hackable to the ..

[Nuxt.js] 설명 및 Nginx / PM2 연동

Nuxt.js vue.js 기반으로 만들어진 SSR(Server Side Rendering) 오픈소스 프로젝트입니다. 홈페이지의 설명을 덧붙이자면, Vue 프로젝트를 진행할 때 서버부분을 미리 구성하여 보다 나은 UI 렌더링을 제공하고, static 페이지를 만들어내는 기능들을 포함되어 있습니다. 비동기 데이터, 미들웨어, 레이아웃등과 같은 클라이언트/서버 사이에 개발해야하는 부분들을 많이 줄어든 프로젝트 입니다. Nuxt.js 설치 이전 글에서 npm을 이용하고 있기에 해당 방법으로 설치하겠습니다. npx create-nuxt-app 자신에게 맞는 형태로 설치하시면 됩니다. ​ UI Framework는 위의 이미지를 보신 후 선택하시면 됩니다. ​ ​ Nginx 설치 Nginx를 설치해봅시다. sudo..