프로젝트/You-Together (6) 썸네일형 리스트형 next.js에서 Open Graph 적용하기 Open Graph란?- Open Graph (OG)는 Facebook에서 만든 메타데이터 프로토콜로, 웹페이지가 소셜 미디어 플랫폼에서 공유될 때 어떤 정보를 표시할지 제어할 수 있게 해준다.- 쉽게 말해서 위 이미지와 같이 소셜 미디어 플랫폼에 공유할 때 표시될 제목, 설명, 이미지 등을 오픈그래프를 통해 정의할 수 있다.문제정의- you-together는 친구와 youtube 영상을 함께 볼 수 있는 서비스로 별도 로그인 절차 없이 언제든지 간편하게 사용 가능하도록 만들었다.- 따라서, 링크를 통해 방에 접근하는 경우가 많을 수 밖에 없는데, 기존 SEO(Search Engine Optimizaion, 검색 엔진 최적화)를 위해 metadata를 추가 및 객관적 지표인 크롬 lighthouse에서 .. Hydration API를 사용한 데이터 프리패칭을 통한 초기 로딩 속도 개선 문제 정의- YouTogether는 누구나 손쉽게 친구와 Youtube 영상을 함께 보는 서비스로, 별도의 로그인 없이 사용이 가능하다.- 따라서, YouTogether 프로젝트의 메인 페이지는 전체 방 목록을 확인할 수 있는 사용자 진입점 역할을 한다.- 하지만 기존 메인 페이지에서 방 목록을 불러오는 API 호출과 응답에 대한 로딩이 길어 아래 영상과 같이 로딩 스피너가 꽤 오랜시간 표시되고 이를 수정하고 싶었다.새로고침을 눌렀을 때 모습해결 방안- 나는 초기 로딩 속도 개선을 위해 서버에서 데이터 프리패칭(prefetching) 하기로 했다. - 내가 고려했던 사항은 다음과 같다.1. 방 목록은 사용자에게 무한 스크롤을 이용해 콘텐츠를 보여주고 있기 때문에, 서버에서 방 목록의 첫 페이지의 데이터를.. You-Together 회고 팀프로젝트 You-Together 📼이번에 진행한 프로젝트는 사용자들이 함께 Youtube 영상을 보며 실시간으로 채팅을 하는 서비스를 제공한다. 예상보다 난이도가 있었고 중간중간 어려움이 많았던 프로젝트를 마치고 회고를 해보려고 한다.프로젝트 시작이번 프로젝트는 코드스쿼드 프론트엔드 동료의 권유로 시작했다. 그 친구는 프론트엔드의 개발 환경 설정을 완료한 상태에서 개인사정으로 프로젝트를 하차하게 되었고 나에게 프로젝트 합류를 권유하였다. 처음에는 프론트엔드 개발과 UI 디자인 등을 혼자 담당해야 하는 점에서 조금 부담을 느꼈지만, 이전에 진행했던 프로젝트 중에서 기간 등의 이유로 채팅 기능을 구현하지 못한 아쉬움을 가지고 있던 나에게 이번 프로젝트는 재미와 도전 두 가지의 목표를 이룰 수 있다는 점에.. 실시간 동기화를 위한 웹 소켓 사용: 영상 싱크 및 채팅 구현 - 이번 You-Together 프로젝트는 사용자들이 함께 Youtube 동영상의 동일한 부분을 실시간으로 시청하고 동시에 채팅을 할 수 있는 서비스이다.- 즉, 같은 방에 있는 사용자들은 실시간으로 서버에 저장된 동영상의 동일한 부분을 시청하고 동시에 채팅을 할 수 있다.- 이전 코드스쿼드 마지막 프로젝트에서 채팅 기능을 구현해보지 못하고 프로젝트가 종료가 되었고 이에 대한 아쉬움이 많이 남아있었기 때문에, 실시간 서비스는 내가 이 프로젝트를 선택한 가장 큰 이유였다.- 데이터의 실시간 동기화를 위해서 기존의 API 요청 방식인 HTTP를 사용하는 것이 아닌 웹소켓을 사용하여 프로젝트를 구현하였고, 내가 구현한 방법과 왜 웹소켓을 선택했는지에 대해서 설명해보겠다.웹 소켓이란?- 웹 소켓(WebSocke.. react-query 에러 중앙화 처리 - 이전부터 프로젝트를 진행하면서 에러 처리를 일관적이고 효율적으로 처리하는 방법에 대해서 고민을 많이 했고 이번 프로젝트에서는 개선된 내용을 적용해보고자 했다.- 특히 이번 프로젝트에서는 모든 API를 호출하는 커스텀 훅을 react-query를 사용하여 만들고, 각 훅에서 API 호출 시마다 개별적으로 에러를 처리하는 것이 비효율적이라고 생각했다.- 또한, react-query의 최신 버전인 5부터는 useQuery의 onError 콜백이 제거되었기 때문에, useQuery를 사용하는 컴포넌트 내에서 에러 처리를 해야 했기 때문에 에러 처리를 중앙화하는 방법이 훨씬 효율적이라고 판단했다. 문제정의- 먼저 중앙화 처리 이전에 각 훅에서 API를 호출할 때마다 개별적으로 error를 처리하는 로직을 살펴.. SEO 처리하기 SEO(Search Engine Optimization, 검색 엔진 최적화)란?- 검색 엔진은 웹사이트에서 사용자가 검색한 키워드와 관련된 가장 적절한 결과를 제공하기 위해 웹 사이트의 컨텐츠와 구조를 분석하- 검색 엔진 최적화는 웹에 올리는 컨텐츠가 구글, 네이버와 같은 웹사이트의 검색 엔진에서 검색 결과에서 상위에 노출되도록 최적화하는 과정을 말한다. 문제정의- You-Together 프로젝트의 기능을 구현하고 크롬 개발자 탭의 Lighthouse를 통해 웹 페이지의 성능을 측정해본 결과, SEO 항목에서 72점이라는 낮은 점수가 기록된 것을 확인했다.- 기존에 CSR을 사용하는 React만을 사용했던 프로젝트에서는 SEO에 대해 단점을 가질 수 밖에 없다고 생각했지만, 이번 프로젝트는 nextjs.. 이전 1 다음
