<TIL> 2. flask, ajax, nosql

오늘은 토이프로젝트 중 백엔드를 구현할 차례이다.

첫번째로 저장을 눌렀을 때, 내가 어떤 정답을 눌렀는지 알 수 있게 alert창에 띄어놨다.

function save(){
let obj_length = document.getElementsByName("check").length;

        for(let i = 0 ; obj_length; i++){
            if(document.getElementsByName("check")[i].checked == true){
                alert(document.getElementsByName("check")[i].value)
            }
        }
    }
    

쉬워보였지만 정말 많은 구글링을 했고..
여러가지 기능을 한번에 구현하려다보니 계속 꼬이고 에러가 나서 다 지우고 하나하나 천천히 개발해야한다는 것을 깨닫게 되었다.

이제 해야할 것은?
저장한 checkbox 값을 db로 전해주는 것.
또 다시 구글링의 시작이다...
화이팅하자..

엄청난 삽질 끝에 위에 있는 것을 포기했다.
db에 정답과 정답번호를 올려야하는데,
위에 기능에서 어떻게 추가를 해야할지 감이 안잡혔고,, 결국 이렇게 코드를 변경했다.

function save(){

        if(document.getElementById("input_check1").checked) {
            document.getElementById("input_check_hidden1").disabled = true;
            alert(document.getElementById("input_check_hidden1").id, document.getElementById("input_check_hidden1").value)
        }

        if(document.getElementById("input_check2").checked) {
            document.getElementById("input_check_hidden2").disabled = true;
            alert(document.getElementById("input_check_hidden2").id, document.getElementById("input_check_hidden2").value)
        }

        if(document.getElementById("input_check3").checked) {
            document.getElementById("input_check_hidden3").disabled = true;
            alert(document.getElementById("input_check_hidden3").id, document.getElementById("input_check_hidden3").value)
        }

        if(document.getElementById("input_check4").checked) {
            document.getElementById("input_check_hidden4").disabled = true;
            alert(document.getElementById("input_check_hidden4").id, document.getElementById("input_check_hidden4").value)
        }
    }
    

솔직히 반복적인 코드이고, 조금 별로인 코드 같지만, check된 값을 제대로 표현하기 위해서 이것저것 많이 찾아봤지만 자꾸 console에서 오류가 생겼고.. 오류가 안생기고 잘 뜨는 코드는 이 코드밖에 없었다..
이제 db에 값을 넣는 것 그리고 깃협업을 통하여 페이지를 이동하는 것들.. 등등 그래도 할게 남아있다..
그래도 이렇게 삽질하다보면 더 나아진 내가 되겠지..?

if(document.getElementById("input_check1").checked) {
document.getElementById("input_check_hidden1").disabled = true;
alert(document.getElementById("input_check_hidden1").id, document.getElementById("input_check_hidden1").value)
let correctNum = 1
let question = document.getElementById('question1').innerText

            $.ajax({
                type:'POST',
                url: '/create',
                data:{question_give: question,num_give: correctNum},
                success: function (response){
                    alert(response['msg'])
                    window.location.reload()
                }
            })
        }
        

드디어.. checkbox 중 문제의 정답과, 체크박스에 체크된 값을 db에 넣는것에 성공했다..
하지만 내가 간과한 사실은,
문제 제목과, 이제 사지선다의 내용들을 채워넣어야 한다는 것이다.
이제 제목들과 사지선다 문제들은 하나하나 db에 넣는 작업을 할 것 이다..
코드가 비상식적으로 길어질 것 같지만..
웹개발은 처음인 나에게 맨땅에 헤딩식으로 무한 구글링을 통해 지금까지 이뤄낸 성과로도 너무 뿌듯하다..
나중에 이걸보면 참 웃기겠지?
TIL.. 오늘 배운것만 압축으로 쓰려했지만 털어놓을 곳이 이 블로그밖에 없다니..
나도 모르게 구구절절 쓰고있네..
그래도 개발하면서 많이 즐겁다.
이제 문제 제목과, 사지선다 내용들을 input 값으로 변경한 후 db에 넣고 와야지 화이팅하자 유진아!