minnote29 님의 블로그

♾️무한스크롤 + 스켈레톤 UI

무한 스크롤 - 예시로, 유튜브를 보면 밑으로 스크롤 할 때마다 영상 리스트에 추가적으로 데이터가 요청되는 것을 볼 수 있는데 이런 식으로 계속 밑으로 내리면 계속 추가된다. 이런 걸 무한 스크롤이라고 할 수 있고, 아래처럼 회색으로 뜨는 UI가 바로 스켈레톤 UI이다. 이는 데이터를 받아 오길 기다리는 것을 시각적으로 나타낸 것. 무한 스크롤은 자바스크립트에서 내장으로 제공해 주는 Observer API 이런 것들을 활용해서 직접 동작을 감지해서 만들 수 있지만, 이런 식으로 구현하면 어렵기 때문에, tanstack-query에서 제공해주는 useInfiniteQuery라는 것을 사용할 것이다. 앞선 부분에서 lp 목록 조회 api를 사용했다. 완전히 새로고침하고 보면 처음에는 limit이 10으로 들..

코루틴이란?코루틴은 자신이 실행된 스레드를 정지시키지 않으면서 비동기적으로 실행되는 비동기적인 코드 블록이다. 코루틴은 복잡한 멀티태스킹을 구현하거나 직접 다중 스레드를 관리하는 것에 대한 걱정없이 구현할 수 있다. 그 구현 방법으로 인해, 코루틴은 전통적인 다중 스레딩 옵션을 이용하는 것보다 훨씬 효율적이며 리소스도 덜 사용한다. 코루틴을 사용하면 스레드와 관련된 이벤트와 결과를 다루기 위한 콜백 없이 순차적으로 코드를 작성할 수 있어 이해 및 유지보수하기가 훨씬 쉽다. 스레드와 코루틴스레드는 cpu 사용과 시스템 오버헤드라는 관점에서 볼 때 유한한 리소스라는 점이 문제다. 내부적으로 스레드 생성, 스케줄링, 파기를 위해 많은 작업이 진행된다. 현대적인 cpu들이 수많은 스레드를 실행할 수 있지만, ..

리액트 쿼리라고도 불리는 Tanstack-Query, v5 버전인데, v4일 때는 명칭이 react-query 였고, v5가 정식 버전이 된 것은 그렇게 오래되지 않았다. 왜 필요할까?화면이 전환되었을 때, 최신 데이터를 보여주고 싶은데 그때 refetch하는 기능이 있어야 하는데 이는 리액트로도 구현은 할 수 있지만, 이런 것들을 조금 더 쉽게 해준다고 보면 된다. 한 마디로, 서버의 상태 관리를 조금 더 쉽게 단순화 시켜주는 도구라고 보면 될 것이다. 주요 기능 - 자동 캐싱, 백그라운드 업데이트, 캐싱 등이 있다. 기존에는 데이터가 같은 페이지를 가져오면 이전과 같다. 그리고 수정하지 않는 이상 두 번 요청할 필요는 없다. 이전에 받아온 데이터를 첫번째는 당연히 요청을 해야한다. -> 캐싱을 해..

로그인 파트 하면 빠질 수 없는 존재 -> 소셜 로그인. 구글, 카카오, 네이버 등로그인을 할 때의 제약들이 있기에 OAuth 로그인은 클라이언트 개발자라면 무조건 할 줄 알아야 한다. (흐름이라도.)키값들은 워크북에 나와있는 부분이고 중요한 부분이라 생략하도록 한다. 이는 절대로 임의로 수정하면 안 되는 것이고 수정해야 하는 것은 그 뒤에 value 값만 본인의 키값, 구글 클라우드나 이쪽 API 및 서비스에 들어가면 발급받을 수 있는데 그 부분도 워크북을 참고해서 따라해보면 된다. 로컬 호스트는 8000이고 클라이언트 코드도 로컬 호스트 5173번 포트를 열리게 설정을 해줘야 잘 작동을 한다. 작동과정클라이언트 입장에서 구글 로그인으로 버튼을 누른다. -> 그럼 백엔드에 /v1/auth/google..

리프레쉬가 왜 일어나는지가 엄청 중요하다. 엑세스 토큰은 정확히 어떤 역할을 하는지 간략하게 표현해보면, 엑세스 토큰 같은 경우 서버에서 정말 나 자신이다! 라고 증명을 할 때 쓰는 일련의 짧은 비밀번호라고 말을 할 수 있다. 이 토큰은 만료 시간을 따로 설정을 해주는 식으로 처리한다. 엑세스 토큰은 남들이 그 토큰의 value 값, 로컬 스토리지에 저장된 그 값만 알면 남인 척하고 쓸 수가 있다. -> 토큰이 탈취 당하면 누구나 이 사람인 척하고 쓸 수 있다. 다른 유저인데도 불구하고 가능하기 때문에 탈취가 되서는 안 된다.그렇기 때문에 엑세스 토큰 같은 경우는 비교적 짧게 설정을 한다. 이렇게 악용되지 않게 하기 위해서 보통 쿠키 방식 등을 선호하긴 한다.지금 여기서의 로그인 방식은 엑세스 토큰이랑..

ProtectedRoute가 뭘까?이는 스웨거 문서를 한번 보면, 자물쇠 걸린 부분이 authorization(bearer 토큰을 넣어줘야 하는~)내 정보를 조회했을 때 여기가 만약 토큰 값이 없으면 내가 누군지 알 수 없다. 로그인하면 토큰들이 담겨올 텐데 401 에러가 뜰 것이다. 로그인을 다시 진행하고 토큰은 만료되면 재생성해야 함. 암튼 로그인을 진행하면 새로운 엑세스 토큰이 나올 것이고, 그걸 bearer에 넣어주면 된다. 그럼 Protected Route가 뭐냐?? 예를 들면, 마이페이지를 보자. 마이페이지에서 쓰는 Api를 보면 users/me 토큰이 필요한 페이지인데 내가 로그인도 안 됐는데 /my로 바로 들어가서 데이터를 받아보려고 하면 맞는지 의문이 들 것이다. 즉, 토큰이 없는데 토큰..