import Chat from '@components/Chat'; import { ChatZone, Section, StickyHeader } from '@components/ChatList/style'; import { IChat, IDM } from '@typings/db'; import React, { FC, RefObject, VFC, forwardRef, useCallback, useRef } from 'react'; import { Scrollbars } from 'react-custom-scrollbars'; interface Props { scrollRef: RefObject<Scrollbars>; chatSections: { [key: string]: IDM[] }; setSize: (f: (index: number) => number) => Promise<IDM[][] | undefined>; isEmpty: boolean; isReachingEnd: boolean; } const ChatList: VFC<Props> = (({ chatSections, setSize, isEmpty, scrollRef, isReachingEnd}) => { const onScroll = useCallback((values) => { // 끝에 도달하면 불러오지 않기 if(values.scrollTop === 0 && !isReachingEnd){ console.log('가장 위'); setSize((prevSize) => prevSize + 1).then(()=>{ // 스크롤 위치 유지 if(scrollRef?.current){ scrollRef.current?.scrollTop(scrollRef.current?.getScrollHeight() - values.scrollHeight); } }); } }, []); return ( <ChatZone> <Scrollbars autoHide ref={scrollRef} onScrollFrame={onScroll}> {Object.entries(chatSections).map(([date, chats]) => { return ( <Section className={`section-${date}`} key={date}> <StickyHeader> <button>{date}</button> </StickyHeader> {chats.map((chat) => ( <Chat key={chat.id} data={chat} /> ))} </Section> ); })} </Scrollbars> </ChatZone> ); }); export default ChatList; 이쪽 코드는 문제가 없는것같은데 희한하게 위치가 유지가 되지않고 원래처럼 쭉 올라가버립니다.. ref쪽이 문제인가요..? 혹시몰라 DirectMessage 컴포넌트도 아래에 첨부하겠습니다.import React, { useCallback, useEffect, useRef } from 'react'; import gravator from 'gravatar'; import useSWR, { mutate } from 'swr'; // swr 인피니티스크롤링 전용 메서드 import useSWRInfinite from 'swr/infinite'; import { IDM, IUser } from '@typings/db'; import fetcher from '@utils/fetcher'; import { useParams } from 'react-router'; import ChatBox from '@components/ChatBox'; import { Container, Header } from '@pages/DirectMessage/style'; import ChatList from '@components/ChatList'; import useInput from '@hooks/useInput'; import axios from 'axios'; import makeSection from '@utils/makeSection'; import Scrollbars from 'react-custom-scrollbars'; const DirectMessage = () => { const { workspace, id } = useParams<{ workspace: string; id: string }>(); const { data: userData } = useSWR(`http://localhost:3095/api/workspaces/${workspace}/users/${id}`, fetcher); // 내정보 const { data: myData } = useSWR(`http://localhost:3095/api/users`, fetcher); const [chat, onChangeChat, setChat] = useInput(''); // 과거 채팅리스트에서 채팅을 치면 최신목록으로 바로 스크롤을 내려줄려면 ref를 // 이 컴포넌트에서 props로 내려줘야하기 때문에 forwardRef를 사용해서 props로 넘겨준다 // 💡 HTML 엘리먼트가 아닌 React 컴포넌트에서 ref prop을 사용하려면 React에서 제공하는 forwardRef()라는 함수를 사용해야 합니다 const scrollbarRef = useRef<Scrollbars>(null); // 채팅 받아오는곳 (setSize : 페이지수를 바꿔줌) // useSWRInfinite를 쓰면 [{id:1},{id:2},{id:3},{id:4}] 1차원배열이 [[{id:1},{id:2}],[{id:3},{id:4}]] 2차원배열이 된다. const { data: chatData, mutate: mutateChat, setSize, } = useSWRInfinite<IDM[]>( (index) => `http://localhost:3095/api/workspaces/${workspace}/dms/${id}/chats?perPage=20&page=${index + 1}`, fetcher, ); // 데이터 40 개중에 20개씩 사져오면 첫번째페이지부터 20 + 20 + 0 세번째 페이지 0 이되면 isEmpty, isReachingEnd는 true가 됨 // 반대의 상황에서 데이터가 45개면 20 + 20 + 5 isEmpty는 0이 아니라서 false isReachingEnd는 여전히 데이터 가져옴 const isEmpty = chatData?.[0]?.length === 0; const isReachingEnd = isEmpty || (chatData && chatData[chatData.length - 1]?.length < 20) || false; const onSubmitForm = useCallback( (e) => { e.preventDefault(); if (chat?.trim() && chatData) { const savedChat = chat; // 💡 옵티미스틱 UI // 서버쪽에 다녀오지 않아도 성공해서 데이터가 있는거처럼 보이게 미리 만듦 mutateChat((prevChatData) => { // infinite 스크롤링은 2차원 배열이다. prevChatData?.[0].unshift({ // unshift : 앞쪽에 추가 id: (chatData[0][0]?.id || 0) + 1, content: savedChat, SenderId: myData.id, Sender: myData, ReceiverId: userData.id, Receiver: userData, createdAt : new Date(), }); return prevChatData; },false) // 옵티미스틱 UI 할땐 이부분이 항상 false .then(()=>{ setChat(''); // 버튼클릭 시 기존 채팅지우기 scrollbarRef.current?.scrollToBottom(); // 채팅 첬을때 맨 아래로 }) axios .post( `http://localhost:3095/api/workspaces/${workspace}/dms/${id}/chats`, { content: chat, }, { withCredentials: true, }, ) .then(() => { mutateChat(); // SWR에서 데이터를 다시 불러와서 캐시를 갱신하는 역할을 합니다. }) .catch(() => { console.error; }); } }, [chat, chatData, myData, userData, workspace, id], ); // (채팅이 최신것을 아래에 두기 위함) = 기존것 데이터를두고 새 데이터를 뒤집어서 출력 / flat() 배열을 1차원 배열로 만들어줌 const chatSections = makeSection(chatData ? [...chatData].flat().reverse() : []); // 로딩 시 스크롤바 제일 아래로 useEffect(()=>{ if(chatData?.length === 1){ // 채팅 데이터가 있어서 불러온 경우 scrollbarRef.current?.scrollToBottom(); // 가장 아래쪽으로 내려줌 } },[chatData]) // 로딩 if (!userData || !myData) { return null; } return ( <Container> <Header> <img src={gravator.url(userData.email, { s: '24px', d: 'retro' })} alt={userData.nickname}></img> <span>{userData.nickname}</span> </Header> {/* 컴포넌트 위치를 미리 지정해도 좋다. */} {/* 전역 상태관리 라이브러리를 사용해도 컴포넌트상황에따라 props 로 넘겨줌*/} <ChatList scrollRef={scrollbarRef} chatSections={chatSections} setSize={setSize} isEmpty={isEmpty} isReachingEnd={isReachingEnd} /> <ChatBox chat={chat} onChangeChat={onChangeChat} onSubmitForm={onSubmitForm} /> </Container> ); }; export default DirectMessage;

intel mac 유저입니다.강의에서 말씀하신대로 homebrew 통해서 cocoapods 설치 한 후 flutter doctor 실행 하는데 계속 저런 화면이 뜨네요...해결해 보려고 sudo gem install cocoapods 실행하면이런 화면이 뜨구요...해결 방법 알려 주시면 감사하겠습니다....ㅠㅠㅠ 

좋은 강의 감사합니다.강의 내용을 듣다보니, 동영상을 실행하면 자동 재생 기능이 따로 없는걸로 보여서 공식 문서를 참조 한 뒤 아래와 같은 기능 한 줄을 추가 했습니다. initializeController() async { currentPosition = Duration(); videoPlayerController = VideoPlayerController.file( File(widget.video.path), ); await videoPlayerController!.initialize(); await videoPlayerController!.play(); // 자동 재생 시작 videoPlayerController!.addListener(() async { final currentPosition = videoPlayerController!.value.position; setState(() { this.currentPosition = currentPosition; }); }); setState(() {}); } 이런식으로 await videoPlayerController!.initialize();밑에 추가를 했는데, 테스트는 해보니 이상이 없어서 혹시 코드 내부 로직상으로도 문제가 없는지 궁금합니다.

Onheartpressed()함수를 만들었는데 onpressed: 파라미터 뒤에 onheartpressed()라고 ()를 붙여야하는거 아닌가요? 함수니까 말이에요. 근데 왜 onheartpressed라고 () 없이 쓸 수가 있는거죠?

컴퓨터 사양마다 로딩이나 리붓되는 시간이 다르겠지만,최신 버젼으로 Device를 실행하면 엄청 오랜 시간이걸린 후에야 작성한 코드가 실행되는데, 이건 어쩔 수 없이 당연한 컴퓨터 사양 문제겠죠?....ㅠㅠ

 color.dart에import 'package:flutter/material.dart'; const Color PRIMARY_COLOR = Color(0xFF2D2D33); const Color RED_COLOR = Color(0xFFEA4955); const Color BLUE_COLOR = Color(0xFF549FBF);한 뒤에return Scaffold( backgroundColor: PRIMARY_COLOR, body: SafeArea(라고 backgroundColor: PRIMARY_COLOR,넣자마자 오류가 납니다..자동완성도 당연히 안되고요.아무리 봐도 똑같이 했는데 이유를 모르겠어서요ㅜ Performing hot restart... Syncing files to device SM G991N... lib/screen/home_screen.dart:14:24: Error: The getter 'PRIMARY_COLOR' isn't defined for the class '_HomeScreenState'. - '_HomeScreenState' is from 'package:random_number/screen/home_screen.dart' ('lib/screen/home_screen.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'PRIMARY_COLOR'. backgroundColor: PRIMARY_COLOR, ^^^^^^^^^^^^^ Restarted application in 561ms.

webview 강의와 관련하여 , 버젼 ^3.0.2로 진행한 후 4.x.x으로 따라가도 무관하다는 글을 보았습니다. 하지만 그대로 3버젼으로 진행하려고 하니 더 이상 지원하지 않는 api라며 안내가 뜨고 있습니다. 그러곤 4버젼에서 다시금 하려 해도 3버젼과 명령이가 달라져 앞 강의 내용을 들어도이해가 잘 안가는 부분들이 있습니다. 4버젼만 따로 강의 제작은 진행되지 않는걸까요?

현재 강의가 nextjs12로작성된듯한데 create-app 으로 12버젼을 지정해도 14버전이 깔려버립니다. 혹시 강의자체를 리뉴얼 하실 계획이 있으신가요?

workSpace 에도 useSwr 로 유저데이터랑 채널데이터 요청하고모달안에서도 유저데이터랑 채널데이터 요청하는데 이러면 불필요한 요청이 모달하나 띄운다고 실행되는거 아닌가요? workSpace에서 revalidate 함수만 넘겨서 하면 어떤가요?

안녕하세요. 좋은 강의 감사합니다!강의 내용 중 구현방향에 대해 궁금한 점이 있어 질문 드립니다. 랜덤 넘버를 초기화 하는 배열에서(randomNumbers) 조건에 따라 padding을 지정하는 과정의 코드가 다음과 같이 구현이 되어 있는데요.padding: EdgeInsets.only(bottom: x.key == 2 ? 0 : 16.0), 만약 x.key를 직접 참조 하는게 아닌 randomNumbers의 length를 가져와서 조건을 거는 것도 유지보수 상 좋은 코드인가요?padding: EdgeInsets.only(bottom: x.key == randomNumbers.length - 1 ? 0 : 16.0),

위치 가져오기 - 메인 액티비티 지오코딩 (1) 강의 내용 중이 부분에서 에러가 발생합니다. 강의와 같은 코드를 사용하는데 해결 방법을 모르겠습니다.여기가 막히니 이후 진도가 진행이 안되네요ㅠㅠ아래에 다른 답변 봐도 이해가 안돼서 답변 부탁드립니다!

예제를 내려받아서 진행하는데버전 오류가 너무 많이 생기거든요전 안드로이드스튜디오(지라프), 플러터(3.13.8) 모두 최신 버전인데요,> Could not resolve all files for configuration ':classpath'. > Could not find org.jetbrains.kotlin:kotlin-gradle-plugin:1.7.2. Searched in the following locations: 지금도 이렇게 떠서build gradle 파일에서 ext.kotlin_version = '1.7.2'classpath 'com.android.tools.build:gradle:8.1.3'로 바꾸고 gradle-wrapper.properties에서 distributionUrl=https\://services.gradle.org/distributions/gradle-8.0-all.zip바꿔주었는데 오류가 계속 나네요.저렇게 바꾼 근거는 https://developer.android.com/studio/releases/gradle-plugin?hl=ko여기 보고 했고요.. 어떻게 해결해야할지요? 그리고 앞으로 버전 문제에 시간 너무 뺏기지 않으려면역시 fvm 으로 예제를 여는게 답일까요?꼭 코팩 강의의 문제가 아니라 앞으로도 발생할 문제라방향을 잡으려고 여쭈어봅니다...    

섹션17에서 스트림설명에서 에러를 표현할때I값이 0,1,2,3,4,5 가 되었을때 에러 표현 되는것이 아닌가요? 이해를 못했서요. 설명부탁합니다

강의를 전부 진행한지 시간이 좀 된 상태에서 프로젝트 리팩토링중 이해가 안되는 부분이 있어 질문드립니다.아래 의문점에 대해 확인과 의견을 부탁드립니다.작성된 코드는 제로초님의 front / nest-typeorm 에서 가져온 코드입니다. 의문점 : 채팅 데이터 전송에 웹소켓이 역할을 하지 않는것 같다. 그렇게 생각한 근거 : 1-1 : useSocket을 이용해서 소켓에 연결하는데 ws-${workspace} 의 message에 onMessage 함수를 연결하고 있다const Channel = () => { const [socket] = useSocket(workspace); useEffect(() => { socket?.on('message', onMessage); return () => { socket?.off('message', onMessage); }; }, [socket, onMessage]); }const useSocket = (workspace?: string): [Socket | undefined, () => void] => { const disconnect = useCallback(() => { if (workspace && sockets[workspace]) { console.log('소켓 연결 끊음'); sockets[workspace].disconnect(); delete sockets[workspace]; } }, [workspace]); if (!workspace) { return [undefined, disconnect]; } if (!sockets[workspace]) { sockets[workspace] = io(`${backUrl}/ws-${workspace}`, { transports: ['websocket'], }); console.info('create socket', workspace, sockets[workspace]); sockets[workspace].on('connect_error', (err) => { console.error(err); console.log(`connect_error due to ${err.message}`); }); } return [sockets[workspace], disconnect]; };1-2 : 백엔드에서 채팅을 수신받는 createWorkspaceChannelChats는 ws-${url}-${chatWithUser.ChannelId} 의 message에 받아온 채팅을 보내고 있다. async createWorkspaceChannelChats( url: string, name: string, content: string, myId: number, ) { const channel = await this.channelsRepository .createQueryBuilder('channel') .innerJoin('channel.Workspace', 'workspace', 'workspace.url = :url', { url, }) .where('channel.name = :name', { name }) .getOne(); const chats = new ChannelChats(); chats.content = content; chats.UserId = myId; chats.ChannelId = channel.id; const savedChat = await this.channelChatsRepository.save(chats); const chatWithUser = await this.channelChatsRepository.findOne({ where: { id: savedChat.id }, relations: ['User', 'Channel'], }); this.eventsGateway.server // .of(`/ws-${url}`) .to(`/ws-${url}-${chatWithUser.ChannelId}`) .emit('message', chatWithUser); } 2 : 네트워크 탭의 웹소켓 메시지에 채팅내역 수신내역이 남지 않는다이미지가 보일지는 모르겟지만 빨간 박스가 새로 전송한 채팅이고 정상적으로 수신받으면 네트워크 탭에 messag에 내역이 남아야 하는걸로 알고 있는데 남지 않는걸로 확인됩니다. 3 : 웹페이지에서 포커스를 유지한 상태로 모바일에서 입력시 채팅이 전송되지 않음 왜 채팅이 정상적으로 전송된거 처럼 보일까 생각해보니 swr이 브라우저를 포커스 아웃후 재 포커스하면 채팅데이터를 다시 가져오는걸로 추측하여 웹페이지 포커스 유지중 모바일로 테스트해보니 채팅이 전송되지 않습니다.

안녕하세요, 미세미세 클론코딩 영상에서 레트로핏 라이브러리 영상을 보고 있데, JSON 데이터 클래스를 만들어야 하는 api변환하는 사이트를 알려주셔서 들어가는데 변환하는 것이 나오지 않아서 인강을 진행할 수가 없는 상황입니다 혹시 다른 사이트 알려주실 수 있나요??

네 핫릴로드 할스타트 활성화가 안되는걸 보면 에러는 맞는듯합니다Launching lib\main.dart on Android SDK built for x86 in debug mode... Running Gradle task 'assembleDebug'... Warning: Mapping new ns http://schemas.android.com/repository/android/common/02 to old ns http://schemas.android.com/repository/android/common/01 Warning: Mapping new ns http://schemas.android.com/repository/android/generic/02 to old ns http://schemas.android.com/repository/android/generic/01 Warning: Mapping new ns http://schemas.android.com/sdk/android/repo/addon2/02 to old ns http://schemas.android.com/sdk/android/repo/addon2/01 Warning: Mapping new ns http://schemas.android.com/sdk/android/repo/addon2/03 to old ns http://schemas.android.com/sdk/android/repo/addon2/01 Warning: Mapping new ns http://schemas.android.com/sdk/android/repo/repository2/02 to old ns http://schemas.android.com/sdk/android/repo/repository2/01 Warning: Mapping new ns http://schemas.android.com/sdk/android/repo/repository2/03 to old ns http://schemas.android.com/sdk/android/repo/repository2/01 Warning: Mapping new ns http://schemas.android.com/sdk/android/repo/sys-img2/03 to old ns http://schemas.android.com/sdk/android/repo/sys-img2/01 Warning: Mapping new ns http://schemas.android.com/sdk/android/repo/sys-img2/02 to old ns http://schemas.android.com/sdk/android/repo/sys-img2/01 FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:processDebugMainManifest'. > Unable to make field private final java.lang.String java.io.File.path accessible: module java.base does not "opens java.io" to unnamed module @3dc86b6d * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. * Get more help at https://help.gradle.org BUILD FAILED in 4s Exception: Gradle task assembleDebug failed with exit code 1위가 에러메시지이고요유앤아이 만난지 몇일 예제와 똑같이 작성한듯 한데..메인다트import 'package:flutter/material.dart'; import 'package:u_and_i/screen/home_screen.dart'; void main() { runApp( MaterialApp( home: HomeScreen(), ), ); } 홈스크린import 'package:flutter/material.dart'; class HomeScreen extends StatelessWidget { const HomeScreen({super.key}); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Text( 'Home Screen', ), ), ); } }  ㅠㅜㅜ코드팩토리 디스코드https://bit.ly/3HzRzUMFlutter 강의를 구매하시면 코드팩토리 디스코드 서버 플러터 프리미엄 채널에 들어오실 수 있습니다! 디스코드 서버에 들어오시고 저에게 메세지로 강의를 구매하신 이메일을 보내주시면 프리미엄 채널에 등록해드려요! 프리미엄 채널에 들어오시면 모든 질의응답 최우선으로 답변해드립니다!

MentionsTextarea 에 ctrl+c ctrl+v 를 이용하여 값을 입력시 사이즈는 조절되나 글자 줄 수가 잘려서 보이는 버그가 있습니다.MentionsTextarea 을 사용시 실제보이는 textarea와 보이지 않는 span 영역이 생성되는데 이 중 autosize에 span ref만 넘어가서 span영역만 커지고 textarea의 영역은 유지되서 생기는 버그로 보입니다.이후 글자를 제거 하거나 추가로 입력시 정상적으로 보이게 됩니다. 

만난지 며칠 예제를 내려받아 기본 코드를 작성하던 중Warning: Mapping new ns http://schemas.android.com/repository/android/common/02 to old ns http://schemas.android.com/repository/android/common/01에러가 나 찾아보니 gradle 버전 문제인거같았습니다. android.app.build.grade에서 minSdkVersion flutter.minSdkVersion에 버전 숫자를 적어보려고 했으나 어디서 이 버전을 확인할 수 있는지 모르겠어요. 에러 나올때 버전이 뭐다 라고 나오지도 않기 때문에.loca.properties 가봐도flutter.versionName=1.0.0 flutter.versionCode=1이 정보로 뭘 어떻게 해야할지 모르겠습니다ㅜ코드팩토리 디스코드https://bit.ly/3HzRzUMFlutter 강의를 구매하시면 코드팩토리 디스코드 서버 플러터 프리미엄 채널에 들어오실 수 있습니다! 디스코드 서버에 들어오시고 저에게 메세지로 강의를 구매하신 이메일을 보내주시면 프리미엄 채널에 등록해드려요! 프리미엄 채널에 들어오시면 모든 질의응답 최우선으로 답변해드립니다!

import 'dart:async'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; class HomeScreen extends StatefulWidget { const HomeScreen({super.key}); @override State<HomeScreen> createState() => _HomeScreenState(); } class _HomeScreenState extends State<HomeScreen> { Timer? timer; PageController controller = PageController( initialPage: 0, ); @override void initState() { super.initState(); timer = Timer.periodic(Duration(seconds: 4), (timer) { int currentPage = controller.page!.toInt(); int nextPage = currentPage + 1; if (nextPage > 4) { nextPage = 0; } controller.animateToPage( nextPage, duration: Duration(microseconds: 400), curve: Curves.linear ); }); } @override void dispose() { if (timer != null) { timer!.cancel(); } controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { // 상태바 색 변경 SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark); return Scaffold( // 스크롤 body: PageView( controller: controller, children: [1, 2, 3, 4, 5] .map( (e) => Image.asset( 'asset/img/image_$e.jpeg', fit: BoxFit.cover, ), ) .toList(), ), ); } } 전체 코드이고 controller.animateToPage 부분입니다. Curves.linear 대신 다른 여러 효과들을 적용해봐도어떠한 애니메이션 없이 모두 화면이 깜빡이고 그 후 다음 사진이 나오는 방식으로만 동작합니다. 애니메이션이 적용이 안 되네요 ㅠㅠ 윈도우에 안드로이드 시뮬, 실기기(갤럭시) 둘 다 테스트 해봐도 동일해서 코드 문제인가 싶은데 따로 강의 내용이랑 다르게 작성한 것 같지는 않습니다.검색해도 딱히 나오는 건 없어서 질문 드립니다 ㅠㅠ

안녕하세요, 강의를 듣는데예전 영상이라 그런지 스튜디오에서 명령어를 입력할 때마다코드가 너~~~~무 다르게 나와서 이걸 고친다고 시간을 다 잡아먹습니다.. 이따금 이걸 해결하는게 좋은 개발자가 된다고 하는 글을 봤는데, 취미로 배우는 직장인이라 큰 관심 없습니다. 예를들어 stful 위젯을 생성하는데 생기는 클래스들이 너무다른 모양으로 나와서 당황하는 와중에강의는 아주 빠르게 넘어가서 이건 뭐지.. 하는 거죠. 혹시 버전을 업데이트해서 올려주실 생각은 없으실까요?아니면, 플러그인 등으로 이런 작성 에러들을잡는 방법이 없을까요?