코린이의 로그인 페이지 만들기 (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
-
수시 컨설팅 0
받아볼만한 업체 있을까요?? 인서울 약대 지망입니다
-
진짜 mh세대 맛 좀 보여줄까 ㅅㅂㅋㅋㅋㅋㅋㅋ mh가 뭔지는 알고 하는 소리인지
-
약대 좋죠.. 3
옛날로 돌아갔으면 약대 갔을 수도..
-
야한 릴스 좋아요 누르고 다닐 뻔 했네..
-
이번 시험이 반등의 기회가 되기를 바라며..(5모 성적 인증) 1
전국 1356등 정도 나왔네요. 3모같은 최악의 상황은 면했지만, 여전히 좋지는...
-
-
한의대 한약 안먹고 약대 약 우걱우걱
-
-
근데 더프 아직 다 안 끝났는데 왜 리뷰 올라오는 거임? 4
모의고사 다 끝날 때까지 핸드폰 못 쓰게하는데 설마...
-
1. 매 4월마다 4구라 시청 2. 격기3반 1달에 1번씩 정주행 3. 칸예 타일러...
-
와 근데 가격 ㅈㄴ 살벌해서 고민되네 한번쯤은 먹어볼만하면 먹어보려구요
-
날 고용해라 1
너만의 메이드가 될겡~~
-
한의대 : 모든 정책 패싱 정원추계 혼자 2028년 ㅋㅋㅋ 의,치,간은 2027년...
-
프사바꿈 4
착해져써
-
ㅈㄱㄴ
-
화악 0
수악 구거
-
생윤사문 0
노베에서 수특만 보면 얼마나옴?
-
ㅈㄱㄴ
-
고1붕이 내신 5등급제인데 역사2 과학 3 뜸 ㅅㅂ 이거 ㄹㅇ 정시각임?
-
명단 보고 3명한테 덕고 2000씩 드림
-
종강 언제 하냐 0
아
-
AI대체 이지랄 한국이 ai로 인력 대체할만큼 ai강국인걸로 보임? ㅋ 검사들 전부...
-
휴
-
이번에 어느 정도 될까요?
-
개야해 ㅜㅜ
-
메인올라간 글이여도 모.벤 시키면 안올라가지 않을까...?
-
약자판기 구매하는 사람 = 약사 ㅇㅋ? 자판기를 약사들이 쓰고 있다고
-
없음. . .
-
지금은 글을 삭제했지만 노베에서 한달 만에 더프 1등급을 찍었다 라는 비틱글 올린...
-
너와 찍은 사진 한 장에도 난 세상을 가졋어
-
약사들 민주당 꽉잡고 있어서 곧 약사의 시대가 열릴것임
-
사람외업냐 11
으으
-
정석민쌤 커리 1
반수생인데 지금부터 정석민쌤 커리타도 되겠죠...? 근데 이분 양이 적어보여서...
-
원래도 운동 잘 안하고 요즘은 아예 몸 움직이는게 없다시피한데 요즘 공부하다보니까...
-
그냥 메이드 일 할랭 12
토깽이는 메이드가 어울려
-
세계사 1회독하면 바로 풀 수 있는 문제입니다!
-
학교가학교라서그런가
-
따로 인쇄해서 공부할 지문들을 좀 모아야해
-
평가원 #~#
-
만점자는 40명? 근처인 것 같네여
-
5덮 망함 1
한문제도못품
-
엔제중인데 하… 미분만 존나하니까 함수극한 감 다떨어짐
-
1. 설거지 2. 빨래개기 ㄹㅇ 개싫음 원래 빨래 너는 것도 극혐인데, 건조기가 이를 해결 중
-
자체휴강 달다 1
응 재수강 할꺼야
-
동사 고난도 자작문제입니다 참고로 둘다 동일한 사료를 사용했습니다 (선지형,합답형)...
-
생2 붐은 온다
-
너를 떠나보내고오 후회하고있는내게엥
-
수원 메가스터디 더프모의고사 일정이 대성 공식 일정과 다른데 원래 학원마다...
-
점심 ㅇㅈ 4
-
동사 중난도 자작문항 입니다 사료해석은 쉬우나 선지에 관한 암기가 잘돼있어야만...
신기해요... 휴대폰 속으로 내가 보는 모든게 다 저 과정을 거쳤다고 생각하니까,, 좋은 정보 감사합니다 ㅎㅎㅎ
안이 덕코까지.. 감사해양뱁새누님 취미생활인가요?
요즘 재미붙이고 있는..뭘로 독학해요???
국비 지원 인강으로 시작했는데 지금은 인강 들은 거 바탕으로 제가 만들고 싶은 거 만들면서 도서관 가서 책도 빌려서 보고 유튜브도 참고하고 그렇게 독학하고 있어요
오 유튜브에 코딩 독학 이렇게 검색하면 되나..
저도 독학해보고 싶어요
유튜브에 html, css, javascript 라고 검색하면 재생목록들 쫙 뜨는데 거기서 몇 개 찍먹해보고 이해 잘 되게 설명해주는 분 거 들으면서 실습해보세양헉 감사합니다❤️
sqr injection과 같은 공격에 대해서도 대비해주세요!
헉 보안 관련 문제 엄청 중요한데 이걸 생각도 않았다니.. 관련 자료를 찾아보고 한 번 적용시켜보겠습니다!https://youtu.be/FoZ2cucLiDs?si=sjc1sMfeM_WY5bx3
멋지신!