프로젝트 (18) 썸네일형 리스트형 Axios intercepter를 활용하여 액세스 & 리프레시 토큰 자동 갱신 구현하기 - do-with 프로젝트에서 로그인 및 사용자 인증을 위해 정리한 내용은 다음과 같다. 1. 사용자는 카카오와 구글 OAuth를 통해 로그인을 할 수 있고, 서버에서 발급한 access token과 refresh token을 받는다.2. API 요청 header에는 access token을 담아보내고 서버에서는 API 요청 header에 있는 access token을 해독하여 사용자를 인증하고 응답을 보내준다.3. access token은 보안을 위해서 유효기간이 존재하고, access token이 만료되는 경우에는 refresh token을 사용하여 token을 갱신할 수 있다.4. refresh token 또한 유효기간이 지난 경우에는 사용자는 다시 로그인을 한다. - 이전 프로젝트에서는 acces.. 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.. [기능 구현] requestAnimationFrame을 활용한 애니메이션 목표 - 뉴스스탠드 프로젝트에서 화면 상단의 뉴스 헤드라인이 5초마다 무한으로 롤링되는 애니메이션의 구현이 필요했다. - 즉, A, B, C, D, E라는 뉴스 헤드라인이 있을 때, 사용자에게 보여지는 헤드라인은 1개이며 처음에는 A가 보이고 5초가 있으면 B가 보이며 E 다음에는 다시 A가 보여야 한다. - 무한으로 E 다음에 다시 A가 나타나는 로직 또한 고민이 필요한 부분이었지만, 이번 글에서는 5초마다 다음 뉴스의 헤드라인이 애니메이션과 함께 나타나는 기능에 대한 내용을 다뤄보려고 한다. 문제정의 - JavaScript를 공부하면 일정 시간마다 반복되는 기능을 사용할 때 가장 먼저 setInterval() 메서드를 생각할 수 있고 나 역시 setInterval() 메서드를 사용하여 5초마다 헤드라.. 데이터 크롤링 및 json-server 활용 데이터 크롤링 - 뉴스스탠드 프로젝트는 네이버의 뉴스스탠드를 클론 코딩하는 프로젝트였다. - 처음 기획서를 보고 네이버의 뉴스 데이터를 어떻게 가져올 수 있을까 대한 고민이 생겼고, 동료의 도움으로 데이터 크롤링에 대해서 학습하고 사용했다. - 데이터 크롤링은 웹상의 정보들을 탐색하고 수집하는 작업을 의미하며 주로 규칙에 따라 자동으로 웹 문서를 탐색하는 컴퓨터 프로그램, 웹 크롤러(Crawler)를 사용한다. - 나는 네이버 PC 메인 화면에서 개발자 도구에서 DOM 요소를 선택하여 정보를 수집하는 방법을 사용했고, 실제 프로젝트에서 사용한 크롤링 코드와 db.json의 모습은 다음과 같다. // 데이터 크롤링 코드 const result = []; // DOM 요소를 선택하여 정보를 수집 docume.. 이전 1 2 3 다음
