Docker로 Django 프로젝트 배포하기

[Deploy] Django 프로젝트 배포하기 - 8. Docker

docker로 django 개발하고 배포하기(+ nginx, gunicorn)

사이킷런 원핫 인코딩 | Scikit-Learn One Hot Encoding

http://www.ritchieng.com/machinelearning-one-hot-encoding/

Python 클라우드플레어 우회 크롤링 | Python - Crawler for Avoding Cloudflare

https://github.com/Anorov/cloudflare-scrape

Python 예외 처리시 오류 출력 | Python Show Error Messages in Except

Case 1.

try:
    print('1' + 1)
except Exception as e:
    print(e)

Case 2.

import traceback

try:
    print('1' + 1)
except:
    traceback.print_exc()

Python 3 string에서 bytes로 변환 | Python 3 Convert string to bytes

string to bytes

data = ""           #string
data = "".encode()  #bytes
data = b""          #bytes

bytes to string

data = b""          #bytes
data = b"".decode() #string
data = str(b"")     #string

---

Read More

• Python 3 : Convert string to bytes

로컬호스트를 임시 도메인으로 연결 | Connect Localhost to Temporary Domain

ngrok - secure introspectable tunnels to localhost

디바이스에 따라 Viewport Initial Scale과 Width 바꾸기 | Change Viewport Initial Scale and Width Depending on Device Width.

JavaScript

changeViewportMeta = function() {
  var device_width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
  if (device_width < 375) {
    var initial_scale = device_width / 375;
    return $('meta[name=viewport]').attr('content', 'width=device-width, initial-scale='+initial_scale);
  } else {
    return $('meta[name=viewport]').attr('content', 'width=device-width, initial-scale=1');
  }
};
$(window).bind('orientationchange', changeViewportMeta);

$(document).ready(function() {
  changeViewportMeta();
}

---

Read More

• Stack Overflow - Get the device width in javascript
• Github Gist - Change viewport initial scale and width depending on device width

JavaScript 2차원 배열 뒤집기 | JavaScript Transposing a 2D-array

Input

[
    [1,2,3],
    [1,2,3],
    [1,2,3]
]

Output

[
    [1,1,1],
    [2,2,2],
    [3,3,3]
]

Solution

var newArray = array[0].map(function(col, i) { 
  return array.map(function(row) { 
    return row[i] 
  })
});

---

Read More

• Stackoverflow - Transposing a 2D-array in JavaScript

bxSlider 3개 이미지 보여주면서 루프 | bxSlider Show 3 images with loop

Stackoverflow - Horizontally centering the active image of a bxSlider carousel with a seamless loop?

Bootstrap 그리드 5 칼럼 | Bootstrap 5 Columns in Grid

CSS

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

HTML

<div class="row">
    <div class="col-md-5ths col-xs-6">
       ...
    </div>
</div>

Read More

• Stackoverflow - Five equal columns in twitter bootstrap

PHP 클라이언트 아이피 주소 | PHP Client IP Address

<?php
    $ip = getenv('HTTP_CLIENT_IP')?:
    getenv('HTTP_X_FORWARDED_FOR')?:
    getenv('HTTP_X_FORWARDED')?:
    getenv('HTTP_FORWARDED_FOR')?:
    getenv('HTTP_FORWARDED')?:
    getenv('REMOTE_ADDR');
?>

---

Read More

• Get the client IP address using PHP - Stack Overflow

Python 튜토리얼 | Python Tutorials

• A Byte of Python
• A Byte of Python (Korean)
• Tutorialspoint - Python tutorial
• Codecademy - Python
• Tutorial - Learn Python in 10 minutes
• The Python Tutorial
• Think Python

Django에서 React 설정 | React with Django

pip and npm packages

$ pip install django_compressor PyReact
$ npm install -g babel-cli

[project]/settings.py

...
INSTALLED_APPS = (
    ...
    'compressor',
    ...
)
...
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'compressor.finders.CompressorFinder',
)

COMPRESS_ROOT = os.path.join(BASE_DIR, 'static')
COMPRESS_PRECOMPILERS = (
    ...
    ('text/jsx', 'third_party.react_compressor.ReactFilter'),
    ...
)

third_party/__init__.py

(empty)

third_party/react_compressor.py

from compressor.filters import FilterBase
from react import jsx


class ReactFilter(FilterBase):
    def __init__(self, content, *args, **kwargs):
        self.content = content
        kwargs.pop('filter_type')
        super(ReactFilter, self).__init__(content, *args, **kwargs)

    def input(self, **kwargs):
        return jsx.transform_string(self.content)

[project]/urls.py

...
from django.conf.urls.static import static
...
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

static/jsx/main.jsx

ReactDOM.render(<h1>Hello World</h1>, document.getElementById('container'))

How to use in templates

{% load staticfiles compress %}
<!DOCTYPE>
<html>
<head>
    ...
    <script src='//fb.me/react-15.0.1.js'></script>
    <script src='//fb.me/react-dom-15.0.1.js'></script>
    ...
</head>
<body>
    ...
    <div id='container'></div>
    ...
    {% compress js %}
    <script src='{% static "jsx/main.jsx" %}' type='text/jsx'></script>
    {% endcompress %}
</body>

---

Read More

• Django Compressor Documentation - Facebook React Support

JSON 정렬 및 포맷 체크 | JSON Formatter & Validator

JSON Formatter & Validator

React 튜토리얼 | React Tutorials

• LearnCode.academy - React JS Tutorials
• Codecademy - Learn ReactJS

Django에서 Babel 설정 | Babel with Django

pip and npm packages

$ pip install django_compressor
$ npm install -g babel-cli

[project]/settings.py

...
INSTALLED_APPS = (
    ...
    'compressor',
    ...
)
...
STATICFILES_FINDERS = (
    ...
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'compressor.finders.CompressorFinder',
    ...
)
...
COMPRESS_PRECOMPILERS = (
    ('text/es6+javascript', 'babel -o {outfile} {infile}'),
)

How to use in templates

{% load compress %}
...
{% compress js %}
<script src='{% static "es/main.es" %}' type='text/es6+javascript'></script>
{% endcompress %}
...

---

Read More

• Django Compressor + Babel で Django でも簡単に ES6 コードを扱う方法

XML 사이트맵 생성기 | XML Sitemaps Generator

XML Sitemaps Generator

반응형 구글 차트 | Make Google Charts Responsive

Make Google Charts Responsive

JavaScript 문자열을 날짜 객체로 변경 | Convert String to Date Object in JavaScript

var dateString = "2016-11-11 01:02:03";
var reggie = /(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})/;
var dateArray = reggie.exec(dateString); 
var dateObject = new Date(
    (+dateArray[1]),
    (+dateArray[2])-1, // January is 0 and December is 11.
    (+dateArray[3]),
    (+dateArray[4]),
    (+dateArray[5]),
    (+dateArray[6])
);

robots.txt 작성 예 | How to write robots.txt

About /robots.txt