파이썬 웹 프레임워크 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

https://iamiet.tistory.com/21 

 

주의, 템플릿 변수는 주석 안에서도 인식됨

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 

jQuery 모바일용 터치슬라이드 플러그인 Swiper 39종

https://balmostory.tistory.com/181

[jQuery] 제이쿼리 cdn으로 사용하기

loopAdditionalSlides: 1  추가

 

 

컨테이너 안에서 스크롤

https://solbel.tistory.com/2156 

[html/css] div 태그에 세로영역 스크롤 생성하는 방법

플로팅버튼

https://whee.co.kr/%ED%94%8C%EB%A1%9C%ED%8C%85-%EB%B0%B0%EB%84%88-%EC%9E%90%EB%8F%99%EC%9C%BC%EB%A1%9C-%EB%94%B0%EB%9D%BC%EB%8B%A4%EB%8B%88%EB%8A%94-jquery-%EC%86%8C%EC%8A%A4/ 

 

$("#mobile").scroll(function() {
    // 현재 스크롤 위치를 가져온다.
    var scrollTop = $("#mobile").scrollTop();

스크롤 위치 받아오는 부분만 #mobile로 컨테이너 안쪽으로 제한함

css 코드에서 background color 제거하고 size 없앰

 

스크롤이쁘게

https://medium.com/spemer/customize-websites-scrollbar-with-css-270ca436d6c1

Customize website’s scrollbar with CSS

여기 css를 body::-web~ 에서 body 떼고 사용함

https://deliciousthemes.com/customize-browser-scrollbars-using-css3-jquery/ 

How to Customize Browser Scrollbars Using CSS3 and jQuery

흰색 불투명 블러 (class backdrop)

https://blogpack.tistory.com/850 

CSS 1줄 코딩으로 반투명 유리 배경 효과 구현하기(backdrop-filter)

객체 간 간격(CSS flex)

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

 

로그인/회원가입/회원정보 페이지 로직 수정 -> 원래 로그인 되어있으면 Welcome! 하고 로그아웃 페이지 띄워줬는데

1) HTML에서 /로 이동하려면 {% url %}을 써야하는데 후에 렌더링되는 Javascript를 사용하면 제대로 안됨

2) meta나 head 태그 사용하면 {% if %}를 인식하기도 전에 렌더링되어서 정상 작동이 안됨

 

3) views.py에서 직접 수정 -> if request.user.is_authenticated: 를 사용함

(일반적인 django 회원가입으로 치면 이거 적용한 곳은 거의 없어서...

나름 로직 생각해서 "django 로그인한 사용자 확인" 으로 검색하면 됨)

 

**지금 로그인이 view가 아닌 내장 django 기능으로 구현되어 있어서...

https://velog.io/@joygoround/django-%EC%A0%90%ED%94%84-%ED%88%AC-%EC%9E%A5%EA%B3%A0-%EC%9E%A5%EA%B3%A0-%EC%8B%AC%ED%99%94-5-6 

[django] 점프 투 장고 - 장고 심화 5

auth_views.LoginView.as_view()라는데...우리 코드는 urls.py에 아무것도 없음. 대체 어디로 연결되어있는거임?

파일 검색 - login.html 검색

site-packages - django - contrib - auth - views.py - LoginView에 있군..

음........로그인은 그냥 냅두는게 낫겠다.

 

CSS 수정했으면...새로고침 꾹 눌러서 해당 페이지만 캐시 비우기

https://minggu92.tistory.com/59 

[Web] 캐싱된 유저 CSS 파일 강제 재로딩(캐시방지처리) -1

컨테이너 안에서 헤더 고정하기

fixed 대신 sticky 쓰면 됨

https://inpa.tistory.com/entry/CSS-%F0%9F%93%9A-%EC%9C%84%EC%97%90-%ED%97%A4%EB%8D%94%EB%A5%BC-%EA%B3%A0%EC%A0%95%ED%95%98%EC%9E%90-%F0%9F%8E%A8-sticky-position

[CSS] 📚 위에 헤더를 고정하자 🎨 sticky position

 

상위 태그에서 배경 색 background-color 적용하면 하위에서 background-color 적용 못함 (통일 태그임)

https://homzzang.com/b/css-32

홈짱닷컴

이걸 해결하기 위해서 그냥 배경 색을 별도의 영역으로 구성함 - 정확한 위치에 겹치기 위해서

부모 태그 relative, 자식 태그 absolute

https://dazzlynnnn.tistory.com/entry/CSS-position%EC%9C%BC%EB%A1%9C-%EC%9A%94%EC%86%8C-%EA%B2%B9%EC%B9%98%EA%B8%B0

이렇게 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/ 

회원가입 페이지 구현하기 : select로 이메일과 생년월일 입력

회원가입 - 비밀번호 체크

알아서 구현함

 

토글버튼에 따라 보였다가 안보였다가..

https://zero-gravity.tistory.com/244 

[jQuery] 체크박스 체크 혹은 체크 해제 시 이벤트 발생.

Tip) 라디오 버튼 주의!!!

같은 품목 내에서 name을 동일하게 해야 함 (안그러면 다중 선택 됨)

 

이미지를 라디오 버튼으로 만들기

https://codepen.io/imran1010/pen/xyzeJj 

Radio Button with Image VISA/MASTER

라디오 버튼 없애버리기 => 체크박스는 [name=allergies]로 적용함

https://coding-nyan.tistory.com/36

Radio label 이미지 추가하기

버튼 테두리만 그라데이션 적용하기

https://limqoh.tistory.com/entry/web05 

[HTML+CSS] border에 그라데이션 넣기

Tip) CSS 속성에 !important 적으면 상위 속성보다 높은 순위로 적용됨

Tip) 해당 요소에 어떤 CSS가 적용되었는지 보려면 Styles에 가서 보면 됨

또는 Computed 아래에 적용된 속성이 정리되어 있음

Tip) CSS 속성에서

붙여쓰기 = AND

공백 및 쉼표(,) = OR

 

https://saimplay.tistory.com/79

[ CSS 입문 ] 다중 조건 선택자

Tip) <script> 태그에서 오류나는 태그를 썼을 경우 그 줄부터 안되니까 정상 코드를 위로 올리면 정상 코드는 정상 동작함

 

하단바 만들기: 상단바랑 똑같이 모바일 컨테이너 안에서 작동해야 하기 때문에 sticky 쓸 수 밖에 없음

근데 화면 높이가 100%가 아니면 하단바가 말려 들어오는 상황이 발생...

<div> 영역 새로 만들어서 최소 높이 지정해줌

https://query.tistory.com/entry/CSS-%ED%99%94%EB%A9%B4-%EA%B0%80%EB%93%9D-%EB%86%92%EC%9D%B4-%EC%84%A4%EC%A0%95-%EB%B0%A9%EB%B2%95

[CSS] 화면 가득 높이 설정 방법

 

 

드롭다운 만들었더니 이상한 애들 발생..CSS에도 없고...개빡침ㅋㅋ

a.nav-link.dropdown-toggle::after

after는 개발자모드에 잡혀서 해당 css로 가서 다 삭제해주면 되는데 caret이 간접 import 되어있다면 삭제하지도 못함

그냥 저거 복붙해서 수정할 수 있는 css 파일에서 값을 다 무효화시켜주면 됨;

 

카메라 연결하기

https://cofs.tistory.com/180

android html5 스마트폰 카메라와 연결하기, 사진(갤러리) 및 동영상 찍기 예제 ( URL.createObjectURL )

안이쁜 파일업로드 버튼 커스터마이징

안이쁜 기본 버튼은 죄다 label로 선택하게 하면 되는 것 같다

https://helloinyong.tistory.com/275

input type="file" 커스터마이징 하는 방법

1)

폼을 사용하지 않고 자바스크립트를 사용한 파일 업로드로

메인 화면에서 바로 서버에 저장하고 다음 페이지로 리다이렉트하기

로딩화면에서 백엔드 작업 수행할 수 있게 깔아주기

결과화면 출력 필요

 

근데 하나의 화면에서 바로 서버에 저장하기가..쉽지 않은 듯 함

 

2)

폼을 사용하여 자바스크립트가 파일명, 확장자, 크기 등 검증하고 폼을 자동으로 제출하게 하기

action은 upload이되 업로드하고 redirect까지 할 수 있나?

로딩화면에서 백엔드 기능수행 (수행 순서대로 로딩 바 표시해주기)

그 다음 결과화면 출력

https://velog.io/@choral/%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C 

파일 업로드

파일 업로드2

django에서 죄다 파일 업로드 하면 forms 써서 폼 태그를 이쁘게 못만들었는데.. 아래 링크에서 발견

https://domdom.tistory.com/entry/django-%EC%9E%A5%EA%B3%A0%EC%97%90%EC%84%9C-%EC%82%AC%EC%9A%A9%EC%9E%90%EA%B0%80-%EC%97%85%EB%A1%9C%EB%93%9C%ED%95%9C-%ED%8C%8C%EC%9D%BC-%EC%A0%80%EC%9E%A5%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

https://nbkw.tistory.com/159 

// 파일 데이터 받아서 처리하기
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 

자바스크립트 차트 라이브러리 추천, amCharts4

https://www.amcharts.com/demos/wheel-of-life/

Interactive Wheel of Life - amCharts

개빡치는 점: 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/@mmy789/Django-AbstractUser%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4%EC%84%9C-%EC%9C%A0%EC%A0%80-%EB%AA%A8%EB%8D%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0 

https://velog.io/@wkdgus7113/Django-UserModel-%ED%99%95%EC%9E%A5-feat.-AbstractUser

 

DB오류

https://codeutility.org/python-how-to-fix-field-defines-a-relation-with-the-model-auth-user-which-has-been-swapped-out-stack-overflow/ '

특히

from django.contrib.auth import get_user_model

User = get_user_model()

https://healthdevelop.tistory.com/entry/Python-djangodbutilsOperationalError-no-such-table-usersuser-%EC%98%A4%EB%A5%98%ED%95%B4%EA%B2%B0-2

 

form.cleaned_data.get('id')

https://tothefullest08.github.io/blog/page26/ 죽겠다.. 이거 하면 고쳐질것같긴한데...