코린이의 로그인 페이지 만들기 (2)
게시글 주소: https://orbi.kr/00065824586
안녕하세요 뱁새입니다 (۶•<•)۶❗️
지난 번에는 로그인 페이지의 뼈대를 만들고 꾸미는 과정을 살펴보았는데요
오늘은 이 페이지에 js를 적용해 간단한 로그인 기능을 구현하는 과정을 살펴볼 예정입니다
그럼 시작해볼까요?
3rd. js를 이용해 간단한 로그인 기능 구현하기.
오늘 우리의 목표는 login 버튼을 눌렀을 때, 입력한 id와 password에 따라 결과 값을 다르게 출력하는 것입니다
그렇다면 이것을 어떻게 구현할 수 있을까요?
1. id, password, login에 getelementbyid()를 이용해 이들 각각에 해당하는 elementnode를 할당해줍니다
2. let을 이용해 password가 수차례 틀렸을 때 발생하는 errstack을 변수로 지정해줍니다
3. if문을 이용해 id.value와 password.value가 일치하는 경우, id.value만 일치하는 경우, id.value와 password.value 모두 일치하지 않는 경우, id.value는 일치하는데 password.value가 5회 이상 다른 값이 입력된 경우 총 4가지 경우를 지정해줍니다
이때, errstack ++; 를 입력하면 비밀번호를 틀렸을 때의 errstack이 증가 추세가 되며 errstack >= 5 를 입력하면 이 횟수가 5회 이상으로 설정이 됩니다
4th. 로그인 페이지에 직접 4가지 경우가 올바르게 적용이 되었나 확인.
첫 번째, 아이디와 비밀번호가 일치하는 경우
두 번째, 아이디는 일치하지만 비밀번호가 일치하지 않는 경우
세 번째, 아이디와 비밀번호가 모두 일치하지 않는 경우
네 번째, 아이디가 일치하는 상태에서 비밀번호를 5회 이상 틀린 경우
머임
왜 이모냥임
비상비상! 네 번째의 경우에 출력이 되어야 하는 alert이 출력이 되지 않는 오류가 발생했습니다
무엇이 문제였을까요?
아..
아무래도 alert 출력 화면에서 확인 버튼을 누르면 페이지가 새로고침 되면서 errstack이 날아가는 모양입니다
현재의 저는 db를 배우지 않았기 때문에 브라우저 세션동안만 errstack 값을 유지하도록 하는
localstorage를 사용해서 이 오류를 해결해보도록 할게요
5th. localstorage를 사용해 코드를 수정하기.
짠 수정이 완료되었습니다
수정된 코드에서는 이전에는 확인할 수 없었던 클릭 이벤트 발생 시 errstack의 값을 갱신 및 저장하는 함수가
새로이 추가된 것을 확인하실 수 있습니다
그렇다면 우리를 깊은 고뇌에 빠뜨렸던 오류가 해결되었는지 확인을 해보도록 합시다
드디어..
우리가 원했던 alert이 올바르게 출력되었네요!
이로써 지난 게시글에 이어 현 게시글까지 로그인 페이지에 간단한 로그인 기능을 넣어보고
오류도 수정해보는 과정을 살펴보았습니다
다음 게시글에서는 회원가입 페이지의 뼈대를 만들고 꾸며보도록 할게요
그럼 안녕!
와아.. 정말 즐거워요..
(대충 머리 빠개진다는 뜻)
0 XDK (+1,000)
-
1,000
-
수악풀어야돠는데
-
'1490억 대박' 이정후, 초특급 대우로 샌프란시스코 간다 3
(엑스포츠뉴스 김지수 기자) 이정후가 내년 시즌 샌프란시스코 자이언츠 유니폼을 입고...
-
게시글 모아보기??? 알려줘요...
-
추합 2
예비 몇번입니다 이게아니라 그냥 불합격이면 추합 전화도 절대 안오는거죠?
-
2천원짜리 몬스터 샀는데 원쁠원으로 주네
-
강대 과탐 2
강남대성 의대관 기숙 과탐 한과목만 수업듣는 건가요…?
-
과외 1
영어가 작수1 올해는 2 떳는데 영어 과외 구할 수 있을까요 학교는 아마 외대나...
-
라떼는 이게 그렇게 재밌었는데
-
안녕? 1
안녕
-
사1과1(라고 쓰고 사문지구인) 메디컬 정리 곧 올라갑니다 1
오늘오후에 게시 예정입니다 저번 게시글에 짜잘한 오류들이나 설명이 미흡한 부분들이...
-
주변인들한테 ㅈㄴ 나 ADHD요 하고 알리고싶어지는 병에 걸릴수있는데...
신기해요... 휴대폰 속으로 내가 보는 모든게 다 저 과정을 거쳤다고 생각하니까,, 좋은 정보 감사합니다 ㅎㅎㅎ
![](https://s3.orbi.kr/data/emoticons/dangi_animated/009.gif)
안이 덕코까지.. 감사해양뱁새누님 취미생활인가요?
![](https://s3.orbi.kr/data/emoticons/dangi/035.png)
요즘 재미붙이고 있는..뭘로 독학해요???
국비 지원 인강으로 시작했는데 지금은 인강 들은 거 바탕으로 제가 만들고 싶은 거 만들면서 도서관 가서 책도 빌려서 보고 유튜브도 참고하고 그렇게 독학하고 있어요
오 유튜브에 코딩 독학 이렇게 검색하면 되나..
저도 독학해보고 싶어요
![](https://s3.orbi.kr/data/emoticons/dangi_animated/002.gif)
유튜브에 html, css, javascript 라고 검색하면 재생목록들 쫙 뜨는데 거기서 몇 개 찍먹해보고 이해 잘 되게 설명해주는 분 거 들으면서 실습해보세양헉 감사합니다❤️
sqr injection과 같은 공격에 대해서도 대비해주세요!
![](https://s3.orbi.kr/data/emoticons/almeng/012.png)
헉 보안 관련 문제 엄청 중요한데 이걸 생각도 않았다니.. 관련 자료를 찾아보고 한 번 적용시켜보겠습니다!https://youtu.be/FoZ2cucLiDs?si=sjc1sMfeM_WY5bx3
![](https://s3.orbi.kr/data/emoticons/2020_foolsday/oribi/006.gif)
멋지신!