Frontend/문제 해결기

들어가며 프렌딩에서 프로필 교환 관련 개발을 하고있었다. 여기서 프로필 교환이란, 나와 상대의 프로필 카드를 교환하는 것이다. 마치 명함을 교환하는 것처럼 말이다. 그런데 여기서 약간의 문제가 생겼다. 앱인 경우에는 프로필 공유를 하게되면, 해당 프로필을 가진 사람의 기기에 푸시알림을 보내서 친구추가를 하는 형태였지만, 앱을 설치하지 않은 사람이 설치한 사람의 프로필 링크를 받거나, QR을 찍는 경우 어떻게 할지가 고민했다. 결론은 앱을 설치하지 않은 사용자의 경우 웹을 띄워서 어떤 프로필인지 볼 수 는 있게 해주자 였는데, 이걸 어떻게 안전하게 구현할 수 있을지가 고민이었다. 그냥 프로필 id로 보여주면 되는거 아님? 웹링크는 랜딩 사이트를 이미 개발했고, 배포해두었기때문에, 랜딩 사이트의 url을 사..

문제점 성능을 측정해보기 위해 lighthouse를 사용하던 중 점수대가 심상치 않다는 것을 알게되었다. 무려 79점...이었다. 문제파악하기 우리 AlgoITNi는 Home과 Room 두가지 페이지로 구성된다. 대부분의 기능은 Room에 필요하고, Room에서만 사용한다. 그러나, 리액트는 SPA이기에 이런 모듈들을 Home을 렌더링할때도 가져오게되고, 따라서 Home의 초기렌더링 성능이 나빠지는 것이라 추측했다. 확인해보기 프로덕션에서는 빌드가 완료된 청크가 네트워크 응답으로 오기때문에 정확하게 분석하기 어렵다. 따라서 개발환경에서 Home에 접속했을때 개발자도구의 네트워크 탭을 통해 어떤 코드를 불러오는지 확인했다. 빨간색 부분이 Room에서 필요한 코드들이다. 즉, Home에 접근했을때는 필요없는..

문제점 네이버 부스트캠프에서 진행하고 있는 AlgoITNi프로젝트에서 아래와 같은 문제가 발생했다. 빌드하는 과정에서 이러한 경고 메시지가 발생한 것이다. 특정 청크가 500KB보다 크다는 것이 문제이다. 위 사진을 보면 번들사이즈가 1285kb이고, 사용자가 실제로 받는 번들사이즈인 gzip사이즈가 425.33kb이라 초기 렌더링이 느려질 수 있다는 문제가 있다. 청크 사이즈 줄이기 청크 구조 분석하기 원인을 알기위해서 vite-bundle-visualizer를 사용해서 청크의 시각적인 분석을 해보았다. highlight.js가 번들의 절반을 차지하고있었다. highlight.js는 에디터에서 코드하이라이팅에 사용되는 라이브러리인데, 여러가지 언어를 모두 지원하기때문에 이렇게 라이브러리 사이즈가 커지는..

https://0422.tistory.com/334 실시간 동시편집 구현 연대기 (3) - Yjs를 도입해보자 이전 게시글에서 문제가 있어서 Yjs를 도입하기로 했다. 이 글을 통해 어떻게 도입했는지 작성해보려고한다. Yjs알아보기 공유 타입 선택하기 Yjs는 다양한 타입을 지원한다. map도있고, array도 있 0422.tistory.com 이전 게시글에서 CRDT를 Yjs를 사용해서 구현했다. 하지만, 언젠가는(하겠지...?) 직접 구현해놓고 싶기때문에 라이브러리를 통해 만들어둔 기능을 언제든 내가 만든 모듈로 교체할 수 있도록 처리해둘 것이다. 문제점 실제 구현부인 handleRecieveCodeMessage, 즉 통신을 통해 다른 피어의 코드 데이터를 받았을때의 로직인데, 대부분이 Yjs의 모듈..

이전 게시글에서 문제가 있어서 Yjs를 도입하기로 했다. 이 글을 통해 어떻게 도입했는지 작성해보려고한다. Yjs알아보기 공유 타입 선택하기 Yjs는 다양한 타입을 지원한다. map도있고, array도 있다. 하지만, 우리는 코드 에디터니까 text를 선택했다. 이렇게 사용할 수 있다. insert를 통해 n번 인덱스에 문자를 삽입하는 형태다. toString을 통해 실제 텍스트를 얻어올 수 있다. delete역시 동일한데, insert와 다르게 length를 두번째 인자로 받는다. 어떻게 병합하지 여기서 핵심만 보자면 // Merge changes from remote const update = Y.encodeStateAsUpdate(ydocRemote) //update용 객체(Uint8Array다) ..

이 글은 아래의 글 부터 이어집니다. https://0422.tistory.com/332 실시간 동시편집 구현 연대기 (1) - CRDT와 OT 들어가며 네이버 부스트캠프에서 진행중인 그룹프로젝트로 algoitni라는 알고리즘을 동료, 친구들과 화상, 음성, 채팅을 공유하며 코드를 함께 작성할 수 있는 서비스를 만들고 있다. https://algoitni 0422.tistory.com 우리 프론트엔드 팀은 우선은 CRDT 구현에 도전해보기로 했다. 굉장한 기술적 도전이 될것이라 판단했기때문이다. 어떻게 구현하지? 구현하기위해서는 필요한 것들부터 알아야한다. CRDT, 즉, 클라이언트 측에서 원활하게 상호 병합을 문제없이 하기위해서는 어떤 조건을 만족해야할까? A 사용자에서 병합하나, B 사용자에서 병합하..

들어가며 네이버 부스트캠프에서 진행중인 그룹프로젝트로 algoitni라는 알고리즘을 동료, 친구들과 화상, 음성, 채팅을 공유하며 코드를 함께 작성할 수 있는 서비스를 만들고 있다. https://algoitni.site/ 😺 AlgoITNi 너 알고리즘 얼마나 알고있니? algoitni.site 실시간 동시편집 이번 프로젝트에서 가장 어려운 문제는 코드를 함께 작성할 수 있는 이었다. (사실 쉬운게 없었다...) 다행히도 시중에는 이런 기능을 제공하는 프로그램들이 꽤 있다. Google Docs, Notion이 그렇다. 이들은 어떻게 구현했을까? OT와 CRDT 알아보기 실시간 동시편집을 구현하는데에는 크게 두가지 기술을 적용시킬 수 있다. OT (Operational Transformation) OT..

쿠키에 대한 개념, CORS간 쿠키요청에 대한 글은 이전 글을 참고해주면 된다. 참고 이 글은 배포환경에 아닌(배포환경은 same-site다) 개발환경에서의 cross-domain, 즉 localhost와 백엔드 서버간의 쿠키 인증, 그리고 api테스트에 대해 다룬다. 여기서 설정한 것들은 배포환경과는 별개의 로직이다. 배경과 문제상황 도입하게 된 배경 우리 서비스는 OAuth2.0을 사용해 구글, 깃허브 로그인을 진행하고, 이후에 얻어지는 서버 자체의 JWT토큰을 set-cookie를 통해 httpOnly쿠키를 set해주는 방식으로 인증을 구현했다. 들어가기에 앞서 우리 서비스의 쿠키 옵션을 살펴보자. httpOnly O secure O same-site Lax httpOnly JS로는 쿠키를 조작할 ..

모달이란 무엇인가? 모달은 이목을 집중시키기 위해 사용하는 화면 전환 기법이다. 프론트엔드에서는 반드시 구현하게 되는 그것이다. 공통 모달을 위하여. 왜? 모달이 딱 하나라면 딱히 고민하지 않겠지만, 우리 서비스는 정말 모달이 많다. 반복해서 사용되기에 이를 공통 컴포넌트로 만들어줄 필요가 있었다. 더불어, 모달 자체 규격이 존재하지 않았기에 조금 더 고민해볼 필요가 있다. 어떻게 구현할 것인가? 모달을 구성하는 방법을 찾아보니 여러 방법이 있지만 크게 두 가지로 분류되는 것 같았다. 1. 루트에 하나만 생성하여 전역 상태(type, props)를 변경하며 재사용 이런 느낌으로 사용할 수 있을 것이다. export const ModalWrapper = () => { const { setModalState..

WebRTC를 사용하게 된 이유 화상 공유, 음성 공유가 필요했기때문이다. WebRTC를 사용하면 웹어플리케이션 및 사이트가 별도의 소프트웨어 없이 웹 브라우저에서 음성, 영상, 미디어 , 텍스트, 파일까지 주고받을수 있다. WebRTC란 WebRTC는 Web Real-Time Communications의 약자로 웹상에서 실시간 통신이 가능하게 해주는 기술이다! 기본적으로 WebRTC는 P2P통신에 최적화 되어있다. 1:1 통신상황을 그림으로 표현하면 이런 상태인 것이다. 그런데 이렇게 연결하기란 쉬운일이 아니다. 기본 동작 P2P연결은 초대장을 생각하면 이해하기 쉽다. 서로가 서로에게 초대장을 보내고, 연결을 수락하면 P2P연결을 시작한다. 그런데 어떻게 서로에게 초대장을 보낼 수 있을까? Client..