게시판 선택 버튼 js 리팩토링

기본적인걸 연습하자는 생각과 유지보수가 편하겠지 라는 생각으로 게시판 종류별 리스트를 불러오게 하는 버튼을 따로 만들었는데 반대였던거 같다 함수하나에 인자여러개를 이용해서 간단하게 만들 수 있었다.

function category_list(category_name) {
    let category = category_name;
    console.log(category)
    $.ajax({

        type: "GET",
        url: `http://127.0.0.1:8000/community/category/?category=${category}`,
        data: {},

        headers: {
        },

        success: function (response) {
        $('#post_list').empty()

        console.log('성공:', response);
        if (response.length > 0) {
            for (let i = 0; i < response.length; i++) {
                let id = response[i]['id']

                console.log(id)
                let title = response[i]['title']
                let hits =response[i]['hits']
                let created_at = response[i]['created_date']
                let category = response[i]['category']
                let user = response[i]['user']
                let comments_count=response[i]['comments_count']


                temp_html=` <tr>
                <td>${id}</td>
                <td>
                <div style = "cursor : pointer;" onclick="postid(${id})"> ${title} [${comments_count}] </div>
                </td>
                <td>${category}</td>
                <td>${hits}</td>
                <td>${user}</td>
                <td>${created_at}</td>
            </tr>`
            $('#post_list').append(temp_html)
        }
        }


        }

        });
}

이렇게도 만들어 볼까 했는데 비효율적이라고 생각이 들었다.

// 게시판 클릭
// $('#free_list').click( function() {
//     category_list("free")
// });
// $('#blind_list').click( function() {
//     category_list("blind")
// });
// $('#top_list').click( function() {
//     category_list("study")
// });
// $('#study_list').click( function() {
//     category_list()
// });

 

// function free_list() {
//     let category = '자유게시판' ;
//     console.log(category)
//     $.ajax({

//         type: "GET",
//         url: `http://127.0.0.1:8000/community/category/?category=${category}`,
//         data: {},

//         headers: {
//         },

//         success: function (response) {
//         $('#post_list').empty()

//         console.log('성공:', response);
//         if (response.length > 0) {
//             for (let i = 0; i < response.length; i++) {
//                 let id = response[i]['id']

//                 console.log(id)
//                 let title = response[i]['title']
//                 let hits =response[i]['hits']
//                 let created_at = response[i]['created_date']
//                 let category = response[i]['category']
//                 let user = response[i]['user']
//                 let comments_count=response[i]['comments_count']


//                 temp_html=` <tr>
//                 <td>${id}</td>
//                 <td>
//                 <div style = "cursor : pointer;" onclick="postid(${id})"> ${title} [${comments_count}] </div>
//                 </td>
//                 <td>${category}</td>
//                 <td>${hits}</td>
//                 <td>${user}</td>
//                 <td>${created_at}</td>
//             </tr>`
//             $('#post_list').append(temp_html)
//         }
//         }


//         }

//         });
// }



// // 익명게시판 클릭
// $('#blind_list').click( function() {
//     blind_list()
// });
// function blind_list() {
//     let category = 'blind' ;
//     console.log(category)
//     $.ajax({

//         type: "GET",
//         url: `http://127.0.0.1:8000/community/category/?category=${category}`,
//         data: {},

//         headers: {
//             "Authorization": "Bearer " + localStorage.getItem("access"),
//         },

//         success: function (response) {
//         $('#post_list').empty()

//         console.log('성공:', response);
//         if (response.length > 0) {
//             for (let i = 0; i < response.length; i++) {
//                 let id = response[i]['id']

//                 console.log(id)
//                 let title = response[i]['title']
//                 let hits =response[i]['hits']
//                 let created_at = response[i]['created_date']
//                 let category = response[i]['category']
//                 let user = response[i]['user']
//                 let comments_count=response[i]['comments_count']


//                 temp_html=` <tr>
//                 <td>${id}</td>
//                 <td>
//                 <div onclick="postid(${id})"> ${title} [${comments_count}] </div>
//                 </td>
//                 <td>${category}</td>
//                 <td>${hits}</td>
//                 <td>${user}</td>
//                 <td>${created_at}</td>
//             </tr>`
//             $('#post_list').append(temp_html)
//         }
//         }


//         }

//         });
// }



// // 공부게시판 클릭
// $('#study_list').click( function() {
//     study_list()
// });
// function study_list() {
//     $('#post_list').empty()

//     let category = 'study' ;
//     console.log(category)
//     $.ajax({

//         type: "GET",
//         url: `http://127.0.0.1:8000/community/category/?category=${category}`,
//         data: {},

//         headers: {
//             "Authorization": "Bearer " + localStorage.getItem("access"),
//         },

//         success: function (response) {
//         console.log('성공:', response);
//         if (response.length > 0) {
//             for (let i = 0; i < response.length; i++) {
//                 let id = response[i]['id']

//                 console.log(id)
//                 let title = response[i]['title']
//                 let hits =response[i]['hits']
//                 let created_at = response[i]['created_date']
//                 let category = response[i]['category']
//                 let user = response[i]['user']
//                 let comments_count=response[i]['comments_count']


//                 temp_html=` <tr>
//                 <td>${id}</td>
//                 <td>
//                 <div onclick="postid(${id})"> ${title} [${comments_count}] </div>
//                 </td>
//                 <td>${category}</td>
//                 <td>${hits}</td>
//                 <td>${user}</td>
//                 <td>${created_at}</td>
//             </tr>`
//             $('#post_list').append(temp_html)
//         }
//         }


//         }

//         });
// }