조건부 삼항 연산자(conditional ternary operator) 는 세 개의 피연산 함수를 취할 수 있는 유일한 자바스크립트 연산자이다. 이 연산자는 if 문의 축약형으로 빈번히 사용된다. 

condition ? expr1 : expr2


condition (or conditions)
true 혹은 false로 평가되는 표현식

expr1, expr2
모든 형식의 값을 지닌 표현식


condition이 true이면, 연산자는 expr1의 값을 반환하며, 반대의 경우 expr2를 반환한다.


상황)


현재시각 1시 9분 3초를 웹브라우저에서 출력하면 1:9:3 형태로 출력된다

내가 나타내고 싶은 형태는 01:09:03 이다 


function getTime(){
    const date = new Date();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();

    clockTitle.innerText = `${hours}:${minutes}:${seconds}`
}



조건부 삼항 연산자를 적용하여 시간, 분, 초가 10보다 작은 경우 앞에 0을 붙여주는 것이다.



function getTime(){
    const date = new Date();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();

    clockTitle.innerText =
    `${hours < 10 ? `0${hours}` : `${hours}`
    }:${minutes < 10? `0${minutes}` : `${minutes}`
    }:${seconds < 10? `0${seconds}` : `${seconds}`
    }`
}




출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator


'코딩 연습 > Javascript' 카테고리의 다른 글

Array.filter()  (0) 2019.01.01
JSON.parse(), forEach()  (0) 2018.12.31
객체 안에 특정 함수를 속성으로 지정하기  (0) 2018.12.07
함수를 변수에 지정하기  (0) 2018.12.07
문자열 속에 매개변수 넣기  (0) 2018.12.06
블로그 이미지

쵸잇

,

장고 2.1버전으로 새 블로그를 만들면서 프로젝트 폴더의 urls.py 안에서 인증 처리를 하는 방법을 배웠다.


기존에 내가 해오던 방식은, 


1) app폴더 urls.py에서 login, logout url을 등록

2) login 템플릿 만들기 (로그인 폼)

3) views.py에서 login, logout 함수를 호출하여 view 함수 만들기


3단계를 거쳐서 만들었다면,


1) 프로젝트 폴더 urls.py에서 django.contrib.auth에 포함된 views를 호출. views에 포함된 LoginView와 LogoutView를 path에 담아서 그대로 사용. 

2) login 템플릿 만들기 (로그인 폼)


1
2
3
4
5
6
7
8
9
10
from django.contrib import admin
from django.urls import path, include
from django.contrib.auth import views as auth_views
 
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('blog.urls')),
    path('accounts/login/', auth_views.LoginView.as_view(template_name='registration/login.html'), name='login'),
    path('accounts/logout/', auth_views.LogoutView.as_view(next_page='/'), name='logout'),
]
cs



1
2
path('accounts/login/', auth_views.LoginView.as_view(template_name='registration/login.html'), name='login')
# 템플릿 경로 
cs


1
2
path('accounts/logout/', auth_views.LogoutView.as_view(next_page='/'), name='logout')
# next_page는 리다이렉트 페이지로서 기본페이지 설정
cs



그리고 로그인 폼


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{% extends 'blog/base.html' %}
 
{% block body %}
<div class="jumbotron">
  <h2>Please Login:</h2>
  <h3>(Must be SuperUser, please check with the site admin)</h3>
 
  {% if form.errors %}
    <p>Your username and password didn't match! Please try again.</p>
  {% endif %}
 
  <form action="" method="post">
    {% csrf_token %}
      {{ form.as_p }}
      <input type="submit" class="btn btn-primary" value="Login">
      <input type="hidden" class="next" value="{{ next }}">
  </form>
</div>
{% endblock %}
cs


블로그 이미지

쵸잇

,

pip freeze  

라이브러리 목록 보여주기


pip freeze > requirements.txt

requirements.txt 파일에 라이브러리 목록 담기


pip install -r requirements.txt

requirements.txt 파일에 담긴 라이브러리 클론하기

블로그 이미지

쵸잇

,

객체를 다시 떠올리면,


1
console.log()
cs


console이라는 객체 속에 log() 함수속성으로 포함되어 있다.



1
console.log("Ryan")
cs


따라서 console 객체 속에 포함된 log() 함수를 사용하여 "Ryan"을 출력하는 것이다.



우리도 만들 수 있다.


1
2
3
4
5
6
7
calculator = {
  sum : function(first, second){
  return console.log(first + second)
  }
}
 
calculator.sum(55)
cs


calculator라는 객체 속에 sum이라는 속성을 만들었다.

sum속성2개의 인자합산하여 출력하는 함수를 가진다.


console.log()를 사용하는 것처럼


calculator.sum()을 사용하면,


1
2
>>
10
cs


해당 결과가 출력된다.



객체와 인자를 변수에 담아서 출력할 수도 있다.


1
2
3
4
5
6
7
8
calculator = {
  sum : function(first, second){
  return first + second;
  }
}
 
const sum = calculator.sum(55)
console.log(sum)
cs



연습


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
calculator = {
  sum : function(first, second){
    return first+second;
  },
  sub : function(first, second){
    return first-second;
  },
  mul : function(first, second){
    return first*second;
  },
  div : function(first, second){
    return first/second;
  }, 
  imp : function(first, second){
    return first**second;
  },
}
 
const sum = calculator.sum(55)
console.log(sum)
const sub = calculator.sub(125)
console.log(sub)
const mul = calculator.mul(38)
console.log(mul)
const div = calculator.div(205)
console.log(div)
const imp = calculator.imp(28)
console.log(imp)
cs


'코딩 연습 > Javascript' 카테고리의 다른 글

JSON.parse(), forEach()  (0) 2018.12.31
조건부 삼항 연산자(conditional ternary operator)  (0) 2018.12.30
함수를 변수에 지정하기  (0) 2018.12.07
문자열 속에 매개변수 넣기  (0) 2018.12.06
함수(function)  (0) 2018.12.05
블로그 이미지

쵸잇

,

함수 호출시 인자 값이 전달된 문자열을 리턴하는 형태로 함수를 변경했고,

이를 새로운 변수에 담았다. 


1
2
3
4
5
6
7
function sayhello(name, age){
  return `Hello ${name}! Are you ${age}?`;
}
 
const greetRyan = sayhello('Ryan'31)
 
console.log(greetRyan)
cs


따라서 console.log()에는 변수만 입력하면 원하는 결과가 출력된다. 


블로그 이미지

쵸잇

,

함수의 매개변수와 문자열을 조합하여 한 줄의 문장을 만들었다.

(https://practice-a-lot.tistory.com/79)


1
2
3
4
5
6
7
8
9
function sayhello(name, age) {
  console.log("Hello"+','name+"!""Are you", age+"?");
}
 
sayhello("Ryan"31)
sayhello("Adrianne"31)
sayhello("Kaori"26)
sayhello("Bobby"25)
 
cs



매개변수를 사용하기 위해 전혀 아름답지 않게 곳곳에 따옴표(')나 쌍따옴표(")를 사용해야했다.


여기서 백틱(`)을 사용하여 한 줄의 아름다운 코드가 완성된다.


1
2
3
4
5
6
7
8
function sayhello(name, age) {
  console.log(`Hello ${name}!  Are you ${age}?`);
}
 
sayhello("Ryan"31)
sayhello("Adrianne"31)
sayhello("Kaori"26)
sayhello("Bobby"25)
cs


백틱(')으로 묶은 문자열 속에 ${매개변수} 형태로 매개변수까지 넣을 수 있다.


1
2
3
4
5
>>
Hello Ryan!  Are you 31?
Hello Adrianne!  Are you 31?
Hello Kaori!  Are you 26?
Hello Bobby!  Are you 25?
cs


생소한 백틱(`)과 ${}를 활용하면 된다.

블로그 이미지

쵸잇

,

상황:

고객용으로 회원가입시 고객 그룹인 "client"가 자동으로 추가되고, 

업체용인 경우는 "partner"가 그룹으로 추가되도록 한다.

(매개변수 활용)



1) 고객용 회원가입 페이지 접속시 "client" 값을 인자로 지정한다.


1
2
3
def signup(request):
    ctx = { "is_client" : True }
    return common_signup(request, ctx, "client")
cs



2-1) group 매개변수를 통해 "client" 인자를 넘겨 받고, user에 "client" 그룹을 추가한다.


2-2) Group 클래스는 User 클래스와 ManyToMany 관계로 user.groups로 데이터 접근이 가능하다.


1
2
3
4
5
6
7
8
9
10
11
def common_signup(request, ctx, group):
    if request.method == "GET":
        pass
    elif request.method == "POST":
        username = request.POST.get("username")
        email = request.POST.get("email")
        password = request.POST.get("password")
 
        user = User.objects.create_user(username, email, password)
        target_group = Group.objects.get(name=group)
        user.groups.add(target_group)
cs



3) client로 회원가입한 경우 고객용 로그인 페이지, partner로 가입한 경우 업체용 페이지로 리다이렉트한다.


1
2
3
4
5
6
        if group == "partner":
            return redirect("/partner/login/")
        else:
            return redirect("/login/")        
 
    return render(request, "signup.html", ctx)
cs



4) 고객용 회원가입은 인자를 "partner"로 변경하면 된다.


1
2
3
def signup(request):
    ctx = {}
    return common_signup(request, ctx, "partner")
cs



**

상황:

고객이 로그인 시도할 경우 고객 그룹 소속여부에 따라 로그인처리를 한다.

고객 그룹이 아닐시 "접근 불가" 메세지를 노출시킨다.



1)


1
2
3
def login(request):
    ctx = { "is_client" : True }
    return common_login(request, ctx, "client")
cs

 

 

2) group 매개변수로 받은 "client" 인자와 조건문을 통해 해당 유저가 속한 그룹과 대조를 한다. 실패시 에러메세지를 출력한다. 


1
2
3
4
5
6
7
8
9
10
def common_login(request, ctx, group):
    if request.method == "GET":
        pass
    elif request.method == "POST":
        username = request.POST.get("username")
        password = request.POST.get("password")
        user = authenticate(username=username, password=password)
        if user is not None:
            if group not in [group.name for group in user.groups.all()]:
                ctx.update({ "error" : "접근 권한이 없습니다." })
cs



3) 로그인에 성공시 속한 그룹에 따라 메인페이지를 달리한다. 


1
2
3
4
5
6
7
8
9
10
            else:
                auth_login(request, user)
                next_value = request.GET.get("next")
                if next_value:
                    return redirect(next_value)
                else:
                    if group == "partner":
                        return redirect("/partner/")
                    else:
                        return redirect("/")
cs


블로그 이미지

쵸잇

,


상황:

현재 고객용, 업체용 로그인 view 함수가 넘겨주는 ctx를 제외한 나머지가 동일하다.

굳이 똑같은 코드를 2번이나 사용할 필요가 없으므로 1개로 줄이고 서로 호출해서 사용하고자한다.



1-1) login 함수의 내용을 common_login 함수로 옮긴다. 


1-2) 고객용 로그인에서 업체용 링크를 배치시켜야하므로 ctx를 매개변수로 포함시킨다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
def common_login(request, ctx):
    if request.method == "GET":
        pass
    elif request.method == "POST":
        username = request.POST.get("username")
        password = request.POST.get("password")
        user = authenticate(username=username, password=password)
        if user is not None:
            auth_login(request, user)
            next_value = request.GET.get("next")
            if next_value:
                return redirect(next_value)
            else:
                return redirect("/partner/")
 
        else:
            ctx.update({ "error" : "존재하지 않는 사용자입니다." })
 
    return render(request, "login.html", ctx)
cs



2-1) common_login 함수를 호출하여 사용한다. 


2-2) ctx도 같이 넘겨준다.


1
2
3
def login(request):
    ctx = { "is_client" : True }
    return common_login(request, ctx)
cs


3) 회원가입 페이지도 마찬가지로 하나로 줄여서 호출해서 사용하며, 업체용 view에서는 로그인 함수를 import하여 사용한다.

블로그 이미지

쵸잇

,
1
2
3
<div class="text-center>
  텍스트 가운데 정렬하기
</div>
cs


블로그 이미지

쵸잇

,


상황:

2개의 로그인 함수(업체용, 고객용)가 1개의 로그인 템플릿공유하고 있다.

기본 로그인 페이지고객용에 해당하고, 업체용고객용 페이지 하단에 링크를 만들어 링크를 통해 이동한다.

단, 해당 링크고객용에서만 노출되고, 업체용 로그인 페이지에서는 링크가 노출되지 않아야한다.




1-1) 우선 링크를 작성하면 양쪽 로그인 페이지 하단에서 링크가 노출되고 있다.


1-2) 조건문을 작성하여 "참(True)"인 경우에만 링크가 노출되도록 한다. 



1
2
3
4
5
{% if is_client %}
<div class="text-center">
  <a href="/partner/login/">업체용 로그인 페이지</a>
</div>
{% endif %}
cs

 


2) 고객용 로그인 뷰 함수에서 ctx를 통해 "True"값을 전달한다.


1
2
def login(request):
    ctx = { "is_client" : True }
cs



업체용 로그인 뷰에서는 True 값이 전달되지 않으므로 링크가 노출되지 않는다.

블로그 이미지

쵸잇

,