꾸준한 개발일기

Vue.js와 Spring으로 CRUD를 완성하고 추가적인 세부기능을 구현해보자 하였다. 그 중 먼저 검색기능을 컴포넌트로 만들어 재사용성을 높이고 싶었다. 수 많은 블로그를 둘러보며 얻었던 팁들과 함께 작성해보았다. 검색이나 페이징 값을 받을 VO 생성 SearchVo.java package app.com.model.vo; public class SearchVO { private String srhKeyword; public String getSrhKeyword() { return srhKeyword; } public void setSrhKeyword(String srhKeyword) { this.srhKeyword = srhKeyword; } } 아직 검색어 변수만 선언되어 있지만, 앞으로 페이징 변..

form 방식이나 ajax로 구현한 게시판 crud에 vue.js와 axios 비동기 통신을 적용해보았다. Vue.js를 사용하면서 편의를 위해 SPA로 작성하고, 페이지 전환은 보통 라우터를 사용해야 하지만 내가 속해있는 프로젝트에서는 전자정부프레임워크 spring의 jsp를 사용하기 때문에 이 환경에 맞춰 만들어보려했다. v-show를 이용하여 페이지 전환을 하며 컴포넌트 별 화면을 껐다 켰다 해주었는데 그 중 메인 포인트는 컴포넌트 간의 데이터 통신이었다. 컴포넌트로 화면을 구성하게 되면 같은 웹페이지라도 데이터를 공유할 수 없다. 컴포넌트마다 고유한 유효 범위를 갖기 때문이다. 그렇다면 데이터 전달을 하려면 어떻게 해야할까? 형제 컴포넌트 간의 데이터 전달 방법 Vue.js에는 이벤트버스 라는 것..

Promise란? 프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미한다. Promise의 특징 프로미스의 특징은 3가지 상태(state)를 갖고있다는 점이다. 상태란 프로미스의 처리 과정을 의미한다. new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖는다. Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태 Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태 그리고 Producer와 Consumer가 있다는 ..

vue.js 란? 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크이다. 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수 있다. Vue 앱은 단일 DOM 요소(#app)에 연결되어 DOM 요소를 완전히 제어하고, HTML은 엔트리 포인트일뿐 다른 모든 것은 새롭게 생성된 Vue 인스턴스 내에서 발생한다. 학원에서 진행하였던 스프링 프로젝트에 vue js를 적용해보았다. 가볍게 db에 있는 데이터를 이용하여 영화 리스트의 전체 수를 view단에서 보여주었다. 1. 프로젝트 세팅 기존에 있는 영화 대여점 프로젝트에 vue를 적용하였다. 밑의 블로그를 참고하였다. https://memme.tistory.com/159 이클립스 Spring 프로젝트에서 Vue.js 사용하기 #Sp..

리액트로 영화 평점 웹서비스를 구현 중 라우터 적용에 오류가 발생하였다. 코드: import React from 'react'; import './App.css'; import { HashRouter, Route } from 'react-router-dom'; import About from './routes/About'; import Home from './routes/Home'; function App(){ return ( ) } export default App; 1. 문제 확인 오류: 1. HashRouter를 사용하면 주소가 http://localhost:3000/#/로 바뀌어야 하는데 바뀌지 않았다. 2. url를 입력하여도 빈 페이지가 로딩되고 개발자 도구에서 에러 메세지가 발생한다. 오류메..