부트스트랩 말고 bulma 사용 하는 이유 :
다른점 : 부트스트랩과 달리 순수 css로 이루워짐, 부트스트랩보다 훨씬 직관적 따라서 시간 효율성 좋음,
기본 골격 모양이 부트스트랩보다 이쁨
<!-- Bulma CSS 링크 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
이 한줄에 bulma 사용 가능
Section 은 body 안에서 영역을 구분할때 쓰는데 보통 div 로 영역을 나누는데 div 는 워낙 많은곳에 쓰이다보니 div 보다 적게 쓰이면서 확실히 구분을하는 부분을 section 으로 구분 역할을함
웹개발 플러스
4-3 회원가입 기능 에서
app.py 에서 회원가입 아이디 비밀번호 등록후 로그인시 'str' object has no attribute 'decode' 라고 나오고 찾아보니 이미 decode 가 된상태라 .decode('utf-8') 부분이 필요없다고 해서 지워보니 잘됩니다 95번째 줄이고 token 변수에 할당하는 부분
4-4
JWT : JSON Web Token 의 줄임마 JSON 객체를 이용하여 정보를 주고받게하는 웹 표준, 로그인, 회원가입 등등 (솔직히 아직 이부분 잘 이해안감)
Py 부분에서 'exp': datetime.datetime.utcnow() + datetime.timedelta(seconds=100) 는 utcnow() 현재 utc 시간, timedelta ()는 원하는 시간만큼 뒤로 + 이므로 현재 시간에서 100초후의 값을 exp 에 넣는다
request.cookies.get(‘mytoken’) // 쿠키는 브라우저가 key, value 형태의 딕셔너리 형태로 계속 가지고 있다. 이 정보를 쿠키라 한다.
$.cookie('mytoken', response['token']); //‘mytoken’ 을 response[‘token’] 으로 저장한다는 뜻
CSS의 숨은 단위 vh, vw가 있었네요.
예를들어 vh는 (viewport height)의 약자로 화면 크기를 기준으로 한 높이입니다.
화면의 길이가 1000px일 때
100vh는 1000px
1vh는 10px 가 됩니다.
그 외에도 숨겨진 단위들이 많네요. 확인해보세요.
em은 현재의 font-size를 정의 font-size를 1.2e로지정하면 16.8px 의 값이다
window.location.replace("/login”) // 실행시 login 경로로 이동
<section class="hero is-white">
<div class="hero-body has-text-centered" style="padding-bottom:10rem;margin:auto;”>. // style 부분의 2rem 은 아래로 패딩 공백을 주어 위에 배경화면에 색을 입혀도 폰트 있는곳과 현재 div에 속한 공간 아래로 2em 만큼 공백을 둔다
<h1 class="title is-sparta">SWEETER</h1>
<h3 class="subtitle is-sparta">세상을 달달하게</h3>
</div>
</section>
.is-sparta {
color: #e8344e !important;
}
.button.is-sparta {
background-color: #e8344e;
border-color: transparent;
color: #fff !important;
}
.button.is-sparta.is-outlined {
background-color: transparent;
border-color: #e8344e;
color: #e8344e !important;
}
위에서 보면 .button.is-sparta 그리고 .button.is-sparta.is-outlined 이런식으로 css 위치 클래스를 쓰는데 이유는 좀더 디테일한 specific 한 곳을 찾기위해서다 class에 이름을 두개 세개 넣을수 있어 html 부분에 그 두가지이상 클래스의 효과 나 디자인을 얻을수있다 반대로 css 부분에서 . 을 사용해 html 부분에 한 태그에 쓰는 클래스 만큼 .(점) 을 사용하면 같은 클래스를 다른 태그에서 쓰더래도 그 부분의 태그 부분만 효과를 줄수있어 저렇게 위에처럼 쓰는것이다
!important
css에서 !important는 말 뜻 그대로 '중요한 속성' 을 의미하고, 해당 속성이 변경되지 않도록 하는 역할을 한다.
만약 변경하고 싶다면 똑같이 속성에 !important 속성을 삽입해주면 된다.
7번 라인과 12번 라인에 <p> 태그의 css를 정의하였다.
!important 속성이 없다면 <p> 태그의 내용은 12번
라인에 의해 파란색이 되어야 하지만
!important 속성에 의해 수정이 되지 않는 것을 확인할 수 있다.
Display : none;
말그대로 화면에서 나오지않게 숨겨지는 기능이다 만약 반대로 보이게 할려면 display: block 이라고 쓴다
Bulma 에서는 별도로 설정없이 .is-hidden 에 이미 그 기능을 넣어놓았다. (맞나? 따로 클래스에 기능을 넣은거같은데) 코드리뷰할때 볼것
따라서 .is-show 라고 클래스가 있기때문에 html부분의 원하는 태그 is-show 또는 is-hidden 을 넣으면 그 기능을한다. (이것또한 찾아볼것)
If($(’#sign-up-box’).hasClass(‘is-hidden’)) {
$(’#sign-up-box’).removeClass(“is-hidden”)
} else {
$(’#sign-up-box’).addClass(“is-hidden”)
}
를 써줘서 해당 아이디 sign-up-box 에 hasClass 를 사용해서 is-hidden 이라는 클레스를 가지고있는지 여부를 체크해서 있으면 true, 없으면 false 값을 갖아서 이를 if 문에 써서
있으면 removeClass 메서드를 써서 is-hidden 이라는 클레스 이름을 지우고 else 만약 없다면 addClass 메서드를 사용해서 is-hidden 이라는 클래스를 넣어준다
하지만 이렇게 하면 길기 때문에 아래와 같이 한줄인 toggleClass()를 사용해서 해당 id에 있는 클래스 is-hidden 이있으면 없게 없으면 있게 한다.
4-8
Function is_password(asValue){
var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z!@#$%^&*]{8,20}$/;
// 이 코드 자체가 이미 기능을 가지고있는데 처음 ()에 포함된 [a-zA-Z] 가 소문자,대문자 포함, 그리고 그뒤에 나오는 [-a-zA-Z0-9_.] 는 소문자 대문자 숫자 . 까지 아무거나 쓸수있다는 뜻 // 이거 다시 찾아볼것 확실하지않음
그리고나서 (2,10)부분이 2자리부터 10자리까지만 사용한다는 것을 의미한다 앞에 /^ 와 $/ 부분이 그 틀의 문법인거같다 항상나옴
return regExp.test(asValue); // test() ㅡ 찾는 문자열이, 들어있는지 아닌지를 알려준다.
}
그리고 이부분이 패스워드 랑 아이디 정규식인데 앞에 ?=.* 는 패스워드부분에서 나오고 다른건 없다 아래 출처에서 비교해보면 알수있다.
1. 영문자 소문자, 숫자, "-", "_" 로만 구성된 길이 2 ~ 10자리 사이 문자열
/^[a-z0-9_-]{2,10}$/
2. 신용카드 번호
19자리 숫자와 "-": /^[0-9-]{19}$/
4-4-4-4 체크: /^[0-9]{4}[-\s\.]?[0-9]{4}[-\s\.]?[0-9]{4}[-\s\.]?[0-9]{4}$/
3. 영문자 대소문자와 숫자로만 구성
/[a-zA-Z0-9]/
4. 전화번호
3자리-3~4자리-4자리(사이에 1자 아무거나 가능)): /^[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3,4}[-\s\.]?[0-9]{4}$/
3자리-3~4자리-4자리(사이에 "-" 고정): /^\d{3}-\d{3,4}-\d{4}$/
휴대폰&전화번호: /(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/
휴대폰번호: /^01(?:0|1|[6-9])[.-]?(\\d{3}|\\d{4})[.-]?(\\d{4})$/
등등 출처 참고 : https://blogpack.tistory.com/560
$("#help-id").text("아이디를 입력해주세요.").removeClass("is-safe").addClass("is-danger")
$("#input-username").focus() // focus()는 해당 요소에 포커스를 부여하여 1. 텍스트 창의 경우, 커서를 위치시켜 바로 입력이 가능하다.
2. 버튼의 경우, 엔터 키를 눌렀을때 클릭 효과를 냅니다.
서버 파일 app.py에서
경로를 정해줄때 @app.rout(‘경로’)를 쓰는데 이건 flask 에 있는 기능이다. route 장식자는 flask 서버로 ‘경로’ url요청이 들어왔을 때 어떤 함수를 호출할 것인지를 조정한다.
Route 장식자는 장식된 함수에서 결과를 반환할 떄까지 기다리다가 결과가 반환되면 그 결과를 대기중인 웹 브라우저로 반환.
mongo.error.OperationFailure: Authentication failed., full error: {'ok': 0.0, 'errmsg': 'Authentication failed.', 'code': 18, 'codeName': 'AuthenticationFailed'}
>> client = MongoClient('localhost',27017) 에서 27017 다음 , username = ‘아이디’, password = ‘비밀번호’ 부분이 들어가있었을땐 안됐다. 말그대로 권한실패 그부분을 삭제하면 잘된다
'항해 > 항해99' 카테고리의 다른 글
| (WIL)weekly I learned 01 (0) | 2021.11.07 |
|---|---|
| Today I Learned(TIL) 3 (0) | 2021.11.06 |
| Today I Learned(TIL) 1 (0) | 2021.11.01 |
| 항해99 15조 미니프로젝트 1일 (0) | 2021.11.01 |
| 자바스크립트 문법 뽀개기 완료 (0) | 2021.10.30 |