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..

이번 포스트는 Vue.js에서 Excel을 바로 다운로드 하는 법에 대해서 다룹니다. 이전에도 Spring / Vue & Spring 카테고리에서도 이 주제를 계속 다뤘습니다. 사실 지금까지 다룰 줄 몰랐습니다. 이번에는 백엔드 처리를 거치지 않고 바로 프론트 작업만으로 엑셀 다운로드를 할 수 있게 할 것입니다. 라이브러리를 사용하는 경우와 안하는 경우 2가지를 보여드릴 것입니다. 물론 Vue.js 프로젝트 하나 만들어서 진행하셔야 합니다. 1. 라이브러리를 사용하지 않는 경우 참고한 사이트입니다. newehblog.tistory.com/3 먼저 코드입니다. id name age 1 aa 24 2 bb 46 3 cc 84 Excel4 엑셀로 다운받을 데이터를 먼저 테이블로 만들었습니다. 그리고 엑셀 다운..

이번 포스트는 eslint에 관한 글입니다. noogoonaa.tistory.com/62 참고한 블로그입니다. vue.js를 사용 중에 계신 분들 중 아마도 vue-cli로 작업하시는 분들이 많으실 텐데요 eslint warning이 많이 떠서 귀찮으신 분들이 있으실 겁니다. (제가 그랬어서.. ㅎㅎㅎㅎ) 이런 비슷한 warning이 뜨실 겁니다. 이런 경고가 한두개면 상관없는데, 저는 수백개가 뜨더라고요.... 그래서 빌드하고 1분정도는 지나야 작업할 수 있엇습니다. 그냥 참고 썼었는데,,, 요즘 너무 지나치게 많이 나와서 한번 검색해봤습니다. 이제 적용방법입니다. .eslintrc.js 라는 파일이 있을 겁니다. 그 파일로 들어가서 module.exports = { rules: { 'prettier/..

Vuetify 태그에 대해 알아보는 4번째 포스트 입니다. 첫번째로 다룰 것은 v-simple-table입니다. 1. v-simple-table table태그가 vuetify용으로 바뀌었다고 생각하면 됩니다. 코드를 보겠습니다. Example Test 실행을 해본다면 테이블 형태를 볼 수 있습니다. 물론 아무런 설정을 하지 않아서 투명하게 보일 것입니다. 이제 조금 더 테이블 형태로 만들어 보겠습니다. Id Name 1 A 2 B 이렇게 작성하신 후 실행을 한다면 좀 더 그럴듯하게 보일 것입니다. v-simple-table에 추가되는 옵션은 적은 편입니다. dark, light, dense, fixed-header, height - 이 정도가 전부입니다. 더 자세한 정보를 원하시면 https://vuet..

vuetify 태그에 대해 알아보는 3번째 포스트입니다. 이번에는 tab에 대해 알아보겠습니다. 1., tab의 가장 기본적인 태그입니다. 바로 코드를 통해 살펴보겠습니다. Tab1 Tab2 Tab3 정말 간단한 tab 화면을 볼 수 있습니다. tab1, tab2, tab3를 누를 수 있습니다. 아직 내용이 뜨지는 않습니다. 이제 내용도 같이 뜰 수 있게 해보겠습니다. 2. , tab 밑에 내용을 보여줄 수 있게 합니다. {{item.name}} {{item.content}} Here, You can see Something! export default { name: 'App', data: () => ({ tab: null, items: [ { name: 'One', content: 'Tab1 Conte..

이번에도 vuetify의 태그에 대해서 알아보겠습니다. 제가 쓰면서 신기했던 그리고 자주 쓰는 부분을 위주로 진행합니다. 1. 첫번째는 v-card 태그입니다. 생각하신 대로 카드 형태를 만들어주는 태그입니다. Vue.js 예상한 카드 형태의 모양을 볼 수 있습니다. 1-1. 이름에서 알 수 있듯이 카드의 제목을 담당합니다. Title Name Vue.js 위 코드에 title 태그만 추가해 보았습니다. 제목이 나타납니다. (기본 설정이 저 정도의 제목으로 나타나는 것이므로 활용을 잘 한다면 멋진 카드를 만들 수 있을 것 같습니다.) 1-2. 역시 이름 그대로 부제목을 나타날 수 있게 해줍니다. Title Name SubTitle Vue.js 위 코드에 또 추가를 해보았습니다. 제목 밑에 부제목이 잘 나..

이번에는 Vuetify를 기본적으로 다뤄보기만 해보겠습니다. 먼저 Vue.js 파일을 만듭니다. 먼저 Vue.js를 선택합니다. 프로젝트의 제목을 입력하시고 그 외의 설정들을 바꾼 후 진행하시면 됩니다. 처음 하신다면 프로젝트 제목만 입력하고 finish 버튼을 누르면 되겠습니다. 그러면 Vue.js 프로젝트가 만들어집니다. 그럼 이제 터미널 창에서 진행합니다. npm run serve를 입력하시면 프로젝트가 실행되면서 화면을 보실 수 있습니다. 이제 'vue add vuetify'를 입력합니다. 그러면 vuetify 관련 파일들이 설치됩니다. 그리고 다시 npm run serve를 입력하시면 vuetify관련 화면으로 바뀐 것을 알 수 있습니다. (관련 캡쳐화면은 하지 못했습니다. 기본 화면이니 쉽게 ..