[스파르타 코딩클럽] 내일배움단(웹개발종합반) 5주차 기록

스파르타 코딩클럽

내일배움단 5주차

---

 

<시작>

드디어 완강!!! 아직 얼떨떨하지만 웹페이지가 만들어진게 신기하고 웹페이지를 만드는 것 외에 사이트를 등록하고 다른사람에게 공유하는 과정이 이렇게 복잡한 줄 몰랐다. 어려운만큼 재밌고, 재밌는 만큼 어려운 코딩...

<한 줄 일지>

8월 30일 월요일 : 4주차와 비슷하지만 조금 더 어려웠던 '마이 페이보릿 무비스타' 좋아요 추가하기, 삭제하기 등 새로운 기능을 많이 배웠다.

8월 31일 화요일 :  마이페이모릿 무비스타 좋아요, 삭제까지 완성 했다. 조금더 데이터를 활용한 방식. AWS에서 500원 주고 1년동안 구입한 내 사이트에 그동안 숙제로 했던 원페이지 쇼핑몰을 연결했다... 하라는대로 했을 뿐... 다시하라고하면 못할것 같다..ㅎ

9월 1일 수요일 : 4주차, 5주차 들어와서 난이도가 너무 어려워 전반적인 복습이 필요할 것같아 전반적으로 수업자료를 훑어보았다. 앞으로 남은기간동안 복습을 철저히 해야겠다!

 

<새로 배운 것>

- 좋아요 +1

#서버코드(app.py)

@app.route('/api/like', methods=['POST'])
def like_star():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'like 연결되었습니다!'})

//클라이언트 코드

function likeStar(name) {
    $.ajax({
        type: 'POST',
        url: '/api/like',
        data: {sample_give:'샘플데이터'},
        success: function (response) {
            alert(response['msg']);
        }
    });
}

 

- 삭제하기

#서버코드(app.py)

@app.route('/api/delete', methods=['POST'])
def delete_star():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'delete 연결되었습니다!'})

//클라이언트 코드

function deleteStar(name) {
    $.ajax({
        type: 'POST',
        url: '/api/delete',
        data: {sample_give:'샘플데이터'},
        success: function (response) {
            alert(response['msg']);
        }
    });
}

 

- AWS EC2 서버를 구매하고, 접속하고, 서버세팅하기, 원페이지 쇼핑몰 업로드하기

- og태그를 활용해 meta태그 만들기!

<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="{{ url_for('static', filename='ogimage.png') }}" />

 

<느낀 점>

마이 페이보릿 무비스타는 앞서 연습했던 예제들 보다 좋아요, 삭제, 내림차순 정렬 등 다양한 기능이 들어갔다. 아직도 API를 연결하는게 어렵지만 역시 지속적인 연습과 다양한 실습이 답인것 같다.

서버를 만드는 과정도 어리둥절 따라하다보니 누구나 사이트에 접속하면 볼 수 있는 내 첫번째 웹페이지가 나왔다... 신기 방기 과정은 어렵기도 하지만 너무 재밌다. 그리고 어설프지만 나의 웹페이지가 나오는게 성취감이 있어 더 의욕이 생기기도 한다 완강은 새로운 시작이니까 더 열심히!

 

---

 

og/meta태그로 만든 카드!!!

▼▼▼▼

보라카이 패키지여행 판매

주문자 이름, 수량, 주소, 전화번호 입력하면 아래표에 보여집니다!