loginForm에서 에서 action부분을 삭제한다. 이 방식을 사용하지 않을 것이기 때문이다. 또 버튼을 form 밖으로 빼낸 다음 type을 btn-login으로 변경하고 user.js를 불러온다. 이전에 회원가입을 user.js에서 ajax로 처리한 방식과 같다고 생각하면 된다. 현재 user.js에는 회원가입을 처리하는 코드가 작성되어있는데 이를 복사 붙여넣기 한 다음 수정해서 로그인을 처리하는 코드도 작성하면 된다. 여기서부터 여기까지 복사를 한 후 , 를 찍고 그 아래에다 붙여넣기 해준다. 붙여넣기하고 다음과 같이 간단하게 수정한다. 저기 주석처리 되어있는 location.href = "/blog"; 에서 주석을 지워주자 그래야 블로그 홈화면으로 이동한다. 위에 다음과 같이 코드를 추가 작성..
스프링 시큐리티에 대해 공부하기 전, 전통적인 방식의 로그인 방법에 대해 공부하자 시작하기에 앞서 일단 ResponseDto를 수정하고 가겠다. ResponseDto 수정 우선 아이디 중복 가입을 막기위해서 User모델에서 username에 unique 제약조건을 걸어준다. application.yml에서 update에서 create로 변경해주고 현재 username가 daramG인 유저가 데이터베이스에 존재할 때 중복된 username인 daramG로 가입하게 되면 다음과 같은 오류가 발생한다. unique 제약조건을 걸었으니 중복된 username으로 가입하니 오류가 발생한건데 뭐가 문제냐고 할 수 있는데, { "status": ~~, "data": ~ } 이런 형식의 결과값이 리턴되어야 했다. 왜냐..
회원가입시 Ajax를 사용하는 이유 요청에 대한 응답을 html이 아닌 Data(JSON)를 받기 위해서다. 클라이언트가 웹일수도 앱일수도 있는데 웹의 경우 서버한테 html을 받으면 그것을 인식하는데, 앱의 경우 html을 인식할 수 없으니 서버에서 Data를 준다. 이렇게 될 경우 서버를 2번 만들어야 하게 된다. 이 서버는 html을 리턴하게되는 서버를 만들고, 이 서버는 Data를 리턴해주는 서버를 만들고.. 이렇게 2번 만들바에 서버를 그냥 Data를 리턴하는 서버로 사용하는 것이다. Ajax를 이용하면 이 서버가 각각 다른 서버가 아니라 하나의 서버로 각각 클라이언트 요청을 받아서 응답해줄 수 있게 된다. 웹클라이언트는 그림처럼 추가적인 요청을 통해 HTML파일을 받아야된다. 비동기 통신을 하..
일단 시작 전에 index.jsp의 카드에서 내용 적는 부분들을 삭제시키자 빨간색 네모로 표시한 부분들을 삭제한다. 실행결과 : 이제 joinForm.jsp을 살펴보자 form action에서 method를 POST로 전송하는 것은 아주 익숙한 옛날 방식이다. 여기서는 이 방식을 사용하지 않고, JSON으로 데이터를 전송하도록 하겠다. Username, Email, Password 이 값 3개를 자바스크립트에서 가져가서 ... 우선 static폴더 안에 js폴더를 생성하고 그 안에 user.js를 만든다.(자바스크립트 파일) joinForm.jsp에서 폼 안에 있던 버튼을 다음과 같이 폼 밖으로 빼낸다. 그리고 type="submit"을 지우고 id를 다음과 같이 추가한다. 또한 user.js를 참조하는..
header.jsp와 footer.jsp 생성 및 적용 우선 index.jsp에서 해당 스크립트를 내려서 에 붙인다. 이렇게 body가 끝나는 지점에 붙이는 이유는 자바스크립트는 인터프리터 언어(위에서 한줄한줄 실행)이기 때문이다. 그리고 이제 index.jsp에 있는 header부분과 footer부분을 각각 header.jsp와 footer.jsp로 만들 것이다. 왜냐하면 header와 footer가 페이지마다 반복될텐데, 그 때 마다 모든 페이지에 header와 footer 코드를 작성하는 것은 비효율적이기 때문이다. 따라서 각각의 파일을 만들어주는 것이다. 그 다음 views 폴더 안에 layout 폴더를 생성하고 그 안에 footer.jsp와 header.jsp를 생성한다. index.jsp에서 ..
우선 ui를 구현하기 위해 부트스트랩을 사용하겠다. https://www.w3schools.com/bootstrap4/default.asp Bootstrap 4 Tutorial W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 이 곳에 들어가서 왼쪽 메뉴에서 Navbar를 클릭하고 여러 Navbar들 중에서 마음에 드는 것을 골라 Example에서 Try it Yoursel..
delete 테스트 이 테이블에서 id가 1번인 유저를 삭제하려면 어떤 코드를 작성해야 할까? 다음과 같이 코드를 작성한다. 그런데 코드를 이렇게 작성하게 되면 없는 id를 삭제하게 될 수도 있는데 이러면 오류가 발생하게 된다. 따라서 try catch 코드를 추가적으로 작성해주자 EmptyResultDataAccessException 같은 처리가 귀찮다면 모든 Exception인 Exception으로 해도 된다. 다만 다른 오류가 발생했을 수도 있으니 완벽하지는 않다. 실행결과 : 없는 id의 경우(EmptyResultDataAccessException) 이렇게 처리된다. 1번 id인 유저를 삭제했다. DB에서 확인해보니 성공적으로 id가 1인 유저가 삭제되었다. Exception 처리하기 일단 Exc..
실행결과 : save를 통한 업데이트 실행결과 : createDate와 role이 NULL로 나온다. 원래 save는 insert할 때 사용하는 것이다. 만약 save를 할 때 id값을 넘겨주면 만약 그 id가 데이터베이스에 있다면 그것을 업데이트한다. 그런데 문제는 위 코드에서 password와 email, username만 있기 때문에 다른 값들이 NULL로 변해버리는 문제가 발생한다. 따라서 업데이트 할 때는 save를 거의 사용하지 않는다. 만약 save를 통해 업데이트하고 싶다면 코드를 다음과 같이 작성하면 된다. 여기서의 user는 NULL이 없기 때문이다. id==2의 유저를 업데이트 해보겠다. 실행결과 : save 함수는 id를 전달하지 않으면 insert를 하고, id를 전달하면 해당 i..
