vuejs에서 발생한 error

Django server에서 cors처리를 해줬음에도 cors에러가 발생했다.

this.$axios.$get('http://127.0.0.1:8000/youtube/postviewset')

url의 마지막에 ‘/‘가 없으면 아래와 같은 오류가 발생한다.

Access to XMLHttpRequest at ‘http://127.0.0.1:8000/youtube/postviewset’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: Redirect is not allowed for a preflight request.

해결방법

this.$axios.$get('http://127.0.0.1:8000/youtube/postviewset/')

URL의 마지막에 ‘/’를 붙여준다.

nuxt dynamic routes

Dynamic Routes - A Vue.js Lesson From our Vue.js Course: Nuxt.js…

Named Routes

Named Routes | Vue Router Sometimes it is more convenient to identify a route with a name, especially when linking to a route or performing navigations. You can give a route a name in the routes options while creating the Router instance:

const router = new VueRouter({
  routes: [
    {
      path: ‘/user/:userId’,
      name: ‘user’,
      component: User
    }
  ]
})

To link to a named route, you can pass an object to the

<router-link :to=“{ name: ‘user’, params: { userId: 123 }}”>User</router-link>

This is the exact same object used programatically with

router.push({ name: ‘user’, params: { userId: 123 }})

In both cases, the router will navigate to the path

nested routes

nuxt : Routing - NuxtJS

nuxt-api : API: The <nuxt-child> Component - NuxtJS

Component, Mixins, Plugins in Vue.js

참고 : Component vs Mixins vs Plugins in Vue.js

Introduction

Components

They help you extend basic HTML elements to encapsulate reusable code. They are the high level of a Vue application and compose layout or functionalities to your program. In the most times, developers opt for that because of the reuse or facility to replicate in others parts. Components can be extended getting the aspects of a parent component to the child.

HTML elements를 캡슐화하여 재사용할 수 있도록 도와준다. component는 high level의 뷰 어플리케이션이고, layout이나 프로그램의 기능을 구성한다. 개발자들은 쉽게 복제할 수 있고 재사용성이 높기 때문에 이를 활용합니다. 또한 부모 component의 기능을 가져와 확장할 수 있습니다.

Mixins

Mixins are a flexible way to distribute reusable functionalities for Vue components. Mixins are options of a component that can be accessed in any component, in several times this avoids the rework and allow to write less. They can be local, that is created and accessed only once in a component or global, it will affect every Vue instances. Already ahead that as a personal option, I choose to use plugins instead of mixins.

어떤 component에서도 접근할 수 있는 옵션이다. 반복되는 일을 줄일 수 있고 더 적게 코드를 작성하도록 해준다. 전역적으로 사용할 수 도 있고, 지역적으로 사용할 수 있다.

Plugins

Plugins usually add global-level functionality to Vue Plugins are uses that can be accessed in any component and depends on your use. Things like router, state management and even actions that are realized can be a plugin that will be imported and used globally. For example, you can write a global method as a plugin and, any component will have access to this functionality.

Plugins는 어떤 component에서도 사용할 수 있습니다. router, state management과 같은것들을 전역적으로 사용합니다. 예를들어 전역적으로 사용할 method를 플러그인으로 사용하면 어떤 component에서도 접근할 수 있습니다.

document

Vue.js

Plugins — Vue.js

Nuxt.js

Plugins - NuxtJS

It is important to know that in any Vue instance lifecycle , only beforeCreate and created hooks are called both, from client-side and server-side. All other hooks are called only from the client-side.

오직 beforeCreate와 created만이 클라이언트 사이드와 서버사이드 모두에서 호출됩니다. 이외의 훅들은 오직 클라이언트 사이드에서만 호출됩니다.

Client-side only

Some plugins might work only in the browser because they lack SSR support. In these situations you can use the mode: client option in plugins to add the plugin only on the client-side.

서버에 영향을 최대한 덜 주기 위해 브라우저에서만 플러그인이 작동하도록 할 수 있습니다. mode: client 옵션을 사용하면 됩니다.

// nuxt.config.js:
export default {
  plugins: [
    { src: ‘~/plugins/vue-notifications’, mode: ‘client’ }
  ]
}

// plugins/vue-notifications.js:
import Vue from ‘vue’
import VueNotifications from ‘vue-notifications’

Vue.use(VueNotifications)

Python OOP Tutorial 6: Property Decorators - Getters, Setters, and Deleters - YouTube

• 객체 지향 프로그래밍 (OOP: Object Oriented Programming)
  • CLASS
    • 클래스 변수와 인스턴스 변수

객체 지향 프로그래밍 (OOP: Object Oriented Programming)

askcompany에서 강의(클래스 / 파이썬 차근차근 시작하기)를 들으며 정리한 내용입니다.

함수는 데이터를 어떤 순서로, 어떤 방법으로 처리할지 구조화한것이지 데이터 자체를 구조화하지 못했습니다. 또한 큰 문제를 해결하기 위해서 큰 문제를 작게 쪼갠 뒤 문제를 해결하는것이 아니라 작은 문제를 해결하는 객체를 만들고 조합하여 큰 문제를 해결하는 bottom-up 방식입니다.

객체와 인스턴스의 차이

OOP의 주요특징

1. 캡슐화 : 관련 특성/기능을 하나의 클래스에 결합
2. 상속 : 재활용
3. 다형성 : 다른 동작을 동일한 함수로 사용할 수 있도록 지원

CLASS

사용자가 정의한 데이터 타입 변수와 함수를 한데 모은것

* tip 함수명은 snake_case, 클래스명은 CamelCase

클래스가 호출이 될 때 클래스 내에 정의해준 __init__함수가 자동 호출되며, 호출시 넘겨진 모든 인자들이 이 함수로 전달됩니다.

클래스 변수와 인스턴스 변수

class Dog:
    def __init__(self):
        self.tricks = []

    def add_tricks(self, hi):
        self.tricks.append(hi)

dog1 = Dog()
dog1.add_tricks('roll')

dog2 = Dog()
dog2.add_tricks('dead')

print(dog1.tricks)
print(dog2.tricks)

macui-MacBookPro:Desktop haeyong$ python test.py 
['roll', 'dead']
['roll', 'dead']

class Dog:
    tricks = []

    def add_tricks(self, trick):
        self.tricks.append(trick)


dog1 = Dog()
dog1.add_tricks('roll')

dog2 = Dog()
dog2.add_tricks('dead')

print(dog1.tricks)
print(dog2.tricks)

macui-MacBookPro:Desktop haeyong$ python test.py 
['roll']
['dead']

두 코드의 차이를 보세요 클래스 변수와 인스턴스 변수의 차이입니다. 실행결과도 다릅니다.

__init__안에 선언된 변수가 인스턴스 변수입니다. 객체, 인스턴스를 생성할 때 호출되는 함수이고 이 함수로 인자가 전달되므로 이 인스턴스 고유의 변수가 됩니다!.

init밖에 선언하면 클레스 자체의 변수가 되기 때문에 어떤 객체를 사용하던 공통적으로 사용되는 변수가 됩니다. 그렇기 때문에 오류가 많이 발생할것같네요…(개인적인 생각)

data hiding, name mangling 데이터 은닉, 이름 장식

파이썬에는 다른 언어에서 지원하는 public, private, protected같은것을 지원하지 않습니다. 이를 대신할 수 있는것이 mangling

class Animal(name):
	def __init__(self, name):
		self.__name = name 

mangling은 self. 옆에 underscore 2개 (__)를 붙여줍니다. 함수 내에서는 이름 그대로 접근해주시면 됩니다. (‘__name’)

animal = Animal('kong-e')
animal.__name

error뜹니다. 접근하려면 animal._Animal__name 이렇게 접근해야합니다. (_클래스명변수명 형태로 접근해주시면 됩니다)