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

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..

esLint JavaScript, JSX의 정적 분석 도구로 오픈 소스 프로젝트 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 작성하도록 도와준다. 하지만 과도하게 오류를 최소하하기 위해 실행은 되지만 오류라고 알려주는 경우가 있다. 아래같은 오류가 자주 발생한다. should always be multi-word vue/multi-word-component-names 프로젝트 > vue.config.js 아래의 코드를 작성해준다. module.exports = { lintOnSave: false }

File > Preferences > User Sniooets 검색창이 뜨면 vue 입력후 vue.json (Vue) 선택 아래 코드 추가 "Generate Basic Vue Code":{ "prefix":"vue-start", "body": [ "\n\n\n" ], "description": "Generate Basic Vue Code" } vue 파일에서 vue-start 엔터 아래 처럼 작성되는 것을 확인 할 수 있다.

Vue Router 컴포넌트 생성시 오류 발생 Error Message Component name "Contact" should always be multi-word Vue Router 설치 후 새로운 컴포넌트 생성 시 오류 발생 Contact.vue라는 파일 생성 후 오류가 생김 vue에서는 컴포넌트 이름을 지을 때 반드시 단어 조합으로 지어야 한다. 예를 들면 Contact가 아니라 ContactView 이런식으로 이름을 지어야 한다.

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

# Vue 프로젝트 매니저 프로그램 실행 vue ui http://localhost:8000/ 브라우저 오픈 만들기 클릭 후 프로젝트 위치 선택 프리셋 선택하기 수동 클릭 시 기능 선택하기 Router랑 Vuex 선택 설정 Router history 선택 Linter / fommatter config > ESLint + Standard config 선택 앞서 선택한 옵션을 저장해서 다음 프로젝트 만들 때 동일한 preset을 만들지 선택 이해했습니다 클릭 후 프로젝트 생성 완료! Vue 프로젝트 매니저 설정 대시보드 설정 원하는 위젯 추가 후 오른쪽 위 완료 버튼 클릭 위젯이 추가된 모습을 확인할 수 있다. 의존성, 플러그인을 보면 package.json 에 다 작성되어 잇는 부분 작업목록 package..

# 프로젝트 생성 vue create [프로젝트명] Maually select features 선택 선택방법 스페이스 클릭시 (*)로 선택된다. Choose Vue version: Vue 버전을 선택 가능 Babel: es6이상, TypeScript로 개발 시 브라우저 버전에 상관없이 자동 전환해주는 기능 TypeScript: TypeScript 개발시 지원해주는 기능 Progressive Web App (PWA) Support: Web App 개발을 지원해주는 기능 Router: Vue Router를 위한 기능 Vuex: Vue에서 상태관리를 위한 기능 CSS Pre-processors: CSS 작성을 위한 CSS 전 처리 기능 Linter / Formatter: JavaScript codding Co..