FrontEnd/Vue.js

Cross-Origin Resource Sharing 🤔 무슨 일이야? 브라우저가 요청을 보내고 서버의 응답이 브라우저에 도착 ▶ Server의 log는 200(정상) 반환 ▶ 즉 Server는 정상적으로 응답했지만 브라우저가 막은 것 보안상의 이유로 브라우저는 동일 출처 정책(SOP)에 의해 다른 출처의 리소스와 상호작용 하는 것을 제한 함 CORS - 교차 출처 리소스 공유 추가 HTTP Header를 사용하여, 특정 출처에서 실행 중인 웹 어플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 ◾ 어떤 출처에서 자신의 컨텐츠를 불러갈 수 있는지 서버에 지정할 수 있는 방법 리소스가 자신의 출처와 다를 때 교차 출처 HTTP 요청을 실행 ◾ 만약 다른 출처의 리소..

1. 선언적 방식 네비게이션 ⇨ router-link의 ‘to’ 속성으로 주소 전달 ➡️ routes에 등록된 주소와 매핑된 컴포넌트로 이동 ⇨ 이름을 가지는 routes ➡️ Django에서 path 함수의 name 인자의 활용과 같은 방식동적인 값을 사용하기 때문에 v-bind를 사용해야 정상적으로 작동2. 프로그래밍 방식 네비게이션⇨ Vue 인스턴스 내부에서 라우터 인스턴스에 $router로 접근 할 수 있음⇨ 다른 URL로 이동하려면 this.$router.push를 사용DeclarativeProgrammaticrouter.push(...) Dynamic Route Matching동적 인자 전달 ➡️ URL의 특정 값을 변수처럼 사용 할 수 있음HTML에서 직접 사용하기 보다는 data에 넣어서 ..

Vue Router SPA 상에서 라우팅을 쉽게 개발할 수 있는 기능을 제공 라우트(routes)에 컴포넌트를 매핑한 후, 어떤 URL에서 렌더링 할지 알려줌 ➡️ 즉, SPA를 MPA처럼 URL을 이동하면서 사용 가능 ➡️ SPA의 단점 중 하나인 “URL이 변경되지 않는다” 를 해결 Vue Router | The official Router for Vue.js The official Router for Vue.js router.vuejs.org Vue Router 시작하기 1. 설치 및 반영 $ vue create vue-router-app $ cd vue-router-app $ vue add router 💠 기존 프로젝트를 진행하고 있던 도중 router 추가하면 App.vue 덮어쓰므로 필요한 경..

List Rendering | Vue.js vuejs.org v-for 디렉티브를 사용하여 배열을 리스트로 렌더링 가능 유니크 키가 없는 배열 : 배열 조작을 가하기엔 적합하지 않지만, 단순 출력을 위한 용도로는 문제 없다 이때, items 는 원본 데이터 배열이고 item 은 반복되는 배열의 요소 data() { return { items: [{ message: 'Foo' }, { message: 'Bar' }] } } {{ item.message }} 객체에 v-for 사용하기 : 객체의 속성을 반복하는 데 사용 가능 ➡️ 순회 순서는 해당 객체를 object.keys()를 호출한 결과에 기반함 data() { return { myObject: { title: 'How to do lists in Vu..