10TIL 정리 (Jinja2,나만의 단어장)

 

동적 페이지와 정적페이지

 

정적 웹페이지(static web page)는 서버에 저장되어 있는 HTML+CSS파일 그대로 보여주는 것이고 

추가적인 통신과 계산이 필요없이 때문에 속도가 빠르고 서버에 부담이 적은 반변 추가/수정/삭제 등 내용 변경이 필요할 때 HTML자체를 수정해야 해서 번거롭다

동적 웹페이지(dynamic web page)는 상황에 따라 서버에 저장되어 있는 HTML에 데이터 추가/가공을 해서 보여주는 것으로 한 페이지에서 상황/시간/사용자요청에 따라 다른 모습을 보여줄 수 있다는 장점이 있지만 상대적으로 보안에 취약하고 모습이 계속 변하기 때문에(많은경우 주소도 변함) 검색엔진 최적화(search engine optimazation,SEO)가 어렵다

 

동적 웹 페이지 종류

-Client-side rendering(CSR)

자바스크립트에 데이터를 포함해서 보낸 후 클라이언트 쪽에서 HTML을 완성

-Server-side rendering(SSR)

서버 쪽에서 템플릿 HTML에 데이터를 끼워넣어 완성된 형태의 HTML을 보내주는 방법

복합적 방법

우리가 지금까지 해왔더 클라이언트 쪽에서 Ajax 요청을 보내 서버에서 데이터를 받아와 HTML을 완성하는 방법

간단한 Jinja2 와 API키 설명

-Jinja2는 Flask 프레임워크에서 사용하는 템플린 언어로 '템플릿'이 되는 HTML 문서에 데이터가 들어갈 곳을 표시해놓는 역할

-API키는 Open API라도 너무 많은 요청을 보내는 등의 악용을 방지하기 위해 API키를 배부받아 요청 시 같이 보내워야 하는 경우가 있다.

 

멀티 페이지 사이트

페이지간 이동

<a href="/detail">상세 페이지로 가기</a> <!-- /detail 앞은 메인 주소이기때문에 생략 -->

<!-- script 태그 안에 정의하기 -->
function to_main() {
    window.location.href = "/" <!--앞 메인 주소는 생략이기 때문에 /만 -->
}

<!-- 버튼에 함수 연결하기 -->
<button onclick="to_main()">메인으로 돌아가기</button>

<button onclick='window.location.href = "/"'>메인으로 돌아가기</button>
<!-- 위처럼 짧은 코드는 onclik에 바로 넣을 수 있다-->

-Jinja2 템플릿 언어 사용

서버에서 name이라는 이름으로 값을 보내줘보자

@app.route('/')
def main():
    myname = "sparta"
    return render_template("index.html", name=myname)

html 파일에서 이 값이 들어갈 자리를 표시

<h3>Hello, {{ name }}!</h3>

 💡 파이참 Settings(맥은 Preferences) > Languages & Frameworks > Template Languages에서 템플릿 언어를 Jinja2로 설정해주면 자동완성과 하이라이팅 기능을 사용 할 수 있다.

 

-응용해보기

렌더링할 html에 정보 먼저 보내기(미세먼지API이용)

r = requests.get('http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99')
response = r.json()<!--API값을 가져와서 제이슨 형식으로 보여줘라-->
rows = response['RealtimeCityAir']['row']<!--가져온 값에서 RealtimeCityAir에 row값을 빼냄-->

return render_template("index.html", name=name, rows=rows)
#사용할 html에 rows값(미세먼지 정보)을 보냄

모든 구에 대해서 태그로 만들기 ( 미세먼지 50이상일 때만 태그) /// 정수로 나타내기 위해선 뒤에 | int를 넣자

{% for row in rows %} <!-- body안에 입력 for문 -->
    {% set gu_name = row.MSRSTE_NM %}<!--구이름 변수저장 -->
    {% set gu_mise = row.IDEX_MVL %}<!--미세먼지 변수저장 -->
    {% if gu_mise >= 50 %}<!--50보다 큰 미세먼지 -->
   		<li>{{ gu_name }}: {{ gu_mise }}</li><!-- 구이름 : 미세먼지 -->
    {%endif%}    <!-- if문 종료-->
{% endfor %}<!-- for문 종료 -->

-URL의 일부를 변수로 받기

브라우저에 HTML을 띄우는 것이 GET요청이기 때문에, 주소 뒤에 ? 를 붙여 파라미터를 넘겨줄 수 있다.

  브라우저에 해당 API로 요청 보내기

http://localhost:5000/detail?word_give=hello <!-- ?뒤! -->

  서버에서 파라미터 값을 받아 HTML로 넘겨주기

@app.route('/detail')
def detail():
    word_receive = request.args.get("word_give") #word_give란 값을 url에서 받아 변수저장
    return render_template("detail.html", word=word_receive) # word란 이름으로 html 보내기

HTML에서 word라는 변수를 템플릿 언어로 써보자

 

플라스크 프레임 워크에서는 URL의 일부를 변수로 받는 방법도 있다.

@app.route('/detail/<keyword>') #/detail뒤에 값을 keyword로 지정
def detail(keyword): #keyword란 함수를 넘겨주기
    return render_template("detail.html", word=keyword) #keyword를 wrod로 넘겨주기 가능

 

-API이용하기

파이썬으로 API요청 보내기

r = requests.get("https://owlbot.info/api/v4/dictionary/owl", headers={"Authorization": "Token [내토큰]"})#URL과 토큰입력
result = r.json()#결과를 JSON 형식으로 보여주세요
print(result)

Ajax로 요청 보내기

$.ajax({
    type: "GET",//요청은 GET
    url: "https://owlbot.info/api/v4/dictionary/owl",//API주소에서 주세요
    beforeSend: function (xhr) {//보내기 전에 내 토큰 정보를 보냅니다
        xhr.setRequestHeader("Authorization", "Token [내토큰]");
    },
    data: {},b
    error: function (xhr, status, error) { // 에러 발생시 경고창을 띄워주세요
        alert("에러 발생!");
    },
    success: function (response) { // 성공할 시 로그를 보여주세요
        console.log(response)
    }
})

헷갈리면 HTTP에 대해서 한번 공부하기 위해 관련 블로그를 참조하자.

( https://goddaehee.tistory.com/169 )<<--도움이 많이 되었다.

 

 

★중요! API 설계하기

필요한 기능들을 생각해보며 각 페이지에는 어떤 일이 일어나야 하는지 생각해보자.

ex)

내배캠 웹프로그래밍 강의 심화과정(나만의 단어장)

<예제 만들며 기억하면 좋은 팁이나 코드들>

-로컬에서 개발할 때도 AWS 서버에 있는 MongoDB를 바로 연결해서 코딩하면 나중에 배포할 때 DB를 복사해 옮길 필요가 없어 편하다.

-아이콘 삽입하기

( https://fontawesome.com/versions ) Font Awesome 이라는 사이트

아이콘을 이용하기 위해선 head에 링크를 삽입해주자

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

HTML에선 클래스 형식으로 붙여넣기

<i class="fa fa-cog"></i>

-CSS파일 분리하기

페이지의 배경과 배너등 디자인 요소가 겹치므로 CSS파일을 분리하여 링크로 넣어주면 같은 CSS파일 적용 가능

static폴더에 mystyle.css파일을 만들고 공통 요소에 대한 CSS를 잘라내어 붙여 넣는다.

이후 배너이미지는 같은 폴더 안에 있으므로 

background-image: url('logo_red.png');

이런 식으로 바꿔주고 아래와 같이 링크를 걸어준다.

<link href='{{ url_for("static", filename="mystyle.css") }}' rel="stylesheet">

※만약 잘 적용되지 않는다면 캐시 문제일 수 있으니 강제 새로고침(Ctrl/Cmd + Shift + R)을 한 번 해보자.

 

-단어 검색

단어를 검색 했을 때 이미 저장된 단어인지 알기 위한 단어 리스트

let words = {{ words|tojson }}; // 받은 단어를 json형식으로 바꿔줘
let word_list = []; // 단어 리스트를 일단 빈값으로 두고
for (let i = 0; i < words.length; i++) { // 제이슨 형식으로 받은 단어를 반복문을 돌린 후
    word_list.push(words[i]["word"]) // 검색한 단어를 단어 리스트에 포함해줘
}

단어 검색 했을 때 단어 리스트에 잇는 경우엔 해당 행을 하이라이트 하고, 없는 단어일 때 단어 상세페이지로 넘어가는 기능

function find_word() {
    let word = $("#input-word").val().toLowerCase();//toLowerCase << 값을 소문자로 변환
    if (word == "") {
				// 빈 문자열이면 얼럿
        alert("please write something first :)")
        return
    }
    if (word_list.includes(word)) {
				// 리스트에 있으면 하이라이트
        $(`#word-${word}`).addClass('highlight').siblings().removeClass('highlight');
        //siblings<<같은 선상에 있는 형제요소 모두 선택,removeClass <<해당 클래스를 삭제
        //즉 해당 단어만 하이라이트 해야하니 다른 단어들을 siblings한뒤 하이라이트 클래스를 삭제
        $(`#word-${word}`)[0].scrollIntoView();//scrollintoview<<해당 단어로 스크롤을 이동시키기
    } else {
				// 리스트에 없으면 상세 페이지로
        window.location.href = `/detail/${word}?status_give=new`
    }
}

-사전에 없는 단어를 검색할 때

단어가 존재하지 않을 때 기능

-주소에 단어가 아닌 것을 넣었을 때 사전 API에선 단어를 찾을 수 없기 때문에 에러가 난다. 이 때 에러를 보여주지 않고 단어 목록 페이지로 리다이렉팅 시키자.

값을 잘 받아왔을 땐 상태 코드가 200이므로 200이 아닐 때 main으로 리다이렉팅

 

if r.status_code != 200: # 받아온 상태 코드가 200이 아닐 때
        return redirect(url_for("main")) # 메인 페이지로 리다이렉팅 해주세요
        # 또는 "/" 가능

단어 찾기 실패 경고창을 띄우려면 redirect()에 메세지를 같이 전달

url_for("main", msg="Word not found in dictionary; Try another word")
#msg<<메세지를 파라미터로 보내준다.

main()에서 메시지를 받아 템플릿에 같이 보내준다.

@app.route('/')
def main():
    # DB에서 저장된 단어 찾아서 HTML에 나타내기
    msg = request.args.get("msg") # 아래에서 쓴 msg를 받아오고
    return render_template("index.html", words=words, msg=msg) #템플릿으로 msg를 넘긴다.

index.html로 가서 msg가 있을 때 해당 메시지로 경고창을 띄우자

{% if msg %} // none이 아니라면 굳이 안 적어도 된다. 메세지이면
    alert("{{ msg }}")// 경고(msg내용으로)창을 띄워줘라 
{% endif %}

 

favicon

<<-- 이 스크린 샷에서 글자 앞에 있는 T라는 이미지가 favicon이다.

 

<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">

static이란 폴더 안에 favicon.ico란 이미지로 favicon을 만들었다.

( https://www.favicon-generator.org/ ) <<-- favicon 만들어 주는 사이트

( https://hongpage.kr/28 ) <<-- 사이트 사용법