STUDY/Vue3 vuejs backend & frontend 연동 backend & frontend 연동 //작업 디렉토리 생성 mkdir 폴더이름 //frontend 디렉토리 생성 npm install -g @vue/cli vue create frontend cd frontend npm run serve >>localhost:8080 확인 //backend 디렉토리 생성 작업디렉토리 폴더이름에서 NO FRONTEND DIRECTORY! npm install -g express-generator express --view=pug backend cd backend npm install npm start >>localhost:3000 >>express 실행된 것 확인 * Frontend -vue.config.js const { defineConfig } = require(.. 2023. 5. 23. Vue 📌 Component 기반 Layout 구성 레이아웃 나누기 >> (terminal) vue create page-layout >>default vue 파일들은 자신만의 html, style, script를 가지고 있기 때문에, component 별로 독립된 환경을 가지고 개발할 수 있음. 📌 state, props 란 state : 나의 data props : 누구로부터 받는 data 📌data binding (v-model) Data Binding : vue는 양방향/단방향 데이터 바인딩 다 가능 ( vue 인스턴스와 component가 서로 데이터 접근을 하냐에 따라 나뉨 ==> 양방향 - o / 단방향 - x) 단방향 데이터 바인딩 : v-for 이용하여 리스트 렌더링 >> name,img,lin.. 2023. 4. 2. Vue 📌 Vue 는 무엇인가 ? : 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크 + 표준 HTML, CSS 및 JavaScript를 기반으로 구축 + component 기반의 SPA(single page application)사이트 구축가능 ※ component >> view를 구성하는 작은 조각들 : 페이지 규모가 커질수록 html 구조 복잡해짐 >> 관리 힘듦 >> component 개념 도입>> 한 페이지를 다 쪼갈라서(?) 관리 ※ SPA (Single Page Application): index.html하나, 단일 js파일을 가지고 vue application 을 구동함 >> 최초 로딩시에 html, js 미리 로딩하여 페이지 전환이 될 경우 페이지 이동하지 않고, 전환될 부분만 .. 2023. 3. 30. 이전 1 다음
