Day 13 Django for KN(리뉴얼 복습)

Django for KN(Koinonia)

• 해당 문서는 Django 강의가 리뉴얼 되어 이전 과정들을 복습하는 문서로 작성 됨.

실습 : 임베딩 JSON + 바닐라 JS

# 직렬화
# 직렬화를 하려면 [{“key”:value}] 형태가 필요함
# song_list_data = list(song_list.values()) 직렬화를 위한 세팅

def song_list_api(request):
    query = request.GET.get("query", "").strip()  # 검색어

    song_list = Song.objects.all()  # QuerySet
    if query:
        song_list = song_list.filter(
            Q(곡명__icontains=query) | Q(가수__icontains=query)
        )

    song_list_data = list(song_list.values())

    return JsonResponse(
        song_list_data,
        safe=False,
        json_dumps_params={"ensure_ascii": False},
        content_type="application/json; charset=utf-8",
    ) 
    # JsonResponse 직렬화

//바닐라 JS 직렬화
{{ song_list_data|json_script:"song-list-json" }}

<script>
        const songList = JSON.parse(document.querySelector("#song-list-json").textContent);
        <!-- json을 parse하여 문자열 데이터로 역직렬화 됨-->
        songList.forEach(song => {
            <!-- songList에서 song으로 데이터를 받아 각 배열에 있는 각 노래에 대해 반복-->
            const tr =document.createElement("tr");
        tr.innerHTML = `
            <tr>
            <td>${song['곡명']}</td>
            <td>${song['가수']}</td>
            </tr>
            
			<!--
            innerHTML 속성을 사용하여 각 행에 대한 HTML을 설정합니다.
            ${song['곡명']}과 ${song['가수']}는 템플릿 리터럴을 사용하여 해당 노래의 제목과 가수를 동적으로 삽입합니다.
            -->
        `;
        document.querySelector("#song-list-table tbody").append(tr);
        <!--생성된 행을 #song-list-table의 <tbody> 내에 추가합니다. -->

        });
    </script>

실습 : JSON Web API + 바닐라 JS

<script>
        fetch("api/song-list.json")
            .then(response => response.json())
        // json.parse의 역할을 함 = 역직력화(json.api를 javascript 문자열로 전환)
            .then(songList => {
                songList.forEach(song => {
                    const tr = document.createElement("tr");
                    tr.innerHTML = `
                <td>${song['곡명']}</td>
                <td>${song['가수']}</td>
           `;
                    document.querySelector("#song-list-table tbody").append(tr);

                });
            });
</script>

실습 3 JSON Web API + 리액트

// text/babel 지정시 babel 라이브러리에 의해 JSX가 JS로 변환 됨. 
// JSX는 리액트 개발 문법으로 브라우저 지원이 되지 않으며 JS변환이 필요하다. 

 <script type="text/babel">
        function SongList() {
            const [songList, setSongList] = React.useState([]);
            // react는 UI에 반영할 값을 상탯값에 저장해야 한다
            // useState 함수를 통해 새로운 상탯값을 정의한다.
            // useState 함수의 반환값은 배열이며
            // 첫번째 인덱스 값은 상탯값에 대한 getter 이며
            // 두번째 인덱스 값은 상탯값을 변경하는 settger 함수이다.
            React.useEffect(() => {
                fetch("api/song-list.json") // 역직렬화
                    .then(response => response.json())
                    .then(_songList => {
                        setSongList(_songList);
                    });
            }, []);
            return (
                <>
                    {songList.map(song => {
                     // react의 map 함수는 배열의 순회를 돈다
                        return (
                            <tr key={song.id}>
                                <td>{song.가수}</td>
                                <td>{song.곡명}</td>

                            </tr>
                        )
                    })}

                </>
            )
        }

        ReactDOM.render(
            <SongList />,
            document.querySelector("#song-list-table tbody")
			// id가 song-list-table tbody 안에다가
        )
    </script>