Firebase로 배포까지 가능한가용 .?

제가 궁금한건 다른 페이지에 있을 때에도 스냅샷 함수를 가동시켜 비용이 계속해서 발생하는 것을 막기위해 온스냅샷 함수를 unsubscribe, 구독취소하는 코드인데요어째서 제가 읽기에는 unsubscribe = ~ 온스냅샷함수 ~...return () => unsubscribe함수 실행useEffect cleanup기능으로 언마운트시 온스냅샷함수를 정지하려는데 다시 온스냅샷함수를 실행? 제가 어떻게 잘못 이해하는건지 모르겠어요 .. ㅠㅠexport default function Timeline() { const [tweets, setTweet] = useState<ITweet[]>([]); let unsubscribe: Unsubscribe | null = null; const fetchTweets = async () => { const tweetsQuery = query( collection(db, "tweets"), orderBy("createdAt", "desc"), limit(25) ); unsubscribe = await onSnapshot(tweetsQuery, (snapshot) => { const tweets = snapshot.docs.map((doc) => { const { tweet, createdAt, userId, username, photo } = doc.data(); return { tweet, createdAt, userId, username, photo, id: doc.id, }; }); setTweet(tweets); }); }; useEffect(() => { fetchTweets(); return () => { unsubscribe && unsubscribe(); }; }, []); }

와 같이 build.gradle에 작성을 했을 때 에러가 난다면dataBinding { enabled = true }이렇게 시도해보세요 :)라고 되어있는데 다음과 같이 수정하였으면 좋겠습니다.와 같이 build.gradle에 작성을 했을 때 에러가 난다면dataBinding { enable = true }이렇게 시도해보세요 :)(enabled = true -> enable = true로 수정을 해야 잘 작동하는 것으로 확인하였습니다 수정 부탁드립니다. 감사합니다 :) )

안녕하세요, ‘데이터 바인딩 설명’강의를 보고 따라하다가 MainActivity에 영상에 나온데로binding = DataBindingUtil.setContentView를 쳤는데 영상과 다르게 괄호가 두개 나와서요. 어떻게해야 할까요? 

확인차 문의 드려요. 새 프로젝트 할때 마다 강의 내용처럼 매번 설치 해야 되는거죠.npm install -g firebase-toolsdart pub global activate flutterfire_cli.. 

파이어베이스 회원가입 구현 부분에서 emailArea 와 passwordArea, passwordArea2 이 부분이 빨간색이며 Caused by: org.gradle.workers.internal.DefaultWorkerExecutor$WorkExecutionException: A failure occurred while executing com.android.build.gradle.internal.res.ParseLibraryResourcesTask$ParseResourcesRunnable이런 오류가 나요. ㅜㅜ 그리고 package com.juwon.mysolelife.auth import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.widget.Toast import androidx.databinding.DataBindingUtil import com.google.firebase.Firebase import com.google.firebase.auth.FirebaseAuth import com.google.firebase.auth.auth import com.juwon.mysolelife.R import com.juwon.mysolelife.databinding.ActivityIntroBinding class JoinActivity : AppCompatActivity() { private lateinit var auth: FirebaseAuth private lateinit var binding: ActivityIntroBinding override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = DataBindingUtil.setContentView(this, R.layout.activity_join) setContentView(R.layout.activity_join) binding.joinBtn.setOnClickListener { val email = binding.emailArea.text.toString() val password1 = binding.passwordArea.text.toString() val password2 = binding.passwordArea2.text.toString() if(email.isEmpty()) { Toast.makeText(this, "이메일을 입력 해 주세요", Toast.LENGTH_LONG).show() } } auth = Firebase.auth // auth.createUserWithEmailAndPassword(email, password) auth.createUserWithEmailAndPassword("sjw9179@kakao.com", "tlswndnjs1!") .addOnCompleteListener(this) { task -> if (task.isSuccessful) { Toast.makeText(this, "성공", Toast.LENGTH_LONG).show() } else { Toast.makeText(this, "실패", Toast.LENGTH_LONG).show() } } } }이런식으로 코드가 짜여있습니다.

강의 여러번 돌려보고 커뮤니티 질문에도 찾아보고 구글링도 해봤는데 어디서 뭐가 잘못된 건지도 모르겠어서 질문 올립니다! 대체 어디서 잘못 된 걸까요,,,queryClient.tsimport request, { RequestDocument } from "graphql-request"; import { useQuery, useMutation, useQueryClient, QueryClient, QueryClientProvider, } from "react-query"; // any 타입 미리 만들어줌 type AnyOBJ = { [key: string]: any }; // Create a client export const getClient = (() => { let client: QueryClient | null = null; return () => { if (!client) client = new QueryClient({ defaultOptions: { queries: { // 캐시타임 : 이 시간 안에는 다시 상세페이지 들어가도 요청 안 함 cacheTime: 1000 * 60 * 60 * 24, staleTime: 1000 * 60, refetchOnMount: false, refetchOnReconnect: false, refetchOnWindowFocus: false, }, }, }); return client; }; })(); // 기본 url const BASE_URL = "/"; // restFetcher async로 요청 export const restFetcher = async ({ method, path, body, params, }: { // 메소드 타입 정의 method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH"; // url대신 path를 받음 path: string; // post나 put의 경우엔 body가 필요하므로 body?: AnyOBJ; // 파라미터 params?: AnyOBJ; }) => { try { // 기본 url + path let url = `${BASE_URL}${path}`; // RequestInit은 node에 기본적으로 정의되어 있음 const fetchOptions: RequestInit = { method, headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": BASE_URL, }, }; // param이 오면 if (params) { const searchParams = new URLSearchParams(params); url += "?" + searchParams.toString(); } // body가 오면 if (body) fetchOptions.body = JSON.stringify(body); // url와 옵션들 요청 // 메서드와 path를 받아서 완성 const res = await fetch(url, fetchOptions); // 받은 것을 json으로 바꾸기 const json = await res.json(); return json; // 에러 출력 } catch (err) { console.error(err); } }; // graphqlFetcher export const graphqlFetcher = <T>(query: RequestDocument, variables = {}) => request<T>(BASE_URL, query, variables); // 쿼리 키 만들기 export const QueryKeys = { PRODUCTS: "PRODUCTS", CART: "CART", }; product/item.tsx 컴포넌트import { Link } from "react-router-dom"; import { Product } from "../../../graphql/products"; import { useMutation } from "react-query"; import { graphqlFetcher } from "../../../queryClient"; import { ADD_CART, Cart } from "../../../graphql/cart"; const ProductItem = ({ imageUrl, price, title, id }: Product) => { const { mutate: addCart } = useMutation(({ id }: { id: string }) => graphqlFetcher(ADD_CART, { id }) ); return ( <li className="products-item"> <Link to={`/products/${id}`}> <p className="products-item__title">{title}</p> <img className="products-item__image" src={imageUrl} /> <span className="products-item__price">${price}</span> </Link> <button className="product-item__add-cart" onClick={() => { addCart({ id }); }} > 장바구니 담기 </button> </li> ); }; export default ProductItem; 콘솔에 뜨는 오류나는 파일 올려드립니다..

파이어베이스 SDK 구정이 또 달라져서 보라고 주신 문서들에도 안 나와있습니다.

Failed to load resource: net::ERR_BLOCKED_BY_CLIENTclient-entry.js:144 [Quasar] boot error: TypeError: Failed to fetch dynamically imported module: http://localhost:9000/src/boot/firebase.js(anonymous) @ client-entry.js:144 quasar.config.js 에서 boot: ['firebase'] 설정시 위와 같은 console.error가 발생합니다!구글로그인 단계로 넘어가지 못하고 있는데, 방법을 모르겠어요 ㅠㅠ  

원래 기기에 따라 이미지가 찌그러져 나오는 경우도 있나요? 

저는 키보드 동작이 안돼는데요 원래 그런가요.에뮬레이터로 테스트 하는데 이상은 없지만 불편해서요.

댓글 불러오는 과정을 보고 있는데, 지금까지 각 모델(feed, comment) 전부 Firebase에서 전체 document 받아와서 list로 변환 후, update 하고나면 Firebase에 업로드하는데 그와 동시에 screen에 반영하기 위해 새로 get하여 list를 만들어서 표시해주는 것 같습니다. Firebase StreamBuilder를 사용하면 실시간으로 모든 변화들이 바로 업데이트 되어서 기존에 많이 썼는데, 혹시 이렇게 하지 않는 이유가 있을까요? (데이터 통신이 불필요하게 많이 일어나서 트래픽/요금 등의 문제가 있다든지 하는 현실적인 이유가 있는지 궁금했습니다)

저 앱실행시킬때 타이틀바를 없애는 부분을 보고있는데요. 저는 앱실행시키면 처음부터 타이틀 바가 안나오고 theme.xml도 영상과는 다르게 되어 있는데 그럼 굳이 안해도 상관 없는건가요?버전은 androidstudio hedgehog입니다.

(사진)

선생님이 알려주시는 대로 한번 코드를 작성하고,어떻게하면 조금 더 간편하고 읽기 쉬운 코드를 만들수있을까고민해 봤습니다. if문을 통한 것 보다 when절이 나을꺼같아 해봤는데 앱은 잘 작동하는데 이런식으로 써도 될지요~?? 남은 강의도 열심히 잘 들어볼께요! package com.example.twice import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.widget.ImageView class ImageInsideActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_image_inside) val getData = intent.getStringExtra("data") val memberImage = findViewById<ImageView>(R.id.memberImageArea) when(getData){ "1" -> memberImage.setImageResource(R.drawable.member_1) "2" -> memberImage.setImageResource(R.drawable.member_2) "3" -> memberImage.setImageResource(R.drawable.member_3) "4" -> memberImage.setImageResource(R.drawable.member_4) "5" -> memberImage.setImageResource(R.drawable.member_5) "6" -> memberImage.setImageResource(R.drawable.member_6) "7" -> memberImage.setImageResource(R.drawable.member_7) "8" -> memberImage.setImageResource(R.drawable.member_8) "9" -> memberImage.setImageResource(R.drawable.member_9) } } } 

(사진)

문제 설명 및 코드상품 상세페이지 (src > pages > products > index.tsx) 에서useQuery로 get 요청을 보내는 코드를 강의와 동일하게 작성하면 (useQuery를 "react-query"에서 import후 다음처럼 코드 작성시 ) 위와 같은 에러가 납니다.문제 코드import { useQuery } from "react-query"; import { QueryKeys, fetcher } from "../../queryClient"; const index = () => { const { data } = useQuery(QueryKeys.PRODUCTS, () => fetcher({ method: "GET", path: "/products", }) ); console.log(data); return <div>상품목록</div>; }; export default index;  원인현재 react-query가 v5로 업데이트 됨과 동시에 @tanstack/react-query로 바뀌었고, 동시에 많은 Hook (useQuery 포함)들의 사용 방법이 바뀌었습니다.v4의 useQuery의 경우 다음과 같은 방법으로 호출 가능했습니다. useQuery(queryKey, queryFn, options); useQuery(queryKey, options); // default query function 사용할 경우 query function 생략 가능 useQuery(options); // v5 이전에는 queryKey만 필수 옵션 그러나 일관성이 떨어지는 점, 사용될 옵션을 생성할 때 첫 번째와 두 번째 매개변수의 타입이 무엇인지 체크하기 위해 런타임 체크가 필요한 점 등의 이유로 v5부터는 단일 객체를 전달 받는 방식으로 변경되었습니다. 방식은 다음과 같습니다. useQuery({ queryKey, queryFn, ...options }) 즉 queryKey queryFunction을 전달하는 방식이 원인이었습니다.  해결 방법useQuery를 @tanstack/react-query에서 import 한다.useQuery 코드를 다음과 같이 작성한다. const { data } = useQuery({ queryKey: [QueryKeys.PRODUCTS], queryFn: () => fetcher({ method: "GET", path: "/products", }), }); 참고 자료https://github.com/TanStack/query/discussions/4252의 remove overloads 부분https://tanstack.com/query/latest/docs/react/quick-start 의 코드 부분https://tanstack.com/query/v5/docs/react/reference/useQuery처음엔 버전 안 맞아서 짜증났었는데 오히려 공식문서를 보며 공부할 수 있는 기회였던 것 같아 재밌었습니다 ㅎㅎ좋은 강의 감사합니다 😃

너무 오래된 강의입니다.버전이 많이 달라 구글검색을 오래해야합니다.

테스트를 진행할 때 강사님께서 build 때 보다 test 가 빠르다 하셨는데 동일하게 2~4분 정도 걸리는데요, 무료 버젼이라 느린건가요 ? 테스트 할 때 primary color 를 초록색으로 변경했음에도 불구하고, 변경전인 파란색으로 나오는데요, 어떻게 수정하는지요 ? 답변 부탁드립니다. 감사합니다.  

안녕하세요제가 구성한 페이지는 이렇습니다.1번메인 페이지에 버튼이 다섯개 있다면 버튼을 클릭한 후 동작은 확인 버튼 한개 들어가 있는 팝업을 띄우는 것입니다. 여기서 팝업 메세지를 각 버튼에 따라 다르게 보여주려고 하는데요. 예를들면 1번을 클릭하면 팝업에 1번 버튼을 클릭하셨습니다. 를 띄우는 식입니다. 현재 데이터 바인딩으로 구현하여서binding.btn01.setOnClickListener {} 를 다섯개 작성하여 intent.putExtra에 값을 받아서 해주고 있습니다.binding.btn1.setOnClickListener { var intent = Intent(this, PopupActivity::class.java) intent.putExtra("txt", "1번") startActivity(intent) } binding.btn2.setOnClickListener { ... } binding.btn3.setOnClickListener { ... } ...  웹개발의 자바스크립트나 제이쿼리에서 사용되는 방법처럼 버튼이 클릭되면(클래스로 지정된 여러 요소중 하나를 클릭했을때 this.id 를 가져오는 식) id 를 읽어 클릭이후 내부에서 분기문을 작성해주는 방법은 없을까요? 2번제가 아직 4번째 앱밖에 안들어봐서 뒤에 나온다면 어떤 부분에서 나오는지도 알려주시면 감사하겠습니다