[프로젝트] Django로 포트폴리오 사이트 만들기(2) - Django 프로젝트 생성 및 Bootstrap 적용하기

안녕하세요. 바른호랑이입니다.

나만의 포트폴리오 사이트 만들기를 목표로 지난 번까지 기본적인 Ubuntu설치 및 환경설정을 완료했었습니다. 기본적인 환경설정을 완료했기에 본격적으로 Django와 Bootstrap을 활용하여 사이트를 만들어보려고 합니다. 

 

※ Django로 포트폴리오 사이트 만들기(1) - Ubuntu Server 환경설정 및 가상환경 만들기 

[프로젝트] Django로 포트폴리오 사이트 만들기(1) - Ubuntu Server 환경설정 및 가상환경 만들기

프로젝트를 Django로 개발 및 배포하기 위해서는 신규 Django 프로젝트를 생성해주어야 하기에 개발 서버로 만든 Ubuntu서버를 VS Code를 기반으로 ssh를 통해 접속한 후 아래의 명령어를 활용하여 Django 신규 프로젝트를 생성해주었습니다. 프로젝트가 생성된 것을 확인한 후에는 정상적으로 생성되었는지를 확인하기 위해 로컬환경에서 해당 프로젝트를 실행 시켜 확인하였고, 이상없이 작동하는 것을 확인했습니다.

# '.'은 현재 디렉토리에 django project를 생성하겠다는 의미
django-admin startproject config .

# 로컬환경에서 django 프로젝트 실행
python manage.py runserver

프로젝트를 생성하게 되면 자동으로 [config]-[settings.py]가 생성되게 되는데 settings.py에는 SECRET_KEY가 직접적으로 노출되게 됩니다. 배포를 오픈소스 형태로 Github를 통해 진행할 예정이기에 .env 파일을 생성함으로써 이를 변수화하여 실제값을 확인할 수 없게 해주었습니다. 또한 로컬 환경과 운영서버 환경에서 실행하는 settings값의 내용이 달라야하기에 settings 폴더를 config 폴더 하위에 만들고, settings.py의 내용을 base.py(공통), local.py(로컬환경), prod.py(서버환경)로 나누어주었습니다. base.py는 기본적으로 settings.py의 내용을 그대로 복사한 후 BASE_DIR을 수정해주고, SECRET_KEY, DEBUG 값을 .env와 연계하여 사용할 수 있게 적용해주었습니다. 그 다음으로는 개발 시에는 local.py를 운영시에는 prod.py를 사용하게 할 생각이기에 local.py와 prod.py를 모두 작성해줘야 했는데, prod.py는 아직 운영서버를 만들지 않았기에 보류한 후에 local.py파일만 아래와 같은 코드로 작성해주었습니다.

Django는 프로젝트를 생성하면 자동적으로 UTC를 기준으로 Time zone이 설정되게 되기에 기준을 한국 시간대로 변경하기 위해 [config]-[settings]-[base.py] 파일의 LANGUAGE_CODE와 TIME ZONE을 한국시간대로 변경해주었습니다. 변경을 완료한 이후에는 Django실행 시, 개발환경에서  local.py를, 운영환경에서는 prod.py를 사용하게끔 변수값을 지정해줘야하기에 로컬환경에서의 서버 실행을 위한 가상환경 설정을 자동화 시켜줄 bash 코드문을 아래와 같이 작성해주고 기존의 settings.py를 삭제한 이후,  '. enter_local.sh' 명령어를 실행하여 가상환경 진입 후 정상적으로 Django 서버가 작동하는지 확인해주었습니다.

# load .bashrc
. ~/.bashrc

# activate virtual python environment
pyenv activate venv_portfolio

# add server execute file path
export DJANGO_SETTINGS_MODULE=config.settings.local

# run serever
# python manage.py runserver

# 로컬환경에서 Django 실행을 위한 가상환경 진입 명령어 실행
. enter_local.sh

# Django 실행
python manage.py runserver

로컬환경에서 django가 정상적으로 실행되는 것을 확인한 후에는 Django 구동 시 필요하지만 아직 설치되지 않은 사항들을 적용하기 위해 아래의 코드를 통해 필요 사항들을 적용시켜주었습니다.

python manage.py migrate

이제 기본적인 사항들을 완료가 되었기에 포트폴리오 개발에 사용할 아래의 사이트에서 bootstrap 양식을 찾아 다운로드 한 후에 scp를 사용하여 개발중인 로컬 서버에 옮겨주었습니다.

 

※ Bootstrapmade.com

Bootstrap Portfolio Templates | BootstrapMade

# 작성방법 scp [옵션] [전송할 디렉터리 이름] [remote_id]@[remote_ip]:[보낼 경로]
# 예시
scp -r test azureuser@192.168.0.0:~/

전송된 것을 확인한 다음에는 템플릿 적용을 위해 새로운 app을 아래의 코드로 생성해주고, 전송해온 파일들을 적용하기 위해 django 프로젝트 폴더에 [static] 폴더와 [templates]-[main] 폴더를 생성해준 후에, bootstrap 자료 중 assets 폴더 내에 있는 파일들은 [static]폴더로 .html로 된 파일들은 [templates]-[main]폴더로 복사해주었습니다.

 

※ 리눅스에서 폴더 통째로 복사하기

리눅스에서 폴더 통째로 복사하기 - 제타위키

# main app 생성
django-admin startapp main

전송해온 bootstrap 파일이 정상적으로 작동하는지 확인하기 위해서는 config의 urls.py를 수정한 후 main app에 urls.py 파일을 생성 및 작성하고 views.py을 수정해줘야합니다. 가장 먼저 config의 urls에 main app을 찾을 수 있게 아래의 사진과 같이 수정해주었습니다. 이후 main app 내에서 추가될 기능들에 대한 내용을 범주별로 묶어주기 위해서 main app 내부의 views.py파일을 삭제하고, main app 내부에 views폴더를 생성한 후 base_views.py파일을 views 폴더 내에 생성해주었습니다.  그 다음 main app 내부의 base_views.py 파일과 urls.py파일을 아래와 같이 수정해주었습니다.

django 프로젝트 폴더의 [static] 폴더 내 static 관련 파일들과 [templates] 폴더 내 template 관련 파일들을 사용하기 위해서는 settings파일에 등록해주어야 하므로 기준 setting파일인 [config]-[settings]-[base.py]파일에 아래와 같은 사항을 추가해주었습니다. 

수정을 완료한 이후 django로 서버를 실행시켜보았는데 메세지 상으로는 에러가 없이 돌아가는 것으로 보이나 static에 저장된 파일들을 제대로 불러오지 못하고 있는 것을 확인했습니다. index.html을 확인해보니 양식들을 불러오는 href를 불러오는 링크를 변경하지 않았기 때문에 해당 문제가 발생했음을 알 수 있었습니다.

문제를 해결하기 위해 index.html에 최상단에 django에서 지정한 static파일들의 기본경로를 불러오기 위해 "{% load static %}"을 입력해주고 href와 src의 경로가 "assets/~"로 이루어져있는 경로들을 "{% static '{파일경로}' %}" 형태로 변경해주었습니다.

수정을 완료하니 static에 저장된 파일들을 정상적으로 불러오는 것을 확인할 수 있었고, 이후 다른 html의 수정 용이성과 가독성을 위해 html template들에서 공통적으로 사용중인 부분을 base.html, header.html, footer.html로 나누어 [templates]폴더에 저장해주었습니다. 중간에 부모 템플릿에서 "{% load static %}"를 사용한 후 해당 템플릿을 상속받은 자식 템플릿에서 static이 제대로 인식되지 않은 문제가 있었는데 해당 문제는 "{% load static %}"은 상속이 되지 않는 점 때문이었습니다. 해당 부분 확인 후 static을 사용하는 자식 템플릿들에도 전부 "{% load static %}"를 별도로 입력해주는 방법으로 해결하였습니다. 분할을 진행한 후에도 index.html이 정상적으로 작동하는 것을 확인한 후에는 나머지 html 파일들도 index.html을 수정한 방식과 동일하게 수정해주었습니다.

html 파일들을 수정한 후에는 urls와 views의 매핑을 위해 main app의 urls.py와 [views] 폴더 내 base_views.py를 수정해주었습니다.

코드부분까지 수정한 후 정상적으로 작동되는지 보기 위해 index.html의 내용을 약간 수정 해준 후 모든 페이지들이 정상적으로 접속되는지 확인해보았습니다. 

변경한 html 내용도 잘 적용되고, 각 페이지들도 정상적으로 작동하는 것을 확인한 후에는 html 파일들의 내용을 포트폴리오에 맞게 수정해주었습니다. 특정 페이지에서 버튼 클릭시 다른 페이지로 이동하는 기능 구현과 페이지 내부의 불필요한 메뉴 삭제 및 사진 교체 등의 작업들을 진행했는데 해당 부분들은 개인의 필요에 맞게 작성해야하는 부분이기에 해당 부분은 별도로 다루지 않았습니다.