01 SAP FI Module to Mobile - 확장성을 고려한 구현

01 SAP FI Module to Mobile - 확장성을 고려한 구현

요즘 하는 일은 SAP GUI화면을 Mobile버젼으로 만들고 있다. 일단 아래와 같이 SAP GUI로 접속한 SAP Easy Access화면을 Mobile Version으로 구현하는 작업이다.

위와 같은 화면을 아래와 같이 Mobile로 바꾸고 있다.

구현하는 과정에서 이슈가 여러가지 나온다.

일단은 비슷한 화면 구성을 가지고 위에 Create, Change, Display 세가지 기능을 사용해야 하는데 항상 느끼는거지만 Create따로 Change따로 Display따로 화면을 만들게 된다.

왜냐하면 같은 화면이긴 하지만 내부 로직은 다 다르기 때문이다. 보통 교재를 봤을 때는 대부분 따로 구현을 했다. 심지어는 DB조회하는 기능을 만들때도 DB별로 구성을 달리 했던 것 같다.

그냥 따로따로 만드는게 처음 개발 할 때는 직관적이고 좋다. 그러나 문제는 구현 단계가 아니고 빌드 단계이다. 이걸 개발용 말고 서비스용으로 사용하려면 서버로 파일을 옮겨야 하고 웹앱이다보니 관련 페이지의 주소도 상대경로로 해놓은 경우 폴더 단계가 변경되면(root에 있다가 한단계 아래로 내려간다던다가) 링크 주소를 바꾸어 주어야 한다.

빌드 단계에서 정신없이 바꾸고 정신없이 돌아가다 보면 벌써 머리는 엉키기 시작한다. 그리고 실수가 날 수 밖에 없고 제 시간에 작업을 완료 하기가 힘들고 야근 하게 된다. 악순환이다. ㅎㅎ

이걸 해결하려면 IoC(Inversion of Control) 개념을 도입해야 할 것 같다. IoC는 제어권을 대신 해준다는 의미로 제어권을 Container가 대신 하도록 해주는 것이다.

----

test가 가능하도록 method를 만들 것

높은 응집도 낮은 결합도

이전에 개발하던 code를 다시 보면 결합도가 높아서 기능 추가를 하려면 다른 부분도 수정해 주어야 한다.

예를 들어 input field 3개의 데이터를 get방식으로 넘겨서 db에 저장하는 code를 input field 5개로 늘리는 작업을 할 때 작업 소요가 많아진다. ㅅㅂ

작업 소요는 아래와 같다

01.As-Is

1.input field를 추가하고

2.input field에서 data를 가지고 오는 부분을 수정하고

3.가지고온 data를 parameter로 넘기는 부분을 수정하고

4.parameter를 받는 부분을 수정하고

5.받은 parameter를 저장하는 부분을 수정.

간단한 input field추가인데 작업할 곳은 총5군데의 수정을 해야 한다. 

이러면 내가 싫어하는 야근을 피할 수 없다.

이 코드를 어찌 리팩토링 할 것인가?

02.To-Be

1.input field를 추가하고

로 끝나면 참 좋을 것 같다. 그징?

이렇게 바꾸면 input field를 지우면 당연히 위에 1-5까지 작업을 하지 안아도 되게끔 말이다.

그러면 어떻게 바꾸어야 할까?

일단 parameter를 넘기고 받는 부분은 들어가야 한다. 그러면 parameter를 넘길 때는 어떤 형태로 넘기고 받을 때는 어떻게 받을까?

여기에서 고려해볼 사항은 parameter를 structure형태로 넘길 수 있는가 없는가이다.

java같은 경우는 structure형태 뿐만 아니라 Class형태로도 parameter를 넘길 수 있지만 지금 내가 하고 있는 javascript같은 경우는 page간에 parameter를 넘길 때 그게 가능할까? 가능 하다면 어떤 형태가 될까?

03.web page간에 parameter 주고 받기

web에서 parameter를 주고 받는 방법은 get 방식과 post 방식 두 가지다.

먼저 get방식은

http://oceanfog3.mireene.com/processingPage.html?parameter1=1&parameter2=10&parameter3=1000

이런 식으로 넘어간다.

1.uiPage.html에는 variable을 넣지 않는다.

1.input field를 추가한다 - 이건 어차피 내가 해야됨.

2.추가한 input field의 값을 가져오는 code

3.가져온 input field의 값을 넘기는 code

'2.추가한 input field의 값을 가져오는 code'가 있다면 input field를 추가한다고 해도 따로 variable을 추가할 필요가 없다.

'3.가져온 input field의 값을 넘기는 code'는 기능이 다르므로 따로 분리해 준다.

04.입력 받을 때 쓰던 code를 수정 할 때도 쓸 수 있을까?

어차피 웹프로그래밍은 입력, 수정, 삭제, 출력 4가지다. 그런데 '3.가져온 input field의 값을 넘기는 code'는 입력, 수정, 삭제, 출력에 모두 사용할 수 있지 않을까?