이번엔 is_anonymous 와 is_authenticated 를 알아보겠습니다.


1. is_anonymous 소개 및 예시

is_anonymous는 로그아웃 여부를 묻습니다. 즉 그 유저가 로그아웃된 상태라면 True를 반환하게 됩니다. 
그렇다면 views.py 파일에선 어떻게 사용될까요?
 
1
2
3
4
5
6
if request.user.is_anonymous:
    pass
    # do something if user is logged out
else:
    pass
    # do something if user is logged in
cs


이렇게 사용될 수 있을 것입니다. 이번엔 templates 파일에서 어떻게 사용될지 알아봅시다.


1
2
3
{% if user.is_anonymous %}
    <p>This user is logged out</p>
{% endif %}
cs


이렇게 사용될 수 있습니다. django의 강력한 기능인 템플릿파일의 템플릿 태그에서도 그대로 쓰인다는게 참 편리합니다. 


2. is_authenticated 소개 및 예시

is_authenticated는 위에서 살펴 본 is_anonymous와 반대된다고 생각하시면 됩니다. 저 코드와 반대로 로그인 여부를 묻는 것입니다. 만약 로그인 되어 있다면 이 코드는 True를 반환합니다. 그렇다면 이 코드가 views.py에서 어떻게 사용되는지 알아볼까요?


1
2
3
4
5
6
if request.user.is_authenticated:
    pass
    # do something if user is logged in
else:
    pass
    # do something if user is logged_out
cs


이렇게 위와는 반대로 사용되게 됩니다. 그렇다면 템플릿 태그는 어떨지 알아보겠습니다. 


1
2
3
{% if user.is_authenticated %}
    <p>이 유저는 로그인 되어 있습니다.</p>
{% endif %}
cs


이렇게 사용되게 됩니다. 템플릿 태그를 이용하면 둘 중 하나만 알아도 대부분의 코드를 구현할 수 있을 것입니다. 


1
2
3
4
5
{% if user.is_authenticated %}
    <p>이 유저는 로그인 되어 있습니다.</p>
{% else %}
    <p>이 유저는 로그아웃 되어 있습니다..</p>
{% endif %}
cs


이렇게 사용하면 위에서 {% if user.is_authenticated %}가 False를 반환하게 될 경우 {% else %}안의 코드가 실행됩니다. 그러므로 한 가지만 알면 두 가지 경우를 다 처리할 수 있습니다.

3. is_active 소개 및 예시

그렇다면 is_active는 어떨까요? 우선 템플릿 태그는 이렇게 쓸 수 있습니다. 


1
2
3
4
5
{% if user.is_active %}
    <p>이 유저는 활성화 되어 있습니다.</p>
{% else %}
    <p>이 유저는 비활성화 되어 있습니다..</p>
{% endif %}
cs


is_active는 단순히 로그인, 로그아웃을 넘어서 그 유저의 현재 활동 가능 상태를 판단합니다. is_authenticated의 조금 더 발전된 버전입니다.



1. ASGI 소개

ASGI 는 django-channels 를 사용할 때 알아야 하는 개념입니다. ASGI는 Asynchronous Server Gateway Interface 의 줄임말입니다. django-channels가 사용하고 있는 Daphne와 django-channels가 작동하는 기반입니다. ASGI는 WSGI와 비슷한 구조를 갖고 있으며 반드시 비동기 통신만을 지원하지는 않습니다. 


ASGI : https://github.com/django/asgiref/blob/master/specs/asgi.rst


ASGI 어플리케이션은 스코프를 다루는 데에 사용됩니다. 스코프를 인자로 받게 됩니다. 스코프는 django-channels에서 하나의 연결 인스턴스이라고 설명할 수 있습니다. django-channels에서 하나의 연결이 이뤄지면 그 연결을 스코프 인스턴스라고 생각하고 진행하셔도 될 것 같습니다. 먼저 ASGI에서 사용하는 Application 클래스를 살펴보겠습니다.


1
2
3
4
class Application:
 
    def __init__(self, scope):
    async def __call__(self, receive, send):
cs


이 것이 Application 클래스입니다. 보시다시피 시작시에 scope 인자를 받습니다. scope를 전적으로 관리하는 것을 의미합니다. 그렇다면 이번엔 scope를 살펴보겠습니다. scope는 django의 Websocket 관련 문서에 설명이 나와있습니다. 


2. webSocket Connection Scope

django에서 scope설명 : https://github.com/django/asgiref/blob/master/specs/www.rst


여길 보시면 WebSocket 설명에서 Connection Scope에 대한 설명이 있습니다. 웹소켓 연결 스코프는 소켓이 살아있는 한 지속된다고 나와있습니다. 결국 스코프는 웹소켓 연결 인스턴스라는 뜻입니다. 스코프는 여러 메타데이터를 갖습니다. type, scheme, path, query_string, root_path, headers, client, server, subprotocols 등의 메타 데이터를 갖습니다. 자세한 설명은 위의 링크를 참조하시기 바랍니다.


3. 예제

1
2
async def send(self, message):
    await self.base_send(message)

cs


이제 이 method의 의미를 알 수 있습니다. scope에서 message 인자를 send 한다는 것입니다. 그 이유는 send를 받는 클래스가 인스턴스로 스코프를 갖고 있기 때문입니다. 그래서 이 method가 가능한 것입니다.

1. jQuery UI 소개

jQuery UI는 jQuery를 이용해서 웹에서 필요한 동적인 움직임들을 구현하기 쉽게 만들어놓은 소스 창고와도 같습니다. 인터넷에서 단순하지만 동적으로 보이는 동작들은 실제로 구현하기에 굉장히 많은 노력이 필요합니다. 그러나 jQuery UI를 사용한다면 여러가지 동적인 기능들을 쉽게 쓸 수 있습니다. 부트스트랩과도 비슷한 역할입니다.

jQuery UI : https://jqueryui.com/

에서 확인할 수 있습니다. jQuery 처럼 다운받아서 사용할 수도 있고 CDN으로 사용할 수도 있습니다.

홈페이지에 들어가시면 종류별로 상세하게 설명되어 있습니다. 전 몇 가지만 살펴보도록 하겠습니다.


2. jQuery UI 예제

    • 아코디언 예제

<script>
  $( function() {
    $( "#accord" ).accordion();
  } );
  </script>
</head>
<body>
 
<div id="accord">
  <h3>1번</h3>
  <div>
    <p>
1번 섹션입니다.
    </p>
  </div>
  <h3>2번</h3>
  <div>
    <p>
2번 섹션입니다.
    </p>
  </div>
  <h3>3번</h3>
  <div>
    <p>
3번 섹션입니다 
   </p>
    <ul>
      <li>아이템1</li>
      <li>아이템2</li>
    </ul>
  </div>
</div>
 
 
</body>
cs


조금 길지만 아코디언은 클릭하면 악기 아코디언처럼 늘어났다 줄어드는 동작을 말합니다. 


그 다음은 jQuery로 동작할 수 있는 여러가지 effect에 대한 것입니다.


    • addClass와 removeClass

클래스를 더하거나 뺄 수 있습니다.


  $( function() {
    $( "#btn" ).on( "click"function() {
      $( "#target" ).addClass( "got-class"3000, callback );
    });
 
    function callback() {
      setTimeout(function() {
        $( "#target" ).removeClass( "got-class" );
      }, 3000 );
    }
  } );
cs


위 코드는 id값이 btn인 요소를 클릭하면 id값이 target인 요소에 got-class라는 클래스를 더하고 3초 후에 got-class라는 클래스를 제거하는 코드입니다. addClass의 두 번째 인자로 시간값을 지정해 줄 수 있습니다.


    • color Animation

색깔 애니메이션도 jQueryUI를 이용해 할 수 있습니다.


  $( function() {
    var value_save = true;
    $( "#btn" ).on( "click"function() {
      if ( value_save ) {
        $( "#target" ).animate({
          backgroundColor: "#aa0000",
        }, 2000 );
      } else {
        $( "#btn" ).animate({
          backgroundColor: "#fffeee",
        }, 3000 );
      }
      value_save = !value_save;
    });
  } );
cs


#btn을 누르면 #target 에 animate 함수가 호출됩니다. 이 함수는 css 요소를 변경시킬 수 있습니다. 실제로 실행해보시면 #target의 css 요소가 변경됨을 알 수 있습니다. 전 backgroundColor 만을 변경시켰습니다. 그러나 너무 빠른 변경을 피하기 위해 시간 인자를 2000과 3000으로 주어서 그 시간동안 변경되게 했습니다. 마지막에 value_save 요소를 true와 false로 값을 다르게 함으로써 같은 애니메이션의 반복을 피합니다.


    • toggleClass

말 그대로 클래스가 있다면 없애고 없다면 부여하는 함수입니다. 소스코드는 다음과 같습니다.

  $( function() {
    $( "#btn" ).on( "click"function() {
      $( "#target" ).toggleClass( "got-class"2000 );
    });
  } );
cs


#btn을 누르면 #target의 클래스가 변합니다. 만약 'got-class' 클래스가 있다면 'got-class' 클래스가 제거되고 'got-class' 클래스가 없다면 'got-class' 클래스가 부여됩니다.



'JavaScript' 카테고리의 다른 글

[jQuery] ajax 통신 예제  (0) 2018.02.11
[jQuery] jQuery 설치  (0) 2018.02.11

+ Recent posts