기존 앱은 하나의 next app…

웹소켓 연결 채팅플랫폼에서는 웹소켓 라이브러리로 stompJS를 사용하였습니다. stompJS에 관련해서 어떤 블로그에서 정리해 둔 내용을 가져와 봤는데요, 정의는 다음과 같습니다. Stomp.js JavaScript에서 STOMP…

올해 초, 오랜만에 새로운 프로젝트를 시작했습니다. 바로 채팅플랫폼을 만드는 프로젝트였는데요, 말 그대로 채팅이 가능한 하나의 Platform…

V 컬러링에서는 jwt 인증 방식을 사용하고 있습니다. 최초에 사용자가 로그인을 하면 서버로부터 과 을 발급받고, 그 값을 어딘가에 저장해 두고 있다가 토큰 값이 만료되면 저장된 을 이용해 다시 유효한 토큰을 발급받는 방식입니다. 기존의 V…

본 포스팅에서는 로그인 여부에 따라 각자 다른 페이지를 리턴하고, 세션을 관리하는 방법에 대해 작성해 보도록 하겠습니다. 현재 V 컬러링에서는 JWT…

Next.js 프로젝트 수행 시 함께 진행하는 중요 과제로 기존의 Redux를 걷어내고 모든 fetch data를 React Query…

본 포스팅에서는 비디오 상세 화면 라우터 처리 부분과, 실제 비디오 화면의 구조를 어떻게 개선하였는지를 중점적으로 다룰 예정입니다. 포스팅 내용을 미리 요약하면 다음과 같습니다. Architecture 구현에 대한 고민 rendering…

V 컬러링은 2020년에 처음 만들어진 SPA(Single Application Application) 형태의 모바일 웹입니다. 여러 번의 성능 최적화 작업을 통해 Client side rendering…

현재 수행 중인 프로젝트(React)에 테스트 코드를 도입하기 위해서 공부하고 있습니다. react-testing-library라는, 이름에서도 유추할 수 있듯이 react…

회사에서 기술 블로그를 만든다는 소식을 듣고 데모 사이트를 한 번 만들어 보기로 하였습니다. 가독성이 좋고 코드 블록 사용이 가능해야 하며, 심플하면서도 효율적으로 (적은 비용으로 빠르게) 만들어야 한다는 요구사항에 따라 리서치를 해본 결과, DB…

개발자라면 누구나 포트폴리오 하나쯤은 있어야죠! 아직 이직 생각은 없지만 저도 포트폴리오를 한 번 만들어 볼까 하고 검색을 하다가 aws amplify라는 것을 알게 되었습니다. aws amplify…

대부분의 동영상 어플리케이션에서 구현되어 있는 것처럼, V 컬러링에서도 동영상 렌더링 시 재생 전 회색 (또는 하얀) 화면의 노출을 방지하고자 배경에 미리 썸네일을 깔아 두는 구현 방식을 사용하고 있습니다. 그런데 작년 7월 iOS가 1…

V 컬러링은 플레이어에서 안드로이드와 iOS의 비디오 렌더링 방식이 다르게 구현되어 있습니다. 초기 구현 시에는 OS…

Google I/O 세미나가 온라인으로 개최되면서 보다 편리하게 원하는 강좌를 들을 수 있었습니다. 많은 주제가 있었지만, 그 중 가장 구미가 당기는 ‘Google…

이전 포스트에서도 언급했듯이 현재 V 컬러링의 API는 조회성임에도 불구하고 POST 메소드가 대부분입니다. 가볍게 도입할 수 있는 SWR도 매력적이지만 React Query…

기존의 Redux는 React 개발자라면 반드시 사용해야 할 세트 같은 개념의 라이브러리였습니다. 데이터의 상태는 크게 각 컴포넌트에서 독립적으로 사용되는 로컬 상태와 전체 어플리케이션에서 공통으로 사용되는 글로벌 상태로 나눌 수 있는데요, Redux…