웹에플리케이션 만들기 – JS, PHP 프로그래밍 9-1 : JavaScript 로그인앱

이번 시간에는 로그인 기능을 구현하는 방법에 대해서 살펴보겠는데요 지금까지 우리가 배운 것을 중간 정리하는 단계라고 보시면 되겠습니다

특히나 조건문이 중요하게 사용이 될 거에요 우선 Javascript부터 살펴볼 건데요 여러분들 좀 검은색과 흰색이 왔다 갔다 하면서 눈이 아프실 거 같아서 제가 색깔을 좀 밝은 색깔로 바꿔봤습니다 잘 찾아보시면 색깔 이런 테마 같은걸 바꿀 수 있는 기능이 있어요 시작해보죠

저는 7php라는 파일을 만들었고요 여기에서는 Javascript를 이용해서만 로그인을 구현해 볼 겁니다 여기서 우리가 이 수업을 진행하기 전에 여러분들이 먼저 좀 알아두셔야 할 기능이 있는데 프롬프트라는 기능입니다 프롬프트

P R O M P T 여기에다가 비밀번호라고 이렇게 적어 주고요 우리의 페이지를 열어보면 이런 화면이 뜹니다 그리고 비밀번호를 물어봐요 거기에다가 111111이라고 입력하고 확인을 누르면 됩니다

여기보시면 여기 있는 이 프롬프트라고 하는 이 명령이 방금 보셨던 그 창을 띄운거에요 거기에 비밀번호라고 이렇게 적어 주시면 이 명령어로 인해서 이렇게 생긴 창이 뜨면서 여기에 있는 비밀번호라고 하는 텍스트가 여기에 들어가게 됩니다

그러면 사용자가 여기에다가 비밀번호를 입력할 수 있겠죠? 예를 들면 111111 그리고 확인을 누르면 되는데 사용자가 입력한 정보를 우리가 받기 위한 방법은 여기에다가 패스워드라는 변수를 이렇게 주면 됩니다 한번 해볼게요 이렇게 경고창이 뜨면 어떻게 된 거냐 하면 Javascript 이 부분에서 여기가 먼저 실행이 된 거에요 그래서 비밀번호를 이렇게 물어보는 거죠 그리고 여기에다가 뭔가를 입력하면 입력하고 확인 버튼을 누르면 그러면 여기에 있는 이 부분에 값이 바로 여기에 입력한 값이 됩니다

그러면 자연스럽게 그 값이 패스워드로 들어가서 패스워드의 값은 여기에 입력한 값과 패스워드의 값이 같은 값이 된다는 거죠 그래서 한번 확인해볼까요? 여기서 제가 documentwrite(password);라고 이렇게 하고 실행을 시켜보겠습니다 F5 그리고 1111 확인 버튼을 누르면 보시는 것처럼 사용자가 입력한 정보를 이 Javascript가 알아낼 수 있게 되는 거예요 바로 이런 작업들은 HTML, CSS는 할 수 없는 일입니다

즉 사용자의 생각을 받아내서 어떤 일을 처리하는 것, 그것을 Javascript나 php는 할 수 있지만 HTML이나 CSS는 할 수 없는 일이에요 그러면 그렇게 받은 정보를 가지고 우리 한번 로그인 기능을 구현해보죠 물론 이렇게 로그인을 구현하면 절대 안 됩니다 이거 아주 허접한 방법이에요 그런데 이건 이걸로도 우리 같은 시사점이 많죠

만약 패스워드가 1111과 같다면, 그러면 어떻게 되는 거예요? 정상적인 접근이 되는 거죠? 안녕하세요 주인님 만약에 패스워드가 같지 않다면 뉘신지? 이렇게 그리고 실행을 한번해보죠 비밀번호를 입력하라고 해요, 그러면 요거는 어디까지 온 거냐 하면 여기까지 온 거죠? 그리고 여기에 비밀번호를 입력하면 그거는 패스워드로 들어가게 됩니다

1111이라고 하고 확인을 누르면 여기의 값은 이제 1111이 되면서 얘와 비교를 하면 이거 전체는 true가 되죠? 그러면 자연스럽게 if 안에 있는 이 부분이 실행이 되겠죠 한번 해볼게요 확인 안녕하세요 주인님이 뜹니다

그 다음에 F5를 누르고 1을 하나만 넣어볼게요 그리고 확인 누르면 뉘신지가 뜨는 거죠 이로써 우리에게 있어서 이 웹페이지 전체가 말하자면 확정된 상태가 되요 확정된 상태 우리는 이 웹페이지를 더 이상 수정할 필요가 없어집니다

대신에 사용자가 여기에 어떠한 값을 입력했느냐에 따라서 이 if문에 있는 이 부분의 동작 방법이 달라지게 되는 것이죠 즉, 이 프로그램에서 변할 수 있는 부분을 완전히 프로그램 바깥쪽에 사용자가 조작하는 쪽으로 몰아내서 이제 우리가 일반적으로 얘기하는 제대로 된 프로그램 같은 모양이 나오게 된 것이죠 어때요? 그렇게 멋진 것은 아니지만 어쨌든 무언가 프로그램 같은 걸 만든 것 같지 않으신가요? 예 여기까지 하고요 다음 영상에서는 php를 이용해서 로그인을 하는 방법을 우리 살펴보죠