19. 회원가입 화면 작성하기

1. 회원가입 - HTML, jsp

registerForm.html : https://github.com/castello/spring_basic/blob/main/ch2/registerForm.html

정적 파일은 webapp-resources에 만든다.

 

URL의 resources를 지우자.

 

webapp->WEB-INF->spring 경로에 2개의 xml파일이 있다. root-contet.xml은 non-web관련 설정 파일이고 servlet-context.xml은 web관련 설정 파일이다.

 

servlet-context파일에서 mapping에 있는 "/resources"를 지운다.

 

URL에 resources 붙이지 않아도 출력된다.

 

Form을 입력을 하고 우클릭으로 소스 보기를 하면 위와 같이 나온다. <form> tag에 method방식을 "GET"이나 "POST"로 지정할 수 있다. 쓰지 않으면 "GET"이 default이고, GET방식은 haed만 있고 body는 없어 data가 query String으로 들어간다. POST는 body에 data를 담아 전송한다.

<form> tag action에 전송할 URL을 지정할 수 있는데 쓰지 않으면 default값은 자기 자신이 된다. 위 입력 폼은 자기 자신에게 전달되었다. 기본적으로 Form을 입력하고 제출하면 다른 곳으로 전송되어야 한다.

 

아이디의 input 태그를 보면 name="id"로 되어 있어서 query String에 id=asdf로 들어간다.

 

 

registerInfo.jsp : https://github.com/castello/spring_basic/blob/main/ch2/registerInfo.jsp

registerInfo.jsp를 만들고 html에 form 태그에 action="/ch2/registerInfo.jsp"를 추가한다.

 

⭐ 경로가 context root이므로 views에 만들지 않고 webapp에 registerInfo.jsp만들어야 한다. 만약 view에 만들면 "/ch2/WEB-INF/view/registerInfo.jsp"을 입력해야 한다.

 

새로 고침한 다음에 form 태그가 변경되었는지 확인한다. 갱신을 해도 적용이 안될 수 있어서 소스 보기로 꼭 다시 확인을 한다.

 

폼을 입력하고 제출하면 아까와는 달리 출력이 된다. 지금은 입력 방식이 GET방식으로 돼있는데 이를 POST로 바꾸자.

 

form 태그에 method="POST"를 추가한다.

 

POST방식으로 전달했기 때문에 값이 찍히지 않는다.

 

sns를 여러개 선택했지만 브라우저에는 instagram 1개만 나오는데, input 태그의 name이 같기 때문이다. 전달 될 때 "?sns=faceook&sns=kakaotalk,,," name이 같으므로 sns=${param.sns}에서 1개만 출력된다. 

 

paramValues를 이용해서 여러개 출력 할 수 있다. 배열이기 때문에 위와 같이 작성해야 한다.

 

URL을 보면 "name=남궁성"으로 되어있는데 이 주소를 메모장에 복사 붙여넣기 하면 깨져서 나온다. URL을 전송할 때 URL 인코딩한다. 아스키코드가 아닌 한글 같은 것은 전부 위와 같이 나온다. 브라우저에는 보기 좋게 한글로 표기 되지만 전달되는 것은 메모장에 있는 것과 같이 변환된 것이 전달된다.

 

URL을 복사할 때 앞 한 글자 빼고 복붙하면 그대로 한글로 복사된다.

 

registerForm.html 코드를 보면 formCheck로 id가 입력되지 않았을 때 에러가 발생한는 코드가 있다. if에서 id의 길이를 확인하고 참이면 return true;를 반환한다. if문을 id, pwd 등 추가해서 폼 입력이 정확한지 확인할 수 있다.

 

이를 실행하기 위해 form 태그에 "onsubmit="return formCheck(this)"을 추가한다. 여기서 onsubmit은 이벤트를 등록하는 것이고 this는 form 태그 자신을 가리킨다.

 

function() {
	return formcheck(this);
}

원래는 this자리에 위 코드로 호출해야 한다.

 

아이디를 잘 못 입력했을 경우 위와 같이 에러 메세지가 뜬다.

 

input에 autofocus를 추가하면 

 

커서가 깜빡이게 바꿀 수 있다.

 

select함수는 에러가 발생했을 때, 발생한 곳으로 커서를 이동시킨다.

 

2. 회원가입 - Spring

RegisterController.java를 만들고 registerForm.jsp를 만든다.

 

정적 페이지 registerForm.html을 resources폴더에서 views로 옮긴다. 

 

<%@ page contentType="text/html;charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

확장자를 html에서 jsp로 바꾸고 한글 깨짐 방지를 위해 위 코드를 맨 윗줄에 삽입한다.

 

한글 깨진다. 인코딩이 맞지 않는다. 대체로 html에서 jsp로 바꾸면 한글이 깨진다. 원래 코드 다시 붙여 넣으면 잘 실행된다.

 

Preferences의 HTML Files를 보면 Encoding이 위와 같이 되어있는데 UTF-8로 바꿔야한다.

 

id에 aa를 입력하고 제출하면 아까와는 다르게 에러 메세지가 뜨지 않는다.

 

소스 보기를 누르면 오른쪽 코드와 동일한 결과가 나오지 않는다.

 

${msg}가 EL이 아니라 JS6에서 나온 Template literal이다. EL과 비슷하게 생겼는데 EL은 서버에서 사용되고 Template literal은 브라우저에서 사용된다. 서버가 우선순위가 높아 EL로 사용되어 요청받은 msg가 없기 때문에 빈 문자열이 들어간다.

 

위와 같이 문자열로 감싸고 EL을 한 번더 작성한다. EL이 해석을 하면 따옴표 자체를 문자로 인식해서 ${msg}만 남는다.

 

form 태그에 위를 다시 입력해주고 action에 context root가 바뀔 수 있어 jstl을 사용해서 코드를 수정한다.

 

<c:url>이 하는 역할이 context root를 자동 추가하거나 session id를 자동 추가한다. 즉 /ch2를 자동으로 입력해준다. 

⭐ jstl넣으면서 action 빠짐,,히응

 

새로 고침하고 소스 보기를 누르면 context root가 자동 추가되고 ${msg}가 없어지지 않는 것을 확인할 수 있다.

 

aa를 입력하면 오류 메세지가 정상적으로 출력된다. 값을 제대로 입력해도 오류가 나는데 action에서 page save를 만들지 않아서 그렇다.

 

회원 가입이 잘된다.