javascript

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..

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)는 사용자의 브라우저에서 전체 페이지를 동적으로 렌더링하는 방식이다. 서버에서는 초기 페이지 로딩 시 ..

Ajax Ajax(Asynchronous JavaScript and XML)는 JavaScript, XML(또는 JSON)을 활용한 비동기적 정보 교환 기법이다. Ajax를 활용하여 웹페이지 전체를 리로드 하지 않고 일부만 변경할 수 있다. 비동기 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 실행하는 방식이다. 데이터를 외부에서 가져오는 경우, 완료될 때까지 기다리지 않고 다음 코드를 실행할 수 있다. 완료될 때까지 기다리는 경우 네트워크의 상황, 외부 서버의 상황 등에 따라 데이터를 가져올 수 없는 경우 사이트가 먹통이 될 수 있다. 가져오더라도 시간이 오래 걸리는 경우 가져오는 동안 페이지를 사용할 수 없게 된다. python의 경우 import requests response = r..

Dom DOM(Document Object Model)은 웹 페이지의 구조를 프로그래밍 방식으로 접근하고 조작할 수 있게 해주는 인터페이스 HTML문서의 구조를 트리 형태로 나타내며, 각 노드는 문서 내의 객체(예: 태그, 속성, 텍스트 등)를 나타낸다. 즉, HTML의 요소들을 우리가 알고있는 dictionary 형태의 dataset으로 간주하여 다룰 수 있게 하는 것이다. 출처 : https://ko.wikipedia.org/ Dom 조작 JavaScript는 DOM을 사용하여 브라우저를 조작할 수 있다. 웹페이지에 해당하는 document의 title을 JavaScript를 활용해서 변경함으로써 상단 tab의 문자를 변경할 수 있다. Document HTML 문서를 의미하며, 우리가 다룰 웹페이지이..

객체와 배열 객체(Object) 키와 값의 쌍의 속성(property)으로 구성되며, Python의 딕셔너리와 유사하다. key는 ' '를 생략한 문자열로 사용 가능하다. value에 접근할 때 [ ] 뿐만 아니라 .을 사용하여 접근할 수 있다. let person = { name: "Alex", age: 28, gender : "M" }; console.log(person.name); // 점 표기법을 사용하여 "Alex" 출력 console.log(person["age"]); // 대괄호 표기법을 사용하여 27 출력 person.age = 31; // 기존 속성 값 수정 person.country = "USA"; // 새로운 속성 추가 참고 속성명 축약 key에 할당할 value와 변수가 같으면 생략..