회원가입 구현

1. 회원가입 Form 수정

왼쪽 : 기존 회원가입 폼 / 오른쪽 : 수정버전

• 모든 컬럼을 NOT NULL로 뒀기 때문에, Optional 구역 삭제하고 모든 항목을 입력해야 넘어가도록 수정
• 새창을 띄워 아이디 중복확인을 하는 방식 -> Ajax로 구현하도록 변경 (중복확인 버튼 삭제)
• 정규표현식을 활용한 유효성 검사 구현을 위해 placeholder 수정

---

+) 여담

css의 경우 https://bootswatch.com/ 이 사이트에서 테마를 정해서 썼는데, 처음 프로젝트를 할 때는 템플릿이 뭐가 유용하다는건지 너무 어려웠다.(모르니까 활용이 어려움. 정렬도 맘처럼 안됨,,)
근데 개인프로젝트, 팀프로젝트를 거치며 css와의 전쟁을 한바탕 치르고 나니 예전에 비해 속도도 빨라지고 템플릿 코드 이해가 되는게 뿌듯했다.

2. 회원가입 기능 구현 (일단 기본적으로만 구현)

2-1. MemberController.java

// 회원가입 작업 수행
@PostMapping (value = "join") 
	public String join(
				@ModelAttribute MemberVO member, 
				@RequestParam String member_email1, 
				@RequestParam String member_email2, Model model) {
		
		member.setMember_email(member_email1 + "@" + member_email2);
		
		int insertCount = service.join(member);
		int insertCount2 = service.join_address(member);
		
		if(insertCount > 0 && insertCount2 > 0) {
			return "member/joinSuccess";
		} else {
			model.addAttribute("msg", "가입 실패!");
			return "fail_back";
		}
		
	}

• email의 경우 아이디와 도메인을 합쳐줘야 하기 때문에 set 메서드로 재설정
• member와 address 테이블이 따로 설정 돼 있어서, insert 작업도 따로 수행
• 회원가입 성공 시 joinSuccess 페이지로 이동⬇️
  

2-2. MemberMapper.xml

<!-- 회원가입 작업 수행 -->
<insert id="insertMember">
	<selectKey keyProperty="member_idx" resultType="integer" order="BEFORE">
		SELECT IFNULL(MAX(member_idx),0) FROM member
	</selectKey>
	INSERT 
		INTO member
		VALUES (
				#{member_idx} + 1,
				#{member_id},
				#{member_passwd},
				#{member_name},
				#{member_gender},
				#{member_email},
				#{member_phone},
				DATE_FORMAT(now(), '%y-%m-%d'),	<!-- join_date(가입일)-->
				'N' <!-- 이메일 인증 여부(기본값 'N')-->
				)
</insert>

<!-- 회원가입 작업 수행 + 주소 -->
<insert id="insertAddress">
	<selectKey keyProperty="address_idx" resultType="integer" order="BEFORE">
		SELECT IFNULL(MAX(address_idx),0) FROM address
	</selectKey>
	INSERT 
		INTO address
		VALUES (
				#{address_idx} + 1,
				#{member_idx} + 1,
				#{address_zipcode},
				#{address1},
				#{address2}
				)
</insert>

• member_idx 값 넣을 때 selectKey 태그 활용
• 처음으로 값을 넣을 때 idx값이 없기 때문에 IFNULL 함수 사용 (null일 경우 0으로 처리)
• 가입일의 경우 DATE_FORMAT 함수를 사용해 원하는 형식으로 insert

✍️Mybatis <selectKey>

기존 멤버의 가장 큰 member_idx를 조회하고 + 1 값을 새 member_idx로 설정 후 INSERT 해야함
=> insert 태그 내에서 <selectKey> 태그를 사용하여 SELECT 구문 실행하고, 조회된 결과값을 INSERT 구문에 반영 가능

<📝문법>

<insert>
	<selectKey keyProperty="값을 저장할 VO 객체 변수명" resultType="조회 결과 타입" order="실행 시점">
		실행할 SELECT 구문
	</selectKey>
</insert>        

• keyProperty : 조회 데이터를 저장할 VO 객체의 실제 변수명(나중에 #{변수명} 으로 사용)
• resultType : SELECT 구문 실행 시 기대되는 조회결과(리턴값)의 타입
• order : 해당 SELECT 구문을 실행할 시점
  - BEFORE 는 INSERT 구문 실행 전 SELECT 구문 실행
  - AFTER 는 INSERT 구문 실행 후 SELECT 구문 실행

---

3. 추가해야할 기능

지금은 기본 INSERT 기능만 구현해뒀기 때문에 앞으로 추가해야 할 것들 (안까먹게 기록)

• 정규표현식을 활용한 유효성 검사 구현 추가해야함
• 비밀번호 암호화
• 이메일 인증 메일
• UNIQUE 제약조건 걸린 컬럼들 Ajax로 중복검사
• 소셜 로그인/회원가입 (API)
• 모든 정보가 필수 입력값이라서 required를 일단 걸어뒀는데..성별 radio 박스는.. 둘 중 하나 선택해야하면 required를 어디 거는지?