머털&보약의 기록

Vue.js에서 ajax로 서버에서 데이터 받아와서 테이블에 뿌리는 간단한 예제 cli 환경 기반이라 npm install로 vue.js cli를 설치해야 함(미리 설치한 상태라 동영상에는 설치과정 누락됨) npm install -g @vue/cli cli 설치 후 vue create 프로젝트명으로 cli 기반 vue 프로젝트 생성 vue create vue-test1(생성할 프로젝트명) 아래 명령어로 node.js 런타임을 실행해서 페이지를 띄움 npm run serve 페이지를 띄운 순간부터 vue.js는 데이터가 변경되는 순간 실시간으로 반영한다. mounted(DOM 그린 다음 실행되는 함수) 부분에 console.log() 찍어보면 렌더링을 다시 하는게 보인다. (이놈도 React처럼 가상 DO..

state 😏 constructor(props)를 통해서 초기화, 변경 가능 constructor() {} 안에서 반드시 super(props)를 통해 부모 컴포넌트의 생성자를 호출해야한다. 안하면 에러 발생 렌더링 이후 값 수정하려면 this.state = "변경할 값" 이렇게 사용하면 절대 안되고 setState() 함수를 이용해 수정 위에서 만든 Counter Component에 constructor()를 이용해서 데이터 초기화, super(props)를 통해서 부모 컴포넌트의 생성자를 호출한 다음 this.state = {...}에 초기화할 객체를 선언 그리고 핸들러에서 this가 무엇을 나타내는지 알 수 있도록 생성자에서 아래처럼 change 메소드를 현재 컴포넌트를 바인딩한 함수로 수정해야 함..

목차 ajax로 페이징을 구현 했는데 페이지 이동이 되었다가 다시 같은 페이지가 호출이 되었다. 콘솔 보면 2페이지 데이터를 정상적으로 가져왔다가 다시 1페이지가 호출이 되고 있다. 간단한 원인 이었는데 꽤 많은 시간 삽질 끝에 나중에 다시 봐야지 하고 넘어 갔었다가 다시 봐서 해결 했다. before source 🙂 /** * 페이지네이션을 그린다. * @param paging */ function drawPagination(paging) { let pageHtml = ""; pageHtml += ""; //first const first = parseInt(paging.firstPage); pageHtml += ""; if (paging.currentPage === paging.firstPage) {..

구현 하려고 하는 기능은 동적으로 만든 엘리먼트에 onclick 이벤트를 추가 후 매개변수에 문자열을 넣는 것이다. 순번 아이디 결과 원하는데로 "문자열"이 잘 전달되었다. \" 이스케이프는 따옴표를 나타내는 문자열이라고 인식시킨다.

js에서 thymeleaf에서 사용하기 //th:inline="javascript" 명시해야 함

// 입력일("yyyymmdd" 형식)과 현재날짜를 비교 후 boolean type으로 return function isPreviousDay(dt) { //입력 날짜 년월일 const year = dt.substring(0, 4); const month = dt.substring(4, 6); const date = dt.substring(6, 8); //yyyy-mm-dd 포맷 세팅("-"를 붙이지 않으면 Invalid Date로 세팅됨) const inputDt = new Date(year + "-" + month + "-" + date); console.log("inputDt : " + inputDt); //현재날짜 const now = new Date(); console.log("now : " + ..

//시작일, 종료일 사이 일수 계산(yyyymmdd 형식) function calDiffDays(startDate, endDate) { //시작일 const strDt = new Date(startDate.substring(0,4), startDate.substring(4,6), startDate.substring(6,8)); //종료일 const endDt = new Date(endDate.substring(0,4), endDate.substring(4,6), endDate.substring(6,8)); //일수 차이(절대값) let diffDays = Math.abs(endDt.getTime() - strDt.getTime()); //하루(밀리세컨드)로 나눈 뒤 반올림 return Math.floor..

미래의 내가 보기 위해 javascript에서 thymeleaf값을 사용하는 방법을 기록한다. 코드로 대체한다. javascript(thymeleaf안의 script) // script에 th:inline 붙여야 함 controller @GetMapping("/list") public String list(Model model) { List list = userService.selectUserList(); model.addAttribute("list", list); return "view 페이지"; } reference: https://stackoverflow.com/questions/25687816/setting-up-a-javascript-variable-from-spring-model-by-usin..

목차 bootstrap modal 😄 역시 미래의 내가 보기 위해 부트스트랩을 이용해서 모달창을 띄우는 방법을 기록한다. html 코드와 js로 modal을 띄우는 방법이 존재하는데 여기서는 간단하게 html만으로 띄운다. js로 하는 방법은 아래처럼 코드를 수정하면 된다. button에 id값 주고 해당 버튼 클릭 시 $("#모달아이디").modal("show"); 이렇게 이벤트를 준다. 수정 테스트 환경: 부트스트랩 5.2.3버전 수정 버튼을 누르면 id가 "userModal"인 모달창을 띄우는 예제이다. bootstrap.min.css, bootstrap.bundle.min.css 2개의 파일이 필요하니 직접 다운로드 하거나 CDN으로 불러오거나 하면 된다. 아래 링크에서 다운로드 or CDN Do..