풀스택 개발 공부로그

Django OAuth2.0 Library(allauth, rest-auth)

|

OAuth2 allauth, rest-auth

OAuth 2.0 — OAuth Integrate OAuth 2 Into Your Django/DRF Back-end | Toptal

rest-auth

Introduction — django-rest-auth 0.9.5 documentation

django-rest-auth, a set of REST API endpoints to handle User Registration and Authentication tasks. By having these API endpoints, your client apps such as AngularJS, iOS, Android, and others can communicate to your Django backend site independently via REST APIs for User Management.

  • User Registration with activation
  • Login/Logout

DRF 유저 등록, 로그인, 로그아웃 기능 제공

all auth

Overview — django-allauth 0.32.0 documentation

  • Signup of both local and social accounts
  • Connecting more than one social account to a local account

소셜(구글, 페이스북, 카카오 등) 인증기반 유저관리 기능 제공

JWT Support

django-rest-auth에서는 기본적으로 Token-based authentication를 사용합니다. JWT authentication를 사용하고 싶다면 djangorestframework-jwt를 사용합니다.

Unlike some more typical uses of JWTs, this module only generates authentication tokens that will verify the user who is requesting one of your DRF protected API resources. The actual request parameters themselves are not included in the JWT claims which means they are not signed and may be tampered with. You should only expose your API endpoints over SSL/TLS to protect against content tampering and certain kinds of replay attacks.

curl -H "Authorization: JWT <your_token>" http://localhost:8000/protected-url/

DRF 공식문서에서는 djangorestframework-simplejwt를 사용합니다.

Vue.js Overview

|

vue 기초

아래 책을 공부하면서 중요하다고 생각한 부분을 정리했습니다. 공부하면서 추가되는 내용이 있을 수 있습니다.

  • 책 제목 : Do it! Vue.js 입문
  • 저자 : 장기효

개요

라이브러리 : 자주 사용되는 기능을 모아 재활용하기 쉽도록 정리해놓은 도구 프레임워크 : 라이브러리라는 ‘도구’와 이를 활용하는 ‘규칙’이 합해진것.

Vue.js는 UI화면 개발 방법중 하나인 MVVM(Model–view–viewmodel - Wikipedia) 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다. 다시말해 화면을 모델 - 뷰 - 뷰모델로 구조화 하여 개발하는 방식이다. 이 방식의 장점은 화면의 요소들을 제어하는 코드와 데이터를 제어하는 로직을 분리하여 코드를 좀 더 직관적으로 이해하고 유지보수를 효율적으로 할 수 있다는것이다.

화면을 개발하기 위한 필수 단위

인스턴스

new Vue({ 
	el : '#app',
	data : {
		message: 'hello',
	}
})

여기서 new Vue는 인스턴스 el, data는 속성

이외에도 methods, template, created와 같은 미리 정의 되어있는 속성들이 있습니다. Adding Instance Properties — Vue.js

인스턴스가 생성되고 화면에 적용되는 과정

뷰 라이브러리 파일로딩 -> 인스턴스 객체 생성(옵션 속성 포함) -> 특정화면 요소에 인스턴스를 붙임 -> 인스턴스 내용이 화면 요소로 변환 -> 변환된 화면 요소를 사용자가 최종 확인

뷰 인스턴스 라이프 사이클

인스턴스가 생성되는 과정에서 호출되는 동작을 정의 하는 속성을 라이프 사이클 속성이라고 합니다. 그리고 각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅이라고 합니다. The Vue Instance — Vue.js

created

data속성과 methods속성이 정의 되어있는 단계이기 때문에 this.data, this.fetchData()와 같은 로직들을 이용하여 data, methods속성에 정의된 값에 접근하여 로직을 수행할 수 있습니다. 다만 인스턴스가 화면요소에 부탁되기 전이기 때문에 template 속성에 정의된 돔 요소로 접근할 수 없습니다.

data, methods 속성에 접근할 수 있는 가장 첫 라이프 사이클 단계이자 컴포넌트가 생성되고나서 실행되는 단계이기 때문에 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋습니다.

beforeUpdata

el속성에서 지정한 화면 요소에 인스턴스가 부착되고 화면에 치환됩니다. 치환된 값은 뷰의 반응성을 제공하기위해 $watch속성으로 감시합니다. 이를 데이터 관찰이라고 합니다.

컴포넌트

컴포넌트는 조합하여 화면을 구성할 수 있는 블록입니다. 화면을 구조화하여 일괄적인 패턴으로 개발할 수 있습니다. 흔히 내비게이션 바, 테이블, 리스트, 인풋박스 등으로 컴포넌트로 관리합니다.

컴포넌트 등록

컴포넌트를 등록하는 방법에는 전역과 지역 두가지가 있습니다.

지역 컴포넌트는 특정 인스턴스에서만 유효한 범위를 가지고 전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있습니다.

전역 컴포넌트 등록

Function

|

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

함수

가변인자, 익명함수 1급객체와 1급함수/클래스 고차함수

가변인자

1. packing

파이썬 함수에서 여러개의 인자를 받을 때 몇개를 받을지는 모르지만 여러개를 받고싶을 때

def func(*colors):
    for color in colors:
        print(color)

이렇게 해주면 됩니다. 0개도 가능합니다. 0개이상의 인자를 받고싶을때 사용하시면 됩니다. 하지만 2개이상 받고싶다고 한다면

def func(color1, color2, *colors):
    for color in colors:
        print(color)

이렇게 써주시면 됩니다.

2. unpacking

반대로 이번엔 인자로 전달해주는 경우에 대해서 알아보겠습니다.

colors = [ 'red', 'green', 'blue' ]
def func(colors): #이렇게하면 리스트가 인자로 들어가버린다. 
	pass
def func(*colors): #이렇게하면 unpacking되어 3개의 인자가 전달이 된다!
	pass 

앞서 소개한 packing, unpacking에서는 '*'가 한개가 붙어있지만 이번에는 '*'가 2개입니다. 이는 dict를 받습니다. 사용법은 위와 같습니다.

def item(mac = 0, gram = 1, samsung = 2):
    pass

또는

dict = { 'mac' : 0, 'gram' : 1, 'samsung' : 2}
def item(**dict):
    pass
dict = { 'mac' : 0, 'gram' : 1, 'samsung' : 2}
def item(dict):
    pass

이거랑은 다릅니다.

lambda함수에 대해서

lambda x, y : x + y 

여기서 : (colon) 앞에 있는 x, y는 인자를 받을 때 작성해주는 부분이고, 콜론(:) 뒤에는 어떤 연산을 하고 반환할건지 나타냅니다 익숙한 코드로 표현해보면

def add(x, y)
	return x + y 

와 완전히 동일합니다.

앞에 배운것을 응용해보면

lambda *args : sum(args)

1급 객체/함수 여기서 1급은 우리가 중고등학교 때 배우는 1차 함수에서 1차와 비슷하게 생각하시면 될것같습니다. 이와같은 맥락에서 상대적인 개념으로 고차함수도 있습니다.

먼저 1급 함수/클래스의 특징은

  • 런타임에 생성가능
  • 변수에 할당가능
  • 인자나 리턴값으로 전달 가능 입니다.
fun_add = lambda x, y : x + y
fun_sum = fun_add

def make_func(fn, x, y):
	return fn(x, y)

def make_func((lambda x, y : x + y), x, y):
	return fn(x, y)

고차함수

다른 함수를 생산하거나 사용하는 함수입니다. 다시말해서 함수를 인자로 받거나, 함수를 반환하는 함수라고도 할 수 있습니다.

def base_calculator(base):
	wrap = lambda x, y : x + y + base
	return wrap
calc10 = base_calculator(10)
calc10(1, 2)

결과는 13 입니다.