wintertreey 님의 블로그

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를 업데이트하는 방식을..

이클립스에서 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  해당 문제는 서버쪽에서 해결해야한다...

AJAX로 JSON 정보 출력하기+ 다국어 프로그램 fetch 함수사용10 더미파일11 도서관 리스트 13 고정위치 날씨 axios 함수 사용12 도서관리스트  AJAX로 JSON 정보를 읽어오는 방법(fetch 함수 사용할 경우)fetch 함수 사용:fetch는 JavaScript의 내장 함수로, HTTP 요청을 보내는 데 사용된다. 기본적으로 GET 요청을 보내며, URL을 매개변수로 받는다.응답 처리:fetch는 프로미스를 반환하므로 .then 메서드를 사용하여 응답을 처리할 수 있다. 첫 번째 .then에서 응답 객체를 받고, 응답의 ok 속성을 확인하여 요청이 성공적으로 처리되었는지 확인한다.response.json() 메서드를 호출하여 응답 데이터를 JSON 형식으로 변환한다. 이 메서드 또한..

뷰에서 다양한 라이브러리를 사용할 수있다.구글차트를 그려보자. 구글차트를 위한 src  보여줄 정보를 기입하고, 차트로 보여주기위한 포맷은 다음과 같다. 참고하자.  부트스트랩 사용 상단에 링크추가link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> 태그에 class로 값 부여해주기  전체소스코드는 다음과 같다. 구글 차트(원 그래프) 그리기 메뉴선택 {{value[0]}} : {{value[1]}} 1 증가 1 감소

ex8js1.jsconst {createApp} = Vue; createApp({ data(){ return{ key:'값1', key2:'값2', message:'안녕하세요', htmlString:'청명한 하늘', su1:'0', su2:'0', txtMsg:'', daumlogo:'https://t1.daumcdn.net/daumtop_deco/images/pctop/2023/logo_daum.png', } }, ..

html 이벤트는 DOM 엘리먼트에서 일어난다. 예시: 서버에서 읽기종료, 입력폼 전송, 버튼 클릭 등Vue에서 DOM이벤트를 Listen하려면 해당 엘리먼트에 v-on을 사용하면 된다형식) v-on:이벤트이름="메소드명"예) v-on:click="goHandler" 또는 @click="goHandler" 이벤트버스(event bus) 이벤트 간에 데이터를 전달할 수 있는 방법을 말한다 사용방법은 $emit(이벤트생성), $on(이벤트호출), $off(이벤트제거)보내는 컴포넌트에는 .$emit()을, 받는 컴포넌트에는 .$on()을 구현한다 주사위 수 : {{number}} 주사위 던지기 주사위 수+10 : {{number2}} 주사위 던지기 숫자 증가 : {{count}} ..

조건부 렌더링이란?조건부 렌더링은 웹 개발에서 동적 콘텐츠를 효과적으로 제어하는 기법.Vue.js와 같은 프레임워크에서는 조건부 렌더링을 사용하여 특정 조건에 따라 HTML 요소를 표시하거나 숨길 수 있다. 이 방식은 사용자 인터페이스(UI)를 동적으로 변경하는 데 매우 유용하다. 조건부 렌더링의 주요 특징 효율성: v-if는 조건이 바뀔 때만 DOM을 업데이트하므로, 조건이 자주 변경되지 않는 경우에 유리하다.반면, v-show는 초기 렌더링 시 요소를 항상 생성하므로, 요소의 표시 여부만 조정 사용성: 사용자가 상호작용에 따라 UI를 동적으로 변경하거나, 데이터의 상태에 따라 다른 내용을 표시할 때 유용.이러한 기법들을 적절히 활용하면, 사용자 경험을 향상시키고 UI를 보다 동적으로 관리할 수 있다...

출력될 내용 노란 네모박스에 의해 ref 하는 컴포넌트가 결정된다. index는 기본적으로 0부터 시작. 출력시 1부터 시작을 원하기에 +1을 해주었다.  v-modelVue.js에서 양방향 데이터 바인딩을 제공하는 디렉티브사용자가 입력한 데이터가 Vue 인스턴스의 데이터와 자동으로 동기화되도록 도와준다. 체크박스와 selectedBooks 배열 사이의 데이터 바인딩을 처리하는 데 사용된다. 체크박스가 선택되면 selectedBooks 배열에 해당 책 객체가 추가되고, 체크박스가 선택 해제되면 배열에서 제거된다.  하단은 메소드 및 뷰 선언 컴포넌트의 초기상태와 로직을 설정해준다.ref와 reactive를 사용해 반응형 상태를 정의해준다.  ref반응형 데이터로 동작한다. 컴포넌트에서 변경될 때 자동으로..