늘 그렇듯이 본업과는 좀 거리가 있는 것들에 흥미를 갖는 못된 습성(?)덕분에 요즘 장고(django)라는 파이썬 웹프레임워크를 공부하고 있습니다. 사실 이런 것들에 흥미를 갖는 이유는 어찌보면 현실 도피 내지 소소한 불만들에서 비롯됩니다. 워드프레스가 놀라운 사용자 편의성을 제공하기는 하지만, 사소한 것 하나를 고치더라도 무척 까다로운 기준에 부합해야한다는 것들이 불만으로 쌓이고 있다보니 쉽다는 이야기에 귀가 팔랑거려 장고를 공부하고 있습니다.

일단 각설하고 김석훈님이 쓰신 파이썬 웹프로그래밍이라는 책을 보고 간단하게 블로그를 따라서 만들어보고 있는데, 실수로 장고 2.0을 설치해버렸습니다. 책에서는 장고 1.7 버전을 기준으로 하고 있다보니 달라진 점들이 많습니다.

1.7 버전대만 해도 파이선 2.x 버전을 위해서 아래와 같은 호환성을 유지하려는 목적의 코드들을 일부러 삽입합니다. 하지만 장고 2.x에 들어와서는 파이썬 3.x 버전을 기본으로 사용하기  때문에 파이선 2.x를 고려할 필요가 없습니다. 그래서 아래와 같은 코드를 삽입하면 오류메세지를 출력합니다. 아래 호환성 처리 문장은 사용하지 않습니다.

이제 더이상 django.core.urlresolvers는 쓰이지 않습니다. 간단하게 django.urls로 변경되었습니다.

파이썬 2에 대한 호환성은 이제 더 이상 명시하지 않습니다. 아래 문구 삽입시에도 마찬가지로 오류메세지가 발생합니다.

urlpatterns를 사용하는 방법이 조금 달라졌습니다. 루트에 있는 urls.py에서 app에 있는 – 예를 들면 /blog/urls.py와 연결할때 쓰는 include의 사용법이 조금 달라졌습니다.  django.conf.urls는 django.urls로 간략해졌고 이제는 url 대신 path를 사용합니다. include에서 네임스페이스를 따로 넣지 않는다는 점도 차이점입니다.

또 다른 점을 보자면 include를 했을때 namespace를 명시해주지 않았기에 /blog/urls.py에서 새롭게 추가해줘야하는 부분과 정규표현식을 다뤘을때 다른 점이 있습니다. 달라진 점은 마찬가지로 django.urls가 쓰인다는 점과 path와 re_path로 구분되어서 정규표현식을 쓸때는 re_path 함수를 써야한다는 점이 다릅니다. 그리고 namespace 대신 app_name 이라는 것이 필요하게 되었습니다.

책에서 본 그대로 소스를 입력해서 결과가 나오질 않아서 오류메세지와 함께 django 2.0 document를 뒤져보니 이런 변화들을 적용해야 작동한다는 점을 알게 되었습니다. 아무래도 또 까먹을것 같아서 이렇게 정리해 놓습니다.

주로 참고한 부분은 하단에 링크되어있는 url dispatcher부분입니다. django documentation이 잘되어있다는 이야기는 여러번 들었습니다만, 언어의 장벽때문에 읽어볼 생각을 못해봤는데, 의외로 궁하면 통한다고, 목마른 놈은 우물을 파게 되어있네요 ㅎㅎ

 

 SASS, COMPASS, SUSY, REAKPOINT 소개

간략하게 정리하자면 sass,compass,susy,breakpoint는 아래와 같다.

  • SASS – CSS를 더욱 체계적이고 효율적으로 작성할 수 있도록 도와주어 관리, 재사용에 유리하다
  • Compass – SASS Framework : SASS를 좀 더 편리하게 사용할 수 있도록 준비되어있는 프레임워크
  • SUSY – Grid System Framework : 그리드 시스템을 이용하여 편리하게 레이아웃을 잡을 수 있도록 도와주는 프레임워크
  • Breakpoint – SASS용 미디어쿼리 라이브러리 : 반응형 웹 사이트를 제작할때 미디어쿼리를 쉽게 삽입할 수 있도록 도와주는 라이브러리

sass 설치

먼저 윈도우 환경이라면, http://rubyinstaller.org 에서 루비를 다운로드 받아 설치해야한다. sass가 꼭 ruby기반에서 돌아가는 것만 있는 것은 아니지만, susy2를ruby기반 sass가 완벽 지원하기 때문이다. 참고로 아래 내용들은 우분투 16.04.2에서 설치하는 과정들을 적어놓았지만, 루비를 이용한 설치이므로 윈도우와 큰 차이는 없을 것이다.

루비가 설치되어 있는 상태에서 커맨드 창을 띄워 아래 명령어를 순서대로 입력해서 sass와 compass를 설치한다. 우분투라면 루트 권한으로 설치했기때문에 sudo 명령어는 생략했다. 루트상태가 아니라면 ‘sudo gem install sass’ 와 같은 식으로 앞에 sudo를 붙여줘야한다.

Susy와 Breakpoint를 설치하는 방법은 여러가지가 있지만 여기서는 ruby를 이용해서 설치하도록 한다.

설정

설치가 모두 이뤄지고 나면, config.rb 파일에서 susy와 breakpoint를 사용할 수 있도록 설정해줘야한다.

sass

위의 이미지처럼 compass를 설치하면 맨 처음에 require ‘compass/import-once/activate’ 명시가 되어있다. 그 밑에 require ‘susy’ require ‘breakpoint’ 를 추가해주어 susy와 breakpoint를 사용한다는 것을 알려줘야한다.

require 밑에 명시된 부분들은 수정이 가능한 부분들이므로 자신에게 맞도록 바꾸면 된다. http_path에서는 실제로 작업이 이뤄지고 있는 폴더를 명시해줘야하고, css_dir에는 sass 파일이 css로 컴파일된 결과물이 저장될 위치다. sass_dir는 작업중인 sass 파일의 위치, images_dir와  javascripts_dir는 이미지와 자바스크립트 파일이 저장될 위치다.

그리고 난 다음에는 sass 파일에 compass와 susy, breakpoint를 사용한다는 것을 또 알려줘야한다.

compass/reset, compass/css3, compass/typography, compass/utilities는 선택사항들이고, compass,susy,breakpoint가 지금 설치한 것들을 활용하기 위해서 필수로 명시해줘야하는 부분들이다. 나머지는 필요에 의해 추가된 것들이다.

나머지로 추가된 파일들은 저렇게 연결 – @import만 해주면 된다. 지금 수정한 sass 파일만 컴파일 하면 나머지는 알아서 연결되기때문에 모든 sass 파일을 컴파일 할 필요가 없다.

sass는 작성만 해주면 바로 css처럼 웹페이지에서 읽어들일 수가 없다. 그래서 sass로 작성된 파일을 따로 css로 컴파일 해주어야한다. 이러한 과정또한 compass가 알아서 해준다.

위와 같은 준비가 다 끝나고나면 커맨드 입력창에서 아래와 같은 명령어를 입력해준다.

위의 스크린샷에서 볼 수 있듯이 이제 컴파스는 sass 파일을 지켜보면서, 사용자가 sass 파일의 내용을 바꾸고 저장할때마다 css로 바꿔서 아까 지정한 css_dir에 파일을 저장해줄 것이다. 그래서 html문서의 head 부분에 css_dir에 명시된 파일을 link로 css파일을 연결해주면 sass로 작성된 문서가 체계적으로 정리되서 출력될 것이다.