이전 포스팅에서는 CRUD를 위한 화면을 구현하였다. 이전에 구성했던 장고의 모델은 username, age, city로 이루어져 있으니 입력화면도 이와 같이 수정할 것이다. Content.vue // components/Content.vue 파일 수정 User CRUD create clear Title content 수정된 화면 약간의 코드를 수정하여 입력을 받는 명과 입력받는 개수를 장고 모델에서 선언한 것과 동일하게 해주었다. 이제부터는 백엔드 서버와 통신하기 위해 axios를 이용해 볼 것이다. (장고 서버는 running 상태여야 함) axios 란? axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 즉, 우리가 만든 장고 백엔드서..

지난번 포스팅에서는 Vue를 사용하기 위한 여러 환경들에 대한 설치를 완료하였다. 이번 포스팅부터는 실제로 Vue 컴포넌트들을 하나씩 작성해보며 간단하게 프론트엔드 작업을 진행할 것이다. Vue src 디렉토리 구조 leffept@MacBookPro src % tree # tree 명령어로 Vue 프로젝트의 src 폴더의 디렉토리 구조 확인. . ├── App.vue ├── assets │ ├── logo.png │ └── logo.svg ├── components │ └── HelloWorld.vue ├── main.js └── plugins └── vuetify.js Vue-cli로 생성한 프로젝트의 디렉토리중 중요한 것들만 조금 설명해보겠다. build/ : webpack 빌드 관련 설정이 모여 있..

지난번 포스팅에서 Djagno CRUD 서버를 만들었으니 이제 Vue를 이용하여 프론트 화면을 만들고, 장고 서버로 CRUD 기능을 요청하는 프론트 작업을 해볼 것이다. Vue.js Vue 설치하기 Vue를 이용하는 방법에는 크게 두가지가 존재한다. CDN 방식 : 프로토 타이핑또는 학습 목적이라면 아래와 같은 코드를 html에 포함하여 최신 버전의 vue를 이용할 수 있다. NPM install 방식 : Vue를 사용하여 대규모 애플리케이션을 구축할 때 NPM을 이용한 설치가 권장된다. # 최신 안정화 버전 $ sudo npm install -g @vue/cli Vue CLI는 Vue.js 프로젝트 생성을 돕는 vue 공식 CLI 다. 이것을 이용해 vue 명령어를 사용할 수 있고 프로젝트를 생성하거나..

지난번 포스팅을 통하여 API Server 를 만들기 위한 준비를 전부 하였다. 이제부터는 Serializer를 활용하여 데이터를 주고 받을 수 있는 페이지를 만들어 볼 것이다. Serializer 생성 # app이름/serializer.py 생성 from rest_framework import serializers # serializer import from .models import User # 선언한 모델 import class UserSerializer(serializers.ModelSerializer): class Meta: model = User # 모델 설정 fields = ('id', 'username', 'age', 'city') # 필드 설정 Serializer를 위해 app의 하위 폴..

지난 포스팅에서 Django + Nginx + Gunicorn 을 연동하였으니 이제는 장고의 Rest Framework 를 이용해 간단하게 CRUD 할 수 있는 API Server를 만들어 볼 것이다. 우선 장고의 Rest Framework 에 대해 알아보자. django-rest-framework 공식 Documentation -> www.django-rest-framework.org Django REST framework Django REST Framwork (DRF) DRF란 Django 안에서 RESTful API 서버를 쉽게 구축할 수 있도록 도와주는 오픈소스 라이브러리(프레임워크)이다. DRF 사용 이유 웹 브라우저 API는 범용성이 큼, 개발을 쉽게 만들어 줌 ORM & non-ORM 에 대..

지난번 시간에 Django + Gunicorn 을 연동하였으니 이제는 Nginx 도 붙여 하나의 서비스를 하기 위한 준비들을 해볼 것이다. 먼저 Nginx의 특징을 간단하게 알아보고 설치를 진행할 것이다. Nginx 란? Nginx 웹서버는 러시아의 이고르 시셰프가 개발한 무료 오픈소스 웹서버 소프트웨어다. 가벼움과 높은 성능을 목표로 하고 웹서버, 리버스 프록시, 메일프록시등의 기능을 가지고 있다. Nginx Nginx 특징 기존의 웹서버(Apache)는 하나의 쓰레드에서 하나의 클라이언트를 처리함 -> 정보를 읽고 쓰고 가공하는데 지연시간이 존재 Single Thread 기반으로 context switching 을 하지 않음 Nginx는 이벤트 지향 아키텍처(Event-driven Architectu..

가상환경을 사용하는 이유 "독립적인 작업환경에서 작업이 가능하다" 프로젝트를 진행하다보면 여러 라이브러리와 패키지를 다운받아서 사용할 경우에 의존성에 문제가 생겨 충돌이 되는 경우가 생기게 된다. 또는 특정 라이브러리는 하위 버전만 지원하는 경우가 있다. 이러한 경우에는 버전을 여러개 그리고 독립적인 작업환경을 구성할 수 있는 venv 환경을 이용함으로써 해결할 수 있다. 먼저 파이썬에는 프로젝트별로 독립된 가상 환경을 만들어주는 virtualenv 라는 툴이 있다. 이를 설치하여 가상환경을 구성할 수 있다. (가상환경을 구성하기 전에 python 설치는 선행되어야 한다.) 가상환경을 위한 virtualenv 설치 $ sudo pip install virtualenv venv 생성하기 $ virtuale..

Django Packages 소스코드를 전부 작성할 것이냐 이미 기존에 아주 잘 짜여진 코드를 갖다 붙이는 것도 생산성에 도움이 된다. Django에서는 패키지를 모아놓은 사이트가 있다.djangopackages 정말 아래와 같이 다양한 패키지를 제공하기 때문에, 굳이 내가 다 만들지 않아도 가져다가 사용이 가능하다. django packages rest framework data-tools blog email chat python version에 따라 virtualenv 생성하기 virtualenv -p /usr/bin/python2.7 django-angular 설치 및 적용 https://github.com/jrief/django-angular http://django-angular.readthed..

첫 번째 장고 앱 작성하기, part7 django에서는 관리자 사이트를 제공하는데, 관리자 사이트를 커스터마이징하는 방법에 대해서 설명한다. Question 모델을 admin.site.register(Question)에 등록함으로써, Django에서 제공하는 관리자 사이트를 커스타미이징이 가능하다. filed 순서 변경하기 polls/admin.py 파일에 admin.site.register(Question)을 추가한다. from django.contrib import admin from .models import Question class QuestionAdmin(admin.ModelAdmin): fields = ['pub_date', 'question_text'] admin.site.register..

첫 번째 장고 앱 작성하기, part 6 서버에서 생성된 HTML을 제외하고, 웹 어플리케이션은 일반적으로 전체 웹 페이지를 렌더링하는데 필요한 추가 파일을 정적파일이라고 부른다. 이미지, javascript, CSS 소규모 프로젝트에서는 웹서버가 정적파일을 보관할 수 있기 때문에 큰 문제가 아니지만, 큰 프로젝트에서 제공하는 여러 정적파일 세트를 다루는 것이 까다로워지기 시작 django.contrib.staticfiles: 정적 파일들을 프로덕션 환경에서 쉽게 제공 할 수 있는 단일 위치로 수집 CSS를 적용: 앱의 모양과 느낌을 원하는대로 변경 먼저 polls 디렉토리에 static디렉토리를 생성한다. django는 templates와 비슷하게 정적 파일을 찾는다. polls/static/polls..