티스토리

z00h_성장일지

검색하기

블로그 홈

z00h_성장일지

z00h.tistory.com/m

z00h 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

Vue.js [다중 파일 업로드 처리] 지난 포스팅에서 springboot로 다중파일 업로드 기능을 구현하면서 vue.js에 관한 얘기를 잠깐 하였는데 이번에 다뤄 보도록 하겠다. 우선 다중파일업로드이기때문에 파일을 1개이상 다중선택이 가능해야 한다. 이것은 input태그의 multiple속성을 사용하면 파일을 바로 여러개 선택가능해진다. ref명을 imageFile로 지정해두었다. @change를 통해 값이 들어오면 자동으로 메소드가 실행되도록 되는데 uplodad메소드에서 imgFile에 선택한 파일이 들어가야한다. 선택한 파일들을 imgFile배열에 넣어야 하는 부분에서 많은 시행착오가 있었다. for문을 사용하지 않아도 ref속성명을 지정해두고 이 값을 이용하면 쉽게 선택한 파일들을 imgFile변수에 넣어줄 수 있게 된다는것을 알게 .. 공감수 3 댓글수 0 2022. 10. 31.
Vue.js [게시판 카테고리별 검색기능] 게시판 카테고리별 검색기능에 대한 vue.js를 구현해보자 ui에서 검색조건을 추가하고 그에 해당하는 category를 받아와서 param으로 같이 넘겨주면 된다. v-select는 분류를 선택하는 태그이다. items인 keywords에는 카테고리로 사용할 [작성자, 차량명, 지역] 을 담아준다. 3개중 하나의 검색조건을 선택하면 해당하는 문자열이 category에 들어가게 된다. 헤더에 실을 param이 하나 늘어났으므로 키워드 입력후 검색 버튼을 누르면 실행되는 keywordSearch메서드에서 params에 category만 추가해주면 된다! url이 car/search로 바뀐것도 유의하도록 하자. ui에서 검색조건(category) '작성자'로 홍길동(keyword)이 쓴 글을 검색해 보자 홍길.. 공감수 0 댓글수 0 2022. 9. 15.
Vue.js [게시판 검색기능] Springboot에서 검색기능을 성공적으로 구현하였으니 vue.js로 frontend를 구현해 보도록 하겠다. template안에서 검색란, 검색버튼을 우선 만들어 보았다. 검색버튼을 누르면 keywordSearch라는 메서드가 실행이 된다. keywordSearch 메서드는 axios get호출로 params 3개를 받아오고 있고 v-model인 this.carName -> keyword, page는 초기값이 1인데 jpa 페이징에서는 page 0 값부터 시작이 되어야 하므로 this.page-1 -> page, size는 초기값 5로 지정하여서 그대로 this.size -> size 로 헤더에 param들을 실어준다. 그 후 this.totalpage값도 받아오고, this.users에 게시글 데이.. 공감수 0 댓글수 0 2022. 9. 15.
Vue.js [썸네일업로드 기능 추가] 지난번 포스팅에서 springboot 썸네일 기능을 추가 했으니 곧바로 Vue.js에도 추가하여 글을 쓰고 확인을 해보자. 우선 CarWrite.vue 템플릿에 썸네일 업로드 를추가한다. 글 추가하기 버튼을 누르면 실행되는 editImage메서드에 FormData안에 밑줄친 thumb를 추가. 여기까지 하면 글 추가하기 페이지에서 썸네일 파일을 올릴수 있게 되고 글 추가시 db에 해당파일명이 들어가게 된다. 그리고 thumb디렉토리에는 이미지파일이 추가가 된다. 직접 test글을 써보았다. 기존에는 url링크를 넣어 thumb를 보여줬었지만 이제 데이터테이블 안의 thumb컬럼에서 저장된 이미지 파일을 보여주기 위해 Car.vue에 assets/thumb경로를 넣어 살짝 수정해주면 된다. 자 이제 수정 .. 공감수 0 댓글수 0 2022. 8. 1.
Vue.js [회원가입 폼 생성 및 구현] 이번에는 회원가입을 vue.js로 구현해 보았다. 처음 member테이블을 만들때에 fullName컬럼이 없었는데 필요 할것 같아서 우선 컬럼을 추가하는것 부터 시작하였다. 회원가입시에는 FullName, email, Password, nickName, area 컬럼을 가지고 있는 member테이블을 이용하여 회원정보를 관리하도록 하고, 아래와 같이 폼을 만들어 주었다. Password는 check를 통하여 입력한 패스워드가 동일하면 회원가입이 등록되도록 하였다. 또한 아래의 정보들을 모두 입력하여야 회원가입이 되도록 하였고 입력을 하지않은 정보가 있으면 errorMessage가 나오게 하도록 하였다. SignUp.vue 취소 완료 submit 메서드에서 phoneNumber까지 입력이 되어야 axsio.. 공감수 0 댓글수 0 2022. 8. 1.
Vue.js [팝업창을 이용한 댓글 삭제 구현] 지난번 팝업창을 이용하여 댓글 수정을 구현하였는데 지난 게시글을 참고하면 매우 쉽게 삭제도 구현할 수 있다. 참고!! https://z00h.tistory.com/89 Vue.js [팝업창을 이용한 댓글 수정구현] vue.js로 ui를 구성할때 댓글 수정/삭제시에 기존에는 router를 이용해 수정/삭제 페이지로 이동하여 기능을 처리 하였지만 조금 더 깔끔하게 만들고 싶어서 팝업창을 이용하여 처리 하도록 만들어 z00h.tistory.com 지난 게시물에서 상세하게 다뤄 보았기 때문에 간단하게 보자면 마찬가지로 CarDetail.vue에 CarCommentDel의 댓글 삭제 dialog가 실행되도록 컴포넌트를 등록해주고 자식 컴포넌트 메서드를 호출해주는 부모 컴포넌트 메서드를 만든다. 부모 컴포넌트 메서.. 공감수 0 댓글수 0 2022. 8. 1.
Vue.js [팝업창을 이용한 댓글 수정구현] vue.js로 ui를 구성할때 댓글 수정/삭제시에 기존에는 router를 이용해 수정/삭제 페이지로 이동하여 기능을 처리 하였지만 조금 더 깔끔하게 만들고 싶어서 팝업창을 이용하여 처리 하도록 만들어 보았다. 팝업창을 이용하면 위와 같이 댓글 수정기능을 처리 할 수 있다. 팝업창을 만들기 위해서는 v-dialog를 사용하여야 하는데 v-dialog의 기본값을 false로 해놓으면 팝업이 없는 상태, true면 팝업창이 뜨도록 만들어 준다. 그리고 컴포넌트를 활용하여야 한다. CarDetail.vue를 부모컴포넌트, CarCommentChange.vue를 자식컴포넌트로 잡고 부모컴포넌트에서 자식컴포넌트의 메서드를 호출하도록 해주었다. 우선 CarDetail.vue에서 컴포넌트 등록부터 보도록 하겠다. 부모.. 공감수 0 댓글수 0 2022. 8. 1.
Vue.js [라우터 설치 관련 에러] 방금전 포스팅에서 썼듯이 삽질을 하면서 vue-router를 다시 설치하는 도중 설치 에러가 있었는데 내가 쓰는 환경은 vue2를 사용하고 있는데 npm install vue-router 명령어를 통해 라우터 설치시 warn문구와 함께 설치도중 에러가 발생했었다. 원인은 npm install vue-router를 통해 라우터 설치시 router 4.x버전이 자동으로 설치가 되는데 vue2버전은 router3.x버전과 사용이 되어야 되기 때문에 router를 삭제하고 다시 3.x버전으로 다시 install하였다. 3.5.3버전으로 (저번 포스팅에러의 원인을 찾으면서 외워버림) install 하였고 콘솔창을 보니 다시 에러가 떴다. 에러의 내용은 다음과 같다. npm warn optional skipping.. 공감수 0 댓글수 0 2022. 7. 4.
vue.js [Spring boot와 연동관련 에러] (carStore프로젝트) CarStore프로젝트로 Springboot + vue 연동하여 axios로 Car테이블을 불러오던 중 에러가 발생하였다. 분명히 url도 바르게 입력하여 들어갔는데도 404에러가 떠서 처음에 security관련 문제인가 싶어서 토큰을 헤더에 넣고 axios통신을 하였는데 그래도 안되길래 약 이틀동안 수많은 삽질을 하였다. vue, axios, router 버전도 다 확인하고 uninstall하고 다시 설치도 해보고 아무리 봐도 axios가 안되는건 연동문제 인것 같아서 config.js에서 port번호도 바꿔보았는데 자세히 보니 vue.config.js 로 파일의 이름이 되어 있어야 하는데 vueconfig.js로 내가 파일을 생성하여서 연동 자체가 안되었던 것이였다.. 아무리 axios error를 .. 공감수 0 댓글수 0 2022. 7. 4.
vue.js [로그인기능 (추가)] 지난번까지 로그인을 해서 Home 화면을 불러 오는데 까지 성공하였고 이번에는 로그인한 후 그 회원 email을 BoardWrite로 넘기도록 하였다. 토큰과 마찬가지로 userId를 email에 넣어줘서 data2를 만들어 같이 넘어가도록 담아주었다. 글 추가하기 항목에서 사용자의 ID(store에 저장된) 를 불러와 주도록 하였다. Home.vue에서 header에 토큰을 불러왔던 형식처럼 그대로 email을 불러옴 글 추가하기 버튼을 눌러 확인해보니 로그인하여 store에 저장된 email이 그대로 작성자 항목에 들어가 있는것을 볼 수 있다! 이제 게시판의 대부분의 기능은 만들어 보았고 새로운 게시판이 들어간 웹을 만들기 위해 새 프로젝트를 만들어 보려고 한다. 공감수 0 댓글수 0 2022. 6. 13.
vue.js [로그인] 댓글기능까지 모두 만들고 이제 통합으로 회원가입, 로그인 하는 기능을 만들려고한다. 기존의 backend에서 기능을 만들고 PostMan으로 회원가입을 시켜 놓은 상태이고 DB에 member가 저장되어 있는 상태이고 우선 vue에서 login.vue를 만들고 로그인 기능부터 만들 예정이다. ui는 다음과 같이 만들었고 로그인을 할 시 토큰이 생성되면 그것을 가져와 Home.vue에 토큰 실어주도록 할 것이다. Login.vue userId userPassword Login http://localhost:8081/#/Login에서 로그인을 해보면 정상적으로 data에 토큰이 생성된 것을 볼 수있고 그 토큰을 담아서 Home.vue를 볼 수 있도록 헤더에 토큰을 실어 주었다. Home.vue의 url의 헤더.. 공감수 0 댓글수 0 2022. 6. 10.
vue.js [댓글 수정/삭제] 이번에는 댓글을 수정, 삭제하는 기능을 만들어 보았다. 수정, 삭제를 할 수 있도록 아이콘 버튼을 vuetify에서 가져와 댓글 목록에 추가하였다. Board.vue의 표시한 윗부분이 수정아이콘, 밑부분이 삭제 아이콘 삭제 아이콘을 클릭하면 cid와 같이 CommentDelete로 넘어가도록, 수정 아이콘을 클릭하면 cid, bid와 같이 CommentChange로 넘어가도록 하였다. 수정하기에서 cid, bid를 같이 넘긴 이유는 수정하기 페이지에서 취소 버튼을 클릭하면 그전 해당 Board의 글로 이동시키기 위해 bid를 가져왔다. change 메서드는 Board의 수정하기와 거의 동일함으로 설명 생략 반면에 CommentDelete에서 취소 버튼을 클릭하면 해당 글로 이동시킬때 다른 방법으로 라우터.. 공감수 0 댓글수 0 2022. 6. 8.
vue.js [댓글 추가] 게시글의 댓글을 추가하는 기능을 만들어 보았다. bid (board id)값을 CommentWrtie에 함께 넘겨 줘서 해당하는 글에 comment를 추가해야 한다. Board와 거의 형태는 비슷하고 라우터 부분을 신경쓰는것이 포인트 comment를 추가할때 password, 작성자, 내용을 작성하도록 하고 나중에 수정, 삭제를 할때 이때 db로 저장된 password를 사용 할 것이다. Board.vue에서 댓글 추가 버튼을 누르면 bid가 같이 이동하도록 라우터 설정. BoardWrite를 만들때와 거의 유사하기 때문에 상세 코드내용은 생략하였다. (BoardWrite 블로그 게시글 참고) CommentWrite 작성 backend에서는 댓글 작성시 자동으로 현재날짜, 시간을 불러와 주도록 하였다. .. 공감수 0 댓글수 0 2022. 6. 8.
vue.js [상세페이지 안 댓글 만들기] 이번에는 글목록으로 들어가면 상세페이지에서 댓글을 같이 보여주도록 하는 기능을 만들었다. backend에서 Board 디렉토리를 참고하여 Comment 디렉토리를 만들었다. 상세페이지에서 Comment를 보여주어야하기 때문에 Board.vue에서 코드 추가. comment의 항목에는 글의 id값, 작성자, 내용, 날짜, 시간 항목을 넣었다. 앞서 게시글을 보여줬던 형식의 테이블을 가져와서 사용하였고 원하는 항목들을 넣어서 만들었다. comment를 get방식으로 불러오는 retrieveUsers2를 메서드를 추가하였다. 게시판을 확인해보니 성공적으로 상세페이지의 하단에 댓글리스트가 보여진다. 다음 게시글에서는 댓글을 추가, 수정, 삭제하는 기능을 넣을 예정이다. 공감수 0 댓글수 0 2022. 6. 7.
vue.js [검색창 만들기] 이번에는 keyword를 입력하면 그에 해당하는 글을 자동으로 검색해주는 검색창을 만들어 보았다. 처음에는 backend에 수정하여 만들려고 했으나 vuetify를 사용하여 더 간편하고 깔끔하게 만들었다. 참고 https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/v-data-table/prop-search.vue GitHub - vuetifyjs/vuetify: 🐉 Material Component Framework for Vue 🐉 Material Component Framework for Vue. Contribute to vuetifyjs/vuetify development by creating an account o.. 공감수 0 댓글수 0 2022. 6. 3.
vue.js [글 삭제하기] 지난번 수정에 이어서 바로 글 삭제하는 기능을 추가하였다. 삭제하기 또한 수정하기와 마찬가지로 db안에 저장 되어있는 password와 사용자가 ui에서 입력하는 password가 일치하면 삭제가 되도록 하였다. 그렇기 때문에 ui에서는 비밀번호 입력란만 만들어 넣었다. 삭제를 할때에도 BoardDelete.vue에서 해당하는 글의 id값을 가진 글만 삭제 되도록 하여야 하기 때문에 Board.vue(상세페이지목록) 에서 BoardDelete.vue로 id값이 넘어가도록 linkTo3메서드를 만들었다. 따라서 글 삭제 버튼을 클릭하면 linkTo3메서드가 실행되면서 현재 쿼리의 id값이 BoardDelete로 같이 넘어간다. Backend backend의 컨트롤러에서 "/del" url을 새로 만들었다... 공감수 0 댓글수 0 2022. 6. 2.
vue.js [게시판 글 수정] 게시판 글 수정하기 큰 틀에서 게시판을 수정하는 frontend인 BoardChange.vue를 일단 만들었다. BoardWrite와 달리 수정 화면에서는 작성자는 변하지 않기때문에 작성자 입력을 제외한 content, subject, password란을 아래처럼 만들어 놓았다. 비밀번호를 입력하고 기존의 db에 저장되어있는 비밀번호와 일치할때 글이 수정되도록 기능을 만들었다. 글 목록에서 상세내용을 불러와 글 하나하나를 볼때처럼 글에 해당하는 id값을 불러오는것이 핵심포인트다. Board에서 수정하기 버튼을 누를때 해당 id값의 글의 BoardChange가 불러와 져야 하기 때문에 Board.vue에 linkTo2함수를 만들어 추가하였다. Backend에서는 Putmapping을 사용하지 않고 Post.. 공감수 0 댓글수 0 2022. 6. 1.
vue.js [게시판 글 쓰기] 지난번 글 제목을 클릭하여 상세페이지를 띄우는 단계까지 진행하였고 Home화면의 게시판에 글을 작성하는 기능을 추가하였다. 우선 /Home에서 게시판의 상단에 글 쓰기 버튼을 추가하여 글쓰기 버튼을 누르면 boardWrite로 이동하여 글 작성을 할 수 있게한다. linkTo 함수를 만들고 클릭하면 넘어 갈수 있도록 만들었다. BoardWtite로 넘어가도록 link1 선언 기존에는 router-link를 사용하였는데 linkTo함수를 만들어서 linkTo안에 data를 넣고 여러개의 버튼을 추가 할때마다 간단하게 사용할 수 있도록 link1선언 후 BoardWrite를 넣음. 결국 linkTo의 data안에는 link1이 들어가게 된다. BoardWrite.vue에서 이제 글을 추가할 수 있는 기능이 .. 공감수 0 댓글수 0 2022. 5. 27.
vue.js [상세 페이지 불러오기] 데이터 테이블을 만들어 게시판을 불러오는 것 까지 성공하였고 이번에는 글 제목을 클릭하면 상세 페이지로 넘어가서 상세 내용을 나타내도록 구현해 보았다. url은 /Home -> Board로 넘어가도록 하였다. 상세 페이지의 내용에는 아이디 : 작성자 : 제목 : 내용 : 글쓴 날짜 : 글쓴 시간 : 위의 양식으로 나타나도록 구현할 예정이다. 우선 router-link를 걸어 query로 받아와서 보여주도록 하였다. 글 제목을 클릭하면 페이지가 넘어가도록 해준다. name : Board, query : {id: item.id} 입력후 Home에 들어가보면 item의 subject인 글 제목에 하이퍼링크 처럼 파란색으로 글씨가 바뀐 것을 볼 수 있다. 링크를 누르면 Board로 넘어가기 때문에 Board에 .. 공감수 0 댓글수 0 2022. 5. 26.
vue.js [게시판 불러오기] Spring boot 와 연동된 데이터를 vue.js로 게시판을 만들어 불러와 보았다. 위의 자료가 vuetify의 예제인데 페이지 넘기기, 오름차순, 내림차순 정렬의 기능이 있고 한페이지 당 행의 갯수, header에서 내가 원하는 컬럼만 뽑아오고 게시판을 만들도록 수정하였다. 참고 https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/v-data-table/usage.vue GitHub - vuetifyjs/vuetify: 🐉 Material Component Framework for Vue 🐉 Material Component Framework for Vue. Contribute to vuetifyjs/vuetify .. 공감수 0 댓글수 0 2022. 5. 26.
vue.js [axios를 통해 데이터 불러오기 3] http://localhost:8081/#/Home에 일부 데이터를 불러오는 과정에서 board의 content만 추출하려고 {{user.content}}를하였는데 TypeError 메세지가 나오고 'id'값을 읽을 수 없다는 에러가 떴다. 당연히 http://localhost:8081/#/Home에서도 화면에 아무것도 뜨지 않았다. 약 2주가량 삽질끝에 겨우 에러를 해결하였는데 해결하고나니 너무 허무했다... spring boot (backend)에 문제가 있었다. BoardController를 보면 ApiResponse를 사용하여 메소드를 만들었는데 ApiResponse를 지우고 List를 DTO에 담아 선언하니 해결되었다.. return 받는 형식이 List인 data가 아니라 ApiResponse.. 공감수 0 댓글수 0 2022. 1. 14.
vue.js [axios를 통해 데이터 불러오기 2] 지난번 포스팅에서는 board id값에 따른 글 불러오기를 해보았다. 이번에는 http://localhost:8081/#/Home에 전체글을 띄우는 것과, 일부 데이터만 가져오는 작업을 하였다. Home.vue에서 for문을 사용하여 users를 찾게 만든다. Home.vue {{user}} script 태그에서는 data()안에 배열 변수 선언, methods에 retieveUsers함수 추가 Mounted에서 다시 retieveUsers를 호출 Home.vue http://localhost:8081/#/Home에서 결과 확인 정상적으로 모든 board의 정보들이 화면에 띄워졌다! 공감수 0 댓글수 0 2022. 1. 14.
vue.js [axios를 통해 데이터 불러오기] 이번에는 locallhost:8081에 springboot의 id값에 따른 board(글)을 불러오도록 해볼 예정이다. 확인을 함으로써 spring과 vue의 연동이 되는것을 확인 해 볼 수 있다. Home.vue파일에서 작업을 해볼 예정. 우선 router디렉토리의 index.js파일 수정을 하였다. import Vue from 'vue' import VueRouter from "vue-router"; import App from "@/App"; import Board from "@/views/Board"; import Home from "@/views/Home"; Vue.use(VueRouter) const routes =[ { path:'/', name:'App', component:App }, {.. 공감수 0 댓글수 0 2022. 1. 4.
vue.js [axios 설치 및 vuetify설치] axios 설치 axios는 현재 가장 많이 사용되는 javascript의 http통신 라이브러리이다. backend URL에 접근하여 데이터를 가지고 오기위해 사용한다. (게시판의 데이터 등) 쉽게 말하여 백엔드와 프론트엔드간의 통신을 쉽게 하기 위하여 사용한다. main.js import Vue from 'vue' import App from './App.vue' import vuetify from './plugins/vuetify' import router from './router' import axios from 'axios' Vue.config.productionTip = false Vue.prototype.$eventBus = new Vue(); Vue.prototype.$axios = ax.. 공감수 0 댓글수 0 2022. 1. 3.
vue.js [router모듈 설치 및 사용] 라우팅 : 웹 페이지간의 이동하는 방법. 미리 해당하는 모든 컴포넌트 페이지를 받아 놓고 라우팅을 이용해서 그 부분만 화면을 갱신. (화면 전환) vue에서 제공하는 공식 모듈이다. 설치 명령어 : npm install vue-router --save 이제 라우터를 적용할 수 있는 상태가 되었다. 게시판 list 컴포넌트 생성 commponents 디렉토리 하위에 board디렉토리, List.vue파일 생성 List.vue 게시판 리스트 src 하위에 routes디렉토리 생성 및 indes.js 파일 생성 index.js (리스트 컴포넌트 호출, 라우터 사용 및 연결) import Vue from 'vue'; import Router from 'vue-router'; import HelloWorld fr.. 공감수 0 댓글수 0 2021. 12. 20.
vue.js [홈페이지 기본 레이아웃 만들기] locallhost8081 페이지에서 3가지 영역으로 나누어 ui를 간단하게 바꾸어 보았다. 홈페이지의 기본 레이아웃 (헤더영역, 콘텐츠영역, 풋터영역) 1. components디렉토리 하위에 common 디렉토리를 생성한다. 2. Header.vue, Footer.vue파일 생성한다. Header.vue (헤더영역) 메뉴1 메뉴2 메뉴3 메뉴4 HelloWorld.vue (콘텐츠 영역으로 사용) Footer.vue (푸터영역) https://z00h.tistory.com/ App.vue App파일에서 Header,Footer 컴포넌트 사용 및 import 추가 위의 순서대로 파일을 생성 및 수정을 마치면 간단한 레이아웃추가가 완료된다! 공감수 1 댓글수 0 2021. 12. 20.
vue.js [spring boot와 연동] (3) 저번 포스팅에서 spring의 port를 8090으로 바꾸었는데 다시 기존의 8080으로 바꾸고 npm run serve를 돌려보았다. outputDir은 npm run build로 빌드 시 파일이 생성되는 위치, indexPath는 index.html 파일이 생성될 위치를 지정, devServer는 Back-End , 즉 Spring Boot의 내장 was의 주소를 작성 추가 후 cmd창으로 넘어가서 명령어 npm run build 입력. intelliJ로 가서 확인을 해보면 resources하위의 static디렉토리가 추가가 된것을 볼 수 있다! cmd창에 npm run serve 명령어를 입력하면 locallhost:8081로 vue의 포트번호가 자동으로 8081로 바뀌었다는것을 볼 수 있다! sp.. 공감수 0 댓글수 0 2021. 12. 16.
vue.js [spring boot와 연동] (2) 이전 포스팅에서 vue.js 프로젝트 생성을 마친 후 이번에는 Vue.js Dev Server Proxy 설정을 할 것이다. proxy란 클라이언트가 자신(Proxy)을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 컴퓨터 시스템이나 응용 프로그램을 말한다. 쉽게말해 대리로 통신을 수행하는 것이다. 설정을 통하여 Spring boot로 오는 요청을 Vue.js dev서버에서 프록싱해서 받고, 다시 전달하는 과정이다. 우선 frontend디렉토리로 가서 request모듈과, path모듈을 설치한다. npm install request : request모듈 설치 npm install path : path모듈 설치 모듈 설치 후 Springboot 기본 서버 포트 8080을 8090으로 변경.. 공감수 0 댓글수 0 2021. 12. 2.
vue.js [spring boot와 연동] (1) 백엔드는 spring boot, 프론트엔드로는 vue를 사용하여 서로 연동을 시킬 예정이다. 우선 연동을 하기에 앞서 Node.js를 설치해야한다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치가 완료되었으면 Vue CLI3.0을 설치해야 하는데 Node.js를 설치하고난 후 cmd창에서 명령어를 입력하여 설치 할 수 있다. 명령어 : npm i -g @vue/cli 버전 확인 : vue --version 제거 : npm uninstall -g @vue/cli 이번에는 Vue.js 프로젝트를 생성해보자. Vue CLI를 사용해여 Springb.. 공감수 0 댓글수 0 2021. 12. 1.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.