포트폴리오 만들기!
여러가지 파일을 다뤄보는 것이 목표!
만들녀석
포트폴리오 배너를 클릭하면, 내가 넣은 사진과, 글이 보이도록 만들자.
Django 에서 다루는 파일의 종류
Static File
미리 서버에 저장되어 있는 파일
서버에 저장된 그대로를 서비스해주는 파일
Dynamic File
서버의 데이터들이 어느정도 가공된 다음 서비스되는 파일
상황에 따라 받는 내용이 달라질 수 있음
정적 파일
정적파일의 종류
Static
프로젝트 입장에서 이미 뭔지 아는 파일
개발할 때 미리 준비해둔 파일
미리 준비해둔 사진을 띄우는 일
media
웹 서비스 이용자들이 업로드하는 파일
사진 업로드 하기
이제 Bold 처리된 두가지를 지금 해보자!
Static 파일의 처리 과정
- Static 파일들의 위치 찾기
- Static 파일들을 한 곳에 모으기
우리가 해야할 일
- Static 파일들을 담을 폴더 만들기
- Static 파일이 어디 있고, 어디로 모을지 알려주기
- 모으기
이걸 장고에서 가능하게 하려면!
- App을 만들기
- 그 APP폴더 안에 Static 폴더를 만들고 파일 넣기
settings.py에 Static 파일이 어디있는지, 어디로 모을지 알려주기$ python manage.py collectstatic명령어를 치면 모아준다!- 이제
html에서 이 static 파일을 사용하려면, 선언하고 사용하면 된다.
실습
포트폴리오 사이트를 어떻게 보여줄 건지 부트스트랩에서 가져오자.
https://getbootstrap.com/docs/4.3/examples/album/
이녀석을 사용했다.
앱을 만들어야 되기 때문에,
$ python manage.py startapp portfolio로 만들어주자.
앱을 만들었으면! 만들었다고 알려줘야해!
엄청 귀찮은 상사settings.py에 가서 알려주자.# settings.py INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'blog.apps.BlogConfig', 'portfolio.apps.PortfolioConfig', # , 조심! ]포트폴리오라는.앱의.환경설정부분을 가져와
라는 의미
이제 이녀석을 통해 화면을 보여줄 것이기 때문에 templates 폴더를 만들어주자.
이 녀석을 보여줄
portpolio.html을 templates 폴더안에 만들어주자.이 안에 부트스트랩에서 소스를 긁어 붙여넣어 주자.
이 녀석은 근데 어디서 이 클래스들이 적용되었는지에 대한 정보가 없으니, CDN을 설정해줘야한다.
home.html에서도 부트스트랩을 사용했으니, 여기서 썼던 놈들을 다 긁어서 head 태그 안에 넣어주자.<head> <!-- bootstrap CDN--> <link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </head>이런식으로.
그럼 이녀석을 보여주려면 url을 만들어줘야 우리가 들어올 수 있다.
urls.py로 가보자.# urls.py from django.contrib import admin from django.urls import path import blog.views import portfolio.views ##### 이녀석 빼먹지 말자! 그래야 url 접속하면 어디로 보낼지 알려줄 수 있엉 urlpatterns = [ path('admin/', admin.site.urls), path('', blog.views.home, name = "home"), path('blog/<int:blog_id>', blog.views.detail, name = "detail"), path('blog/new', blog.views.new, name = "new"), path('blog/create', blog.views.create, name = "create"), path('portfolio/', portfolio.views.portfolio, name = "portfolio"), # 이녀석 추가! ]/portfolio라는 주소로 들어왔을 때, 어떻게 할 건지 설정해 줘야 한다.여기서
portfolio.views를 import 하는 것 까먹지 말자!그러면 이제
views.py를 손봐줘야 한다.이건
portfolio앱 안의 views 야!# portfolio.views.py from django.shortcuts import render def portfolio(request): return render(request, 'portfolio.html') # Create your views here.일단은 눌렀을 때, 띄워주기만 하면 되니까 이렇게 작성하자.
그런데 어떤 버튼을 눌렀을 때, 가는지 설정을 안해줬다!
그건 home 화면에서 했으니
blog.templates.home.html로 가자.<!-- blog.templates.home.html --> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="{% url 'portfolio' %}">portfolio</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div>드랍다운 부분을 바꿀 거니까, 드랍다운의 첫번째 요소를 portfolio로 이름을 바꿔준뒤,
url부분을 내가 원하는 곳으로 바꿔주자!
여기까지하고 서버를 돌리면 템플릿이 아마 출력이 될 것임!
자
portfolio.html카드가 너무 신경쓰이니까 하나빼고 지워버리자.내가 static 파일을 만들려면 이걸 담을 폴더가 필요하다고 했다.
static폴더를 만들어주자.여기에 내가 넣고 싶은 파일을 추가해주자!
그럼 static 폴더가 어디있는지 알려줘야 한다.
이것도 역시나 settings.py 에서 설정해주면 된다.
맨 밑으로가면 이런 녀석이 있다.
# settings.py STATIC_URL = '/static/'이 밑에 우리가 설정을 해주면 되는데,
# settings.py STATIC_URL = '/static/' # static file 들이 현재 어디에 있는지를 쓰는 곳 STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'portfolio', 'static') ] # static file들이 어디로 모일 것인지를 쓰는 곳 STATIC_ROOT = os.path.join(BASE_DIR, 'static')근데 왜 다시 모아줄까??
이건 이후에 다시 설명할것이니까 그냥 지나가보자!
자 이제 다 알려줬으니, 이걸 모아줘! 라는 명령어를 쳐보자!
$ python manage.py collectstaticFound another file with the destination path '킹밥2.png'. It will be ignored since only the first encountered file is collected. If this is not what you want, make sure every static file has a unique path. Found another file with the destination path '킹밥.jpg'. It will be ignored since only the first encountered file is collected. If this is not what you want, make sure every static file has a unique path. 121 static files copied to '/Users/Choiwansik/GooglePrivate/BlogPosting/Programming/LIKELION/Webcode/second/static'.이런 식으로 뜨는 것을 확인할 수 있다.
이 작업을 완료하고 나면 최상위 폴더에 (내가 만든 프로젝트에서) static 이라는 폴더가 생성된 것을 볼 수 있다.
이렇게!
이제 이 static 파일을
portfolio.html에 적용해보자!그전에! 이 static 파일을 사용하겠다고 선언해줘야 한다.
html에서는 어떻게 선언해주지?
<!-- portfolio.html --> {% load staticfiles %}이렇게 템플릿 태그로 감싸고 저 문장을 써주면 된다.
이제
portfolio.html에서 사진이 어디에 들어가야되는지 확인하자. 아마 card 클래스 부분을 찾으면 될거야<!-- portfolio.html --> <div class="row"> <div class="col-md-4"> <div class="card mb-4 shadow-sm"> <!-- 이 녀석인것 같아! 여기에 이미지를 넣어주자! --> <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"> <title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> <!-- 여기서 부터는 카드 바디 --> <div class="card-body"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <div class="d-flex justify-content-between align-items-center"> <div class="btn-group"> <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> <small class="text-muted">9 mins</small> </div> </div> </div> </div>여기서 이미지가 들어갈 부분에 img 태그를 사용해서 저 썸네일 사진 대신 내가 원하는 이미지를 넣어주자.
<!-- portfolio.html --> <img src = "{% static '킹밥.jpg' %}" height = 400 alt = "기본사진">경로설정에 static 파일을 사용할 것이라고 한번더 명시를 해준다음에 그 안에있는 파일명을 적어주자.
alt 에는 이 이미지가 없을 경우 어떤 녀석을 넣어줄지 적어두는 자리이다.
습관적으로 이녀석을 해주도록 하자.
그리고 아까 썸네일은 지우자. 그리고 서버를 돌려보면!
내사랑 미니언이 뙇!
왜 굳이 파일을 모아서 관리할까?
지금은 portfolio 라는 하나의 앱에서 필요한 static 파일만을 다루기 때문에, 이 작업을 왜하는지 이해가 안갈 수 있다.
하지만 단적인 예로, 다른 기능을 구현한 또다른 html을 보여주고 싶다고 하자.
여기도 static 파일은 필요할 수 있다.
그렇다면 여러개의 앱에서 생기는 static 파일을 경로를 들어갔다 나왔다하는 비용보다
이것을 총괄해줄 수 있는 폴더를 만들고 그곳에서만 관리하는게 훨씬 효율적일 것이다!
그래서 모아주는 작업을 한다고 생각하면 된다.