[동계 인턴] 1주차 기록

📣 시작하기 앞서 ..

• 실습 업체 / 근무부서 : 슈어소프트테크(주) / 시험자동화연구소(VPES팀)
• 기간 : 2022/12/26 ~ 2023/2/28 (8주)

🛠️ 1~2week Tech

• Language : Java (JSP)
• DB : pgAdmin 4
• IDE : STS 4
• Framework : Spring-Boot, Vue-js

---

📌 주요 업무

✅ JPA를 활용해 DB에 회원의 계정 정보를 담고 있는 row 직접 추가하기
✅ JDBC를 활용한 회원가입 기능 구현 - 회원가입 페이지 생성하기
✅ JDBC를 활용한 회원가입 기능 구현 - 입력 받은 회원의 계정 정보 DB에 추가하기

JPA 활용 - DB에 회원 정보 row 직접 추가

개요

JPA를 활용해 page3의 회원 목록에 본인의 정보를 직접 추가해 표에 나타내보도록 한다. 😀

• 기존 테이블 원소 개수 : 2
  

• URL 호출 -> Controller -> Service -> View (JSP)
  MVC 패턴에 관해 정리한 글

---

JS

• 기존의 page3 Vue.js

var page3Vue = new Vue({
	el : '#page3Vue',
	data : {
		memberList : []
	},
	mounted : function() {
		this.getMemberList();
	},
	methods : {
		getMemberList : function() {
			
			var self = this;
			var encodedUrl = encodeURI("member/jpa/memberlistVue");
			
			$.ajax({		
				type : "POST",
				url : encodedUrl,
				dataType : "json",
				success : function(data){			
					console.log(data.RESULT_DATA.MEMBERLIST);
					self.memberList = data.RESULT_DATA.MEMBERLIST;
				},
				error : function(){
					
				}	
			});
		}
	}
})

• 회원 정보 직접 추가하는 addMember 함수 생성

addMember : function() {

  var self = this;
  var encodedUrl = encodeURI("member/jpa/addMember")

  $.ajax({		
    type : "POST",
    url : encodedUrl,
    dataType : "json",
    success : function(data){			
      console.log(data.RESULT_DATA.MEMBERLIST);
      self.memberList = data.RESULT_DATA.MEMBERLIST;
    },
    error : function(){

    }	
  });


}

함수 추가 후 mounted 함수로 호출

• Vue Life Cycle에 대해 정리한 글

---

Controller

• js에서 호출된 함수로, Request를 받아 적절한 Service 단에서 세분화된 로직 실행을 위해
  -> memberService의 addMember 함수 호출

@RequestMapping(value = "/jpa/addMember", method = RequestMethod.POST)
	public ResponseEntity<HashMap<String, Object>> addMember(Principal principal) {
		HashMap<String, Object> retVal = new HashMap<String, Object>();

		this.memberService.addMember();
		retVal.put(StudyConstant.KEY_STR_RESULT_CODE, ResultCode.OK.name());
		retVal.put(StudyConstant.KEY_STR_RESULT_MESSAGE, "Data load success");
		return new ResponseEntity<HashMap<String, Object>>(retVal, HttpStatus.OK);
	}

---

Service

• 비즈니스 로직 (member 테이블에 직접 회원 정보 저장) 수행

public void addMember() {
		
		Member member = new Member();
		
		member.setId("nykim");
		member.setuserId("ny");
		member.setName("나영");
		member.setPW("20232023");
		member.setAuth("ROLE_NORMAL");
		
		member.setDepartment("VPES");
		member.setIsmaster(2);
		member.setPosition("Suresoft");
		member.setRank("Normal");
	
		memberRepository.saveAndFlush(member);
		System.out.println(member.getId());
		
	}

memberRepository.saveAndFlush(member); : 즉시 DB에 변경사항을 적용하는 방식

---

JSP

• userId, name, pw에 대한 정보만 화면에 표시

		<div class="row">
			<div class="col-sm-12">
				<table class="table table-bordered">
					<thead>
						<tr>
							<th>ID</th>
							<th>Name</th>
							<th>PW</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="member in memberList">
							<td>{{member.userId}}</td>
							<td>{{member.name}}</td>
							<td>{{member.pw}}</td>
						</tr>
					</tbody>						
				</table>
			</div>
		</div>
	</div>

---

결과 확인

nykim이 회원 가입한 정보가 추가되었음 !

JDBC 활용 - 회원가입 페이지 생성

개요

JDBC를 활용해 본격적으로 회원 가입 기능을 구현해보도록 한다. 😆

• URL 호출 -> Controller -> Service -> DAO -> View (JSP)

---

회원가입 페이지 생성

1. 로그인 페이지 - 회원 가입 버튼 추가
   

2. ViewController - 회원 가입 페이지로 이동

@RequestMapping("/register")
	public String registerPage(Model model) {
		log.info("REQUEST url - register");
		return "register";
	}

3. 회원 가입 페이지 - 필요한 input box들 생성 (Not Null인 칼럼 값들 선정)
   
   
   

JDBC 활용 - DB에 회원 정보 추가

JS

• 회원 가입하는 register 함수
  (각 입력 값들의 공백 체크하는 checkRegisterNull 함수 값이 true일 때 회원 가입 진행)

var registerVue = new Vue({
	el : '#registerVue',
	data : {
		userId : '',
		password : '',
		re_password : '',
		userName : '',
		department : '',
		position : ''
	},
	methods : {
    
		register : function() {
			
			var self = this;
			
			var result = false;
			
			result = this.checkRegisterNull();
			
			if (result) {
				var encodedUrl = encodeURI("member/jdbc/register");
				
				$.ajax({
					type : "POST",
					url : encodedUrl,
					data : {
						userId : self.userId,
						password : self.password,
						userName : self.userName,
						department : self.department,
						position : self.position
					},
					success : function(data) {
						if(data) {
							console.log(data);
							window.alert("회원 가입이 완료되었습니다 :)");
							location.href = 'login';
						}
					},
					error : function() {
						
					}
				});
			}
		},

• input 값들 공백 체크하는 checkRegisterNull 함수
  

        /** 회원가입 input 값들 공백 체크 **/
		checkRegisterNull : function() {
			var userId = this.userId;
			var password = this.password;
			var re_password = this.re_password;
			var userName = this.userName;
			var department = this.department;
			var position = this.position;
			
			if(userId.length == 0){
				alert("아이디를 입력하세요.");
				$("#userId").focus();
				return false;
			}
			
			if(password.length == 0){
				alert("비밀번호를 입력하세요.");
				$("#password").focus();
				return false;
			}
			
			if(re_password.length == 0){
				alert("비밀번호가 일치하는지 확인하세요.");
				$("#re_password").focus();
				return false;
			}
			
			if(userName.length == 0){
				alert("이름을 입력하세요.");
				$("#userName").focus();
				return false;
			}
			
			if(department.length == 0){
				alert("부서를 입력하세요.");
				$("#department").focus();
				return false;
			}
			
			if(position.length == 0){
				alert("직급을 입력하세요.");
				$("#position").focus();
				return false;
			}
			return true;
		}
		
	}
})

---

Controller

• js에서 호출된 함수로, Request로 필요한 파라미터 받아 적절한 Service단으로 전달
  -> jdbcMemverService의 register 함수 호출
  -> resultMessage 값 반환

@ResponseBody
@RequestMapping(value = "/jdbc/register", method = RequestMethod.POST)
public boolean registerByJDBC(
		@RequestParam("userId") String userId,
		@RequestParam("password") String password,
		@RequestParam("userName") String userName,
		@RequestParam("department") String department,
		@RequestParam("position") String position
		) {

	boolean resultMessage = false;

	resultMessage = this.jdbcMemberService.register(userId, password, userName, department, position);

	return resultMessage;
    
   }

---

Service

• memberTableDAO의 insertMember 함수를 호출해 resultMessage 값 반환

/** 회원가입 **/
	public boolean register(String userId, String password, String userName, String department, String position) {
		
		boolean resultMessage = false;
		
		MemberTableDAO memberTableDAO = null;
		try {
			// 고유 ID
			String id = UUID.randomUUID().toString().replace("-", "") + System.currentTimeMillis();
			
			// 비밀번호 암호화
			BCryptPasswordEncoder bcryptPwEncoder = new BCryptPasswordEncoder();
			String encodedPW = bcryptPwEncoder.encode(password);
			
			memberTableDAO = new MemberTableDAO(jdbc.getDataSource().getConnection());
			
			resultMessage = memberTableDAO.insertMember(id, userId, encodedPW, userName, department, position);
					
			// DB Close
			memberTableDAO.closeConnection();
			
		} catch(SQLException e) {
			log.error("SQLException", e);
		}
		return resultMessage;
		
	}

🦄 고유 ID 생성

• String id = UUID.randomUUID().toString().replace("-", "")

🔒 비밀번호 암호화

• BCryptPasswordEncoder bcryptPwEncoder = new BCryptPasswordEncoder();
  String encodedPW = bcryptPwEncoder.encode(password);

---

DAO

• SQL문을 활용해 DB에 접근 -> resultMessage 값 반환

public boolean insertMember(String id, String userId, String password, String userName, String department, String position) throws SQLException {
		boolean resultMessage = false;

		StringBuffer query = new StringBuffer();
		query.append("  insert into 			\n");
		query.append("  member (		 		\n");
		query.append("  		id, 			\n");
		query.append("  		user_id, 		\n");
		query.append("          name, 			\n");
		query.append("  		pw, 			\n");
		query.append("  		auth, 			\n");
		query.append("   		department,		\n");
		query.append("  		position,		\n");
		query.append("			ismaster		\n");
		query.append("  		)				\n");
		query.append("  values (?, ?, ?, ?, ?, 	\n");
		query.append("  		?, ?, ?			\n");
		query.append("  		)				\n");
		
		PreparedStatement ps = null;
		
		try {
			ps = connection.prepareStatement(query.toString());
			
			ps.setString(1, id);
			ps.setString(2, userId);
			ps.setString(3, userName);
			ps.setString(4, password);
			ps.setString(5, "ROLE_NORMAL");
			ps.setString(6, department);
			ps.setString(7, position);
			ps.setInt(8, 2);
			
			int rs = ps.executeUpdate();
			ps.close();
			resultMessage = true;

		} catch (SQLException e) {
			if (ps != null) {
				ps.close();
			}
		} catch (Exception e) {
			if (ps != null) {
				ps.close();
			}
		}

		return resultMessage;
	}