[자바웹프로그래밍] 모듈화,회원가입 만들기
모듈화는
다음과 같이 스크립트 파일을 하나씩 연동해줘야하는걸 스크립트 파일 하나로만 모든 스크립트를 불러올 수 있게하는 기능이다.
먼저 js_login.js 를 제외한 나머지를 주석처리한다. (!! 스크립트 타입을 module로 바꿔줘야한다.)
그리고 js_login.js 최상단에
다음과 같이 추가해준다.
{}안에 있는 것들은 각 js파일에 있는 함수이다. 사용할 함수만 적어주면된다.
이렇게 스크립트 파일 하나로만 다 불러오는걸 볼 수 있다.
근데 이런 오류가 생긴다. onload보다 먼저 실행되기때문에 이러한 오류가 발생한다. 기존 바디태그에 있는 onload를 삭제한다.
init() 함수 아래에 다음과 같은 코드를 추가한다. DOMContentLoaded는 DOMTree에서 먼저 실행한다.
!!!여기서 주의해야할점은 각 js파일에서 불러온 함수 앞에 export를 꼭 적어줘야한다.
코드를 수정하고 실행해도
다음과 같은 오류가 보인다.
세션에서 암호화를 진행하기때문에 연동을 해줘야한다.
js_crypto.js, js_session.js 모두 앞서 했던것처럼 import로 불러온다. 그럼 오류가 없어진다.
다음은 로그인 후 자바스크립트를 추가해보겠다. js_login.js 코드를 js_login2.js 를 만들어 붙여넣어준다.
그리고 위의 이미지처럼 init() 함수 아래 넣었던 걸 다음 init_logined() 에도 구현한다.
다음은 세션을 객체로 저장하는법을 해보겠다. 객체 리터럴 방식을 사용한다.
기존 session_set() 함수를 주석처리하고
다음과 같은 이미지로 새로 수정한다.
그리고 로그인 후 페이지에 콘솔을 확인하면 다음과같이 보이면 성공이다.
다음과 같이 저장하면 메서드 영역 (코드 입력) --> 스택 영역 (각각 메모리 주소 할당) --> 힙 영역(객체 저장)과 같은 방식으로 저장되는 구조이다.
이제 회원가입을 구현해보겠다.
먼저 로그인 폴더에 join.html을 만들어주고
다음 이미지의 위치에 회원가입을 넣어준다.
https://mdbootstrap.com/docs/standard/extended/registration/
Bootstrap Registration form - free examples & tutorial
Responsive Registration form built with Bootstrap 5. Templates for signup forms, registration popups, register modal designs, registration validation & more.
mdbootstrap.com
이번에도 부트스트랩 디자인을 가져올 것이다. 위의 링크를 통해 가져오자.
부트스트랩 연동을 하고 난뒤 실행하면
이런 화면이 보일 것이다. 영어를 한글로 바꿔보자.
수정이 완료됐다면
위의 이미지처럼 버튼에 id를 추가해준다.
이제 js폴더에 js_join.js를 만들어준다.
그리고 다음과 같은 코드를 작성해준다. 여기선 앞서 설명했던 객체 리터럴 방식으로 저장을하고 있다.
눈여겨 봐야할것은 생성자 : constructor이다. 이 함수는 생성자 함수로 객체 생성시 정보 초기화 담당역할을 가지고있다.
그리고
정보 객체 생성, 저장 및 객체 전달을 폼 실행 위에 작성한다.
그리고 js_session.js에서
기존 함수를 똑같이 복사해 2를 붙여주고 아래 if문만 수정해준다.
js_join.js() 최상단에 불러온다.
그러고 회원가입을 눌러보면 이렇게 실행되는걸 볼 수 있다.
다음은 회원가입에 필요한 필터링구현이다.
regex101: build, test, and debug regex
Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java, C#/.NET, Rust.
regex101.com
Regexper
regexper.com
정규표현식 이다. 위의 사이트를 이용하자.
join()함수를 다음과 같이 고쳐준다.
그리고 테스트해보면
이렇게 잘 적용되는걸 볼 수 있다.