묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
unread Count 같은 경우 실무에선는 DB에 마지막 일자를 기록하나요?
강의에서 localStorage 를 이용하여 접속시간 or 마지막 불러온 일자를 저장하고그 local 값을 unreads 에 after 파람으로 전송하여 읽지않은 메시지를 카운트 햇는데해당 방식은 다른 아이디로 로그인 시 같은 local 데이터를 활용하기도 하고 다른 기기에 접속시 해당값은 날라가게 될텐데 이는 에러사항으로 이어질 것으로 예상됩니다.마지막 일자를 활용하게 된다면 이 값은 db에 저장되야 할걸로 생각이 되는데 맞을까요?
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
내부디비를 세부적으로 쓰고싶은데...
sleact 서비스에 내부스토리지 (web스토리지,indexedDB) 를 좀더 체계적으로 써야될것같은데zustand 같은 상태관리 라이브러리에 내부스토리지를 연결하는게 좋을까요? 아니면 swr 같은데다 연결하는게 좋을까요? 아니면 내부스토리 접근하는 코드 따로 빼놓고 데이터 가져와서 state 에 관리하는게 나을까요?
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
위젯과 클래스
Boxdecoration()은 위젯이라고 볼 수 없는건가요? 볼 수 있는거 아닌가요?제가 이해하기로는 위젯과 위젯이 아닌 클래스의 차이로는위젯은 컨스트럭터 자체로 역할을 할 수 있고 위젯이 아닌 클래스는 컨스트럭터 자로 역할을 할 수는 없고, 그 컨스트럭터로 인스턴스를 만들고 그 인스턴스로 메서드나 멤버변수 이용라는걸로 이해하고 있습니다. 위 내용에 따르면 Boxdecoration()도 위젯 아닌가요?위젯과 위젯이 아닌 클래스를 나누는 명확한 기준이 있나오?
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
안스에 location custom
지도 강의에 features-custom location 가서 경도 위도 바꾸는 게 있는데안스에서는 이런걸 찾을 수 가 없네요.아래와 같이 이유를 얘기하는데 저는 해당되는게 하나도없고 File > Settings에서Appearance & Behavior > System Settings 가봐도 location 이 없네요ㅜ 안드로이드 스튜디오의 버전이 너무 낮습니다.안드로이드 스튜디오를 설치할 때 Location 옵션이 비활성화되어 있습니다.안드로이드 스튜디오의 위치 서비스가 비활성화되어 있습니다.안드로이드 스튜디오의 설정에서 Location 옵션이 숨겨져 있습니다.
-
미해결실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)
슬라이드 안 find out more 버튼 위치관련
강사님, 안녕하세요.슬라이드 안 find out more 버튼 스크롤 애니메이션이,가운데 정렬로 올라가는게 아니라, 오른쪽으로 치우쳐있다 가운데로 올라갑니다. css에선 left:50%; 되어 있던데 왜 그럴까요??(올려놓으신 수업 파일도 똑같은 현상입니다.)
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
파이어베이스 설정중 안드로이드스튜디오 프로젝트 에러
정말 죄송하지만파이어베이스 관련에러인데요코팩 책을 보면서 파이어베이스 설정을 하다가Flutterfire configure 부터 오피셜 파어베이스가 필요하다는 에러만 뜨더라고요구글링 해보니 적용하려는 안스 프로젝트의 폴더에 파베 파일을 넣어보라길래(기존 작업중이던 프로젝트)그대로 했더니파베도 설정 안되고멀쩡하던 안스 프로젝트까지 아래와 같이 에러가 났습니다.* What went wrong: A problem occurred configuring project ':cloud_firestore'. > defaultConfig contains custom BuildConfig fields, but the feature is disabled. To enable the feature, add the following to your module-level build.gradle: `android.buildFeatures.buildConfig true` 일단 해당 파베를 지웠다가 아예 다른 d드라이브에 다시 깔아봤지만 동일하고..그래들 프로퍼티 파일에 아래를 추가도 했고요android.buildFeatures.buildConfig=true어떻게도 위 에러가 없어지질 않네요ㅜ위 에러메시지는 어떤 부분을 봐야하는지 방향성만이라도 알려주시면 감사하겠습니다.
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
강의 내용으로 블로그를 작성해도 될까요?
강의를 보고 배운내용을 오래 기억하기 위해 인용하여 블로그를 작성해도 될까요? 핵심이라고 생각되는 소스코드를 복사하거나가끔 이론설명 하실때 사용하시는 ppt 페이지(그림) 일부분 이런걸 복사한 뒤, 저의 생각과 함께 글을 작성해보려고 하는데 가능할까요?medium 블로그를 통해 출처와 같이 작성할 것 같습니다.
-
미해결Slack 클론 코딩[실시간 채팅 with React]
onScroll 스크롤 위치 유지가 안됩니다 ㅠ
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;
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
flutter doctor cocoapods 설치 오류
intel mac 유저입니다.강의에서 말씀하신대로 homebrew 통해서 cocoapods 설치 한 후 flutter doctor 실행 하는데 계속 저런 화면이 뜨네요...해결해 보려고 sudo gem install cocoapods 실행하면이런 화면이 뜨구요...해결 방법 알려 주시면 감사하겠습니다....ㅠㅠㅠ
-
해결됨[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
자동 재생에 대해 궁금한 점이 있습니다.
좋은 강의 감사합니다.강의 내용을 듣다보니, 동영상을 실행하면 자동 재생 기능이 따로 없는걸로 보여서 공식 문서를 참조 한 뒤 아래와 같은 기능 한 줄을 추가 했습니다. 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();밑에 추가를 했는데, 테스트는 해보니 이상이 없어서 혹시 코드 내부 로직상으로도 문제가 없는지 궁금합니다.
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
섹션10. 상태를 트리의 위로! 강의 관련질문
Onheartpressed()함수를 만들었는데 onpressed: 파라미터 뒤에 onheartpressed()라고 ()를 붙여야하는거 아닌가요? 함수니까 말이에요. 근데 왜 onheartpressed라고 () 없이 쓸 수가 있는거죠?
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
Android Studio Devices 실행 시간
컴퓨터 사양마다 로딩이나 리붓되는 시간이 다르겠지만,최신 버젼으로 Device를 실행하면 엄청 오랜 시간이걸린 후에야 작성한 코드가 실행되는데, 이건 어쩔 수 없이 당연한 컴퓨터 사양 문제겠죠?....ㅠㅠ
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
(랜덤숫자) backgroundColor: PRIMARY_COLOR 오류
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.
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
webview 버젼 관련
webview 강의와 관련하여 , 버젼 ^3.0.2로 진행한 후 4.x.x으로 따라가도 무관하다는 글을 보았습니다. 하지만 그대로 3버젼으로 진행하려고 하니 더 이상 지원하지 않는 api라며 안내가 뜨고 있습니다. 그러곤 4버젼에서 다시금 하려 해도 3버젼과 명령이가 달라져 앞 강의 내용을 들어도이해가 잘 안가는 부분들이 있습니다. 4버젼만 따로 강의 제작은 진행되지 않는걸까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
nextjs버젼에 대해서 질문드립니다.
현재 강의가 nextjs12로작성된듯한데 create-app 으로 12버젼을 지정해도 14버전이 깔려버립니다. 혹시 강의자체를 리뉴얼 하실 계획이 있으신가요?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
useSwr 여러컴포넌트에 사용가능한가요
workSpace 에도 useSwr 로 유저데이터랑 채널데이터 요청하고모달안에서도 유저데이터랑 채널데이터 요청하는데 이러면 불필요한 요청이 모달하나 띄운다고 실행되는거 아닌가요? workSpace에서 revalidate 함수만 넘겨서 하면 어떤가요?
-
해결됨[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
랜덤 숫자 생성기 섹션 내 '조건에 맞게 Padding 적용하기' 내용 중 궁금한게 있습니다.
안녕하세요. 좋은 강의 감사합니다!강의 내용 중 구현방향에 대해 궁금한 점이 있어 질문 드립니다. 랜덤 넘버를 초기화 하는 배열에서(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),
-
미해결[2023 코틀린 강의 무료제공] 기초에서 수익 창출까지, 안드로이드 프로그래밍 A-Z
geoCoder.getFromLocation 에러
위치 가져오기 - 메인 액티비티 지오코딩 (1) 강의 내용 중이 부분에서 에러가 발생합니다. 강의와 같은 코드를 사용하는데 해결 방법을 모르겠습니다.여기가 막히니 이후 진도가 진행이 안되네요ㅠㅠ아래에 다른 답변 봐도 이해가 안돼서 답변 부탁드립니다!
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
버전 문제
예제를 내려받아서 진행하는데버전 오류가 너무 많이 생기거든요전 안드로이드스튜디오(지라프), 플러터(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 으로 예제를 여는게 답일까요?꼭 코팩 강의의 문제가 아니라 앞으로도 발생할 문제라방향을 잡으려고 여쭈어봅니다...
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
섹션17 에러표현에서...
섹션17에서 스트림설명에서 에러를 표현할때I값이 0,1,2,3,4,5 가 되었을때 에러 표현 되는것이 아닌가요? 이해를 못했서요. 설명부탁합니다