Genius Project

[React]Nested Components와 Props

2017-02-19T15:03:17.558000Z

~~Edit~~

[React]Nested Components와 Props

이전 포스트에서 React component를 만드는 방법을 알아보았다. 이번 글에서는 component를 nested(중첩) 시키는 방법과 자식 React component에 데이터를 전달하는 방법에 대해 알아보자.

이전부터 쭉 말해왔지만 React의 가장 큰 장점은 state를 관리하는 것이 정말 쉽다는 것이다. 그 예로 한 component에서 다른 하위 component로 데이터를 쉽게 전달하는 시스템이 있고 그 시스템이 바로 props이다. props는 component에 어떤 인수가 function에 연결되어 있는지 나타내 주는 놈이다.

다음은 props를 사용하는 아주 기본적인 예이다.

var HelloUser = React.createClass({
  render: function(){
    return (
      <div> Hello, {this.props.name}div>
    )
  }
});
ReactDOM.render(<HelloUser name="Tyler"/>, document.getElementById('app'));

위의 코드를 보면 component를 호출할 때 name(Tyler)을 전달한다. 이 속성은 component 내에서 this.props.name으로 불러올 수 있다.

조금 더 복잡한 경우를 생각해보자. 위 예제는 component가 하나였다면 이번에는 두 개의 component에 대해 다루어보자.각각의 component는 부모 component, 자식(하위) component이며, 부모 component는 자식 component에게 props으로 데이터를 전달한다. 먼저 부모 component를 보자.

var FriendsContainer = React.createClass({
  render: function(){
    var name = 'Jaewon Kwon'
    var friends = ['friend1', 'friend2', 'friend3']
    return (
      <div>
        <h3> Name: {name} h3>
        <ShowList names={friends} />
      div>
    )
  }
});

이번에는 자식 Component이다.

var ShowList = React.createClass({
  render: function(){
    var listItems = this.props.names.map(function(friend){
      return <li> {friend} li>;
    });
    return (
      <div>
        <h3> Friends h3>
        <ul>
          {listItems}
        ul>
      div>
    )
  }
});

Array.prototype.map가 익숙하지 않다면, 위의 예제가 조금 어색해 보일 수 있다. map은 새로운 배열을 만들고, 배열의 각 항목에 콜백 함수를 호출하여, 각 배열에 콜백 함수를 호출 한 결과로 새 배열에 채운다. 예를 들면

var friends = ['friend1', 'friend2', 'friend3'];
var listItems = friends.map(function(friend){
  return " " + friend + "
";
});
console.log(listItems); // [" friend1 
", " friend2
", " friend3 
"];

위의 결과로 새로운 배열 안에 원래 배열의 각 이름들이

안에 추가가 되었다. 이런 점 때문에 map은 React에 딱 어울리는 함수이다. 자식 component에서 이름을 매핑하고 각 이름을 한 쌍의

태그로 묶어 listItems 변수에 저장한다. 그런 다음 render 메소드는 모든 친구들의 목록을 반환한다.

[Django]Django의 Inspectdb을 이용해 외부 DB에 대해 ORM를 써보자!

2017-02-19T09:23:55.585000Z

~~Edit~~

[Django]Django의 Inspectdb을 이용해 외부 DB에 대해 ORM를 써보자!

Django를 하다보면 외부 DB의 정보를 가져와서 사용해야할 경우가 있는데 sql문으로 외부 DB를 가져오기에는 장고의 ORM기능이 너무 아까울때가 있다.

Django에서는 다행히도 외부 DB에 대해 inspectdb라는 기능을 제공하고 있다. inspectdb를 사용하면 실제 DB를 만들지는 않고 외부 DB를 가져와 model로 만들어주는 정말 편리한 기능이다.

기본적으로 inspectdb를 사용할려면 외부 DB에 대한 접속 정보가 있어야한다. 이는 settings.py의 DATABASE를 설정해주면 된다. 장고를 처음 생성하면 DATABASE가 default로 되어 있을 것이다. 여기에 원하는 이름의 외부 DB 접속 정보를 넣어주면 된다.

# settings.py
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': '',
        'USER': '',
        'PASSWORD': '',
        'HOST': '',
        'PORT': '3306'
    },
    'external': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': '',
        'USER': '',
        'PASSWORD': '',
        'HOST': '',
    }
}

여기서 external이라는 이름으로 추가를 했는데 이름은 마음대로 지어도 된다.

이제 inspectdb를 사용해보자. users라는 앱 안에 models.py에 저장하도록 해보자.

$ python manage.py inspectdb > 'users/models.py' --database 'external'

이렇게 하면 users 앱 안의 models.py에 외부 Table이 model 형태로 이쁘게 저장되어 있을 것이다.
이렇게 가져온 Table를 ORM으로 사용하기 위해서는 다음과 같이 하면 됩니다. MyUser라는 모델은 외부 DB에 있는 테이블 명으로 inspectdb 명령어로 통해 자동 생성된 모델이다.

# users/views.py
from users.models import MyUser
# using을 이용해 앞서 설정한 external 이름을 넣어주면 된다.
queryset = MyUser.objects.using('external').all()

inspectdb는 엄청 편리한 기능이긴 하지만 몇가지 주의해야할 점이 있다.

기본적으로 관계형 테이블만 가능하다. 하지만 MySql의 ` bit 타입은 제대로 가지고 오지 못하는 등 여러 문제가 있긴 하다.
외부 테이블의 Primary Key를 간혹 제대로 못 가져올 경우가 있다. 그럴 경우, 생성된 모델의 필드에 primary_key=True를 추가해줘야 한다.
가지고 온 외부 테이블 구조를 변경하고 싶다면 Meta 클래스의 managed=False를 True로 바꿔주면 된다.

[React]React의 Component에 대하여

2017-02-18T21:50:00.063000Z

~~Edit~~

[React]React의 Component에 대하여

React에서 가장 중요한게 무엇이냐 묻는다면 당연히 Component 일 것이다. React의 Component는 Angular의 Directive와 매우 유사하다. 이 Component는 하나의 모듈인데 HTML, CSS, JS 및 해당 관련된 데이터로 구성되어 있다. 보통 React에서는 Component가 jsx(공식 튜토리얼에서는 이걸 쓴다.)로 되어 있는데 나중에 jsx를 javascript로 변환해주기 위한 컴파인 단계가 필요하다.

React가 UI를 구현하는데 있어 매우 편리한 이유는 데이터가 Component 자체에 포함되어 있기 때문이다.(상위 Component에 포함 될 수 도 있다.)

첫 번째 React 구성 요소를 만들어 보자. React 구성 요소를 생성하려면 React 객체에서 createClass 메소드를 사용하고 createClass에 Component에 대한 설명을 전달한다.

var React = require('react')
var ReactDOM = require('react-dom')
var HelloBver = React.createClass({
  render: function(){
    return (
      <div>
        Hello Bver!
      div>
    )
  }
});
ReactDOM.render(<HelloBver />, document.getElementById('app'));

createClass에 전달하는 객체의 유일한 메소드는 render 메소드이다. 모든 Component에는 render 메서드가 있어야 한다. 렌더링의 역할은 Component의 템플릿에 우리가 원하는 데이터를 뿌려주기 위함이다. 조심할 점은 왠만하면 return을 ()로 감싸주자. (습관처럼 해주자.) 위 예제에서 Component가 렌더링되면 화면에 표시 될 텍스트는 Hello Bver!이다.

위의 코드에서React.createClass 생성자를 호출 한 결과를 HelloBver라는 변수에 저장했다. ReactDOM.render는 두 개의 인수를 받는데 랜더링 할 component와 component를 랜더링 할 DOM 노드이다.(React.render가 아닌 ReactDOM.render를 사용하고 있음을 주목하자) 위의 예제에서 HelloBver component를 가져와 ID가 app 인 요소에 렌더링하도록 React에 지시했다. React의 특징은 부모 component에 랜더링하면 모든 하위 자식 component도 랜더링 되기 때문에 ReactDOM.render는 웹 어플리케이션에서 한 번만 사용해야한다. 만약 전체 어플리케이션을 React로 만ㄷ르려면 component를 document.body에 랜더링 하면 된다.

예제를 자세히 살펴보면 이상한 점이 있다. 바로 JavaScript에 “HTML"이 존재한다는 것이다. 이것은 React만의 특징이다. render 메소드에서 작성하는 “HTML"은 실제 HTML이 아니지만 React가 “JSX"를 호출하는 것이다. JSX를 사용하면 가벼운 JavaScript 객체로 변형된 HTML 구문을 작성할 수 있다. 그런 다음 React는 이러한 JavaScript 객체를 가져 와서 실제 DOM의 “가상 DOM"또는 JavaScript 표현을 형성하게 된다. 즉, 자바스크립트의 힘으로 템플릿의 접근성을 얻는 장점을 얻게 된다. 물론 template를 구분하지 못한에 따른 관리 측면에서는 불리함이 존재한다.

아래 예제를 보면 Webpack의 변환 프로세스를 실행하면 JSX가 변환된다.

var HelloWorld = React.createClass({
  displayName: "HelloMessage",
  render: function() {
    return React.createElement("div", null, "Hello World");
  }
});

위처럼 작성하면 이제 JSX -> JS 변환 단계를 거치지 않고 React component를 작성할 수 있지만 더 산으로 간 느낌이다. 참고로 내 주변 React 개발자 중에서 JSX 쓰지 않는 사람을 못 봤다.

[React]webpack 설정하기

2017-02-18T20:50:21.281000Z

~~Edit~~

[React]webpack 설정하기

최근에 뜨고 있는 Webpack은 프론트의 테스트크를 자동으로 수행해주는 아주 고마운 녀석이다. 기존의 Gulp, Grunt가 가지지 못한 여러 장점들이 많아 프론트 개발자들이 많이 쓰고 있지만, 명성에 비해 쓰레기같은 공식 문서를 가지고 있다.(프론트 개발자들은 공감할 것.) 이번 글에서는 Webpack의 알짜배기에 초첨을 맞추어 고급 기능을 다뤄보고자 한다.

프론트 기술은 눈 깜빡할 새에 새로운 녀석들이 나온다. 그만큼 트랜드가 계속 바뀌는게 프론트 세상인데, 프론트를 공부하는 사람들은 이러한 트랜드 속에서 살아 남기 위해서 끊임없이 공부를 해야한다. 공부 해야할 양이 많아 질수록 새로운 기술에 대한 핵심을 이해하고 있어야하는데 두 가지 질문을 항상 마음 속에 품고 있어야한다. 첫번째는 “이것이 왜 존재할까?"이고 두번째는 “이 기술이 어떤 문제점을 해결해줄까?"이다. 두 가지 질문에 대답 할 수 없는 기술이라면 굳이 배울 필요는 없을 것이다. 따라서 Webpack를 이러한 관점에 대해 알아보자.

Webpack이란게 왜 있는것일까? Webpack을 한 단어로 표현하자면 코드 Bundler이다. 코드를 가져 와서 변환하고 Bundle 한 다음 새로운 버전의 코드를 반환한다.

그럼 이번에는 Webpack이 어떤 문제점을 해결해줄까? SASS 또는 LESS와 같은 CSS 전처리기를 사용한 적이 있다면 SASS / Less 코드를 일반 CSS로 변환해야 한다는 것은 알고 있을 것이다. TypeScript 나 다른 자바 스크립트 언어를 사용 해본 적이 있다면 변환 단계가 있다는 것을 알고 있을 것이다. Webpack이 정말 좋은 점은 다양한 종류의 코드를 목표로하는 것으로 변환 시킬 수 있다는 것이다. 코드를 작성하여 해당 변경 사항을 실시간으로 출력 할 수도 있다.

이번 글에서는 Webpack 구성을 매우 가볍게 다룰 예정이지만, 향후 좀 더 고급 주제를 다루어 보도록 하자.

위에서 언급 한 프로세스에 대해 다시 생각해 보자. 코드를 가져 와서 변환하는 단계에서 3 가지 주요 단계와 3 가지 주요 사항이 있다.

Webpack은 웹 어플리케이션의 시작 지점 또는 루트 JavaScript 파일을 바라보고 있어야 한다.

Webpack은 코드를 어떤 것으로 변환을 할 것인지를 알아야 한다.

Webpack은 새로게 변환한 코드를 저장할 위치를 알아야 한다.

사실 위의 3가지만 숙지하고 있다면 Webpack은 별게 아니다.

첫번째 해야할 일은 Webpack 구성을 포함 할 파일을 만드는 것이다. 이 파일의 이름은 Webpack이 인식 할 수 있도록 이름이 webpack.config.js로 정해져 있다. 이 파일은 프로젝트의 루트 리렉토리에 있어야 한다.

이제 webpack.config.js 파일을 만들었고, 이 파일이 Webpack의 구성을 나타낼 object를 제대로 내보내는지 확인해야합니다. 자바스크립트 모듈에 익숙하지 않다면 Preethi의 블로그 시리즈를 먼저 읽어보고 오자.

// In webpack.config.js
module.exports = {}

이제 위의 언급대로 코드로 변환해보자. 먼저, Webpack에 어플리케이션의 진입 지점을 알려주자.

// In webpack.config.js
module.exports = {
  entry: [
    './app/index.js'
  ]
}

위에서 한 것은 객체에 entry 속성과 그 값을 정해준 것이다. 여기서 값이 왜 문자열이 아닌 배열인지 궁금할 수 있을 것이다. Webpack을 사용하면 어플리케이션에서 하나 이상의 entry 포인트를 가질 수 있기 때문에 더 많은 정보를 담기 위해서 배열을 사용했다. (물론 배열을 안 써도 되지만 습관을 위해 배열을 쓰자) 이렇게 하면 나중에 추가 시 쉽게 추가 할 수 있다.

여기까지는 Webpack에게 어디에서 시작해야 한다고 알려주었고, 이제 코드를 변형을 해야한다.이 변형에는 loader라는 것을 사용한다.

loader는 타켓 파일의 종류에 맞춰어서 준비하면 된다. TypeScript면 그거에 맞는 loader를 CoffeeScript면 그거에 맞는 loader를 사용하면 된다. 사용처에 맞게 loader를 설치할 것인데 npm을 사용하자. 이 글에서는 예제로 CoffeeScript를 변환 시킬 것이다. 터미널에서 다음과 같이 loader를 설치하자.

$ npm install --save-dev coffee-loader

이를 실행하면 coffee-loader가 package.json 파일의 dev 종속 파일로 저장된다. 그런 다음 webpack.config.js 파일을 반영시켜주자. 이를 위해 먼저 webpack.config.js에서 내보내는 객체에 모듈 속성을 추가한다.

// In webpack.config.js
module.exports = {
  entry: [
    './app/index.js'
  ],
  module: {
    loaders: []
  }
}

loader 배열 내부에는 원하는 모든 loader를 넣을 것이다.

각 loader는 세 가지로 구성되어야 한다. 첫 번째는 특정 변환을 실행할 파일 유형이다. 예를 들어, 자바스크립트 파일에서 자바스크립트로만 변환할 수 있도록 하는 것이다. 다음은 변환 할 디렉토리를 포함하거나 제외해야하는 항목이다. 여기서는 node_modules 폴더의 모든 항목에 대해 변환을 실행하지 않으므로 node_modules 경로를 제외 값으로 사용하자. 마지막으로 실행하고자하는 특정 loader이다. 예로 들면 아래와 같다.

// In webpack.config.js
module.exports = {
  entry: [
    './app/index.js'
  ],
  module: {
    loaders: [
      {test: /\.coffee$/, exclude: /node_modules/, loader: "coffee-loader"}
    ]
  },
}

위에서 눈여겨봐야 할 것은 정규식이다. test에 있는 / \. coffee $ / 을 사용하게 되면 Webpack이 .coffee로 끝나는 모든 확장 프로그램에서 coffe-loader를 실행하게 된다.

다음으로, exclude는 변환에서 제외시킬 것을 나타낸다. 앞서 말했듯이 node_modules 폴더를 변형하고 싶지 않기 때문에 제외한다. 마지막으로는 loader로 Webpack에게 test의 정규식과 일치하고 exclude에 없는 모든 경로에서 실행될 변환을 지시한다.

만약 여러 loader를 추가할려면 npm으로 loader를 설치하고 loader 배열에 추가해주면 된다.

이제 마지막 단계로 새로운 변환 된 코드를 출력해야 하는 위치를 지정해주자.

// In webpack.config.js
module.exports = {
  entry: [
    './app/index.js'
  ],
  module: {
    loaders: [
      {test: /\.coffee$/, exclude: /node_modules/, loader: "coffee-loader"}
    ]
  },
  output: {
    filename: "index_bundle.js",
    path: __dirname + '/dist'
  },
}

위의 코드를 보면 filename은 새로운 변환 된 코드가 포함 된 Webpack이 만들 파일의 이름이다. path는 새 파일 이름 (여기서는 index_bundle.js)이 배치 될 디렉토리이다. 참고로 __dirname는 현재 실행 중인 스크립트의 상위 디렉토리 이름이다.

이제 Webpack이 실행 시키면, 코드가 변형되어 ourApp / dist / index_bundle.js에서 참조할 수 있게 된다. 이제 HTML 파일이 index_bundle.js를 참조하도록 해보자. 일반 앱의 일반적으로 구조는 다음과 같을 것이다.

/app
  - components
  - containers
  - config
  - utils
  index.js
  index.html
/dist
  index.html
  index_bundle.js
package.json
webpack.config.js
.gitignore

보통 개발 중인 코드는 app 폴더에 두고 변형 후 배포에 사용할 코드는 dist 폴더에 있다. 여기서 한가지 문제점이 생기는데 app 폴더에있는 index.html을 변경할 때이다. 브라우저가 실제로 사용하게 될 index.html 파일은 dist 폴더 내의 파일이기 때문에 app 안의 html 파일을 옮겨주어야 한다.

이를 위해 두가지 방법이 있는데, 첫번째 방법은 두 개의 index.html 파일을 관리하는 것이다. app에 있는 파일을 변경할 때마다 dist에 있는 파일로 직접 복사하는 것이다. 하지만 이 방법은 너무 무식한 방법이다.

두 번째 옵션은 Webpack이 실행될 때마다 /app/index.html이 /dist/index.html에 복사되도록하는 방법이다. 첫번째 방법보다 훨씬 깔끔하고 손이 덜 가는 방법이다.

두번째 일 Webpack tool에 이미 존재한다. 바로 html-webpack-plugin이다. npm으로 마찬가지로 설치해주자.

npm install --save-dev html-webpack-plugin

우선, HTMLWebpackPlugin의 새 인스턴스를 만든 후 세 가지를 지정해야 한다. 먼저, 새로 생성 된 파일이 어떻게 보이길 원하는지에 대한 템플릿을 제공해야한다. 두번째는, 파일 이름을 지정하거나, 생성한 새 파일을 호출합니다. 셋번째는 WebpackPluginConfig로 통해 변환 된 코드의 출력 파일 이름을 감지시키는 것이다, (여기서는 index_bundle.js). 그런 다음 또는 에 스크립트를 삽입해야한다. 새로 생성 된 index.html 파일에 injection으로, 스크립트를 head 또는 body에 삽입하면 된다.

정리하면 아래와 같다.

// In webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin')
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});
module.exports = {
  entry: [
    './app/index.js'
  ],
  module: {
    loaders: [
      {test: /\.coffee$/, exclude: /node_modules/, loader: "coffee-loader"}
    ]
  },
  output: {
    filename: "index_bundle.js",
    path: __dirname + '/dist'
  },
  plugins: [HTMLWebpackPluginConfig]
};

파일의 맨 위에 HtmlWebpackPlugin의 새 인스턴스를 만들고 요놈은 세 가지 옵션을 제공한다. template은 앱 디렉토리에있는 일반 index.html 파일을 가리킨다. filename은 index.html으로 기존 파일 이름과 동일하게 지었다. inject는 loader의 출력 파일 (index_bundle.js)의 이름을 참조하는 스크립트를 삽입하여 새로 생성 된 html 파일의 본문에 삽입한다. 마지막으로 작성한 HTMLWebpackPluginConfig 변수를 webpack config의 플러그인 배열에 항목으로 추가한다.

이제 Webpack을 실행하면 dist 폴더 안에 두 개의 파일이 생긴다. index_bundle.js 와 index.html가 생겼을 것이다. index_bundle.js는 entry 코드를 가져 와서 loader를 통해 실행 한 결과이다. index.html은 HTMLWebpackPluginConfig를 거쳐 만들어진 파일이다.

dist의 내부에 새로 생성 된 index.html 파일이 어떻게 생겼는지, app 폴더 안의 index.html 와 비교해보자.

app/index.html


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Apptitle>
  <link rel="stylesheet" href="styles.css">
head>
<body>
  <div id="app">div>
body>
html>

dist/index.html


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Apptitle>
  <link rel="stylesheet" href="styles.css">
head>
<body>
  <div id="app">div>
  <script src="index_bundle.js">script>
body>
html>

두 파일의 차이점은 dist (HTMLWebpackPlugin으로 생성된 파일)에 index_bundle.js를 가리키는 script 태그가 있다는 것이다. 다시 말하지만 HTMLWebpackConfig가 Webpack에서 새로 생성 된 파일의 출력 파일 이름을 감지하고 새로 만든 index.html 파일의 스크립트로 자동 추가한 것이다. 위의 index.html 파일에서 볼 수 있듯이 body에는 가 있다. Webpack 설정에서 출력을 test.js로 변경했다면 새로 생성 된 index.html 파일의 body 안에 가 생겼을 것이다.

이제 거의 다 끝났다 마지막으로는 Webpack에 실제로 실행하는 방법이다. Webpack이 설치되어 있지 않았다면 다음과 같이 설치해주자.

$ npm install -g webpack

Webpack을 설치를 하면 Webpack CLI에 접근 할 수 있다. (만약 local에 설치했다면 npm으로 실행시켜줘야 한다.)

어플리케이션의 루트 디렉토리 (여기서는 webpack.config.js의 위치)에서 Webpack을 터미널로 실행할 수 있다. 실행 시 Webpack 설정이 한 번 실행된다. 하지만 파일이 여러번 수정될 경우마다 Webpack을 매번 실행 시켜줘야하는데 그러기에는 너무 귀찮다. Webpack은 watch라는 기능을 제공하는데 파일이 변경 될 때마다 실시간으로 Webpack을 실행 시켜주는 기능이다.

$ webpack -w

배포 단계로 내놓을려면 다음을 실행 시 변환과 코드 축소가 실행된다.

$ webpack -p

사실 Webpack만 보고 왔다면 여기까지 해도 된다. 하지만 최종 목표는 React 관리를 Webpack으로 하는 것이기 때문에 Babal이라는 것을 loader로 추가해야 한다.

Babel.js는 자바스크립트를 컴파일 도구인데, Webpack을 사용하면 바벨이 특정 변환 자체 인 동안 코드에서 어떤 변환을 수행할지 지정할 수 있다. React의 관점에서 바벨은 JSX 를 실제 JavaScript로 변형 할 수 있게 한다. Babel이 좋은 점은 JSX -> JS 변형 외에도 많은 용도로 사용할 수 있다는 것이다. Javascript도 놀랍게도 버전들이 존재하는데 최신 Javascript랑 우리가 알고 있는 Javascript랑은 차이점이 매우 많다. 이에 따라 브라우저가 최신 Javascript를 못 따라오는 현상이 발생했는데 이를 Babel이라는 놈이 바로 잡아주는 것이다. 최신 JavaScript (ES2015, 2016 등)을 브라우저가 알고 있는 Javascript로 변환 시켜 브라우저가 이해할 수 있도록 해준다.

babel 설치도 npm으로 해주면 된다. babel은 여러 모듈로 구성되어 있기 때문에 설치 전에 몇 가지를 설치해야 한다.

$ npm install --save-dev babel-core babel-loader babel-preset-react

babel-core는 babel 자체이고, babel-loader는 사용할 Webpack loader이며, babel-preset-react는 JSX -> JS 변형을 도와준다.

위의 세가지 모듈을 Webpack에 추가해줘도 되지만 굳이 그럴 필요가 없다. babel 설정을 위해 별도의 파일로 관리하면 된다.

먼저 webpack.config.js 파일이 있는 루트 디렉토리에 .babelrc 파일을 만들어주자.

{
  "presets": [
    "react"
  ]
}

여기서는 babel 변환이 실제로 만들어 내는 babel loader에 지시하는 것이다. 좀 전에 babel-preset-react를 설치해줬기 때문에 react로 설정해주면 된다.

이제 babel-loader를 webpack.config.js의 loader에 추가해주면 된다.

// In webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin')
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});
module.exports = {
  entry: [
    './app/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: "index_bundle.js"
  },
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
    ]
  },
  plugins: [HTMLWebpackPluginConfig]
};

[Django]Iamport 연동하기 - 4

2017-02-16T16:17:51.527000Z

~~Edit~~

[Django]Iamport 연동하기 - 4

이번에는 template인 html를 작성해보자. 여기서 IMP.init() 값은 아엠포트 관리자 페이지에서 가맹점 코드를 넣어주면 된다.

{% load staticfiles %}

<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>디제이비버title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js">script>
    <script type="text/javascript" src="https://service.iamport.kr/js/iamport.payment-1.1.1.js">script>
    <script type="text/javascript">
        $(function () {
            var IMP = window.IMP;
            // 가맹점 코드
            IMP.init('imp68762150');

            $('.charge-button').on('click', function (e) {
                var amount = parseInt($('.charge-total #total').text().replace(',', '').slice(0, -1));
                var type = $('.charge-type input:checked').val();
                var merchant_id = AjaxStoreTransaction(e, amount, type);

                if (merchant_id !== '') {
                    IMP.request_pay({
                        pg: 'html5_inicis',
                        escrow: false,
                        digital: true,
                        pay_method: type,
                        merchant_uid: merchant_id,
                        name: '포인트' + amount + '원 충전',
                        amount: amount
                    }, function (rsp) {
                        if (rsp.success) {
                            var msg = '결제가 완료되었습니다.';
                            msg += '고유ID : ' + rsp.imp_uid;
                            msg += '상점 거래ID : ' + rsp.merchant_uid;
                            msg += '결제 금액 : ' + rsp.paid_amount;
                            msg += '카드 승인번호 : ' + rsp.apply_num;
                            ImpTransaction(e, rsp.merchant_uid, rsp.imp_uid, rsp.paid_amount);
                        } else {
                            var msg = '결제에 실패하였습니다.';
                            msg += '에러내용 : ' + rsp.error_msg;
                            console.log(msg);
                        }
                    });
                }
            });
        });

        function AjaxStoreTransaction(e, amount, type) {
            e.preventDefault();
            var merchant_id = '';
            var request = $.ajax({
                method: "POST",
                url: '{% url "point_checkout" %}',
                async: false,
                data: {
                    amount: amount,
                    type: type,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                }
            });
            request.done(function (data) {
                if (data.works) {
                    merchant_id = data.merchant_id;
                }
            });
            request.fail(function (jqXHR, textStatus) {
                if (jqXHR.status == 404) {
                    alert("페이지가 존재하지 않습니다.");
                } else if (jqXHR.status == 403) {
                    alert("로그인 해주세요.");
                } else {
                    alert("문제가 발생했습니다. 다시 시도해주세요.");
                }
            });
            return merchant_id;
        }

        function ImpTransaction(e, merchant_id, imp_id, amount) {
            e.preventDefault();
            var request = $.ajax({
                method: "POST",
                url: '{% url "point_validation" %}',
                async: false,
                data: {
                    merchant_id: merchant_id,
                    imp_id: imp_id,
                    amount: amount,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                }
            });
            request.done(function (data) {
                if (data.works) {
                }
            });
            request.fail(function (jqXHR, textStatus) {
                if (jqXHR.status == 404) {
                    alert("페이지가 존재하지 않습니다.");
                } else if (jqXHR.status == 403) {
                    alert("로그인 해주세요.");
                } else {
                    alert("문제가 발생했습니다. 다시 시도해주세요.");
                }
            });
        }
    script>
head>
<body>
{% if user.is_authenticated %}
    {{ user }}으로 접속되어 있습니다.
{% else %}
    로그인 해주세요!
{% endif %}

<div class="charge-type">
    <div class="billing-title">
        결제방식
    div>
    <div class="billing-radio">
        <label class="control control--radio">
            <input type="radio" name="type" value="card" checked="checked"/>
            신용카드
        label>
        <label class="control control--radio">
            <input type="radio" name="type" value="trans"/>
            실시간 계좌이체
        label>
        <label class="control control--radio">
            <input type="radio" name="type" value="phone"/>
            휴대폰
        label>
        <label class="control control--radio">
            <input type="radio" name="type" value="vbank"/>
            가상계좌 입금
        label>
    div>
div>
<div class="charge-total">
    총 결제금액 <span id="total">1000원span>
div>
<div class="charge-click">
    <button class="charge-button">충전하기button>
div>
body>
html>

이제 로컬 서버를 띄우고 localhost:8000에 접속해보자.

$ python manage.py runserver

참고로 결제를 하기 위해서는 로그인 되어 있는 상태이여야 한다.

이제 결제를 진행해보면 실제로 돈이 빠지는걸 확인할수 있다.

[Django]Iamport 연동하기 - 3

2017-02-16T16:27:32.293000Z

~~Edit~~

[Django]Iamport 연동하기 - 3

이전까진 결제에 대한 model 부분이였다면 이번에는 장고의 view를 다루어 볼 것이다. billing의 view를 작성해보자.
python 3.6 , django 1.10

# biliing/views.py
from django.shortcuts import render
from django.http import JsonResponse
from .models import (
    PointTransaction, 
    Point,
)


class PointCheckoutAjaxView(View):
    def post(self, request, *args, **kwargs):
        if not request.user.is_authenticated():
            return JsonResponse({}, status=401)

        user = request.user
        amount = request.POST.get('amount')
        type = request.POST.get('type')

        try:
            trans = PointTransaction.objects.create_new(
                user=user,
                amount=amount,
                type=type
            )
        except:
            trans = None

        if trans is not None:
            data = {
                "works": True,
                "merchant_id": trans
            }
            return JsonResponse(data)
        else:
            return JsonResponse({}, status=401)


class PointImpAjaxView(View):
    def post(self, request, *args, **kwargs):
        if not request.user.is_authenticated():
            return JsonResponse({}, status=401)

        user = request.user
        merchant_id = request.POST.get('merchant_id')
        imp_id = request.POST.get('imp_id')
        amount = request.POST.get('amount')

        try:
            trans = PointTransaction.objects.get(
                user=user,
                order_id=merchant_id,
                amount=amount
            )
        except:
            trans = None

        if trans is not None:
            trans.transaction_id = imp_id
            trans.success = True
            trans.save()

            data = {
                "works": True
            }

            return JsonResponse(data)
        else:
            return JsonResponse({}, status=401)

def charge_point(request):
    template = 'charge.html'

    return render(request, template)

실제 유저가 결제를 진행하게 되면 두 가지 과정을 거치게 된다. 첫번째는 유저가 서버에 요청한 금액을 아엠포트에 보내는 과정과 두 번째는 유저가 결제를 다 하고 나서 서버에 저장된 결제 정보와 아엠포트에 저장된 정보(실제 결제 정보)를 비교하는 과정이다.

이제 url.py에 view를 연결하자.

# urls.py
from django.conf.urls import url
from django.contrib import admin
from billing.views import (
    charge_point,
    PointCheckoutAjaxView,
    PointImpAjaxView,
)

urlpatterns = [
    url(r'^charge/$', charge_point),
    url(r'^checkout/$', PointCheckoutAjaxView.as_view(), name='point_checkout'),
    url(r'^validation/$', PointImpAjaxView.as_view(), name='point_validation'),

    url(r'^admin/', admin.site.urls),
]

이 다음으로는 유저가 실제 결제를 할 수 있는 화면을 만들어보자.

[Django]Iamport 연동하기 - 1

2017-02-16T16:17:49.171000Z

~~Edit~~

[Django]Iamport 연동하기 - 1

오늘은 결제모듈계의 혁신 아엠포트에 대해 다뤄보도록 하자. 결제모듈을 처음부터 개발해본 개발자라면 ‘결’자만 들어도 부들부들하는데, 아엠포트는 진짜 이러한 개발자의 니즈를 정확히 비집고 들어와 서비스 하고 있다.

특히, 우리나라 대표 밴더사들(이x시스, 다x 등등) python 모듈을 절대 안 가르쳐 주는데 (심지어 대부분 php로 되어 있어서 php를 python에 붙여야하는 개고생을 해야한다.) Django에 이러한 결제모듈 하나 다는게 여간 쉽진 않다.

아엠포트를 들어가보면 1시간만에 결제모듈 달기라는 엄청난 비젼을 제시하고 있는데, 실제로 한시간도 안 걸린다.(물론 transaction 구현할려면 조금 복잡해지긴 한다.)

아엠포트에 가입을 하고 나서 로그인을 한 다음에 REST API 키와 REST API secret를 복사해오자. 이 정보를 바탕으로 아엠포트와 통신을 할 것이다..

이번 목표는 포인트를 결제 시키는 것이다. 실제로 쇼핑몰 같은 것을 만들 때는 상품 여러개를 (장바구니에 있는 상품들) 결제 할 수 있는데 이번 편을 응용하면 충분히 할 수 있을 것이다.

먼저 결제를 담당할 billing 앱을 만들어보자.

$ python manage.py startapp billing

간단하게 billing 앱을 등록해주자. 그리고 위에서 가지고온 API 키와 screte를 넣어주자.

# settings.py
INSTALLED_APPS = [
   ...
   'billing',
   ...
]

IAMPORT_KEY = 
IAMPORT_SECRET =

이제 주문에 대한 모델을 작성해보자. 포인트 대한 주문을 Point라고 할 것이다.

# billing/models.py
from django.db import models
# User 모델은 알아서 가져오기
from users.models import MyUser

class Point(models.Model):
    user = models.OneToOneField(MyUser)
    point = models.PositiveIntegerField(default=0)
    created = models.DateTimeField(auto_now_add=True, auto_now=False)
    timestamp = models.DateTimeField(auto_now_add=False, auto_now=True)

    def __str__(self):
        return str(self.point)


class PointTransaction(models.Model):
    user = models.ForeignKey(MyUser)
    transaction_id = models.CharField(max_length=120, null=True, blank=True)
    order_id = models.CharField(max_length=120, unique=True)
    amount = models.PositiveIntegerField(default=0)
    success = models.BooleanField(default=False)
    transaction_status = models.CharField(max_length=220, null=True, blank=True)
    type = models.CharField(max_length=120)
    created = models.DateTimeField(auto_now_add=True, auto_now=False)

    def __str__(self):
        return self.order_id

    class Meta:
        ordering = ['-created']

Point 모델은 유저가 결제를 시도한 정보이고, PointTransaction은 실제 결제모듈을 통해 결제가 이루어지는 정보를 담는 모델이다. 다음 편에서는 아임프토와 통신할 수 있는 모듈을 만들어보자.

[Django]Iamport 연동하기 - 2

2017-02-16T16:17:39.192000Z

~~Edit~~

[Django]Iamport 연동하기 - 2

기본적으로 결제 모델을 만들 때 가장 중요한 것인 order_id와 transaction_id이다. order_id는 서버 내에서 자동으로 생성하는 주문 번호이고 transaction_id는 아임포트에서 생성해주는 고유 번호이다. 서버에서 결제가 정상적으로 이루어졌는지 확인하기 위해서 transaction_id로 통해 조회하게 된다.

이제 아임포트와 통신할 수 있는 모듈을 만들어 보자. billing 앱 안에 iamport.py을 만들어보자.

#billing/iamport.py
import requests
import json

from django.conf import settings


def get_access_token():
    access_data = {
        'imp_key': settings.IAMPORT_KEY,
        'imp_secret': settings.IAMPORT_SECRET
    }

    url = "https://api.iamport.kr/users/getToken"
    req = requests.post(url, data=access_data)
    access_res = req.json()

    if access_res['code'] is 0:
        return access_res['response']['access_token']
    else:
        return None


def validation_prepare(merchant_id, amount, *args, **kwargs):
    access_token = get_access_token()

    if access_token:
        access_data = {
            'merchant_uid': merchant_id,
            'amount': amount
        }

        url = "https://api.iamport.kr/payments/prepare"

        headers = {
            'Authorization': access_token
        }

        req = requests.post(url, data=access_data, headers=headers)
        res = req.json()

        if res['code'] is not 0:
            raise ValueError("API 연결에 문제가 생겼습니다.")
    else:
        raise ValueError("인증 토큰이 없습니다.")


def get_transaction(merchant_id, *args, **kwargs):
    access_token = get_access_token()

    if access_token:
        url = "https://api.iamport.kr/payments/find/" + merchant_id

        headers = {
            'Authorization': access_token
        }

        req = requests.post(url, headers=headers)
        res = req.json()

        if res['code'] is 0:
            context = {
                'imp_id': res['response']['imp_uid'],
                'merchant_id': res['response']['merchant_uid'],
                'amount': res['response']['amount'],
                'status': res['response']['status'],
                'type': res['response']['pay_method'],
                'receipt_url': res['response']['receipt_url']
            }
            return context
        else:
            return None
    else:
        raise ValueError("인증 토큰이 없습니다.")

아임포트와 통신 할 때는 크게 3가지 과정을 나누어 진행된다. get_access_token은 아임포트 서버에 접근할 수 있는 토큰을 발급 받는 과정으로 발급 받은 토큰으로 유저가 결제한 정보를 가져오게 된다. validation_prepare은 결제를 검증하는 단계로 유저가 요청한 금액과 아임포트에 있는 결제 금액이 일치하는지 검증하는 단계이다. get_transaction은 결제가 끝나고 나서 결제에 대한 정보를 가져오는 단계이다.

이제 포인트에 대한 Manager를 만들어보자. model 부분을 수정하자.

# billing/models.py
from django.db import models
# User 모델은 알아서 가져오기
from users.models import MyUser
from billing.iamport import validation_prepare, get_transaction

class Point(models.Model):
    user = models.OneToOneField(MyUser)
    point = models.PositiveIntegerField(default=0)
    created = models.DateTimeField(auto_now_add=True, auto_now=False)
    timestamp = models.DateTimeField(auto_now_add=False, auto_now=True)

    def __str__(self):
        return str(self.point)


class PointTransactionManager(models.Manager):
    # 새로운 트랜젝션 생성
    def create_new(self, user, amount, type, success=None, transaction_status=None):
        if not user:
            raise ValueError("유저가 확인되지 않습니다.")
        short_hash = hashlib.sha1(str(random.random())).hexdigest()[:2]
        time_hash = hashlib.sha1(str(int(time.time()))).hexdigest()[-3:]
        base = str(user.email).split("@")[0]
        key = hashlib.sha1(short_hash + time_hash + base).hexdigest()[:10]
        new_order_id = "%s" % (key)

        # 아임포트 결제 사전 검증 단계
        validation_prepare(new_order_id, amount)

        # 트랜젝션 저장
        new_trans = self.model(
            user=user,
            order_id=new_order_id,
            amount=amount,
            type=type
        )

        if success is not None:
            new_trans.success = success
            new_trans.transaction_status = transaction_status

        new_trans.save(using=self._db)
        return new_trans.order_id

    # 생선된 트랜잭션 검증
    def validation_trans(self, merchant_id):
        result = get_transaction(merchant_id)

        if result['status'] is not 'paid':
            return result
        else:
            return None

    def all_for_user(self, user):
        return super(PointTransactionManager, self).filter(user=user)

    def get_recent_user(self, user, num):
        return super(PointTransactionManager, self).filter(user=user)[:num]


class PointTransaction(models.Model):
    user = models.ForeignKey(MyUser)
    transaction_id = models.CharField(max_length=120, null=True, blank=True)
    order_id = models.CharField(max_length=120, unique=True)
    amount = models.PositiveIntegerField(default=0)
    success = models.BooleanField(default=False)
    transaction_status = models.CharField(max_length=220, null=True, blank=True)
    type = models.CharField(max_length=120)
    created = models.DateTimeField(auto_now_add=True, auto_now=False)

    objects = PointTransactionManager()

    def __str__(self):
        return self.order_id

    class Meta:
        ordering = ['-created']

그 다음으로는 Transaction이 일어나서 나서 검증하는 post_save를 만들어보자. 같은 model 안에서 작성하면 된다.

# billing/models.py
import time
import random
import hashlib
from django.db.models.signals import post_save

def new_point_trans_validation(sender, instance, created, *args, **kwargs):
    if instance.transaction_id:
        # 거래 후 아임포트에서 넘긴 결과
        v_trans = PointTransaction.objects.validation_trans(
            merchant_id=instance.order_id
        )

        res_merchant_id = v_trans['merchant_id']
        res_imp_id = v_trans['imp_id']
        res_amount = v_trans['amount']

        # 데이터베이스에 실제 결제된 정보가 있는지 체크
        r_trans = PointTransaction.objects.filter(
            order_id=res_merchant_id,
            transaction_id=res_imp_id,
            amount=res_amount
        ).exists()

        if not v_trans or not r_trans:
            raise ValueError('비정상적인 거래입니다.')


post_save.connect(new_point_trans_validation, sender=PointTransaction)

결제를 위한 model 부분은 거의 다 끝났다. 다음으로 진행 할 것은 view와 template 단으로 실제 유저가 결제를 할 수 있도록 만들어보자.

[Django]Grunt + LiveReload를 이용한 자동 테스크 환경 구축

2017-02-14T20:41:23.361000Z

~~Edit~~

[Django]Grunt + LiveReload를 이용한 자동 테스크 환경 구축

Grunt를 이용하면 프론트 단계에서 필요한 다양한 테스크들을 자동화 시킬 수 있다. Grunt 중에서 grunt-contrib-connect와 watch를 결합하면 css나 js 파일들의 변경 사항이 있을 경우, 화면을 자동으로 refresh 해준다. 하지만 grunt-contrib-connect는 express로 local server를 띄우는 것이기 때문에 Django의 localserver와 같이 사용하기 힘들다.

따라서 Grunt의 watch로 static 파일의 변경사항이 있을 경우, 자동으로 concat을 시키고 Django에서 concat를 watch를 시켜 static 파일들이 변동이 생겼을 때 자동으로 페이지를 reload 시켜주는 것을 해보고자 한다.

먼저 Grunt를 설정해보자.(기본 npm, grunt 설치는 생략) Gruntfile.js는 자신 입맛대로 변경하면 된다. 중요한 것은 Django가 watch 할 수 있는 static 파일만 제대로 만들어주면 된다.

$ npm install --save-dev grunt-contrib-sass grunt-contrib-concat grunt-contrib-cssmin grunt-contrib-watch grunt-contrib-uglify

// Gruntfile.js
module.exports = function (grunt) {
    grunt.initConfig({
            sass: {
                dist: {
                    files: {
                        ...
                    }
                }
            },

            concat: {
                js: {
                    src: [
                        'static/app/js/**/*.js'
                    ],
                    dest: 'public/js/app.js'
                },
                vendor_js: {
                    src: [
                        'static/vendor/js/**/*.js'
                    ],
                    dest: 'public/js/vendor.js'
                },
                css: {
                    src: [
                        'static/app/css/**/*.css'
                    ],
                    dest: 'public/css/styles.css'
                },
                vendor_css: {
                    src: [
                        'static/vendor/css/**/*.css'
                    ],
                    dest: 'public/css/vendor.css'
                }
            },

            uglify: {
                target: {
                    files: [{
                        expand: true,
                        cwd: 'public/js',
                        src: ['*.js', '!*.min.js'],
                        dest: 'public/js',
                        ext: '.min.js'
                    }]
                }
            },

            cssmin: {
                target: {
                    files: [{
                        expand: true,
                        cwd: 'public/css',
                        src: ['*.css', '!*.min.css'],
                        dest: 'public/css',
                        ext: '.min.css'
                    }]
                }
            },

            watch: {
                sass: {
                    files: 'static/app/sass/**/*.scss',
                    tasks: ['sass:dist', 'concat:css', 'cssmin:target'],
                    options: {
                        interrupt: true
                    }
                },
                js: {
                    files: 'static/app/js/**/*.js',
                    tasks: ['concat:js', 'uglify:target'],
                    options: {
                        interrupt: true
                    }
                }
            }
        }
    )
    ;

    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-uglify');

    grunt.registerTask('s', ['watch:sass']);
    grunt.registerTask('w', ['watch:js']);

};

이제 Django가 static 파일을 watch 할 수 있도록 라이브러리를 설치하자. Livereload 와 dj-static를 사용할 것이다.

$ pip install dj-static
$ pip install livereload

이제 livereload를 INSTALLED_APPS에 추가해주자.

# settings.py
INSTALLED_APPS = [
    ...
    'livereload',
    ...
]

STATIC_ROOT = os.path.join(BASE_DIR, 'public')
STATIC_URL = '/static/'

그 다음 wsgi.py에 추가하자.

import os
from django.conf import settings
from django.core.wsgi import get_wsgi_application
from dj_static import Cling

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "server.settings")

if settings.DEBUG:
    application = Cling(get_wsgi_application())
else:
    application = get_wsgi_application()

이제 livereload를 시키자. live 시키기 전에 grunt watch 걸어주는 걸 잊지 말자.

$grunt w
$grunt s

$python manage.py livereload

localhost:8000에 접속하면 잘 적용 된 것을 볼 수 있다.

[Django]Custom Command Line

2017-01-02T02:43:33.304000Z

~~Edit~~

[Django]Custom Command Line

Django를 다루면 가장 익숙한 파일이 manage.py 일 것이다. manage.py에는 runserver, makemigrations, migrate 등 다양한 명령어들이 있는데 이러한 Command를 자신 입맛에 맞춰 만들 수 있다.

Custom Command Line을 만들기 위해서는 다음과 같은 구조로 되어야한다.

practice
    - practice
        - __init__.py
        - settings.py
        - urls.py
        - wsgi.py
    - custom
        - __init__.py
        - management
            - __init__.py
            - commands
                - __init__.py
                - custom.py
        - models.py
        - views.py
        - apps.py
        - admin.py

custom 앱이 있다고 했을 경우에 settings.py에 custom 앱을 등록해주고, management 디렉토리를 만든 다음, commands 디렉토리를 생성해 그 안에 python 파일 하나를 생성해 주면 된다. 조심해야할 것은 python 파일이 있다는 것을 나타내기 위해 ___init__.py이 필요하다.

# custom.py
from django.core.management.base import BaseCommand

class Command(BaseCommand):
    def handle(self, *args, **kwargs):
        print('Hi')

이제 manage.py와 함께 custom 명령어를 쳐보자.

$ python manage.py custom
# Hi

[Python] 특정 룰에 맞추어 리스트 정렬하기

2016-12-16T04:26:12.227000Z

~~Edit~~

[Python] 특정 룰에 맞추어 리스트 정렬하기

python에는 리스트를 정렬하기 위해서는 sorted가 있다. 하지만 sorted는 기본적으로 리스트의 아이템 이름 순으로 정렬하는데 우리가 원하는 특정 규칙대로 정렬 하는 방법은 없을까?

list = ['DB', 'DS', 'AI', 'OB', 'MF']
new_list = sorted(list)
print(new_list)

# ['AI', 'DB', 'DS', 'MF', 'OB']

다음과 같이 list를 sorted 시킬 때 아이템의 이름순으로 정렬 됨을 알 수 있다. 하지만 만약 DB > DS > AI > OB > MF 순으로 정렬을 하고 싶을 때 lambda를 이용하면 쉽게 구현할 수 있다.

rule = ['DB', 'DS', 'AI', 'OB', 'MF']
order = {key: i for i, key in enumerate(rule)}

list = ['DB', 'DS', 'AI', 'OB', 'MF']
new_list = sorted(list, key=lambda k: order[k])
print(new_list)

# ['DB', 'DS', 'AI', 'OB', 'MF']

[Django] Related Field got invalid lookup: icontains

2016-12-15T13:58:50.975000Z

~~Edit~~

[Django] Related Field got invalid lookup: icontains

django admin에 search field를 붙이지 Related Field got invalid lookup: icontains를 내밷는다.

#models.py
from django.db import models

class User(models.Model):
    email = models.EmailField()

class Post(models.Model):
    user = models.ForeignKey(User)
    title = models.CharField(max_length=255, null=True, blank=True)

    def __str__(self):
        return self.title

#admin.py
from django.contrib import admin
from .models import Post

class PostAdmin(admin.ModelAdmin):
    list_display = ('__str__',)
    search_fields = ('user',)

post admin 내에서 user를 검색하기 위해 search_fields를 단둔히 user로 넣으면 안된다. 우리는 user의 email로 통해 검색을 할 것이기 때문에 user의 email을 검색하도록 해야한다. 이렇게 변경하자.

#admin.py
from django.contrib import admin
from .models import Post

class PostAdmin(admin.ModelAdmin):
    list_display = ('__str__',)
    search_fields = ('user__email',)

[Django]Django App 이름 변경

2016-12-15T14:09:47.472000Z

~~Edit~~

[Django]Django App 이름 변경

장고 앱 이름을 변경할 상황이 발생. 문제는 migrate까지 이미 다 시킨 상태. 단순히 이름 변경으로는 해결이 되지 않는다.
klamer이라는 앱을 klymer로 변경해보자. (MySQL)

장고는 migrate 실행시 django_migration과 django_content_type에 앱 이름이 들어가고 MySQl의 테이블 이름에 앱 이름이 들어간다. 따라서 단순히 폴더나 클래스 이름을 바꾸는 것에 끝나는 것이 아니라 직접 sql문으로 고쳐주어야 한다.

앱 디렉토리 이름 변경 klamer > klymer
settings.py 의 klamer를 klymer로 변경

#settings.py
INSTALLED_APPS = [
    ...
    #'klamer',
    'klymer',
]

klymer.apps.py의 app 이름 변경

#class KlamerConfig(AppConfing):
#   name = 'klamer'
class KlymerConfig(AppConfig):
    name = 'klymer'

MySQL에 접속

python manage.py dbshell

mysql>

table 목록을 보면 다음과 같이 나온다. 변경 해주어야하는 거는 저 3개다.

mysql > show tables;
+-------------------+
|   Tables_in_...   |
+-------------------+
|       ...         |
|django_content_type|
| django_migrations |
|   klamer_input    |
+-------------------+

klamer 앱 table 이름을 바꾸자.

mysql > alter table klamer_input rename to klymer_input

django content_type 과 django_migrations 내 klamer 이름을 변경하자.

mysql > update django_content_type set app_label='klymer' where app_label='klamer'
mysql > update django_migrations set app='klymer' where app='klamer'

8 . klymer/migrations 폴더 내 모든 파일 삭제 후 migrate

python manage.py makemigrations
python manage.py migrate

[Django]’ManyRelatedManager’ object does not support indexing

2016-11-19T09:36:01.743000Z

~~Edit~~

[Django]’ManyRelatedManager’ object does not support indexing

상황 : order 와 ManytoMany 관계인 product들을 모조리 불러들이고 싶음.

# terminal
TypeError: 'ManyRelatedManager' object does not support indexing

Django에서 ManytoMany 관계를 사용 시 iterable하게 사용하고 싶을 때가 있다. 하지만 안타깝게도 Django의 ManytoMany는 이러한 기능을 지원하지 않는다.

따라서 관련된 objects들을 가져오기 위해서는 all()을 사용하면 된다.

Order.product.all()

이러한 이유는 Django의 ManytoManyField()가 실제 Field가 아니라 단순 Manager() 역할을 하기 때문이다.

[React]선언형(declarative) 프로그래밍에 대하여

2016-11-14T06:18:45.136000Z

~~Edit~~

[React]선언형(declarative) 프로그래밍에 대하여

React를 들어가기 전에 선언형(declarative)에 대하여 알아보도록 하자. declarative programming에 대하여 설명하기 위해서는 imperative programming이 빠질 수는 없다.

기본적으로 프로그래밍에 입문을 하였다면 다음 코드가 어떤 것인 지를 금방 파악 할 수 있다.

// Imperative (How)
var numbers = [4,2,3,6]
var total = 0
for (var i = 0; i < numbers.length; i++) {
    total += numbers[i]
}

for문을 이용하여 배열 안에 있는 숫자들을 다 더하는 걸 수행하게 되는데 결과값은 당연히 15가 나온다는 것을 금방 알아챌 수 있다. 15라는 값을 예상하기 위해서는 우리 뇌에서는 아마 다음과 같은 과정을 거칠 것이다.

total이라는 변수가 0으로 선언이 되어 있고
for문을 지나면서 numbers의 0번째 원소를 더하고
다시 for에 의해 numbers의 1번쨰 원소를 더하고
반복반복 우걱우걱
다 더하면 15가 될 것이다!

이렇게 생각한 것은 컴퓨터가 위에서부터 아래로 순차적으로 진행될 것이라 염두 해 두고 진행된 것이다. total이라는 값을 구하기 위해서 단순히 알고리즘을 제공했을 뿐이다. 이런 방식이 바로 명령형(imperative) 프로그래밍이다.

그럼 오늘 알아볼 선언형(Declarative)프로그래밍을 그대로 적용해보면 어떻게 될까?

// Declarative (What)
var numbers = [4,2,3,6]
numbers.reduce(function (previous, current) {
    return previous + current
})

React.js는 declarative 스타일이라 할 수 있다. “이건 이렇게 생겨야 해!" 하면서 flow나 state를 조절 하게 할 수 있다.