23년 2월 10일

배운 것

오늘 한 것은 간단했다. 오전에 입학 테스트를 치르고 잠깐 깃과 깃허브에 대해서 간략히 공부를 하였다.

시도 한 것

입학테스트의 문제는 다음과 같았다. 웹개발 종합반 5주차때 프로젝트를 만들었던 버킷리스트에서 기존에는 버킷 완료 되었으면 그냥 취소선만 표시되고 끝나는 것이였다. 근데 이것을 각 버킷 마다 취소 버튼을 추가 하고 버킷 완료 되기 이전 상태로 되돌리는 기능을 구현을 하는 것이였다.

이걸 보고 잠깐 고민을 하긴 했었지만 문뜩 어제 예상문제였던 스파르타피디아에서 기존에 영화 등록한 카드를 삭제하면 그 해당 카드가 삭제 했던 것 처럼 이것은 삭제가 아닌 업데이트로 바꾸면 되는 것을 기억을 했었다.
그래서 나는 서버에서 post를 하나 더 추가해서 삭제 요청을 받은 것을 생각을 하였고, 몽고디비에서 보면, done이 0이면 버킷 완료 전, done이 1이면 버킷 완료 인것을 생각해서 done을 0으로 바꾸게 업데이트를 하면 되겠구나를 생각하였다.

@app.route("/bucket/cencel", methods=["POST"])
def bucket_cencel():
    num_receive = request.form['num_cencel']
    db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 0}})
    return jsonify({'msg': '버킷취소'})

app.py에서 post로 취소 요청을 하는 서버를 다음과 같이 만들 었다.
기존에 버킷 완료 하면 0에서 1로 바꾸는 거였는데 이걸 1을 0으로만 바꾸게 {'$set': {'done': 0}}만 수정했으면 되었다.

function cencel_bucket(num) {
            $.ajax({
                type: "POST",
                url: "/bucket/cencel",
                data: {'num_cencel': num},
                success: function (response) {
                    alert(response["msg"])
                    window.location.reload()
                }
            });
        }

index.html는 다음과 같이 ajax를 만들었다. 사실 num 숫자만 바꾸면 되는 것이기 때문에 변수명만 바꾸면 끝이였다.

let temp_html = ``
                        if (done == 0) {
                            temp_html = `<li>
                                    <h2>✅ ${bucket}</h2>
                                    <buttontoken interpolation">${num})" type="button" class="btn btn-outline-primary">완료!</button>
                                </li>`
                        } else {
                            temp_html = `<li>
                                    <h2 class="done">✅ ${bucket}</h2>
                                    <buttontoken interpolation">${num})" type="button" class="btn btn-outline-danger">취소</button>
                                </li>`
                        }
                        $('#bucket-list').append(temp_html)

마지막으로 temp_html에서 다음과 같이 수정을 하였다. 기존에 위쪽코드를 참고해서 구현을 하였다. 이거 보면 완료 버튼이 있는데 아래에다 0이 아닐때에 코드를 수정하면 되는 것이였다. 붉은 버튼은 1주차에서 배웠던 버튼템플릿을 가져와다 썼고, 그대로 붙이면 끝이였다. 아까 ajax에서 만들었던 cencel_bucket를 그대로 온클릭 함수를 쓰면 끝이였다.
이제 코드를 무사히 적었고, 배포 했던 과정은 잠깐 까먹어서 웹개발 종합반 5주차 부분을 다시 보면서 배포까지 마무리 하였다.

그렇게 제출 후 오후 3시까지는 할 것이 없어서 쉬다 오후 3시부터는 git과 한달전에 사전스터디때 스스로 공부했던 sourcetree를 다시 한번 복습을 하였다.
물론 아직까지는 서툴긴 했지만 이번 토이프로젝트를 통해서 조금 더 이해하는 정도로 마무리 했다.


위는 한달전에 김치 레시피 커밋, 푸시, 풀, 브랜치, 병합 등등 스스로 해봤던 것이였고, 아래는 이번 토이프로젝트때 했던 것을 보고 이렇게 했다는 것을 복습을 하였다.

해결

입학 테스트 시험은 총 6시간이였지만 그래도 1시간 30분만에 빠르게 풀고 완벽하게 해결하였다. 그리고 휴식을 취하다 오후에 깃 복습을 하였다.

알게 된 점

토이프로젝트도 어제 부로 100퍼는 아니였지만 80퍼 정도 구현을 하는 것 끝으로 마무리 되었다. 전날까지만 해도 시험이 걱정이였는데, 확실히 어제 미리 스파르타피디아 예상문제를 팀원들이랑 고민하다 어떤 한분이 1시간 만에 풀었는데, 어떻게 하는지 방향성만 알려주고, 스스로 2~3시간 더 생각해서 결국 해결을 한 것 덕분에 오늘 입학테스트를 무사히 볼 수 있게 되었다. 즉, 예상문제를 팀원들이랑 미리 고민해보고 좀 더 강의노트르 참고해서 공부하면 좋다는 것을 알았다. 만약 이후에 제 TIL을 읽을 분이 있을지는 모르겠지만, 나중에 후배들이 향해99 입학테스트를 걱정을 한다면 예상 문제를 한번 팀원들과 고민해봐서 구현해보고 강의노트를 침착하게 잘 보면 쉽게 통과가 가능할 것이다.
또한 아직 완벽하게 이해된건 아니지만 깃 사용 하는 방법도 다시 한번 더 생각해보았고 토이프로젝트를 통해서 협업이 어떻게 흘러가는지 알게 되었다.

앞으로 계획

사실 깃을 한달전에 스스로 공부 약간 해서 이전에 했던 git 공부 했던 것을 미리 제출을 하였다. 그리고 나서 저녁 되기전에 일찍 TIL을 적었다. 저녁에는 밍글데이가 있으니 신나게 놀고 조금 공부하다가 일찍 체크아웃 할것 같다. 아마 이게 마지막으로 일찍 끝나는 날이 아닐까 생각한다.
이제 내일부터 오전 9시부터 무조건 체크인을 하게 된다. 그리고 제대로 된 프로젝트를 시작한다. 이날 하루 한정으로만 24시간 내내 밤샘 프로젝트를 진행한다. 부디 지금까지 프로젝트와 추가적인 복습으로 무사히 마치길 바라길 뿐이고, 새벽까지 밤샘을 버티기 위한 체력이 걱정이긴 하지만, 할 수 있는 데 까지 노력을 해보겠다.