본문 바로가기
프로젝트/Django - How Dimt?

Django poj.c B12) 에러 원인 해결, 프로필 업데이트 완성 - 22일차

by Fola 2022. 5. 9.

Code B Django 12번 글, 프로젝트 22일차 (월)

 

 

(캡쳐) 프로필 내용을 수정 할 수 있는 페이지

 

1.

정말, 너무, 아아아,

며칠간 고생한 게 허무해지는 순간이었다.

 

	if request.method == 'POST'

라고 적어야 할 코드를

 

	if request == 'POST

이렇게 작성했다.

 

왜 조금 더 일찍 발견하지 못했을까

 

위의 문제점을 발견 한 이후로는

모르는 부분을 하나씩 찾아가며 기능을 완성할 수 있었다.

 

 

 

 

 

2.

Django 의 ORM UPDATE 코드 예제는 절대다수가 {{ form.as_p }} 를 사용했다.

저 코드는 매우 단순하고 모든 필드의 업데이트 기능을 자동으로 제공하지만

내가 만든 디자인에 적용시킬 수는 없었다.

 

조금 더 매뉴얼 하게 사용하는 방법을 찾느라고 고생.

 

 

{{ form.as_p }} 을 대체할 수 있는 방법 - (1)

 

{{ form.필드이름 }} 을 사용하면 객체 필드 각각을

원하는 위치에 속성 업데이트 기능을 넣을 수 있다.

그러나 역시 CSS 스타일을 적용하기가 어려웠다.

 

 

{{ form.as_p }} 을 대체할 수 있는 방법 - (2)

 

모두 수동으로 설정하는 방법.

 

<p>프로필 배경 이미지 변경:
    <input type="file"
           name="wallpaper"
           id="wallpaper"
    >
</p>
<p>프로필 이미지 변경:
    <input type="file"
           name="image"
           id="image"
    >
</p>
<p>
    <label for="nickname">닉네임:</label>
    <input
            type="text"
            name="nickname"
            id="nickname"
            class="profile_update_text_input_css"
            autocomplete="off"
            value="{{ own_profile.nickname }}"
    >

form 태그 안에 name 값을 forms.Modelform 을 상속받은 form의 필드와 일치시키면

request 에 담긴 데이터를 장고 모델 폼에 넣을 수 있다.

 

 

 

 

 

 

3. 

Image 업로드 기능을 넣으면서 추가적으로 필요했던 코드

 

 

(1)

<form action="{% url 'profile:update' own_profile.user.username %}" method="POST"
      enctype="multipart/form-data">

이미지 또는 파일을 form에 담아 POST method로 전송할 때에는 enctype="multipart/form-data" 코드가 필요하다.

위의 코드를 사용한다, 필요하다 정도의 글 외에 정확한 원리를 설명하는 글은 아직 찾지 못했다.

multpart의 mult는 후술 할 request.POST 1개 이외에 request.FILES 를 포함한 두 가지 방식의 data 타입이 있다고 명시하는 게 아닐까 추측.

 

 

 

(2)

profile_form = ProfileUpdateForm(request.POST, request.FILES, instance=own_profile)

문자열이나 숫자 이외에 파일을 전송하게 되면 views 에서 request.POST 이외에 request.FILES 를 추가해주어야 한다.

파일은 request.POST 가 아닌 FILES 에 담겨 전송되는 것 같다.

 

 

 

 

 

 

 

4.

프로필 업데이트 기능을 겨우 마무리할 수 있었다.

이미지 업데이트 버튼이 디자인을 해쳐서 조금 신경 쓰이긴 하지만,

너무 많은 시간을 허비했기 때문에 일단 놔두고 다음 기능을 먼저 구현하는 것으로

 

다음 기능은 자유게시판.

댓글