주니어 개발자 모몽'-' 주니어 개발자 모몽'-'

Vue.js란 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 자바스크립트 프레임워크이다. 단일형 프레임워크와 달리 점진적으로 채택할 수 있도록 설계되어 있다. 장점 기존 웹 개발자뿐만 아니라 HTML, CSS, 자바스크립트 기초만 아는 웹 개발 입문자 및 컴퓨터 비전공자들도 배우기 쉽게 만들어졌다. 리액트롸 앵귤러에 비해 성능이 우수하고 빠르다. 리액트의 장점과 앵귤러의 장점을 갖고 있다. 특징 MVVM 패턴 뷰는 UI화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다. MVVM(Model View VeiwModel): 마크업 언어나 GUI 코드르 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨ㅔ어 디자인 패턴. View: ..

Lazy load VueJS같은 프론트엔드 프레임워크는 처음에 프로젝트와 관련된 현재 보고 있는 화면과 무관한 것들까지 모든 리소스를 한번에 다운받는다. 프로젝트가 크면 리소스 다운받는 시간이 늘어나게 된다. Lazy load는 리소스를 컴포넌트 단위로 분리시켜주고, 컴포넌트 혹은 라우터 단위로 필요한 것들만 다운받을 수 있도록 한다. 장점 소스코드가 업데이트되었을 경우, 분산되어 있지 않다면 js를 다시 다운받아야 하지만 분산되어 있다면 관련 파일만 변경하여 다운받게 된다. 설정 index.js import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' const routes..

라우팅 특정 웹페이지에 접속을 했을 때 메뉴 또는 특정 링크를 클릭하면 화면이 전환된다. 이 때 브라우저 주소란을 보면 페이지가 이동될때마다 url 주소가 변경되는 것을 볼 수 있다. 뷰와 같은 단일 페이지 애플리케이션인 경우에는 페이지를 이동할 때마다 서버에 요청해서 페이지를 갱신하는 것이 아니라 클라이언트에서 미리 가지고 있던 페이지를 라우팅을 이용해서 화면을 갱신하게 된다. 라우팅은 클라이언트에서 url 주소에 따라 페이지가 전환되는 것으로 이해할 수 있다. Vue Router 설치방법 vue add router 기존 src router history를 Yes 선택하고 한다. src에 router와 views가 생긴것을 확인 할 수 있다. 실행 npm run serve http://localhost..

nodeJS 설치 https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org node.js와 npm 버전 확인 방법 visual studio > View > Terminal # nodeJS 버전 확인 node -v # npm 버전 확인 npm -v 확장 프로그램 설치 1. Vetur 설치 2. Prettier - Code formatter 설치 3. Vue 3 snippets 설치 Vue CLI 설치하기 visual studio > View > Terminal # Window sudo npm install -g @vue/cli