#devspace

문제 상황

VS Code에서 프로젝트의 ESLint 설정 파일을 인식하는 부분에서 에러 발생

해결 방법

하단의 코드를 VS Code의 settings.json에 추가

Reactivity

• 객체의 동작을 재정의함
• 데이터의 변경이 화면에 바로 반영됨

<div id="app"></div>

<script>
var div = document.querySelector("#app");
var viewModel = {};

// Object.defineProperty(대상 객체, 객체의 속성, {
// 정의할 내용
// });

// 즉시 실행 함수
(function () {
    function init() {
        Object.defineProperty(viewModel, "str", {
            get: function () {
                console.log("접근");
            },
            set: function (newValue) {
                console.log("할당", newValue);
                render(newValue);
            },
    });
}

    function render(value) {
        div.innerHTML = value;
    }

    init();
})();
</script>

인스턴스

속성

new Vue({
    el: ,
    template: ,
    data: ,
    methods: ,
    created: ,
    watch: ,
});

컴포넌트

• 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능
• 재사용성이 향상되어 화면을 빠르게 제작 가능

전역 컴포넌트

// Vue.component('컴포넌트 이름', 컴포넌트 내용);
// 전역 컴포넌트 - 거의 안씀
Vue.component("app-header", {
    template: "<h1>Header</h1>",
});

Vue.component("app-content", {
    template: "<div>content</div>",
});

지역 컴포넌트

new Vue({
    el: "#app",
    // 지역 컴포넌트 등록 방식
    components: {
        // '컴포넌트 이름': 컴포넌트 내용
        "app-footer": {
            template: "<footer>footer</footer>",
        },
    },
});

컴포넌트와 인스턴스의 관계

• 전역 컴포넌트는 인스턴스를 새로 생성하고 components에 넣어주지 않더라도 반영이 되지만 (이미 등록이 되어 있음)
• 지역 컴포넌트는 인스턴스를 새로 생성하고 components에 넣어주어야 반영이 됨

컴포넌트 통신 방식

• props 전달

• event emit

뷰 라우터

• SPA를 구현할 때 사용하는 라이브러리

사용 방법

• CDN 순서 주의! (vue -> vue router 순)
• npm으로 설치할 수도 있음

<script src="[https://cdn.jsdelivr.net/npm/vue/dist/vue.js](https://cdn.jsdelivr.net/npm/vue/dist/vue.js)"></script>
<script src="[https://unpkg.com/vue-router@3/dist/vue-router.js](https://unpkg.com/vue-router@3/dist/vue-router.js)"></script>

옵션

• routes : 라우팅 할 URL와 컴포넌트 값 지정
• mode : URL의 해쉬 값 제거 속성 (mode: history)

router-view

• Vue의 싱글 페이지
• URL이 변경되면 해당 컴포넌트가 화면에 뿌려지는 지점을 정함

router-link

• html의 a href 같은 기능
• 페이지 이동

axios

• Vue에서 권고하는 Promise 기반의 HTTP 통신 라이브러리
• 문서화 잘 되어 있고, API가 다양함

설치

• CDN

<script src="[https://unpkg.com/axios/dist/axios.min.js](https://unpkg.com/axios/dist/axios.min.js)"></script>

• NPM

npm install axios

사용방법

<div id="app">
  <button v-on:click="fetchData">get data</button>
</div>

new Vue({
  el: '#app',
  methods: {
    fetchData: function() {
      axios.get('https://jsonplaceholder.typicode.com/users/')
        .then(function(response) {
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
})

get data 버튼을 클릭했을 때 사용자 정보를 받아오는 코드
실행하면 사용자 정보가 콘솔에 출력됨

템플릿

데이터 바인딩

뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법

<div>{{ message }}</div>

new Vue({
  data: {
    message: 'Hello Vue.js'
  }
})

디렉티브 (v-)

뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법

• 자주 사용되는 디렉티브
  • v-if
  • v-for
  • v-bind
  • v-on
  • v-model (2-way 데이터 바인딩)

watch

특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행하는 속성
값을 계속 추적, 이전 값과 바뀐 값을 받을 수 있음, 데이터 요청

new Vue({
  data() {
    return {
      message: 'Hello'
    }
  },
  watch: {
    message: function(value, oldValue) {
      console.log(value);
    }
  }
})

message의 데이터가 변할 때마다 watch 속성에 정의한 message 함수가 실행되면서 콘솔에 변한 데이터 출력

computed

바뀐 값에 대해서 모름, 빠름, 캐시 같은 느낌, validation이나 간단한 연산 가능, 가독성 향상

computed: {
  reverseMessage() {
    return this.message.split('').reverse().join('');
  }
}

<div>{{ reverseMessage }}</div>

• watch보다 computed 쓰는 것을 추천함

싱글 파일 컴포넌트

• vue-cli로 프로젝트 생성후 App.vue
• .vue 파일을 모두 싱글 파일 컴포넌트라고 함

<!-- .vue 파일 구조 -->
<template>
  <!-- html (뷰 컴포넌트의 표현단, 템플릿 문법) -->
</template>

<script>
  // 자바스크립트 (뷰 컴포넌트 내용)
</script>

<style>
  /* CSS (뷰 템플릿의 스타일링) */
</style>

동작 원리

• 싱글 파일 컴포넌트는 뷰 로더에 의해 HTML, CSS, JS와 같은 웹 자원으로 분리되어 실행됨
• 뷰 로더는 웹팩의 로더 종류 중 하나이고 뷰 CLI로 프로젝트를 생성하면 기본적으로 설정되어 있음

개발환경

• 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에 연결되어 잘 나오는 것을 확인할 수 있다!