💻 웹 프로그래밍 A-Z 심화 2주차
2-3
jinja2
-
|int파이프 라인 뒤에 int 써주면 정수로 받으라는 뜻
미세먼지 api 내 구의 이름과 미세먼지 수치를 불러오는 코드에서 쓰임<li>{{ rows[0]["MSRSTE_NM"] }}: {{ rows[0]["IDEX_MVL"]|int }}</li> -
변수 설정할 때는 {%
set[변수이름] %}{% set gu_name = rows[0]["MSRSTE_NM"] %} -
반복문, 조건문은 파이썬처럼 써주기! but 닫아줘야함
{% for row in rows %} {% set gu_name = row.MSRSTE_NM %} {% set gu_mise = row.IDEX_MVL %} {% if gu_mise >= 100 %} <li>{{ gu_name }}: {{ gu_mise }}</li> {% endif %} {% endfor %}
URL으로 파라미터 넘겨주기
- jsx로 Ajax에서 GET url을
/api/get_exs?word_give=hi로 지정하면
이렇게 ?뒤의 word_give가 받은 값, 그러니까 hi 를 받아서 word_receive 넣을 수 있음.@app.route('/detail') def detail(): word_receive = request.args.get("word_give") return render_template("detail.html", word=word_receive)
request는 flask 자체 함수 import해주기
2-4
API 호출
- 파이썬의 경우
dictionary 뒤에 들어가는 단어의 정보를 가져옴(아래는 owl)r = requests.get("https://owlbot.info/api/v4/dictionary/owl", headers={"Authorization": "Token [내토큰]"}) result = r.json() - Ajax의 경우
$.ajax({ type: "GET", url: "https://owlbot.info/api/v4/dictionary/owl", // header 정보 보내기 beforeSend: function (xhr) { xhr.setRequestHeader("Authorization", "Token [내토큰]"); }, data: {}, // 토큰 값에 문제가 있거나 에러가 생기면 얼럿 띄우기 error: function (xhr, status, error) { alert("에러 발생!"); }, // 성공하면 콘솔로 확인 success: function (response) { console.log(response) } })
2-5
API 설계
2-8, 9
- Ajax
- 발음이 null일 경우 빈 칸이 나오도록 예외 처리해주는 코드
값이 없으면 python은 none, jsx는 null 으로 처리된다.if (response["pronunciation"]==null) { $("#pronunciation").text("") } else { $("#pronunciation").text(`/${response["pronunciation"]}/`) }
- 발음이 null일 경우 빈 칸이 나오도록 예외 처리해주는 코드
- jinja2
- 발음이
null일 경우 빈 칸이 나오도록 예외 처리해주는 코드{% if result.pronunciation %} <h5 id="pronunciation" style="display: inline;">/{{ result.pronunciation }}/</h5> {% endif %} |safe데이터에 html태그가 있는 경우 안전하므로 그대로 가져오라는 뜻<span class="example">{{ definition.example|safe }}</span>특문 제거아스키 코드로 변환되지 않으면 무시하고 utf-8으로 변환<br>{{ definition.definition.encode('ascii', 'ignore').decode('utf-8') }}<br> {% if definition.example %} <span class="example">{{ definition.example.encode('ascii', 'ignore').decode('utf-8') }}</span> {% endif %}
- 발음이
2-10
URL로 변수값 넘기기
(2-3 참고)
status_receive = request.args.get("status_give", "new") #status_give로 들어온 값을 변수로 받되, 기본값은 new로 지정 return render_template("detail.html", word=keyword, result=result, status=status_receive){% if status=="new" %} //status_give로 넘겨준 값이 new이면 <button id="btn-save" class="btn btn-outline-sparta btn-lg" onclick="save_word()"> <i class="fa fa-floppy-o"></i> </button> {% else %} //그렇지 않으면(status_give로 넘겨준 값이 old이면) <button id="btn-delete" class="btn btn-sparta btn-lg" onclick="delete_word()"> <i class="fa fa-trash-o"></i> </button> {% endif %}
2-12
겹치는 CSS는 따로 빼서 link로 적용시켜주는 게 좋다.
static 폴더에 만들어서 넣어주면 된다.
<link href='{{ url_for("static", filename="mystyle.css") }}' rel="stylesheet">잘 적용되지 않는다면 캐시 문제일 수 있으니 강제 새로고침(Ctrl + Shift + R)
2-14
|tojson list의 값이 깨지지 않고 json형태로 넘어오도록 지정
push() list에 값 넣어주기
let words = {{ words|tojson }};
let word_list = [];
for (let i = 0; i < words.length; i++) { //리스트를 딕셔너리화
//딕셔너리 안에 단어가 word로 들어있는데 그걸 word_list라는 리스트 안에 넣어줌
word_list.push(words[i]["word"])
}toLowerCase() 대문자든 소문자든 같다고 알려주기 위해서 소문자화
includes() 포함되어 있는지 확인
highlight 클래스를 추가하는데, 같은 부모 태그에 속한 형제 중에 이미 같은 클래스를 갖고 있으면 없애주기
scrollIntoView() 찾은 단어 기준으로 스크롤 이동
function find_word() {
let word = $("#input-word").val().toLowerCase();
if (word == "") {
// 빈 문자열이면 얼럿
alert("please write something first :)")
return
}
if (word_list.includes(word)) {
// 리스트에 있으면 하이라이트
$(`#word-${word}`).addClass('highlight').siblings().removeClass('highlight');
$(`#word-${word}`)[0].scrollIntoView();
} else {
// 리스트에 없으면 상세 페이지로
window.location.href = `/detail/${word}?status_give=new`
}
}2-15
사전에 없는 단어일 때
- 값을 잘 받아왔을 때 상태 코드가 200이므로 200이 아닐 때 main으로 리다이렉트
if r.status_code != 200: return 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") return render_template("index.html", words=words, msg=msg) - index.html에서 얼럿 띄우기
{% if msg %} alert("{{ msg }}") {% endif %}
SAVE 💾
튜터님은 상세 페이지부터 만들어가시는 것에 놀랐다. 뭐랄까 내가 노베이스에서 만들었으면 검색창부터 냅다 만들었을 각...ㅎ 일단 이동할 곳을 만들어두고! 연결시키는 건 그 다음으로.
테스트는 완전 망했다ㅎ 유니크한 번호 넣는 거 사실 그 좋아요 할 때도 하루죙일 걸렸고 이거 들으면서도 띠용때용 했는데 갑자기 튀어 나와서 멘붕ㅜㅜ 저장하는거? 번호 빼고는 넣었고 get이라도 구현할 걸... 그거 번호 붙이느라 이도저도 아니게 되어버렸다...아직 초보 중의 초보라는 걸 이미 알고는 있었는데 뼈에 새겨진 기분^^;;
