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로 바로 들어가서 데이터를 받아보려고 하면 맞는지 의문이 들 것이다. 즉, 토큰이 없는데 토큰..

사용자 인터페이스 디자인이란 주로 적절한 인터페이스 컴포넌트를 선택하고, 그 뷰들을 화면에 어떻게 배치할지 결정하고, 앱의 다양한 화면 간 이동을 구현하는 것인데 컴포즈는 앱을 개발할 때 이용할 수 있는 사용자 인터페이스를 구조화하고, 화면 방향이나 크기 변경 같은 요소들에 대한 레이아웃의 반응 방법을 정의할 수 있다. 🍎 RowColDemo 프로젝트이 예시에서는 커스텀 컴포넌트인 TextCell의 인스턴스를 이용해 행/열 기반 레이아웃을 구현한 것이다. TextCell 컴포넌트는 검은 테두리 안에 텍스트를 표시하며, 약간의 패딩을 이용해 컴포넌트 사이의 간격을 조정한다. Row 컴포저블은 이름 그대로 자식 컴포넌트를 화면의 수평 방향으로 배열한다. Column 컴포저블은 Row 컴포저블과 동일한 ..

더보기🍎 리액트 네이티브 공식문서 참고.리액트 네이티브를 사용하면 리액트를 아는 개발자도 네이티브 앱을 만들 수 있다. 프레임워크 없이 리액트 네이티브를 사용할 수도 있지만, 대부분의 개발자는 expo와 같은 리액트 네이티브 프레임워크를 사용하는 것이 유리하다는 것을 알 수 있다. expo는 파일 기반 라우팅, 고품질 범용 라이브러리, 그리고 네이티브 파일을 관리하지 않고도 네이티브 코드를 수정하는 플러그인을 작성할 수 있는 기능 등의 기능을 제공한다.React Native는 프레임워크 없이도 사용할 수 있다. 하지만 새로운 앱을 React Native로 개발하려는 경우, 프레임워크를 사용하는 것을 추천한다고 한다. 간단히 말해, 프레임워크를 사용하면 앱 자체를 개발하는 데 집중할 수 있으며, 앱과 별..

🍎 코틀린코틀린(kotlin)은 IntelliJ, PyCharm 등 다양한 IDE를 선보인 것으로 유명한 JetBrains 사에서 오픈소스 그룹을 만들어 개발한 프로그래밍 언어이다.기존에는 안드로이드 앱을 자바로 개발했지만, 코틀린의 등장으로 점점 대체 되어 가는 추세다.2017년 구글에서 안드로이드 공식 언어로 지정되었고,2021년 신규 앱 개발시 코틀린으로 개발할 것을 권장되고 있다.코틀린은 어떻게 Java를 대체할 수 있었을까? 바로 JVM 기반 언어라는 특성 때문이다. JVM 기반 언어를 다르게 얘기해보자면, 어떠한 언어도 자바 바이트 코드(.class)로 컴파일할 수 있다면 동작할 수 있는 것이다. jvm - 자바 프로그램을 실행하기 위한 실행 환경을 만들어 주는 소프트웨어다.이러한 JVM은 ..

이번 회원가입 폼은 저번에 한 공용 훅 useForm을 잘 만들어 놨지만, 리액트 훅 폼 같은 것을 활용해서 처리할 것이다. (라이브러리) 그리고 타입 안전성을 더 고려할 수 있게 처리하도록 할 것이다. 타입스크립트 계열에서 유효성 검사할 때 많이 쓰는 zod라는 라이브러리를 쓸 것이다. yup도 있지만, zod를 써볼 것이다. 토큰 불러오는 과정도 처리해줄 것이다.$ pnpm i react-hook-form$ pnpm i @hookform/resolvers $ pnpm i zod설치를 해주고, 스키마 파일을 만들어준다. signup page 에 정의해도 좋을 것 같아서 내부에 스키마를 정의해준다. 스키마는 zod에서 가져오는 것.그 다음, useForm을 제공을 해주는데, 이 useForm은 저번에 ..