일과 여행 그리고 쉼

Vue.js의 라우터(router)는 Vue 애플리케이션에서 페이지 간의 네비게이션을 관리하고, URL을 기반으로 컴포넌트를 동적으로 렌더링할 수 있게 해주는 기능이다. Vue Router는 Vue.js 공식 라이브러리 중 하나로, SPA(Single Page Application)를 구축하는 데 주로 사용된다. Roueter 설치 npm install vue-router@next main.js 에서 router 사용 추가 import { createApp } from 'vue' import App from './App.vue' import router from './router/' const app = createApp(App) app.use(router).mount('#app') Router 설정 파..

IT/FrontEnd 2024. 3. 14. 10:00

1. React 와 Vue 의 차이 React VueJS 설계 React는 Facebook에서 개발한 라이브러리로, 컴포넌트 기반 아키텍처에 중점을 둠. 단방향 데이터 흐름을 채택하며, 가상 DOM을 사용하여 성능을 최적화 Vue.js는 Evan You에 의해 만들어진 라이브러리로, 간단하고 유연한 설계에 중점을 두고 있음. 양방향 데이터 바인딩을 제공하며, 가상 DOM과 함께 사용되지만 React보다는 좀 더 직관적인 API를 가지고 있음 양방향 데이터 바인딩 React는 단방향 데이터 바인딩을 사용. 부모 컴포넌트에서 자식 컴포넌트로 데이터가 전달되며, 자식에서는 부모에게 데이터를 전달할 수 있음. Vue.js는 양방향 데이터 바인딩을 지원. 이는 모델과 뷰 간의 동기화를 쉽게 만들어주어 개발자가 상..

IT/FrontEnd 2024. 3. 12. 10:00

VueJS 프로젝트 생성을 위해서 Vue CLI(명령줄 인터페이스)를 사용하는 것이 가장 일반적입니다. 아래는 Vue CLI를 사용하여 Vue.js 프로젝트를 생성하는 간단한 단계입니다. 1.NodeJS 설치 가장 먼저 nodejs 를 설치해줍니다. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org nodejs 설치 후 버전 확인 2.Vue Cli 설치 npm install -g @vue/cli 3. Vue 설치 vue create vue create 명령어 실행을 하면 vue version 별 설치 여부를 선택하는게 나오고 선택하여 실행합니다. 설치가 끝나면 아래와 같이 실행 명령어가 나타..

IT/FrontEnd 2024. 3. 9. 09:30