코린이의 로그인 페이지 만들기 (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
-
차단당할 수도 있군요..
-
한놈차단했다 2
깨끗하군.
-
덕코 내놔
-
부활주문임
-
솔직히 대학한번 갔다오니까 수능공부가 그냥 철지난 공부처럼 느껴짐 딱히 무슨...
-
내이름은 라유 11
덕망이죠
-
안자는사람? 12
-
이은해 vs 고유정 야차룰로 맨날 데스매치 필드 교도소 ㅋㅋㅋ
-
라고 사람들한테 물어봤을때 평균 몇정도 나올지 궁금하네요... 꼭 -1557조...
-
내신 언매화작 4
고3 내신 언매 화작 중에 고민중입니다 수능 때 뭐 볼지는 아직 못 골랐고......
-
오니가 되면 백년이고 이백년이고 오르비를 할 수 있다고!
-
무잔이다!! 1
녀석은 목을 베어도 죽지 않아!!
-
강남러셀 질문 0
점심,저녁 시간에 휴대폰 사용 가능한가요?
-
야식 치맥 ㄱ? 2
괜찮지 않나
-
0. 언어이해 1세트 풀이 복기 https://orbi.kr/00067557013...
-
나중에 서울 올라갈 일 생겼을 때 숙박해결을 모텔에서 하기엔 혼자 가면 돈 아까워서...
-
현재 수시를 생각하고 있는 N수생 입니다. 가고 싶은 곳이 최저가 있어서 해보려는데...
-
정석민샘 보고 학교샘 스타일 같다는거 보고 충격먹음 황용일샘이 교사출신이라는 얘기...
-
못 뽑는다면 그 시기는 언제쯤?
-
으아 고민 준내 도ㅑ 10
인제의 vs 연치 어디가 더 좋을까? 인설 땽기긴 하는데 난 1순위가 돈이라 의대가...
-
이번주부터 수능 공부 시작해서 올1 ㄱㄴ?
-
앱스키마 우기분 0
ㅠㅠㅠ추천헤주세요 민철t랑 승리t 누구 하나 풀커리 타는 건 아니지만 두 분 강의...
-
생2 공부중인데 4
재밌네 이거 근데 문제는 안재밌음 처음보는 상황이랑 그래프가 너무많다
-
공부시간은 좀 많이 적긴한데 그래도 동기부여가 조금은 되네요 낼부터 열심히
-
부산 사람 기분 째져잉
-
윤도영 가정성립 1
그 짤 찾아주실뷴 ㅠㅠ
-
식센모 0
이거 어렵노..
-
9. 23 언어이해 [19-21] 제도가능곡선 모델; 풀이 복기 0
0. 언어이해 1세트 풀이 복기 https://orbi.kr/00067557013...
-
남은 이번 달도 파이팅
-
다이어트 하려고 2
25마넌치 썻다... 성공해보자 !!
-
국영수는 꾸준히 하니까 332>211로 올렸는데 탐구는 해도해도 제자리..!!ㅠㅠ...
-
디자인 쪽 희망하고 있었는데 최근에 마케팅 쪽에 관심도 생겨서 경영학과도 생각...
-
안녕하세요 오르비에 처음 글 써보는데.. 여기에서 좀 도움을 얻을 수 있을까해서...
-
. 2
자야겠다 요즘 뿌듯해
-
겸양은 틀린게 맞음 야인생애는 걍 화자의 처지 그대로 드러낸 것인데 겸손할리가
-
뭔가 수험의 목적보단 단순 재미로...
-
왜 전공의들한테 돌아와달라고 정부가 호소를 하나요?(진짜모름) 돌아와달라노~ 이젠...
-
오히려 안오를줄 알앗는데 친구 6모 국수 4,4에서 7모 1,2 받았다던데 7덮도 잘보고…
-
전 12 22 30틀.. 12번에서 머리 깨짐..
-
의치한약수를 꿈꾸는 38세 강은영씨와 45세 박준석씨를 끌어들여 무한N수 돌입하기...
-
아악 (고려와 조선시대에 궁중과 상류층에서 연주되던 전통음악)
-
기구하다 19
-
개소리좀 싸지르지마십쇼.
-
아름답네요... 초점이 작구만
-
이런 문제를 두개씩이나 틀리면 수능을 보겠다는거냐!!!
-
가 정말 좋음요 님들도 들어보셈
-
영어로 된 커뮤니티를 하면 됨 Reddit 같은거.. 글쓰기보다는 여기저기 오르비...
-
여행가고싶다여행가고싶다여행가고싶다여행가고싶다여행가고싶다여행가고싶다여행가고싶다여행가고싶...
-
얼마?
-
합의금 많이 챙겨주고 난 즉사하고
신기해요... 휴대폰 속으로 내가 보는 모든게 다 저 과정을 거쳤다고 생각하니까,, 좋은 정보 감사합니다 ㅎㅎㅎ
안이 덕코까지.. 감사해양뱁새누님 취미생활인가요?
요즘 재미붙이고 있는..뭘로 독학해요???
국비 지원 인강으로 시작했는데 지금은 인강 들은 거 바탕으로 제가 만들고 싶은 거 만들면서 도서관 가서 책도 빌려서 보고 유튜브도 참고하고 그렇게 독학하고 있어요
오 유튜브에 코딩 독학 이렇게 검색하면 되나..
저도 독학해보고 싶어요
유튜브에 html, css, javascript 라고 검색하면 재생목록들 쫙 뜨는데 거기서 몇 개 찍먹해보고 이해 잘 되게 설명해주는 분 거 들으면서 실습해보세양헉 감사합니다❤️
sqr injection과 같은 공격에 대해서도 대비해주세요!
헉 보안 관련 문제 엄청 중요한데 이걸 생각도 않았다니.. 관련 자료를 찾아보고 한 번 적용시켜보겠습니다!https://youtu.be/FoZ2cucLiDs?si=sjc1sMfeM_WY5bx3
멋지신!