(국비교육) 53 - 타임리프 + 부트스트랩 4 + 회사로고 만들기

■ 타임리프

 

 

 

타임리프 압축 파일을 가져온다.

 

 

타임리프 쓸거야 설정해주기

 

 

타임리프 사용 시 th: 을 붙여서 사용한다. 

 

■ 회사로고 만들기

 

 

 

https://mybrandnewlogo.com/ko

My Brand New Logo — 로고 메이커 — 브랜드 디자인

 

■ 암호화하기 

 

 

데이터베이스에 저장한 내용을 다른 사람이 읽지 못하게 할 것이다. (암호화)

평문을 암호문으로 바꾸는 것이다.

 

왜냐하면 해커가 db에 접속했을 때 개인정보(비밀번호)와 같은 내용을 보지 못하게 하기 위함이다. 

 

■ 부트스트랩 이어하기

 

 

javascript 에서 쓸 때 선택자 querySelector

input 창을 찾아줘 

 

 

$ 표시 들어가면 -> 제이쿼리

없으면 자바스크립트

 

자바스크립트 => 타입스크립트(데이터 타입 지정하자) => 넥스트스크립트 => 다시 순수로 가자 바닐라스크립트(외부 라이브러리나 프레임워크를 쓰지 않는다.)

 

데이터를 : 과 같이 표현하는게 타입스크립트 

즉 자바스크립트에서 타입이 없던 것을 자바스크립트에서 데이터 타입을 정해준 것이다. 

단점은  타입스크립트 바로 사용 못하고 컴파일 과정을 거쳐서 써야한다. 

 

자바스크립트 원래 이름이 ECMA 스크립트이다. 

 

jquery는 자바스크립트 라이브러리 이다. 

넥스트 제이에스는 웹개발 프레임워크

node.js

npm 는 node.js 기본 패키지 관리자이다.

yarn 은 node.js 런타임 환경을 위한 패키지 시스템이다.

vue.js

 

바닐라스크립트는 외부 라이브러리나 프레임워크를 쓰지 않는다는 뜻이다.

즉 자바스크립트 자체만 쓰자는 것이다. 

 

* 요청사항

- 프레임워크와 라이브러리 차이

 

 

input 창을 버튼으로 만들 수 있다. 

 

queryselector() 선택자로 id를 찾고 이를 변수 id에 input 창 전체를 잡는다.

사진에서 파란색 드래그가 동일한 기능이다.

 

이제 id와 pw를 배열로 넣는다.

 

Array.prototype.every()

every() 메서드는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트합니다. Boolean 값을 반환합니다.

 

즉 안에 구성요소를 다 실행할거다.

foreach문과 같이 모든 값들이 item 이란 곳에 저장되고, 이 변수를 하나하나 뽑을 것이다. 

 

만약 해당 id와 pw 

 

라벨에 적힌 text 로 적어줘

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/every

Array.prototype.every() - JavaScript | MDN

 

https://velog.io/@filoscoder/-%EC%99%80-%EC%9D%98-%EC%B0%A8%EC%9D%B4-oak1091tes

자바스크립트: '==' 와 '===' 는 다르다!

 

 

다음과 같이 붙여줘야 [0] 번지 사용이 가능하다.

만약 들여쓰기를 하는 경우 공백을 인식해서 [1] 번지를 넣어야 한다. 

 

previousElementSibling : 이전 형제의 요소 가져오기

 

 

https://hyejin-dev.tistory.com/12

Node로의 접근 완벽 정리! (parentNode,nextSibling...nodeType)

 

 

다음과 같이 설정해주면 아이디 패스워드 모두 입력됐을때 로그인합니다. 가 뜬다.

 

 

 

 

 

나오는 것 확잉 가능

 

 

로그인 시 db 에 있는 id 로 로그인하면 다음과 같이 출력된다. 

 

 

String.valueOf 는 string  타입으로 바꿔준다는 뜻이다. 

여기서 해당 작업을 하는 이유는 object 타입이랑 비교를 못하고 이를 string 으로 바꿔서

다시 int 타입이랑 비교해줘야 한다. 

 

 

올바르지 않은 값 입력하니 다시 로그인 창으로 돌아온다.

 

 

mid 값은 map 을 통해 받은 값을 가져오고,

mname 값은 데이터베이스를 통해온 값을 통해 가져온 result 로 가져온다. 

 

sessionScope 는 컨트롤러에서 지정 안해줘도 session 에서 값 가져와서 쓸 수 있다. 

 

 

c 태그 불러준다. 

 

 

로그인 하지 않았을 경우와 했을 경우 확인 가능하다.

 

 

 

 

옆으로 붙이면 다음과 같이 소스코드가 깔끔하게 나온다.

 

 

로그아웃을 하는 2가지 방법

 

 

알림창이 떠서 재확인 하게 만들어줄 수 있다. 

 

 

https://tychejin.tistory.com/164

[Java] Casting, valueOf, toString 비교

 

 

 

이제 임시로 있던 아이디말고 session 을 통해 mid 도 나오게 해준다. 

 

 

bip 도 넣어준다. 

 

 

■ 암호문 만들기

 

 

암호화는 평문을 특정키를 통해 읽기 어려운 것으로 만드는 것

복호화 암호화 돼 있는 것을 풀어서 다시 평문으로 만드는 것

 

* 요청사항 (읽어보기)

aes: 고급 암호화 표준 (양방향)

aria: 양방향

seed: 양방향

hash: 단방향

sha: 단방향

md5: 단방향

 

https://velog.io/@kdh10806/%EB%8B%A8%EB%B0%A9%ED%96%A5-%EC%95%94%ED%98%B8%ED%99%94-%EC%96%91%EB%B0%A9%ED%96%A5-%EC%95%94%ED%98%B8%ED%99%94

[Security] 단방향 암호화 / 양방향 암호화

 

 

암호화 방법 중 하나

 

https://ko.wikipedia.org/wiki/SHA-1

SHA-1 - 위키백과, 우리 모두의 백과사전

 

 

 

공백도 다르게 인식

 

길이도 다르게 인식

 

 

완전히 같으면 일치

 

 

이중 암호화도 가능하다. 

 

■ AES 암호화

 

복호화(de)

암호화(ENCRYPT)

 

앞은 암호화 시킬 것 뒤로 암호화를 시킨다.

 

 

HEX : 16진법 코드로 고친다.