Ellune's Spadework Ellune's Spadework

Vue.js 를 이용하여 어느정도 화면들을 만들어 냈다면 이제 dev 서버에서가 아닌 어디서 구동을 시킬지의 대한 선택이 필요하다. 크게 두가지로 나눌수 있다. 프런트 웹서버를 사용하여 구동을 시키거나 백엔드 영역에서 서버사이드에서 구동시키느냐에 따라 구현하는 방식이 다르다. 프런트 서버를 따로 구축할경우 간단하게 Vue.js 에서 서포팅 해주는 nuxt.js 를 사용하면된다. nuxt.js 는 vue2 , vue router, vuex , vue server render , vue-meta 등의 기능을 제공한다. 가장 중요한점은 용량이 53kb 정도 밖에 안되는 아주 가벼운 프레임워크이다. 프로젝트의 모든 UI 렌더링을 nuxt.js 를 통해 사용이 가능하며 간단한 옵션으로 SPA 모드 설정이 가능하다..

ParameterParser getStringParameter vs HttpServletReqeust getParameter() 기존의 레거시 프로젝트가 jsp 안에 html+js+java 가 다 있는 형태이다. 스프링하면서 mvc 에 병적으로 집착하면서 구조를 어떻게든 깔금하게 분리해서 관리하려는 나로써는 정말 세상 최악의 구조이다. 그래도 담당자가 되었기에 유지보수는 하고 있다. 이전 개발자가 ParameterParser 를 사용하여 파리미터 전달 받은 값을 사용하도록 개발을 해놓은것같다. ParameterParser는 명확하게 값이 없을 경우 자신이 정한 디폴트 값을 넣어줄수있는 편리함때문에 사용하는것에 대해선 아주 괜찮은거 같았다. String strGameIndex = request.getPar..

Axios !! 보통 웹페이지를 개발하는 사람들은 ajax 통신을 많이 사용한다. 다른곳에서 데이터를 가져와야하는 통신이 필요할때는 옛날부터 ajax 가 기본이였다. Jquery 를 사용할떈 Jquery 를 이용하여 간편하게 ajax 통신을 사용했다. 하지만 일단 vue.js 를 사용하면서 jquery 를 사용할수 있음에도 불구하고 안사용하기로 마음 먹었기 때문에 뭔가 대체할만한것을 찾기 시작했고 아주 빠르게 Axios 란 놈을 찾을수 있었다. 일단 axios 를 사용하기위에선 npm 플러그인 설치가 필요하다. 간단하다 npm install --save axios바로 설치가 가능하고 사용해주면 된다. 사용하는 vue 영역에서는 꼭 import 를 해놓고 사용한다.import axios from "axio..

컴포넌트 ? Vue.js 는 컴포넌트의 집합체 라고 생각한다. 모든 구성을 컴포넌트 단위로 구성이 가능하고 공용 혹은 내부적으로 컴포넌트를 구현해서 사용이 가능하다. 나처럼 누군가의 도움으로 컴포넌트를 제공 받을수 있다면 정말 쉽게 구성이 가능하다. 나중에 기록해두겠지만 기본적인 컴포넌트만으로는 안되는것들이 있어 결국엔 스스로 사용할 커스텀 컴포넌트를 만들수 밖에 없다. 그렇기 때문에 컴포넌트에 대한 개념과 사용법 만드는법을 숙지할 필요가 있는거 같다. 기본적으로 미리 만들어놓은 컴포넌트 사용하기위해 npm 을 통해 puetify 라는 vue.js 컴포넌트 모음을 플러그인 형식으로 받았다. 이것은 회사 동료가 만들어서 nexus 서버에 올려놓았기 때문에 npm 타켓 설정을 살포시 바꾸어서 install ..

기본 문법 Vue.js 사용하기전에 알아야한 vue 에서 제공하는 문법들을 알아야만 한다. vue.js 문법은 jquery 보다도 단순하다 생각한다. 그리고 html 자체내에서 사용가능한 문법들이 있어 익히는데 쉽다! 보간법 {{ value }} DOM 에 데이터를 바인딩하는 방법이다. 저런식으로 선언할경우 간단하게 html 내부에 DOM 에 데이터 바인딩이 이루어진다. 보간법으로 바인딩 된 데이터는 순수 텍스트 속성을 띈다. 약어 - v-html v-html: 보간법을 사용하여 표시할경우 단순 텍스트 속성으로 밖에 표현이 안된다. 그렇기 때문에 html 기능을 사용하고 싶을땐 v-html 을 선언하여 이부분에 html 문법을 작성하여 사용이 가능하다. 줄바꿈이나 공백등을 표현할때 요긴하게 사용했다. -..

Vue.js 시작 !! 일단 프로젝트 구성을 어떻게 해야 할지 생각해야한다. 쉽게 생각할수 있는 구성은 Vue.js 를 그대로 사용할건지 아니면 서버사이드 랜더링을 이용할것 인지다. 충분히 서버사이드에서 랜더링을 거지지 않아도 제대로 동작을 했고 구현이 가능했다. 난 서버 사이드 랜더링을 사용할 예정이다. 한국 Vue.js 커뮤니티에서 확인하다보니 Vue.js 를 사용할때 서버사이드 랜더링이 필요한 이유에 대해서 작성해 놓은것이 있었다. 내용은 아래와 같다. 1. 장점 -검색 엔진 크롤러가 완전히 댄러링 페이지를 보기 쉽다 , 검색엔진 최적화 (SEO ) - 인터넷속도가 느리거나 느린 장치에서 콘텐츠 도착 시간이 단축, 서버렌더링된 마크업은 js 가 다운로드되고 실행하는것 까지 기다릴 필요가 없기 떄문...

환경 설정 시작 !! 이제부터 적게 될 이하 내용들은 내가 직접 환경을 구축한게 아니라 먼저 Vue.js 개발 환경을 구축한 팀원에게 도움을 받아 팀원이 구축한것을 내 프로젝트에 적용하기위해 내가 진행한것을 그대로 기록한것이다. 나중엔 내 스스로 멋지게 Vue.js 프로젝트를 만드리라 ! https://nodejs.org/en/ 위 사이트에서 npm 을 다운받아 설치한다. 팀원의 조언으로는 zip 버전을 받아서 설치하고 직접 환경설정을 하는것을 추천했지만 난 자동 설치를 믿어 보기로하고 ( 청개구리 심보 ! ) 윈도우 설치 버전을 설정했다 ! 남자라면 무조건 최신 버전 !!! 설치가 완료 되면 자동으로 환경설정이 되기 때문에 윈도우 cmd 창에서 어디서나 npm 명령어를 쳐보면 npn 동작이 된다는걸 확..

Vue.js 을 사용하기 위해서는 기본적으로 webpack 과 babel 이 필요하다. 두가지를 사용할줄 알아야 진정한 Vue.js 를 사용할수 있다고 볼수 있다. 회사에서 어떤 사람은 Vue.js 를 빌드하지 않고 단순하게 사용을 하는것 보았는데 신기하게도 굳이 빌드를 하지 않고도 사용은 가능했다 아마 html + javascript 로 되있어서 크게 문제가 되지않았다고 판단은 되지만 실제로 그렇게도 구현이 가능하다고 나와있었다. 단, 빌드를 하지 않고 썼을때 Vue.js 의 기능을 온전히 다 쓸수는 없다고 한다. 그렇게 때문에 Vue.js 를 100% 다 활용 하겠다고 하면 webpack 과 babel 은 필수로 알고 넘어가야 한다. Webpack 일단 webpack 은 검색해보면 번들링을 해준다는고..