| 수정하기(Update) Focus out시 ajax를 실행하여 제목을 update 하는 방식으로 진행 JS //title save let past_title; function titleFoIn(event){ past_title = event.target.innerText; console.log() } function titleFoOut(event){ let title_input = document.getElementById('title_input'); let openedSheetId = document.getElementById('openedSheetId'); console.log(past_title) console.log(event.target.innerText) if (past_title != e..
| 회원가입(Create) fetch fetch를 활용하여 POST로 데이터 전달 fetch는 기본적으로 비동기방식이다. .then() 을 사용하면 동기식으로 처리가능하다 JS function submittest(){ var RegExp = /^[a-zA-Z0-9]{4,15}$/; //id와유효성 검사 정규식 var n_RegExp = /^[가-힣a-zA-Z]{2,15}$/; //이름 유효성검사 정규식 if(user_id.value==''){ msgbox.innerHTML='아이디를 입력해주세요'; user_id.focus(); return false; } if(!idck){ msgbox.innerHTML='아이디 중복확인을 해주세요' return false; } if(user_pw.value==''){..
| 회원가입페이지 CRUD구현 | 아이디 중복 검사(Read) 아이디 입려후 focus out을 하면 AJAX POST로 DB조회 후 중복되는게 없으면 True 없으면 False를 반환 async : true = 비동기 (Asynchronous, 요청을 보낸 후 응답결과와는 상관없이 다음방식이 동작하는 방식) async : false = 동기 (Synchronous, 요청을 보낸 후 응답결과를 받아야지만 다음 동작이 이루어지는 방식) register.js // 아이디 중복확인 let idck=false; function overlap(){ if(user_id.value==''){ user_id.classList.remove('pass'); }else{ $.ajax({ type : 'GET', // 타입 ..
스프링 부트 프로젝트 안에서 타임리프로 프론트 개발을 진행 했었는데 html, css, js 변경시 일일이 재빌드 해주는 것이 불편하여 수정이 발생하면 자동으로 리로드 되며 새로고침 되는 기능. OS 는 MAC 이며 ide 는 인텔리제이 기준. 1) dependencies 추가 build.gradle dependencies { implementation 'org.springframework.boot:spring-boot-devtools' } 2) Run/Debug Configurations 에서 설정 편집 2-1) 상단에 Application 에서 Edit Configurations 를 클릭하여 “Run/Debug Configurations” 설정 창을 띄웁니다. 2-2) 좌측에서 Spring Boot ..
application.properties를 application.yml 로 변경해주고내용은 이런식으로 작성합니다 mysql의 경우spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: db서버주소 username: db계정 password: db비번 jpa: show-sql: true properties: hibernate: format_sql: true data.rest: base-path: /api detection-strategy: annotatedserver: port: 포트번호 postgres의 경우spring: datasource: url: jdbc..
이제 본격적으로 CRUD를 위한 준비를 해보겠다 1.Header 생성 Header 클래스는 transaction_time (통신 시각) status (통신 상태 코드 OK, ERROR) description (세부 내용:: 통신이 발생한 서버 주체) 과 같은 공통 정보를 갖고 있고, 매 요청과 응답마다 정보를 넘겨야 하므로 Header라는 클래스의 필드를 작성할 수 있다. 헤더는 요청과 응답을 감싸야 하므로 Header 클래스에는 UserApiRequest, UserApiResponse 클래스같은 요청,응답 타입만 들어온다. 이는 조금 더 확대해서 해석하자면 헤더는 어차피 요청과 응답에만 관여를 하는 데이터 객체이므로 2가지의 타입이 들어온다는 것이다. 그럼 우리는 타입 체크를 위해 제너릭이라는 선택지를..
