크래프톤정글 0주차 5; bulma, Jinja2 템플릿 적용, 회원가입+로그인 기능 완성

bulma 사용하기

출처: https://bulma.io/documentation/overview/start/
https://medium.com/@im_37456/bulma-vs-tailwind-79da998c1d7a

왜?

장점:

• Bulma는 Mobile-First 기준으로 Responsive 구조를 짜기 좋게 나왔다고 함
• 확실히 Bootstrap보다는 편리한 클래스 활용
• 부트 스트랩보다는 클래스명이 좀 더 Human Readable했다.
• Bulma는 마치 부트스트랩 6.0 과 같은 느낌으로 멋진 테마를 쓰기 쉽게 제공
• 부트스트랩과 달리 자바스크립트를 사용 안하기에 더 속도가 좋다고 함(요것은 기존 우리가 사용한 CSS 프레임워크에 대한 것)

단점:

• Bulma는 Hover, Focus등 Pseudo Selector까지는 잘 지원하지 않음
• Human-readable 하다는건 결국 이게 뭔 속성인지 다시금 메뉴얼을 찾아봐야 한다
• 각 클래스의 의미를 파악해야해서 학습곡선이 높음

결론:
우리 팀은 bulma의 사용법이 좀 더 휴먼 리더블(직관적)하다는 장점을 보고 선택함

어떻게?

• 프론트에서
  • jinja2 레이아웃 파일에 cdn 추가 or 각 페이지마다 삽입

jinja2 템플릿 적용

출처: https://wings2pc.tistory.com/entry/웹-앱프로그래밍-Jinja2-extends-사용해서-html-나누기layout

왜?

jinja2 템플릿의 extends 기능을 사용하면, 전 페이지에 공통적으로 들어가는 부분을 레이아웃으로 만들어 사용할 수 있음. (타 웹언어의 include의 기능과 유사하다고 함.)
(ex. nav바의 경우 모든 페이지에서 보여야하므로 이 기능이 없다면 모든 페이지에 nav바 코드를 넣어주어야 하기에 유지보수가 번거로울 것)

어떻게?

• 프론트에서
  • 레이아웃 파일을 만듦
    • 공통되는 부분을 작성함
    • 페이지별로 달라져야 할 부분(ex. 페이지의 타이틀, cdn, style요소, body요소, script 요소 등)에 {% block title %}{% endblock %} 와 같은 진자 문법의 태그를 적용함
  • 레이아웃을 적용할 다른 파일
    • 맨 위에 {% extends "layout.html" %} 처럼 적용하여 레이아웃의 파일을 리퍼런스를 추가함
    • 각 파일의 개별적인 태그 내용은, 레이아웃에서 정의한 진자의 block 태그 안에 작성함
      ex) {% block title %}해당 페이지의 타이틀명{% endblock %}

회원가입 기능 완성

출처: https://brunch.co.kr/@businessinsight/65

왜?

어떻게?

• 프론트에서
  • 회원가입 페이지 생성
  • 가입하기 함수
    • 필드 값 입력 받음(이름, 비밀번호, 비밀번호 확인)
    • 조건문 처리
      • 아이디를 입력하지 않은 경우
      • 비밀번호 입력하지 않은 경우
      • 비밀번호와 비밀번호 확인이 일치하지 않은 경우
    • ajax로 서버에 api에 따라 요청(/sign_up, post)
      • 유저가 등록하고자 하는 이름, 비밀번호 전송
      • 데이터 수송신이 성공하면(서버단에서 DB에 동일한 이름의 유저가 없다고 응답)
        • 로그인 페이지로 이동(/sign_in, get)
      • 데이터 수송신 실패하면(서버단에서 DB에 동일한 이름의 유저가 있다고 응답)
        • 동일한 이름을 가진 회원으로 가입 불가 안내 알림
        • 동명이인의 경우 다른 아이디 만들기 안내
• 서버에서(/sign_up, post)
  • 유저가 등록하고자 하는 이름, 비밀번호 전송 받음
  • DB에서 이름 검색
  • DB에 동일한 이름의 유저가 없으면
    • 등록한 비밀번호를 sha256 알고리즘으로 해쉬화하여, 해쉬화된 비밀번호로 저장 이 부분 더 자세히 이해 필요
      password_hash = hashlib.sha256(new_pwd.encode('utf-8')).hexdigest()
    • name과 해쉬화된 비밀번호를 db에 저장
    • 클라이언트에 성공 메시지 전달
  • DB에 동일한 이름의 유저가 있으면
    • DB에 등록 실패
    • 클라이언트에 실패 메시지 전달

로그인 기능 완성

출처: #todo
https://taehyeki.tistory.com/151

왜?

어떻게?

• 프론트에서
  • 로그인 페이지 생성
  • 쿠키를 사용하므로 jquery-cookie cdn을 삽입
  • 사용자로부터 아이디와 비밀번호를 입력 받음
  • 로그인 함수
    • 아이디를 입력하지 않은 경우 조건 처리
    • 패스워드를 입력하지 않은 경우 조건 처리
    • ajax로 서버에 api에 따라 요청(‘/sign_in’, post)
      • 유저가 등록한 이름과 비밀번호를 서버에 전송
      • 데이터 수송신이 성공하면(서버에서 DB에 '이름 + 비번’이 있다고 응답 + 토큰 송신)
        • Jquery의 쿠키 관련 함수를 이용 → 서버에서 받아온 토큰을 'mytoken’이라는 키 값으로 쿠키에 저장하고, 이 쿠키를 경로 '/'에 저장 이 부분은 좀 더 자세히 이해 필요
          $.cookie('mytoken', response['token'], { path: '/' });
        • 일기를 작성하는 메인 페이지로 이동 (‘/mainpage’, get)
      • 데이터 수송신에 실패하면(서버에서 이름과 비밀번호가 일치하지 않다고 응답)
        • 로그인 실패 에러 메시지
• 서버에서(‘/sign_in’, post)
  • 유저가 로그인을 시도한 아이디와 비밀번호를 클라이언트에서 받음
  • 받은 패스워드를 utf-8로 인코드한 것을 해쉬화 같은 문구를 해쉬화하면 동일한 해쉬가 생성되나
    password_hash = hashlib.sha256(password_receive.encode('utf-8')).hexdigest()
  • DB안에 해당 유저와 해쉬화된 비밀번호 값으로 존재하는지 검색
  • DB에 있으면
    • 페이로드에 아이디와 만료기간 값을 넣음 토큰, 쿠키, 세션의 개념 이해 필요
    • 시크릿 키와(관리자가 설정한 문구 같은 것), 페이로드를 'hs256’으로 암호화하여 token에 담음
    • 성공메시지와 토큰을 클라이언트에 전달
  • DB에 없으면
    • 실패 메시지
• 서버에서(‘/mainpage’, get)
  • 쿠키로부터 토큰을 가져옴
  • 토큰 검증 함수를 실행해서 토큰 만료인 경우
    • 로그인 페이지로연결
  • 토큰 검증 함수를 실행해서 유효하지 않은 토큰인 경우
    • 로그인 페이지로 연결
    • 오늘의 날짜 값과 일기쓰기 페이지로 렌더링