[Press It!] 백앤드 구조 정의 및 프론트앤드 템플릿 선택

1. 백앤드 구조 정의

우선, 웹을 크게 메인화면과 상세 조회화면으로 나누어주기 위해서 Main, Detail 앱을 생성해주었다. 이후 URL을 분리하여 주었다. config에서 main/으로 넘어가는 url은 Main에서, detail/로 넘어가는 url은 Detail에서 처리하도록 하였다. 각각의 urls.py에서 view함수를 호출하면 그에 맞는 html을 출력하는 구조로 설계하였다. 차후, 이 구조는 변경될 수 있다.

2. 프론트앤드 템플릿 적용

디자인적인 요소는 템플릿을 사용하기로 하였다. 혼자 진행하는 개인 프로젝트이기 때문에 디자인같은 사소한 부분에서 시간을 뺏기고 싶지는 않았다. 내가 사용한 템플릿은 BOOTSTRAPMADE라는 홈페이지에서 다운로드 받았다. 부트스트랩 기반 무료 템플릿을 제공하는데, 지금까지 사용한 템플릿 사이트 중 가장 퀄리티가 괜찮은 것 같다. 내가 다운로드 받은 템플릿의 구성은 다음과 같다.

위 파일에서 html은 templates 폴더로, 나머지는 static 폴더로 이동시켜주었다. 이 때, 차후 관리를 수월하게 하기 위해 static과 tempaltes 폴더에 각각 main, detail 폴더를 생성시켜주었다. 아직 detail 페이지의 템플릿은 고르지 않아서 일단 main 폴더만 생성해주었다.

다음은 index.html 파일의 코드 일부이다. 다음과 같이 static 파일들의 경로가 일치하지 않는다. 따라서 static 파일의 경로를 맞추어주는 작업을 해주어야한다. 템플릿에서 제공하는 사진을 사용하지 않을 것이기 때문에 png, jpg의 경로는 바꾸어주지 않는다. 따라서 css와 js의 경로만 수정해준다.

load static으로 static 파일을 불러와주고, static파일의 경로를 맞추어준다. 나는 static 폴더 하위에 main 폴더를 별도로 만들어주었으므로, static ‘main/~’과 같이 경로를 설정해준다.

3. 이슈

3-1. Template rendering error

장고의 템플릿 언어는 문법에 매우 민감하여 사소한 오타에도 에러가 나거나 코드가 제대로 작동을 하지 않는다. 따라서 사소한 오탈자에 주의하도록 하자. 첫 번째 이슈는 static 경로 지정시에 작은 따옴표를 빼먹어서 발생하였다. 이런 사소한 오탈자에 주의하도록 하자.

3-2. 템플릿 적용 에러

웹 페이지를 띄웠을 떄, 템플릿 적용이 제대로 안되고 계속 깨져서 출력되는 이슈가 있었다. 해당 이슈로 몇 시간을 삽질했는데 원인은 매우 허무했다. settings.py에 static 폴더 디렉토리를 설정하는 과정에서 오탈자가 있었던 것이다! static 폴더 디렉토리를 관장하는 환경변수는 STATICFILES_DIR인데 S를 빼먹어서 템플릿 적용이 되지 않았던 것이었다. 앞으로는 오탈자에 주의하도록 하는 습관을 길러야겠다.