『Server 01 』 Server UI 설명

💻 개요

사내 공지 데스크톱 앱에 대하여 간략하게 설명했었는데, Server 단도 내가 담당하게 되어  포스팅이 늦어졌다 😭😭 기능 추가와 수정이 필요할 거 같아 차마 올리지 못했다. 블로그 포스팅을 위해 9월까지 예정이었던 프로젝트를 일찍 끝내고 돌아왔다. 진행 순서는 Server UI 설명 후 개발 과정 포스팅하고, Client 단으로 넘어갈 예정이다. 아무래도 Server에서 DB등 다 구축한 상태여야 Client 포스팅 하기 쉬울 거 같아 이런 결정을 내렸다. 
 

💻 통신 방향 (순서)

SERVER 1,2 나눈 이유는 SERVER2는 추후에 다른 용도로 더 쓸 계획이라 나눴다. (하나로 합쳐도 상관 없다.)
통신 방향은 크게 2가지가 있는데 ,
 
초록색부터 살펴보면 사용자가 Electron 앱을 실행하면 pcName 과 IP를 SERVER2에게 전송한다.  SERVER2는 이를 SERVER1의 DB에 저장함으로써 사용자가 자동으로 등록된다. 이 때 소켓 통신이 연결했을 때 socket ID를 Status에 등록하고, 통신이 끊겼을 때 socket ID를 지움으로써 클라이언트의 On/Off 상황을 알 수 있다.
 
갈색을 살펴보면 SERVER는 "전송" 버튼을 누름으로써 pcName과 idx 값을 REST API로 전달한다. 이 값을 Redis에 임시 저장한다. 이 때 Redis에는 클라이언트의 pcName과 socket ID가 매핑되어 있다. Redis에서 socket ID를 찾아서 Electron 에게 신호를 전달한다. Electron 은 해당 pcName이 자신의 이름인지 판단하고, 맞으면 해당 idx를 띄워준다.
 
이제 UI에 대해 간략하게 설명해보자!
 

💻 로그인 화면

흔한 로그인 화면이다.
 

💻 MAIN 화면

사용자의 IP와 pcName을 알 수 있는 MAIN 화면이다. Status는 socket ID가 DB에 저장되어 있으면 초록색(On) 없으면 빨간색(Off)로 표시된다. (위에서 설명한 초록색 통신으로 인해 등록된 화면이다)
 

💻 템플릿 화면

나머지 메뉴 4개는 똑같이 구성되어 있다. 오른쪽 아래 + 버튼을 눌러서 템플릿을 만들 수 있는 화면이다.

템플릿은 오른쪽과 같이 html로 만들고, Electron 사이즈에 맞춰 기존 규격을 넣어주었다.

템플릿에서 위와 같은 템플릿 서버 점검 안내 1을 만들었다.
 

💻 SERVER / SERVICE 화면

화면에서 오른쪽 아래 + 버튼을 누르면 오른쪽과 같은 창이 쓰는데, 템플릿을 고를 수 있고, 위의 {props.value1}과 {props.value2}에 값을 넣을 수 있는 INPUT도 있다. 오른쪽 위에 저장 버튼을 누르면 저장이 된다. 

BoardList에서 만든 것을 누르면 value1과 value2에 넣은 값들이 적용돼서 출력되는 것을 확인할 수 있다. 오른쪽 위에 전송 버튼을 누르면 등록된 사용자 모두에게 pop-up 알람이 간다. (위에서 설명했던 갈색 통신의 시작점이다.)
 

💻 개인 공지 화면

개인 공지화면은 개별로 알림을 보내기 위한 창으로, 현재 서버 단에서는 모든 클라이언트에 따른 타이틀이 보이지만 클라이언트에서는 자신의 pcName에 해당되는 게시판만 보인다. 앞 게시판과 다른 점은 IP 또는 pcName을 기입할 수 있는 INPUT이 한 개 더 있다.
 

🐳 마무리

처음 계획했던 스토리보드?인데 얼추 비슷하게 나온 거 같아 뿌듯하다 😆

티스토리 제목과 마찬가지로 나는 네트워크 전공을 한 개발자다. 직업도 네트워크/보안 쪽에 있다가 23년 1월부터 개발자로 일을 하게 되었다. 따라서 소스가 효율적이지 않을 수도 있고, 보기 불편할 수도 있다. 많은 조언 남겨주시면 더 나아갈 수 있는 개발자가 되도록 노력하겠다.