[백엔드스터디]2일차 학습일지

AWS 루트계정 가입하기
 😎 AWS 서버를 구매할 수 있도록 루트 계정으로 가입해 봅시다!
[코드스니펫] AWS 가입하기
[<https://portal.aws.amazon.com/billing/signup#/start>](<https://portal.aws.amazon.com/billing/signup#/start>)
AWS_exported.mp4
가입: https://portal.aws.amazon.com/billing/signup#/start
해외결제가 가능한 유효한 결제 수단을 넣어야 가입이 정상적으로 이루어집니다. Visa 또는 Master 겸용의 신용카드를 추천드립니다. 가입이 정상적으로 이루어지지 않을 경우 5주차에 수업을 진행할 수 없으므로 사전에 해외결제가 가능한지 반드시 확인 부탁드립니다.
AWS는 개인에게 클라우드 환경의 가상서버를 제공합니다. 기본 사양의 서버(EC2)를 1년 동안 무료로 사용할 수 있습니다.
가입 시 결제된 금액은 다시 반환됩니다. (일종의 결제 테스트 목적)
EC2 서버를 아직 만들지 마세요! 함께 진행할 것이에요! 혹시 미리 만들어버린 EC2 서버 종료하는 방법 (1년 후 자동결제 방지!)
대상 인스턴스에 마우스 우클릭 > '인스턴스 상태' 를 클릭합니다. 중지 또는 종료 중 하나를 클릭하면 명령을 실행합니다.
 💡 중지 또는 종료하는 법. 무료 기간(1년) 후 결제가 되기 전에, 이렇게 종료하세요!

IAM 사용자 생성하기
 😎 과금을 예방할 수 있도록 권한을 설정한 IAM 계정을 사용해봐요
(1) IAM이 무엇인가요? 🤔 IAM은 AWS의 서비스를 안전하게 제어할 수 있는 계정 내의 계정이에요!
AWS 계정을 처음 가입할 때는 루트 계정이라는 하나의 아이디로 생성되는데요! 이것을 바로 사용하면 굉장히 위험합니다!
그 이유는 바로 루트 계정이 AWS에서 결제와 관련된 모든 접근 권한이 승인되어 있기 때문이에요!
원래라면 다른 서비스도 마찬가지이지만요, AWS는 그 서비스가 굉장히 다양하고 폭넓고 가격도 다양해요!
그래서 루트계정으로 일상적인 작업을 하지 않는것을 AWS가 강력히 권장합니다!
우리는 AWS의 가이드라인에 맞춰 IAM계정을 생성하고, 관리하는 것으로 큰 과금을 막고, 해킹당하더라도 적은 피해와 구제받을 수 있는 초석을 갖춰놓읍시다!(당하지 않더라도 예방을 철저하게!)

👀  참조 링크(AWS 공식문서 IAM)
(2) IAM 사용자 생성과정
IAM 그룹으로 사용할 정책권한을 설정하고, 여러 명이 IAM 사용자를 각각 만들어 사용할 수 있어요!
아래의 예시에 의하면 우리는 모든 권한을 사용할 수 있는 Bob처럼 관리자 권한설정을 할거에요!

루트계정 로그인 상태에서 화면 오른쪽 위 계정이름을 클릭하고 보안 자격 증명을 클릭합니다!

보안 자격 증명 탭에서 사용자 그룹을 클릭합니다!

사용자 그룹 탭에서 그룹 생성을 클릭합니다!

사용자 그룹 이름을 입력하고 권한 정책 연결에서 AdministratorAccess를 검색해 체크합니다!

 😎 IAM 사용자를 생성합시다!
정책이 들어있는 그룹을 만들었다면, 이제 사용자를 만들어봅시다!
이름과 비밀번호가 있는 사용자계정으로 우리는 쭉 로그인해서 사용할거에요!
화면 왼쪽의 보안 자격 증명(IAM) 탭에서 액세스관리→사용자를 클릭합니다!

사용자 탭에서 사용자 추가를 클릭합니다!

사용자 추가 탭에서 사용자를 추가합니다
사용자 이름을 입력합니다
AWS 자격 증명 유형 선택에서 암호-AWS 관리 콘솔 액세스를 선택합니다
콘솔 비밀번호를 사용자 지정 비밀 번호로 선택하고 입력합니다
비밀번호 재설정 필요에 체크를 해제하고 다음:권한을 클릭합니다

생성한 그룹에 체크해주세요! 그리고 다음 클릭!

태그 추가 항목은 다음으로 바로 넘겨주시면 돼요!

검토로 이름과 그룹을 확인해주세요! 다음 클릭!

사용자 생성에 성공하면 링크를 복사해주세요!

링크를 들어가보면 계정번호가 입력된 상태일거에요! 사용자 이름과 비밀번호를 입력하고 로그인!

 😎 이 방식으로 쭉 로그인할거에요! 링크를 보관해주세요~
📌 링크를 잃어버렸다면?
루트 계정으로 로그인 한 뒤, 화면 오른쪽 위에서 계정이름을 클릭한 뒤, 보안 자격 증명 클릭
보안 자격 증명 탭에서 대시보드를 클릭해주세요!
화면 오른쪽의 이 계정의 IAM 사용자를 위한 로그인 URL을 복사해주세요!



출처: AWS IAM 공식문서
 😎 IAM 사용자그룹을 생성합시다!

MFA 이중인증 등록하기

03. [버킷리스트] - 프로젝트 세팅
 🔥 sparta → proejcts → 04.bucket 폴더에서 시작!



문제 분석 - 완성작부터 보기!
bucket : “버킷리스트" 관련 코드를 작성합니다.
프로젝트 세팅 - Flask 폴더 구조 만들기
 😎 templates 폴더 + app.py 만들기! 기억나시죠? 👀 04. bucket 폴더 구조
bucket |— venv |— app.py (서버) |— templates |— index.html (클라이언트 파일)
폴더 안에 app.py 파일을 생성합니다!
폴더 안에 templates 폴더를 생성합니다!
templates 폴더 안에 index.html 파일을 생성합니다!
 🤔 아무 이름이나 쓰면 안되나요? → 몇 가지 규칙이 있습니다!
templates 폴더는 반드시 고정해야 합니다! Flask의 규칙이에요!
app.py는 변경해도 좋습니다만, 라이브러리 이름과 같은 것을 이름으로 사용하면 안돼요!
index.html은 변경해도 좋습니다만, 첫 페이지는 일반적으로 index.html을 사용해요!
 🔥 준비가 끝났다면 화면 상단 File > Open Folder로 04. bucket 폴더로 이동합니다!



 😎 Flask는 만들 프로젝트의 폴더 구조가 정해져 있어요! 규칙을 지켜주세요!


가상환경 생성, 패키지 설치하기
가상환경 생성, 활성화
화면 상단 Terminal > New Terminal 을 클릭!
python(맥 python3) -m venv venv 입력 후 엔터!
화면 오른쪽 아래의 파이썬 버전을 선택! venv로 골라주기
터미널 오른쪽의 십자버튼을 클릭!
(venv) 라고 뜨면 활성화까지 완료!
패키지 설치
 🔥 이번에 필요한 패키지는 3개 : flask, pymongo, dnspython
화면 상단 Terminal > New Terminal 을 클릭!(열려있다면 그대로 진행!)
[코드스니펫] 패키지 설치코드
pip install flask pymongo dnspython
여러 개를 설치할 때는 띄어쓰기로 구분해요!
📌 원하는 라이브러리를 확인해보려면?
터미널에서 pip freeze를 입력하고 엔터!
터미널에서 flask, pymongo, dnspython을 찾아보죠!
😎 제가 찾던 라이브러리 여기 있네요! 내용이 뭐가 많다구요? 우리가 사용하는 라이브러리가 다른 라이브러리를 필요로 해서 그것도 설치해주는 거에요!

04. [버킷리스트] - 뼈대 준비하기
프로젝트 준비 - app.py 준비하기
[코드스니펫] 버킷리스트 - 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_get(): return jsonify({'msg': 'GET 연결 완료!'}) if __name__ == '__main__': app.run('0.0.0.0', port=5000, debug=True)
프로젝트 준비 - index.html 준비하기
[코드스니펫] 버킷리스트 - index.html


SCRIPT
<https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js>
SCRIPT
<https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js>
SCRIPT

      $(document).ready(function () {
        show_bucket();
      });
      function show_bucket() {
        fetch('/bucket').then(res => res.json()).then(data => {
                console.log(data)
alert(data["msg"]);
            })
      }

      function save_bucket() {
        let formData = new FormData();
        formData.append("sample_give", "샘플데이터");

        fetch('/bucket', {method: "POST",body: formData,}).then((response) => response.json()).then((data) => {
            alert(data["msg"]);
            window.location.reload();
          });
      }
      
    
나의 버킷리스트
✅ 호주에서 스카이다이빙 하기
이루고 싶은 것을 입력하세요
 기록하기
프로젝트 준비 - mongoDB Atlas 창 띄워두기
[코드스니펫] mongoDB Atlas 주소
<https://cloud.mongodb.com/>
mongoDB 데이터베이스 들어가는 법
아직 연결한 것은 없으니까 보이는 것은 없지만, 이따 확인하려면 미리 띄워둬야죠!
화면 왼쪽의 Database를 클릭한 뒤 Cluster 0 클릭해주세요!
화면 가운데의 여러 탭 중 Collection 탭을 클릭해주세요!
 😎 지난 주차에서 mongoDB Atlas! 기억나시죠?
05. [버킷리스트] - POST 연습하기(버킷리스트 기록)
API 만들고 사용하기 - 버킷리스트 기록 API(Create→POST)
 😎 데이터 생성은 POST 방식! 기억나시죠?
데이터 명세
요청 정보 : URL= /bucket, 요청 방식 = POST
클라(fetch) → 서버(flask) : bucket
서버(flask) → 클라(fetch) : 메시지를 보냄 (버킷리스트 저장 완료!)
클라이언트와 서버 연결 확인하기
[서버 코드 - app.py][클라이언트 코드 - index.html]
function save_bucket() { let formData = new FormData(); formData.append("sample_give", "샘플데이터"); fetch('/bucket', {method: "POST",body: formData,}).then((response) => response.json()).then((data) => { alert(data['msg']) }); } <button onclick="save_bucket()" type="button" class="btn btn-outline-primary">기록하기</button>
@app.route("/bucket", methods=["POST"]) def bucket_post(): sample_receive = request.form['sample_give'] print(sample_receive) return jsonify({'msg': 'POST 연결 완료!'})
서버부터 만들기
데이터베이스에 연결해줍시다!
bucket 정보를 받아서, 저장하면 되겠죠?
bucket_receive = request.form['bucket_give']
우리가 일전에 만들어둔 dbprac.py 에서 코드를 불러와봅시다!
잘 입력되었다는 표시를 해주기 위한 메시지를 바꿔봅시다!
@app.route("/bucket", methods=["POST"])
def bucket_post():
    bucket_receive = request.form['bucket_give']
    doc = {
        'bucket' : bucket_receive
    }
    db.bucket.insert_one(doc)
    return jsonify({'msg': '저장 완료!'})
from pymongo import MongoClient client = MongoClient('내 URL') db = client.dbsparta
클라이언트 만들기
이번엔 bucket 정보를 보내주면 되겠죠?
let bucket = $('#bucket').val()
formData에 데이터를 넣고, 보내줍니다!
저장되면, 새로고침을 해서 다시 보여줄 준비를 합시다!
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((res) => res.json()).then((data) => {
            alert(data["msg"]);
            window.location.reload();
          });
      }
완성 확인하기
데이터를 입력하고
DB에 잘 들어갔는지 확인해보면 되겠죠?


06. [버킷리스트] - GET 연습하기(버킷리스트 보여주기)
API 만들고 사용하기 - 버킷리스트 조회 API(Read→GET)
 😎 데이터 조회는 GET 방식! 기억나시죠?
데이터 명세
요청 정보 : URL= /bucket, 요청 방식 = GET
클라(fetch) → 서버(flask) : 없음
서버(flask) → 클라(fetch) : 전체 버킷을 보여주기
클라이언트와 서버 연결 확인하기
[서버 코드 - app.py][클라이언트 코드 - index.html]
$(document).ready(function () { show_bucket(); }); function show_bucket() { fetch('/bucket').then(res => res.json()).then(data => { console.log(data) alert(data['msg']) }) }
@app.route("/bucket", methods=["GET"]) def bucket_get(): return jsonify({'msg': 'GET 연결 완료!'})
서버부터 만들기
받을 것 없이 bucket 에 버킷리스트를 담아서 내려주기만 하면 됩니다!
@app.route("/bucket", methods=["GET"]) def bucket_get(): all_buckets = list(db.bucket.find({}, {'_id': False})) return jsonify({'result': all_buckets})
클라이언트 만들기
버킷리스트는 말 그대로 리스트 형식이겠죠?
forEach문으로 반복하면서 데이터를 뽑아냅시다!
가져온 데이터를 temp_html로 뼈대에 데이터를 담아 제이쿼리로 append!
기존 html 코드들을 지워줄 수 있도록 empty() 사용하기!
function show_bucket() {
  fetch('/bucket').then(res => res.json()).then(data => {
let rows = data['result']
$('#bucket-list').empty()
          rows.forEach((a) => {
              let bucket = a['bucket']
              let temp_html = `<li>
                                  <h2>✅ ${bucket}</h2>
                              </li>`
              $('#bucket-list').append(temp_html)
          })
      })
}
완성 확인하기
 👉 동작 테스트: 화면을 새로고침 했을 때, DB에 저장된 리뷰가 화면에 올바르게 나타나는지 확인합니다.


전체 완성 코드 확인하기
[💻. 코드] app.py - 버킷리스트 서버
from flask import Flask, render_template, request, jsonify app = Flask(__name__) from pymongo import MongoClient client = MongoClient('내 mongoDB URL') db = client.dbsparta @app.route('/') def home(): return render_template('index.html') @app.route("/bucket", methods=["POST"]) def bucket_post(): bucket_receive = request.form['bucket_give'] doc = { 'bucket' : bucket_receive } 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}) if __name__ == '__main__': app.run('0.0.0.0', port=5000, debug=True)
[💻  코드] index.html - 버킷리스트 클라이언트
SCRIPT
<https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js>
SCRIPT
<https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js>
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 bucket = a['bucket']
              let temp_html = `<li>
                                  <h2>✅ ${bucket}</h2>
                              </li>`
              $('#bucket-list').append(temp_html)
          })
      })
}

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

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

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

    
나의 버킷리스트
✅ 호주에서 스카이다이빙 하기
이루고 싶은 것을 입력하세요
 기록하기
07. [팬명록] - 프로젝트 세팅
 🔥 sparta → proejcts → 05.fan 폴더에서 시작!



문제 분석 - 완성작부터 보기!
fan : “팬명록" 관련 코드를 작성합니다.
프로젝트 세팅 - Flask 폴더 구조 만들기
 😎 templates 폴더 + app.py 만들기! 기억나시죠? 👀 05. fan 폴더 구조
fan |— venv |— app.py (서버) |— templates |— index.html (클라이언트 파일)
폴더 안에 app.py 파일을 생성합니다!
폴더 안에 templates 폴더를 생성합니다!
templates 폴더 안에 index.html 파일을 생성합니다!
 🤔 아무 이름이나 쓰면 안되나요? → 몇 가지 규칙이 있습니다!
templates 폴더는 반드시 고정해야 합니다! Flask의 규칙이에요!
app.py는 변경해도 좋습니다만, 라이브러리 이름과 같은 것을 이름으로 사용하면 안돼요!
index.html은 변경해도 좋습니다만, 첫 페이지는 일반적으로 index.html을 사용해요!
 🔥 준비가 끝났다면 화면 상단 File > Open Folder로 05. fan 폴더로 이동합니다!



 😎 Flask는 만들 프로젝트의 폴더 구조가 정해져 있어요! 규칙을 지켜주세요!


가상환경 생성, 패키지 설치하기
가상환경 생성, 활성화
화면 상단 Terminal > New Terminal 을 클릭!
python(맥 python3) -m venv venv 입력 후 엔터!
화면 오른쪽 아래의 파이썬 버전을 선택! venv로 골라주기
터미널 오른쪽의 십자버튼을 클릭!
(venv) 라고 뜨면 활성화까지 완료!
패키지 설치
 🔥 이번에 필요한 패키지는 3개 : flask, pymongo, dnspython
화면 상단 Terminal > New Terminal 을 클릭!(열려있다면 그대로 진행!)
[코드스니펫] 패키지 설치코드
pip install flask pymongo dnspython
여러 개를 설치할 때는 띄어쓰기로 구분해요!
📌 원하는 라이브러리를 확인해보려면?
터미널에서 pip freeze를 입력하고 엔터!
터미널에서 flask, pymongo, dnspython을 찾아보죠!
😎 제가 찾던 라이브러리 여기 있네요! 내용이 뭐가 많다구요? 우리가 사용하는 라이브러리가 다른 라이브러리를 필요로 해서 그것도 설치해주는 거에요!

프로젝트 준비 - app.py 준비하기
[코드스니펫] 팬명록 뼈대 - app.py
from flask import Flask, render_template, request, jsonify app = Flask(__name__) @app.route('/') def home(): return render_template('index.html') @app.route("/guestbook", methods=["POST"]) def guestbook_post(): sample_receive = request.form['sample_give'] print(sample_receive) return jsonify({'msg': 'POST 연결 완료!'}) @app.route("/guestbook", methods=["GET"]) def guestbook_get(): return jsonify({'msg': 'GET 연결 완료!'}) if __name__ == '__main__': app.run('0.0.0.0', port=5000, debug=True)
프로젝트 준비 - index.html 준비하기
[코드스니펫] 팬명록 뼈대 - index.html
SCRIPT
<https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js>
SCRIPT
<https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js>
SCRIPT

      $(document).ready(function () {
        set_temp();
        show_comment();
      });
      function set_temp() {
        fetch("<<a href=http://spartacodingclub.shop/sparta_api/weather/seoul>http://spartacodingclub.shop/sparta_api/weather/seoul</a>>").then((res) => res.json()).then((data) => {
console.log(data)
          });
      }
      function save_comment() {
        let formData = new FormData();
        formData.append("sample_give", "샘플데이터");

        fetch('/guestbook', {method: "POST",body: formData,}).then((res) => res.json()).then((data) => {
            //console.log(data)
            alert(data["msg"]);
          });
      }
      function show_comment() {
        fetch('/guestbook').then((res) => res.json()).then((data) => {
alert(data["msg"])
})
      }
    
십센치(10cm) 팬명록
현재기온: 36도
새로운 앨범 너무 멋져요!

호빵맨
새로운 앨범 너무 멋져요!

호빵맨
새로운 앨범 너무 멋져요!

호빵맨
url
 닉네임
Leave a comment here
 응원댓글
댓글 남기기
프로젝트 준비 - mongoDB Atlas 창 띄워두기
[코드스니펫] mongoDB Atlas 주소
<https://cloud.mongodb.com/>
mongoDB 데이터베이스 들어가는 법
아직 연결한 것은 없으니까 보이는 것은 없지만, 이따 확인하려면 미리 띄워둬야죠!
화면 왼쪽의 Database를 클릭한 뒤 Cluster 0 클릭해주세요!
화면 가운데의 여러 탭 중 Collection 탭을 클릭해주세요!
 😎 지난 주차에서 mongoDB Atlas! 기억나시죠?
08. [팬명록] - 조각기능. 날씨 API 적용하기
OpenAPI를 활용해 조각기능 구현하기
Q. 문제
OpenAPI를 가져다 쓰는 법을 우린 배웠었어요!
게다가 날씨 API도 어디선가 해보신 것 같지 않나요?
[코드스니펫] 서울 날씨 OpenAPI
"<http://spartacodingclub.shop/sparta_api/weather/seoul>"
[코드스니펫] index.html 날씨 API 뼈대 코드
$(document).ready(function () { set_temp(); show_comment(); }); function set_temp() { fetch("<http://spartacodingclub.shop/sparta_api/weather/seoul>").then((res) => res.json()).then((data) => { console.log(data) }); }
 😎 스파르타코딩클럽에서 제공하는 서울 날씨 API를 적용해봅시다!
💡 힌트!
2주차 숙제에서 붙였었습니다!
OpenAPI도 결국 API입니다!
API 주소로 접속해볼까요?
우리가 데이터를 가져오는 JSON 형식! 데이터를 읽는 것은 무엇이었죠?(Read→GET)
A. 정답보기!
데이터명세
1.요청정보 : URL = "<http://spartacodingclub.shop/sparta_api/weather/seoul>"
요청방식 = GET
2.클라(fetch) → 서버(OpenAPI) : 없음
3.서버(OpenAPI) → 클라(fetch) : 서울 날씨 정보를 불러옴
클라이언트와 서버 연결 확인하기
$(document).ready(function () {
        set_temp();
        show_comment();
      });
      function set_temp() {
        fetch("<http://spartacodingclub.shop/sparta_api/weather/seoul>").then((res) => res.json()).then((data) => {
            console.log(data)
          });
      }
개발자 도구를 열어 console.log() 가 우리가 접속하는 데이터가 잘 붙어서 오는지 확인해보세요!
서버만들기?
 👀 OpenAPI는 이미 데이터베이스가 구축된 서버에요! 😎 우리는 가져다가 보여줄 클라이언트만 만들면 된다는 말씀!


클라이언트 만들기
우리가 보여줄 값은 여러 개가 아닌 서울 지금의 날씨 딱 하나입니다! →반복문을 쓸 필요 없다는 사실!
가져온 데이터를 temp_html로 뼈대에 담아 제이쿼리로 append!
function set_temp() {
fetch("<http://spartacodingclub.shop/sparta_api/weather/seoul>").then((res) => res.json()).then((data) => {
    let temp = data['temp']
    $("#temp").text(temp)
  })
완성 확인하기
 👉 동작 테스트: 화면을 새로고침 했을 때, DB에 저장된 리뷰가 화면에 올바르게 나타나는지 확인합니다.

 😎 OpenAPI도 결국 API입니다!