[자바웹프로그래밍] 화살표 함수, 로그인 창 구현

화살표 함수란 무엇일까?

 

기존 함수 선언 방식인 function 키워드를 비교적 간결하게 만든 선언방식이다.

js_popup.js 에서 예를들면 기존에 이렇게 함수 선언을 했다면,

위와 같은 이미지로 하는게 화살표 함수이다.

 

화살표 함수의 장점은 간결하고 명확한 표현이다.

단점은 new연산자 사용 불가능이다.(객체 생성 X)

 

 

다음은 로그인 창 구현이다.

 

먼저 기존의 메인html에서 검색하기 버튼 옆에 로그인 버튼 하나를 만들겠다.

검색하기 아래에 다음과 같이 코드를 해주면

위의 이미지처럼 상단에 로그인 버튼이 표시되는걸 볼 수 있다.

 

로그인 버튼을 눌렀을때, 새로운 창이 떠야하므로 popup.html을 만든것처럼 로그인폴더와 login.html을 생성해준다.

 

생성이 완료되었다면 부트스트랩에서 디자인을 가져올 것이다. 

https://mdbootstrap.com/docs/standard/extended/login/

Bootstrap Login Form - free examples, templates & tutorial

 

원하는 디자인의 html코드를 복사해 붙여넣어준다.

 

그리고 css폴더 생성,login.css를 만들어 css도 복사해준다.

 

그리고 login.html 헤더태그에 부트스랩을 사용하기위한 코드와, css파일을 불러오는 코드를 작성하고나면

 

다음과 같은 화면이 나온다 (참고로 나는 기존의 영어를 한글로 수정해서 다음과같은 이미지가 보인다.)

 

 

그리고 form 부분을 method = "get" 으로 작성 후 로그인 해보면 url상 저장된 정보가 보이는걸 확인 할 수 있다.

 

여기서 get 과 post를 집고 넘어가자면

• get

- url상 정보를 저장

- 정보가 눈에 보임

- 일반적인 페이지 접속

- 검색,페이지 상태 저장에 유리

• post

- body에 정보를 담음

- 정보가 눈에 보이지않는다.

- 로그인에 유리

 

이다.

 

다음은 js_login.js 를 만들고

위의 이미지와 같이 코드를 작성해준다.

 

위의 코드에서 document.getElementByid(' ') 는 html문서에서 이름에 맞는 요소를 가져와 저장하는 코드이다.

 

중간에 이메일, 비밀번호에 if함수는 공백이 들어갔을때 다시 입력하라는 코드이다.

 

 

이렇게 위에 보면 입력한 값이 url상 표현되는 모습을 볼 수 있다.