본문 바로가기

전체 글

 (445)
hands on vue3 - vue3 & spring boot & Mysql로 restApi를 통해 조건에 맞는 값 가져오기(간단예제) [목표] vue를 이용하여 spring boot에 단순 데이터 조회를 요청했다. 이제는 조건의 parameter를 보내어 해당 조건에 맞는 데이터를 불러오자 포스팅 목차는 다음과 같다 DB 테이블 생성 및 데이터 추가 Vue에서 간단한 게시판 조회 Form 만들기 Spring-boot의 Controller, Service, DAO, DTO, xml 셋팅하기 폼에서 조건을 들고 api 쏘고 결과 값 화면에 나타내기 DB테이블 생성 및 데이터 추가 CREATE TABLE Notice ( nid INT NOT NULL AUTO_INCREMENT, target VARCHAR(20), gubun VARCHAR(20), title VARCHAR(50), hit VARCHAR(50), PRIMARY KEY(nid) ..
hands on vue3 - router에서 설정되지 않은 URL 처리 & redirect 설정 [목표] router에서 설정하지 않은 경로로 진입했을 때의 처리를 알아보자 1. redirect 처리 2. 설정하지 않은 모든 URL을 NotFound.vue 파일 만들어서 보내주기 설정한 router path는 3개 밖에 없다. 만약 설정한 path 이외의 URL이 올 경우는 어떻게 처리될까? 이상한 URL로 들어갈 경우 아무것도 보이지 않는다. 이것을 처리해보자 router에 변수를 설정할 때 다음과 같이 쓴다. :변수명 올바르지 않은 경로를 처리할 때도 변수명을 사용한다. 변수명은 아무거나 작성해도 된다. 뒤에 오는 정규식이 생소하게 느껴진다. path에 변수명을 설정하고 그 변수명에는 어떤 것이든 올 수 있다는 뜻이다. path: ':anything(.*)' 설정되지 않은 모든 경로에 대해 re..
hands on vue3 - router에서 url 쿼리스트링을 props로 받기 [목표] 예를 들어 네이버의 메인페이지에 갈 때 URL 뒤에 main이 붙는다고 가정해보자 http://naver.com/main naver.com 뒤에 오는 쿼리스트링을 this.$route 를 이용해 가져오지 않고 컴포넌트에서 바로 쓸 수 있도록 props 옵션을 사용해보자 기존에 소스는 아래 링크를 통해 얻을 수 있다. https://tomhoon.tistory.com/384 main.js의 라우터 설정에서 props를 true로 설정해준다. 그리고 라우터 경로에 적용되는 컴포넌트 안에 props로 받아주면 바로 사용가능하다. [TeamsMembers.vue] {{ teamName }} Go To Team2 [main.js] import { createApp } from 'vue'; import {..
hands on vue3 - vue & spring-boot mysql로 연동하기(빠른 예제) [목표] controller-service-dao순으로 MVC2패턴을 이용하여 테스트를 해볼 것이다. vue에서 버튼을 눌렀을 때 Mysql 안에 있는 DB 값을 화면에 띄우는 게 목표다. 추가로 MyBatis에 대한 간단한 개념정리를 할 것이다. 진행할 순서는 다음과 같다. 0. MySQL 테이블 생성하기 1. 패키지 생성 및 정리(Controller,Service,Dao 생성하기) 2. DB정보 설정 및 MyBatis 셋팅 3. 로직 구현 4. 화면에서 요청하여 값을 확인하기 MySQL 테이블 생성 CREATE TABLE member ( seq INT NOT NULL AUTO_INCREMENT, mb_id VARCHAR(20), mb_pw VARCHAR(20), mb_tele VARCHAR(50), ..
hands on vue3 - vue3 & spring boot로 api 연동한 뒤 값 가져와보기(가장 쉬운 예제!) - 3편 api 불러와보기 [목표] vue와 spring boot에 대한 셋팅이 완료되었다. 이제는 api 요청을 해보자 현재 포스팅에서 CORS와 DB연결에 대한 오류를 만나게 된다. 의도적으로 오류를 만나는 순서 그대로 진행하였으니 천천히 보고 따라하며 함께 오류를 만나길 바란다. 그래야 기억에 오래 남는다! 바쁘신 분들은 제일 아래로 바로 넘어가면 된다. spring-boot 서버 켜기 먼저 포트를 지정해주자 여기서 포트는 8082로 진행하지만 어떤 포트로든 열려있다면 상관없음 포트 설정이 끝났다면 서버를 켜보자 서버를 켰는데 다음과 같은 오류를 만날 것이다. 예상컨데 database에 대한 셋팅을 해놓고 연결 설정을 하지 않아서 생긴 문제인 듯 하다. 다음을 보며 database 연결을 안한다고 설정을 해보자 package..
hands on vue3 - vue3 & spring boot로 api 연동한 뒤 값 가져와보기(가장 쉬운 예제!) - 2편 vue 셋팅 [목표] 1편에서는 백엔드 셋팅을 마쳤다. 2편에서는 프론트 셋팅을 하고 백단에 api 요청하여 값을 console에 찍어보자 vue.js에 대한 환경설정을 하지 않았다면 하고 오길 바람! Vscode로 진행한다. 프로젝트 생성 윈도우일 경우 vue.cmd를 붙여줘야 보안문제가 안생긴다. 버전 3으로 진행 서버 실행 실행해서 들어가면 위와 같은 이미지가 뜬다. 우리는 간단하게 실행하기 위해 버튼만 생성하도록 한다. [App.vue] Test Button 버튼을 눌러 메소드가 잘 실행되는 걸 확인했으니 백단을 통해 값을 불러와 콘솔에 찍어보자
hands on vue3 - vue3 & spring boot로 api 연동한 뒤 값 가져와보기(가장 쉬운 예제!) - 1편 spring boot 셋팅 [목표] 지금까지 vue3에 대한 예제만 다뤄봤다. 백엔드에 대한 설정과 기능들의 익숙함 계속 가져가야한다. 그리하여 다음 몇 가지를 연습해 보도록 한다. 1. vue에서 rest api호출하여 값을 가져와보자. 2. vue에서 값을 보내어 데이터를 수정해보자. 포스팅이 조금 길어질 것 같아 조금씩 나눠서 올리려고 한다. 사전준비 사전준비는 다음 두가지다. 1. vue.js (vscode든 웹스톰이든 뭐든..) 환경설정 2. spring boot 환경설정 (안했으면 하면됨... 금방함..) 먼저 이 포스팅을 보는 사람은 Vue.js와 spring boot에 대해 환경설정이 되어있다고 생각한다. 적어도 vue.js에 대한 환경설정을 해놓았다고 가정하고 하겠다. spring boot에 대한 환경설정은 코딩팩..
hands on vue3 - <router-link to>가 안먹는다? 그 이유는 렌더링 특징 때문이다. [목표] 태그를 이용하여 URL 이동을 하려고 한다. 그런데 URL은 다르지만 컴포넌트는 같다. 예를 들어 다음과 같은 상황이다. 팀원을 보여주는 컴포넌트이다. 현재 Team1의 팀원들을 보여주고 있다. 보여주는 컴포넌트 파일은 TeamMembers.vue이다. 같은 vue 내에서 Team2의 팀원들을 보여주고싶다. 보여주는 컴포넌트 역시 Team1과 같다. 이럴 때는 컴포넌트 내의 요소들이 변화하지 않는다. 다음 코드를 보며 이해하자 [TeamMembers.vue] {{ teamName }} Go To Team2 소스를 보면 created에 사용할 데이터들을 처리한다. URL을 이동했다 하더라도 같은 컴포넌트라면 처음부터 렌더링을 다시 하지 않는다. 원래 의도대로 라면 Destroy 했다가 Create..

티스토리툴바