Week11 - TURN, Storybook

pds·2023년 1월 29일
0

WIL

목록 보기
10/12

이번주는

최종 프로젝트가 거의끝나간다.

3일뒤 출시를 목표로 하고 있는데 사실 그러려면 숨도 안쉬고 3일을 더 지내야 할 것 같다.

MVP 기간 동안 MVP도 다 완료하지 못해서 MVP완성을 목표로 하고 있다.

MVP기간 종료 후 발생한 문제에 대해 해결했던 것들 중 2가지만 간단하게 기록해보았다.

TURN 서버 구축

WebRTC 를 통해 브라우저간 통신 시 ICE candidates 를 통해 상호 미디어 연결을 확립한다.

이 때 필요한 것이 STUN, TURN 서버이다.

간단 설명

STUN서버를 통해 퍼블릭 네트워크 주소를 알아내 상호(피어)간 연결을 시켜주는 것인데

STUN서버는 구글 등 무료 서버가 많아 그걸 활용하면 된다.

TURN서버는 IP간 직접 연결 실패 시 트래픽을 중계해주는 서버이다.

TURN서버는 체험판 맛보기 서비스나 유료서비스만 있어 귀찮더라도 직접 만들어야 공짜로 사용할 수 있다

그것만으로 안됨?

NAT(private ip public ip 1:1대응) 뒤의 사용자를 STUN서버를 통해 알아내 피어 연결을 하는데

모바일 LTE나 일부 와이파이에서 Symmetric NAT (연결에 따라 다른 public ip port로 매핑) 환경이라 STUN서버 만으로 사용자를 식별해 연결 할 수 없는 문제가 생김

TURN

각 사용자(피어)들이 직접 통신하는 것이 아니라 TURN 서버를 경유하여 통신한다.

peer 연결 시도 시 둘 다 선택지에 두고

Ice Candidate gathering 시에 직접 연결이 가능한지, relay된 주소(turn 서버로부터의)를 사용해야 하는지 판단해 최적의 연결을 한다.


TURN 서버 만들기

https://github.com/coturn/coturn

coturn을 통해 쉽게 구축할 수 있다.

그냥 클라우드 인스턴스 하나 시작해서 설치/세팅/서버 시작 후 무료 SSL 인증서 적용과 함께 도메인만 연결해주었다.


테스트

여기서 하면 된다.

테스트는 했지만 연결이 될 때 어떤 로그가 생기는 지 궁금해서 로깅 설정도 따로 해줬다!

로그가 매우 많이 찍힌다고 하여 logrotate 설정도 해주었다.

연결 시 뭔가 계속해서 찍히는데 너무 많이 찍혀서 복잡해서 알아보기 쉽진 않다.


결과

LTE와 일반 랜선 간에도 peer to peer 연결이 된다!



Storybook 사용

작은 단위의 컴포넌트로 리팩터링 하거나
상호작용/이벤트가 많은 컴포넌트를 개발하거나

깊은 곳에 있어 수정할 때 마다 하나하나 확인하기 어렵지만 수정이 잦은 컴포넌트 등

UI를 개발할 때 불편함이 있어 스토리북을 도입했다.

개발 뿐 아니라 팀원이 작성한 컴포넌트를 코드로만 리뷰해야 하거나 직접 리액트를 돌려봐야 아는 불편함을 해소할 수 있지 않을까라는 기대로 도입하기도 했다.

한 명이 작성한 컴포넌트여도 모두가 사용해야 하니 본인이 작성하지 않은 컴포넌트에 대한 이해도도 높일 수 있지 않을까 싶었다.

위 효과를 극대화 해보고자 Pull Request에 대한 CI 워크플로우를 작성하여 자동 배포도 시켰다!

저 조그만하고 독립적인 컴포넌트가 뭣같이 복잡해서 스토리북 도입의 효과를 많이 누려가며 개발할 수 있었던 것 같다

개인적으로는 저렇게 기본적인 기능만 사용해도 개발의 질이 올라가는 것 같아 만족스러웠는데

나중에는 스토리북 기반 이벤트 테스팅, 컴포넌트 테스팅 등 다양한 기능을 활용하면 더 좋을 것 같아 활용해보고 싶다.


이번주 요약

이번주 뿐만 아니라 계속 숨도 못 쉴 정도로 바빴는데 막상 아웃풋은 별로인 것 같다.

아웃풋이 별로여도

결국 무언가 하면 무언가가 개선되고 생긴다고 생각한다.

할 수 있는 걸 최선을 다해서 해야겠다!

profile
강해지고 싶은 주니어 프론트엔드 개발자

0개의 댓글