개발/개발과정

[AlgoITNi] 홈 화면 성능 개선하기: 2. 코드 스플리팅 (1)

Home 화면의 성능을 개선하는 이유? 우리 서비스는 특성상 Room 페이지 안에 대부분의 기능이 위치하게 된다. 결론적으로 Room 페이지에서는 우리 서비스의 거의 모든 코드가 로드 되어서 실행되어야 한다. 하지만, 이와 반대로 Home에서는 특별한 기능이 없다. 단순히 uuid를 갖는 방을 생성하거나 이미 만들어진 방에 참여하는 기능밖에 없다. 또한, 사용자가 우리 서비스를 사용할 때 가장 먼저 마주하는 페이지가 Home 화면이기 때문에 Home 화면을 개선하고자 했다. 우리 서비스의 반응성이 좋고 좋은 UX를 제공하기 위해서는 Home 화면을 개선시켜 사용자에게 좋은 인식을 심어줘야 한다고 생각했기 때문이다. 따라서, 서비스의 Home 화면을 개선하고자 했으며 앞으로의 내용은 그 과정에 관한 것이다..

[AlgoITNi] 홈 화면 성능 개선하기: 1. 번들링 크기 줄이기

네이버 부스트캠프 8기 그룹 프로젝트로 AlgoITNi라는 프로젝트를 진행했다. boostcampwm2023/web05-AlgoITNi: 동료와 함께 할 수 있는 플랫폼, 알고있니 (github.com) GitHub - boostcampwm2023/web05-AlgoITNi: 동료와 함께 할 수 있는 플랫폼, 알고있니 동료와 함께 할 수 있는 플랫폼, 알고있니. Contribute to boostcampwm2023/web05-AlgoITNi development by creating an account on GitHub. github.com 동료들과 함께 소통하며 알고리즘 학습을 할 수 있는 플랫폼을 만들고자 했으며 이를 위해 WebRTC를 이용한 실시간 P2P 화상 채팅, Socket을 이용한 실시간 ..

[CRDT 구현하기] 3차 시도: 라이브러리

[CRDT 구현하기] 2차 시도: 연결 리스트 (한계) [CRDT 구현하기] 2차 시도: 연결 리스트 (한계) [CRDT 구현하기] 2차 시도: 연결 리스트 (개선) [CRDT 구현하기] 2차 시도: 연결 리스트 (개선) [CRDT 구현하기] 2차 시도: 연결 리스트 [CRDT 구현하기] 2차 시도: 연결 리스트 [CRDT 구현하기] 1차 시도: 배 29223.tistory.com 직접 만든 CRDT는 제대로 된 기능을 하지만 실시간성에서 부족함이 있었다. 정해진 일정이 있었고 일정에 맞춰서 기능을 완성해야 했다. 이를 위해 라이브러리를 도입하기로 했다. 라이브러리 CRDT 알고리즘을 제공하는 라이브러리는 여러가지가 있다. 대표적으로 Yjs와 AutoMerge 등이 있으며 각각의 장단점이 있다. 우리는 ..

[CRDT 구현하기] 2차 시도: 연결 리스트 (한계)

[CRDT 구현하기] 2차 시도: 연결 리스트 (개선) [CRDT 구현하기] 2차 시도: 연결 리스트 (개선) [CRDT 구현하기] 2차 시도: 연결 리스트 [CRDT 구현하기] 2차 시도: 연결 리스트 [CRDT 구현하기] 1차 시도: 배열 [CRDT 구현하기] 1차 시도: 배열 [CRDT 구현하기] CRDT란? [CRDT 구현하기] CRDT란? CRDT 동시 편집 29223.tistory.com 위의 과정들을 통해 충돌을 해결할 수 있었다. 하지만 병합 과정에서 커서가 이동하는 문제가 발생했다. 커서 고정 글자는 잘 병합이 되는데 커서가 이동하는 문제를 해결하기 위해서 커서의 위치 정보를 기억해야 한다고 생각했다. 기존 커서의 위치를 갖고 있으며 병합 이후 해당 정보를 바탕으로 커서의 위치를 조정하는..