<< 학습 목표 >>
1. 정적인 컨텐츠를 구현하기 위한 프로그래밍 언어를 나열할 수 있다.
2. 동적인 컨텐츠를 구현하기 위한 프로그래밍 언어를 나열할 수 있다.
3. 동적인 컨텐츠를 구현하기 위한 두 가지 방법을 설명할 수 있다.
4. 회원 정보 수정 서비스를 구현할 수 없는 이유를 설명할 수 있다.
전 글 ( https://codingaja.tistory.com/44, https://codingaja.tistory.com/47 ) 에서 프로젝트에 회원가입, 로그인 서비스를 구현했음
CRUD 중 CR 을 구현했으므로 이제 U(Update) 를 구현하자
회원 정보 수정이 대표적인 U 서비스임
회원 정보 수정 서비스는 회원 정보를 수정(Update) 하는 서비스임
우선 기능에 대한 정의, 스토리보드, 인터페이스를 작성하자
| << 기능에 대한 정의 >> |
| 로그인을 한 사용자만 이용할 수 있는 기능으로 회원 정보 수정 페이지에 들어왔을 때 로그인을 한 사용자의 정보를 보여주고 아이디를 제외한 비밀번호, 닉네임, 연락처를 새로운 데이터로 바꿀 수 있음 비밀번호를 변경하고 싶다면 비밀번호와 새 비밀번호를 입력함 비밀번호와 비밀번호 확인란은 비밀번호를 변경하는 경우에만 입력함 비밀번호와 비밀번호 확인은 서로 일치해야함 닉네임과 연락처는 회원가입의 조건과 동일함 |
| << 스토리 보드 >> |
 |
| << 인터페이스 >> |
 |
이제 회원 정보 수정 서비스를 구현하자
먼저 웹 페이지부터
webapp -> member -> update.html 을 추가하고 아래 코드를 추가하자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>연습 프로젝트</title>
<link rel="stylesheet" type="text/css" href="/studyProject/css/public/common.css">
<link rel="stylesheet" type="text/css" href="/studyProject/css/member/join.css">
</head>
<body>
<header><< 회원 정보 수정 >></header>
<main>
<form action="/studyProject/member/update" method="POST">
<fieldset>
<label for="id">아이디</label>
<input type="text" name="id" id="id" required="required" disabled="disabled" readonly="readonly" dp-name="아이디">
</fieldset>
<fieldset>
<div>
<label for="pw">비밀번호</label>
<input type="password" name="pw" id="pw" required="required" dp-name="비밀번호">
</div>
<div>
<label for="pwchk">비밀번호 확인</label>
<input type="password" name="pw" id="pwchk" required="required" dp-name="비밀번호 확인">
</div>
</fieldset>
<fieldset>
<label for="nickname">닉네임</label>
<input type="text" name="nickname" id="nickname" required="required" dp-name="닉네임">
</fieldset>
<fieldset>
<label for="tel">연락처</label>
<input type="tel" name="tel" id="tel" required="required" dp-name="연락처">
</fieldset>
<fieldset>
<button type="button" role="submit">정보 수정</button>
</fieldset>
</form>
</main>
</body>
</html>
! 여기서 ! 굉장히 큰 문제가 하나 생김
그 큰 문제에 대해 얘기하기 전에 정적인 컨텐츠와 HTML에 대해 얘기하고 여기서 발생한 큰 문제에 대해서 얘기하자
HTML은 정적인 컨텐츠를 보여주는 언어로 회원가입, 로그인 페이지는 누구나 다 똑같은 페이지(정적인 컨텐츠)를 봐야함
A 사용자는 회원 가입할 때 아이디 입력란이 안보였는데 B 사용자는 회원 가입할 때 아이디 입력란이 보이는 등 [ 사용자의 상황에 따라 다른 컨텐츠 (동적인 컨텐츠) ] 가 보이면 안되는 페이지들임
그래서 앞서 회원가입, 로그인 페이지는 정적인 컨텐츠이므로 HTML로 작성해도 문제가 없었음
이제 이 페이지에서 발생하는 굉 장 히 큰 문제를 얘기하자
위로 올라가서 회원 정보 수정 기능에 대한 정의를 보면 "로그인을 한 사용자의 정보를 보여주고" 라는 말이 있음
로그인을 한 사용자의 정보를 보여준다는 말은 A가 로그인 후 회원 정보 수정 페이지로 왔다면 A의 정보가 보여야함
B가 로그인 후 회원 정보 수정 페이지로 왔다면 B의 정보가 보여야함
다르게 생각해보면 내가 네이버에 로그인하고 네이버에서 사용하는 닉네임을 바꾸기 위해서 네이버의 회원 정보 수정 페이지로 들어갔다고 생각해보자
그러면 내 정보가 보여야함
다른 회원의 정보가 보이면? 당연히 이상함
이런것처럼 우리의 회원 정보 수정 페이지에서도 로그인을 한 사용자의 정보를 보여줘야하는데 HTML은 정적인 컨텐츠를 보여주는 언어임
HTML만 사용해서는 회원 정보 수정 페이지에서 로그인한 사용자의 정보를 보여줄 수 없음
이제 여기에 동적인 컨텐츠를 보여줄 수 있는 언어를 사용해 로그인한 사용자의 정보를 보여주면 됨
동적인 컨텐츠를 보여줄 수 있는 언어는? 클라이언트 사이드 언어인 JS 가 있고 서버 사이드 언어인 Servlet 이 있음
둘 중에 뭘 사용해도 상관 없음
JS 를 사용한다면 XMLHttpRequest 객체를 사용하거나 Jquery의 Ajax 를 사용해 로그인 한 사용자의 정보를 불러와 화면에 뿌려줄 수 있을 것임
Servlet을 사용한다면 회원 정보 수정 페이지를 보여주기 전 로그인 한 사용자의 정보를 불러와 Servlet 안에서 PrintWriter 객체를 사용해 로그인한 사용자의 정보가 들어간 회원 정보 수정 페이지를 print 하면 됨
그. 러. 나. 여전히 큰 문제는 해결되지 않았음
가장 중요한 로그인한 사용자를 판단할 수단이 없음
로그인을 한 사용자가 누구인지 알려면 로그인을 할 때 쿠키(Cookie) 또는 세션(Session) 이라는 곳에 로그인한 사용자의 ID 를 저장해둬야함
앞 글 ( https://codingaja.tistory.com/47 ) 에서 로그인할 때 우리가 쿠키나 세션을 사용했는지? 사용하지 않았음
쿠키와 세션은 다음 장인 Chapter05 에서 배움
따라서 큰 문제를 해결 할 수 있는 방법은 아직 모름
지금은 회원 정보 수정 페이지를 추가하고 회원 정보 수정 서비스를 왜 구현할 수 없는지까지만 기억하자
회원 정보 수정 서비스는 다음 장에서 구현할 것
여기까지 회원 정보 수정 서비스 끝~!
'Servlet + JSP > Serlvet-Chapter04' 카테고리의 다른 글
| Chapter04. CRUD 프로젝트 / 회원 탈퇴 (0) | 2023.03.09 |
|---|---|
| Chapter04. CRUD 프로젝트 / 로그인 (0) | 2023.03.08 |
| Chapter04. Connection Pool 을 사용한 DB 연동 (0) | 2023.03.08 |
| Chapter04. CRUD 프로젝트 / 회원가입 (0) | 2023.03.07 |
| Chapter04. 자바의 DB와 관련된 자원은 close 를 해줘야한다. (2) | 2023.03.06 |