- 쿠키세션 /JWT 토큰
쿠키 : 쿠키의 기반은 stateful 이다.
클라이언트와 서버 둘다 인증 정보를 모두 유지하고 있는 상태를 전제하에 진행된다.
그리고 쿠키는 기본적으로 도메인을 기반으로 설계가 되어있기에, 서로 다른 도메인에서 사용할 수 없다.
JWT토큰 : 토큰 기반은 stateless 이다.
서버는 토큰을 발급만 하고, 클라이언트에서 저장된다.
만약 사용자가 로그아웃한다면, 클라이언트에 저장된 토큰만 소멸될 뿐, 서버와의 상호작용은 일어나지 않는다.
그리고 쿠키와 달리 도메인의 영향을 받지 않는다.
참고사이트 https://mygumi.tistory.com/375
- 해시, 암호화
해시(Hash)와 암호화(Encryption)의 차이점이 무엇인가요?
둘 다 암호화 기법이지만 Hash는 단방향 암호화 기법이고 Encryption은 양방향 암호화 기법이다.
쉽게 설명하면 Hash는 평문을 암호화된 문장(텍스트)으로 만들어주는 기능을 하고,
Encryption은 평문을 암호화된 문장(텍스트)로 만들어주는 기능을 하고 + 암호화된 문장을 다시 평문으로 만드는 복호화 기능도 한다.
참고사이트 https://jeong-pro.tistory.com/92
- 인코딩 디코딩
인코딩(ENCODE) :입력 데이터를 컴퓨터 속에서 사용하는 코드로 변환하는 것 (부호화)
디코딩(DECODE): 인코딩의 반대 개념이라고 보면 된다. 복호화라고도 하는데 부호화(Encoding)된 정보를 부호화되기 전으로 되돌리는 처리 방식을 말한다.
인코딩과 디코딩을 하는 이유
국가별로 언어가 다르듯이 각 언어마다 하나의 규격으로 표준화시켜 국가별 또는 개인의 요구에 따라 사용할 수 있도록 문자 집합을 만들고, 이러한 문자 집합을 가지고 부호화 하여 사용하기 위한 것이 인코딩과 디코딩을 하는 이유라고 볼 수 있다.
아스키코드, 유니코드 참고사이트 https://freestrokes.tistory.com/71
- 이미지 파일 업로드 , DATE TIME함수
부트스트랩 사용법 웹개발 플러스 1주차 코드 참고
- 토글 클래스, ADD, REMOVE CLASS
토글 클래스 : 클래스가 없는id에는 붙여주고 있는것에는 삭제해주는 기능
add,remove class : 클래스를 추가,삭제해주는 기능
웹개발 플러스 3주차 코드 참고
- 정적 웹페이지 / 동적 웹페이지
- 동적 웹페이지 CSR
자바스크립트에 데이터를 포함해서 보낸 후 , 클라이언트 쪽에서 HTML을 완성하는 방법
- 동적 웹페이지 SSR (Flask jinja2)
서버쪽에서 템플릿 HTML에 데이터를 끼워넣어 완성된 형태의 HTML을 보내주는 방법
즉,자바스크립트 없이 HTML페이지 한페이지에 다있다. 1개
- 복합적인 방법 (AJAX) (자주 쓰던것)
- 클라이언트쪽(고객)에서 요청이 들어오면(클릭=GET요청) 서버는 HTML에 자바스크립트를 심어서 보내주고
- 페이지가 뜨고나면 자바스크립트 코드가 돌면서 AJAX가 다시 서버로 요청을 보내고 데이터를 다시 받아오는 방법
서버에 요청 2번
- Jinja2
- Flask 프레임워크에서 사용하는 템플릿언어
- '템플릿'이 되는 HTML 문서에 데이터가 들어갈 곳을 표시해 놓는 역할
- crtl + alt + s (setting) 들어가서 template languages를 jinja2로바꿔야한다.
- 활용법 (open api 데이터를 가져올 때 패키지 requets 가 필요하다.)
위 이미지 처럼 받아오면 html쪽 자바스크립트 함수는 필요없게된다.
- 브라우저에 엔터를 치는 행위가 서버입장에서는 get방식을 요청하는 것이며
서버에서 get방식으로 입력받은 데이터를 받을때는 request.args.get("변수명") 받는다.
request는 flask에 자체적으로 있는 함수다.
- 주소의 일부를 변수로 받아서 사용가능하다.
주소 일부를<keyword>라는 변수에 받는다. detail함수 옆에 keyword를 입력하고 word에 keyword값을 넣어서 html쪽에서 사용한다.
- API키(open API악용 사례를 방지하기 위해서 각 사용자에게 API키를 부여한다.)
-
플라스크 서버(파이썬)에서 API요청을 보낼 때
rquest.get 쪽에 f문자열을 사용
-
클라이언트(자바스크립트)에서 API요청을 보낼 때
(jqury를 임포트 해놓았으면 그 해당 페이지 검사 -> console에서 ajax를 해볼 수 있다.)
데이터를 받기위해 해당 오픈api의 헤더,토큰 값을 넣어줘야한다. 성공하면 값을 받고 아니면 에러를 받는다.
그리고 url 쪽에 주소쪽의 값을 변수로 넣을때 자바스크립트는 빽틱``을 넣어서 사용해야하는 것 주의 하자
- API 설계 시 어떻게 해야할까?
나중에 프로젝트 할때 참고 하자!
(데이터를 뽑아오는 것을 먼저 만들어야(상세페이지) 나중에 메인 페이지를 만들 때 더 수월하다고한다.)
여기서부터는 기본 개념보다는 웹개발 플러스 하면서 헷갈리거나 자꾸 틀리던것
-
aws 배포할때
둘다 동일 한 방법이다. 2번째가가 더 직관적인 것같다.
-
ajax로 api 데이터를 가져올 때 딕셔너리에 리스트 형태와 키값이 섞여있을 때
리스트 형태는 한번 변수에 담고 for문 돌린다고 생각하고 그냥 키값은 바로 들어가게 입력
예외 처리하는 것도 참고 (for문 쪽 예외처리는 temp_html을 비워주고 해주어야한다.)
꿀팁
- ctrl+d는 해당줄 복사
- jinja에서 값을 가져올때 둘다 동일한방법이다. 아래가 더편하다.
- css를 따로 적용했는데 안되면 ctrl+shift+r , 커맨드+쉬프트+알 눌러서 캐시무시하고 다가져와 입력해주면됨
[아래는 예외처리들]
-
if문에 그냥 jinja 키값만 쓰면 true로 인식한다.(빈문자열이아닌 값이나 아무거나 있다면)
-
앞에 받아오는 값이 html 태그라서 브라우저에 태그가 그대로 노출 될 경우 safe로 노출시키지말라고 태그 쓰라고 명령하는것, |int쓰면 소수점 없애고 정수만 나오게하는 것
-
아래는 다음과 같다.
definition.example 문자열을 enecode가 ascii 코드로 바꿔줘, 아스키코드가 아닌 건 ignore하라고 명령하고. 그 다음 decode는 ('utf-8')을 다시 문자열로 바꿔줘
-
jinja로 DB에서 꺼내온 즉, 오픈API에서 따서 저장된 데이터를 html파일과 함께 렌더된 데이터를 바로 쓰면 이상한 값이 나온다. 때문에 tojosn으로 json데이터라고 알려주면 정상적으로 데이터가 보인다.
출처 : https://mygumi.tistory.com/375 JWT와 COOKIE
출러 : https://jeong-pro.tistory.com/92 해시,암호화 차이점
출처 :https://freestrokes.tistory.com/25 엔코딩과 디코딩
출처 : 스파르타 코딩 클럽 웹개발 플러스 1~2주차
