#1. Django와 React로 Music Controller 만들기 - 장고 설치 및 기본 사항

반응형

안녕하세요 !! 

Django 를 다시 복습할 겸 처음부터 아주 천천히 앱을 만들어보는 과정을 기록하기로 했습니다. 

Django는 파이썬의 대표적인 풀스텍 웹 프레임워크로 전세계 프로그래머들이 많이 사용하고 있습니다. 

 

대표적으로는 인스타그램과 스포티파이 등 세계적인 어플리케이션들이 Django로 만들어졌죠. 

Flask나 nodejs 로 백엔드를 작업하시다가 Django 를 써보시면 분명 굉장히 편리하실거에요. 

 

이번에 제가 만들 앱은 Music Controller App 인데요

Django 로 만들면서 프론트는 React 를 활용해볼 생각입니다. 

React는 제가 직접 써보는 것이 거의 처음이라서 많이 배우면서 해야될 거 같아요. 

 

그러면 Django 의 설치부터 기본적인 세팅까지 해보도록 하겠습니다. !! 

 


 

Django Install 

pip install django djangorestframework

데스크탑이나 원하는 경로에 작업을 할 폴더를 생성한 뒤에 vsc 에서 열어줍니다.

 

그 다음 터미널에서 위의 명령어를 입력하면 django 의 설치가 완료됩니다. 

 

아 그 전에 vsc에서 extension 을 설치해야 하는데 , django snippets 를 설치해주시면 장고 개발 환경이 더욱 쾌적해집니다. 

 

django-admin startproject 프로젝트명

터미널에 startproject를 통해 django 프로젝트를 생성하실 수 있습니다. 

프로젝트를 생성하면 설정하신 프로젝트 이름으로 하나의 폴더가 만들어집니다. 

그리고 그 폴더 안에 똑같은 이름의 폴더가 하나 더 있을거에요.

 

내부에 있는 폴더가 메인으로 사용하게 되고 전체적인 부분을 설정할 때 수정하게 될 폴더입니다.

 

django-admin startapp 앱 이름

이렇게 startapp 이후 앱 이름을 적어주면 똑같이 다른 폴더가 하나 더 생성됩니다. 

 

이건 앞으로 app 이라고 부를거에요. 

 

예를 들어서 에어비앤비 사이트를 만든다고 가정해보면 저희는 유저, 방, 메세지 ,리스트 등의 부분이 필요하죠? 

그렇게 따로 데이터가 필요한 부분들을 만들어주면 됩니다. 

 

여기까지가 가장 기본적인 Django의 세팅입니다. 

 

경우에 따라서 Formatter 인 black 과 prettier 등을 보시고 필요한 부분은 설치해주시면 됩니다.

 

저는 요즘 tabnine 이라는 익스텐션을 쓰고 있는데 정말 유용해서 꼭 써보시길 추천드릴게요.

 


 

Django 의 개발 순서

 

django-admin startapp api2

api2 라는 앱을 생성하면 저희는 Django에게 저희가 만든 앱을 쓰겠다고 알려줘야 합니다.

 

메인 폴더인 music_controller 의 settings.py 로 가서 INSTALLED_APPS 에 api.apps.Api2Config 를 추가해줍니다.

 

생성한 앱의 폴더에서 apps.py 라는 파일에 들어가면 AppConfig 라고 나타난 부분이 있는데 저기에 있는 클래스이름을 Installed_APPS 에 추가해주면 됩니다. 

 

이건 앱을 만들 때마다 매번 해줘야합니다. 꼭 !

좌 - settings.py 우 - api2/apps.py

Views.py

 

api2 / views.py 는 앤드 포인트를 작성하는 곳입니다. 앤드 포인트란 슬래쉬 (/) 다음으로 오는 무엇이든 앤드포인트라고 부릅니다.

 

예를 들어서 /hello /hi 여기에서 hello 랑 hi는 앤드 포인트라고 합니다.

 

웹서버에서의 위치라고 생각하시면 되요. 우리는 여기에서 함수나 꽤 다양한 로직을 활용하여 앤드 포인트를 꾸밀 수 있습니다.

 

 

api2/views.py

 

함수 하나를 생성했습니다. 이 함수는 request를 필수적인 파라미터로 받아야합니다.

 

이 함수는 간단하게 response 를 보내줍니다. 우리가 웹서버를 가지고 있을 때, 들어오는 request는 앤드 포인트로 가게 되고 앤드 포인트는 response 를 돌려보내줍니다.

 

response 는 어떠한 포멧형태로 되어 있을거에요.

 

Jason , HTML 과 같은 포멧으로 되어있을 수도 있어요. 우리가 웹페이지에 렌더링하는 것들입니다.

music_controller / urls.py

 

HttpResponse 를 import 하고 아까 만들어둔 main 함수에 “Hello”값이라는 간단한 텍스트를 리턴했습니다.

 

저희는 response 값으로 Hello를 주었고, 이제 우리에게 필요한건 이 함수를 가리키는 Url 을 어떻게 만드는지 입니다.

api2 폴더에서 urls.py 파일을 생성해줍니다.

 

맨 처음에 생성했던 music_controller 라는 폴더안에 urls.py 라는 파일이 있는데요,

 

여기는 저희가 만들 사이트의 기본적인 url들을 관리하는 곳이라고 생각하시면 될거 같아요.

 

방금 생성한 api2 의 urls.py 를 사용하고 싶다면 여기 메인 urls 파일로 와서 경로를 지정해줘야해요.

 

api2에서 지정한 url을 쓰고 싶으니까 urlpatterns 에서 path를 추가해주는거죠.

 

django.urls 에서 include 를 import 하고 include(”내가 사용할 urls 파일의 이름”) 이런 식으로 먼저 요기 파일에 저장을 해줘야합니다.

 

path("api2/", include("api2.urls")

이렇게 경로를 “api2/“ 로 바꿔주고 api2.urls 까지 include 를 시켜주고

api2 에 생성한 Urls.py 파일에서 from .views import main 을 통해 아까 저희가 만들었던 함수를 가져와주고 urlpatterns 에서 path(”home”, main ) 을 지정해줍니다.

 

path 다음 첫번째 인자는 url 주소라고 생각하시면 되요.

 

아까 메인 url 파일과 조금 헷갈릴 수 있는데, 메인 url에서 지정을 한 경로는 가장 기본 경로 입니다.

 

이게 조금 헷갈리지만 최대한 쉽고 간단하게 설명하자면

메인 urls.py 이라는 파일에서는 반드시 모든 app들의 url들을( urls.py 파일 ) 등록해주어야 합니다.

 

메인 urls.py에서 첫 번째 인자는 “api2/” 라고 적었습니다. 또한 include 해준 파일 api2.urls 이 있죠?

 

이 문장의 의미는 api.urls에서 따로 정해준 url 주소들은 맨 처음에 “api2/” 로 시작을 해야한다는 의미입니다.

 

따라서 위의 코드처럼 api2.urls 에서 경로를 “home”이라고 두고, main 함수를 호출했으므로

 

지금 크롬창의 주소가 보이시나요??

/api2/home 요 경로로 가셔야만 Hello 를 볼 수 있습니다.

 


make migrations & migrate

 

  • 모델이나 데이터베이스를 수정했을 때는 python manage.py makemigrations/migrate 반드시 해줘야댐.

 

Python manage.py runserver 

 

Django 서버를 웹 브라우저에 띄워서 보고 싶을 때 

 


Abstract

 

1. django-admin startapp 앱 이름
2. configsettings -> added to project name: +[ 앱 클래스 이름.apps.mapsConfig]
3. create table in models -> migrations -> migrate -> admin.py
4. create urls.py in the maps directory
5. view

반응형