4주차-로그인,회원가입 기능

gyu·2022년 6월 5일
0

스파르타

목록 보기
13/13

Bulma-bootstrap과 비슷한 프레임워크
미리 정해진 모습의 클래스를 가져다 쓸 수 있는 무료 CSS 프레임워크

장점?
순수 CSS로만 이루어짐-자유로운 커스터마이징 가능
사용법이 직관적
최신기술을 많이 사용함

hero banner - 가장상단배너
section - 실제적으로 바디에 표시될 바디아래에 있는 영역들을 나눠주는 역할
box&media- box) 테두리와 그림자 등을 이용하여 만든 카드, media) 많이 쓰이는 이미지와 글의 조합
button

is loading-> 돌아가는 스피너 작동

해시함수
-알고리즘의 한 종류(암호화 알고리즘-항상 똑같은 길이의 암호화된 값들을 만듦/입력값이 조금만 바껴도 완전히 다른 결과값을 만들어냄)
-임의의 데이터를 입력받아 항상 고정된 길이의 임의의 값으로 변환해주는 함수
-결과값을 통해 입력값을 알아내는 것은 불가능

JWT-Json Web Token(json을 통한 정보전달방식)
json 객체를 이용하여 사용자의 정보(token)를 안정성있게 전달하는 웹표준 방식

로그인 구현에는 쿠키가 필요
쿠키란?
-브라우저 자체 데이터베이스(브라우저에 저장되어 있는 정보)
-페이지에 관계없이 브라우저가 키:밸류 형태(딕셔너리 형태)로 특정정보 저장
-클라이언트가 서버로 보낼때 항상 같이 보내짐

1) bulma에서 요소숨기기
->is-hidden{
display:none
}
1-1)숨긴요소 보여주기
jquery의 toggleClass("is-hidden")을 사용해서
없으면 보여주고 있으면 숨겨주는 기능 사용가능

2) regular expression(regExp)을 이용해 조건과 비교가능:형식을 확인하여 결과를 참/거짓으로 반환하는 함수
조건을 변수처리 후 return 사용
var regExp = /^~$/;
return regExp.test(asValue);
=>학교에서 배웠던 자바스크립트보다 훨 쉬워서 놀랐다
(매번 if절로 조건비교했어야 했는데 ㅎㅎ...)

!잠깐 regExp 살펴보기
(?=.*[a-zA-Z])[-a-zA-Z0-9_.]{2,10}
()사이는 꼭있어야 함을 의미
[]일반적인 식
{} 2-10자 사이로 정함

(?=.\d)(?=.[a-zA-Z])[0-9a-zA-Z!@#$%^&*]{8,20}
\d 숫자
()숫자 또는 알파벳 필수 포함
[]사이에 해당하는 문자들이 8-20자 사이 있어야 함

모달
평소에는 안보이다가 어떤 입력, 클릭을 했을 시 보여지는 작인 입력창
bulma에서는 is-active가 있는지 없는지에 따라 보여지고 안보여지고가 정해짐

완성본

profile
#TechExplorer 🚀 Curious coder exploring the tech world, documenting my programming journey in a learning journal

0개의 댓글