Sangil's blog

이번에 회사에서 기존 Jsp페이지를 Vue로 전환하는 작업을 하며 느낀점을 공유 할까합니다.

세상에 저는 Juqery가 만능인지 알았죠. 쉽게 돔 객체에 접근해서, 구성요소들을 수정 삭제 하여 더욱 웹환경을 아름답게 해주니까요.
하지만 이번에 Vue를 사용하며 저의 마음이 흔들리고있습니다. 아니죠 변심했답니다 하지만 대다수의 프로젝트들이 Jsp라는...

사실 Vue라는 프레임워크는 아에 새로운 기술들로 탄생 된것은 아닙니다. 항상 저희가 모르게 사용 하고 있는 것들을 더욱 편하게 만들어 주는 프레임 워크죠 (블로그도 Vue로 만들걸..  변경하기에 저의 부지런함이 닫지 않네요.)

실제로 이번 블로그에 댓글작업을 하며, 댓글을 적고 삭제 하였을 때, 화면이 깜빡이지 않고 자연스럽게 보이기 위해 아래처럼 html 태그를 자바스크립트로 만들어서 특정 돔 엘리먼트에 Jquery를 사용하여 넣어줬습니다. jsp를 사용하신다면 아래처럼 많이 사용 하시겠죠..?

Vue에서는 이런 작업이 없을까요? 그건 아닙니다. Vue 또한 동일하게 결국 Html 소스코드를 반환 하는데요. 차이점은 위의 작업들을 훨신 간결하고 사용하기 쉽게 만들어 줍니다.  한가지 예를 들면 자주 사용하는 요소들을 컴포넌트로 만들어서 자유자제로 재사용 할 수 있습니다. 그리고 데이터를 바인딩 시켜노면 해당 데이터들이 바뀔 때마다 데이터를 갱신해주죠. 기존 Jsp페이지였다면 바뀐 데이터를 받아와서 특정 돔 엘리먼트를 셀렉터를 통해 찾고 데이터를 변경해줘야하는 작업을 해줘야 하죠 (뷰 만세).

그리고 가상돔을 사용해서 화면을 더욱 잘그린다고 하는데요 사실 이부분은 개발하며 크게 느껴보진 않았습니다 화면이 복잡한게 아니여서 몸에 체감되진 않았나봐요 (돔 객체를 찾고 다시 그리는 부분이 많은 비용이 든다고 하더라구요. 자세히는 모르니 패스^^;)

그리고 무엇보다 실제로 개발하면서 좋았던 점은 Hot Reload(핫리로딩)인데요. 제가 코딩하는 것들을 실시간으로 반영해줍니다! jsp는 변경하고 새로고침 하고 어? 변경된거 맞아? 됐나? 잘못했나? 다시 새로고침하고 이런 부분들이 사라지죠 뷰하다가 돌아오면.... 어? 왜 안돼 잠시동안 방황하게 됩니다 하핳. 

그리고 개인적으로  컴포넌트(화면) 들을 분리하고, 변경되는 데이터들을 바인딩 시키는 과정에서 백엔드를 개발 하는 것 같은 기분을 많이 받았습니다. jsp에서 javascript를 사용하는 느낌과는 많이 달라요. 실제로 뒷단의 서비스쪽 로직을 코딩하는 느낌이랄까..

뷰의 단점이라고하면, 앵귤러나 리액트등과 같이, 화면을 그려주는 부분이 서버가아니라 클라이언트에 있어서, 서버보단 클라이언트의 부담이 커지게 됩니다. 물론 요새는 휴대폰이나 노트북등의 사양들이 좋고 인터넷 속도도 빠르니까 크게 문제가 되진 않겠죠. 그리고 검색 노출이 중요한 사이트인 경우에는 좋지 않을 수 있습니다. SPA로 구성되어 있다보니 검색엔진 노출(SEQ)가 어렵기 때문입니다

이번에 댓글개발을 하며, VUE생각이 간절히 나서 이렇게 포스팅하게 되었습니다 ^^; 블로그도 VUE로 다 바꿔버리고 싶은데 .. 결론은.. 뷰 만세! 
(적절한 예제와 설명이 들어가면 좋았을거라는.... 생각이 ^^;)