민프

이번 포스팅에서는 비동기 작업을 중간에 취소하는 방법 중 하나인 CancelableOperation을 소개하려고 합니다. 특히 BLoC(Cubit) 패턴에서 비동기 작업이 중첩되거나 화면 전환 시 작업이 취소되지 않아 발생하는 문제를 해결할 수 있는 좋은 방법입니다.문제상황Exception has occurred. StateError (Bad state: Cannot emit new states after calling close) 최근에 HomeCubit에서 게시글 목록을 불러오는 작업을 하던 중, 화면을 빠르게 이동하거나 여러 번 loadPosts()를 호출하면 이전 요청이 취소되지 않고 계속 실행되는 문제를 발견했습니다. 이 문제를 해결하기 위해 Flutter의 async 패키지에서 제공하는 Can..

https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter?hl=ko&authuser=2#2 Flutter 앱에 AdMob 광고 추가  |  Google Codelabs이 Codelab에서는 Flutter 앱에 배너 광고, 전면 광고, 보상형 광고를 추가하는 방법을 알아봅니다.codelabs.developers.google.comhttps://docs.flutter.dev/cookbook/plugins/google-mobile-ads Add ads to your mobile Flutter app or gameHow to use the google_mobile_ads package to show ads in Flutter.docs.flutte..

Flutter Version을 3.24.0으로 올리고 Build를 하려고 하는데 아래와 같은 에러가 나왔다* What went wrong:Execution failed for task ':sign_in_with_apple:verifyReleaseResources'.> A failure occurred while executing com.android.build.gradle.tasks.VerifyLibraryResourcesTask$Action > Android resource linking failed ERROR:/Users/msoh/development/pushApp/push_now_app/build/sign_in_with_apple/intermediates/merged_res/release..

https://sudarlife.tistory.com/entry/Flutter-%ED%94%8C%EB%9F%AC%ED%84%B0-%EC%82%BD%EC%A7%88%EC%9D%80-%EA%B7%B8%EB%A7%8C-Firebase-Messaging-iOS-%EC%85%8B%EC%97%85 [Flutter / 플러터 ] 삽질은 그만, Firebase Messaging iOS 셋업안녕하세요 개발하는남자 개남입니다. 오늘은 지난 포스팅에 이어서 iOS Firebase messaging에 대한 설정에 대한 포스팅입니다. 지난 FCM 안드로이스 설정에 대한 포스팅은 다음과 같습니다. 또한 사용sudarlife.tistory.com

자세한 코드는 아래를 참고해주세요https://pub.dev/packages/firebase_messaging/example firebase_messaging example | Flutter packageFlutter plugin for Firebase Cloud Messaging, a cross-platform messaging solution that lets you reliably deliver messages on Android and iOS.pub.devpubspec.yaml # FCM firebase_messaging: ^15.1.0 # 포그라운드에서도 알림 나올 수 있게 해주는 패키지 flutter_local_notifications: ^17.2.2 # 퍼미션 핸들러 permiss..

이 오류는 next/router를 서버에서 사용하는 경우 발생합니다. next/router는 클라이언트 사이드에서만 동작하도록 설계되어 있기 때문에, 이 문제를 해결하기 위해 다음과 같이 코드를 수정해야 합니다.useEffect를 사용하여 router를 클라이언트 사이드에서만 사용할 수 있도록 해야 합니다. 또는, next/navigation의 useRouter를 사용하는 것이 더 좋습니다. // 이전 코드---------------------------------------import router from 'next/router';...export default function ConsentDialog({ onClose }: { onClose: () => void }) { . . . ..

Dynamic(동적) routes는 아래와 같은 형식으로 되어있습니다.Movie로 예를 들자면, 아래와 같이 사용자가 입력한 숫자가 들어가거나 해당하는 상세페이지의 id를 넣을 수 있습니다/movies/:id -> React Router일 떄 이렇게 사용한 부분이죠/movies/121212 NextJS에서는 app Router를 사용하기에 아래와 같이 파일시스템으로 대괄호[]를 넣어서 처리하게 됩니다이렇게 위 와 같은 링크로 했을때 정상 동작하는 것을 확인하실 수 있습니다. 그럼 여기에서 URL에 있는 id 파라미터 값을 가져오는 것을 어떻게 할 수 있을까요?아래 사진과 같이 Props를 log로 찍어서 백엔드에서 나오는 로그를 확인해본 결과 props로 id값을 잘 가져오는 것을 확인할 수 있었습니다p..

Routes 그룹화Next에서는 URL을 디렉토리 구조로 나타낸다고 하는데 그러면 페이지를 그룹시킬때는 어떻게 해야할까요?예를 들어서 영화 페이지, 영화 세부 정보 페이지, 영화 배우, 영화 검색 페이지 등등.. 공통 주제의 페이지들은 어떻게 그룹화를 시켜야할까요?  아래 사진과 같이 ('그룹 이름') 이렇게 해놓으면 Routes를 그룹화 해서 Logical Groups으로 만들 수 있습니다여기에서 Layout.tsx, not-found는 기본적으로 모든 Routes에 공유되기에 app 디렉토리에 속해있어야 합니다! MetadataNext.js에서 metadata는 웹 페이지의 메타데이터를 정의하는 객체입니다. 메타데이터는 웹 페이지에 대한 정보를 포함하며, 주로 검색 엔진 최적화(SEO), 소셜 미디어..

LayoutNext.js에서 Layout은 여러 페이지에서 공통으로 사용하는 UI 컴포넌트를 의미합니다. 예를 들어, 여러 페이지에서 동일하게 유지되는 네비게이션 바, 푸터, 사이드바 등이 Layout으로 구현될 수 있습니다. 이를 통해 코드의 중복을 피하고, 일관된 사용자 경험을 제공할 수 있습니다.위 사진 처럼 layout을 정의한다면/about-us의 하위 URL 페이지들은 /about-us의 layout에서 정의된 UI는 공통적으로 나타내질 것 입니다Root Layout애플리케이션의 모든 페이지에 공통으로 적용되는 레이아웃입니다. 예를 들어, 글로벌 네비게이션 바, 사이트의 메인 푸터 등 전역적으로 사용되는 UI 요소들을 포함합니다. Root Layout은 Next.js 애플리케이션의 구조를 설정..

'use client'는 Client에서만 render한다는 의미가 아니다'user client' 명령어가 있든 없든 모든 Component(Client Component, Server Component)는 Backend에서 먼저 pre-render가 되는데 그건 전부 interactive하지 않는 HTML로 변환되게 된다.여기에서 'use client'를 사용하게 되면 어떤 Component가 hydreate 되는지, 즉 어떤 것이 Interactive를 필요로 하는지, 더 쉽게 말해 어떤 것이 JavaScript가 필요한지, 어떤 것이 불필요한지 등을 결정하는데에 사용하게 된다. 정리해보자면 1. 모든 것이 첫번째로 Server Side에서 Pre-Render가 되어서 HTML로 변환된다.2. HTM..