폼은 지난번에 만들어둔 loginForm을 활용하고 Ajax 코드도 회원가입 코드를 복사해서 수정 후 활용할 것이다. 1. 로그인 버튼 수정 로그인 2. User.js 에 로그인 코드 작성 let index = { init: function(){ $("#btn-save").on("click",()=>{//function(){} 대신 ()=>{} : this를 바인딩하기 위해서 this.save(); }); $("#btn-login").on("click",()=>{//function(){} 대신 ()=>{} : this를 바인딩하기 위해서 this.login(); }); }, login: function(){ //alert('user의 save함수 호출됨'); let data = { username: $(..
메타코딩 - (스프링부트 강좌 45강(블로그 프로젝트) - 스프링 JPA의 OSIV 전략) 확인! 🔍트랜잭션 이란? 일을 처리되기 위한 가장 적은 단위 🔍데이터베이스 격리 수준(Isolation Level) 이란? 트랜잭션에서 일관성 없는 데이터를 허용하는 수준 PHANTOM READ (데이터가 보였다 안보였다) -> 정합성이 깨짐 더보기 즉 자기 트랜잭션 번호보다 낮은 undo 로그를 보고 select 한다 🔍DB 격리 수준 종류 Read Uncommitted Read Commited Repeatable Read Serializable Read Uncommitted -> Serializable 로 갈수록 격리 수준이 높다.(high) Serializable -> Read Uncommitted 로 갈수록..
1. 트랜젝션 관리 - 2. 서비스 의미 때문 ex) 송금 서비스 1. 홍길동 금액 update() - commit 2. 임꺽정 금액 update() - commit 원래는 금액 2개를 업데이트 하는데 하나씩 트랜젝션을 하게 되는데 두개의 트랜젝션을 하나의 트랜젝션으로 묶어서 서비스화 시킬수 있다!!! 즉 여러개의 트랜젝션을 묶어서 하나로 만들수 있기 때문에 사용한다
1. 요청에 대한 응답을 html이 아닌 Data(Json)로 받기 위하여 Ajax를 사용하는 첫번째 이유 : 고객이 사용하는 클라이언트는 크게 2가지로 웹과 앱이 있으며, 일반적으로 서버로 부터 응답받을때 웹은 HTML파일을 받고 앱은 데이터(JSON)를 받는다. 이것은 서버를 이원화하여 구축한 것을 의미하며 이때 '서버를 통합하여 각각의 클라이언트에게 응답해줄순 없을까?'라는 의문점에서 고안된 방법이 Ajax통신이다. Ajax통신을 사용하면 웹은 서버로부터 데이터(JSON)를 리턴받을 수 있으며 그렇게 되면 서버의 분리 필요없이 하나의 서버로 각각의 클라이언트 요청을 받아 응답해줄수 있게된다. 대신 웹클라이언트는 추가적인 요청을 통해 HTML파일을 받아야한다. 2. 비동기 통신을 하기 위해서
💡기존에는 form 태그에 action으로 주소를 걸어서 전송하는 방식을 사용했었는데 여기에서는 기존의 방식이 아닌, JSON을 활용해서 Ajax로 회원가입을 요청하는 방식으로 구현할 것이다. 1. 서버 요청이 들어왔을 때 기본으로 스캔하는 곳인 src/main/resources/static 아래에 user.js 파일을 생성해 준다. 2. 회원가입 버튼이 기존에 submit 타입이었는데 타입을 지우고 id값을 부여해 준다. 회원가입완료 3. id값을 가져와서 자바스크립트 코드를 작성해 준다. 4. 테스트용으로 아무 값을 입력하지 않고 회원가입완료 버튼을 눌러보면 alert창이 잘 뜨는 것을 확인할 수 있다. 5. 이제 ajax 코드를 작성해줄 것이다. 💡회원가입 시 Ajax를 사용하는 2가지 이유? 1...
1. W3School 사이트에 접속한다. 2. Navbar 선택 3. Collapsing The Navigaion Bar 코드 긁어오기 4. Basic Template 선택 5. Footer 코드는 이곳에서 긁어오기 6. 폴더 구조를 이렇게 만들어 주고 Index.jsp 파일에 아까 Navbar에서 긁어온 코드를 복사한다. 7. 그리고 Index.jsp 내용 중 헤더에 해당하는 코드, 푸터에 해당하는 코드를 분리해서 footer.jsp, header.jsp를 생성한다. footer.jsp 🤍Created by archive ☎010-1234-5678 인천광역시 header.jsp 홈 로그인 회원가입 Index.jsp : 분리한 헤더, 푸터를 include 해준다. 제목 적는 부분 상세 보기 제목 적는 부..
1. 스프링부트 동작원리 (1) 내장 톰켓을 가진다. 톰켓을 따로 설치할 필요 없이 바로 실행가능하다. (2) 서블릿 컨테이너 출처 : https://minwan1.github.io/2018/11/21/2018-11-21-jsp-springboot-%EB%8F%99%EC%9E%91%EA%B3%BC%EC%A0%95/ (3) web.xml -ServletContext의 초기 파라미터 -Session의 유효시간 설정 -Servlet/JSP에 대한 정의 -Servlet/JSP 매핑 -Mime Type 매핑 -Welcome File list -Error Pages 처리 -리스너/필터 설정 -보안 여기에서 Servlet/JSP 매핑시(web.xml에 직접 매핑 or @WebServlet 어노테이션 사용)에 모든 클..
4줄 요약 1. get 요청은 주소에 담아서 브라우저를 통해 보낼 수 있고, body 데이터 없음. form태그 형식으로. 2. post 요청도 form 태그로 가능하지만 put, delete 요청과 모두 통일을 위해 j avascript로 ajax요청+데이터는 json형태로 통일(수업에서는 이 방식 사용) 하거나 form:form 태그로 4가지 요청을 다 커버한다. 3. 스프링 컨트롤러는 key=value 형태의 데이터를 자동으로 파싱하여 변수에 담거나 object로 파싱해서 받아줄 수 있다.(해당 object의 setter 꼭 필요) 4. key=value 형태가 아닌 Json데이터나 일반 text 데이터는 @requestbody 어노테이션이 필요하다. 더보기 1. Get요청 주소에 데이터를 담아 보..