서버 개발자의 SPA 적용기 - NHN FORWARD

웹 개발의 패러다임 변화

mono -> front/backend

기존에는 프론트앤드와 백앤드 구분도 없었다. 하지만, 요즘 프론트앤드는 랜더링에 집중하고 백앤드는 REST API 용으로

 

기존 레거시 무엇이 문제인가?

일체형 웹 서비스 MVC 패턴을 사용한다. 하지만 비즈니스 요구가 많아지면서 비대해지는 웹서비스가 생긴다. 링크를 클릭하거나 데이터 변경만해도 무조건 새로고침이 된다. 그리고 자바스크립트 코드 때문에 서버단에 숙련도 떨어지는 더러운 코드가 계속 추가된다.

 

SPA의 도입

하나의 페이지(index.html)만 존재하고 페이지 전환 및 구성을 javascript로 구현을 한다. link tag를 사용하는 전통적인 웹 방식은 새로운 페이지 요청 시마다 정적 리소스가 다운로드되고 전체 페이지를 다시 렌더링하는 방식을 사용하므로 새로고침이 발생되어 사용성이 좋지 않다. 그리고 변경이 필요없는 부분를 포함하여 전체 페이지를 갱신하므로 비효율적이다. 

 

모바일의 사용이 증가하고 있는 현 시점에 트래픽의 감소와 속도, 사용성, 반응성의 향상은 매우 중요한 이슈이다. SPA의 핵심 가치는 사용자 경험(UX) 향상에 있으며 부가적으로 애플리케이션 속도의 향상도 기대할 수 있어서 모바일 퍼스트(Mobile First) 전략에 부합한다.

 

장점

• 페이지 전환이 빠름

단점

• 검색 엔진 최적화에 어려움 (  Angular 또는 React 등의 SPA 프레임워크는 서버 렌더링을 지원하는 SEO 대응 기술이 이미 존재하고 있어 SEO 대응이 필요한 페이지에 대해서는 선별적 SEO 대응이 가능하다. )

 

언제 쓰면 좋은가? 로그인을 필수로, 페이지 내에 정적인 요소보다 동적인 요소, 데이터가 많이 필요한 페이지

 

SPA 전환 시작하기

프론트앤드 프레임워크 선택하기. ( React, Angular, Vue )

 

기존 스프링에 있던 front code => spring + vue 어떻게 분리할까?

 

spring-boot-vuejs 라는게 있네?

 

결국은 모든 요청을 WAS에서 해결을 한다. => static 처리도 WAS에서? UI 변경인데도 back-end 배포? 이전과 별 차이가 없음

 

UI 요청은 nginx에서, API 요청은 tomcat에서 처리!

 

 

API 호출 방식 개선 : Netflix Zuul

spring boot에서 간단한 설정만으로 proxy 서버 설정 가능

 

상태관리

복잡한 컴포넌트 간 데이터 전달 -> 상태관리 라이브러리를 쓰자! ( Redux )

 

중앙 state만 바라보도록 변경! ( redux )

 

component --- (dispatch) ---> Actionns ---(commit) ---> Mutations ---->

 

사용 팁

1. API 호출 횟수를 줄여보자 : lodash, debounce ( 여러번 호출 방지 ) / 이미 로드한 데이터라면 추가로 호출하지 말자 ( 공지사항처럼 변하지 않는 데이터 )

 

2. 데이터 가공은 어떻게? RxJS에서 데이터 가공을 위한 유용한 연산자

 

3. 서버렌더링처럼 데이터 로딩이 완료된 다음에 화면 노출잉 가능

 

다국어 처리

다국어 처리도 front-end에서! 새로고침이 필요없음

 

문구 수정이 자주 일어나기 때문에 여전히 빌드/배포가 필요함

 

spring boot message service에서 message.json을 받아가도록 수정

 

배포 환경에 따른 설정값 처리

개발 환경은 개발에 용이하게, 운영 환경은 성능 위주로

 

 

 

개발 측면 : 재사용성 / 최신 자바스크립트 / hot reload 등

개발 측면(백앤드) : 데이터에만 집중하게 됨