개발일지 20일차

항해99 입학시험

- 토이프로젝트를 끝내고 바로 입학시험을 치뤘다. 입학시험이긴 하지만 형식적인 거라고 생각해서 난이도가 쉬울거라고 생각했는데 나의 생각과는 다르게 난이도가 있어서 많이 당황했다. 사전에 공지해준 내용은 db에서 데이터를 삭제하는 식의 문제가 나온다고 해서 똑같이 나올거라고 예상했는데 예상과 다르게 db의 데이터를 업데이트 해주는 식의 문제가 출제 되어서 처음에 시간을 조금 날렸다.

JS

- html에서 값을 입력받고 입력받을때 default값을 0으로 받아와서 db에 저장한다

- 버킷리스트의 완료버튼을 눌렀을때 완료상태로 바꿔주는 코드를 짰다 (조건문사용)

  <script>
      $(document).ready(function () {
        show_bucket();
      });



      function show_bucket() {
        fetch('/bucket').then(res => res.json()).then(data => {
               let rows = data['result']
               $('#bucket-list').empty()
                rows.forEach((a)=>{
                    let num = a['num']
                    let done =  a['done']
                    let bucket = a['bucket']
                    let temp_html = ``

                    if(done === 0 ){
                        temp_html = `<li>
                              <h2>✅ ${bucket}</h2>
                                <button type="button" class="btn btn-outline-primary" onclick="bucket_done(${num})">완료</button>
                              </li>`;
                    }
                    if(done === 1){
                        temp_html = `
                            <li>
                                <h2> ${bucket} 완료<h2>
                                    </li>
                        `
                    }
                   
                                        
                                        
                                        
                    $('#bucket-list').append(temp_html)
                })
            })
      }

      function bucket_done(num) {
        
        let formData = new FormData();
        formData.append("done_give", num);
  
        fetch('/delete', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
          alert(data['msg'])
          window.location.reload()
        })
      }

      function save_bucket() {
        let bucket = $('#bucket').val()

        let formData = new FormData();
        formData.append("bucket_give", bucket);

        fetch('/bucket', {method: "POST",body: formData,}).then((response) => response.json()).then((data) => {
            alert(data["msg"]);
            window.location.reload();
          });
      }

 

Python

- num변수는 버킷리스트가 하나씩 등록될때마다 자동으로 앞에 입력된 num 값의 +1씩 해주는 코드를 제공해줬다.

@app.route('/')
def home():
    return render_template('index.html')

@app.route("/bucket", methods=["POST"])
def bucket_post():
    bucket_receive = request.form['bucket_give']

    bucket_list = list(db.bucket.find({}, {'_id': False}))
    count = len(bucket_list) + 1
    doc = {
        'num':count,  #버킷 등록 시, db에서 특정 버킷을 찾기 위해 'num' 이라는 고유 값 부여
        'bucket' :bucket_receive,
        'done' : 0   #'done' key값을 추가 해 각 버킷의 완료 상태 구분(0 = 미완료, 1 = 완료)
    }
    db.bucket.insert_one(doc)
    return jsonify({'msg': '저장 완료!'})
    
    
@app.route("/bucket", methods=["GET"])
def bucket_get():
    all_buckets = list(db.bucket.find({},{'_id':False}))
    return jsonify({'result': all_buckets})

아직 입학시험을 어떻게 풀었는지 이해가 안되는 부분이 조금 남아서 서버와 통신하는 방법들 더 공부해야 할 것 같다.

 

입학시험 답 링크: http://myweb.eba-3v76fhpr.ap-northeast-2.elasticbeanstalk.com/

인생 버킷리스트

항해본과정 시작이 3일정도 남았다. 온보딩커리큘럼을 진행하는 동안 너무나 당연하게도 본과정에서 리액트를 공부하려고 마음 먹었었는데, 무슨 변덕인지 node.js로 신청을했다. html,css는 그래도 조금이나마 이해도가 있는 상태고 리액트 강의도 틈틈히 들어서 리액트를 공부하는게 더 수월하다(?) 라고 생각이 들었고 당연하게도 리액트를 선택하려고 했는데 막판에 node.js가 뭔가 마음에 걸리고 뭔가 눈에 걸리는 느낌이었다. 결국에 고민하다가 막판에 node.js로 바꿔서 신청을 했고, 그나마 쉬운길도 포기하고 node.js를 공부해야한다. 조금 걱정이 되긴하지만 이 또한 내가 한 선택이다. 어떻게보면 기회일 수도 있고 위기일 수도 있다. 위기인지 기회인지를 판별하는건 나 자신의 몫이라고 생각한다. 집에 먼지쌓여있던 node.js 책을 꺼내보니 마음이 싱숭생숭한 느낌이다. 책을 펴고 잠깐 봤는데 처음보는 단어들이 많이 보인다 싱글스레드, 동기, 비동기, ssr...본과정 시작전에 이 책을 조금 봤으면 좋았겠지만 어쩔 수 없었다. 내 선택이 늦었기때문에...그래도 무언가를 시작하는 기분은 설렘기도하고 두렵기도 하다. 어쨌든 내가 선택한 길인만큼 과정을 다 수료했을때 후회하지않을 만큼 노력해봐야겠다.