20220429 : TIL, AWS 탄력적 IP, 보안그룹, 플라스크 디버그 모드

- AWS 퀴즈 하면서 탄력적 IP가 왜 유동적이 아니라는 건지 의아했는데, 다시 복습하면서 보니, 원래 다 바뀌는데 이것만 안 바뀌어서 탄력적 IP ^^

- 보안그룹은 특히 인바운드에서 어떤 포트를 열어줄지를 방화벽처럼 설정하는 것! 임도 복습!

 

- 티스토리가 사진 삽입이 잘 되지 않고, 아직 사용법이 그렇게 손에 익지는 않아서...고민이다...

 

- 파이썬 라이브러리/패키지 설치시, pip으로 하는 경우가 많지만, 파이참에서 내장된 검색 툴로 하는 경우도 있는데

상단메뉴에서 file-setting으로 하는 방법이 있었지만, 하단 콘솔창 쪽에 python-packages라는 곳에서도 동일한 작업을 할 수 있음을 알게되었다!

 

 

flask 디버그모드 active하기

플라스크 사용하면서 코드를 변경했을 때 바로바로 적응이 안되고, 굳이 서버를 껐다 켜야 적용된다는 것을 발견함

→ 검색했더니 아래와 같이 debug 속성을 추가하라고 해서 추가함

app.run(host='0.0.0.0', debug=True)

app.run(debug=True)

→ 여전히 해결되지 않음

→ 추가 검색했더니 저 속성을 추가한채로, app.py를 터미널에서 작동시켜보라고 함.

→ 해결!

1. app.run(debug=True) 를 다음과 같이 설정한다.
   1. 최초 생성시에는 app.run()으로 설정되어 있음.

if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=True)

1. 터미널에 python [app.py](<http://app.py/>) 또는 python3 [app.py](<http://app.py/>) 을 입력하여 파일을 실행시켜 서버를 구동한다(코드 에디터에서 버튼 등으로 run하는 방식이 아닌 터미널을 사용해야 함.)
2. 터미널에 Debugger is active! 문구가 출력되면 성공
3. 코드 수정시마다 페이지 새로고침으로 확인이 가능!

 

ajax 해석방법

    $(document).ready(function () {
        get_list()
    })

    function get_list() {
        $.ajax({
            type: "GET",
            url: "<<a href=http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99</a>>",
            data: {},
            success: function (response) {
                let rows = response["RealtimeCityAir"]["row"];
                console.log(rows)
            }
        })
    }

• 페이지 실행하자마자 함수 실행설정

 $(document).ready(function () {
        get_list()
    })

• AJAX 요청 해석

 function get_list() {
        $.ajax({
            type: "GET",
            url: "<http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>",
            data: {},
            success: function (response) {
                let rows = response["RealtimeCityAir"]["row"];
                console.log(rows)
            }
        })

• url에 get요청을 보낸다.
• 보낼 때 data는 전달 안한다.
• 성공시 get 요청으로 json형태의 response를 받게 되는데
• 그 response중 realitimecityair의 row를 rows에 대입해줘라.
• 그리고 콘솔에 실행해줘라

현재 이걸 detail.html에 넣은 상태라서, /detail로 접근해서 콘솔을 켜면 콘솔창에 값이 출력되어있는 것을 볼 수 있음

 

서울시 미세먼지 API를 AJAX로 불러오기(미세먼지 60이상) → jinja2 로 처리하기

1. HTML 상에서 ajax 요청하기

    
        $(document).ready(function () {
            get_list()
        })

        function get_list() {
            $.ajax({
                type: "GET",
                url: "<<a href=http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99</a>>",
                data: {},
                success: function (response) {
                    let rows = response["RealtimeCityAir"]["row"];
                    console.log(rows)
                    for (let i=0; i<rows.length; i++){
                        let gu_name = rows[i]["MSRSTE_NM"]
                        let gu_mise = rows[i]["IDEX_MVL"]
                        console.log(gu_name, gu_mise)
                        if(gu_mise<60){
                            let html_temp = `<li>${gu_name}:${gu_mise}</li>`
                            $("#gu_list").append(html_temp)
                        }

                    }
                }
            })
        }
    상세페이지 메인으로 돌아가기

1. jinja2 요청하기

1. flask app 파일에 request하는 문구 작성

• 템플릿 렌더 할 때 request로 받아온 값을 html로 전달하는 것 잊지 말기render_template("detail.html", rows=rows)

@app.route('/detail')
def detail():  # put application's code here
    r = requests.get('<http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>')
    response = r.json()
    rows = response['RealtimeCityAir']['row']
    return render_template("detail.html", rows=rows)

1. html에 받아온 응답을 표시하는 문구 작성

• python(flask)에서 받아온 데이터를 활용해서 화면에 표시하기{% for row in rows %}

jinja2 기초 작성법

• html안에 작성

//변수선언
{% set gu_name = rows[0]["MSRSTE_NM"] %}
{% set gu_mise = rows[0]["IDEX_MVL"] %}
<li>{{gu_name}} : {{gu_mise|int}}</li> //변수사용, 형변환

• for문 사용시 시작점과 끝점을 표시{% endfor %}
  • 왜냐면 파이썬은 들여쓰기를 쓰지만 html은 그런식으로 들여쓰기를 활용하지 않기 때문이죠

 

 

 

클론코딩이 서비스를 만들고자 하는 분에게는 정말 좋은 도구라고 생각합니다. 여기서 가르쳐주는 것만 보고서 ‘내가 이뤘구나’라는 생각을 하면 안 되는 것 같아요. 좋은 도구인 건 확실한데, 못을 본인이 얼마나 잘 내리치느냐도 중요하거든요. 그냥 따라 하는 게 아니라 이걸 따라 하면서 부족한 공백들이 분명히 생겨요. 그 공백들은 자기 주도적인 학습을 통해서 왜 이렇게 되는 건지 더 알아보고, 모르는 것은 물어보고, 이런 과정들로 채워야 하죠. 이 과정이 필수로 들어간다면 분명히 좋은 학습 방법이에요. 비판의 목소리가 있다면 앞서 말씀드렸던 과정들은 생략된 채로 그냥 따라 하기만 하는 사람들 때문에 나오는 거라고 생각해요. ‘나에겐 망치가 있으니 못을 잘 박을 수 있어!’라고 생각하는 게 문제이지 않을까요?

- 자기주도적 학습이 핵심인만큼, 자기주도적 학습이 참 쉽지 않다...

우버 클론코딩 듣고, 창업 성공 했습니다...! – 노마드 코더 Nomad Coders