Socket.io 채팅 애플리케이션 (2) - 회원관리 웹 디자인
지난 시간에
지난 시간에는 node.js 기본 서버 셋팅을 했다. 이번 시간에는 socket 과 직접 통신하는 부분을 만들건데 우선 ui 화면을 꾸미겠다.
mark up ( ui 꾸미기 )
# /chat.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Chat</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/js/script.js"></script>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div id="wrapper">
<div id="userWrap">
<nav>
<span>
chat App
</span>
</nav>
<div id="menuList">
<div id="menuHeader">메뉴</div>
<div class="button menuBtn" id="loginBtn">LOGIN</div>
<div class="button menuBtn" id="joinBtn">JOIN</div>
</div>
<form id="loginForm">
<h1>LOGIN</h1>
<p><input type="text" placeholder="id" id="loginId" autocomplete="off"></p>
<p><input type="password" placeholder="password" id="loginPw" autocomplete="off"></p>
<p><input class="btn" type="submit" value="로그인"></p>
</form>
<form id="joinForm">
<h1>JOIN</h1>
<p><input type="text" placeholder="id" id="joinId" autocomplete="off"></p>
<p><input type="password" placeholder="password" id="joinPw" autocomplete="off"></p>
<p><input class="btn" type="submit" value="회원가입"></p>
</form>
</div>
</div>
</body>
</html>
login form 과 join form을 만들었다.
login 할때는 id 와 password 를 입력받고 join 할때도 마찬 가지로 id 와 password 받는다.
jquery 를 사용해 조금 더 쉬게 DOM에 접근 할 수있게 하였고, 기본적인 css, js 파일들을 포함 시켰다.
이제 css 로 꾸며 보자.
# /public/css/style.css
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#wrapper::after {
clear: both;
content: '';
display: block;
}
#userWrap {
display: block;
}
.btn {
background: #fff;
padding: 7px 40px;
border: 1px solid RGB(0, 126, 243);
color: RGB(0, 126, 243);
font-size: 17px;
}
form input[type=text], form input[type=password] {
width: 70%;
height: 30px;
padding-left: 15px;
font-size: 17px;
border: 1px solid #aaa;
}
input[type=button],
input[type=submit],
button {
cursor: pointer;
}
nav{
width: 100%;
min-width: 1280px;
height: 50px;
background: #0084FF;
color: #fff;
padding: 0px 20px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 17px;
}
#logoutBtn{
cursor: pointer;
}
#menuList {
float: left;
width: 200px;
border: 1px solid #0084FF;
border-radius: 5px;
margin: 20px;
}
#menuHeader {
background-color: #0084FF;
color: #fff;
height: 40px;
font-size: 18px;
line-height: 40px;
text-align: center;
border-radius: 5px;
}
.menuBtn {
text-align: center;
border-bottom: 1px solid #f0f0f0;
padding: 10px 0px;
}
#loginForm {
float: left;
display: block;
width: 400px;
text-align: center;
margin: 20px;
}
#joinForm {
float: left;
display: none;
width: 400px;
text-align: center;
margin: 20px;
}
join 에 display : none 속성을 주어 옆에 join 메뉴를 클릭시 보이게 했다.
자 여기까지 했으면 화면에 ui가 잘뜨는지 확인해 보자.
윈도우 cmd창을 열어 node app.js 를 입력한 후 웹 브라우저를 열어 http://localhost:3000 으로 접속해보자.
이제 jquery를 이용하여 메뉴에 있는 join 버튼을 눌렀을때 joinForm 이 보이는 동작을 만들어 보겠다.
# /public/js/script.js
$(function () {
var $loginForm = $('#loginForm');
var $joinForm = $('#joinForm');
$("#loginBtn").click(function (e) {
e.preventDefault();
$loginForm.show();
$joinForm.hide();
});
$("#joinBtn").click(function (e) {
e.preventDefault();
$joinForm.show();
$loginForm.hide();
});
});
e.preventDefault(); 는 해당 이벤트의 대상이 가지고 있는 기본 이벤트를 실행시키지 않을 때 사용한다.
예를 들어 <a> 태그는 href 속성에 저장되어 있는 값으로 페이지를 이동하는데 <a> 클릭 이벤트에
e.preventDefault(); 를 넣으면 작동하지 않는다.
해당 코드는 앞으로 자주 나오니 기억하는 것이 좋다.
다시 서버를 재시작해서 메뉴들을 클릭 해보면 잘 동작하는 것을 확인할 수 있다.
다음 시간에
회원 관리 ui 화면을 완성했으므로 이제는 회원관리에 필요한 socket 통신을 구현해보겠다.
'Side Project' 카테고리의 다른 글
| [PROJECT] Socket.io 를 이용한 채팅 애플리케이션 (6) - 채팅 기능 구현 (채팅방에 들어가보자 - 클라이언트) (0) | 2018.09.28 |
|---|---|
| [PROJECT] Socket.io 를 이용한 채팅 애플리케이션 (5) - 채팅 기능 구현 (채팅방에 들어가보자 - 서버) (0) | 2018.09.28 |
| [PROJECT] Socket.io 를 이용한 채팅 애플리케이션 (4) - 채팅 창 웹 디자인 (0) | 2018.09.27 |
| [PROJECT] Socket.io 를 이용한 채팅 애플리케이션 (3) - 회원관리 기능 구현 (0) | 2018.09.27 |
| [PROJECT] Socket.io 를 이용한 채팅 애플리케이션 (1) - 설계 및 기획 (0) | 2018.09.20 |
