강의 따라하기/blog

context-path 없앰 user/joinForm 이었던 url을 /joinForm으로 변경 앞에 user 붙었던 url 전부 다 user 없앰. why? 권한때문에 변경

loginForm.jsp Stacked form username: Password: 로그인 user.js #btn-login 눌렀을 때, login()함수 추가한다. $("#btn-login").on("click",()=>{ this.login(); }); login: function(){ // alert('user의 save호출됨'); let data = { username: $("#username").val(), password: $("#password").val() } // console.log(data); $.ajax({ type: "POST", url: "/api/user/login", data: JSON.stringify(data), contentType: "application/json; c..

requset : 홍길동 → 장보고에게 10000원 송금 web.xml (DB 연결 세션 생성, 트랜잭션 시작 + 영속성 컨텍스트 시작(사용자별로 생성된다.)) 필터 Controller - 요청분기 Service - 송금(), repository - 계좌테이블에서 홍길동 계좌 select, 장보고 계좌 select 5번에서 홍길동과 장보고 계좌에서 select를 했기 때문에 실제로 DB에서 계좌테이블에 대한 영속성컨텍스트에 객체화한다. Service에서 홍길동 계좌 금액은 0, 장보고 계좌금액은 6000원으로 변경 로직은 요청분기한 Controller에 돌아온다. (이 때, 트랜잭션을 종료 시키는데 영속성 컨텍스트의 값이 변경을 감지하여 영속성컨텍스트는 DB에 flash해서 변경된 값을 넣어주고 DB연결..

트랜잭션 트랜잭션은 일이 처리되기 위한 가장 작은 단위이다. 더보기 ex) 유튜브 강의 한 개 [강의 준비, 영상 찍기, 영상 업로드] 를 해야 한다. 그러면 [강의 준비, 영상 찍기, 영상 업로드]가 유튜브에 한 강의를 올리기 위한 가장 작은 단위이다. 만약 강의준비가 목적이었다면 강의준비 자체가 트랜잭션이 될 수 있다. 이런 하나의 트랜잭션이 모여서 트랜잭션이 될 수 있고 이런 트랜잭션이 모여서 서비스라 부른다. 오라클 - DB 격리수준 오라클 - read commit이라는 트랜잭션을 사용 ⇒ 즉 commit된것만 read를 한다. 더보기 따라서 undo 영역에 update문 날리고 commit하기전의 값을 가지고 있다가 commit을 하면 그 undo 영역의 값도 변경해준다. READ COMMIT의..

GlobalExceptionHandler handleArgumentException() 수정한다. @ExceptionHandler(value = IllegalArgumentException.class) public ResponseDto handleArgumentException(IllegalArgumentException e){ return new ResponseDto(HttpStatus.INTERNAL_SERVER_ERROR,e.getMessage()); } ResponseDto status Type 변경한다. public class ResponseDto { // HttpStatus status; 기존 HttpStatus -> int로 변경 int status; T data; }

UserService // 스프링이 컴포넌트 스캔을 통해 Bean에 등록을 해줌. IoC를 해준다. => 메모리에 띄어준다. @Service public class UserService { @Autowired private UserRepository userRepository; @Transactional public int 회원가입(User user){ try{ userRepository.save(user); return 1; }catch(Exception e){ e.prinStackTrace(); System.out.println("UserService - 회원가입 : "+e.getMessage()); } return -1; } } 참고 - Service가 필요한 이유 트랜잭션을 관리하기 위함이다. 서..

user.js ajax 부분 완성시킨다. 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() } // console.log(data); $.ajax({ type: "POST", url: "/api/user", data: JSON.stringify(data), cont..

Ajax를 사용하는 이유 첫번째 이유 요청에 대한 응답을 html이 아닌 Data(Json)으로 받을 것이기때문이다. 브라우저의 경우 data를 받으면 다시 request를 해서 .html파일을 받아 화면을 보여지지만 (따라서 서버가 2개 필요. 데이터 리턴해주는서버와 html을 리턴해주는 서버)앱의 경우에서는 data를 받으면 프로그램을 자체적으로 화면이 이동한다. 따라서 ajax를 받게되면 서버를 하나만 만들면된다. 더보기 ajax를 사용함으로서 서버 하나 필요 더보기 ajax를 사용하지 않으면 서버 2개 필요 두 번째 이유 비동기 통신을 하기 위해서 5가지의 절차가 필요하다면 1 → 2 → 3 → 4 → 5 이런식으로 처리해나가면 된다. 예를 들어 5가지 절차가 아래와 같다한다면 화면에 그림(내장)..

joinFrom.jsp form 태그에 method와 action을 넣지않고 데이터를 json으로 보낼예정이기에 form태그 밑에 회원가입버튼을 누르면 js가 작동하여 데이터를 보낼것이다. 스크립트 연결 Stacked form username: Password: Email: 회원가입 user.js resource > static 밑에 js 디렉터리 만든 후 js 디렉터리 밑에 user.js 만든다. let index = { init:function(){ $("#btn-save").on("click",()=>{ // function(){} 대신 ()=> 사용한 이유는 this를 바인딩하기 위해서 this.save(); }); }, save: function(){ // alert('user의 save호출됨'..

UserController @Controller public class UserController { @GetMapping("/user/joinForm") public String joinForm(){ return "user/joinForm"; } } joinFrom.jsp index.jsp 복사해서 user 디렉토리 만들고 이름변경해서 붙여넣는다. bootstrap4 - Form 에서 코드 복사해서 에 넣는다. header.jsp, footer.jsp 연결해주기(index에 있던 경로와 달라서 ‘../’ 추가 해줘야함) input 받아야 할 정보(username, email, password)들에 맞게 name, placeholder 등 변경한다. 원래 form 태그안에 submit 버튼이 있어야하지만..

index.jsp webapp > WEB-INF > views 밑에 index.jsp 생성 index.jsp 에 화면구성 부분에서 붕괴된 w3school - bootstrap4 - navbar 코드 복사해서 body 붙여넣고 수정한다. Home 로그인 회원가입 BoardController @Controller public class BoardController { @GetMapping({"","/"}) public String index(){ return "index"; } } view 구조 나누기 구조를 나눠서 index.jsp를 복사해서 다른 파일을 만들면 header.jsp, footer.jsp 가 연결되서 한 번에 보이게 된다. header.jsp Home 로그인 회원가입 글쓰기 회원정보 로그아웃..

요청방식에 따라 데이터 전송방법 Get 요청 (select 할 때 사용) 주소에 데이터를 담아 보낸다.(쿼리스트링 방식) 데이터 형태가 key, value 형태이다. 특징은 body로 데이터를 담아보내지 않는다. Post, Put, Delete 요청 (데이터를 변경) Body에 데이터를 담아 보낸다. ⇒ 데이터를 담아 보내야 할 것이 많음 ⇒ Post는 form 태그 method=’Post’로 보내면 되는데 ⇒ form태그의 한계는 get,post 요청만 할 수 있다. put과 delete 요청은 하지 못한다. ⇒ 그러므로 put, delete 요청을 하기위해서는 js로 요청을 해야한다. ⇒ 따라서 post 요청 때는 form 태그 쓰고 put, delete 할 때는 js 요청을 하면 로직이 통일성이없으..