내일배움캠프 211006 : TIL (Today I learned)

1. 정적 웹사이트? 동적 웹사이트?

정적 웹페이지
서버에 저장되어 있는 그대로 html전송
ex 회사 소개

동적 웹페이지
요청 정보에 따라 html을 처리하여 전송
ex 블로그, 날씨정보

2. csr? ssr? 복합적인 방법?

csr
자바스크립에 데이터를 포함해서 보낸 후, 클라이언트 쪽에서 html을 완성하는 방법
ssr
서버 쪽에서 템플릿 html에 데이터를 끼워 넣어 완성된 형태의 html을 보내주는 방법

-> jinja2 템플릿 언어, 템플릿이 되는 html문서에 데이터가 들어갈 곳을 표시해놓는 역할

복합적인 방법
클라이언트 쪽에서 ajax 요청을 보내서 서버에서 데이터를 받아와 html을 완성하는 방법

3. 페이지 이동 방법

- 서버 코드

@app. route('/') / < 주소 값
def main():
return render_template("index.html") < html 불러오기

- 클라이언트 코드

a 태그 사용 시에는 파이썬과 동일한 주소 값만 입력해주면 된다.
<a href="/detail"> 상세페이지로 가기 </a>

버튼 사용 시에는 onclick을 이용해서 window.location.href 에 주소 값을 넣어주면 된다.
<button onclick="window.location.href='/'"> 메인으로 돌아가기 </button>

4. jinja2 템플릿 언어 설정

5. jinja2 템플릿 사용법 알기

서버 쪽에서 예를 들면 myname 이란 변수에 내용을 넣고, html로 전달하고 싶을 때,
return 부분에 myname 값을 넣어서 전달할 수 있다.
name에 myname의 값을 담아서 전달했다면,
html에서 서버 쪽 데이터를 받아오는 방법은 {{값}} 이렇게 하면 불러올 수 있다.

- index.html 클라이언트 코드

- 서버쪽 코드
@app.route('/')
def main():
myname = 'sparta'
return render_template("index.html",name=myname)

6. 자바스크립트 기존 id값 내용 지우기

$('#gu-list').empty() <- 기존 id 값의 내용을 지운다.

7. 주소 값에서 입력되는 글자를 받는 방법

ex) 주소창에 로컬 서버/detail/와우라고 검색하면, 와우라는 글자가 keyword에 저장이 되고, 그것을 html에서 불러올 수 있다.

서버 쪽 코드
@app.route('/detail/<keyword>')
def detail(keyword):
return render_template("detail.html", word=keyword)

클라이언트 코드
<h3>받은 단어는 {{ word }}</h3>

8. Ajax 오픈 api 사용해서 제이슨 값 클라이언트 사용하기

9. Ajax 오픈 api 사용해서 제이슨 값 클라이언트 사용하기

10. jinja문법 사용하기

11. 웹사이트에서 개발자 도구로 css 확인하는 방법

12. 웹사이트를 어떻게 동작시킬지 먼저 설계하기

아이콘 사용 : https://fontawesome.com/v4.7.0/

13. ajax 구성 확인하기

$.ajax({
    type: "GET",
    url: "https://owlbot.info/api/v4/dictionary/owl",
    beforeSend: function (xhr) {
        xhr.setRequestHeader("Authorization", "Token [내토큰]");
요청을 보내기 전에 이거를 먼저 해라. 이건 헤더 정보를 보내라.

    },
    data: {},
    error: function (xhr, status, error) {
        alert("에러 발생!");
부가기능 에러가 발생해서 정보를 가져오지 못할 경우 에러를 발생시켜라
    },
    success: function (response) {
        console.log(response)
    }
})

14. api 를 활용해서 ajax와 jinja 비교

- Ajax

- jinja

ajax 요청을 보내서 사전 api 데이터를 받아오고 채워 넣는데 시간이 걸리기 때문에,
한번 페이지를 띄운 후, 바뀔 일이 없는 부분에 대해서는 jinja 같은 템플릿 언어를 이용해서 html을 완성해서 보내주는
서버사이드 렌더링을 해주는 것이 좋다. 속도도 더 빨라진다.

15. jinja 사용 시 확인, {{}}을 이용해서 서버값을 받을 때 두 가지 형태로 사용이 가능하다

16. jinja if문 사용 시 None 같은 경우는 안 넣고 사용을 해도 값이 있을 때만 True로 판정을 한다.

17. jinja 문법 |safe는 들어오는 값이 html문서일 수도 있는데 그걸 그대로 표시하게 해주는 의미이다.

encode('ascii','ignore').decode('utf-8')는 문자열을 아스키코드 형태로 인코딩해주고 바꿀 수 없는 것은 무시하고, 그 후에 다시 문자열로 변경한다. 이상한 문자들을 없애는 방법이다.

18. 튜터님의 조언

오늘 2차 프로젝트 계획 제출 후, 튜터님의 방문이 있었다.

프로젝트 진행 시 몽고 db를 어떻게 나눠서 하면 좋을지에 대해서 고민을 했었는데, 튜터님의 조언을 듣고 컬렉션을 나누어서 로그인을 관리하면 좋을 것 같다는 생각이 들었다.

그리고 파이썬 작업 시 노란 밑줄 문제가 발생 관련해서 자료는 pep8 홈페이지 들어가서 보았지만 자료가 너무 길고 해서 질문을 하였다.

이렇게 나올 때 Reformat the file를 클릭하면 해결이 되는 것을 볼 수 있다.

구글에 PEP8을 검색하면 내용이 나오기 때문에 읽어보면 좋다고 하셨다.

그리고 지금 코딩을 공부하면서 불안한 요소들이 많이 있었다. 올바르게 하고 있는 게 맞는 것일까?

백지상태일 때의 코드 작성의 두려움, 그리고 구글링을 통해서 코드 응용을 하고 있는데 맞는 것인가에 대한 것들.

튜터님은 완벽한 개발자는 없다고 하셨다. 그리고 캠프가 끝난 후에도 빈 화면에 대한 두려움은 있을 것이다라고 말씀하셨다. 그러나 프로젝트를 통해서 새로운 것을 구현하며, 만들 수 있는 사람이 될 수 있다고는 해주셨다.

현재 내가 제대로 하는 건지 항상 고민이 되었는데, 오류를 해결하는 부분들도 그렇고 지금처럼 계속 진행해보면 될 것 같다. 그리고 지금 강의를 들으며 배우고 있지만, 왜 S3를 쓰는지? jwt는 왜 쓸까? 이런 것에 대해서 제대로 알지 못하였다. 튜터님은 스터디를 해보면서 저런 부분의 개념들도 알아가는 것이 좋다고 말씀해주셨다. 스터디를 하며 서로가 하나씩 정보를 발표하는 식으로 하면 좋다고 해주셨다. 튜터님이 말씀해주신 내용들을 참고해서 앞으로 남은 시간 동안 더 효율적으로 성장할 수 있도록 만들어야겠다.

오늘 느낀 점

강의를 들으며, 배운 내용을 가지고 어떻게 응용할 수 있을지 생각해보아야겠다.
스터디를 활용하면 좋을 것 같다.

내일 할 일

원격강의, 프로젝트
TIL (Today I learned) 작성하기
체크인, 체크아웃 하기

호아's Diary