🍉 얻은 것

• Webpack적용
  • 웹팩에 대해 자세히 공부해볼 수 있는 좋은 기회였다. 사실 보통 프로젝트 중간에 투입되면 이런 빌드 도구들은 이미 구축되어있는 경우가 많아서… 나같은 초보개발자는 쉽게 경험하지 못하는건데, 이번기회에 찬찬히 살펴볼 수 있었다.
  • 덩달아 바벨도 공부할 수 있었다. 뗄레야 뗄 수 없나보다.
  • 코드 스플리팅
  • 코드 압축 : Compress
• Naver Map API 사용
  • 상태관리가 보기보다 어려웠다.
  • Naver Map loading 이후 렌더링 할 수 있도록 loading progress bar가 필요했음
• setInterval과 이벤트루프, 브라우저 콜스택에 대해 이해할 수 있었음.
  • setInterval을 1초 간격으로 수행한 경우, 혹여라도 function이 1초이상 지연되는 경우 병목현상이 발생해서 브라우저 콜스택이 비워지면 한번에 여러번의 Request가 날아가기도 했다.
  • setTimeout을 재귀적으로 호출하여, 함수가 끝나는 시점을 기준으로 delay만큼 기다리도록 반영했다.
• Mobx를 사용해서 비교적 쉽게 상태관리를 했다.
  • naver map 의 object구조가 복잡하고, 사용자 인터렉션을 계속 유지해야해서, 비동기로 동작하는 setState로 작성했을 때, 오히려 복잡도가 증가했다.
  • Mobx로 간결하게 해결했다.
• kafka 사용하기
  • 이번 프로젝트의 주목적이다. 단순히 웹소켓만 사용해도 됐겠지만, Spring kafka를 사용하고, 생각보다 쉽게 구현할 수 있었다.
• Websocket - SockJS사용하기
  • 같은 링크에 접속한 사용자 정보를 받을 땐, webSocket을 활용했다. SockJS 라이브러리를 통해 쉽게 구현할 수 있었다.
  • 용어가 다소 헷갈렸다. 카프카에도 토픽이 있고, webSocket에도 토픽이 있었으니…
  • 스프링 프레임워크에있는 SimpMessageBroker를 SockJS와 적절히 활용하여, 연결이 끊어졌을 경우 fail Over도 손쉽게 만들 수 있었다.
• 도커 파일 작성하기
  • 도커 컴포즈에 모두 작성할 수도 있었지만, 공부해보자는 느낌으로 리액트, 스프링, 카프카 별로 각각 도커파일을 작성해보았다.
• 도커 컴포즈 작성하기
  • 작성한 도커파일을 토대로, 도커컴포즈를 작성했다.
  • spring 컨테이너를 생성할 때, 환경변수를 kafka:9092로 지정하지 않아 애를 많이 먹었다. 덕분에 컨테이너 내부와 외부를 잇는 방법에 대해 공부했다.
  • 다음번엔 docker network를 써봐야겠다
• geolocation API를 써보았다.
  • 브라우저가 정말 파워풀해진 것 같다. navigator,geolocation API에 생각보다 많은 유용한 정보를 받아볼 수 있게 되었구나… 익스플로러는 안된다고 한다 ㅎㅎ
• 코딩 습관에 대해 재고할 기회
  • 지도 마커 렌더링 할 때, 사용자 인터렉션(줌 혹은 포커스 정보) 이 날아가는 이슈가 있어서 애를 먹었다.
  • 에이포용지를 놓고 적어가며 생각해보니 로직이 되게 간단했었다.
  • 무턱대고 개발하는건 역시 마이너스 요인이다.

🏠 아쉬운 점

• 배포하자니 비용이 걱정된다.

  • produce, consume하는데 주고받는 패킷이 꽤 된다.
  • naverMapAPI도 사용량 초과할까봐 조마조마하다

• HTTPS환경

  • Geolocation API는 기본적으로 HTTPS required다.
  • SSL인증서를 받고, 인스턴스 위에 도커로 배포를 해야할텐데, 막상 인증서와 도메인을 받으려하니 조금 망설여진다. 귀찮아지는건가..
  • 얼른 맥미니를 사서, 서버를 두어야겠다.

• 로그인 기능도 넣었더라면..

  • 맘같아선 keycloak연동해서 내부 회원계를 구축하고 싶었다.
  • 다만, 접근성이 안좋아지기에 프로젝트 성격과는 맞지 않아보였다.

• 위치도 보여주고 채팅도 할 수 있었다면…

  • 사실 이걸 쓴다고 가정했을 때, 카톡이랑 번갈아가면서 쓰게되니 누가 좋아하련가..
  • 덩달아, 상대가 접속했더라도 브라우저를 벗어나게되면, 현재위치를 받아올 수 없다. 즉 거기서 끊기는 것이다. 친구들끼리 만나려할때, 아무래도 카톡이랑 번갈아가면서 쓰게될텐데, 채팅기능을 만들지 않은건 아쉬운건 사실이다.
  • 채팅기능을 붙인다면… UI,UX가 고민이다

• mobx의 deprecated된 방식

  • 어노테이션 방식으로 작성했으면 조금 더 좋았을테다. 다만, 이번 프로젝트 목적이 front공부가 아닌만큼 kafka와 websocket을 이해하는데 집중하고 싶었다.
  • 쓰고나서 보니 console창에 deprecated된 문법이라고…

• webSocket에 보안은 어떻게 적용하지?

  • 이건 잘 모르겠다. 최초 Connection을 HTTPS 통신 이후 열도록 하여야하나?

• setState hook에 대한 이해가 부족한 것 같다.

  • mobx를 최대한 안쓰려 했는데 불가피하게 사용하게 되었다.
  • 그래도 다행히 mobx가 그렇다고 성능상 안좋은건 아니었다.
  • setState → mobx로 변경하는데 위안이 되었던 글…

  React에서 Mobx 경험기 (Redux와 비교기) | 우아한형제들 기술블로그