js 공부(ft. sparta) (65) 썸네일형 리스트형 5-5. [버킷리스트] - GET 연습 (버킷 리스트 보여주기) 이렇게 만들어진 버킷리스트를 가져다가 html을 만들어서 붙여주겠다. 우선 서버가 연결 된거까지 확인했다. 3번 서버부터 만들어보겠다. 먼저 dbprac에서 여러개 찾기를 복사해서 app.py에 붙여넣어준다. 그리고 위 코드처럼 수정해주면 서버는 끝났다. 우선 html로 가서 아래와 같이 수정 후 console창에서 확인해보도록 한다. 이제 이걸 temp_html을 만들어서 붙여준다. 그전에 forEach를 만들어서 console창에서 확인해본다. 이제 temp_html을 만들어보자. 이렇게 작성해주면 된다. 잘 붙은것을 확인할 수 있다. 한번 기록해보면 바로 밑에 붙는것을 확인 할 수 있다. 이렇게 입력하고 db에 저장되고 그걸 꺼내오는것을 해보았다. 다음시간에는 팬명록으로 복습을 한번 더 해 보겠다. 5-4. [버킷리스트] - POST 연습 (버킷리스트 기록) 버킷리스트를 기록하는 POST 요청부터 만들어보도록 하겠다. 이 순서를 기억하자. 2번까지 했기때문에 3번부터 한다. 우선 저번에 했던 dbprac.py를 가져와서 열어준다. 저장을 가지고 와서 아래 처럼 붙여넣고 수정해준다. 이번엔 프론트엔드를 만들러 가자. 프론트엔드는 index.html의 save_bucket()쪽이다. 이렇게 작성하고 수정하면 된다. 변수 bucket에 id인 bucket을 넣어주고 그걸 보낸다는거다. 그리고 refresh를 넣어준다.(window.location.reload();) 테스트해보면 아래와 같이 나온다. 이렇게 확인 할 수 있다. 한번 더 데이터를 입력해주면 아래와 같이 잘 나오고 잘 들어간것을 확인 할 수 있다. 이렇게 post는 끝이났다. 5-3. [버킷리스트] - 뼈대 준비하기 먼저 '버킷리스트 - app.py' 코드를 복사해서 붙여넣어준다. from flask import Flask, render_template, request, jsonify app = Flask(__name__) @app.route('/') def home(): return render_template('index.html') @app.route("/bucket", methods=["POST"]) def bucket_post(): sample_receive = request.form['sample_give'] print(sample_receive) return jsonify({'msg': 'POST 연결 완료!'}) @app.route("/bucket", methods=["GET"]) def bucket_.. 5-2. [버킷리스트] - 프로젝트 세팅 새 vscode를 열어서 04.bucket 폴더를 열어준다. 그리고 아래 사진처럼 app.py 파일을 만들어준다. 새터미널을 만들어서 가상환경을 잡아준다. 그다음 라이브러리를 설치해준다. 우린 flask도 쓸꺼고 미니프로젝트를 보니 데이터도 저장해서 보여주기때문에 pymongo와 dnspython도 쓸꺼다. 그리고 templates 폴더를 만들어주고 그안에 index.html 파일을 만들어준다. 이렇게 준비 완료됬다. 5-1. AWS 가입하기 및 보안설정하기 시작하기에 앞서 인터넷 세계에 우리 웹서비스를 배포할 때 쓸 AWS라고 하는 서비스를 먼저 가입해보겠다. 시간이 걸리기 때문에 미리 가입을 해두는거다. 이 AWS는 아마존에서 운영하는 클라우드 서비스이다. 클라우드 서비스는 누구나 다 인터넷에 있는 컴퓨터를 빌려서 내컴퓨터마냥 거기다가 배포할꺼다. 가입할때 해외 결제가 가능한 카드가 필요하다. 그래도 우린 무료로 사용가능한 것만 사용할껀데 혹시 걱정이 되는 분들을 위해 알림설정하는 것도 알려준다고 한다. https://console.aws.amazon.com/console/home https://console.aws.amazon.com/console/home console.aws.amazon.com 위사이트에 들어가서 일단 회원가입을 한다. 그리고 과금을.. 5w_5주차 배울 것 미니프로젝트3,4,배포하기를 할꺼다. python 으로 flask 라이브러리 또는 프레임워크를 이용해서 서버를 만드는 작업을 해 볼 꺼다. 두번 반복할꺼다. 첫번째는 버킷리스트 페이지다. 두번째는 팬명록이라는 서비스다. 마지막으로 이 팬명록을 우리가 좋아하는 가수로 약간 바꿔서 친구나 가족 예를 들면 모바일로 볼 수 있도록 인터넷에 배포해보는 것도 해보겠다. 어엿한 웹사이트를 배포하는거다. 4주차 끝 숙제 별점을 추가하기. 프론트엔드는 같이 하고 백엔드를 숙제로 한다. 별점 -- 선택하기 -- ⭐ ⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ 위 코드를 영화url과 코멘트 사이에 넣어준다. 그리고 브라우저에 가서 새로고침후 확인해보면 아래 사진과 같이 별점란이 나온다. 그리고 app.py에 가서 우린 일단 무조건 별이 5개 나오게 해서 확인해보겠다. 그리고 다시 index.html로 돌아와서 star 변수를 만들어주는데, 우리가 받아오는것은 숫자이기 때문에 이미지로 변경해주기 위해 아래 사진처럼 작성해준다. 그리고 별이 있던 자리에 아래 사진처럼 변경해주고 저장한다. 저장후 브라우저에서 새로운 영화를 기록하고 보면 아래 사진과 같이 나온다. 아까넣었던 다른 영화들의 별점들은 사라졌다. 그이유는 그전엔 star값을 넣지 .. 4-13. [스파르타피디아] - GET 연습(보여주기) 이제 로딩이 완료되면 fetch를 가지고 카드를 착착 붙여주는 작업을 해야한다. 먼저 app.py에 가서 데이터를 가져오는 것을 작성한다. 그리고 get연결완료 가 아닌 값을 보내줘야하기때문에 result에 all_movies를 써준다. 그리고 index.html로 가서 아래 함수처럼 변경해준다. 이제 브라우저에서 새로운 영화 하나를 더 추가하고 console창을 확인하면 아래와 같이 나온다. 이걸 보면 리스트다. 리스트이기때문에 foreach를 돌려준다. 확인해보면 아래 console창에서 잘나온것을 확인해볼 수 있다. 이제 붙여주기를 하겠다. 위와 같이 작성해주고 저장 한 후 확인하러 가보면 아래 사진과 같이 나오는 것을 볼 수있다. 이렇게 내가 넣은 영화가 나오는 것을 볼 수 있다. 하나 더 붙여봐.. 이전 1 2 3 4 5 ··· 9 다음
