#devspace

개발환경

• macbook pro (2019)
• macOS Monterey 12.6.2
• node 18.14.0 (LTS)
• IDE : vscode

node.js 설치

• node 공식 다운로드 (LTS 설치)

vscode 플러그인 설치

• Vetur (vue 2.x)

• Volar (vue 3.x)

chrome 플러그인 설치

• Vue.js devtools
  크롬 개발자 도구에서 Vue 코드를 더 잘 파악할 수 있게 도와줌

vue-cli

뷰로 빠르게 프로젝트를 구성하고 프로토 타이핑 하고 싶을 때 사용하는 CLI 도구

✅ 공식문서

https://cli.vuejs.org/guide/installation.html

설치

• npm(node package manager)을 사용하기 위해 기본적으로 node.js가 설치되어 있어야 함

sudo npm install -g @vue/cli

# 버전 확인
vue --version

프로젝트 생성

vue create [프로젝트명]

❗️ 진행 시 주의할 점
vuetify 추천 버전을 사용하기 위해서는 vue2를 설치해야 한다.

설치 완료라고 예쁘게 뜬 메시지를 확인할 수 있다.

설치 확인

npm run serve

• http://localhost:8080 접속

vuetify

• vue 기반의 UI 프레임워크
• bootstrap의 경우 css 위주이지만 vuetify는 js가 많이 포함되어 동적인 요소가 많음

적용

• vue-cli가 설치된 프로젝트에 추가해야 함

vue add vuetify

• recommended 설치

❗️ 진행 시 주의할 점
vuetify3는 프리뷰 버전이기 때문에, 추천 버전인 vuetify2를 사용하기 위해서는 vue2를 설치해야 함!

vue3를 설치한 경우 아래와 같은 에러가 발생한다.
Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.

아래와 같은 메시지가 출력되면 잘 설치된 것이다!

설치 확인

npm run serve

• http://localhost:8080 접속

Reference

https://velog.io/@doobyeol/Vue-프로젝트-매니저-Vuetify-설치

Vue.js

프론트엔드 개발을 쉽게 하기 위한 자바스크립트 프레임워크

MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리

• View(html DOM) : 사용자에게 보이는 화면
• View Model : View와 Model의 중간 영역으로 DOM Listener와 Data Binding을 제공하는 영역
• Model(JS) : 서버에서 가져온 데이터를 자바스크립트 객체로 저장

• DOM : HTML 요소를 담고 있는 데이터 트리
• DOM Listener : DOM 변경에 즉각적으로 반응하여 특정 로직을 수행
• Data Binding : View에 표시되는 내용과 모델의 데이터를 동기화

장점

• 러닝커브가 낮음
• React, Angular에 비해 가볍고 성능이 빠름
• React(Virtual DOM), Angular(데이터 바인딩)의 장점을 취함
• 컴포넌트 기반 프레임워크로 뷰 구성, 코드 재사용이 쉬움

💡 Virtual DOM

화면에 변화가 있을 때 변경사항을 실시간으로 수정하지 않고, Virtual DOM을 이용해 메모리에서 처리하고 DOM을 한번만 수정한다. 결과적으로 브라우저는 렌더링을 한번만 하게 되기 때문에 렌더링 성능을 높인다.

Reference

https://happy-jjang-a.tistory.com/114

Django는 설치할 때 기본적으로 SQLite가 연동됩니다.

하지만 실제 프로젝트를 위해 MySQL 연동 작업을 진행해보겠습니다.

1. 커넥터 설치

mysqlclient 라는 라이브러리를 설치하면 파이썬과 MySQL 통신이 가능합니다.

pip install mysqlclient

2. settings.py 설정

DATABASES = {
    'default' : {
        'ENGINE': 'django.db.backends.mysql',    
        'NAME': '연동할 데이터베이스 이름',                  
        'USER': 'DB 접속 계정명',                          
        'PASSWORD': 'DB 접속 비밀번호',                  
        'HOST': '실제 DB 주소',                     
        'PORT': '3306',         # 기본 포트 주소                  
    }
}

3. DB 감지

해당 DB에 존재하는 테이블들을 model로 만들어줌

# 앱 안에 models.py에 바로 저장하기
python manage.py inspectdb > [앱이름]/models.py

# 앱 안에 models.py에 바로 저장하기 (멀티 DB)
python manage.py inspectdb --database 'db명' > [앱이름]/models.py

# 출력만 하기
python manage.py inspectdb

4. 테이블 생성

모델이 변경되었으니 마이그레이션 적용하기

python manage.py makemigrations
python manage.py migrate

Django 공식문서를 참조했습니다.

데이터베이스 셋업

기본으로 설치되어 있는 SQLite를 사용할 수 있다.

• SQLite 진입

# db.sqlite3 가 있는 위치에서
sqlite3 db.sqlite3

모델 만들기

모델이란, 부가적인 메타데이터를 가진 데이터베이스 구조!

1. polls/models.py에서 모델 작성

Question과 Choice 테이블을 만든다.

from django.db import models


class Question(models.Model):
    question_text = models.CharField(max_length=200)
    pub_date = models.DateTimeField('date published')


class Choice(models.Model):
    question = models.ForeignKey(Question, on_delete=models.CASCADE)
    choice_text = models.CharField(max_length=200)
    votes = models.IntegerField(default=0)

모델 활성화

모델을 통해 장고는 다음과 같은 일을 한다.

• 이 앱을 위한 데이터베이스 스키마 생성 (CREATE TABLE statements)
• Question와 Choice 객체에 대한 파이썬 데이터베이스 접근 API 생성

2. mysite/settings.py 수정

프로젝트에 polls 앱이 있다는 것을 알려야 한다.

INSTALLED_APPS에 PollsConfig 클래스 추가

INSTALLED_APPS = [
    'polls.apps.PollsConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

3. 변경사항에 대한 마이그레이션 생성

모델에 대한 변경사항을 장고에 알리는 것

python manage.py makemigrations

💡 마이그레이션이란? Migrations

장고에서 모델에 대한 변경사항을 데이터베이스 스키마에 전파하는 방법

장고는 ORM을 사용하는데 DB 스키마를 git처럼 버전 관리 할 수 있도록 함

하나의 마이그레이션 파일은 해당 마이그레이션이 생성된 시점의 구조를 가짐

4. 변경사항을 데이터베이스에 적용

모델과 관련된 테이블을 생성한다.

python manage.py migrate

🧐 마이그레이션을 만드는 명령과 적용하는 명령이 분리된 이유는 무엇일까?

버전 관리 시스템에 마이그레이션을 커밋하고 앱과 함께 출시할 수 있도록 하기 위해서이다.

✅ 공식문서

https://docs.djangoproject.com/en/4.1/

⬇️ Django 설치 전이라면 아래 글을 참고해보세요!

개발환경

• macbook pro (2019)
• macOS Monterey 12.6.2
• python 3.9.6
• django 4.1.6

Writing your first Django app

장고 프로젝트 생성

django-admin startproject mysite

프로젝트 생성 후 파일 목록

mysite/
    manage.py
    mysite/
        __init__.py
        settings.py
        urls.py
        asgi.py
        wsgi.py

• mysite/ : 프로젝트를 담는 컨테이너 폴더, 루트 디렉토리이며 이름 변경 가능
  • manage.py : 여러가지 방법으로 장고 프로젝트와 상호작용 하는 커맨드라인 유틸리티 - manage.py에 대한 디테일
  • 내부 mysite/ : 프로젝트를 위한 실제 파이썬 패키지들이 저장됨
    • __init__.py : 파이썬에게 이 디렉토리를 파이썬 패키지로 인식하도록 하는 비어있는 파일
    • settings.py : 프로젝트의 setting과 configuration  - Django settings
    • ursl.py : 프로젝트의 url 선언
    • asgi.py : ASGI 호환 웹에 배포하기 위한 엔트리 포인트
    • wsgi.py : WSGI 호환 웹에 배포하기 위한 엔트리 포인트

개발 서버 실행

python manage.py runserver

• 언제 runserver를 해야할까?
  자동 변경 기능으로 인해 개발 서버는 요청이 들어올 때마다 자동으로 파이썬 코드를 다시 불러온다.
  즉, 코드 변경 사항을 적용하기 위해서는 굳이 서버를 다시 시작하지 않아도 된다.
  그러나, 파일 추가 등의 작업은 개발서버가 자동으로 인식하지 못하기 때문에 서버를 다시 시작해야한다.

설문조사 앱 생성

python manage.py startapp polls

💡 프로젝트 vs 앱

• 앱은 블로그 시스템, 공공 기록 데이터베이스 또는 소규모 투표 앱과 같은 작업을 수행하는 웹 애플리케이션
• 프로젝트는 특정 웹 사이트에 대한 구성 및 앱의 모음
• 프로젝트는 여러 앱을 포함할 수 있고, 앱은 여러 프로젝트에 있을 수 있다.

앱 생성 후 파일 목록

polls/
    __init__.py
    admin.py
    apps.py
    migrations/
        __init__.py
    models.py
    tests.py
    views.py

첫번째 뷰 띄우기

1. polls/views.py에 아래 코드 추가

# polls/views.py
from django.http import HttpResponse

def index(request):
    return HttpResponse("Hello, world. You're at the polls index.")

2. polls/urls.py에 URL 매핑

뷰를 호출하려면 이와 연결된 URL이 있어야 하고, 이를 위해 URLConf가 사용된다.

from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

3. mysite/urls.py에서 모듈 가리키기

최상위 URLConf에서 polls.urls 모듈을 바라보게 설정한다.

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

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

💡 include()

다른 URLConf를 참조하도록 함

URL이 일치하는 부분까지 잘라내고 남은 부분을 included URLConf로 보냄

💡 path()

필수 파라미터 : route, view

선택 파라미터 : kwargs, name

4. http://localhost:8000/polls/ 에 접속하여 연결 확인하기

index 뷰가 URLConf에 연결되어 잘 나오는 것을 확인할 수 있다!