'코딩 연습'에 해당되는 글 62건

admin에서 model 등록하기

• admin에 등록하고자하는 모델을 import한다.
• @admin.register() 장식자(decorator)를 사용하여 등록한다.
• 모델 클래스처럼 admin 클래스를 작성하고 별다른 변경사항이 없는 경우 pass 처리한다.

from django.contrib import admin
from .models import Post

@admin.register(Post)
class PostAdmin(admin.ModelAdmin):
	pass

모델에 저장된 data를 원하는 필드에 맞게 노출시키기

• list_display는 노출시키고자 하는 필드를 선택
• list_display_links는 등록한 필드의 데이터에 링크를 걸어 세부내역을 확인할 수 있다
• search_fields는 해당 필드의 데이터를 검색할 수 있게 해준다.

from django.contrib import admin
from .models import Post

@admin.register(Post)
class PostAdmin(admin.ModelAdmin):
    list_display = ['id', 'title']
    list_display_links = ['id', 'title']
    search_fields = ['title']

나는 Title, Top text, Author 3가지를 입력 받아 책 표지에 제목, 부제, 저자 형태로 출력할 수 있는 폼을 만들고 싶다.

1) [forms.py]를 앱 폴더에 추가하여 폼의 이름과 필드명, 데이터타입을 지정한다.

- 책의 표지에 쓸 데이터를 입력 받으므로 [CoverForm]으로 지정

- title, top_text, author 모두 문자로 입력 받을 것이므로 [CharField()]를 사용

from django import forms

class CoverForm(forms.Form):
    title = forms.CharField()
    top_text = forms.CharField()
    author = forms.CharField() 

2) [forms.py]에서 만든 [CoverForm]을 import하여 [views.py]에서 로직을 임시로 작성한다.

- [CoverForm()]을 변수 [form]에 담아 context(ctx)를 통해 [index.html]로 render한다.

from django.shortcuts import render
from .forms import CoverForm

# Create your views here.
def index(request):
	form = CoverForm()
    ctx = {
        'form' : form,
    }
    return render(request, 'cover/index.html', ctx)

3) [index.html]에서 <form>태그를 작성한다.

- 우리가 웹브라우저에서 볼 수 있는 모양의 폼을 드디어 만든다.

- [action=""]은 입력 받은 데이터를 현재 페이지에서 처리하도록 한다.

- [method="post"]는 데이터를 저장할 수 있게 처리를 해주는 메소드이다.

- 따라서 폼을 통해 입력한 데이터를 현재 페이지에 전송하여 DB로 저장할 수 있게 기본 세팅을 하는 것이다.

<form action="" method="post">
    {% csrf_token %}
      {{ form }}
    <input type="submit" value="Generator O RLY">
</form>

짜잔, 완성된 폼이다. 

<table> 태그를 활용하여 줄바꿈을 할 수 있다. 

<form action="" method="post">
    {% csrf_token %}
    <table>
      {{ form }}
    </table>
    <input type="submit" value="Generator O RLY">
form>

4) [views.py]에서 다시 로직을 구체적으로 구성한다.

- 웹브라우저에서 입력 받아 전송된 데이터를 [index 함수]를 통해 가공을 거친다.

- [CoverForm(request.POST)]는 폼과 폼에 입력된 데이터를 포함하고 있다.

- [is_valid() 메소드]는 데이터의 유효성을 검사하는데, [CharField()]에 해당하는지 검증하는 것이다.

- [cleaned_data]는 데이터를 딕셔너리 타입으로 제공하도록 해준다. 

- 완료시 cover 앱의 index 이름의 URL로 redirect시킨다. 

from django.shortcuts import render
from .forms import CoverForm

# Create your views here.
def index(request):
    if request.method == "POST":
        form = CoverForm(request.POST)
        if form.is_valid():
            form.cleaned_data
            return redirect('cover:index')
    else:
        form = CoverForm()

    ctx = {
        'form' : form,
    }
    return render(request, 'cover/index.html', ctx)

이 에러 때문에 얼마나 고생했던지 수명이 짧아졌을 정도다.
구글링을 하면 대부분이 .py파일을 .txt파일로 실행한 경우에 에러가 발생하는데,
나와 같은 경우 Django로 만든 웹사이트를 runserver하면 명령프롬프트에서는 해당 에러가 나타나고,
웹브라우저에서는 A server error occurred. Please contact the administrator.라는 문장이 노출되었다.
디버그 화면이 나와야하는데 그렇지 않아서 어떻게 손을 써야할지 몰랐다.
사실 힌트는 이미 수십번 찾았다.

open(encoding="utf-8")

템플릿의 유니코드를 utf-8로 인코딩해주는 짧은 코드를 적재적소에 작성하면 되는 것이다.
그 적재적소를 찾는데 오랜 시간이 걸린 것 같다.
[https://chibychi.blogspot.com/2019/04/django-unicodedecodeerror.html?showComment=1556001026219#c6818858330997373051\](https://chibychi.blogspot.com/2019/04/django-unicodedecodeerror.html?showComment=1556001026219#c6818858330997373051)
바로 이 분 덕분에 정확한 위치를 찾아서 코드를 집어넣었다.

가상환경 폴더에서 Lib\site-packages\django\views\debug.py를 찾아

def get_traceback_html(self):
    """Return HTML version of debug 500 HTTP error page."""
    with Path(CURRENT_DIR, 'templates', 'technical_500.html').open() as fh:
        t = DEBUG_ENGINE.from_string(fh.read())
    c = Context(self.get_traceback_data(), use_l10n=False)
    return t.render(c)

비어있던 open() 메서드에 encoding="utf-8"을 기입했다.

def get_traceback\_html(self): 
    """Return HTML version of debug 500 HTTP error page.""" 
    with Path(CURRENT_DIR, 'templates', 'technical_500.html').open(encoding="utf-8") as fh: 
        t = DEBUG\_ENGINE.from_string(fh.read()) 
    c = Context(self.get_traceback_data(), use_l10n=False) 
    return t.render(c) 

가상환경 활성화를 꼭 잊지 않고 실행해야한다.

강의를 따라 만든 블로그에서 혼자서 새로운 기능 추가하기

• 원하는 기능: Django Admin에서 카테고리를 선택하는 것을 폼을 통해 만들고 싶었다
  

HTML Form 요소들 중에 <select> 요소 사용하기

• HTML Form 요소들을 확인해볼 수 있다. (https://www.w3schools.com/html/html_form_elements.asp)
  

• <select> 요소를 사용하면 drop-down list 형태로 만들 수 있다.

• selected 속성은 옵션을 우선 선택해놓게 한다. 나의 경우 "Category"를 지정했다.

• disabled 속성은 해당 옵션이 사용되지 않도록 한다. 따라서 "Category"는 타이틀 역할이다.
  

• 완성된 모습이다. 기본값처럼 Category가 보이지만 옵션을 disabled한 상태이므로 실제로 선택은 되지 않는다.

Component State는 컴포넌트 안에서 쓸 수 있는 객체이다.

그리고 this.setState()를 활용하여 리액트만의 장점을 확인해보자

App 컴포넌트 밖에 있던 movies 객체를 컴포넌트 안에 위치한 state에 담았다.

• state는 컴포넌트 안에서만 쓸 수 있는 객체이다.

• 특이점은 함수를 통해 state에 담긴 값이 변경될 경우 자동으로 render() 메소드를 재실행시킨다.

마운트 후 componentDidMount() 메소드가 호출된다.

• setTimeout()은 this.setState()를 원하는 시간(5000=5초)이 지나서 호출되도록 하기 위함이다.
• () => {}은 function(){}과 동일한 내용이다.
• ...this.state.movies를 기존 데이터인 moives를 전부 읽어오는 것이다.
• 따라서 기존 데이터에 새로운 영화 데이터를 추가 입력하여 state의 값에 변화를 주었다.   

state의 값이 변화가 되면서 render() 메소드는 재실행된다.

• state에 추가로 저장된 movies 데이터를 Movie 컴포넌트로 전달하여 기존 영화정보에서 5초 후 더 늘어난 영화 정보가 노출된다.

삼항연산자를 활용하여 리액트만의 극적인 효과 나타내기

동시에 나만의 메소드 만들기

state에 작성했던 movies 값을 비워두자

• this.setState()에 movies 값을 그대로 가져온다.

render() 메소드 안에 작성했던 map() 메소드를 가져온다

• _renderMovies는 나만의 메소드이므로 리액트 자체 메소드와 구분 짓기 위해 _(언더바)를 사용한다.
• map()을 통해 만들어진 배열을 새로이 movies 변수에 담아서 반환한다.

삼항연산자를 사용하여 state에서 movies 객체의 존재에 따라 데이터 출력을 달리한다.

• state에 movies 객체가 존재하면 _renderMovies()를 실행하여 영화 정보가 출력되도록 한다.
• state에 movies 객체가 없다면 'Loading' 문자만 웹브라우저에 노출된다.
• 따라서 state에서 아무런 값이 없는 상태로 마운트된 후 5초가 지나서 componentDidMount()가 실행되어 state에 movies 객체가 삽입된다.
• state에 값에 변화가 생기면서 render()를 재실행한 후 _renderMovies()를 통해 Movie 컴포넌트에 영화 정보를 전달하여 웹브라우저에 노출시킨다.

PropTypes으로 데이터 형태 확인하기

데이터 형태 확인을 통해 많은 버그를 잡을 수 있다. 우선 객체내 각 요소에 부합하는 propTypes를 할당한다 

객체내 각 요소에 PropTypes를 규정하면 데이터 형태를 확인한 후에 다음 단계로 넘어간다

• PropTypes에는 string, number, bool, func 등 여러 타입을 사용할 수 있다.
• isRequired를 사용하게 되면 해당 요소가 존재하지 않을시 에러를 발생시킨다. 따라서 반드시 요소 값을 입력해야한다.
• PropTypes를 확인하고 유효한 경우에만 this.props.poster로 값이 전달된다.

map() 메소드를 활용하여 각 배열의 값을 일일이 컴포넌트에 전달하도록 코드를 작성하는 번거로움을 줄여보자

배열의 요소가 늘어날수록 그만큼 컴포넌트에 전달하는 데이터가 늘어 코드량이 늘어난다.

• movieTitles, movieImages 변수를 movies로 통합하여 객체 형태로 2개의 데이터를 담아 배열에 담는다.
• map() 메소드를 활용하여 반복적인 코드를 줄인다.

map() 메소드는 배열의 모든 요소에 하나씩 작성된 함수를 통해 새로운 배열 형태로 반환한다.

각 요소에 id 값을 주기 위해 index를 추가로 작성할 수 있다.

Moment 앱 따라하기

배경화면으로 쓰일 이미지를 랜덤으로 출력 위해 Math 내장객체에서 floor(), random() 메소드를 활용한다.

html 파일에서 body 요소를 가져온다.

• 웹브라우저 화면 전체를 이미지로 씌울 예정이므로 body를 통째로 가져온다.
  

1부터 시작하는 정수를 랜덤하게 뽑는 함수를 만든다.

• Math.random()은 1이하의 실수를 랜덤으로 반환한다.
• Math.floor()는 실수를 소수점 내림하여 정수 형태로 반환한다.
• 0부터 숫자가 반환되므로 더하기 1을 하여 숫자 1부터 변수로 지정되도록 한다.

• 배경사진의 개수가 3개라서 IMG_NUMBER 변수에 3을 담았다.
• 이미지 개수에 맞게 임의로 하나의 숫자를 뽑아서 해당 숫자의 파일명을 가진 이미지를 가져올 것이다.

랜덤으로 뽑힌 숫자랑 같은 이름의 이미지 파일을 호출한다.

• 랜덤으로 뽑은 숫자를 함수의 인자로 사용한다.
• new Image() 메소드를 사용하여 html에 <img>를 만드는데, 이는 우리가 출력할 <img src="">가 담긴다.
• <img src="">는 images 폴더에 있는 이미지 파일을 지정한다.
• 그 이미지 파일은 랜덤으로 가져와야 하므로 imgNumber 파라미터를 통해 랜덤 숫자를 받는다

• 배경사진이 원본 그대로 노출되면 웹브라우저에 맞지 않으므로, CSS를 통해 약간의 수정을 한다.
• 완성된 image 변수를 body에 자식요소로 추가한다

배경사진의 크기를 조절하고 동시에 애니메이션 효과를 준다. 

• animation 속성을 사용하기 앞서 @keyframes를 작성한다.
• 투명도(opacity)를 0에서 1로 변화를 주어 자연스럽게 화면이 전환될 수 있게 한다.
• top, left 크기를 0로 하여 텍스트로 인해 비어있는 상단, 왼쪽 공간을 제거한다. 
  
• 웹브라우저 화면 크기에 맞도록 width와 height 비율을 100%로 작성한다. 
  
• 텍스트가 배경사진 앞에서 노출될 수 있도록 z-index 속성을 이용해 레이어 순서를 조절한다.

genRandom() 함수와 printImage() 함수를 순차적으로 실행시킨다.

• genRandom() 함수를 통해 랜덤으로 뽑은 숫자를 printImage() 함수의 인자로 사용한다
  

filter() 메서드는 주어진 판별 함수를 통과하는 요소를 모아 새로운 배열로 만들어 반환합니다.

forEach() 메소드처럼 배열 내 각 요소에 함수를 적용할 수 있는데, 다른 점은 함수를 통해 반환된 결과를 모아 새로운 배열을 만들어준다는 것이다.

toDoList는 html 상에서 작성한 toDo가 출력되는 리스트인데,

그 중 하나의 toDo를 삭제하여, 그 toDo가 가진 id 값과 toDos 변수인 배열 안에 객체들의 id 값을 비교하는데,

배열 안에서 id 값이 다른 것들만 따로 모아 새로운 이름(cleanToDos)의 배열을 만든다는 것이다.

아직 설명하는 방법도 어려울 정도이다.

인강 들으면서 가장 이해 안되었던 부분이다. 이해하는데 정말 오랜 시간이 걸린듯;

출처

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

JSON은 JavaScript Object Notation의 준말이다. 자바스크립트 객체 표기로 해석해도 될지 모르겠다.

JSON.parse(text)에서 text는 JSON으로 파싱할 문자열에 해당한다.

다시 말하면, datatype이 현재 문자열인 데이터를 객체형 데이터로 바꾸겠다는 뜻으로 보면 좋다.

웹브라우저에서 폼을 통해 입력 받은 값을 문자열로 저장해야 스크린샷처럼 작성한 text와 id 값을 정확히 알 수 있다

1

localStorage.setItem(TODOS_LS, JSON.stringify(toDos));

cs

JSON.stringify(text)는 text를 문자열로 변환해주는 메소드이다.

그리고 로컬스토리지에 문자열 형태로 저장된 값을 호출하여 웹브라우저 상에서 띄우려면 다시 객체로 파싱해주어야한다. 

객체로 파싱하여 정의된 변수를 객체(배열) 안에 포함된 요소마다 paintTodo 함수를 적용하기 위해 forEach() 메소드를 사용한다.