728x90 PROGRAMMING/Vue7 [Vue] Router Vue Router 라우트(route)에 컴포넌트를 매핑한 후, 어떤 주소에서 렌더링할 지 알려줌 SPA 상에서 라우팅을 쉽게 개발할 수 있는 기능 제공 - 설치 (Vue CLI 환경) $ vue add router commit 여부 : y History mode 사용 여부 : y HTML History API를 사용해서 router를 구현한 것 브라우저의 히스토리는 남기지만 실제 페이지는 이동하지 않는 기능 지원 즉, 페이지를 다시 로드하지 않고 URL 탐색 가능 Vue router로 인한 변화 App.vue 코드 router/index.js 생성 : 라우트 관련 정보 및 설정 작성되는 곳 view 디렉토리 생성 - 사용 router-link 사용자 네비게이션을 가능하게 하는 컴포넌트 목표경로는 'to.. 2021. 11. 21. [Vue] Components Component (컴포넌트) 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는데 도움을 줌 CS에서는 다시 사용할 수 있는 범용성을 위해 개발된 소프트웨어 구성 요소를 의미 유지보수, 재사용성 up Vue 컴포넌트 === Vue 인스턴스 SFC (Singel File Component) Vue 컴포넌트 기반 개발의 핵심 특성 하나의 컴포넌트는 .vue 확장자를 가진 하나의 파일 안에서 작성되는 코드의 결과물 화면의 특정 영역에 대한 HTML, CSS, JavaScript 코드를 하나의 파일(.vue)에서 관리 Vue 컴포넌트 === Vue 인스턴스 === .vue 파일 Vue Component 구조 한 화면 안에서도 기능 별로 각기 다른 컴포넌트 존재 (하나의 컴포넌트는 여러 개의 하위.. 2021. 11. 20. [Vue] Vue CLI Vue CLI Vue.js 개발을 위한 표준 도구 프로젝트 구성을 도와주는 역할 Vue 개발 생태계에서 표준 tool 기준을 목표로 함 - Node.js JS를 브라우저가 아닌 환경에서도 구동할 수 있도록 하는 JS 런타임 환경 브라우저 밖을 벗어날 수 없던 JS언어의 한계 해결 Chrome V8 엔진을 제공하여 여러 OS 환경에서 실행할 수 있는 환경 제공 단순히 브라우저에서만 조작할 수 있던 JS를 SSR 아키텍처에서도 사용할 수 있도록 함 - NPM (Node Package Manage) JS언어를 위한 패키지 관리자 Node.js 설치 시 함께 설치됨 Vue CLI 사용하기 - 설치 # 설치 $ npm insatll -g @vue/cli # 버전 확인 $ vue --version - 프로젝트 생성.. 2021. 11. 20. [Vue] Lifecycle Hooks, lodash Lifecycle Hooks 각 vue 인스턴스를 생성될 때 일련의 초기화 단계를 거침 그 과정에서 사용자 정의 로직을 실행할 수 있는 Lifecycle Hooks 호출 특정 시점에서 동작을 수행할 경우 사용한다고 생각하자! ex) vue인스턴스가 생성되자마자 수행할 작업이라면? created 사용 lodash library array, object 등 자료구조를 다룰 때 사용하는 유틸리티 함수 제공 reverse, sortBy, range, random 등 2021. 11. 15. 이전 1 2 다음 728x90
