R136A1
파이썬 웹 프레임워크 django 개발 본문
2021-10-02 02:32 첫 작성
python manage.py makemigrations 앱 이름
앱 이름을 지정해줘야만 적용되는 경우도 있으니 참고.
python manage.py runserver
새로운 앱 시작하기
django-admin startproject analyzer
python manage.py startapp 앱 이름
루트 디렉터리 settings.py - INSTALLED_APPS에 등록해주기
루트 디렉터리 urls.py - urlpatterns에 등록해주기
앱 디렉터리 urls.py - urlpatterns에 기본 경로 등록해주기
ㄴ이름에 맞게 views 만들어주기
루트 urls.py의 include
path('accounts/', include(('django.contrib.auth.urls', 'auth'), namespace="auth")),
include 2개 하고싶으면 튜플 사용 (하나의 namespace에 2개의 app를 전달해야할 경우)
path('accounts/', include(('accounts.urls'), namespace="accounts")),
# 중복도 가능...? 사실 여기 좀 이상함
urls.py
views._______.as_view()
ㄴ def ___(): return render(~)라면 as_view() 안써도 됨 / class라면 써야함
url 경로 아래와 같이 설정하기
article/3
article/25
urls.py
path('경로/<int:변수명>', views.____, ...)
views.py
def _____(request, 변수명):
나는 if elif 문을 사용해서 하위 def 로 연결시켰는데... 이게 효율적이라고 말하기엔 ㅎ;;
정규식
urls.py에서 경로를 지정할 때 자주 사용
r'^시작/(정규식)/$'
슬래시(경로)
r'^app/'
app으로 시작하는 것 전부
for
for
for in 딕셔너리=키 / 배열=index // 객체[_____]
for of 이터러블 순회 (String, Array, Map, Set, ...)
배열.forEach((value, index.array) => console.log('${index}:{value)');}
bootstrap 조절
class="w-100" 으로 크기 조절
style="float:right" 로 버튼 이동
데이터 넘기기
views.py
return render(request, '대상.html', {'변수명': 데이터,})
대상.html
{{ 변수명 }}
url name space
등록하기
1) 프로젝트 > urls.py
path('앱/', include('앱.urls', namespace="네임스페이스명"))
2) 앱 > urls.py
app_name = "네임스페이스명" 적기
urlpatterns=[
path("경로명/", views.____, name="이름") # 여기의 이름이 해당 경로의 이름이 됨 (내부 name)
...
]
사용하기
templates에서 사용하기
{% url '앱:이름' %} 사용
r^_/<num>과 같이
변수 있으면 {% url '앱:이름' 변수=값 %} 으로 사용
app name 없는 상태에서 내부 name은 {% url 'create' %} 이렇게
app name 추가하면 내부에서도 {% url '앱:create' %} 로 적어야 함
view에서 사용하기
redirect('앱:이름') 형태
redirect('main:index')
redirect({% url '앱:이름' %}) 형태 아님
https://dev-navill.tistory.com/23
템플릿 변수
{% static 템플릿 태그 안에서 변수 사용하기 {{ 변수명 }}
{% static 'main/img/UI/TOMATO.png'%}
=> {% get_static_prefix %}main/img/UI/{{ allergy }}.png
주의, 템플릿 변수는 주석 안에서도 인식됨
javascript - document.~
var 변수 = document.getElementById("요소")
변수.innerHTML = "<b><font color='red'>"+js함수+"</font></b>" 가능
속성추가] 변수.setAttribute("요소", "값")
CSS추가] 변수.style.요소 = "값"
-----------------------
document.getElementById("test").innerHTML = "~"
# id=test인 태그를 받아와 그 안을 교체한다
document.getElementById("test").outerHTML = "~"
# 본 태그까지를 범위로 하여 모두 교체된다
document.write(식)
초기화 이루어진 후 = innerHTML을 사용해야 교체 가능
초기화 이루어지기 전 = write 사용
-----------------------
javascript인 innerHTML에서 {% %} 문법 사용 불가 → 나중에 호출되는 client 언어이기 때문임
goorm 컨테이너 바꾸고싶으면 - 코드 그대로 재활용하고싶으면 아래 .py에서 JBSWU만 유의해서 죄다 복사하면 됨
JBSWU (메인 폴더)아래에 있는 파일들만 유의해서 수동으로 복붙
슬라이더
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=arman52&logNo=221061061165
https://balmostory.tistory.com/181
loopAdditionalSlides: 1 추가
컨테이너 안에서 스크롤
https://solbel.tistory.com/2156
플로팅버튼
$("#mobile").scroll(function() {
// 현재 스크롤 위치를 가져온다.
var scrollTop = $("#mobile").scrollTop();
스크롤 위치 받아오는 부분만 #mobile로 컨테이너 안쪽으로 제한함
css 코드에서 background color 제거하고 size 없앰
스크롤이쁘게
https://medium.com/spemer/customize-websites-scrollbar-with-css-270ca436d6c1
여기 css를 body::-web~ 에서 body 떼고 사용함
https://deliciousthemes.com/customize-browser-scrollbars-using-css3-jquery/
흰색 불투명 블러 (class backdrop)
https://blogpack.tistory.com/850
객체 간 간격(CSS flex)
https://studiomeal.com/archives/197
로그인/회원가입/회원정보 페이지 로직 수정 -> 원래 로그인 되어있으면 Welcome! 하고 로그아웃 페이지 띄워줬는데
1) HTML에서 /로 이동하려면 {% url %}을 써야하는데 후에 렌더링되는 Javascript를 사용하면 제대로 안됨
2) meta나 head 태그 사용하면 {% if %}를 인식하기도 전에 렌더링되어서 정상 작동이 안됨
3) views.py에서 직접 수정 -> if request.user.is_authenticated: 를 사용함
(일반적인 django 회원가입으로 치면 이거 적용한 곳은 거의 없어서...
나름 로직 생각해서 "django 로그인한 사용자 확인" 으로 검색하면 됨)
**지금 로그인이 view가 아닌 내장 django 기능으로 구현되어 있어서...
auth_views.LoginView.as_view()라는데...우리 코드는 urls.py에 아무것도 없음. 대체 어디로 연결되어있는거임?
파일 검색 - login.html 검색
site-packages - django - contrib - auth - views.py - LoginView에 있군..
음........로그인은 그냥 냅두는게 낫겠다.
CSS 수정했으면...새로고침 꾹 눌러서 해당 페이지만 캐시 비우기
https://minggu92.tistory.com/59
컨테이너 안에서 헤더 고정하기
fixed 대신 sticky 쓰면 됨
상위 태그에서 배경 색 background-color 적용하면 하위에서 background-color 적용 못함 (통일 태그임)
이걸 해결하기 위해서 그냥 배경 색을 별도의 영역으로 구성함 - 정확한 위치에 겹치기 위해서
부모 태그 relative, 자식 태그 absolute
이렇게 background-color가 제대로 적용되지 않는 것 같으면 부모태그를 절찬 의심해보자...
(저번에 설정한 스크롤도 배경색이랑 분리해놓으니까 잘 됨)
그리고 background-color가 먹히지 않는 두번https://choiiis.github.io/web/toy-project-sign-up-and-in-page-2/째 이유: width, height를 설정해주지 않아서 일수도 있음
회원가입 - 이메일 편리하게
회원가입 - 생년월일 입력 편리하게
https://choiiis.github.io/web/toy-project-sign-up-and-in-page-2/
회원가입 - 비밀번호 체크
알아서 구현함
토글버튼에 따라 보였다가 안보였다가..
https://zero-gravity.tistory.com/244
Tip) 라디오 버튼 주의!!!
같은 품목 내에서 name을 동일하게 해야 함 (안그러면 다중 선택 됨)
이미지를 라디오 버튼으로 만들기
https://codepen.io/imran1010/pen/xyzeJj
라디오 버튼 없애버리기 => 체크박스는 [name=allergies]로 적용함
https://coding-nyan.tistory.com/36
버튼 테두리만 그라데이션 적용하기
https://limqoh.tistory.com/entry/web05
Tip) CSS 속성에 !important 적으면 상위 속성보다 높은 순위로 적용됨
Tip) 해당 요소에 어떤 CSS가 적용되었는지 보려면 Styles에 가서 보면 됨
또는 Computed 아래에 적용된 속성이 정리되어 있음
Tip) CSS 속성에서
붙여쓰기 = AND
공백 및 쉼표(,) = OR
https://saimplay.tistory.com/79
Tip) <script> 태그에서 오류나는 태그를 썼을 경우 그 줄부터 안되니까 정상 코드를 위로 올리면 정상 코드는 정상 동작함
하단바 만들기: 상단바랑 똑같이 모바일 컨테이너 안에서 작동해야 하기 때문에 sticky 쓸 수 밖에 없음
근데 화면 높이가 100%가 아니면 하단바가 말려 들어오는 상황이 발생...
<div> 영역 새로 만들어서 최소 높이 지정해줌
드롭다운 만들었더니 이상한 애들 발생..CSS에도 없고...개빡침ㅋㅋ
a.nav-link.dropdown-toggle::after
after는 개발자모드에 잡혀서 해당 css로 가서 다 삭제해주면 되는데 caret이 간접 import 되어있다면 삭제하지도 못함
그냥 저거 복붙해서 수정할 수 있는 css 파일에서 값을 다 무효화시켜주면 됨;
카메라 연결하기
안이쁜 파일업로드 버튼 커스터마이징
안이쁜 기본 버튼은 죄다 label로 선택하게 하면 되는 것 같다
https://helloinyong.tistory.com/275
1)
폼을 사용하지 않고 자바스크립트를 사용한 파일 업로드로
메인 화면에서 바로 서버에 저장하고 다음 페이지로 리다이렉트하기
로딩화면에서 백엔드 작업 수행할 수 있게 깔아주기
결과화면 출력 필요
근데 하나의 화면에서 바로 서버에 저장하기가..쉽지 않은 듯 함
2)
폼을 사용하여 자바스크립트가 파일명, 확장자, 크기 등 검증하고 폼을 자동으로 제출하게 하기
action은 upload이되 업로드하고 redirect까지 할 수 있나?
로딩화면에서 백엔드 기능수행 (수행 순서대로 로딩 바 표시해주기)
그 다음 결과화면 출력
파일 업로드2
django에서 죄다 파일 업로드 하면 forms 써서 폼 태그를 이쁘게 못만들었는데.. 아래 링크에서 발견
// 파일 데이터 받아서 처리하기
const elImage = document.querySelector("#camera1");
elImage.addEventListener("change", (evt) => {
const image = evt.target.files[0];
document.getElementById('ImageUpload').submit();
});
<form method="post" class="post-form" id="ImageUpload" enctype="multipart/form-data" action="{% url 'analyzer:analysis' %}">
<input type="file" id="camera1" name="camera1" capture="camera1" accept="image/*" style="display:none;"/>
if 'camera1' in request.FILES.keys():
file = request.FILES['camera1']
fs = FileSystemStorage()
filename = fs.save(file.name, file)
return render(
request,
'analysis.html',
)
elif 'camera2' in request.FILES.keys():
file = request.FILES['camera2']
fs = FileSystemStorage()
filename = fs.save(file.name, file)
return render(
request,
'analysis.html',
)
else:
return 0
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=tk2rush90&logNo=221610961556
https://www.amcharts.com/demos/wheel-of-life/
개빡치는 점: Javascript Demo Source 저 창에서 바로 복붙했더니 뭔 setValue가 정의되지 않았다느니 하는 소리 해서 1시간동안 잡고있었는데 Open in: 구름모양(https://jsfiddle.net/api/post/library/pure/) 해서
<style>
<html>
<script>
순서로 넣었더니 바로 됨(빡치지만 그래도 괜찮아..^^)
배치가 비교적 자유롭지 않은데, 아래와 같이 absolute(부모 상속 위치)에서 상대적으로 배치하면 됨
#chartdiv {
position: absolute;
top: 6px;
left: -30px;
width: 300px;
height: 300px;
font-size:6px;
}
회원정보 페이지 - 회원정보에 따라서 이미지 불러오기
[django Basic User Model]
기본적으로 제공하는 User model은 몇 가지의 기본 필드만 제공함
username
first_name
last_name
email
password
groups
user_permissions
is_staff
is_active
is_superuser
last_login
=> 자세한 정보를 저장하기 위해서는 커스텀 필요
[djnago Custom User Model] 여러 방법 중에서도 AbstractUser
=> 기본 User 모델의 동작은 그대로, 필드만 재정의할 때 사용
**다 완성될 때까지 migrate 금지
**migrate를 이미 한 경우 회원 관련 앱 migration 폴더 __pychae__와 __init__.py 제외하고 다 지우기
**DB DROP
1. 앱 > models.py에서
from django.contrib.auth.models import AbstractUser class User(AbstractUser): # 기본적으로 제공하는 필드 외에 원하는 필드를 적어준다. nickname = models.CharField(max_length=50) phone = models.PhoneNumberField(unique = True, null = False, blank = False)
[참고] 필드 목록
https://docs.djangoproject.com/en/4.1/ref/models/fields/#django.db.models.OneToOneField
2. 프로젝트 > settings.py에
AUTH_USER_MODEL = '앱이름.User' 추가
3. 앱 > admin.py에서
from django.contrib import admin from django.contrib.auth.admin import UserAdmin from .models import User admin.site.register(User, UserAdmin)
4. python manage.py makemigrations
python manage.py migrate 하고
python manage.py createsuperuser 로 관리자 만들고
python manage.py runserver해서
admin 페이지에서 db 보기
https://velog.io/@wkdgus7113/Django-UserModel-%ED%99%95%EC%9E%A5-feat.-AbstractUser
DB오류
특히
from django.contrib.auth import get_user_model
User = get_user_model()
form.cleaned_data.get('id')
https://tothefullest08.github.io/blog/page26/ 죽겠다.. 이거 하면 고쳐질것같긴한데...