jhhan의 블로그

Vue 프로젝트를 github pages로 배포하는 방법에 대해 알아보는 두번째 포스트 입니다. 저번에 기본적인(?) github pages 배포 방법에 대해 알아봤습니다. 하지만, 이 방법의 단점은 [github 아이디].github.io에 1개의 프로젝트만 배포할 수 있다는 것입니다. 즉, 2개 이상을 배포하고 싶다면, 적절하지 않은 방식입니다. 이번에는 서브페이지로 배포하는 방식에 대해 알아보겠습니다. ( [github 아이디].github.io/[원하는 url] ) ( 혹은 다른 주소로 된 자신만의 페이지를 원하는 경우일 수 도 있습니다. 그런 경우에 참고하면 매우 유용할 것 같습니다. ) 사실 저번의 방법은 단 1개만 배포할 수 있어서 실용적이라고 할 수 없겠습니다. 정말 중요한 단 1가지만 배..

오랜만에 다시 Vue 글을 써봅니다. 이번에는 vue.js로 만든 코드를 웹서버에 올리는 법을 알아보겠습니다. 지금까지는 모두 다 로컬에서 진행을 했습니다. 그래서 사실 열심히 개발해도 누군가에게 보여주기는 어려웠습니다. 이번에는 남들도 구경할 수 있도록 해봅시다. (이번 글은 기존에 진행하는 vue 프로젝트가 있다는 전제 하에 진행하겠습니다.) 본인의 vue 프로젝트를 배포하고 싶다면 먼저 build를 해야합니다. 웹브라우저는 .vue 파일을 인식할 수 없기 때문입니다. (웹브라우저는 html, css, js 파일만 해석할 수 있다고 합니다.) 그래서 먼저 build를 해서 브라우저가 해석할 수 있는 코드로 변경이 필요합니다. 이 build한 것을 웹서버에 올리면 남들도 접근할 수 있게 됩니다. bui..

Vanilla JS에 대해서 익히고 난 후 고민을 (조금) 해본 후 내린 결론은 일단은 Vue.js를 공부해보자 였다. 그 이유로는 1. 현재 하는 일이 백엔드보다는 프론트엔드를 훨씬 많이 다루기 때문이다. 물론 그렇다고 Vue.js처럼 3대장 프론트엔드를 사용하는 것도 아니지만 지금은 프론트엔드를 사용해서 일을 하고 있으니, 같은 프론트엔드를 공부해놓으면 조금이라도 도움이 되지 않을까 싶어서이다. 2. 예전에 Vue.js를 사용했기 때문이다. 예전에 잠깐이나마 (야매로) Vue를 사용한 경험때문에 그런지 Vue를 공부하는 것이 나쁘다고는 생각하지 않는다. 물론 내가 프론트엔드를 더 사용하지 않는다면 시간낭비가 될 수도 있을 것이다. 3. 현재 무슨 공부를 해야할 지 모르겠어서 일단은 Vue를 공부해보기..

스프링-뷰 연동 2번째 포스트 입니다. 별로 적을 것이 없다고 생각해서 뭘 적을까 생각하다가 스프링과 뷰 사이의 통신을 어떻게 해야하는지에 대해 간략하게 적어보려고 합니다. 뷰에서 통신은 axios를 사용해서 합니다. 이를 응용해서 axios를 통해 spring으로 데이터를 보낸 후 다시 뷰로 받는 방식에 대해 써보겠습니다. 먼저 axios를 사용하기 위해 다음과 같은 작업을 합니다. 터미널에 'vue add axios'를 입력하시면 자동으로 axios가 추가됩니다. 이제부터는 axios를 사용하실 수 있습니다. 먼저 프론트부터 보겠습니다. Click {{a}} 이렇게 간단한 코드가 있습니다. 1이나 2 혹은 그 외의 것을 입력하는 경우에 따라 다르게 나타나도록 할 것입니다. methods 부분에서 ax..

이번 시간에는 Vue.js 설치에 대해서 알아보겠습니다. 처음에 Vue.js를 설치하는 법에 다루지 않았기 때문에 알아보겠습니다. 먼저 '뷰 개발자 도구'를 설치하겠습니다. 크롬 기준으로 진행합니다. 검색창에 vue.js devtools를 입력합니다. 처음 나오는 링크를 클릭합니다. 그러면 다음의 화면이 보입니다. 설치버튼을 눌러 설치를 진행합니다. 설치가 완료되면 다음과 같이 오른쪽 상단에 'V'표시가 보입니다. 이렇게 하면 뷰 개발자 도구 설치가 완료됩니다. 저는 파이어폭스도 자주 사용해서 파이어폭스에 설치하는 법에 대해서도 알아보겠습니다. 주소창에 https://github.com/vuejs/vue-devtools 과 같이 입력합니다. 그리고 밑으로 내리다 보면 다음의 화면이 보입니다. Firefo..