개발 공부하는 빙빙

https://vuejsexamples.com/a-powerful-and-flexible-slider-and-carousel-for-vue-js/ A powerful and flexible slider and carousel for vue.js Vue Splide is the Splide component for Vue. vuejsexamples.com 이 사이트에서 option여러개 넣고 빼고 하면서 내가 원하는 슬라이드를 만들 수 있다! 사진 세개가 자동으로 슬라이드 되는거 만들었따! 결과화면 캡쳐본

Vue 라우터가 필요한 이유 뷰는 한 페이지에 내용만 바꾸면서 보여주는 방식이기 때문에 뷰 라우터가 안에 있는 내용을 바꾸어 보여주는 원리로 구현된다. props 부모에서 자식 데이터를 내려줄 때 사용. 상위 컴포넌트에서 하위 컴포넌트로 데이터를 넘겨준다. emit 하위 컴포넌트 -> 상위 컴프넌트로 데이터 전달 SPA 버튼을 클릭하거나 스크롤을 이동시키면 최소한의 변화만 일어나는 것입니다. 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통한다. 사용자의 경험의 간섭을 막아준다. 변화하는 것만 동적으로 불러들여서 추가한다. SFC(single file conponent) vue의 컴포넌트 기반 개발의 핵심 특징 하나의 컴포넌트는 하나의 .vue파일 하나 안에 ..

https://www.netlify.com/ Netlify: Develop & deploy the best web experiences in record time A powerful serverless platform with an intuitive git-based workflow. Automated deployments, shareable previews, and much more. Get started for free! www.netlify.com 에 들어가서 가입하고 로그인한다. 프로젝트 파일을 연다. django와 연결하기 위해서 .env.local파일에서 연결주소를 https://주소를 넣어주면 된다. npm run build를 터미널에 입력하면 dist라는 폴더가 생성되는데 이 파일을 Sit..

정윤언니와 함께 만든 영화 웹사이트 프로젝트 백엔드는 django 프론트는 vue.js로 만들었다.

브라우저의 로컬 스토리지에 힘을 빌려서 저장이 됨 (유효기간은 1년정도?) 명령어 npm i vuex-persistedstate 등록을 해줘야 할 플러그인 index.js에 안에 작성해주기 import createPersistedState from "vuex-persistedstate" Vuex.Store 안에 작성해줄 것 export default new Vuex.Store({ plugins:[ createPersistedState(), ],

Router라우터: 길을 만들어 주는 애 index.js 파일에 정의한 경로에 특정한 컴포넌트와 매핑 SPA등장 이후에 모든 요청에 대한 처리는 서버가 하지 않고 HTML 위에서 자바스크립트 코드를 활용해 진행된다. 서버는 index.html만 제공한다. Vue로 개발하는 SPA의 단점은 페이지의 이동이 없다라는 점을 개선하기위해 url는 바뀌지만 페이지는 실제로 이동하지 않는 방법. 브라우저의 history api를 이용하여 라우터가 동작을 한다. 명령어 vue add router

SFC( Single File Component) vue의 컴포넌트 기반 개발의 핵심 특징 화면의 특정 영역에 대한 여러 코드를 하나의 파일(.vue)에서 관리 component: 재사용 가능한 코드를 캡슐화 하는데 도움을 줌 Vue 인스턴스 === Vue 컴포넌트 Vue CLI를 사용하기 위해서 Node.js설치가 필요하다. Node.js: 자바스크립트를 브라우저에서만 사용하는게 아닌 SSR에서도 사용 가능하도록 함 python 에서 pip가 있다면 node.js에서는 NPM. 다양한 패키지 관리자. 명령어 설치 공식문서 https://cli.vuejs.org/guide/installation.html npm install -g @vue/cli 프로젝트 이름이 my-first-vue-app일 때 npm..