Development Artist

지난 시간에는 Vuejs의 라이프 사이클과 훅들에 대해 간단히 테스트를 해보았는데요, 오늘은 부모 자식 컴포넌트 간 데이터 전달에 대해 알아보도록 하겠습니다. 데이터 전달을 위해서 props와 emit을 사용을 할텐데요, 간단한 예제 코드를 통해서 어떤식으로 사용을 하는지 확인해보도록 하겠습니다. 또한, modal 이라는 개념도 함께 설명을 하도록 하겠습니다. 우선 오늘 구현해볼 코드의 결과물 입니다. 지난 내용을 복습해 보자면, SFC는 Single-File Component로 하나의 파일이 하나의 컴포넌트로 간주한다고 하였습니다. 그렇다면 오늘 구현해볼 페이지는 몇 개의 컴포넌트로 구성하면 될까요? 하기 나름입니다. 하나의 파일로도 구성할 수 있겠지만, 다음의 파일들로 구성을 해보겠습니다. views..

장고의 장점 중 하나로써, powerful한 ORM을 들 수 있습니다. ORM은 Object Relational Mapping(객체-관계-매핑)의 약자입니다. 즉, 객체와 데이터베이스의 관계를 매핑해주는 도구입니다. 기본적으로 데이터베이스의 데이터를 조작하기 위해 쿼리를 날립니다. 가령, 데이터베이스로 부터 데이터를 가져 온다고하면, 이것을 직접 날려서 데이터를 가져오는 대신 ORM을 통해 함수로 요청하고 ORM이 데이터를 가져와서 객체화를 시킬 수 있습니다. Django에서는 QuerySet API를 제공하는데요, https://docs.djangoproject.com/en/3.2/ref/models/querysets/ 해당 링크에서 자세히 확인할 수 있습니다. 지난 시간 ‘Book’, ‘BookIns..

이번 시간에는 Database를 설치하고 Django와 연동 하겠습니다. 그리고 Model을 만들어 DB의 테이블을 생성해주는 것 까지 해보도록 하겠습니다. 깡통 장고 서버를 만들면 기본적으로 내장 DB 설정이 settings.py에 되어 있습니다. DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': BASE_DIR / 'db.sqlite3', } } 기본적으로 SQLite를 사용하는데요, 이번 실습에서는 따로 DB 서버를 구성하고 해당 서버를 세팅하는 것으로 진행하겠습니다. 데이터베이스 엔진 종류는 아래와 같이 postgresql, mysql, sqlite3, oracle이 있고 다른 벤더에서 제공하는 패키지도 설치하여 ..

지난 시간까지 간단한 API를 만들고 테스트까지 해보았습니다. 이번 시간에는 CORS가 무엇인지 그리고 Django에서 CORS를 어떻게 다룰 수 있는지 설명하도록 하겠습니다. CORS는 Cross-Origin Resource Sharing의 약자로써, 다른 출처 리소스 공유를 의미합니다. 일반적으로 브라우저에서는 보안사고를 방지하기 위해 동일 출처 정책을 가지고 있는데, 다른 출처와 공유를 하기 위해 CORS 정책을 설정한다면 다른 출처로 요청 및 응답을 받을 수 있게 됩니다. 여기서 같은 출처란, Protocol, Host, Port가 같은 것을 의미합니다. http://example.com/3000/api-a http://example.com/3000/api-b 위의 2개의 URL은 같은 출처입니다..

지난 시간에는 Django의 동작 메카니즘에 대해서 살펴보았습니다. 특히 settings.py를 자세히 봤었는데요, 오늘은 Django app을 만들어보고 프로젝트에 적용 및 디자인 패턴에 대해서 알아보도록 하겠습니다. 지난 시간에 settings.py에 ‘INSTALLED_APPS’라는 부분을 보셨을 겁니다. 이곳에는 기본적으로 세팅되는 프레임워크 뿐만 아니라, 직접 앱을 만들어서 세팅해줄 수도 있습니다. Django는 Project만 만들어서 사용하지 않습니다. 모듈 정도의 개념으로 App이란 것을 만들어서 사용하는데요, 이렇게 개발하면 재사용성을 높이고 유지보수가 원할합니다. 이번에 개발한 포탈에는 다양한 시스템이 들어가는데요, 하나의 시스템을 하나의 앱으로 봐도 좋을 것 같습니다. 가령 Billi..

지난 시간에는 Python 프로젝트를 만들고 그 안에 Django를 설치했습니다. 그리고 Django 서버를 구동까지 해보았습니다. 이번 시간에는 'python manage.py runserver' 를 치면 어떻게 동작하는지 그 과정을 살펴보도록 하겠습니다. 우선 우리는 manage.py를 살펴볼 필요가 있습니다. def main(): """Run administrative tasks.""" os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'test_server.settings') try: from django.core.management import execute_from_command_line except ImportError as exc: raise Import..

Creation 이번 시간에는 파이썬 프로젝트 위에 장고를 설치하는 시간을 가져보도록 하겠습니다. 프로젝트에서 터미널을 엽니다 python -m pip install --upgrade pip python -m pip install Django 위의 명령어를 치면 Django가 설치가 됩니다. pip list 다음 명령어로 설치를 확인할 수 있습니다. 또는, 상단 File>Settings>project:[project name]>Python Interpreter에서 설치된 패키지들을 확인할 수 있습니다. 이렇게 설치된 패키지들은 지금 만들어진 가상환경에만 있습니다. 배포를 위해 또는 다른 가상환경에서도 해당 패키지를 사용할 필요가 있는 경우 패키지 관리를 위해 requirements.txt 라는 파일을 만..

Install 장고 프레임워크를 사용하기 위해서 python 가상환경을 만들어주려고 합니다. 어떤 종류의 CLI로 가상환경을 만들어주어도 괜찮지만, 아주 기똥찬 python IDE를 우리는 알고 있습니다. 바로 pyCharm 입니다. IDE는 Integrated Development Environment의 약자로, 통합 개발 환경이라고 합니다. 우리가 익히 알고 있는 IDE는 VSC가 있습니다. 또는 안드로이드 스튜디오가 있구요. 이처럼 IDE는 소프트웨어 개발에 관련된 모든 작업, 즉 패키지 인클루딩, 문서 편집, 컴파일, 디버그, 원격 서버 액세스, 바이너리 배포 등을 하나의 프로그램 안에서 모두 처리하는 환경을 제공하는 툴입니다. pyCharm을 설치 하기 위해서 https://www.jetbrai..

Life Cycle 이전 시간까지 우리는 Vue의 디자인패턴과 그에 따라 어떻게 동작하는지 살펴 보았는데요, 이번 시간에는 Vue의 라이프 사이클과 그에 따라 // src/views/AboutPage.vue Home | About 이곳은 About Page. COUNT:{{cnt}}, ONE:{{data1}}, TWO:{{data2}}, THREE:{{data3}} click 그 다음, src 아래에 router.js 파일을 생성해줍니다. HomePage는 / 경로로, AboutPage는 /about 경로로 사용하기 위한 설정을 담고 있습니다. // /src/router.js import Vue from "vue"; import VueRouter from "vue-router"; import Home f..

Design Pattern 이전 장에서, 깡통 Vue 프로젝트를 하나 생성하고 실행도 시켜보았습니다. 이제 궁금해집니다. 어떻게 저런 모양을 하고 있는 것이지? 이것을 이해하기 위해서는 Vue의 디자인 패턴을 알아야합니다. 구글링해보면 알겠지만, Vue의 디자인 패턴은 MVVM 입니다. MVVM은(Model-View-ViewModel)의 약자입니다. 각자의 역할이 무엇일까요? ‘View’는 사용자에게 보여지는 UI 부분이 됩니다. ‘Model’은 데이터가 들어있습니다. ‘ViewModel’은 ‘Model’의 데이터를 가져다가 View에 바인딩합니다. 이렇게 설명하면 잘 와닿지가 않습니다. 실제 코드를 한번 봐볼까요? 아래는 src/main.js 입니다. Vue가 실행되면 가장 먼저 main.js를 보게 ..