Coding Note

SpringBoot) 블로그 프로젝트_7.부트스트랩을 이용한 화면 구현2, 회원가입 본문

SpringBoot/블로그만들기PJ

SpringBoot) 블로그 프로젝트_7.부트스트랩을 이용한 화면 구현2, 회원가입

jinnkim 2022. 3. 18. 03:35

 

 

1. 회원가입, 로그인 화면 구현하기

 

- 회원가입

역시나 부트스트랩을 이용해서 구현하기

 

 

홈페이지 아래 코드를 복사해서 붙여넣기

 

 

- 회원가입 화면 구현

 

 

 

 

 

- 로그인

위 코드를 수정

 

 

 

 


 

2. 회원가입, 로그인 기능 구현하기

 

Q1. 회원가입 시 ajax를 사용하는 2가지 이유

첫번째 이유는 요청에 대한 응답을  html이 아닌 data(json)를 받기  위함

 

- 웹 : html을 리턴받음

- 안드로이드 : 자바 코드를 이용, 데이터를 리턴 받음

결론적으로 웹, 앱 요청 방식이 다름, 그러니 일을 두번 일하니..번거로우니 이를 해결하고자 데이터를 리턴 받는 형식(JSON)으로 구현함

 

이렇기 때문에 AJAX를 사용함! 두개의 서버로 각자의 일을 함!

 

두번째는 비동신 통신을 하기 위함!

- 비동신 통신 : 순서에 상관없는 절차적인 로직

- 동기적 통신 : 순서에 상관있는 절차적인 로직

 

 

- joinForm.jsp 

<button id="btn-save" class="btn btn-primary">회원가입완료</button>

 

- login.js

let index = {
	init: function() {
		//제이쿼리 사용
		$("#btn-save").on("click", () => {//function(){}, ()=> {} this를 바인딩하기 위함!
			this.save();
		});
	},

	save: function() {
		//alert('user의 save함수 호출됨');
		let data = {
			username: $("#username").val(),
			password: $("#password").val(),
			email: $("#email").val()
		};
		
		//ajax  통신을 이용해서 3개의 데이터를 json으로 변경하여 insert 요청!
		//ajax호출시 default가 비동기 통신 호출
		//ajax가 통신을 성공하고 서버가 json을 리턴해주면 자동으로 자바 오브젝트로 변환함.->dataType 선언안해도 된다는 말!
		$.ajax({
			//회원가입 수행 요청
			type: "POST", //insert
			url:"/auth/joinProc",
			data: JSON.stringify(data), //http body  데이터
			contentType: "application/json; charset=utf-8", //body데이터가 어뗜 타입인지(mime)
			dataType:"json"//요청을 서버로해서 응답이 왔을때 기본적으로 모든것이 문자열(생긴게 json이라면) => javascript 오브젝트로 변경해줌
		}).done(function(resp){
			alert("회원가입이 완료되었습니다.");
			location.href="/";
		}).fail(function(error){
			alert(JSON.stringify(error));
		}); 
	}
}
index.init();

 

로그인 완!!

 

 

3. 서비스가 필요한 이유

1. 트랜잭션(하나의 일 처리) 관리 

2. 서비스 의미 때문

   예시) 송금/입금 서비스

          - 일처리를 묶어서 처리함, 하나의 서비스로 봄

트랙잭션을 모아서 한꺼번에 처리하는 것을 서비스라고 한다!

 

 

! 트랜잭션 - 일이 처리되기 위한 가장 작은 단위!

 

 

4. DB 격리 수준

 

Oracle

- read commit

- read commit의 정합성 문제점

  - 데이터가 동일해야하는데 중간에 commit을 하면 데이터가 변한다.

  - 이걸 데이터 정합성이 깨진다고 한다.

 

PHANTOM READ (데이터가 보였다 안보였다) -> 정합성이 깨짐

 

=> 해결 방법

repeatable read

 

Mysql : InnoDB 스토리지 엔진

- repeatable read 이상 사용 -> 부정합이 발생하지 않는다.

 

!repeatable read!

- 트랜잭션이 시작하고 종료될때까지 동일한 값이 출력된다.

- 내에서 부정합이 발생하지 않는다.

- 중간에 자기 트랜잭션 번호보다 낮은 undo 로그를 조회함.

 

 

스프링에서 정합성을 위해 @Transaction을 선언함!!!!

 


5. 스프링 JPA의 OSIV 전략

요청시 - JDBC 커넥션 시작 -> 트랜잭션 시작 -> 영속성 컨텍스트 시작

 

(3) open-in-view

org.springframework.orm.hibernate3.support.OpenSessionInViewFilter 클래스

영속성을 프리젠테이션 계층까지 가져간다. 트랜잭션은 Service계층에서 종료된다. Transaction이 종료된 후에도 Controller의 Session이 close되지 않았기 때문에, 영속 객체는 Persistence 상태를 유지할 수 있으며, 따라서 프록시 객체에 대한 Lazy Loading을 수행할 수 있게 된다.

버전 2.0부터 스프링 부트는 기본적으로 OSIV가 활성화되어있을 때 경고를 발행하므로 프로덕션 시스템에 영향을 주기 전에 이 문제를 발견 할 수 있다.

 

 

Comments