목록분류 전체보기 (101)
wintertreey 님의 블로그
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/KY4G1/btsIYWUosDg/5x6TzLNmmICwpaVAJpcdEK/img.png)
Node.js2009년 라이언 달이 개발한 서버 개발환경이다. 구글의 강력한 V8 자바 스크립트 엔진을 사용하므로, 자바스크립트를 사용하여 서버 어플리케이션을 효과적으로 개발 할 수 있다. 이벤트 기반 비동기 방식의 의미동기식 방식의 경우에, 서버는 클라이언트의 요청이 있을 때까지 가만히 기다리고 있다. 이 처럼기다리고 있는 시간 동안에는 아무것도 하지 않는다. 그러나 이벤트 기반 비동기식 방식은 멀티스레드 프로그래밍을 하지 않아도 다른 일을 처리하고 있다가 요청이 올 때 응답을 할 수 있도록 해 준다. Node의 장점과 단점이벤트 기반 비동기방식은 네트워크 프로그램을 개발하기에 적합하다. 그러나 문제가 발생하는 순간 프로그램전체가 영향을 받을 수 있다. 장점 1. 자바스크립트를 사용해 웹 개발자가 ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/ouTWO/btsIYef91hk/ySoTJMbaGEpmpRgW8NNGHK/img.png)
sprweb21_rest + vuerest.html 작업당시에 리액트 작업해서 이만큼 복붙해두었다. restful 형식@GetMapping읽기(전체/1개)@PostMapping추가 insert()@PutMapping수정 update()@DeleteMapping삭제 delete() 이동 url은 같다. @mapping 형식만 달라진다. 이게 restful의 특징. 회원정보 번호이름주소수정/삭제 {{member.num}}{{member.name}}{{member.addr}} 수정 삭제 회원 추가 또는 수정 회원 {{memberForm.num?'수정':'추가'}} 반응형 데이터란?Vue.js에서 데이터 변경을 자동으로 추적하고 UI를 업데이트하는 방식을..
https://wisdom-cs.tistory.com/66 [Spring Data JPA] 기본 사용법 정리전에 공부했던 Spring Data JPA의 기본 사용법을 정리하고자 한다. ✔️ Dependency build.gradle 파일의 dependencies 부분에 다음을 추가하자. implementation ‘org.springframework.boot:spring-boot-starter-data-jpa’ ✔️ 공wisdom-cs.tistory.comhttps://jjangadadcodingdiary.tistory.com/entry/Spring-Spring-Data%EC%9D%98-findBy-%EB%A9%94%EC%84%9C%EB%93%9C-%EB%84%A4%EC%9D%B4%EB%B0%8D-%EA..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/caGvDB/btsIV8IDesh/sf9po9Tc9XesPhpW9cG910/img.png)
dto toentity entity사용자 > Controller > Service > Jpa > DB DTO와 EntityDTO(Data Transfer Object) : 클라이언트와 서버 간 데이터 전송을 위해 설계된 객체Entity : 데이터베이스에 저장되는 데이터 객체로, 데이터베이스와 직접적으로 연결 Dto와 Entity를 분리한 이유entity을 직접 반환하는 코드에서 dto로 변환하여 view한테 반환한 이유는 첫 번째 이유는 Entity의 setter를 없애기 위해서였지만 이와 더불어 내가 찾아본 entity와 dto를 분리해야 하는 이유에 대해 적어보겠다. 1. Entity를 보호할 수 있다.entity를 사용자에게 노출하면 ..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/4NRd1/btsIXlNbnvZ/hPyfTqx1bY9qrl1KUWocW1/img.png)
이클립스에서 json데이터확인 아파치톰캣 서버 띄워둔다 에러발생 Cors 정책 위반Access to fetch at 'http://localhost:8080/wpro2/JikwonInfo.jsp' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled 해당 문제는 서버쪽에서 해결해야한다...
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/oHi7E/btsIV5qSUPr/jpZRD3NMFrFCnGp4Zbb7d1/img.png)
AJAX로 JSON 정보 출력하기+ 다국어 프로그램 fetch 함수사용10 더미파일11 도서관 리스트 13 고정위치 날씨 axios 함수 사용12 도서관리스트 AJAX로 JSON 정보를 읽어오는 방법(fetch 함수 사용할 경우)fetch 함수 사용:fetch는 JavaScript의 내장 함수로, HTTP 요청을 보내는 데 사용된다. 기본적으로 GET 요청을 보내며, URL을 매개변수로 받는다.응답 처리:fetch는 프로미스를 반환하므로 .then 메서드를 사용하여 응답을 처리할 수 있다. 첫 번째 .then에서 응답 객체를 받고, 응답의 ok 속성을 확인하여 요청이 성공적으로 처리되었는지 확인한다.response.json() 메서드를 호출하여 응답 데이터를 JSON 형식으로 변환한다. 이 메서드 또한..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/bkPMXU/btsIWvvR2jZ/FsHwmYxqsw8keEjbpbRk61/img.png)
뷰에서 다양한 라이브러리를 사용할 수있다.구글차트를 그려보자. 구글차트를 위한 src 보여줄 정보를 기입하고, 차트로 보여주기위한 포맷은 다음과 같다. 참고하자. 부트스트랩 사용 상단에 링크추가link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> 태그에 class로 값 부여해주기 전체소스코드는 다음과 같다. 구글 차트(원 그래프) 그리기 메뉴선택 {{value[0]}} : {{value[1]}} 1 증가 1 감소