한국전자기술연구원 어플리케이션 개발 - 2

김범수·2021년 9월 28일
0

 한국 전자기술 연구원 어플리케이션 개발 리팩토링 및 기능 추가를 하려고한다.

 원래는 react-native로 제작했었는데 디펜던시 버전관리나 원하는 라이브러리 적용등이 힘들어서, react-ionic을 이용해 webview방식으로 새로 만들었다. 원래의 기능은 전부 똑같이 제작했고, 추가된 부분이 있는데 힐링부스의 client program(유니티로 만든 프로그램)과 상호작용을 해야되는 부분이 추가되었다. 원래는 간단한 리모콘이였는데 힐링부스에서 사용자와 마이크의 거리가 멀어서 대표님께서 클라이언트 프로그램을 전부 모바일로 동작이 가능하도록 수정을 부탁하셨다. socket.io를 이용해서 제작했는데 이번에 해당 작업을 진행하면서 두가지를 공부하게되었다.

 첫번째는 typescript를 왜 써야하는지 그리고 어떻게 쓰는지이고, 두번째는 socket통신 그리고 싱글톤 방식으로 만드는 방법등을 해당 기능을 제작하면서 생각해보게됐다.

 우선 난 typescript를 쓰면서 굳이 불편한데, 왜 써야하는거지? 이런생각을 많이 했었다. 우선 이제와서 생각해보면 그 이유는 회사에 개발자가 클라이언트 개발자 분들이랑 프론트 UI 작업하시는분 빼면 이런 업무는 전부 혼자 진행한다. 그래서 타입 정의나 그런부분에 신경쓸 시간이 많이 없었고, 사실 기능을 제시간에 맞춰 제작하는데 급급해서 그런부분을 생각할 시도조차 못해봤다. 기간을 못맞출 것 같은 날에는 사무실에서 몇일씩 자면서 근무를 했었다. 그러니 자연스럽게 개인 프로젝트를 진행하듯이 코드를 작성했고, 이후에 개선점을 찾으면서 소스 리뷰는 혼자 했었지만 타입스크립트의 필요성에 대해서는 뭔가 와닿는점이 없었다.

 그러다 이 프로젝트를 진행하면서 뭔가 잘못됐음을 느꼇다. 어떤점이냐하면.. 분명 몇달전 정말 밤을 새가면서 작성했던 코드였고, 구조나 작동방식에 대해 수십번 생각을 해봤었는데 몇달 뒤 리팩토링을 진행하려니 도대체 무슨생각으로 이렇게 작성했었는지 전혀 기억이 안났다. 예를들면, 어떠한 함수가 그리고 그 함수의 파라미터가 어떤 구조인지 어떻게 작동하는지등을 생각하는데 오랜시간을 썻다. 그때 아는 개발자분과 타입스크립트에 대해 얘기했는데, 그때 타입스크립트의 필요성에 대해 굉장히 와닿은 것 같다.

 예를들어 아래의 사진에서 Controller는 내가 작성한 컴포넌트이다. 그런데 저렇게 history, location등의 파라미터가 뭔지 모를 수 있다. 작성한 나는 알지만 리액트에 익숙하지 않은사람은 저게 navigation 파라미터라는걸 모를 수 있다. 그럴경우 Controller의 ControllerPorps를 만들어주고 해당 interface가 react-router-dom에서 제공하는 RouteComponentProps를 상속받는걸 명시해 줄 수 있다.

 그리고 밑의 사진처럼 실제로 해당 파일을 본 다른 개발자가 RouteComponentProps가 뭔지 직접 확인해볼 수 있다.

또한 아래 사진처럼 setCallback이란 함수가 어떤 함수인지 SetCallback type을 명시해주고, SetCallback 함수의 파라미터는 어떤 형식인지 어떤것을 반환하는지 등을 명시해 줄 수 있다.

 이번 프로젝트에서 typescript를 쓰며 느낀건, typescript로 명시를 잘 해두었을 경우 그 자체로 해당 파일의 document가 될 수 있다는 것을 알게되었다.

 두번째로 공부했던 부분은 socket통신을 이용한 실시간 통신인데, on과 emit을 이용해 서로 정해진 프로토콜을 이용해 특정 값을 받았을때 특정 동작이 즉시 이루어지는부분이 신기했다. 실제로 클라이언트와 실시간 통신을 이용한 변화가 동시에 이루어진다.


위에서 사용했던 사진인데 해당 사진을 보면 소켓통신을 이용해 data를 이용해 서버와 통신하는 걸 알 수 있다. 그리고 컴포넌트에서 통신을 할때마다 socket이 계속 새로 만들어져서 문제가 생겼었는데, 해당부분은 싱글톤 패턴을 이용해서 해결하려했었다.

public class SocketClient {
   private static SocketClient socketClient = null;
   
   private SocketClient() {}
   
   public static SocketClient getInstance() {
      if(socketClient == null) {
         socketClient = new SocketClient();
         System.out.println("socket new instance");
      }
      
      return socketClient;
   }
   
   public void connect() {
      System.out.println("connect");
   }
}

실제로 이런식으로 코드를 작성해서 socket 객체가 딱 한번만 생성되고, 해당 socket객체를 이용해 통신을 하려했는데, 이후 소스 분석중에 싱글톤패턴으로 작성하지 않고 생성한 socket 객체를 직접 출력해봤는데 socket 객체의 uuid가 전부 같았었다. 이부분이 어떻게 작동하는지는 정확하게 분석하지 못해서 추후에 추가로 확인해보려한다.


아무튼 결과적으로 영상에서처럼 client program과 실시간으로 상호작용하며 작동이된다.

healing-ionic github 주소

profile
즐기는 개발자

0개의 댓글