22.07.11 TIL 항해 99(1일차)

1일차 오티를 마치고 첫 시작을 하였다.

생각보다 너무 막막한 부분들이 많았고 

모든것이 어려웠다. 하지만 이 어려움이 나의 것이 될것이라 믿으면서 

오늘도 마무리 한다.

 

1일차 TIL오늘 배운것들

 

• 웹화면  배경 유튜브 링크로 만드는법
• 정규표현식
• 로그인 프로세스
• 오류해결
•  

엉덩이가 승리한다!!

---

웹화면  배경 유튜브 링크로 만드는법

 

웹에서 유튜브 영상을 배경으로 첫인트로 화면을 구성하고 싶어서 

방법을 찾던중 아래와 같은 블로그를 발견하였다.

 

유튜브에 있는 동영상을 배경화면으로 보여줄 수 있습니다.

video 태그로 보여주는 방법과 유튜브에 동영상을 업로드하고 불러오는 방법이 있습니다.

유튜브를 이용하면 트래픽 비용을 줄일 수 있다는 장점이 있는데, 영상 정보나 컨트롤 바, SNS 공유 등 불필요한 내용까지 보여준다는 단점도 있습니다. 그 단점을 해결해주는 것이 jquery.mb.YTPlayer 입니다. jquery.mb.YTPlayer을 이용하면 동영상만 깔끔하게 보여줄 수 있게 도와줍니다.

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.4/css/jquery.mb.YTPlayer.min.css">
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.4/jquery.mb.YTPlayer.min.js"></script>
<div id="background" class="player" data-property="{
  videoURL: 'https://youtu.be/8ZMxLZqL73M',
  mute: true,
  showControls: false,
  useOnMobile: true,
  quality: 'highres',
  containment: 'body',
  loop: true,
  autoPlay: true,
  stopMovieOnBlur: false,
  startAt: 0,
  opacity: 1
}">
</div>

• videoURL : 동영상의 주소입니다.
• mute : 자동 재생하려면 음소거를 해야 합니다.
• showControls : 재생 등 컨트롤 바를 보여줄지 정합니다.
• useOnMobile : 모바일 에서도 재생할지 정합니다.
• quality : 영상 품질을 정합니다.
• containment : 영상이 들어갈 위치입니다. body인 경우, 웹브라우저에 꽉 차게 영상을 보여줍니다.
• loop : 반복 여부를 정합니다.
• autoPlay : 자동 재생 여부를 정합니다.
• stopMovieOnBlur : 다른 프로그램을 활성하는 등, 포커스가 이동했을 때 재생 여부를 정합니다.
• startAt : 시작 시점을 정합니다.
• opacity : 투명도를 정합니다.

자세한 사항은 아래 블로그 참고

 

유튜브 동영상을 배경으로 사용하는 방법

 

 

---

정규표현식

function is_nickname(asValue) {
    var regExp = /^(?=.*[a-zA-Z])[-a-zA-Z0-9_.]{2,10}$/;
    return regExp.test(asValue);
}

function is_password(asValue) {
    var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z!@#$%^&*]{8,20}$/;
    return regExp.test(asValue);

/^(?=.*[a-zA-Z])[-a-zA-Z0-9_.]{2,10}$/;
()는 필수적으로 들어가야하는 것

[]들어가도 되는것

{}자릿수

 

---

로그인 프로세스

 

1)아이디와 패스워드 입력한 것을 서버로 전달한다.

2.서버는 받은정보(아이디와 패스워드)와 매칭되는 유저가 있는지 확인

3.확인해서 있을시에 토큰을 만들어서 클라이언트한테 던져준다.

4.클라이언트는 토큰을 쿠키에 저장한다.

 

추가)토큰에 포함된내용

검증받은 사람의 아이디+ 검증이 유효한 시간

---

오류해결

 

token = jwt.encode(payload, SECRET_KEY, algorithm='HS256').decode('utf-8') AttributeError: 'str' object has no attribute 'decode'

 

문제원인

 

pyjwt 기존 버전에서는 jwt.encode()함수의 리턴값이 '바이트 문자열'이라는 자료형이었기 때문에 뒤에 .decode('utf-8')를 붙여 일반 문자열로 바꾸어 주었음. 2.0.0 버전부터는 이 함수의 리턴값이 일반 문자열이기 때문에 여기에 또 .decode('utf-8')를 붙여주게 되면 문자열에는 이런 메소드가 없으므로 에러가 난다.

 

@app.route('/sign_up/save', methods=['POST'])
def sign_up():
    username_receive = request.form['username_give']
    password_receive = request.form['password_give']
    password_hash = hashlib.sha256(password_receive.encode('utf-8')).hexdigest()
    doc = {
        "username": username_receive,                               # 아이디
        "password": password_hash,                                  # 비밀번호
        "profile_name": username_receive,                           # 프로필 이름 기본값은 아이디
        "profile_pic": "",                                          # 프로필 사진 파일 이름
        "profile_pic_real": "profile_pics/profile_placeholder.png", # 프로필 사진 기본 이미지
        "profile_info": ""                                          # 프로필 한 마디
    }
    db.users.insert_one(doc)
    return jsonify({'result': 'success'})

token = jwt.encode(payload, SECRET_KEY, algorithm='HS256').decode('utf-8')
부분을 token = jwt.encode(payload, SECRET_KEY, algorithm='HS256') 바꾸거나 jwt 2.0.0버전을 이전 버전으로 바꾼다.

 

아래 블로그 참고하였습니다

https://velog.io/@lipton/%ED%95%AD%ED%95%B499-1%EC%A3%BC%EC%B0%A8-%ED%9A%8C%EA%B3%A0

항해99 5일차 미니과제 회고