wintertreey 님의 블로그

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를 보다 동적으로 관리할 수 있다...

리액트에서 ajax요청 +  spring에서 결과 보내주기(json)db작업create table memrest(num int primary key auto_increment, name varchar(10), addr varchar(50)); insert into memrest(name, addr) values('신기해', '강남구 역삼1동 123번지'); insert into memrest(name, addr) values('고소해', '강남구 역삼2동 13번지'); 백엔드 서버사이드 스프링작업 application.yml  application.yml은 application.properties 와 같은 일을 하는 파일로, 선택적으로 적용가능하다.yml은 properties와 다르게 겹치는 앞부분은 적..

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

VueReact에 비해 가볍고 빠르게 개발이 필요한 경우 선호.최신 릴리즈로 시작한 프레임워크(2014년).Virtual Dom 활용으로 양방향 바인딩 처리 등 가능.(proxy를 이용하여 변경된부분만 반영한다. like React)  MVVM 패턴이란? 마크업 언어나 GUI 코드를 비지니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 아키텍처 패턴을 말한다.어플리케이션 로직과 UI를 분리하기 위해 설계된 패턴으로, UI를 가지는 응용 프로그램을 위한 아키텍처 패턴. 특징MVVM 패턴은 MVC 패턴과는 다르게 커맨드와 데이터 바인딩을 가지고 있다.뷰와 모델 사이의 양방향 데이터 바인딩을 지원한다.UI를 별도의 코드 수정 없이 재사용할 수 있다.단위 테스트등의 작업이 쉽다.  MVVM은 Model..

에러발생 npm : 'npm' 용어가 cmdlet, 함수, 스크 립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정 확한지 확인하고 경로가 포함된 경우 경 로가 올바른지 검증한 다음 다시 시도하 십시오. 위치 줄:1 문자:1 + npm install react-router-dom + ~~~ + CategoryInfo : ObjectN otFound: (npm:String) [], Command NotFoundException + FullyQualifiedErrorId : Command NotFoundException   시도1https://velog.io/@bey1548/npm-npm-%EC%9A%A9%EC%96%B4%EA%B0%80-cmdlet-%ED%95%A8%EC%88%..

프로젝트 셋팅  엔티티 생성하기package pack.model;import java.sql.Timestamp;import jakarta.persistence.Entity;import jakarta.persistence.Id;import jakarta.persistence.Table;import lombok.Data;@Data@Entity@Table(name = "springboard")public class Board { @Id private int num; private String author, title, content; private Timestamp bwrite; private int readcnt;} JPA로 작업할 것이기에 JPArepository extends 를 실시한다.package..