wintertreey 님의 블로그

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..

테이블 하나 만들어주고create table userinfo(userid varchar(10) primary key,password varchar(10) not null,name varchar(10) not null,email varchar(30)); 작업을 위해 값 넣어주기. insert into userinfo values('admin','admin','관리자','admin@admin.co.kr');insert into userinfo values('korea','kor','책임자','korea@admin.co.kr');   폴더들을 보며 틀을 잡아보자.    폴더별 구분파일의 용도VIEWwebapp내html파일사용자가 값을 입력 VIEW WEB-INF내 jsp파일사용자에게 결과물 출력 Control..

핵심로직 먼저 후다닥 작성하자. AritcleInter.javapackage pack;public interface ArticleInter { void selectAll();}ArticleDao.javapackage pack;public class ArticleDao implements ArticleInter { @Override public void selectAll() { System.out.println("테이블 자료 읽기"); }} LogicInter.javapackage pack;public interface LogicInter { void selectDataProcess1(); void selectDataProcess2();} LogicImpl.javapackage pack;public cl..

"" (문자열 리터럴)과 {} (중괄호)  input type="text" value="0" readOnly>input> 문자열 리터럴 "": value="0"은 입력 필드의 값을 "0"으로 설정.값이 하드코딩됨: 이 경우, value 속성은 항상 문자열 "0"을 가진다. React 상태나 props에 의존하지 않으며, 이 값은 고정되어 있다.만약 value={}로 적는다면중괄호 {}: {}를 사용하면 JavaScript 표현식을 JSX 내에서 평가하게된다. 예를들어 value={this.props.number}는 this.props.number라는 JavaScript 표현식을 평가하여 value 속성에 설정해준다.동적 값: value 속성에 설정된 값이 컴포넌트의 상태나 props에 따라 동적으로 변할..

import React from "react";class Clock2 extends React.Component{ constructor(props){ super(props) this.state = {date:new Date()} //state를 생성자에서 지정 } //Mount: DOM 객체가 생성되고 브라우저에 나타나는 것 //호출순서: constructor> getDerivedStateFromProps> render> componentDidMount showSigan(){ this.setState({ date:new Date() }) } componentDidMount(){ //시스템에 의한 ..

이번 기회에 부트스트랩을 도입해보려고 한다. 리액트에서는 쉽게 부트스트랩 css 파일을 통한 적용이 가능하다.  1. 부트스트랩 설치터미널에 다음 명령어를 사용하여 부트스트랩을 설치한다. npm install bootstrap 2. 부트스트랩 CSS 파일을 importsrc/index.js 또는 src/App.js 파일에 다음을 추가하여 부트스트랩 CSS 파일을 import한다.이때 다른 파일에는 굳이 import 를 해주지 않아도 된다.  import 'bootstrap/dist/css/bootstrap.min.css';  3. 그다음 부트스트랩 사이트를 참고하여 각 태그의 className에 소스를 추가해주면된다. 라우터 연습을 하면서 확인해보자. App.jsimport React from "rea..