화면 입력, 수정, 상세 보기 페이지 개발 방법

화면 입력, 수정, 상세 보기 페이지를 개발할 때 다음과 같이 두 가지 방법을 생각해 볼 수 있다.

첫 째는 insert.jsp, update.jsp, detail.jsp 세 개의 파일을 생성하여 각각의 화면 구성을 file 단위로 분리하는 것이고

둘 째는 memberInfo.jsp 와 같이 하나의 파일에 if(flag)와 같은 조건문을 추가하여 분리하는 것이다.

하지만 위의 두 가지 방법은 큰 문제가 있다.

코드의 중복이 발생하고, 당장은 개발이 편하고 고민할 거리가 없다고 생각하겠지만 이후 유지보수에 상당한 비용이 발생하게 되기 때문이다.

그럼 어떻게 하면 코드의 중복이 발생하지 않고, 유지보수의 어려움을 최소화 할 수 있을까?

나의 생각은 다음과 같다.

회원 가입 페이지 접근 시 memberInfo.jsp 파일에는 다음과 같이 input type의 element가 존재할 것이다.

<div>

<p>userId : <input type="text" id="userId" value="${domain.userId}" /></p>

<p>userName : <input type="text" id="userName" value="${domain.userName}" /></p>

</div>

* 참고

위 input type attribute의 value에 ${domain.userId}와 같이 표현되어 있는 것은 el 표기법이다.

값이 있으면 value attr에 추가가되어서 브라우저 화면에 보일 것이고, 없으면 보이지 않을 것이다.

일단 회원 가입 페이지 접근시에는 서버에 저장되어 있는 데이터가 없이 form 화면만 보여주기 때문에 모두 비어있는 input 창이 노출된다.

자. input 창에 데이터를 입력 후 저장을 하자.

저장을 한 후 사용자가 입력한 값이 서버에 정상적으로 저장이 되었는지를 확인시켜주기 위해 상세 페이지로 이동한다.

상세 페이지 이동할 때에도 memberInfo.jsp 페이지를 사용하고 대신 input 요소를 모두 disabled 시킨다.

그리고 수정 페이지로 이동시에는 input 요소를 모두 enabled 시키면 된다.

핵심은 요소의 attribute인 disabled를 잘 활용하면 되는 것이다.

가입 : disabled flase

수정 : disabled false

상세 : disabled true