이건 마치 ET의 한 장면이었던 순간같이 느껴졌다.
기존에는 프론트 단에서만, 혹은 백엔드 단에서만 분리되어 작업했었다. 하지만, 이제는 내가 직접 만든 프론트 화면에서 통신 요청을 보내 내가 만든 서버와 연결시켜 데이터를 받아온다는 것이....진짜 되는 구나?!
물론 이 첫 시작이후에도 지속적인 서비스라면 계속 유지하는 것부터 그 안에서 크고 사소한 잡음이 생길 것이다. 그래도 시작이 반이라는 말이 있으니까~
01. 시작조차 쉽지 않았던 우리...
물론 한 번에 딱 하고 연결되었으면 좋았겠지만, 어쩜 그리 쉽게만 되는 것이 없는 지...
기존 vsc에서 라이브 쉐어를 켜서 한 명이 서버를 열어두면 그 서버에 포스트 맨으로 날리는 것을 실습했었다.
그런데, 라이브 쉐어가 실행이 잘 안 되었다... ㅜㅜ
처음에 설명을 들었을 땐, 라이브 쉐어만 확장 프로그램에서 깔고 실행만 하면 되는 줄 알았다. 그래서 웹 브라우저 상에서도 가능한 줄 알았고, 브라우저로 실행을 눌렀다.
그랬더니...
다음과 같이 오류가 뜨는 것이 아닌가...
-> 그래서 결국 팀원들에게 문의를 해보니 필자처럼 비슷한 문제를 겪는 사람들이 더러 있었다. 브라우저 상에서 알아보니 지원 자체가 제대로 안 되는 것 같았고, 그래서 그냥 vsc 상에서 실행하는 방법을 선택했다.
02. 첫 시작 하지만 뭔가 아쉬운?
왼쪽 중간쯤에 라이브 쉐어 아이콘을 누르고 저렇게 마우스를 올려두면 협업 세션 참가 혹은 협업세션 시작 버튼이 보인다.
이때 세션시작을 누르면 본인이 서버를 공유하는 것이고, 그게 아니라 다른 이의 서버에 참가하고자 한다면 협업 세션 참가를 누르면 된다.
1) 협업 세션 참가자 기준
위에서 언급한 버튼을 누르면 vsc에서 해당 협업 주소를 넣으라는 창이 보인다. 거기에 해당 주소를 적어 넣으면 잠시 뒤, 공유자의 화면이 보인다. 그러면 사실상 연결된 것이다. 이후에는 공유자에게 가입 방식에 대해 물은 뒤, 해당 방식대로 가입하는 것은 어렵지 않다.
포스트맨을 열어서 아래처럼 해당 주소에 센드를 날려주면, 그에 대한 응답이 올것이고, 성공하면 백엔드 서버 공유자의 db로 가입된 내역이 찍힌다.
우리 역시 이 과정을 한 명씩 해보면서 새로운 백엔드 통신의 맛을 느낄 수 있었다.
2) 협업 세션 공유자 기준
이제는 협업 세션 공유자의 기준으로 설명하면 약간 다르다.
1. 세션 시작 버튼을 누른다.
2. 상단 작업 실행 창에 깃허브 로그인 버튼을 누른다.
3. 로그인 후, vsc에서 실행하도록 열기를 누르면 된다.
그러나, 아직 협업세션만 열린 것이지. 아직 본인의 서버가 열린 것은 아니다.
따라서 아래와 같은 작업을 추가로 해줘야만 한다.
바로 쉐어 서버를 누르고 본인의 포트 번호를 넣어줘야만 서버를 공유로 쓸 수 있도록 서버 쉐어가 된다. 이후에는 기존 방법대로 참가자들이 포스트맨 센드를 날려주기만 하면 성공.
아래 16~18은 팀원들이 추가로 가입한 가입 정보다. 성공적으로 필자의 db에 가입이 된 것을 확인할 수 있었다.
그런데, 뭔가 아쉽다. 크게 2가지다.
- 로컬 호스트로만 접속한 것.
- 포스트맨으로만 접속해서 센드를 날린 것.
일단, 이중 1번은 현재 도메인을 따로 쓰려면 유료로 써야하는 경우가 많기도하고 현재 서비스 배포용이 아니기에 이해가 되었다. 다만, 2번은 분명 할 수 있을 것 같았다. 그래서 기존에 만들어 둔 프론트 페이지와 연동 작업을 시작했다.
그것 역시 쉽지 않았는데 이 다음 포스팅 2탄을 기대해 주시라~
