[항해99] TIL 사전과제 스터디 D-20

오늘의 목표

• [x] detail.html의 style 수정하기
• [x] 팀 github 다시 만들기
• [x] 내 분량 올리기
• [x] 몽고DB 폴더 나누는법 찾아보기
• [ ] 만화록을 존경장처럼 리팩토링 계획짜기

언제나 계획짜는게 어렵다...

백엔드(jwt, jinja, route)를 연습할 수 있는 코드

• 항해99의 첫프로젝트에서 백엔드분야에 나오는 키워드들을 하나의 계단형식의 예제를 만들면 좋을 것 같아 오늘 실행에 옮겼다.
  • 우선 1단계는 flask의 route와 render_template를 이용하여 라우팅 기능을 구현하는것
  • 2단계는 jinja와 DB를 이용하여 index가 렌더링 되었을때 DB에 저장된 내용을 화면에 뿌려주는 기능
  • 마지막 3단계는 jwt와 cookie를 이용하여 로그인 기능을 작게나마 구현하는 것이다.
• 이렇게 백엔드를 기능단위로 나누어 코드를 정리해두니 나중에 백엔드적으로 그 기능이 헷갈려도 잘게 쪼개진 예제를 보면 바로 이해가 되어서 생산성이 더 높아진 것 같다.
• 앞으로도 종종 가능하다면 이런식으로 코드들을 예제코드 형식으로 정리하면 매우 좋을 것 같다는 생각이 들었다.

오늘의 에러들

• 우선 flask의 redirect와 url_for을 이용해서 로그인이 성공했을때 다른페이지로 넘어가는 것을 백엔드에서만 담당하게 기능을 구현하려 했었다.
• 여기서 나온 문제는 다른때에는 문제가 없는데 함수내에 세션이 있을때 요상하게 에러코드도 없이 그냥 실행이 안된다는 점이다.
• redirect(url_for('index')) 를 백엔드에서 print하면 <Response 189 bytes [302 FOUND]> 라는 print를 하기에 연관검색을 해봤다.

https://okky.kr/article/285186

OKKY | aJax POST로 넘길때 302에러 도와주세요 ㅠㅠ

• 이 사이트가 내가 궁금했던 부분을 제일 해결해주는 답이었는데
• 결론은 redirect를 쓸 경우 서버쪽에서 문제가 있을 수 있으니 프론트엔드에서 window.location.(href or replace)을 이용한 방식으로 다른페이지로 넘어가는 것이 좋다는 내용이다.
• 내가 생각하기에도 302FOUND를 뱉으며 구글링 내용들은 HTTP연관 내용들이 나오는데 시간을 많이 들이면 언젠가는 해결할 수 있겠지만
• 뚜렷한 대체 방법이 있고 또 그 방법들을 다른 사람들도 많이 사용하는 것을 아는 시점에서 나는 redirect를 쓸 필요는 없다고 생각했다.

세션과 쿠키

• 전에 세션스토리지를 이용한 프론트단에서만의 to-do-list를 배워본적이 있다.
• 정확히 기억나지는 않지만 이번에 그 방식을 다시금 본 것 같아 반가웠다.
• 아직은 세션과 쿠키(jwt도 포함)를 잘은 모르지만 이제는 적어도 구현은 할 수 있는 단계에 온 것같아 좋다.
• 이해는 어려울 것 같지만 계속 쓰다보면 감은 잡을 것 같다.

---

백엔드 예제의 키워드와 그 요구조건들

flask의 route와 render_template 예제

index.html

apple.html

banana.html

orange.html

• 위의 기능을 이용해 웹에서 주소창에 localhost:5000 다음에 /apple, /banana, /orange 를 넣으면 각 페이지의 url에 맞는 html을 렌더링하는 app.py를 만들어주세요.
• orange는 프론트의 코드없이 url로만 이동할 수 있습니다.(apple, banana도 가능)

jinja와 DB를 이용한 렌더링 예제

index.html

완성시 구현되어야하는 index.html 화면

• jinja와 mongoDB를 이용해서 index페이지가 렌더링되면 DB의 정보에 따라 정보가 나올 수 있게 app.py를 만들어 주세요
• index에는 렌더링 되자마자 실행되는 함수에 api가 url:"/info" 로 되어있으니 app.py에서 api를 그것에 맞추어 크롤링하여 DB에 데이터를 먼저 넣으셔야 합니다.
• !!!저희가 클론하고 있는 여행프로젝트를 참고하시면 수월합니다.(여기서는 jinja와 DB의 흐름을 알아볼것이기에)!!!

(심화)jwt와 cookie를 이용한 로그인 예제

login.js

index.html

login.html

signup.html

• 로그인 예제를 만들어주세요
• 회원가입은 아이디와 패스워드를 적고 회원가입을 누르면 됩니다.
• !!!저희가 클론하고 있는 여행프로젝트를 참고하시면 수월합니다.(여기서는 jinja와 DB의 흐름을 알아볼것이기에)!!!
  • 회원가입에 성공시 alert창이 뜨며 회원가입을 축하한다고 뜨고 login 페이지로 이동합니다.
  • 로그인에 성공시 루트페이지인 / 로 이동합니다.
  • 로그인에 실패시 아이디/비밀번호가 일치하지 않습니다. 라고 alert창이 뜹니다.