dryben / daily Goto Github PK

개츠비가 좋다길래..

https://www.gatsbyjs.org/blog/2018-2-6-choosing-a-back-end/

백엔드 고르는 글도 한번 보는데.. 헤더 구별이 잘 안돼서 여기에 정리.

• background---why-gatsby
• the-next-step-a-backend
  • contentful
  • wordpress-rest-api
  • netlifycms
  • best-of-the-rest---prismicio--cockpit
• conclusion---which-backend-is-right
  • free-option
  • ease-of-use

cheatsheet : https://gist.github.com/Kartones/dd3ff5ec5ea238d4c546

psql {디비} {유저}
select id from table where content like '%keyword%';

VirtualEnv 구성

https://developer.mozilla.org/ko/docs/Learn/Server-side/Django/development_environment

#virtualenv..
sudo pip3 install virtualenvwrapper

vi ~/.bash_profile

export WORKON_HOME=$HOME/.virtualenvs
export VIRTUALENVWRAPPER_PYTHON=/Library/Frameworks/Python.framework/Versions/3.6/bin/python3
export PROJECT_HOME=$HOME/Devel
source /Library/Frameworks/Python.framework/Versions/3.6/bin/virtualenvwrapper.sh

source ~/.bash_profile

mkvirtualenv dj_apple

• deactivate — 활성화된 파이썬 가상 환경을 비활성화한다
• workon — 사용가능한 가상 환경 목록을 보여준다
• workon name_of_environment — 특정 파이썬 가상 환경을 활성화한다
• rmvirtualenv name_of_environment — 특정 환경을 제거한다.

Django 실행

(dj_apple 가상환경에서 계속)

pip3 install django
mkdir dj_apple && cd dj_apple
django-admin startproject djapplesite
cd djapplesite
python3 manage.py runserver

April 15, 2019 - 06:21:12
Django version 2.2, using settings 'djapplesite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

class & function

https://reactjs.org/tutorial/tutorial.html#function-components
In React, function components are a simpler way to write components that only contain a render method and don’t have their own state.

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={()=> this.props.onClick()}>
        {this.props.value}
      </button>
    );
  }
}

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

서비스 개요

• 프론트, 어드민 구성
• 프론트 기능 : 로그인, 리스트 조회 페이지 3개, form 처리 페이지 1개
• 어드민 기능 : 사용자 계정/그룹 생성 및 관리, DB 현황 조회 등
• 집중 개발 기간은 2달 정도
• 베타오픈 완료 : 사용자 계정 20개 내외

프레임워크, 라이브러리

미션 : 이미 있는 걸 최대한 가져다쓰자

• 백엔드/어드민 : DJANGO
• REST API : DJANGO REST FRAMEWORK
• 프론트엔드 : REACTJS
• 리액트 테마(bootstrap) : https://demos.creative-tim.com/paper-dashboard-react
• 리액트 테이블(v6) : https://github.com/tannerlinsley/react-table/tree/v6
• docker-compose로 장고와 리액트, postgrsql까지 3개의 컨테이너를 관리
• 장고도 처음, 리액트도 처음이라 공부하면서 개발

DJANGO

최신버전 2.2를 썼다.

• 우선 혼자서 웹서비스 하나를 처음부터 개발하는 것이 처음이었다. 그래서 쉬워야 했음..
• 백엔드의 데이터처리 모듈을 파이썬으로 다루기 때문에 웹 프레임워크도 파이썬 계열 중에서 고르기로 했다.
• 파이썬 웹 프레임워크 중에 DJANGO의 문서가 가장 쉬우면서 잘 와닿아서 선택했다.
• 자바-스프링, 노드-익스프레스, 고-에코 등의 프레임워크를 써봤는데 DJANGO가 압도적으로 친절했다.
• DJANGO 문서는 개발하면서도 계속 찾아보게 될 정도로 실용성도 잘 갖추었다고 생각한다.
• 템플릿 안쓰고 클라이언트와 API로 통신하기 위해 DRF를 추가로 사용했다.

DJANGO ADMIN 👍

• DJANGO로 프로젝트를 생성하면 ADMIN이 기본으로 세팅되는데 이게 생각보다 너무 편리했다.
• user, group 같은 도메인은 어느 서비스나 있고 비슷비슷한데 DJANGO는 기본적으로 테이블까지 만들어줘서 그대로 썼다.
• ADMIN은 관리자만 쓰기 때문에 대충 만들게 되는 경향이 있는데 그렇게 만드는 것보다 확실히 나은 퀄리티를 제공하니까 안 쓸 이유 없다.
• 커스터마이징도 간편하다. 예를들어 어드민에서 리스트를 조회할 때, 특정 DB필드가 true인지 false인지 구분해서 조회하고 싶으면 필터 관련 코드 한두줄만 추가하면 된다.

REACT

Hooks가 또 힙해보여서 최신버전 16.8을 썼다.

• 자바스크립트도 아니고 HTML도 아닌 문법을 써야해서 조금 혼란스러운 시기를 보내야 했다.
• 프론트엔드 개발하다보면 데이터를 받고, 그 데이터를 검증하고, UI에 적용하고, 적용된 상태를 또 어떻게 데이터로 다룰것인지 흐름을 잘 짜야 하는데.. 이 부분을 리액트가 잘 케어해주는 느낌이 들었다.
• 리액트도 리액트지만 리액트 컴포넌트 방식으로 구현된 테마와 테이블 소스를 적절히 사용했더니 확실히 유지보수에 있어 가뿐한 느낌이 들었다.
• 혼자서 개발해서 그런지 혼자 이해한 만큼만 개발했는데, 만약 협업자가 있고 서로 스타일이 다르면 또 혼란이 생겼을 것 같고..

결론

• DJANGO는 내가 써본 프레임워크 중 가장 쉽고 편리했다. 어드민을 기본으로 제공하는 걸 처음봐서 더 좋았고..
• REACT에 대한 입장은 조금 반반. 분명 러닝커브가 있지만, 그 초기 학습단계를 잘 지나고 모듈 디자인도 잘 하면 유지보수가 그만큼 간편해질 것 같다.

레퍼런스

• 도커컴포즈 https://www.44bits.io/ko/post/almost-perfect-development-environment-with-docker-and-docker-compose
• 장고&리액트 https://www.digitalocean.com/community/tutorials/how-to-build-a-modern-web-application-to-manage-customer-information-with-django-and-react-on-ubuntu-18-04
• https://justmakeyourself.tistory.com/entry/django-connect-react
• https://github.com/milooy/react-django-pwa-kit
• 장고&리액트 인증 http://v1k45.com/blog/modern-django-part-4-adding-authentication-to-react-spa-using-drf/
• 리액트 훅스 https://velog.io/@velopert/react-hooks
• 리액트스트랩 https://reactstrap.github.io/components/

sudo vi /etc/nginx/pie.kr

//프록시
server {
    listen   80;
    server_name pie.com pie.kr;

    location / {
        proxy_pass     <http://localhost:60001;>
    }
}
//리다이렉트
server {
    server_name www.pie.kr;
    return 301 $scheme://pie.kr$request_uri;
}

sudo ln -s /etc/nginx/sites-available/pie /etc/nginx/sites-enabled/
sudo nginx -t
sudo service nginx restart

Auth

기본적으로 세션과 연동되며 admin에서 제공하는 생성/수정/삭제 템플릿이 있습니다.

• 개요 : https://docs.djangoproject.com/ko/2.2/topics/auth/
• 기본 : https://docs.djangoproject.com/ko/2.2/topics/auth/default/
  • User : 생성, 패스워드, 인증...
  • Permissions and Authorization : view, change, add, change list?, delete
    • 퍼미션 추가
  • Authentication in Web requests
    • 로그인, 로그아웃, login_required decorator@, passes_test
    • {% if user.is_authenticated %}, {{ perms }}
    • 어드민 기본템플릿 : ~/.virtualenvs/dj_apple/lib/python3.6/site-packages/django/contrib/admin/templates/registration/
  • Managing users in the admin
• 패스워드 : https://docs.djangoproject.com/ko/2.2/topics/auth/passwords/
• 커스터마이징 : https://docs.djangoproject.com/ko/2.2/topics/auth/customizing/
  • LDAP, AnonymousUser, custom-permissions
  • AbstractUser

Middleware

보안, 세션, 위치, 인증 등의 미들웨어를 제공합니다.

• 개요 : https://docs.djangoproject.com/ko/2.2/topics/http/middleware/
• 순서 : https://docs.djangoproject.com/ko/2.2/ref/middleware/#middleware-ordering

Form

Form 클래스로 구현되어있습니다. DB-모델 / HTML-폼

• 개요 : https://docs.djangoproject.com/ko/2.2/topics/forms/
  • where : URL | how : method
  • 템플릿 : https://docs.djangoproject.com/ko/2.2/topics/forms/#working-with-form-templates
  • looping : https://docs.djangoproject.com/ko/2.2/topics/forms/#looping-over-the-form-s-fields
• class ModelForm : https://docs.djangoproject.com/ko/2.2/topics/forms/modelforms/
• Assets (js/css) : https://docs.djangoproject.com/ko/2.2/topics/forms/media/

Misc

• humanize : https://docs.djangoproject.com/ko/2.2/ref/contrib/humanize/

설정 확인
cat .git/config

현재 브랜치의 리모트 변경
git branch --set-upstream-to REMOTE

깃 리모트 url 수정
git remote set-url REMOTE [email protected]:dryben/custad

➜ cd ~/Library
➜ mkdir KeyBindings
➜ vi KeyBindings/DefaultkeyBinding.dict

{
    "₩" = ("insertText:", "`");
}

https://ani2life.com/wp/?p=1753
https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/EventOverview/TextDefaultsBindings/TextDefaultsBindings.html

몽고디비 충돌

...
mongo | 2019-08-02T02:29:39.478+0000 I STORAGE [initandlisten] exception in initAndListen: DBPathInUse: Unable to lock the lock file: /data/db/mongod.lock (Resource temporarily unavailable). Another mongod instance is already running on the /data/db directory, terminating
mongo | 2019-08-02T02:29:39.478+0000 I CONTROL [initandlisten] now exiting
mongo | 2019-08-02T02:29:39.478+0000 I CONTROL [initandlisten] shutting down with code:100

docker-library/mongo#62

mongo | 2019-08-02T03:28:10.949+0000 E STORAGE [initandlisten] WiredTiger error (11) [1564716490:949521][1:0x7fc0f08c9a00], wiredtiger_open: /data/db/WiredTiger.lock: handle-lock: fcntl: Resource temporarily unavailable
mongo | 2019-08-02T03:28:10.949+0000 E STORAGE [initandlisten] WiredTiger error (16) [1564716490:949563][1:0x7fc0f08c9a00], wiredtiger_open: WiredTiger database is already being managed by another process: Device or resource busy
mongo | 2019-08-02T03:28:10.949+0000 E - [initandlisten] Assertion: 28595:16: Device or resource busy src/mongo/db/storage/wiredtiger/wiredtiger_kv_engine.cpp 416
mongo | 2019-08-02T03:28:10.949+0000 I STORAGE [initandlisten] exception in initAndListen: Location28595: 16: Device or resource busy, terminating
mongo | 2019-08-02T03:28:10.949+0000 I NETWORK [initandlisten] shutdown: going to close listening sockets...
mongo | 2019-08-02T03:28:10.949+0000 I NETWORK [initandlisten] removing socket file: /tmp/mongodb-27017.sock
mongo | 2019-08-02T03:28:10.949+0000 I CONTROL [initandlisten] now exiting
mongo | 2019-08-02T03:28:10.949+0000 I CONTROL [initandlisten] shutting down with code:100
mongo exited with code 100

SOLVED

• mongod.lock, WiredTiger.lock 파일이 뭔가 이전 컨테이너에 종속적인 파일인 듯 하여 컨테이너에서 지워봤지만, 호스트와 volume을 공유하고 있기 때문에 다시 복사됨 -> 다시 오류
• 호스트에서 해당 파일의 이름을 바꿔주고 다시 띄우니 잘 돌아갔다.

$ sudo mv data/WiredTiger.lock data/WiredTiger.lock.e
$ docker-compose down
Removing backend ... done
Removing mongo            ... done
Removing network ㅁㅁㅁㅁㅁㅁ_default
$ docker-compose up

https://www.gatsbyjs.org/docs/quick-start/

npm install -g gatsby-cli
gatsby new kmm2019
cd kmm2019
gatsby develop

https://www.gatsbyjs.org/tutorial/part-four/
작은 사이트의 경우 굳이 graphql까지 쓸 필요는 없다.

https://www.gatsbyjs.org/tutorial/part-six/
In your index page’s GraphQL query, change allMarkdownRemark to allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }). Note: There are 3 underscores between frontmatter and date. Save this and the sort order should be fixed.

• 시스템 아키텍처
• 인프라 (ex. Google Cloud Platform)
  • App engine
  • Cron Jobs
  • Cloud SQL
  • Firebase
• Database
  • 데이터베이스 - 테이블 - 컬럼 디자인
  • 네이밍 룰 ({prefix}{resource}{relation})
• API / Backend
  • 인증
  • 결제
  • …
• APP / Frontend
  • 어드민
  • 앱
  • …
• 스타일 가이드
  • REST API / MSA
  • Angular / Django
  • Python / Typescript
• 매뉴얼 - 개발 환경 구축
• 매뉴얼 - 배포

계정 설정

https://freestrokes.tistory.com/64

1. useradd ben (계정 생성)
2. passwd ben (계정 패스워드 입력)
3. mkdir -p /home/slowalk
4. chown -R ben:ben /home/slowalk/
5. usermod -G slowalk ben
   groups ben
6. usermod -s /bin/bash ben
   cat /etc/passwd | grep ben

설치

https://subicura.com/2017/01/19/docker-guide-for-beginners-2.html

1. apt update
2. curl -fsSL https://get.docker.com/ | sudo sh
3. usermod -aG docker ben
   groups ben
4. docker version

Client:
 Version:           18.09.3
 API version:       1.39
 Go version:        go1.10.8
 Git commit:        774a1f4
 Built:             Thu Feb 28 06:40:58 2019
 OS/Arch:           linux/amd64
 Experimental:      false

Server: Docker Engine - Community
 Engine:
  Version:          18.09.3
  API version:      1.39 (minimum version 1.12)
  Go version:       go1.10.8
  Git commit:       774a1f4
  Built:            Thu Feb 28 05:59:55 2019
  OS/Arch:          linux/amd64
  Experimental:     false