전체 글
-
이메일 인증 구현 / 병원 실시간 예약 기능 구현 프로젝트학원 프로젝트 2023. 5. 10. 16:42
환자가 병원에 진료를 예약할 수 있는 기능을 구현 할 때 본인 인증을 할 수 있도록 만들고 싶었다. Pom.xml Spring에서 지원하는 메일 전송 라이브러리를 pom.xml에 추가하고 maven을 업데이트해서 라이브러리를 다운로드 받았다. root-context 이메일을 보낼 계정을 설정해줘야한다. 네이버, 구글 등의 계정이 가능하며, root-context에 다음과 같이 계정에 대한 정보를 설정해야한다. 메일을 보낼 계정 또한 해당 기능을 허용하도록 설정 해야한다. jsp 인증메일을 받을 이메일 주소를 전송할 수 있는 폼 태그가 필요하다. Java Script 이메일 인증번호 받기 폼 태그를 전송하면, 사용자가 입력한 데이터를 이메일 형식으로 변환하고 변환된 이메일을 컨트롤러로 전송한다. 컨트롤러로..
-
로그인 기능 구현하기 / 병원 실시간 예약 기능 구현 프로젝트학원 프로젝트 2023. 5. 10. 16:06
아직 Spring Security를 경험하지 못 했기 때문에, Session을 이용해서 로그인 기능을 구현하고 보안을 강화하는 방법을 생각해 보았다. -> ajax를 이용해서 DB에 아이디와 비밀번호를 select 해서 유저가 입력한 데이터와 같다면, JSP 폼 태그를 다음과 같이 작성하고 Button을 submit이 아닌 button으로 타입을 설정했다. Java Script 버튼을 클릭하면 데이터베이스에서 유저가 입력한 아이디, 비밀번호와 일치하는 데이터를 select 한다. select 한 데이터가 있을 경우 로그인에 성공하고, form 태그를 submit 한다 데이터가 없을 경우 로그인에 실패하고, 유저에게 로그인 실패 메세지를 띄운다 Controller (admin login) 관리자 계정을 s..
-
ajax 를 이용해서 DB 이용하기 / 병원 실시간 예약 기능 구현 프로젝트학원 프로젝트 2023. 5. 9. 14:32
유저가 사용하기 편하고 직관적인 페이지를 구현하기 위해서 진료과를 클릭하면 해당 진료과의 의사 목록을 불러오고 , 달력의 날자를 클릭하면 해당 시간에 의사의 스케줄을 확인 할 수 있는 기능을 구현하고싶었다. 왜 ajax ( 비동기식 ) 를 이용했는가? - 동기식으로 MVC 모델에서 DB와 연동하려면, 다음과 같은 컨트롤러를 구성한다. 이 경우, 브라우저는 DB와 연동할 때 마다 브라우저를 리랜더링 해야한다. 반면에, ajax를 이용하면 DB와 연동한 뒤, 브라우저에서 필요한 부분만 리랜더링 하기 때문에 유저가 더욱 다이나믹 하게 브라우저를 이용할 수 있다. 구현 화면 - 위의 달력의 날자를 클릭하면, DB로 부터 해당 날자에 예약 정보가 있는지 확인한 후, 시간 값이 들어있는 li들을 생성하고, DB에 ..
-
mySQL 다운받기Sql 2023. 5. 7. 00:29
mySql을 다운받아서 실행하려면, https://dev.mysql.com/downloads/workbench/ MySQL :: Download MySQL Workbench Select Operating System: Select Operating System… Microsoft Windows Ubuntu Linux Red Hat Enterprise Linux / Oracle Linux Fedora macOS Source Code Select OS Version: All Windows (x86, 64-bit) Recommended Download: Other Downloads: Windows (x86, 64-bit), M dev.mysql.com 여기서 워크밴치를 다운 받고, https://dev.mys..
-
CSS - em , rem , vw , vh , %기타 2023. 4. 28. 11:18
CSS 작업을 할 때, 원리를 파악하지 못 하고 복붙해서 사용해왔다. 그래서 앞으로 em과 rem, vw와 vh, % 에 대해 정리해보려고 한다. em, rem -> 상대 단위로, 고정되지 않고 특정 기준에 따라 유동적으로 바뀌는 수치를 지정할 수 있다. em 과 rem은 둘 다 font-size를 기준으로 변화하는 단위이다. 차이점으로 rem은 최상위 요소인 html의 font-size를 기준으로 변화한다. em은 해당 단위가 사용되고 있는 요소의 font-size를 기준으로 변화한다. 따라서 css를 작성할 때 rem은 // 최상위 요소에 font-size를 지정하고, html{ font-size: 10px; } // 원하는 요소에 rem을 사용하자 .class{ width: 10rem; } em은 ..
-
submit 이벤트 수정 시 유의사항JavaScript 2023. 4. 27. 14:49
form 태그 내부에 있던 submit 버튼을 눌렀을 때, 여러가지 작업을 진행한 후 form을 submit 하려고 했다. 이 과정에서 Uncaught TypeError: appointmentForm.submit is not a function 에러가 발생했다. jsp js > 처음에는 .submit() 함수에 Uncaught TypeError 가 발생해서 form 태그를 잘못 가져온 줄 알았다. 하지만, 사용하고자 하는 버튼의 타입은 submit인데, js에서 click 이벤트를 줘서 발생한 에러였다. - 다음과 같이 이벤트의 종류를 submit으로 바꾸고 나니, .submit() 메소드가 실행된다. ** 기본적으로 이벤트를 가지고 있는 요소의 이벤트 내용을 바꾸고싶다면, 다음과 같이 이벤트의 이름을 ..