Vue

Backend + Frontend Vue에서 사용자에게 데이터를 보여주는 과정은 HTML 뼈대 생성 ⇒ AJAX를 활용하여 Django Server에 데이터 요청 ⇒ 받은 데이터를 이용해 화면 렌더링 의 과정으로 이루어져 있다. [실습 준비] 주어진 zip파일을 압축 해제한다. Skeleton을 활용한다. Django(기본 세팅) venv생성 $ pip install -r requirements.txt articles/views.py from .models import Article, Comment from .serializers import ArticleSerializer, CommentSerializer from rest_framework.response import Response from rest..

Router Route / Router Route 라우트(경로)는 URL과 그 URL이 표시해야 할 컨텐츠 사이의 매핑이다. 즉, 웹 애플리케이션에서 사용자가 접근할 수 있는 개별 경로나 페이지를 지정한다. 예를 들어, /about URL에 접속하면 "About Us" 페이지를, /contact URL에 접속하면 "Contact Us" 페이지를 보여주는 것을 말한다. Router 라우터는 라우트들의 모음이며, 다양한 라우트들을 관리하고 조정하는 역할을 한다. 애플리케이션에서 발생하는 URL의 변화를 감지하고, 해당 URL에 매핑된 라우트를 찾아 그에 맞는 컨텐츠를 렌더링한다. Vue Router Vue Router | The official Router for Vue.js The official Rout..

Pinia 컴포넌트들 간의 데이터 전달은 Props / Emit을 통해 가능하다. 하지만 컴포넌트들이 많고 복잡해지면, 복잡성이 증가해 코드의 가독성 및 유지 보수가 힘들어진다. 상태관리 상태 관리(State Management)는 복잡한 웹 애플리케이션에서 데이터의 흐름과 상태를 효율적으로 관리하기 위한 개념이다. 애플리케이션의 상태는 사용자 인터페이스(UI)의 시점에서 보여지는 모든 것을 포함한 데이터의 집합이다. 상태관리를 통해 여러 컴포넌트 간에 상태를 공유하고 동기화할 수 있다. Pinia Pinia | The intuitive store for Vue.js Intuitive, type safe, light and flexible Store for Vue pinia.vuejs.org vue에서 ..

[실습] 1. 다음 구조를 가진 화면을 구성해보시오 hint bootstrap의 cdn은 index.html에 추가하시오 article의 반복은 v-for를 활용하시오. App.vue MainComponent.vue Main AsideComponent.vue Aside ArticleComponent.vue Article NavBarComponent.vue NavBar style.css .box{ margin: 1rem; padding: 1rem; border: 1px solid black; } index.html 2. 1. 에서 만든 article들에게 props를 통해 데이터를 전달해보시오. ArticleComponent.vue Article {{ articleNum }} MainComponent.vu..

component 컴포넌트는 재사용 가능한 독립된 코드 조각을 말한다. Vue에서는 SFC(.vue file) 형식으로 사용하며, HTML 요소들을 캡슐화하고 재조립, 중첩하여 하나의 페이지를 구성할 수 있다. 출처 : https://vuejs.org/guide/essentials/component-basics#components-basics 기본으로 주어지는 scr/App.vue 파일을 살펴보면 script의 import HelloWorld from './components/HelloWorld.vue' template의 이 있다. 이는 src/components/HelloWorld.vue 라는 컴포넌트를 활용하여 App.vue 내부에서 중첩하여 사용한 것이다. 1. 새로운 컴포넌트를 만들어 App.vu..

[실습] 1. 다음 코드를 참고하여 색상을 입력하면 텍스트이 색상이 변하도록 구현하시오. color change! App.vue color change! 2. 다음 코드를 참고하여 버튼을 클릭하면 아래 텍스트가 안보였다가, 다시 클릭하면 보이도록(toggle) 구현하시오. toggle 보일까 안보일까?? App.vue toggle 보일까 안보일까?? 3. 다음 urls을 참고하여 name을 누르면 url로 이동할 수 있는 a태그들을 만드시오. const urls = [ { name: 'naver', url: 'https://www.naver.com/' }, { name: 'google', url: 'https://www.google.com/' }, { name: 'github', url: 'https:/..

Vue 문법 예시로 주어진 src/App.vue를 vbase-3-setup을 사용하여 빈 템플릿으로 만들어줍니다. src/App.vue 선언적 렌더링 { }을 활용해 script에서 선언한 변수를 template에서 볼 수 있다. Hello, {{ myText }} 속성 바인딩 요소의 속성 앞에 v-bind: 또는 축약하여 : 를 사용하여 속성의 값을 변수의 값으로 사용할 수 있다. Hello, {{ myText }} class의 경우 여러 값을 list를 활용하여 binding 할 수 있다. Hello, {{ myText }} 이벤트리스너 vanilla javascript에서 이벤트를 활용하기 위해서는 요소 선택 => addEventListener를 활용하여 이벤트 부착의 순서를 따랐지만, vue에서는..

Vue Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org Frontend 프론트엔드(Front-end)는 웹 개발에서 사용자가 직접 상호작용하는 부분을 의미하며, 웹사이트나 앱의 사용자 인터페이스(UI)와 사용자 경험(UX)을 담당하는 부분이다. 사용자와의 상호작용에는 사용자가 보고, 클릭하고, 입력하는 등 모든 것이 포함된다. HTML, CSS, JavaScript 같은 기술을 사용하며, 최근에는 Vue.js, React, Angular와 같은 프론트엔드 프레임워크를 사용하여 구현한다. CSR CSR(Client-Side Rendering)는 사용자의 브라우저에서 전체 페이지를 동적으로 렌더링하는 방식이다. 서버에서는 초기 페이지 로딩 시 ..