728x90 반응형 vue13 실전 코드로 배우는 Vue.js, 한빛미디어 #2337옛날옛적에 Vue를 하고 한참을 Vue 생태계에서 떠나 있다가 최근 Vue 프로젝트에 참여하게 되었는데 마침 Vue3를 기반으로 작업이 진해되는 프로젝트여서 타이밍 좋게 선택하게 된 실전 코드로 배우는 Vue.js.만약 Vue를 처음 다루어보는 이라면 약간 접근하기 애매한 책이 아닐까 생각된다. 분명 앞장에서 Vue의 작동방식과 전체적인 개념을 알려주고 있지만 기본적인 Vue에 대한 이해가 있다면 좋을 것 같다는 생각이 들었다. 혹시 아주 처음이라면 다른 좀 더 기초적인 입문서나 인터넷 강의를 한번 접해보고 접근하면 좋을 것 같다. (몇 년 전에 Vue를 다루어보고 새로 적응해 가는 과정이라서 어렵게 느껴진 것일지도 모르겠지만..)본인 역시 계속 초보자의 입장에 있기 때문에 이렇게 받아 들인 .. 2024. 10. 26. Vue.js 프로젝트 투입 일주일 전 #2131 Vue를 사용하는 프로젝트에 투입하긴 전에 꼭 읽어보길 권하고 싶은 책이다. 후반부로 갈수록 지면상 깊이 있게 다루진 못한듯한 인상이 살짝 남긴 하지만 전체적으로 Vue를 사용한 프로젝트에서 어떤 식으로 접근하고 구축하는지 빠르게 접해 볼 수 있는 구성으로 되어 있는 책이다. 설치부터 구축까지를 다루고 있기 때문에 Vue가 생소한 개발자, 퍼블리셔, 기획자들이 함께 읽으면 좋을 것 같다는 생각이 들었다. 프로젝트 전에 익혀 두어야 할 것들이 많겠지만, Vue로 진행되는 프로젝트라면 Vue에 대한 기초만으로는 원활한 업무 진행이 어렵다.(뼈아픈 경험담) Vue로 진행되는 프로젝트 생태계가 생긴지 얼마 되진 않았지만 수많은 프로젝트들이 진행되고 있고 버전이 올라갈수록 점점 어려워진다는 것은 처음 .. 2021. 6. 29. [후기] Vue.js 첫걸음 #2075 총 14장으로 이루어져 있으며 각 장이 길지 않아 읽기에 무리는 없었던 것 같았습니다. 책 제목에서 알 수 있듯 첫걸음을 위한 책이기에 입문자, 초심자들이 보기에 적합한 책인 것 같습니다만 Vue프레임워크를 어느 정도 기초적인 지식은 이해한 상태를 대상으로 한다는 생각도 들었습니다. 지식이 전무한 상태라면 약간 평이 갈릴 것 같다는 생각도 들었습니다. 업데이트가 빠르게 진행되고 있는 프레임워크이기에 출판된 지 시간이 좀 지난 것이 약간 걸리긴 하지만 프레임워크의 기초를 이루는 부분에 변화가 있는 건 아닌 만큼 책을 통해 기초를 다진다면 앞으로 업데이트가 되어 가는 부분에 대해서도 빠른 접근이 가능할 것이란 생각됩니다. 뭐랄까 군더더기 없이 직관적인 설명? 모든 것이 그렇지만 프로그램의 경우 프.. 2020. 11. 21. Vuetify 2.x 버전으로 레이아웃 잡기 #2070 Vutify 2.x 레이아웃 지난번에 Vuetify 프로젝트 이후로는 아마 하지 않으리라 예측했었는데.. 두 번째 Vuetify 프로젝트를 진행하고 있습니다. 지난번에는 1.x 였는데 2.x대로 업그레이드가 되었네요. 일단 기본적인 레이아웃을 구성하는 방법이 바뀌었습니다. 이번 포스팅에서는 기본적인 내용을 포함해서 다음 내용을 정리해 보려 합니다. 기본 블록 Button Group, Align Expansion Panel 기본 블록 1.x대에서는 다음과 같은 형식으로 블록을 지정해주었습니다. 이것이 2.x로 올라가면서 바뀌었습니다. 우선 좌우로 정렬시킬 경우입니다. See the Pen Vuetify layout 01 by minamiland (@minamiland) on CodePen. 다음.. 2020. 9. 26. Gridsome과 Git Action으로 GitHub Pages에 배포하기 #2012 놀면 뭐하나.. 우선 호스팅은 당연히 GitHub를 사용 중이고요.. Vue를 기반으로 한 Gridsome을 사용하고 Git Action을 이용해서 GitHub Pages에 배포하는 과정을 공부해 봤습니다. Action은 이전에 GitLab CI를 다루어 봤던 게 나름 도움이 되었던 것 같습니다. 가이드도 보고 구글 선생을 엄청 뒤져가면서 작업했었습니다. 의욕만 앞서서 만들었던 아주 가끔, 가뭄에 콩 나듯이 갱신하는 Sapjil이라는 블로그가 있습니다. 계약서 문제로 프로젝트에서 나오고 나니 집에서 할 일이 없어 일도 찾을 겸 그 사이에 뭔가 해보고 싶어서 기존에 사용하던 GitHub Pages를 수정하는 작업을 했습니다. Gridsome을 Git Action으로 GitHub Pages에 배포.. 2020. 1. 16. vuetify theme color 설정 Bootstarp도 그렇고, Vuetify도 그렇고 프레임워크들에는 기본적으로 사이트에서 쉽게 적용가능한 컬러테마가 몇가지 지정되어 있습니다. Vuetify는 plugins > vuetify.js 파일에서 그 값을 지정해 둘 수 있습니다. 기본적으로 인스톨을 마친 초기에는 아마도 다음과 같은 형식으로 되어 있을 것이라 생각됩니다. Vuetify 에서 제공하는 방법 이 상태에서 CSS를 경로를 새롭게 지정해주고, theme에서 필요로 하는 컬러값을 셋팅해 주면 사용가능한 상태가 됩니다. 이 방법은 개인적으로 SCSS파일 사용을 전제로 했었기에 택한 방법인 만큼 다른 방법도 있을 것이라 생각됩니다. 이 방법은 js파일에서 색상값만 바꾸면 자동으로 vuetify.scss에 적용되어 있는 기본 컬러값을 덮어씌우.. 2018. 11. 7. Vue.js에서 CSS module 사용하기 그저 module 을 사용하면서 알게 된 내용에 관한 메모입니다. 우선 module을 사용하기 위해선 vue-loader를 사용하여야 합니다. vue-loader를 사용하게 되면 css 이외에도 scss와 같은 다양한 방식이 적용가능해집니다. 공식 문서는 본가 사이트에서 확인 가능합니다. 우선 vue에서 CSS를 사용할 경우는 그대로 사용하면 되지만, SASS/SCSS를 사용할 경우에는 lang="scss" 를 추가 시켜주어야 합니다. 이렇게 두가지를 적용시켜 적용시킬 수도 있습니다. 최종적으로, 예를 들어 Example.vue 라는 파일에서 module을 사용한 방식의 파일은 렌더링이 끝난 소스의 class를 확인하면 다음과 같아집니다. Vue 파일명 + module 클래스 + 랜덤문자의 조합으로 만들.. 2018. 10. 21. vuetify grid layout 들여다보기 아래 내용은 버전 1.x대의 내용입니다. 2.x대에서 기본 레이아웃을 잡는 규칙이 변경되었습니다. 기본적인 레이아웃을 참고하실 경우 다음 글을 참고하시면 좋으실지도 모르겠습니다. - 2020/09/26 - [IT/program] - Vuetify 2.x 버전으로 레이아웃 잡기 프레임워크를 그리 좋아하지 않는 저로서는 아마 프로젝트가 끝나고 나면 Vuetify를 사용할 일은 두번다시 없지 않을까 생각하면서도.. 메모는 해두어야 겠다는 생각이 들어서.. 대부분의 웹프레임워크가 그렇듯이 Vuetify역시 기본적으로 반응형웹을 고려하여 만들어져 있으며, 일반적으로 사용되는 12단 형식을 사용하고 있습니다. Vuetify에서 제공하는 반응형 웹의 기본적인 내용은 'https://vuetifyjs.com/ko/la.. 2018. 10. 13. vue 설치부터 vuetify 설치까지 우선은 vue Install 부터. 설치 자체는 무척 간단하게 되어 있습니다만. Yarn 이나 npm 으로 설치를 진행 하려면 우선적으로 node 가 깔려 있을 필요가 있습니다. 가장 손쉽게 접근하는 방법은 CDN을 활용하는 방법입니다. 연습만 하는 것이라면 jsfiddle이나 codepen 에서도 연습이 가능합니다. CDN을 사용하면 사용해 보는데는 문제가 없지만, 전 프로젝트에 사용해야 하는 관계로 설치버전으로 진행했습니다. 어디에서라도 참조하여 프로젝트를 생성시킬 수 있도록 '-g' 옵션을 활용합니다. npm install -g @vue/cli 설치 후에는 제대로 깔렸는지, 버전 확인을 해준뒤 프로젝트를 생성합니다. vue -V vue create [project-name] 하나하나 코드를 치기가 .. 2018. 8. 21. vue.js 입문자용 동영상 강좌 vuetify를 업무에서 사용하기 위해 vue.js를 공부해 보고 있는 마크업 엔지니어의 일종의 학습일지입니다. 확실히 생각보다는 접근하기 쉬운 구조로 되어 있다는 것을 체감하고 있습니다. 따라 해보면서 익히는 것도 중요하지만, 남이 작업하는 것을 보면 더 기억하기가 수월해지는 느낌을 받았습니다. 그래서 동영상을 통한 학습법이 통용되고 있는 거겠죠. 아무래도 입문자다 보니 가장 대표적으로 많이 사용 중인 구문을 사용한 동영상이 참고가 된 것 같습니다. 저와 같은 입문자에게 도움이 될 것 같아 참고했던 곳을 모아 봤습니다.. 무료 강좌는 역시 영어로 된 자료가 많습니다. 저도 영어를 못 알아듣지만 코드만 보면 되는 거라 부담가지실 필요 없을 것 같습니다. 1. https://vuehero.com/cours.. 2018. 8. 19. vuetify를 사용하기 위해 vue.js를 알아가는 중 어쨌건 시작을 했으니 익히긴 해야겠는데 아무래도 (개인적으로) 프레임워크부터 발을 들이는 건 아닌 것 같아서 vue 관련 서적을 찾아봤지만, 초급, 입문자용 이외에는 딱히 없었습니다. 소문만큼이나 공식 사이트의 가이드가 상당히 잘 되어있다는 증거일지도 모르겠습니다. 해서 그쪽을 내리읽고 있는 중입니다. 한번 책 읽어 보면서 따라 해 봤다고 다 할 줄 알 정도의 천재가 아닌지라 처음부터 다시 읽기 시작했습니다. 어떤 식으로 움직이는 것인지 맛이라도 보자는 취지에서 읽어봤다면 이번엔 일을 해야 하는 관계로 이런저런 조사를 하면서 좀 더 웹을 참고하며 공부 하고 있는 중입니다. 이미 사용하기로 되어 있는 vuetify라는 프레임워크가 정해져 있지만, 시간은 좀 걸리더라도 우선은 vue.js의 기본문법을 알아두.. 2018. 8. 18. 설마 이런식으로 vue를 시작할 줄이야. 정말, 설마 이런 식으로 vue.js를 시작하게 될줄은 몰랐는데 말입니다.그것도 vue도 잘 모르는 상태에서 프레임워크부터 사용하기 시작하다니.. 뭐든 난이도가 조금 있는 일이 실력향상에도 좋다는 건 인정하고 있습니다만, vue로 사이트를 구축해 본건 입문자용 책을 읽어 본것이 전부라서 살짝 걱정이긴 합니다.logo출근후 첫 미팅에서 vue를 사용하기로 했다는 전달을 받았고 사용하는 프레임워크는 vuetify를 사용할거라는 이야기를 들었습니다. 어차피, 프로젝트에서 사용할 계정 발급도 아직이고 해서 공식 사이트와 프레임워크의 사이트를 보며 책을 봤던 기억을 더듬거리면서 샘플 소스를 보기 시작했습니다.처음이지만, 오늘 하루 이리저리 만져본 느낌이랄까 마크업 입장에서 주의해야할 부분은 지금까지는 css를 하.. 2018. 8. 14. Vue를 익히고 싶은 입문자라면, Vue.js 이정도는 알아야지 B18.017Vue.js는 특히 View 부분, 즉 화면용 작업에 특화된 프레임워크로 React와 Angular의 경우는 뭔가 접근하기에 너무 덩치가 큰 느낌이라 엄두가 나지 않았다. 후발 주자이지만 최근 트랜드를 봤을 때 확실히 꽤 많은 관심을 받고 있는 것 같다.Vue.js의 경우는 프론트엔드 프레임워크중에서 학습비용이 적게 들고 한글 가이드가 충실하게 잘 이루어져 있다고 해서 내심 기대를 하며 접근하기 시작했지만, 온라인의 공식 문서를 읽어 보고 따라 하기엔 약간 난해한 부분이 있었는데 책을 읽으면서 정리가 되는 부분이 꽤 있었다.개인적인 감각으로 보면 공식 문서가 어느 정도 스크립트 등에 대한 이해도가 있는 사람들을 대상으로 하고 있다면, 책은 어떤 식으로 동작하며 어떤 것들이 가능한지 공식 문서.. 2018. 4. 28. 이전 1 다음 728x90 반응형
