API 서버를 만들때 가장 염려스러운 부분은 Cross Domain 이슈다. 그도 그럴게 Ajax 통신(Asynchronous Javascript XML)을 통한 데이터 송수신에서 대부분 발생하는 이슈는 Cross Domain 이슈라서 그렇다. 이 부분을 해결하기 위해서는 서버사이드 내에 Cross Domain을 허용하기 위한 처리가 되어있지 않으면 통신자체가 원천적으로 봉쇄되기 때문이다.
악성코드를 막기위한 브라우저의 AT필드!
예를 들어 게시판 타입 목록을 가져오는 API를 연동해보겠다. Angular.js 프로젝트를 이용해서 코드를 대충 작성해보면 아래와 같다.
app.module.ts
app.component.ts URL 입력할때 끝부분에 /(Slash)를 잊지말자.
이렇게 작성한 뒤에 django 서버를 기동하고 angular도 ng start 명령을 통해 실행시키자. 그리고 브라우저를 열어서 localhost:4200 으로 접속하자. 그리고 개발자 도구를 열어서 보면 짜잔.
에러가 뙇! 등장해있는걸 확인 할 수 있다. 저 "No Access-Control-Allow-Origin' 관련한 오류가 바로 Cross Domain 이슈가 되시겠다. 가끔 "둘 다 localhost 인데 도메인 같은거 아닌가여?" 하고 질문하시는 분들 계신다. Port 번호 다르면 다른 서버로 인식하기때문에 Cross Domain 에러가 발생한다.
그래서 일단은 Django에 Cors관련 라이브러리를 추가하도록 하자.
requirements 에 있는 base.txt 파일을 열어 아래와 같이 라이브러리를 추가한다.
이렇게 작성한 뒤에 작업실행에서 Initialize For Local 을 실행해 django-cors-headers 라이브러리를 내려 받자.
그리고 프로젝트 폴더 아래에 있는 settings/local.py 파일을 열어 아래와 같이 내용을 추가한다.
Pycharm은 python을 사용하기에 좋은 IDE입니다. 하지만, community(무료)버전은 제한이 있습니다.JetBrain pycharm내 차이점을 보면, 웹 개발, 웹 프레임워크, SQL 지원이 빠져있습니다.참고사이트[1]에 따르면 커뮤니티 버전에는 "자바스크립트 하이라이팅, 다국어 파일 지원, html 파일 링크 등 몇 가지 기능"이 빠져있다고 합니다. 모든 기능을 사용할 수 있는 프로페셔널 에디션은 년간$199를 지불해야 함으로 조금 비쌉니다.
Pycharm 프로페셔널 에디션, 커뮤니티 에디션의 차이점
만일 학생이거나 교수, 대학교 직원이라면 학생라이센스로 프로페셔널 에디션을 받을 수 있습니다. 참고사이트[3]을 참고하시기 바랍니다.
참고사이트[1]에서는 파이썬 가상환경 및 장고가 설치되어 있는 것을 가정하고 시작하였습니다. 이와 다르게 본 문서에서는 pycharm에서 가상환경을 적용하여 프로젝트를 생성하고 pip로 Django를 설치한 뒤, 실행환경을 설정합니다.
1. 가상환경을 포함하여 프로젝트 생성하기
1.1 가상환경이란?
가상환경이란, 자신이 원하는 python환경을 구축하기 위해 필요한 모듈만 담아놓은 것입니다[4][5]. 가상환경으로 프로젝트를 꾸미면, 각 프로젝트마다 필요한 모듈을 설치하여 프로젝트마다 고유한 python 환경을 유지할 수 있습니다. 이러한 가상환경을 사용하는 까닭은 프로젝트마다 필요한 모듈의 버전이 다른 경우가 있기 때문입니다.
예를 들어, A프로젝트에서는 Django 1.0버전을 사용해야 하는데, 새로 작성하는 B프로젝트에서는 Django 1.8을 사용하게 되었습니다. 이럴 경우, 전역적으로 사용하는 python에 Django를 설치하였다면, 1.0버전과 1.8버전을 동시에 사용할 수 없어 관리하기가 어려워집니다. 이러한 점을 방지하기 위해 가상환경을 사용하게 됩니다.
pycharm에서는 간단하게 가상환경을 꾸밀 수 있습니다. 하지만, pycharm을 사용하지 않아도 여러 방법을 통해 가상환경을 생성할 수 있습니다. 가상환경에 대한 자세한 내용과 설치에 대해서는코딩도장및파이썬 - 기본을 갈고 닦자!를 참고하시기 바랍니다.
1.2 프로젝트 생성하기
Welcome to Pycharm
PyCharm project를 생성하기 위해 Create New Project를 선택합니다.
프로젝트 생성창
가상환경을 설정하기 위해 Project Interpreter에서 New envirionment using을 선택합니다. 이후 Create를 선택합니다.
※ 이전에 사용하고 있던 프로젝트나, 실수로 New environment using을 선택하지 않았다면 다음 방법을 통해 가상환경을 설정할 수 있습니다.
File-Setting을 클릭한 뒤, Project:프로젝트 이름-Project Interpreter를 클릭하면 다음과 같은 창이 생성됩니다.
Settings창
톱니바퀴를 클릭-Add...을 클릭하면 다음과 같은 창이 뜹니다.
Add Python Interpreter
여기에서 Virturalenv Environment-New environment를 클릭하면 가상환경으로 프로젝트가 구성됩니다.
2. 가상환경에 Django 설치하기
가상환경에는 python이 연결되어 있고, pip가 설치되어 있습니다. pip를 통해 Django를 설치합니다.[2][6]
2.1 terminal에서 Django 설치하기
Pycharm terminal
Pycharm의 터미널(단축키: Alt+F12)를 클릭하여 터미널을 실행합니다. (venv)라고 적혀있는 부분이 현재 가상환경에 접속되어 있음을 알려줍니다.
2.1.1 pip와 setuptool 업그레이드
pip list --outdated
pip와 setuptools의 업그레이드가 가능한 것을 볼 수 있습니다. 업그레이드를 위해 명령어를 입력합니다.
pip
>python -m pip install --upgrade pip
setuptools
>pip install --upgrade setuptools
2.1.2 Django 설치
>pip install Django
를 터미널에 입력하면 자동으로 다운로드 받고 설치되는 것을 볼 수 있습니다.
※ 원하는 버전이 있을 경우, 다음과 같이 입력합니다.
>pip install Django=원하는 버전
2.2 Pycharm에서 Django 설치하기
File-Setting에서 Project: 프로젝트 이름-project interpreter에 들어갑니다.
설치된 패키지와 현재 버전, 최신 버전을 볼 수 있습니다. - 오른쪽의 삼각형을 클릭하면 업그레이드가 가능합니다. - '-'를 클릭하면 패키지가 삭제됩니다.
+를 클릭하면 나타나는 창에 Django를 입력합니다.
Intall Package를 클릭하면 자동으로 설치됩니다.
3. Django 프로젝트 생성 및 서버실행(Run) 설정
Django 설치가 완료되었으니, 프로젝트 생성 및 서버를 실행하는 법에 대해서 배워보겠습니다.[1][2][6]
3.1 Django 프로젝트 생성
Django 프로젝트를 생성해야 서버실행(Run)을 설정할 수 있습니다. 다음 명령어를 terminal에 입력합니다.
>django-admin.py startproject 프로젝트이름
명령어를 입력하면, 자동으로 여러 파일들이 생성됩니다. 본 파일을 복사하여 한 단계씩 올립니다.
3.2 기본 Django 서버 구동 방법
Django는 Django 프로젝트 폴더의 manage.py를 통해 서버를 구동할 수 있습니다. Django 프로젝트 폴더로 이동하여 manage.py를 실행합니다.
>python manage.py runserver
본 명령어를 제대로 입력하면, 다음과 같은 글이 뜹니다.
웹브라우저에서 http://127.0.0.1:8000/로 접속합니다.
접속이 되면, Django 설치가 잘 되었음을 알 수 있습니다.
3.3 Run을 통해 서버 실행하기
명령어를 입력하지 않고, Run을 통해 서버를 실행하도록 구성해보겠습니다.[1]
Run-Edit Configurations를 클릭합니다.
+를 클릭한 뒤, Python을 클릭합니다.
Name에 Runserver, Script path에 manage.py 경로를 선택, Parameters에 runserver를 입력합니다. 그 후, Ok를 클릭합니다.
Run부분에 Run 'Runserver'가 생성된 것을 볼 수 있습니다. 이를 클릭하면, Terminal를 통한 실행과 다르게 Run을 통해서 실행되는 것을 볼 수 있습니다.
