minnote29 님의 블로그

📱플로플로는 코틀린 프로그래밍 언어의 일부로, 코루틴 기반의 비동기 태스크들로부터 순차적으로 여러 값을 반환할 수 있도록 설계되었다. 플로는 생산자, 중재자, 소비자로 구성되고,생산자는 데이터를 제공하며, 이 데이터가 플로를 구성한다.소비자는 플로 스트림의 반대편 끝에 위치하며 생산자가 방출한 데이터를 수집한다. 중재자는 생산자와 소비자 사이에 위치하며, 데이터가 소비자에게 도착하기 전에 스트림을 필터링 하거나 다른 방식으로 변환하는 등 데이터에 추가적인 처리를 수행한다. -> FlowDemo 프로젝트 구현하기하나 이상의 중재자 플로 연산자를 사용해 생산자와 소비자 사이에서 데이터를 변경할 수 있다. map() 연산자는 값을 다른 값으로 변환하고, 수집된 값마다 변환을 수행한다.filter() 연산자를..

🌐 최적화를 어떻게 하나일단, TMDB를 이용해서 간단한 영화 사이트를 만들 것이다. 검색 필터링영화 무비tmdb 내에 search에서 무비 들어가면 include_adult (성인), language(언어), 개봉일, 페이지원래 검색어 같은 경우는 쿼리를 활용해보는 것도 좋다. 이런 tmdb에서 api를 불러오기 위해서 api 파일을 만들어준다. (axios 활용을 위해서 다운로드 해준다.)$ pnpm add axios import axios from "axios";export const axiosClient = axios.create({ baseURL: "https://api.themoviedb.org/3", headers: { Authorization: `Bearer ${..

리덕스 툴킷을 활용해서 만든 장바구니를 zustand로 만들 것이다. 리덕스 툴킷을 타입 세이프티하게 Cart Slice를 만들어서 장바구니 즉, 음반 바구니를 만들어 봤었다. 리덕스 툴킷 같은 경우는 리덕스만 활용했을 때보다는 개념 자체가 훨씬 간단하고 자체적으로 immer라는 내장 라이브러리가 들어가 있어서 불변성을 굳이 매핑 한다거나 따로 처리를 해줘야 할 필요가 없었다. (스프레드 연산자를 활요해서 이전 상태를 항상 유지해주는 불변성을 유지하는 작업 불필요.) 그래도 보일러 플레이트가 있다. 보일러 플레이트 예를 들어 중앙 저장소, 액션에 대한 타입들도 훅으로 따로 추출, slice 등을 만들었는데 더욱 큰 프로젝트를 하면 더욱 복잡해질 것이다. 그렇기 때문에 zustand로 처리를 해볼 것이다..

Zustand 라이브러리에 대해서 활용을 해볼 것이다. 리덕스 툴킷을 활용해서 쇼핑카트를 UI부터 끝까지 만들어 봤다. 보일러 플레이트나 라이브러리가 좀 가벼운 zustand를 많이 활용해보는 것이 좋다.zustand는 전역 상태관리에서 많이 사용하는 라이브러리이다. 프로젝트 생성pnpm create vite zustand 다운로드 pnpm i zustand zustand로 관리import './App.css';import Counter from './components/Counter';import RandomNumberGenerator from './components/RandomNumberGenerator';function App() { return ( )}e..

기존에 context API를 활용하면서 코드가 복잡해지고 비교적 간단한 데이터를 공유해야 하고, 빈번하게 렌더링이 발생한다거나 자체적으로 지원해주는 미들웨어 기능 같은 것이 없다. 리듀서를 활용했을 때 어떤 것이 문제이고 이 문제를 해결하기 위해서 리덕스 툴킷이 왜 도입되었는지 집중해서 활용해보는 것이 좋다. 기존에 만든 영화 서비스와는 다르게 장바구니 서비스를 만들 것이다. 서버 api는 존재 x.리덕스 툴킷을 활용하면 비동기 처리 미들 웨어 등을 활용해서 처리할 수 있다. 리덕스 툴깃으로 장바구니 서비스 만들기$ pnpm create vite$ pnpm i 장바구니 서비스 관련 프로젝트를 생성한다. (+ 의존성 설치) tailwindcss도 설치$ pnpm install tailwindcss @..

useState와 다른 게 무엇이 있는지 확인하기 위해서 useReducerPage를 만들어 볼 것이다.import { useState } from "react";export default function UseReducerPage() { const [count, setCount] = useState(0); const handleIncrease = () => { setCount(count + 1); }; return ( {count} Increase );} 이 코드를 비교하면서 차이점을 보려고 한다. 일단, useState와 useReducer 둘 다 상태를 관리하고 업데이트를 시키는 훅이기는 하다..

🎨 내비게이션 모든 앱에는 홈 화면이 있으며, 홈 화면은 앱이 실행된 직후 스플래시 화면이 표시된 뒤 나타난다. 홈 화면에서 사용자는 일반적으로 태스크를 수행하고, 그 결과로 다른 화면이 나타난다. 이 화면들은 보통 프로젝트 안에서 다른 컴포저블의 형태를 갖는다. 아래 내비게이션 그래프를 보자.홈 화면을 포함해 앱을 구성하는 각 화면은 목적지라 불리며, 일반적으로 하나의 컴포저블 또는 액티비티이다. 안드로이드 내비게이션 아키텍처에서는 내비게이션 백 스택을 이용해 앱 안에서 목적지에 이르는 사용자의 경로를 추적한다. 앱이 처음 실행되는 홈 화면이 현재 목적지가 되고, 사용자가 다른 목적지로 이동하면 해당 화면이 현재 목적지가 되고, 홈 목적지 위의 백 스택에 쌓인다. (사용자가 이동할 때마다) 목적지 사..

🍎 안드로이드 젯팩이란안드로이드 스튜디오 안드로이드 아키텍처 컴포넌트, 안드로이드 지원 라이브러리, 컴포즈 프레임워크와 안드로이드 앱 구조화 권고안을 통합한 일련의 가이드라인이다. 컴포넌트 중 많은 부분은 컴포즈에 내장된 기능으로 대체되었지만, Viewmodel 아키텍처 컴포넌트는 별도로 남아 있다. 구식 아키텍처 - 젯팩이 도입되기 전에는 대부분의 일반적인 아키텍처들이 하나의 액티비티가 사용자 인터페이스와 앱의 백엔드 로직을 함께 표현하고 관리하는 모든 코드를 포함하고 있었다. 모던 안드로이드 아키텍처 - 가이드라인들이 앱의 다양한 책임 부분을 완전히 별도의 모듈로 나누는 것을 권장한다. 이 접근 방식의 핵심 중 하나가 바로 ViewModel 컴포넌트다. ViewModel 컴포넌트의 목적은 사용자 인..

최적화 기법을 활용해서 검색하기를 구현하려는데, 일단은 기존에 구현했던 검색하기 컴포넌트를 이용해서 최적화를 해볼 것이다. 기존 웹 사이트에서 문제점은 로컬 서버라서 직접 DB에 연결을 해서 관리하는 형태라 실질적으로 큰 무리가 없는데 항상 개발할 때 pr을 날리게 되는데 예를 들어, 이런 검색과 관련된 기능이 있다면 코드에 대해서 여러 방향으로 개선을 할 필요가 있다. 어떤 pr을 해야 하냐면 네트워크 요청이 얼마나 가는지에 대해서 고려해야 한다. 기존 검색창에서는 입력을 할 때마다 네트워크 요청이 일어나고 있는 것을 알 수 있는데 만약에 이용자 수가 많아지면 그 데이터베이스에 무리가 많이 될 것이다. 물론 서버에서도 캐싱 같은 것들을 활용하기는 하지만, 이런 부분을 프론트 측면에서도 최대한 막아줘야 ..

Mutation에서 제일 많이 거론되는 최적화 작업 중 하나가 Optimistic Update라는 것이다. API 호출과 같은 비동기 작업이 완료되기 전에 사용자 인터페이스(UI)를 먼저 업데이트하여, 사용자가 즉각적인 반응을 느낄 수 있도록 사용자 경험(UX)을 향상시키는 기법이다.이전에 만든 웹사이트 같은 경우는 좋아요를 누르면 바로 반영이 되고 좋아요 취소를 눌러도 바로 반영이 됐다. 근데 이것은 네트워크가 빠르기 때문에 즉각적으로 업데이트 되는 것으로 느껴질 수 있는데 속도가 느릴 경우 명확하게 알 수 있다. 한마디로, 좋아요 버튼을 눌러도 버튼이 반영이 되려면 일단은 DB에 먼저 데이터가 들어가고 그 다음 상세 페이지를 invalid queries라는 기능을 통해서 다시 쿼리키를 기준으로 업데이..