[짭하하 / 침하하 개발기] 0. 개발 준비

0. 들어가기 전

• 보고 계신 게시물은 현재 서비스 되고 있는 침하하 페이지의 개발기가 아닌,
  김둘기의 개인 프로젝트를 위한 침하하임을 알립니다.

1. 왜 개발하게 되었는가?

• 어느 날 침투부에 올라와 있는 영상 중 '웃음의 알렉산드리아 도서관'이라는 제목의 영상을 보게 되었다.
• 영상의 마지막 부분에 방장 아저씨가 침하하라는 이름의 유머 사이트를 운영해보고 싶다는 이야기를 듣게 되었고, 회사에서 장고로 프로젝트했던 경험을 살려 만들어보면 재밌을 거 같아 만들게 되었다.

 

2. 개발에 필요한 자원 검색

• 일단 홈페이지의 얼굴이라고 할 수 있는 배너와 로고를 제작한다.
• 구글에 있는 침착맨 로고를 다운로드하여 Photo Scape X로 배경을 지우고 배너와 로고를 제작하였다.

(!) 배너 이미지 출처 : https://www.youtube.com/user/zilioner83/channels

(!) 로고 이미지 출처 : https://www.youtube.com/watch?v=Ky8jcL7Ob8w 

[그림 1] 홈페이지 로고와 배너

• 홈페이지의 얼굴인 배너와 로고를 제작 하였으니, 홈페이지의 몸이라 할 수 있는 템플릿을 찾아본다.
• 여러 유, 무료 템플릿 사이트를 오가며 적합한 템플릿을 찾아본 결과 아래 템플릿 사이트에서 괜찮은 템플릿을 찾았다.

Free web templates download

 

3. 개발 환경 세팅

• 평소 데이터 및 코딩 공부 서버로 사용하고 있던 곳에 Django 환경을 만들어 사용한다.
• Jupyter Notebook 보다는 vscode 환경이 Django 개발에 더 적합할 것 같아 Docker에서
  vscode-server 이미지를 다운로드 받은 후 Anaconda를 설치하여 환경을 구성하였다.
• 외부에서도 접속할 수 있도록 공유기 설정에 들어가 포트 포워딩해주었고, 공유기의 외부 ip로
  접속하는 것보다 도메인을 이용하여 접속하는 편이 보안 면에서도 안전할 것 같아 duckdns에서 무료 dns 받아 사용

Duck DNS

[그림 2] Django 개발 환경을 구성할 Docker의 code-server 이미지

[그림 3] 무료 도메인 duckdns 이용 dove-web.duckdns.org/main을 입력하면 접속 가능하다.

[그림 4] vscode 서버와 침하하 페이지 port 번호 지정

4. 침하하 프로젝트 생성

4 - 1. 프로젝트 생성 및 설정 파일 변경 

• Django 프로젝트를 생성하기 위해 프로젝트 폴더 생성 (이번 경우엔 chimhaha)하고, 
  터미널에 django-admin startproject config . 를 입력하여 프로젝트를 생성한다.
• 위 명령어를 입력하면 프로젝트 폴더 안에 config 폴더가 생성되고, 그 안에 프로젝트에 필요한 파일들이 생성된다.
• chimhaha 프로젝트 안에 templates 폴더와 templates/static 폴더를 생성하여
  다운로드한 템플릿 파일들을 넣는다.

## 프로젝트 폴더 구조

chimhaha
↳ config
↳ templates
  ↳ static
    ↳ images
    ↳ css
    ↳ js

[그림 5] Django 프로젝트 시작

• 프로젝트에 필요한 설정을 위해 설정 파일 (chimhaha/config/settings.py)을 변경해 준다.

## chimhaha/config/settings.py
## [변경 전] ##

## 접속 가능한 ip 지정
ALLOWED_HOSTS = []

## html 파일이 저장되어 있는 폴더 지정
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]


## 프로젝트 언어, 시간대 지정
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_TZ = True

## 다운로드 받은 템플릿 파일이 저장되는 폴더 지정
STATIC_URL = 'static/'
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

## [변경 후] ##

ALLOWED_HOSTS = ['*']

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_TZ = True

import os
STATIC_URL = '/templates/static/'
STATIC_DIR = os.path.join(BASE_DIR, 'templates/static/')

STATICFILES_DIRS = [
    STATIC_DIR
]
STATIC_ROOT = os.path.join(BASE_DIR, '.static_root')

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR,'media')
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

 

• 지금까지 침하하 웹을 만들기 위한 로고 및 배너 생성, 템플릿 파일 탐색, 장고 프로젝트까지 생성하였다.

 

• 개발되고 있는 코드들은 아래 링크에 저장되어 있습니다.

GitHub - AhMuGeoNa/ChimHaha: 웃음의 알렉산드리아 도서관 침하하 페이지를 만들어보자

 

999. 참고 자료

999 - 1. Django 코드

점프 투 장고

 

999 - 2. 웹 페이지 템플릿

Free web templates download