Weekly I Learned- 웹개발 종합반 5주차

Suding·2022년 10월 18일
ec2ssh도메인연결하기사전스터디스파르타코딩항해99
0

스파르타 웹개발 종합반_항해99 사전스터디 WIL 

목록 보기
7/8

  • 도메인 만들기, AWS 연결하기

    • 가비아에서 내 웹사이트의 도메인 (주소)을 구매한다

    • AWS 에 가상의 컴퓨터를 구매해서 내 서버를 실행하고 종료한다

      • 사용하는 컴퓨터는 리눅스를 사용한다
        • 리눅스 명령어
      • EC2 에서 우리가 빌려 쓸 가상의 컴퓨터에 접속 한다
        • ubuntuserver 20.4 를 사용한다 (사용하게 될 서버)
        • port 22 가 열려있어야만 접속이 가능하다
        • 다른 컴퓨터를 접속할때는 SSH (Secured Shell Protocol)를 사용하는데 보안이 뛰어나다

    • https://bobbyhadz.com/blog/aws-ec2-warning-unprotected-private-key-file

    • EC2 설치하기

      ```python
# python3 -> python
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10

# pip3 -> pip
sudo apt-get update
sudo apt-get install -y python3-pip
sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1

# port forwarding
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000
```

      숙제: 버켓리스트 만들기

    • db 여러개 데이터 찾기 + 파이썬 len ()

      @app.route("/bucket", methods=["POST"])
def bucket_post():
    bucket_receive = request.form['bucket_give']
    count = list(db.bucket.find({},{'_id':False}))
    num = len(count)+1
    done = 0
    doc = {
        'bucket': bucket_receive,
        'num': num,
        'done' done
    }
    db.bucket.insert_one(doc)
    return jsonify({'msg': '저장 완료!'})
      • 버켓 리스트가 여러개 생성되면 DB에서 데이터를 꺼내 올때 혼동이 올수 있으니 버켓 리스트를 생성할때 아이템마다 순서를 정해준다
      • count = list(db.bucket.find({},{'_id':False}))
        • db에 저장된 아이템을 찾아서 순서를 매겨주기 위해 데이터를 먼저 찾는다
      • num = len(count) +1
        • leng(count) 는 아이템 개수를 돌려주는 공식이다. db.bucket 에 이는 모든 아이템은 개수에 + 1 개씩 더해서 아이템 순서를 정한다

    • CSS (밑줄 치기 스타일 적용) , 조건문 활용하여 완료된 아이템 밑줄 그어주기

      .mybox > li > h2 {
max-width: 75%;
font-size: 20px;
font-weight: 500;
margin-right: auto;
margin-bottom: 0px;
}
.mybox > li > h2.done {
text-decoration:line-through
}

      • h2 에 class=”done” 적용하기

        function show_bucket(){
    $('#bucket-list').empty()
    $.ajax({
        type: "GET",
        url: "/bucket",
        data: {},
        success: function (response) {
            let rows = response['buckets']
            for (let i = 0; i < rows.length; i++) {
                let bucket = rows[i]['bucket']
                let num = rows[i]['num']
                let done = rows[i]['done']

                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>
                                </li>`
                }
                $('#bucket-list').append(temp_html)
            }
        }
    });
}

      • done 0일 때와 아닐때로 조건을 구분하여 조건에 해당되는 코드를 실행한다

        • if (done == 0) { }, 버켓아이템 보여주기, 완료 버튼 제공하기
        • else { } 는 h2 class= “done” 을 적용해서 버켓 아이템에 밑줄그어주기 , 완료 버튼은 보여주지 않기

    • db 업데이트 해서 완료된 아이템 0 에서 1로 바꿔 주기 , int() 문자를 숫자로 바꿔주기

      ```python
@app.route("/bucket/done", methods=["POST"])
def bucket_done():
    num_receive = request.form['num_give']
    db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})
    return jsonify({'msg': '버킷 완료!'})
```

- db 에 있는 num 을 불러와서 bucket_done 이라는 함수가 실행되면 db에 done 을 0 에서 1로 바꿔준다
- num 을 불러올때 db 안에서는 숫자가 아닌 문자로 저장되어있기 때문에 int() 라는 함수를 사용해서 숫자 1로 변환시켜 준다

      미니 프로젝트

      Travel Manager

profile
Suding
웹개발자가 되고 싶은 수딩의 코딩 일지
이전 포스트

Weekly I Learned- 웹개발 종합반 4주차

다음 포스트

Weekly I Learned- 웹개발 종합반 미니프로젝트

0개의 댓글