02. 개발환경 설정하기

01. Intro

 원래는 atom editor를 썻다. 하지만 이번에 visual studio 2017 community를 쓰고 나서 굳이 왜 atom으로 하면서 cmd에서 모든 명령어를 일일이 쳐가면서 뻘짓거리를 했는지 원통하다. 쉽게하나 어렵게하나 봤을땐 티도 안나기 때문에 MS에서 열심히 개발한 프로그램을 이용해서 장고프로젝트를 진행하도록 하겠다.

 

 글을 전체를 읽으려면 구구절절 말이 많다. 그냥 대충 하고 싶다면 사진만 보고 넘기셔도 된다.

02. Visual studio 2017 Community설치하기

https://visualstudio.microsoft.com/ko/vs/whatsnew/?rr=https%3A%2F%2Fwww.google.co.kr%2F  에서 visual studio를 설치한다.

 파일을 다운로드 받고 실행하면

 다른 옵션은 추가하지 않고 python 개발만 선택하였다. 오른쪽에 옵션을 보면 Anaconda라는 것이 있는데, 이것은 python만 다운받으면 python에서 지원하는 여러 라이브러리들을 내가 일일이 다운 받아야한다. 하지만 그게 무척 귀찮고 정신 없기때문에 한꺼번에 묶어서 제공해주는 것이라고 생각하면 된다. 나의 경우 원래 컴퓨터에 anaconda배포판이 설치가 되어있어서 넘어갔는데, Anaconda3 64 bit(5.1.0)을 같이 설치하는 것이 좋을 것이다.(32bit라면 아래에 32비트 선택)

03. 장고 프로젝트 생성

- 일단 비쥬얼 스튜디오에서 프로젝트를 하나 생성한다

- Django 웹프로젝트를 선택하면 되고, 적당한 위치에 예쁜이름으로 만들자. 나는 webTutorial이라는 이름으로 생성하였다. 

- 생성하고 나면 이렇게 뭔가 잘못된 것마냥 심각한 창이 뜨는데 아무일도 아니다. 일단은 가상환경에 설치하기를 누르면 된다.

(가상환경 -  장고에서 웹페이지를 만들다보면 이 라이브러리 저라이브러리, 이 패키지 저패키지 막 다 설치하고 아주 난리가 날것이다. 그래서 나중에 프로젝트를 여러개 진행하다 보면 1번 웹프로젝트에서는 a가 11버전이 필요하고  2번 프로젝트에서는에서는 a가 12버전이 필요한데 컴퓨터는 그걸 알리가있나? 이제 b프로젝트 진행하겠다고 a 12버전 깔면 이제 생난리가 나는 것이다. 1번 프로젝트에서는 a가 버전이 안맞네 어쩌내하면서 에러가 나고 그러는 것이다. 그런 일을 원천 봉쇄하기 위하여 가상환경이라는 것을 만들 수가 있다. 

요약: 그래서 각각의 프로젝트는 자기 프로젝트 내에서 필요한 설정들을 이 가상환경에 각각 분리하여 설정하여 자신의 프로젝트를 실행할때 자기에게 알맞는 프로젝트 환경을 불러 쓸 수 있다.)

-난 기본인터프리터를 Anaconda 5.0.1로 바꾸었다.

-프로젝트 생성 끝!

- 이제 webTutorial위에서 마우스 우클릭 후 슈퍼사용자를 만들어 보겠다. 장고는 admin페이지라고 관리자용 페이지가 제공된다. 우리는 후에 이 관리자용 페이지를 커스터마이징 하는 것을 할 것이므로 슈퍼 사용자를 만든다.(영문 keyword - createsuperuser)

- 난 Id는 django, email은 건너뛰었고 pwd는 django1234로 하였다. 나중에 이걸로 관리자 페이지에 로그인 할 수 있게 된다.

-아래처럼 뜨면 잘 만들어 진 것이다.

- 이제 마이그레이트를 해야한다. 영문으로는 makemigration - django 마이그레이션 수행 /  migrate이 django 마으로 이 둘의 디테일한 차이는 해보다가 나중에 알게 된다. 일단 여기서는 migrate, 즉 장고 마이그레이션을 하여야한다. 둘다 여튼 프로젝트 내에서 디비관련 내용이 변동이 있을때 수행하는 것이다. 

-아래처럼 뜨면 슈퍼유저가 디비에 잘 생성 된 것이다.

- 아직 끝이 아니다. 장고에서는 url을 설정을 해주어야하는데 지금은 일단 따라 하자. webTutorial프로젝트 내에 webtutorial이라는 이름의 폴더가 하나 더 있을 것이다. 이름이 같은 폴더내에 있는 파일들이 전체 프로젝트의 설정과 관련된 내용을 관리한다. 여기서 Urls.py는 전체 프로젝트의 url을 관리한다.

-admin페이지가 장고에서 기본제공 된다고는 하나 url설정까지 해주는 것은 아니다. 따라서 장고 프로젝트는 어떤 주소를 통해서 관리자 페이지로 이동해야하는지 모르는 상태이다. 이때 urls.py에

from django.conf.urls import include

from django.contrib import admin admin.autodiscover() # ... urlpatterns = [ # ... url(r'^admin/doc/', include('django.contrib.admindocs.urls')), url(r'^admin/', include(admin.site.urls)), ]

이 내용을 추가해주면 된다.

- 이제 다 됬다! 프로젝트 실행!

- 기본적으로 제공하는 메인 페이지

- 주소 뒤에 admin이라고 붙이면 관리자 페이지로 이동한다

-여기서 슈퍼유저의 id 비밀번호를 입력한다(나는 django, django1234)

- 여기가 장고 관리자 페이지이다. 여기서는 기본적으로 장고 프로젝트에서 사용하는 데이터베이스 테이블들을 조회할 수 있다.

자세한 사항 https://docs.microsoft.com/ko-kr/visualstudio/python/tutorial-working-with-python-in-visual-studio-step-00-installation

참고(파이썬 설치, Django, Flask사용법에 대한 설명)

04.부트스트랩 스니펫 추가하기

 우리는 개발자인데다가 괜히 html css에 시간 투자해봤자 어차피 엉망이다. 사람이 잘하는 것만 하고 살아도 성공하기 힘든데, 디자인일에는 신경도 쓰지 말자. 따라서 우리는 visual studio를 실행하고, 부트스트랩 스니펫을 설치 할 것이다.

(부트스트랩 - 웹페이지에서 보이는 버튼이나 슬라이드 바 등등의 콤포넌트들을 이쁘게 잘 만들어 둔 곳으로 장고는 기본적으로 부트스트랩을 불러다가 쓰기 때문에 우리는 부트스트랩 스니펫만 설치해도 쉽게 부트스트랩의 콤포넌트들을 불러서 사용할 수 있다)

-일단 도구 > 확장 및 업데이트를 선택한다

- 여기서 온라인 탭에서 bootstrap을 입력한후 bootstrap snippet pack을 설치한다. 얘가 가장 인기가 많다.

- 그리고 보기 > 도구상자를 열어둔다. 뒤에서 요긴하게 쓴다.

- 프로젝트 내에 보면 app이라는 이름의 폴더가 있다. 이 app은 visual studio에서 django 프로젝트를 생성하면 자동으로 생성 해주는 앱이다.

( 여기서 간략 소개 -  장고는 각각의 기능을 앱으로 나누어서 구성한다. 즉, 영화 예매 프로그램에서 영화 관리, 고객관리를 다른 앱으로 구성해서 관리할 수 있다는 뜻이다. 사람마다 앱을 구성하는 방법도 다양하니 프로젝트를 진행하면서 어떻게 프로젝트를 구조화 할지 생각하면 좋다.

app이라는 이름으로 자동 생성된 앱은 안에 static, templates와 여러 파일들로 구성되어있다. 

migration - db관련된 것으로 우리가 직접 손댈일 별로 없음

static - 열어보면 알겠지만 개발자가 많이 건드릴일 없음

templates - 안에 앱이름과 같은 이름으로 폴더가 하나 생성되어있는데 여기에 html 파일들이 옹기종기 모여있음. 

다른 파일들은 나중에 설명

)

일단 html 파일위에서 마우스 우클릭하고 다른프로그램으로 연다.

- 3번째나 4번째꺼로 연다. 둘의 차이가 뭔지는 잘 모르겠다.

-이건 그냥 패스하시면 됨

- 이렇게 열고 나면 html 소스코드가 보이는 곳 아래에 디자인 나누기 소스 탭이 뜬다( 하지만 파일을 닫았다 다시 열면 다시 webform으로 열어야 함)

-html 파일을 열고 도구상자를 보면 부트스트랩 코드조각(스니펫을 설치해야 보임), html 이 보인다.

-html 디자인 보기를 열고 html탭에서 드래그앤 input(button)을 드래그앤 드랍하면 버튼이 생긴다. 하지만 이건 정말 비양심적인 디자인이라 너무 급하지 않다면 부트스트랩을 써주는 예의를 보이자.

- 버튼을 끌어 옮기면 알아서 html 태그가 생성

-html파일에서 부트스트랩 코드조각을 더블 클릭하면 키워드가 쳐진다. Accordion의 경우 bs-accordion

- 그리고 bs-accordion 뒤에서 tab을 하면 html 태그가 생성된다. 이걸 조금씩 수정할 정도만 html css 문법을 알면된다(css는 왠만하면 고치지 않고 프로젝트를 진행하겠음)

- about.html에서 버튼을 추가하고 accordion을 추가하였는데 about페이지에서 잘뜨는 것을 확인 할 수 있다.

05. 마무리

엄청 구구절절 길었는데 여기까지하고 나면 프로젝트의 기본 환경설정이 마무리가 된다. 다음 튜토리얼에서는 데이터베이스와 관련된 설정을 하도록 하겠다. 안녕!