Javascript: 프레임워크 없이 SPA 만들기

 

클라이언트 보다는 서버 프로그래밍이 주력이긴 하지만 재미는 클라이언트가 높은 것 같다. 개인적으로 React, Vue, Angular 모두 자유롭게 활용이 가능하지만 순수 JavaScript 코딩을 선호한다. 이유는 Redux 같은 것도 좋긴 하지만 내가 설계를 하면 데이터는 어디에서든 연결할 수 있고, 책임있는 컴포넌트에서 관리하게 하여 더 직관적으로 프로그램을 만들 수 있기 때문이다. 즉, 프레임워크의 소스를 분석해서 활용하는 것도 괜찮지만 내가 프레임워크를 만들어서 코딩하는 편이 더 쉽고 더 자유롭다.

 

작년 부터 시민들이 온라인으로 민원을 신청하는 페이지에 대한 UX/UI 개선에 대한 고민을 해왔었다.

아래는 현재 간략히 정리한 내용이다.

- 현재 33종의 민원을 온라인으로 제공하고 있다.

- 하나의 민원에는 수전(물을 사용하는 건물) 정보와 신청인, 각 민원에 대한 입력 사항이 들어 있다.

- 신청 페이지를 구성하는 요소는 민원에 종류에 따라 달라진다.

- 신청페이지는 작으면 500라인에서 많으면 3000라인 정도로 되어 있고 검증을 위한 자바스크립트는 별도의 페이지로 각 민원 마다 적게는 500라인에서 많게는 5000라인 정도이다.

- 수전 데이터를 조회 표출을 위한 모듈은 여러 레이어로 페이지만 5000라인 자바스크립트 역시 5000라인 정도로 작성되어 있다.

- 이사 관련된 4개 민원은 신청을 같이 할 수 있게 서비스를 제공한다.

- 전체 민원을 보면 10만 라인이 약간 못 미치는 수준이다.

 

문제는 중복없이 작성하려는 시도는 좋은데 jsp, js로 만들어져 쓸대없이 복잡하다. 동적으로 생성하는 부분도 많고 수시로 서버로 데이터를 호출하는 부분도 많다. 구조화를 하려면 할 수 있겠지만 문제는 민원이 너무 많다는 점이다. 결국 인력을 갈아 넣는 일을 반복할 수 밖에 없다.

 

=> 결국 전면 재개발으로 결정했다. 

- 하나의 jsp 페이지(SPA)에서 모든 민원 신청이 가능하다. 이사 관련 4개 민원도 묶어서 한번에 신청 가능하게 한다.

- 중복을 줄이기 위해 4단계 구성으로 신청인 및 대상 정보입력 -> 민원정보입력 -> 입력내용 요약 및 검증  -> 신청

- 민원에 따라 필요한 조합을 위해서 신청 페이지는 컴포넌트 형태로 작성한다.

- 민원 정보 및 단계정보를 유지해야 하기 때문에 React, Vue와 같은 SPA가 적당해 보인다.

- SPA 프레임워크를 사용하기에는 나중 유지보수 인력에게 관련지식을 요구하기가 힘들다.

- 결국 순수 자바 스크립트로 개발하기로 정했다.

- 브라우저 호환성 때문에 ajax를 사용하고 모든 호출은 보안을 위해서 form 대신 비동기 및 json 데이터를 사용한다.

- Typescript를 고민했는데, 유지보수인력의 편의성을 고려하여 도입하지 않기로 했다.

- 다른 개발자들의 개발 편의성을 위해 Typesript를 적용하였다. WebPack을 통한 bundle.js 배포 방식이다.

 

구조를 결정하고 이상관련 4개의 민원을 신청가능한 데모를 만드는데 까지 약 20일이 소모되었다.

사이드 프로젝트 성격이라 하루에 많게는 4시간 적게는 1~2시간 정도 밖에 집중을 못하고 있어 구현되지 않는 부분이 아직 많다.

 

데모

 

소스는 자바 스크립트라서 공개되어도 별로 상관이 없고, 관리 편의를 위한 개인프로젝트 성격이 강하기 때문에 아래 링크로 일부소스를 볼 수 있다. 보안에 필요한 내용은 아직 적용하기 전이지만, 이런 구조로도 작성이 가능하다고 참고 하시면 좋을 것 같아 올려본다.

 

시간이 나면 이 프로그램의 구조와 동작 절차에 대해서도 적어 보겠지만, 항상 나의 개발철학처럼 단순함의 미학을 최대한 살리기 위해 노력했다. 참고가 되었으면 좋겠다.

 

https://github.com/pilseong/cyberClient