JSON.parse(), forEach()

코딩 연습/Javascript 2018. 12. 31. 21:52

JSON은 JavaScript Object Notation의 준말이다. 자바스크립트 객체 표기로 해석해도 될지 모르겠다.

JSON.parse(text)에서 text는 JSON으로 파싱할 문자열에 해당한다.

다시 말하면, datatype이 현재 문자열인 데이터를 객체형 데이터로 바꾸겠다는 뜻으로 보면 좋다.




웹브라우저에서 폼을 통해 입력 받은 값을 문자열로 저장해야 스크린샷처럼 작성한 text와 id 값을 정확히 알 수 있다


1
localStorage.setItem(TODOS_LS, JSON.stringify(toDos));
cs


JSON.stringify(text)는 text를 문자열로 변환해주는 메소드이다.




그리고 로컬스토리지에 문자열 형태로 저장된 값을 호출하여 웹브라우저 상에서 띄우려면 다시 객체로 파싱해주어야한다. 


1
2
const loadedToDos = localStorage.getItem(TODOS_LS);
const parsedToDos = JSON.parse(loadedToDos);

c



객체로 파싱하여 정의된 변수를 객체(배열) 안에 포함된 요소마다 paintTodo 함수를 적용하기 위해 forEach() 메소드를 사용한다.


1
2
3
parsedToDos.forEach(function(toDo){
    paintToDo(toDo.text);
})
cs


저작자표시

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

배경화면 랜덤으로 출력하기  (0) 2019.01.02
Array.filter()  (0) 2019.01.01
조건부 삼항 연산자(conditional ternary operator)  (0) 2018.12.30
객체 안에 특정 함수를 속성으로 지정하기  (0) 2018.12.07
함수를 변수에 지정하기  (0) 2018.12.07
블로그 이미지

쵸잇

,

조건부 삼항 연산자(conditional ternary operator)

코딩 연습/Javascript 2018. 12. 30. 15:28

조건부 삼항 연산자(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
블로그 이미지

쵸잇

,

urls.py에서 인증 시스템(로그인, 로그아웃) 호출하여 사용하기

코딩 연습/Django 2018. 12. 19. 20:51

장고 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


저작자표시

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

Form을 통해 데이터 입력 받기  (0) 2019.05.13
UnicodeDecodeError: 'cp949' codec can't decode byte 0xe2 in position 9735: illegal multibyte sequence  (5) 2019.04.23
pip 라이브러리 정리 및 클론하기  (0) 2018.12.11
회원가입시 그룹 추가시키기  (0) 2018.12.06
공통된 2개 뷰 함수를 1개로 만들어 호출해서 사용하기  (0) 2018.12.06
블로그 이미지

쵸잇

,

as long as, as far as 파헤치기

외국어/영어 2018. 12. 16. 10:33

as long as의 의미를 "~하는 한"으로 한 가지 뜻만 알고 있는 상태였다.


그래서 가끔 as long as가 쓰인 문장을 이해하기 어려울 때가 있었다.


이를 극복하기 위해 다시 재점검할 필요성이 생겼다.



지난번 일본어를 공부하다가 "限り하고 に限って"의 영어 번역 글 중에 해석이 "as long as"를 무심결에 보고 지나쳤었는데,


그걸 이제서야 떠올리고, 전반적인 쓰임에 대해 이해했다.


"限"는 "제한"의 뜻을 담고 있는 한자이다. 따라서 주로 번역이 "~에 한해서" "~경우에만" 으로 제한 뿐만 아니라 "조건"의 뜻도 가질 수 있다.


(즉, "~하는 한"에서 "한"이 "限"인 것이다. 한자 까막눈이면 이렇게 이해하는데 시간이 많이 걸린다..)



"제한"과 "조건"으로 이해한 상태에서 "as long as"를 다시 보면 훨씬 눈에 잘 들어왔다.


I will always be with you as long as I am alive. 

내가 살아있는 한 너랑 평생 함께 할 거야. (제한을 둔다)


You can go to the club as long as you come back home until 12p.m.

너가 12시까지 돌아온다면, 클럽에 가도 괜찮아. (조건을 둔다)



"as far as"도 비슷하게 해석하면 된다.


As far as the dictionary, there seems to be no such a word.

그 사전에서만, 그런 단어가 없는 것 같다. (사전에 한해서)


As far as I've been observing him, there is nothing strange about him.

그를 계속 지켜본 바로는 특별히 이상한 점을 찾을 수 없었다.



 






as long as, as far as

저작자표시

'외국어 > 영어' 카테고리의 다른 글

조동사 can, could는 어떻게 쓸까  (0) 2018.12.14
현재완료 파헤치기  (0) 2018.10.04
블로그 이미지

쵸잇

,

조동사 can, could는 어떻게 쓸까

외국어/영어 2018. 12. 14. 18:28

1. can과 be able to는 같은 말일까?


영어시간에 'can = be able to' 라는 필기를 어릴 적이 많이 했었다.

그럼에도 아직까지 사용하는데 서툰 점이 많다.

어떤 상황에서 쓸 수 있는지 고민해보고, 상황에 맞게 표현을 써보자.



1) 의미는 같은데 be able to만 써야하는 경우 


'할 수 있다' 의미를 can 아닌 be able to로만 써야할 경우가 종종 있는데, 

can은 조동사이므로 이미 다른 조동사를 사용하여 중복되거나, 

to부정사에서 '할 수 있다' 뜻을 담기 위해서이다. 

This monitor is so heavy - are you serious you'll be able to carry it by yourself?


(이 모니터 엄청 무거워, 너 정말 혼자서 이거 옮길 수 있겠어?)

You may be able to get a temporary passport at the airport.

(너 아마 공항에서 임시 여권 받을 수 있을거야)

Carol is expected to be able to meet him again next weekend.

(Carol은 다음주에 그를 다시 만날 수 있을 거라고 예상한다)

To take the class, you have to be able to know how to use python language.

(이 수업을 듣기 위해서는 당신은 python 언어를 사용할 수 있어야한다) 


2) 의미가 다른 경우


can/could는 노력을 내포하지 않고 갖고있는 일반적인 능력을 논할때 사용하고,

be able to는 노력을 통해서 어렵사리 할 수 있게 된 경우나 어느 한 사건에만 해당하는 경우에 쓰인다.


I could ride a bike when I was 6.

(나는 6살 때 자전거를 탈 수 있었다.)

I can speak 5 languages. 

(나는 5개국어를 할 수 있다.)

* 두 예문 모두 노력을 통해 얻은 능력은 분명하다. 다만 이미 할 수 있는 능력을 갖춘 상태이므로 예문 자체에서는 노력의 뜻을 포함되지 않는다.


I was able to get to the top of the mountain.

(나는 산 정상에 오를 수 있었다.) (산 정상에 오르는 건 쉽지 않은 일이므로 노력을 통해 힘들게 올랐음을 뜻하고 있다.)

Consumers are now able to buy the drug without a presription.

(소비자들은 이제 처방전 없이 약을 구매할 수 있다) (원래 구매하지 못했는데 구매할 수 있게 되었다. 일반적인 능력을 쓸 수 없는 예문이다)




저작자표시

'외국어 > 영어' 카테고리의 다른 글

as long as, as far as 파헤치기  (0) 2018.12.16
현재완료 파헤치기  (0) 2018.10.04
블로그 이미지

쵸잇

,

pip 라이브러리 정리 및 클론하기

코딩 연습/Django 2018. 12. 11. 11:16

pip freeze  

라이브러리 목록 보여주기


pip freeze > requirements.txt

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


pip install -r requirements.txt

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

저작자표시

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

UnicodeDecodeError: 'cp949' codec can't decode byte 0xe2 in position 9735: illegal multibyte sequence  (5) 2019.04.23
urls.py에서 인증 시스템(로그인, 로그아웃) 호출하여 사용하기  (0) 2018.12.19
회원가입시 그룹 추가시키기  (0) 2018.12.06
공통된 2개 뷰 함수를 1개로 만들어 호출해서 사용하기  (0) 2018.12.06
조건에 따라 링크 페이지 노출  (0) 2018.12.06
블로그 이미지

쵸잇

,

객체 안에 특정 함수를 속성으로 지정하기

코딩 연습/Javascript 2018. 12. 7. 00:44

객체를 다시 떠올리면,


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(5, 5)
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(5, 5)
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(5, 5)
console.log(sum)
const sub = calculator.sub(12, 5)
console.log(sub)
const mul = calculator.mul(3, 8)
console.log(mul)
const div = calculator.div(20, 5)
console.log(div)
const imp = calculator.imp(2, 8)
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
블로그 이미지

쵸잇

,

함수를 변수에 지정하기

코딩 연습/Javascript 2018. 12. 7. 00:16

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

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


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()에는 변수만 입력하면 원하는 결과가 출력된다. 


저작자표시

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

조건부 삼항 연산자(conditional ternary operator)  (0) 2018.12.30
객체 안에 특정 함수를 속성으로 지정하기  (0) 2018.12.07
문자열 속에 매개변수 넣기  (0) 2018.12.06
함수(function)  (0) 2018.12.05
배열(array)과 객체(object)를 확장해서 사용  (0) 2018.12.04
블로그 이미지

쵸잇

,

문자열 속에 매개변수 넣기

코딩 연습/Javascript 2018. 12. 6. 23:51

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

(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


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

저작자표시

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

객체 안에 특정 함수를 속성으로 지정하기  (0) 2018.12.07
함수를 변수에 지정하기  (0) 2018.12.07
함수(function)  (0) 2018.12.05
배열(array)과 객체(object)를 확장해서 사용  (0) 2018.12.04
객체(object)를 이용해 데이터 다루기  (0) 2018.12.04
블로그 이미지

쵸잇

,

회원가입시 그룹 추가시키기

코딩 연습/Django 2018. 12. 6. 13:53

상황:

고객용으로 회원가입시 고객 그룹인 "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


저작자표시

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

urls.py에서 인증 시스템(로그인, 로그아웃) 호출하여 사용하기  (0) 2018.12.19
pip 라이브러리 정리 및 클론하기  (0) 2018.12.11
공통된 2개 뷰 함수를 1개로 만들어 호출해서 사용하기  (0) 2018.12.06
조건에 따라 링크 페이지 노출  (0) 2018.12.06
그룹에 속한 사용자만 접속 가능한 페이지  (0) 2018.12.05
블로그 이미지

쵸잇

,

공지사항

글 보관함

달력

«   2024/12   »
일 월 화 수 목 금 토
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
29 30 31

티스토리툴바