현재 웹개발에 한해 전세계적으로 가장 많이 사용하는 프레임워크 중 하나를 꼽자면 spring 정확히 말하면 spring-boot 가 될것이다.

물론 상황에 따라 백엔드 언어로 자바가 아닌 php 및 파이썬 혹은 닷넷을 사용하는 경우도 많지만, 가장 보편적인 환경을 꼽자면

자바라는 사실은 누구도 부인할 수 없다. 

 

그리고 예전엔 백엔드에서 대부분의 알고리즘을 처리하고 프론트엔드 에서는 단순히 css 를 통한 UI 나 자바스크립트, 

조금더 최근으로 오자면 제이쿼리(이역시 구시대의 산물이나 현재까지도 많이 사용되고있다) 정도만 사용했다.

 

그러나 최근엔 백엔드 서버의 부담을 덜어주고 조금더 빠른 비동기식 환경을 원하고 ui ux 또한 기대감이 높아져

보안이 필요한 항목이나 정말 서버단위에서 처리해야하는 부분(데이터베이스 연결이라던지, 알고리즘이 필요하던지 혹은

효율적인 분업을 위하여) 을 제외한 대부분의 ui 상의 기능은 프론트엔드에서 처리하며

이에 따라 다양한 프론트엔드 프레임워크가 등장했다. 

 

우선 그나마 가장 오래되고 출시당시에 양방향 바인딩에 혁신을 몰고온 angular 가 있고 사실 프레임워크라고 부르기엔 너무 간편한 사용이 가능한 react , 그리고 지금 소개할 

vuejs 가 있다. 

우선 vue 의 장점이라고 하면 위에 소개한 세개의 프론트엔드 프레임워크 중에서 가장 간단한 문법을 가지고있다.

물론 구성자체는 react 가 훨씬 편하지만 우선 구성만 해놓고 본다면 vue 가 가장 간결한 문법을 제공해

코딩을 깔끔하게 바꿔준다. 또한 vue 는 웹팩을 통해 빌드시에 모든 js,css 를 패키지와해 가볍고 캡슐화처럼 보안성이 좋다.

그리고 개발환경이 정말 편리하다. 요즘에 어느정도 규모가 있는 프로젝트드는 디피 백엔드 프론트엔드 디자인까지 

모두 분리해 각각 여러팀이 맡아서 개발을 한다. 

이때 vue 는 그 자체로도 하나의 개발환경을 구축해 테스트까지 가능하므로 이때 큰 장점이 있다.

 

물론 필자도 개발을 할때 여러 언어와 프레임웤을 상황에 따라 사용하지만 어떤 구성이 가장 대중적이며

소규모,대규모,분할개발 모두 적합할까 고민하다 spring 과 vue 를 선택하게 되었다.

 

다만 둘은 지향점이 조금 다르다. vue 같은 경우는 기본적으로 비동기식을 지향하며 더 나아가 spa 를 강력히 

밀고있다. 특히 라우터와 웹팩을 통해 구성되는 spa 는 아주 가벼우면서 강력한 기능들을 지원하고

또한 아주 쉽게 개발이 가능하다. 

 

그런데 spring 은 물론 ajax 를 포함한 비동기식을 지원하며 spa 도 가능하지만 

편의성을 따지면 페이지 자체는 동기식으로 각각의 페이지를 구성하게끔 유도하고 내부에서 작동하는 통신을

ajax 로 지원한다. 이는 spring boot 가 나오고 spring 을 단체가 아닌 개인까지 구성이 간편해지며

타임리프를 지원하면서 더더욱 성향이 짙어졌다. 

타임리프는 spring 에서 jsp 를 아예 만들지 않아도 되게끔 설계되었으며

이는 대놓고 jsp 를 대체해 쉽게 개발을 하라는 것이다. 

하지만 타임리프를 사용한다 해도 어찌됐든 프론트엔드에 양방향 바인딩을 위해선

angular 든vue 든 프론트엔드 프레임웤이 필요한건 사실이다. 

하지만 vue 를 사용하면 사실 타임리프는 필요가 없어지며

둘의 컨셉이 달라 초기 구성이 약간 난감해 진다. 

실무적인 코딩과 구성방법에 대해선 다음글로 설명하고 이쪽에선 먼저 개념을 다룬다.

 

우선 툴은 vscode 나 intellij 어느쪽을 사용하던 개발환경 셋팅엔 큰차이가 없다. 

필자는 intellij 쪽을 더 선호하지만 가볍고 무료인 vscode 도 최근에 비약적으로 발전하면서 주력 툴로 사용해도

전혀 부족하지 않다. 

다만 이클립스는 이제 다른 툴에 비해 장점이 많이 퇴색되긴했다. 

 

우선 스프링 부트를 구성하고 타임리프도 사용한다

vue 프로젝트는 만들때 프로젝트는 스프링 프로젝트 밑의 src/vue 에 넣고 

타임리프를 구성하게 되면 static 에 js css 같은 리소스를 구성하게되고

template 에 html 파일을 구성하게 된다. 

물론 설정을 통해서 변경도 가능하다 .

빌드되는 파일은 static 에 넣어야하지만 static 자체에 넣게 되면 빌드시에 파일이 다 날라갈수있으니

index 와 outdir 모두 별도의 폴더로 감싸야 한다 .

필자는 보통 static/frontend ,template/frontend/index.html

혹은 frontend 대신 front 나 아예 직관적으로 vue 를 쓰기도한다. 

이렇게 되면 빌드시에 자동으로 static/vue 에 웹팩으로 빌드된 파일들이 들어가 index.html 이

해당 파일들을 참조하게 된다. 

spring-security 에서 해당 path 에 권한들을 적절히 부여하고

vue 에서 코드를 작성하고 빌드한후 spring-boot 를 실행시키면 

정상적으로 vue 에서 빌드시킨 파일들을 스프링 서버 에서 index.html 을 통해 보여진다. 

하지만 여기서 문제가 생긴다. 나는 spa 로 구성하지않고 여러 페이지로 구성을 할 생각이나,

vue단일 프로젝트의 경우는 여러개의 html 과 app vue 를 만들어 실행이 가능하나.

스프링에선 이렇게하려면 html 의 위치를 조정해줘야하고 소스또한 늘어난다. 

해서 스프링에선 기본적으로  mpa 를 사용하게끔 하되 필요한 부분에선 spa 를 사용하는것이 가장 

이상적이다. 

이때 vue의 router 기능을 사용한다. 

우선 빌드시에 웹팩에 watch 를 걸어 소스 수정시에 자동으로 빌드되게끔 해놓고

spring controller 에선 페이지 요청을 항상 index.html 로 리턴한다. 

이렇게 되면 path 에 따라 구성된 라우터로 전달되어 vue에서 해당 path 로 보여준다.

즉 

localhost:8080/home 을 요청했을때 컨트롤러에서

getMapping 으로 /home 을 받아서 (@responseBody 가 아니다) 

return "/index.html" 로 할경우 실제 표시되는 패스와 페이지 내용은 home 이지만

호출되는 소스는index.html 이고 여기서 라우터를 통해 home.vue 의 내용이 호출되는것이다. 

이렇게 하면 타임리프 문법을 통해 index.html 에서 세션정보라던지 혹은 페이지 파마리터를 받아

vue 에게 쉽게 전달이 가능하다.(이경우 vuex 의 store 를 사용해 전역변수로 두면 편하다. )

물론 이런부분은 그냥 mounted() 에 axios 나 fetch 를 통해 비동기로 받아올수도있다(다만 위의경우 어차피 보내는 페이지에

넣어서 보내는거라 조금더 효율적이긴하다)

 

그리고 spa 로 운영되야 되는 부분엔 

<router-link> 태그를 이용해(mpa 에선 그냥 a 링크나 href 를 사용하면된다. ) spring controller 를 거치지 않고

바로 라우터의 등록된 페이지로 이동할수 있다. 이경우 위에서 설명한 mounted() 에 비동기 통신을 이용하여

spring contoller 의 @responseBody 어노테이션에 접근해 쉽게 백엔드와 통신할수 있다. 

 

이렇게하면 두개의 프로젝트를 운영할 필요 없이 하나의 프로젝트에서 실시간 연동이 가능하며(원래의 경우 vue 프로젝트에서 빌드한걸 spring 프로젝트에 던져주던지 git 을 활용해 동기화하여야한다. )

spa 의 단점이 신경쓰이는곳에선 mpa 로 하다가 spa 가 필요한곳에선 spa 로 구성하면 상당히 편하며

가장큰 장점은 혼자개발하거나, 협업을 할때 둘다 쉽게 사용할수있다는 부분이다. 200명 규모의 대형프로젝트에서도

실제로 위방법을 통해 (물론git을 통한 권한제한을 두었다) 성공적으로 개발을 진행하였다.

 

수많은 프론트엔드 언어가 있고 수많은 백엔드 언어가 있다. 

다만 나의 관점에서 가장 많이 사용하는 프론트,백 엔드 언어를 효율적으로 조합해 사용하는 방법을 정리해보았다.

물론 모든 개발이 그렇듯이 일년,한달 혹은 당장 내일이라도 더 좋은 방법을 구상하거나 참고해 프로젝트를 진행할지도 모른다.