1️⃣

1주차 (1-10)

Intro

1강. 무엇을 만들 것인지

학습 목표 : 어떤 서비스를 만들지에 대해서 간단히 알아본다.

(Pinterest 레이아웃을 본 뜬) 웹 서비스를 만들고 배포한다!

2강. 웹 서비스 구조

학습 목표 : 웹 서비스를 어떤 기술 스택을 가지고 구축할 것인지에 대한 로드맵을 살펴본다.

1) 웹 서비스에 사용되는 기술

•

Front-End : JS / HTML / CSS

•

Back-End : MariaDB / Nginx / django / docker

2) 하나의 웹 서비스 형성부터 배포까지 (Django, 과정)

django 내에 기능별로 앱을 구축한다.

각각의 앱은 JS / CSS / HTML을 가지고 있으며, 앱을 모두 엮어서 하나의 앱 서비스를 만든다.

이러한 앱 서비스는 한 개의 docker 컨테이너가 된다.

이를 docker 시스템 전체에 삽입한다.

이후 docker 내부에서 MariaDB, NginX 등 MVT에 맞는 기능별 작업이 수행된다.

그리고 이 docker 시스템을 가상 서버에 넣음으로써 웹 서비스 배포가 완료된다.

3강. 개발환경 셋업

학습 목표 : Pycharm 기반의 개발환경 셋업을 진행한다.

1) 가상 환경을 사용하는 경우

•

같은 모듈을 사용하더라도 다른 버전을 필요로 할 때

•

파이썬 프로그램을 실행하기 위한 최소한의 환경을 마련하고자 할 때

•

GitHub 등의 저장소나 네트워크와 연계하고자 할 때

2) 개발환경 구축 과정

가상 환경을 새로 형성한 후, 장고를 설치한다. 

pip install django

프로젝트를 생성한다.
django-admin startproject 프로젝트명

해당 프로젝트로 이동한다.
(File > Open > 생성된 프로젝트 선택)

※ 터미널에 venv 표시가 없으면, 프로젝트에 가상 환경을 새로 만들고 다시 장고를 설치한다.

(Settings > Python Interpreter)

※ 장고 세팅을 확인하고 싶으면, python manage.py runserver 입력 후 확인한다.

4강. django 개발 패턴

학습 목표 : 본격적인 코딩에 앞서 django 프레임워크에서의 개발 패턴을 알아본다.

장고는 MVT(혹은 MTV) 패턴을 사용하며,

MVT는 각 부분의 역할을 하면서 전체적인 프레임워크를 구성한다.

1) Model

•

장고에서 데이터베이스와 통신하게 해주는 편리한 도구 

•

객체를 데이터베이스에 저장하는 과정에서, db쪽 언어 사용 없이 간편하게 소통할 수 있게 한다.

2) View

•

클라이언트의 요청을 처리하는 지휘자

•

요청(request)을 받아서 응답(response)으로 되돌려주는 역할을 담당한다.

3) Template

•

프론트엔드(UI)의 내용을 어떻게 구현할 것인지를 결정한다.

•

경로를 직접 만들고 HTML 문서를 만들어서 사용한다.

Django Tutorial

5강. 첫 앱 시작, 그리고 기본적인 view 만들기

학습 목표 : django의 첫 앱을 시작해보고, 기본적인 View를 만든 이후 브라우저에서 정상적으로 원하는 출력이 나오는지 확인해 본다.

step 1. 앱을 생성한다. $ python manage.py startapp accountapp

step 2. settings.py > INSTALLED_APPS 리스트에 생성한 앱을 명시한다.

step 3. views.py에서 hello_world 함수를 정의한다.

step 4. urls.py에서 view를 routing하는 특정 주소를 만든다.

step 5. accountApp 하위 디렉토리에 urls.py 파일을 생성한다.

step 6. 서버를 구동 시킨다. python manage.py runserver

6강. Git의 소개

학습 목표 : 본격적인 코딩에 앞서 Git이라는 버전 관리 시스템에 대해서 간단히 알아본다.

1) Git : 버전 관리 시스템 (Version Control)

•

Roll back에 편리하다.

•

여러 Branch(버전)들을 관리하는 것에 있어서 용이하다.

•

기존 버전의 기능에 영향을 주지 않으면서 추가적인 기능을 개발할 수 있으며, master branch와 추가적인 branch들을 합칠 수도 있다.

•

Team Work에 용이하다. (다양한 도구들을 제공)

2) Git Command

: add / commit / push / pull / branch / checkout 등

7강. Gitignore 설정, 환경변수 분리, 첫 커밋

학습 목표 : Git을 통한 버전 관리를 활성화 하고, 기본적인 Gitignore 파일 설정, 커밋 이전에 민감한 환경변수들을 분리하는 과정과 첫 커밋까지의 내용을 다룬다.

※ git 활성화 : VCS > Enable Version Control Integration > Git

step 1. 추적을 방지하기 위해 .gitignore 파일을 생성한다. (gitignore/Global/JetBrains.gitignore)

step 2. 웹 서비스를 배포 전, SECRET_KEY를 분리해 따로 관리한다.

python -m pip install django-environ

settings.py에 다음 코드를 삽입한다.

import environ
import os

env = environ.Env(
    # set casting, default value
    DEBUG=(bool, False)
)

# Set the project base directory
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

# Take environment variables from .env file
environ.Env.read_env(os.path.join(BASE_DIR, '.env'))

# False if not in os.environ because of casting above
DEBUG = env('DEBUG')
Python
복사

.env 파일을 생성하고 다음 코드를 삽입하고, 분리한 SECRET_KEY값을 넣는다.

DEBUG=on
SECRET_KEY=your-secret-key
DATABASE_URL=psql://user:un-githubbedpassword@127.0.0.1:8458/database
SQLITE_URL=sqlite:///my-local-sqlite.db
CACHE_URL=memcache://127.0.0.1:11211,127.0.0.1:11212,127.0.0.1:11213
REDIS_URL=rediscache://127.0.0.1:6379/1?client_class=django_redis.client.DefaultClient&password=ungithubbed-secret
Python
복사

settings.py 파일 안에 SECRET_KEY를 지우고 SECRET_KEY = env('SECRET_KEY') 로 대체한다.

step 3. .gitignore 파일 안에 추적을 방지할 파일들을 기재한다.

step 4. git bash를 켜서 커밋을 완료한다.

cd PycharmProjects/프로젝트명

git status

git add .

git commit -m “커밋 코멘트”

8강. 장고 Template의 extends, include 구문과 render 함수

학습 목표 : 장고에서 사용되는 Template의 include, extends 구문의 차이점을 간단히 알아보고, render 함수와 템플릿을 사용해 response를 반환해 본다.

•

extends : HTML 파일의 구조를 채워 나갈 수 있게 하는 역할

•

include : HTML 파일에 추가적인 내용을 넣을 수 있게 하는 역할

즉, extends로 바탕을 만들고 include로 내용을 채운 후, 이를 통해 response view를 만든다.

9강. include / extends / block 구문을 이용한 뼈대 만들기

학습 목표 : include, extends, block 구문을 통해 재사용 가능한 HTML 뼈대 파일을 만든다.

1) base.html

<!DOCTYPE html>
<html lang="ko">

{ % include 'head.html' %}

<body>

    {% include 'header.html' %}

    {% block content %}
    {% endblcok %}

    <div style="height: 20rem; backgroud-color: #38df81; border-radius: 1rem; margin: 2rem;">

    </div>
    {% include 'footer.html' %}

</body>
</html>
HTML
복사

2) head.html

<head>
    <meta charset="UTF-8">
    <title>Pragmatic</title>
</head>
HTML
복사

3) header.html

<div style="height: 10rem; backgroud-color: #38df81; border-radius: 1rem; margin: 2rem;">

   </div>
HTML
복사

4) footer.html

<div style="height: 10rem; backgroud-color: #38df81; border-radius: 1rem; margin: 2rem;">

    </div>
HTML
복사

5) hello_world.html

{% extends 'base.html' %}

{% block content %}

    <div style="height: 20rem; backgroud-color: #38df81; border-radius: 1rem; margin: 2rem;">
        <h1>
            testing
        </h1>
    </div>


{% endblock %}
HTML
복사

10강. style, 구글 폰트를 통해 Header, Footer 꾸미기

학습 목표 : style 속성과 구글 폰트를 이용해 저희 서비스 내 모든 페이지에 공통적으로 나타날 Header와 Footer 부분을 꾸며본다.

header.html

<div style="text-align:center; margin: 2ren 0;">
         <div>
             <h1 style="font-family: 'Lobster', cursive;">Pragmatic</h1>
         </div>
            <span>nav1</span>
            <span>nav2</span>
            <span>nav3</span>
            <span>nav4</span>
         <div>

         </div>

    </div>
HTML
복사