코린이의 로그인 페이지 만들기 (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
네시간전에시작할계획이었는데
-
주량 어떻게 되심 23
일단 난 1병이라고 말하고 다님 ㅋㅋ
-
너는 지금 뭐해 5
자니 밖이야
-
전 삼겹살이랑 곱도리탕
-
Chat gpt on
-
밸런스 게임 17
-
국어 영역 중 시간 줄이기 가장 수월한 영역은 어느 부분인가요? 3
문학, 독서, 화작(제가 화작러라) 중... 정답률은 그대로 유지하면거 걸리는...
-
현역.. 1
지금부터라도 열심히하면.. 올해 안에 정시로 끝낼 수 있겠죠.. 오늘 너무 충격적인...
-
최적쌤 윤성훈쌤 고민하다가 최적쌤 사문으로 시작하려고하는데 노베인데 개념은 코어강의...
-
반어와 반어적 표현은 다르다.
-
지역인재 농어촌은 해주면서 왜 밤에 일어나는 사람은 배려 안해줌?
-
2022교육개정 0
이랑 고교학점제 잘 아시는분 쪽지좀 주실 수 있으신가요... 물어볼게 있는데
-
머하지 5
진짜모름
-
심심하다
-
일단 한국문학 극혐하는건 둘째치고 비문학도 내가 이원준급의 배경지식을 얻을 수...
-
수악만 잘하는 사람도 잇나 탐구만 잘하는 사람도 잇나
-
하고싶다
-
현재 수분감 스텝 2만 풀고 있는데 현우진 해설이 가끔가다 별로인 것 같아요.....
-
이제 평생 배고프지 않을거임
-
탕 다음
-
진짜
-
-
긍정항등식은 어딨음
-
집에 가야겠다 0
왜 독서실에 에어컨을 안틀어놓는거야
-
술이나 먹자 6
안주를 사오자
-
a^n+2^n+1|a^(n+1)+2^(n+1)+1 자연수 a,n
-
자연수...
-
(4x-y)(4y-x)=30^6. x,y자연수(x,y)의 개수는?
-
풍경이 아름답죠? 가는 길 외롭지 않게 응원해주세요. 하 집까지 겁나 머네 진짜
-
x^4-2y^2=1x,y 정수해 2개
-
무덤 속의 벙어리를 말한 셈이다
-
sqrt(x)+sqrt(y)=sqrt(z)자연수, x,y,z 해 무한개임
-
일단 정년 연장하는데 청년 일자리가 어떻게 늘어나냐 하니까 너무 극단적이라고...
-
보통어느정도 푸시나용
-
[자료] 공통+확/미/기 전범위 수학 실모 하나 뿌림 6
예에엣날에 만든 문제들 짜깊기해서 만든 문제라서 요즘 트랜드에 맞지 않을 가능성이...
-
부정방정식 풀어보실 15
m^n=n^(m-n)m,n은 자연수
-
x!+y!=x^yx,y는 자연수
-
심심함
-
n*2^(n+1)+1=k^2.n,k 는 자연수
-
지방러라 울었다 9
서울 근처 안살아서 서울 한 번 가는데만 시간과 돈이 얼마나 깨지는거야 고생은 덤이고 에휴
-
축하해드림
-
차단률이 감소한다고한다 --
-
자야지
-
필기 안해봄 4
도전해봣는데 끔찍해서 관둠
-
ㅈ같다 벌써
-
왜 다 어디서 본 문제들이지
-
제 선택과목 3
물화생지
-
국어를 잘해져서 1
훈수두고 싶다
-
폰이 너무너무 무거워짐
-
진도율 5퍼 7
사실 한 3번 들어서 305퍼임
신기해요... 휴대폰 속으로 내가 보는 모든게 다 저 과정을 거쳤다고 생각하니까,, 좋은 정보 감사합니다 ㅎㅎㅎ
안이 덕코까지.. 감사해양뱁새누님 취미생활인가요?
요즘 재미붙이고 있는..뭘로 독학해요???
국비 지원 인강으로 시작했는데 지금은 인강 들은 거 바탕으로 제가 만들고 싶은 거 만들면서 도서관 가서 책도 빌려서 보고 유튜브도 참고하고 그렇게 독학하고 있어요
오 유튜브에 코딩 독학 이렇게 검색하면 되나..
저도 독학해보고 싶어요
유튜브에 html, css, javascript 라고 검색하면 재생목록들 쫙 뜨는데 거기서 몇 개 찍먹해보고 이해 잘 되게 설명해주는 분 거 들으면서 실습해보세양헉 감사합니다❤️
sqr injection과 같은 공격에 대해서도 대비해주세요!
헉 보안 관련 문제 엄청 중요한데 이걸 생각도 않았다니.. 관련 자료를 찾아보고 한 번 적용시켜보겠습니다!https://youtu.be/FoZ2cucLiDs?si=sjc1sMfeM_WY5bx3
멋지신!