일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 싱글톤
- HTTP
- js
- di
- 캐시
- Stateless
- Setter
- 프로토타입
- BEAN
- dependency injection
- Repository
- Kotlin
- Spring
- Security
- javascript
- DB
- Singleton
- cache
- Java
- 로그인
- VUE
- HTTP 메서드
- vue-cli
- 의존성 주입
- vuex
- thymeleaf
- Excel
- 라이프 사이클
- Vue.js
- JPA
- Today
- Total
목록Vue.js (21)
jhhan의 블로그
Vanilla JS에 대해서 익히고 난 후 고민을 (조금) 해본 후 내린 결론은 일단은 Vue.js를 공부해보자 였다. 그 이유로는 1. 현재 하는 일이 백엔드보다는 프론트엔드를 훨씬 많이 다루기 때문이다. 물론 그렇다고 Vue.js처럼 3대장 프론트엔드를 사용하는 것도 아니지만 지금은 프론트엔드를 사용해서 일을 하고 있으니, 같은 프론트엔드를 공부해놓으면 조금이라도 도움이 되지 않을까 싶어서이다. 2. 예전에 Vue.js를 사용했기 때문이다. 예전에 잠깐이나마 (야매로) Vue를 사용한 경험때문에 그런지 Vue를 공부하는 것이 나쁘다고는 생각하지 않는다. 물론 내가 프론트엔드를 더 사용하지 않는다면 시간낭비가 될 수도 있을 것이다. 3. 현재 무슨 공부를 해야할 지 모르겠어서 일단은 Vue를 공부해보기..
이번 포스트에서는 package-lock.json에 대해서 알아보겠습니다. 사실 이 글을 vue.js 카테고리에 넣는게 맞나 하는 생각이 들기도 합니다. 하지만 package-lock.json이라는 파일이 사용되는 곳이 일단 저한테는 vue.js를 사용할 때입니다. 그래서 이 카테고리에 넣었습니다. 일단 vue.js 프로젝트를 하나 만들었을 때의 구조입니다. package.json과 package-lock.json 파일이 2개 다 보이죠. 일단 먼저 package.json에 대해서 먼저 알아봐야 겠네요. package.json 프로젝트의 정보 정의 의존하는 패키지 정보를 표시 이런 파일입니다. 그리고 프로젝트 정보 : name, version 패키지 정보 : dependencies, devdependen..
이번 포스트는 저번 엑셀 다운로드에서 발생할 수 있던 에러를 수정해보려고 합니다. 저번에 마지막에서 void로 리턴값을 해놨지만, Vue.js에서는 잘 받아서 진행한다고 했습니다. 이번에는 정석적으로 리턴을 해보겠습니다. 리턴할 때 ResponseEntity를 사용하고, InputStreamResource를 바디에 담아 반환하도록 설계했습니다. 아 그리고 이번에는 갑자기 Kotlin으로 진행을 했습니다... 그래도 코틀린과 자바는 굉장히 비슷하므로, 자바를 잘 아신다면 코틀린 문법을 이해하는데 큰 어려움이 없을 것 같습니다. front코드는 변경할 것이 없습니다. 그대로 갑니다. back코드를 살펴보겠습니다. @PostMapping("/excel") fun getExcelFile(@RequestBody ..
이번 포스트는 스프링 - 엑셀 다운로드를 좀 더 그럴 듯하게 변경해서 진행합니다. 저번 엑셀 다운로드는 굉장히 간단하게만 알아봤습니다. 이번에는 backend: spring frontend: vue.js 로 진행해보려 합니다. 빠른 진행을 위해 설정은 아래 링크를 참조하면 됩니다. jhhan009.tistory.com/49?category=780121 먼저 백엔드부터 진행합니다. 모델과 컨트롤러가 중요합니다. 먼저 모델인 IntAndDouble 클래스를 만들어봅니다.(클래스 이름은 맘대로 하시면 됩니다.) public class IntAndDouble { private Integer mode; private Double affinity; private Double lb; private Double ub;..
이번 포스트에서는 vue.js에서 getter와 setter를 사용해보겠습니다. 참고로 이번글은 vuex와 관련해서 다루는 글이 아닙니다. vuex 관련 글을 생각하고 들어오신 분은 안보셔도 됩니다. javascript에서도 getter와 setter를 적용해 볼 수 있다는 말을 들어서 실제 코드를 통해 보려고 합니다. java에서 했던 것처럼 그냥 똑같이 만들어서 적용하면 됩니다. 정말 간단한 코드부터 보겠습니다. (vue.js 기준으로 합니다.) clickSet clickGet setter와 getter를 만들고 버튼만 만들어서 console에다 찍는 걸로 했습니다. clickSet을 누르고 clickGet을 눌러본다면 다음과 같이 나타납니다. setter와 getter가 잘 동작하는 것을 알 수 있..
이번 포스트는 eslint에 관한 글입니다. noogoonaa.tistory.com/62 참고한 블로그입니다. vue.js를 사용 중에 계신 분들 중 아마도 vue-cli로 작업하시는 분들이 많으실 텐데요 eslint warning이 많이 떠서 귀찮으신 분들이 있으실 겁니다. (제가 그랬어서.. ㅎㅎㅎㅎ) 이런 비슷한 warning이 뜨실 겁니다. 이런 경고가 한두개면 상관없는데, 저는 수백개가 뜨더라고요.... 그래서 빌드하고 1분정도는 지나야 작업할 수 있엇습니다. 그냥 참고 썼었는데,,, 요즘 너무 지나치게 많이 나와서 한번 검색해봤습니다. 이제 적용방법입니다. .eslintrc.js 라는 파일이 있을 겁니다. 그 파일로 들어가서 module.exports = { rules: { 'prettier/..
Spring과 Vue.js를 연결해보는 예제에 대해 해보겠씁니다. 이전에 제가 backend를 Spring으로 하고 front를 Vue.js로 해서 둘을 연동하는 법을 진행했습니다. 이번에는 다른 방식으로 둘을 연동해보겠습니다. 경우에 따라서는 이 방법이 더 편하게 느낄 수도 있을 것입니다. 이번에는 back과 front 프로젝트를 따로 만들 것 입니다. 먼저 back을 만들겠습니다. 1. Back Spring 프로젝트를 만듭니다. 프로젝트의 이름을 설정합니다. Maven과 Gradle 둘 중 어느 것을 선택할 지는 원하시는 쪽을 하시면 됩니다. 간단한 연동만 할 것이니 저기 2개만 선택합니다. 원하시는 것을 더 추가하셔도 됩니다. 마지막으로 프로젝트 위치를 설정하시고 back 설정을 잠시 멈춰두겠습니다..
이번에는 Vuetify를 기본적으로 다뤄보기만 해보겠습니다. 먼저 Vue.js 파일을 만듭니다. 먼저 Vue.js를 선택합니다. 프로젝트의 제목을 입력하시고 그 외의 설정들을 바꾼 후 진행하시면 됩니다. 처음 하신다면 프로젝트 제목만 입력하고 finish 버튼을 누르면 되겠습니다. 그러면 Vue.js 프로젝트가 만들어집니다. 그럼 이제 터미널 창에서 진행합니다. npm run serve를 입력하시면 프로젝트가 실행되면서 화면을 보실 수 있습니다. 이제 'vue add vuetify'를 입력합니다. 그러면 vuetify 관련 파일들이 설치됩니다. 그리고 다시 npm run serve를 입력하시면 vuetify관련 화면으로 바뀐 것을 알 수 있습니다. (관련 캡쳐화면은 하지 못했습니다. 기본 화면이니 쉽게 ..