만들었던 앱을 나중에 다른프로젝트에 재사용하고 싶으면 
app을 패키징하면 된다

1. 새로운 폴더를 생성한다. 

2. 만들었던 app을 통째로 옮긴다. 

3. 새로운 폴더에 필요한 파일4개를 추가로생성한다. 

 

1.README.rst
앱 기능 명시

한글을 되도록이면 쓰지 않는다. 

https://docs.djangoproject.com/ko/2.1/intro/reusable-apps/

2.LICENSE
코드의 라이센스 명시

https://www.olis.or.kr/license/Detailselect.do?lId=1093&mapCode=010003

3.setup.py
패키지 설치 과정 명시

https://docs.djangoproject.com/ko/2.1/intro/reusable-apps/

 

4.MANIFEST.in
파이썬 파일 이외의 파일 명시

#예를 들면
include LICENSE
include README.rst
recursive-include templates *

 

4. 패키징 진행

$ python setup.py sdist

5. 패키징한 앱 설치 및 사용하기

dist있는 폴더의 위치를 잘 파악해 압축된 앱 설치한다. 

 

$ pip install dist/login-0.1.tar.gz

'Django > Django 활용하기' 카테고리의 다른 글

1. Django에서 login, logout 기능 만들기  (0) 2019.12.23

<배운 지식>

1. 로그인 회원가입 로그아웃을 구현하는 과정 

2. 회원가입 , 로그인 , 로그아웃을 구현하기 위해 내장된 장고 Class 

# 회원가입에 사용되는 User class를 가져와준다. 장고에서 기본제공하는 기능 
from django.contrib.auth.models import User
# 유저권한에 관련된  auth class를 가져온다. 
from django contrib import auth  

3. {% csrf_token %}  : 난수 발생시켜 올바른지 확인 보안을  위해서 사용한다. 

 

 

 

 

 

 

 

 

 


 

 

1. 프로젝트 생성하기 , App 생성하기 

 

 

 우선 VSCode를 실행시켜서 디렉토리를 만들고 터미널 창을 켜준다. 

가상환경을 키고 장고를 설치한다. ( Mac 환경 ) 

# 가상환경 설치 
virtualenv venv 
# 가상환경 실행
source venv/bin/activate

# 장고 설치 
pip install django 

 

이제 장고프로젝트를 생성해준다. ( 프로젝트 이름은 loginproject )

django-admin startproject loginproject

 


2. Login App 만들기 ( 기능구현 전 작업 ) 

 

app 만들고 장고프로젝트와 연결해주기 

 

프로젝트 폴더가 성공적으로 만들어지면 폴더 경로로 들어가자. 이제 새로운 앱을 만들어 준다. ( 앱 이름은 loginapp)

python manage.py startapp loginapp

 

그리고 프로젝트 폴더의  setting.py에 가서 설치된 app목록에 loginapp을 추가해준다. 

INSTALLED_APPS = [
    'loginapp',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

 

 

urls.py 만들기

URL을  장고프로젝트에서 모두 관리하기 보단, App에서 urls.py를 만들어 관리해 줍시다.
필수 작업은 아니지만 습관들이면  관리하기 아주 편합니다. 

 

앱 폴더에 urls.py를 만들어 줍니다. 

다음과 같이 적어줍니다, 

loginapp/urls.py

from django.contrib import admin
from django.urls import path
from . import views


urlpatterns = [
    path('signup/', views.signup, name='signup'),
    path('', views.login, name='login'),
    path('home/', views.home, name='home'),

]  
    

세가지 url을 만즐어 줍니다. 
1. 회원가입, url

2. 로그인 url

3. 로그인에 성공하면 뜨는 url (위에서 home이라고 이름 붙인url) 

 

 

이제 프로젝트 폴더에 있는 urls.py로 가서  앱에 있는 urls.py를 연결합니다.

import include 해주고 다음과 같이 사용합니다. 

 

loginproject/urls.py

from django.contrib import admin
from django.urls import path, include
import loginapp.views


urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('loginapp.urls')),
] 

 

 

App 안에 template 만들기

로그인 앱을 구현하기 위해서 총 3개 html 페이지를 만들어 줘야합니다.
(로그인 페이지, 회원가입 페이지, 로그인 성공하면 보여주는 페이지)

loginapp에 가서 templates 폴더를 만들어 준 뒤 signup.html ,  login.html, home.html 페이지를 만듭니다.

 

 

 

signup.html 

<h1>회원가입 페이지. </h1>

<form>
    Username:
    <br>
    <input name='username' type='text' value=''>
    <br>
    Password:
    <br>
    <input name='Password1' type="password" value=''>
    <br>
    Confirm Password:
    <br>
    <input name='Password2' type="password" value=''>
    <br>
    <input class='btn btn-primary' type="submit" value="Sign Up!">
</form>

 

login.html

<h1>로그인 페이지</h1>

<form>
    Username:
    <br>
    <input name='username' type='text' value=''>
    <br><br>
    Password:
    <br>
    <input name='Password' type="password" value=''>
    <br><br>
    <input class='btn btn-primary' type="submit" value="Login">
</form>

 

home.html

<h1>로그인에 성공했네?ㅋㅋ</h1>

 

App에 view 만들기


우리가 만든 페이지를 연결해두는 것만 만듭니다. 

 

 

views.py 

from django.shortcuts import render

# Create your views here.
def signup(request):
    return render(request, 'signup.html')

def login(request):
    return render(request, 'login.html')
    
def home(request):
    return render(request, 'home.html')

 

 

일단 이렇게  틀 만 맹글어 놓읍시다.


 

3. 기능 구현하기   

 

 

 

templates 수정하기

 

signup.html

 

1. signup.html 에서  form 태그에서 받은 데이터를 POST로 받고 login.html에 넘기게 합니다. 

<form action="{% url 'signup' %}" method="POST" >

 

2. csrf token을  템플릿언어로 추가해 보안을 강화해봅니다. ( 뭔가 해봄직한 첨가물. 궁금하면 검색 ㄲ)

 

{% csrf_token %}

 

 

바뀐 결과는 간단합니다. 

 

signup.html

 

<h1>회원가입 페이지. </h1>

<form action="{% url 'signup' %}" method="POST" >
{% csrf_token %}
    Username:
    <br>
    <input name='username' type='text' value=''>
    <br>
    Password:
    <br>
    <input name='password1' type="password" value=''>
    <br>
    Confirm Password:
    <br>
    <input name='password2' type="password" value=''>
    <br>
    <input class='btn btn-primary' type="submit" value="signup">
</form>

 

 

 

 

login.html

 

signup 페이지와 마찬가지로 1,2번을 추가합니다.

추가로 error가 뜨면 error가 나오게 하고, 회원가입 페이지로 갈 수 있는 a태그도 추가합니다.

 

바뀐결과는 

 

<h1>로그인 페이지</h1>

{% if error %}
{{ error }}
<br>
<br>
{% endif %}
<h1>Login</h1>

<form method="POST" action="{% url 'login'%}">
{% csrf_token %}
    Username:
    <br>
    <input name="username" type="text" value="">
    <br>
    Password:
    <br>
    <input name="password" type="password" value="">
    <br>
    <br>
    <input class="btn btn-primary" type="submit" value="Login">
</form>

<a href="{% url 'signup' %}" method = 'POST' > 회원가입</a>

 

 

home.html 은 지금이 멋있으니깐 그대로 둡시다.

 

 

 

views.py 수정하기

우선 로그인 로그아웃에 관련된 함수를 쓰기 위해 다음과 같이 import해줍니다.

 

from django.shortcuts import render, redirect
from django.contrib.auth.models import User
from django.contrib import auth

 

signup 함수 수정하기

로그인 회원가입 기능은 장고의 내장 함수가 있습니다.

 

예를 들면 로그인을 하는 함수는

auth.login(request, user)

  

유저를 만드는 함수는  

User.objects.create_user()

 

 

이 함수를 이용해서 username 과 password1를 post로 받아 저장하는 하는 함수를 만든다면 

user = User.objects.create_user(
                username=request.POST['username'],
                password=request.POST['password1']
            )

 

 

위에 함수를 이용해 signup 결과는  

def signup(request):
    if request.method == "POST":
        if request.POST['password1'] == request.POST['password2']:
            user = User.objects.create_user(
                username=request.POST['username'],
                password=request.POST['password1']
            )
            auth.login(request, user)

            return redirect('home')

    return render(request, "signup.html")

 

 

 

login 함수 수정하기

 

내장 함수를 사용하면 됩니다. 

 auth.authenticate() : 등록된 회원인지 확인

 auth.login(request,user) : 로그인 

 

위 함수를 사용한 코드결과는 

def login(request):
    if request.method == "POST":
        username = request.POST['username']
        password = request.POST['password']

        user = auth.authenticate(
            request, username=username, password=password
        )

        if user is not None:
            auth.login(request, user)
            return redirect('home')
        else:
            return render(request, "login.html", {
                'error': 'Username or Password is incorrect.',
            })
    else:
        return render(request, "login.html")

 

 


 

 

 

 

4. 로그아웃 만들기    

 urls.py 추가하기

로그인 앱에 있는 urls.py에 추가해줍니다. 

 

 

from django.contrib import admin
from django.urls import path
from . import views


urlpatterns = [
    path('signup/', views.signup, name='signup'),
    path('', views.login, name='login'),
    path('home/', views.home, name='home'),
   
    path('logout/', views.logout, name='logout'),

]

 

 

 

 views.py 추가하기

내장된 로그아웃 함수는 auth.logout(request) 

def logout(request):
    if request.method == 'POST':
        auth.logout(request)
        redirect('home')
    return render(request,'login.html')

 

 

 template 추가하기

 

로그인에 성공한 화면인 home.html 에서 a테그와 템플릿 언어를 통해 로그인 버튼을 구현해 봅니다.

 

<h1>로그인에 성공했네?ㅋㅋ</h1>

<a href="{% url "logout" %}">로그아웃하기</a>

 

  

'Django > Django 활용하기' 카테고리의 다른 글

2.Django app 재사용하기  (0) 2020.01.24

<요약> 

 

1. Httpie 란

2. Httpie 사용법

3. 연습해보자. (example.com)


1. Httpie 란

CLI(command line interface)으로 동작하는 http client 이다.

 

다른 http client로는 웹 브라우저 , javascript등 있다. 

 

 

설치 방법

 

pip install --upgrade httpie

 

 

2. Httpie 사용법

 

httpie의 명령어는 http로 시작한다. 

http [flags] [METHOD] URL [ITEM[ITEM]]

 

  • flags : 옵션 
    - ex. json 형식으로 보낸다.  or html form형식으로 보내는 옵션
  • METHOD : HTTP METHOD
    - ex. POST, GET, DELETE , PUT ...
  • URL : 요청이나 응답의 대상 URL
     
  • ITEM : 처리할 값 (인자)   
    - PUT 혹은 POST에서 인자를 사용할 때는  = 로 표현
    - GET에서 인자를 사용할 때는 == 로 표현 
    - GET은 디폴트값이라 생략 가능 

 3. 연습해보자. 
 
(1) httpie 에서 GET 요청하기 ("보여줘" 요청)

이 도메인 URL 을 사용해서 GET요청을 연습해보겠다.

 

이 url은 example.com  

 

 

 우선  터미널을 열고 httpie를 설치한다.

pip install --upgrade httpie

 

잘 설치되었는지 확인하기 위해 다음 명령어를 입력해보자,. 

http

 

 

잘 설치했다면 이런 결과가 나옵니다. 

 

 

 

이제  위 URL 를 이용해서 httpi GET요청 해보자.

사용법은  위에서 말했듯http [flags] [METHOD] URL [ITEM[ITEM]] 이다. 

http [옵션없음] [get] "example.com" [인자없음]  이렇게 적자면 

http get "example.com"


라고 명령어를 치면 다음 결과가 나온다. 

 

실행 결과 

 

맨 위에 보면 200번대 응답을  받았고 
그외 정보를 받고
밑에 html 코드가 나오는 것을 알 수 있다. 

 

 

이번에 는밑에 나온  html 를 생략하는 옵션을 추가하고 GET 을 요청해보자. 

GET은 디폴트여서 생략가능하다. 

html코드는 뺴는 옵션은  --headers이다. 

 

 

http [--headers] [get(생략)] "example.com" [인자없음] 

http --headers "example.com"

라면 다음과 같이 html이 생략된  결과가 나온다. 

 

실행 결과 

 

(2) httpie 에서 PUT 요청하기 ("수정해죠" 요청)

 

사용법은  위에서 말했듯http [flags] [METHOD] URL [ITEM[ITEM]] 이다. 

 

http PUT example.com a==1 b=2

 

 

결과는 응답없음. timeout.. 

 

 

(3) httpie 에서 DELETE 요청하기 ("지워죠" 요청)

http [flags] [METHOD] URL [ITEM[ITEM]] 를 다음과 같이 적는다. 

http DELETE example.com a==1

 

 

결과는

405 ,, 400번대로 거절당했다

 

(4) httpie 에서 POST 요청하기 ("넣어줘" 요청)

 

- jSON 형식으로  

 

http --json POST example.com a==1 b=2

결과.

잉? 이게 왜 되는거지? 

 

 

- html form 형식으로

 

http --form POST example.com a==1 b=2

  

????

 

 

 

 

더 자세한 자료를 공부하고 싶으면 참고하면 좋을 자료다. 

https://httpie.org/

 

HTTPie – command line HTTP client

CLI HTTP that will make you smile. JSON support, syntax highlighting, wget-like downloads, extensions, and more.

httpie.org

 

'Django > REST Framwork' 카테고리의 다른 글

2. HTTP method  (0) 2019.12.14
1. JSON  (0) 2019.12.14

<요약> 

 

1. server와 Client

2. django에서  HTTP Method

3. django Rest Framework에서 HTTP Method

4. HTTP Response

 

 

 


 

1. Server ,Client

 

웹상에서 통신을 주고받는 주체는 server client이다. 

client : 데이터를 request

server : request 받은 정보를 잘가공해서 처리하는 역할 

 

 

 

 

2. django에서  HTTP Method

이때 웹상에서 통신을 수행할 수 있게 끔 해주는 통신 규약을 HTTP라 한다.

장고에서 지원하는 HTTP 프로토콜 메소드는 크게 두가지가 있다. 

1.GET
2.POST

 

 

GET POST이 두가지의 차이는 다음과 같다. 

GET POST
갖다줘 처리해줘
URL에 데이터 정보를 포함 포함x

즉,같은 URL, view 로직이여도 여도 수행하는 업무가 다를 수 있었다. 

 

 

3. django Rest Framework에서 HTTP Method

 

Method 기능
GET 요청받은 URL의 정보를 검색하여 응답한다.
POST 요청된 자원을 생성 (CREATE) 한다.
PUT 요청된 자원을 수정 (UPDATE) 한다.
DELETE 요청된 자원을 삭제한다.
PATCH 요청된 자원의 일부를 교체(수정)한다
OPTION 웹서버에서 지원되 메소드의 종류 확인

http://example.com/post라는 URL이 존재한다 가정하고
해당 URL은 글들의 목록을 띄워주는 기능을 갖는 페이지다.

 

해당 URL에 

GET으로 요청을 보냈을 때 서버는 글들의 목록을 반환한다.
POST로 요청을 보냈을 때 서버는  새로운 글 작성하도록 한다.

 

예시의 URL이 글의 목록을 띄워주는 URL일 경우 PUT과 PATCH와 같은
Http Method를 가지고 있을 필요가 없다.
모든 URL이 모든 Http Method를 가지고 있을 필요가 없다.

 

 

 

4.HTTP Response

 

Django Rest Framework의 REST API 에서는 JSON을 주고받는다.

서버의 Response에는 아래와 같은 종류가 존재한다.

  • 1XX (정보)
    • 요청을 받았으며 프로세스를 계속한다.
  • 2XX (성공) :
    • 요청을 성공적으로 받았으며 인식했고 수용했다.
  • 3XX (리다이렉션) :
    • 요청을 완료하기 위해 추가 작업 조치가 필요하다.
  • 4XX (클라이언트 오류) :
    • 요청의 문법이 잘못되었거나 요청을 처리할 수 없다.
  • 5XX (서버 오류)
    • 서버가 명백히 유요한 요청에 대해 충족에 실패했다.

 

 

'Django > REST Framwork' 카테고리의 다른 글

3. Httpie  (0) 2019.12.16
1. JSON  (0) 2019.12.14

<요약> 

1. json이란?

2.직렬화(json은 문자열로 보낸다.)

3. json 문법형식

4.json 표현법 예시

5. python에서 직렬화 예시

 

 

1. JSON이란? 

 

 

Java Script Object Notation 의 약자
(자바 스크립트 객체 표기법) 즉, 데이터 표현식이다. 

즉,

데이터 송수신을 자바스크립트 문법으로 표현된 객체로서 수행할 수 있게 하는 가벼운 문자열 데이터 표현식 이다. 

(자바스크립트를 사용하지 않아도 쓸 수 있음) 

(공식문서)

 

 

웹상에서  Client와 Server는 다음과 같은 항목을 주고 받는다. 

1. html (구조를 나타내는)

2. css (스타일을 표현하는)

3. javascript (논리를 구현하는)

 

이런 스타일과 로직 없이 데이터만 주고 받기 위해 JSON을 쓴다. 

 

 

 

2. 직렬화 (json은 문자열로 보낸다.) 

 

JSON으로 데이터를 주고 받을때 그냥 JSON형태로 주고 받아도 괜찮을까? 

JSON은  javascript으로 만든 표현식 (객체)이지만  javascript를 모르는 사람은 어떻게 알 수 있을까? 

 

JSON은 표현하고자 하는 데이터를 문자열로 변환해서 전송을 한다.

이것을 직렬화(Serialization)라고 한다.

때문에 어느 프로그램,언어를 막론하고 데이터를 통신,주고 받을 수 있다.

 

반대로 요청한 데이터를 JSON객체 형태로 받는 것을 역 직렬화 라고 한다. 

 

 


3. JSON 문법 형식 

 

JSON은 python의 Dictionary  비슷하다. 

name : value 로 구성되어 있고, 중괄호 { }를 사용한다. 

숫자, 문자(열), Boolean, 배열, 객체로 구성이 가능하다.

 

예시 구조를 보자. 

json_example = {
    "string_name": "something",
    "number_name": 3,
    "null_name": null,
    "bool_name": true
}

 

 

4. 예시와  JSON을 직렬화로 보내기

 

일기 no.1

제목 : 오늘 일찍 일어났다. 
본문 : 일찍 졸렸다. 

 

 

라는 예시를 JSON 형식으로 나타내면 다음과 같다. 

{
    "id" : 3,
    "title : "오늘 일찍 일어났다.",
    "body" : "오늘 일찍 졸렸따." 
}

 

 

이 예시를 그냥 보내면 언어 막론하고 다 알아볼까? 
자바스크립트를 문자열로 직렬화해줘서 보내야 한다. 

 

정리하자면,
데이터를 보낼 때 JSON을 문자열로 바꾸어 보내고

데이터를 받을 떄 문자열을 JSON으로 바꾸어 받는다. 

 

5. Python 에서 JSON 다루기

 

python에서 JSON을 다루려면 먼저 맨위에 import json을 써줘야 한다. 

 

import json

 

 

다음과 같이'diary'라는 이름의 파이썬 자료형인 딕셔너리가 있다. 

 

diary = {
    "id": 3,
    "title": "Hi orange",
    "body": "good",
}

print(diary)
print(type(diary))

 

output

{'id': 3, 'title': 'Hi orange', 'body': 'good'}
<class 'dict'>

 

 

이것을 직렬화 해주려면 json.dums()를 써주면 된다. 

 

diary_s =  json.dumps(diary)
print(diary_s)
print(type(diary_s))

 

output

{"id": 3, "title": "Hi orange", "body": "good"}
<class 'str'>

 

보시다시피 자료형이 딕셔너리에서 문자열로 바뀐 것을 볼 수 있다. 

 

역직렬화는 json.loads()를 써주면 된다. 

 

diary_back = json.loads(diary_s)
print(diary_back)
print(type(diary_back))

 

output

 

{'id': 3, 'title': 'Hi orange', 'body': 'good'}
<class 'dict'>

'Django > REST Framwork' 카테고리의 다른 글

3. Httpie  (0) 2019.12.16
2. HTTP method  (0) 2019.12.14

<요약>

1.class

2. constructor

3. super

 

 


 

1. class 

자바스크립트에서 클래스란 생성자 함수를 의미한다. 

 

함수(function)는 우리가 알고리즘 문제를 풀때는 특정 기능을 하는 구문을 묶을 때 사용 하는 문법이라면,

클래스(Class)는 이렇게 만들어진 함수와 변수들을 연관 있는것끼리 묶을때 사용되는 문법이다.

클래스(Class)를 사용해서 묶어 놓는 이유는 편하게  코드를 재사용하기 위해서다.  

 

 

2. constructor 

 

생성자(constructor)는 객체를 만드는 역할을 하는 함수다. 함수안에 생성자는 객체를 만들어 주기위해 만드는 것이고 "초기모델", "초기값"이라고 이해하자.

 

즉, Class 안에 constructor는 보통 class의 초기값을 설정해 주는데 사용된다. 

 

 

예시코드를 보자 .

class Lion {
	// class의 초기값 설정. 생성자와 비슷하다고 보면 된다.
	constructor( name ){
	this.name = name
	}
	getName( ){
	console.log("내 이름은 "+this.name)
	}

}
myLion = new Lion("King")
myLion.getName()

결과는 "내 이름은 King"이 나오는 것을 볼 수 있다. 

 

 

 

 

 

 

3. 상속 

 

자바스크립트에서 상속이란  상속이란 부모 클래스(class)의 속성을 그대로 물려받고 새로운 속성을 추가하여 확장할 수 있는 기능이다.

 

 

 위의 예시 코드에서 상속을 추가해보자.

class Animal {
    constructor(leg){
        this.leg = leg
    }
    printAnimal(){
        console.log(this.name+"은 다리가" + String(this.leg)+"개")
    }
}

class Lion extends Aniaml {
	// class의 초기값 설정. 생성자와 비슷하다고 보면 된다.
	constructor( name ){
	this.name = name
	}
	getName( ){
	console.log("내 이름은 "+this.name)
	}

}
myLion = new Lion("King")
myLion.getName()

 

이런식을 부모 클래스(class)인 Animal을 만들어주고 Animal의 기능을 가져다 쓰기 위해 Lion 클래스(class)에 extends 를 추가한 것을 볼 수 있다. 

 

 

 

 

 4. Super

그런데 이것을 실행하면 오류가 나오는데 

ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

 

Super를 꼭 필요하다라는 오류가 나온다. 

super를 다음과 같이 Lion 클래스(class)에 추가해보면  

class Animal { 
	constructor(leg) { 
    	this.leg = leg
	}
	printAnimal(){
    	console.log(this.name+"은 다리가 "+String(this.leg)+"개")
	}
}

class Lion extends Animal {
    constructor(name) {
	    // 이렇게 superclass를 호출해준다
	    super(name)
	    this.name = name
    }
    ... (이하 생략) ... 
}
myLion = new Lion("King")
myLion.getName()
myLion.printAnimal()

"내이름은 King"
"King은 다리가 King개"
라고 결과가 나온다. 


여기서 알게된 점은 2가지가 있는데 이것을 기억하고 가자. 

 

1. Animal라는 부모 클래스(class)에서  자식 클래스(class)인 Lion의 this.name을 가져다 쓸 수있구나.

2. super는 부모 클래스의 constructor의 input이구나. 

 

 

위에 예시는, super를  사용했기 때문에 결과는  잘 실행됐지만 올바르지 않은 예시이다. 

super를 올바르게 사용하기 위해서는 다음과 같이 바꿔주면 된다. 

 

class Animal { 
	constructor(leg) { 
	this.leg = leg
	}
	printAnimal(){
	console.log(this.name+"은 다리가 "+String(this.leg)+"개")
	}
}

 class Lion extends Animal {
    constructor(name, leg) {
		// 부모 constructor의 input으로 name, leg 보내자
	    super(name, leg) 
	    this.name = name
    }
    ... (이하 생략) ... 
}
myLion = new Lion("King", 4)  // 객체를 생성할 때도 인자 두 개 주기
myLion.getName()
myLion.printAnimal(

 

<요약>

 

1. Arrow Function 예시. 

2. Arrow Function을 활용(map,filter)

 

 




리엑트를 배우기 전에 javascript의 핵심적인 내용 4가지를 알아야한다. 

 

1.Arrow Function

2.Class & Super

3.Asynchronous

4.Promise &Async Func

 

이번 글은 Arrow function에 대해 설명하고자 한다. 

 

1. Arrow Function 

화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고  자신의 thisargumentssuper 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명입니다. 이  함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다.  (출처arrowfunction 설명)

 

 

Arrow Function을 제대로 이해하기 위해서는 위의 설명을 완벽하게 이해해야 한다.  위 설명의 핵심은 두가지이다.

 

1. this를 바인딩하지 않는다. 

2. 메소드함수가 아닌곳에 가장 적합하다. 

 

 

표현 방법은 다음과 같다.

 

 

Arrow Filter 표현방법

 

 

예시를 통해 알아보자 .

 

 

javascript의 함수 표현식을 기본적으로 이런식으로 나타낼 수있다. 

function plusTwo(s) {
    return s+2
}

console.log(plusTwo(10))

 

위와 같은 예시를  ArrowFuction으로 바꾼다면 이런식으로 1줄 코드로 나타낼 수 있다. 

plusTwo = (s) =>  s+2

console.log(plusTwo(2))

 

 

Arrow Function의 활용 

 

Arrow Function은 함수식을 단순화 시키는것 뿐만 아니라 다음 두가지 기능 가지고 있기 때문에 유용하게 사용된다.

 

1. Map

2. Filter 

 

 

1.Map

두기능은 배열을 잘 조작하고 싶을때 주로 사용된다. 
예시를 통해 알아보자. 

 

 arr라는 배열이 있다고 했을때 기존 map 방법은 다음과 같다.

arr = [1,3,4,5,10,111,222,333]

arr_map = arr.map(function(value) {return value*2 })
console.log(arr_map)

 

 

이것을 ArrowFunction을 사용하변 다음과 같이 코드를 단순화 시킬 수 있다. 

arr = [1,3,4,5,10,111,222,333]

arr_map = arr.map(v => v*2)

console.log(arr_map)

 

 

 

2. Filter

 

 

Filter는 말 그대로 조건을 줘서 조건에 만족하는 값을 뽑아내는 것이다. 

Arrow Function에서 다음과 같이 사용할 수 있다. 

arr = [1,3,4,5,10,111,222,333]


arr_filter = arr.filter(v => v > 10)

console.log(arr_filter)

 

 

 

 

<요약>

 

불편함의 해결1: html 파일 중복해결

  1. 프로젝트 폴더에 templates폴더 생성
  2. templates폴더에 base.html생성
  3. settings.py에 base.html위치 작성
  4. 겹치는 내용 삭제 후 base.html 사용

불편함의 해결2: url 정리

  1. 관리할 앱 폴더 내부에 urls.py생성
  2. urls.py에 path 작성
  3. 기존의 urls.py와 앱의 urls.py 연결

 

 

 


장고에서 무언가를 만든다면 여러 html 페이지를 만들게 된다. blog를 예로 들어보지.

우리가 블로그 메뉴인 navbar하나를 만들게 되면 모든 html페이지에 navbar를 중복 작성 해줘야한다. 

이는 매우 보기 싫고 귀찮다.  

 

새로 html만들때마다 중복되는 부분을 복붙해야한다  

 

 

이것을  해결하기 위해 겹치는 부분을  base.html로 따로 정리해서 사용해보겠다. 

 

 

 


불편함의 해결1: html 파일 중복해결

 

1. 프로젝트 폴더에 templates폴더 생성

 

그동안 templates 폴더는 앱폴더 안에서 만들었다. 이제 프로젝트폴더안에 template을 만든다. 

 

프로젝트 폴더 안에 만든다. 

 

 

2. templates폴더에 base.html생성

 

 

 

<head>
    중복되는 내용...
</head>

<body>
    중복되는 내용...

    {% block contents %}
    {% endblock %}
</body>

 

3. settings.py에 base.html위치 작성

 

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['blogproject/templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

 

4. 겹치는 내용 삭제 후 base.html 사용

 

{% extends 'base.html' %}

{% block contents %}
<body>
    중복되지 않는 내용...
</body>
{% endblock %}

 

  • {% extends 'base.html' %} : base.html을 기본으로 가져온다는 의미입니다.
  • {% block content %} 와 {% endblock %} : 이 사이에 있는 내용을 content라고 하고 이 부분이 base.html에 있는 {% block content %} 와 {% endblock %} 사이에 들어간다고 생각하면 됩니다.

 

 

 


 

 

그동안 url은 프로젝트 폴더안에서 urls.py에서 모든 앱의 url을 담았었다. 

이는 보기가 힘들어질 수 있다.

 

 

 

 각 앱안에 urls.py를 만들어 따로 관리 시켜 보자. 

 

 

 

불편함의 해결2: url 정리

 

 

 

1. 관리할 앱 폴더 내부에 urls.py생성

 

 

urls.py에 path 작성

 

 

 

 

 

이런 식으로..

 

 

3.  기존의 urls.py와 앱의 urls.py 연결

 

 

 

 

from django.contrib import admin
from django.urls import path, include
import blog.views
import portfolio.views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', blog.views.home, name='home'),

    path('blog/', include('blog.urls')),

    path('portfolio/', portfolio.views.portfolio, name='portfolio'),
]

+ Recent posts