어제보다 한 걸음 더

1. Vue Router란? Vue에서 SPA(Single Page Application)을 구현 시, 사용자 요청 경로에 따라 해당하는 컴포넌트에 매핑하여 렌더링을 결정해주는 플러그인이 Vue Router이다. 원래 사용자의 URI Request가 들어오면 서버 즉 백엔드에서 Controller가 그 Request에 해당하는 Response로써 정적 파일(html, css, javascript ...)을 보내준다. Vue Router는 프론트엔드에서 요청 URI에 따라 전체 새로운 돔을 변경하는 것이 아니라, 브라우져에서 변화가 있는 부분의 돔을 변경하는 방식이다. 2. 설치 CDN html head 태그 안에 vue CDN 밑에 아래와 같이 추가해 줍니다. (vue를 CDN으로 이용하시는 경우 기준입..

Vue.js 프로젝트 구조 프로젝트 구조 셋팅에 앞서.. 1. vue 설치 이전 포스팅에서 vue 개발환경 셋팅 중 가장 중요한 vue 설치를 빼먹었었네요 ^^; 그래서 우선, vue 설치부터 하고 가겠습니다~~! vue를 쉽게 설치하는 방법은 크게 두 가지가 있습니다. //CDN ... 1.2 NPM 다음으로는 우리와 같이 프로젝트 시작하기 전에 vue를 적용하여 폴더셋팅을 하기 위한 사람들을 위한 방법입니다. 또한 대규모 서비스를 만들 때 NPM을 이용하시는 것을 추천드립니다. NPM을 아시는 분들이라면 아마도 쉽게 하실 수 있을 겁니다. CMD 창을 열어주시고, 아래와 같이 명령어 한 줄이면 OK! # 최신 안정화 버전 $ npm install vue① "Window Key + R" ② npm in..

[Vue] Vue.js 개발 환경 셋팅 vue.js 개발 환경을 위해서 몇 가지 필요하다고 생각하는 것을 설치하도록 하겠습니다. Chrome Node.js VS Code Vue.js devtools Chrome 브라우저 설치 뷰로 화면 개발을 하려면 첫 번째로 구성해야 할 환경이 바로 브라우저입니다. 구글에서 개발한 크롬 브라우저는 최신 웹 트렌드와 문법을 빠르게 반영하고 있는 브라우저이며, 웹 개발 시 편리한 기능을 제공하는 크롬 개발자 도구를 지원합니다. 크롬 브라우저는 공식 사이트 또는 검색 사이트에서 '크롬'이나 'Chrome'으로 검색하여 설치하시면 됩니다. Node.js 설치 1. node.js 홈페이지 접속 후, 현재 버전이 아닌 LTS 버전을 다운로드 합니다. . . (중간 설치 과정은 생..

[Vue] Vue.js란 무엇인가? Project 포스팅에 앞서, 일단 Vue.js와 Node.js에 대한 정리를 어느 정도 하기로 했다. Vue.js란? 웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공 Vue의 장점 배우기가 쉽다. 리액트와 앵귤러에 비해 성능이 우수하고 빠르다. 리액트의 장점과 앵귤러의 장점을 갖고 있다. 뷰는 구글에서 일하던 직원이 앵귤러를 더 가볍게 쓰고 싶어서 만든 프레임워크 앵귤러의 데이터 바인딩 특성과 리액트의 가상 돔(Virtual DOM) 기반 렌더링 특징을 모두 가지고 있음 Vue.js의 특징 UI 화면단..