각 페이지마다 loading과 error.tsx를 각각 주고 있는데 그냥root에 loading.tsx error.tsx를 하나만 둬서 공유하는 방식은 안되나요? 각 페이지마다 따로 둔 이유가 뭔가요? 현업에서도 layout은 보통 page마다 다르게 두나요?이전에는 프로젝트에서 그냥 root에 위치한 하나의 layout만 써와서.. 강의 잘 보고있습니다. 선생님!

안녕하세요 제로초님점점 npm run dev 할 떄마다 빌드 속도가 엄청 느려지는 것 같아서요아래 단계에서만 한 5분 있어야 success 뜨더라구요구글링, 지피티로도 알아보았지만 해결되지 않아 질문 드립니다단서 될만할지는 모르겠지만 제 윈도우 pc 사양이랑 설치된 패키지 내역입니다// package.json { "name": "sleact-ts-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack serve --env development", "build": "cross-env NODE_ENV=production webpack" }, "author": "ZeroCho", "license": "MIT", "dependencies": { "@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0", "@loadable/component": "^5.16.4", "@mui/icons-material": "^5.16.5", "@mui/material": "^5.16.5", "@types/gravatar": "^1.8.6", "@types/react": "^18.2.42", "@types/react-dom": "^18.3.0", "autosize": "^6.0.1", "axios": "^0.26.1", "core-js": "^3.15.1", "cross-env": "^7.0.3", "gravatar": "^1.8.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router": "^6.25.1", "react-router-dom": "^6.25.1", "socket.io-client": "^2.5.0", "swr": "^2.2.5", "typescript": "^4.4.2" }, "devDependencies": { "@babel/core": "^7.13.8", "@babel/preset-env": "^7.13.8", "@babel/preset-react": "^7.12.13", "@babel/preset-typescript": "^7.13.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.0", "@types/autosize": "^4.0.3", "@types/fork-ts-checker-webpack-plugin": "^0.4.5", "@types/loadable__component": "^5.13.9", "@types/node": "^16.11.26", "@types/react-router-dom": "^5.3.3", "@types/socket.io-client": "^1.4.35", "@types/webpack": "^5.28.0", "@types/webpack-dev-server": "^4.0.3", "autoprefixer": "^10.4.19", "babel-loader": "^8.2.2", "css-loader": "^6.2.0", "eslint": "^8.13.0", "eslint-config-prettier": "^8.1.0", "eslint-config-react-app": "^7.0.1", "eslint-plugin-flowtype": "^8.0.3", "eslint-plugin-import": "^2.29.1", "eslint-plugin-jsx-a11y": "^6.9.0", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.35.0", "fork-ts-checker-webpack-plugin": "^7.2.3", "postcss": "^8.4.39", "postcss-loader": "^8.1.1", "prettier": "^2.2.1", "react-refresh": "^0.12.0", "sass": "^1.77.8", "sass-loader": "^15.0.0", "style-loader": "^3.2.1", "tailwindcss": "^3.4.4", "ts-node": "^10.0.0", "webpack": "^5.24.2", "webpack-cli": "^4.5.0", "webpack-dev-server": "^4.0.0" } }

안녕하세요..!! 제가 백엔드나 db관련해서 지식이 없어서 잘 이해가 안되네요 ㅠdb관리를 supabase 사이트로 들어가서 확인하면 되는데, 왜 클라이언트 툴인 DBeaver를 쓰는건가요?supabase 서버에 접근하지 못하는 클라이언트들이 테스트를 할때 쓰는것일까요?답변 부탁드립니다..  

 해당 이미지와 같이 링크에 접속이 불가능합니다.

강의가 좋아서 출간하신 강의 학습 도서를 발견했는데, 이 책이랑 강의 내용 흐름이 동일한가요??? 구매를 하면 강의내용을 이해하고, 공부하는데 도움이 될까 궁금해서요

개발자님 같은 경우 어떠한 기능을 넣고싶을 때 그 기능이 있는 dependency를 어디서, 어떻게 찾아서 주로 사용하시는지 궁금합니다.

api/(site)/page.tsx에 actions/todo/todo.actions.ts를 사용하고하위컴포넌트들에서는 ex) api/(site)/compoents/...container.ts 내부에서는 hook을 임포트한것들이 apis/todo-no-rls.ts를 사용하면 될까요? *위 예시는 강의에서 다룬 파일만을 예를 들었보았습니다.

안녕하세요!섹션22 동영상 트는 부분에서 async와 await를 쓰시는 이유가 궁금해요~!비동기를 안써도 그냥 자연스럽게 작동될 것 같은데 의문점이 생겨 문의드립니다.감사합니다.onLogoTap() async {final video = await ImagePicker().pickVideo(source: ImageSource.gallery,);print(video);}}

환경변수, SDK 설정은 수없이 확인해보았고 지웠다 깔았다도 반복해보았습니다. 경로에 한글이 들어가 있지도 않았는데 도저히 에뮬레이터가 작동할 생각을 안 하네요.. 디바이스 매니저에서 추가를 해서 에뮬레이터 실행을 누르면 바로 오류가 뜨지 않고 실행은 되는데 정말 잠깐 뜨고 사라진 다음 작업 표시줄에만 남아있습니다.그래서 다시 눌러보면 각종 dll 파일들이 없다고 뜹니다.libandroid-emu-metrics.dlllibprotobuf.dlllibandroid-emu-agents.dlllibglib2_windows_msvc-x86_64.dll이렇게 네 종류가 뜹니다.노트북 기종은 950sbe/951sbe 입니다. 혹시 제 노트북이 플러터 프로그램과 호환이 안 되는걸까요?  

아래와 같은 타입에러가 발생했습니다.데이터베이스와 todoDto모두 설정 및 정상적으로 가져온거 같은데요마우스를 올려보고 에러내용도 확인해보면 타입은 다 같게 설정되어있는거 같습니다.타입자체를 비교해서 대입 하려해도 에러가나오네요..플러그인을 통해서 시각화해서 좀 더 자세하게 머가 문제인지 비교해봐도 타입이 같습니다..혹시 뭐가 문제인지 알 수 있을까요?...

안녕하세요!저는 simulator로 아이폰은 잘 뜨는데안드로이드 시뮬레이터는 핸드폰처럼 뜨지 않고tools-device manager로 들어가서 실행하니 아래처럼 뜹니다. 강사님처럼 실제 핸드폰처럼 뜨게하는 방법은 없을까요?감사합니다.

안녕하세요 선생님 ㅎchannel쪽 진행하고 있었는데 앨범 밑에 PlayListCarousel이 크기가 이상하게 나오네여 ㅠㅠ 코드를 다똑같이 써도 안되서 질문드립니다! channel/[id]/page.tsximport HeaderBgChanger from "@/components/HeaderBgChanger"; import PagePadding from "@/components/PagePadding"; import PlayListCarousel from "@/components/PlayListCarousel"; import SongCardRowExpand from "@/components/SongCardRowExpand"; import DarkButton from "@/components/elements/DarkButton"; import WhiteButton from "@/components/elements/WhiteButton"; import { getChannelById } from "@/lib/dummyData"; import { getRandomElementFromArray } from "@/lib/utils"; import { permanentRedirect } from "next/navigation"; import React from "react"; import { FiMusic, FiShuffle } from "react-icons/fi"; interface ChannelPageProps { params: { id: string; }; } const page = async (props: ChannelPageProps) => { const channel = await getChannelById(Number(props.params.id)); if (!channel) permanentRedirect("/"); const imageSrc = getRandomElementFromArray(channel.songList)?.imageSrc; return ( <PagePadding> <HeaderBgChanger imageSrc={imageSrc} /> <div className="mt-[150px]"></div> <section> <div className=" text-[28px] font-bold">{channel.name}</div> <article className="mt-4 lg:hidden"> <div> <DarkButton className={"w-[230px] flex justify-center"} label={"구독중 99만"} /> </div> <div className="flex flex-row gap-4 mt-4"> <WhiteButton label={"셔플"} icon={<FiShuffle size={16}></FiShuffle>} /> <WhiteButton label={"뮤직 스테이션"} icon={<FiMusic size={16} />} /> </div> </article> <div className="hidden lg:flex flex-row items-center gap-4 text-[14px] mt-4"> <WhiteButton label={"셔플"} icon={<FiShuffle size={16}></FiShuffle>} /> <WhiteButton label={"뮤직 스테이션"} icon={<FiMusic size={16} />} /> <DarkButton className={"w-[230px] flex justify-center"} label={"구독중 99만"} /> </div> </section> <section className="mt-[80px]"> <div className=" text-[28px] font-bold">노래</div> <div className="mt-[20px]"> <ul className="flex flex-col gap-2"> {channel.songList.map((song, key) => { return <SongCardRowExpand song={song} key={key} />; })} </ul> </div> </section> <section className="mt-[80px]"> <div className=" text-[28px] font-bold">앨범</div> <PlayListCarousel playlistArray={channel.playlistArray} /> </section> <section className="mt-[80px]"></section> </PagePadding> ); }; export default page;PlayListCarousel.tsximport { Playlist } from "@/types"; import React from "react"; import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, } from "@/components/ui/carousel"; import PlayListCard from "./PlayListCard"; interface PlayListCarouselProps { title?: string; subTitle?: string; Thumbnail?: React.ReactNode; playlistArray?: Playlist[]; } const PlayListCarousel: React.FC<PlayListCarouselProps> = ({ title, subTitle, Thumbnail, playlistArray, }) => { return ( <div className="w-full"> <Carousel> <div className="flex flex-row justify-between items-end my-2"> <article className="flex flex-row gap-3"> {Thumbnail} <div className="flex flex-col justify-center"> <div> {subTitle && ( <div className=" text-neutral-500">{subTitle}</div> )} </div> <div className="text-[34px] font-bold leading-[34px] "> {title} </div> </div> </article> <div className="relative left-[-45px]"> <div className="absolute bottom-[20px]"> <CarouselPrevious className="right-2" /> <CarouselNext className=" left-2" /> </div> </div> </div> <CarouselContent className="mt-4"> {playlistArray?.map((playlist, index) => { return ( <CarouselItem key={index} className="basis-1/2 md:basis-1/3 lg:basis-1/4 xl:basis-1/5" > <PlayListCard playlist={playlist} /> </CarouselItem> ); })} </CarouselContent> </Carousel> </div> ); }; export default PlayListCarousel;

위 사진처럼 에러 발생합니다.문서처럼 sudo xcode-select --installsudo xcode-select -s /Applications/Xcode.app/Contents/Developersudo xcodebuild -runFirstLaunch실행을 했으며 영상을따라서 XCode 로 가서 시뮬레이터를 다운받았습니다.

flutter 하시는 이유가 있을까요 ?? 코드팩토리 다른 nest js 강의를 듣고있는데요만약 typescript 를 사용하고있다면 react native 를 사용하는것이 더 이득이지 않을까?? 생각했습니다.react native 가 성능이 안좋다곤하지만 큰 기업에서 이미 사용하고있어서 그럼.. 성능이 flutter 만큼은 나오지 않더라도 사용하는 사람에 따라 다른거 아닌가 생각이 들더라구요.그럼 배우지마 !! 할수 있지만 ㅎㅎ배우는 입장에서 궁금해서 여쭤봅니다.

9.1장에서 user.action.ts의 getUser 함수에 serverComponent라는 속성이 갑자기 생겨났는데 이거에 대한 설명이 필요한 것 같습니다.

안녕하세요 제로초님components 의 alias 경로가 오류가 나서요 질문 드립니다저는 src 폴더를 추가해서 한번 더 감싼 구조에서 이에 맞게 alias 경로를 세팅했는데요import { TextField, Button } from '@components'; 이렇게 불러오면 components 폴더의 index 파일이 자동으로 인식되는 걸로 알고 있는데, 에러가 뜨더라구요그래서 import { TextField, Button } from '@components/index'; 로 해야 정상적으로 불러오던데 왜 index를 별도로 입력해야 하는지 모르겠어서요반면 @assets alias 경로에 있는 icons는 index 입력 없이 index 파일을 잘 불러와서 문제가 없더라구요 // webpack.config.ts alias: { '@assets': path.resolve(__dirname, './src/assets'), '@hooks': path.resolve(__dirname, './src/hooks'), '@components': path.resolve(__dirname, './src/components'), '@layouts': path.resolve(__dirname, './src/layouts'), '@pages': path.resolve(__dirname, './src/pages'), '@utils': path.resolve(__dirname, './src/utils'), '@typings': path.resolve(__dirname, './src/typings'), }, // tsconfig.json "paths": { "@assets/*": ["./src/assets/*"], "@hooks/*": ["./src/hooks/*"], "@components/*": ["./src/components/*"], "@layouts/*": ["./src/layouts/*"], "@pages/*": ["./src/pages/*"], "@utils/*": ["./src/utils/*"], "@typings/*": ["./src/typings/*"] }  

안녕하세요.먼저 정말 좋은 강의를 만들어 주셔서 감사합니다.초보자로써 많은 도움을 받고 있습니다. schedule_bottom_sheet.dart의 onSavePressed() 함수를 통하여 값은 입력이 되었습니다.I/flutter ( 6559): [ScheduleTableData(id: 1, startTime: 12, endTime: 14, content: Test Flutter !!!, date: 2024-07-24 00:00:00.000, color: 2196F3, createdAt: 2024-07-24 07:55:37.000), ScheduleTableData(id: 2, startTime: 15, endTime: 17, content: AAAAAAAA !!, date: 2024-07-25 00:00:00.000, color: F44336, createdAt: 2024-07-24 07:56:16.000), ScheduleTableData(id: 3, startTime: 9, endTime: 11, content: Flutter 프로그래밍, date: 2024-07-24 00:00:00.000, color: F44336, createdAt: 2024-07-24 10:34:38.000), ScheduleTableData(id: 4, startTime: 9, endTime: 11, content: Flutter 프로그래밍, date: 2024-07-24 00:00:00.000, color: F44336, createdAt: 2024-07-24 10:35:41.000), ScheduleTableData(id: 5, startTime: 12, endTime: 14, content: I want to trip in Japan !!!, date: 2024-07-23 00:00:00.000, color: F44336, createdAt: 2024-07-24 10:43:57.000)]I/flutter ( 6559): snapshot.hasData: false home_screen.dart의 FutureBuilder에서 builder의 snapshot에서 DB에 등록된 값을 가져오지 못하고 있습니다. snapshot.hasData -> false 이고 snapshot.connectionState은 waiting 상태입니다.if (!snapshot.hasData && snapshot.connectionState == ConnectionState.waiting) { return Center( child: CircularProgressIndicator(), ); }위 코드에서 조건에 만족하기 때문에 if문에서 CircularProgressIndicator()가 실행 되어야 하는데, CircularProgressIndicator()가 표지되지 않습니다.  다음과 같이 수정하여 확인한 결과, 글자가 짧은 순간 표시되었다가 사라졌습니다.child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ CircularProgressIndicator(), SizedBox(height: 32.0), Text( 'Loading, Please wait.....', style: TextStyle( fontSize: 18, color: Colors.red, fontWeight: FontWeight.w700, ), ), ], ), 감사합니다.    

플러터 강의는 정말 완벽해요 초반 성장기에 정말 많은 도움을 받았습니다. 너무 감사합니다. 리엑트 강의는 안찍으실까요? 있다면 꼭 듣고 싶내요. 아니면 추천할만한 리엑트 강의가 있을까요?

defaultConfig { // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html). applicationId = "com.byjun0302.flutter_blogweb_app" // You can update the following values to match your application needs. // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration. minSdk = flutter.minSdkVersion targetSdk = flutter.targetSdkVersion versionCode = flutterVersionCode.toInteger() versionName = flutterVersionName }제 build.gradle 의 defaultConfig 에는 minSdk 적는 부분이 이렇게 나와있는데 뭔가 바뀐 것 같아 질문드립니다

Login.tsx에서 swr로 호출한 users의 data 값을 return 직전에 console 로그로 찍어봤는데요네트워크 탭에서는 users 요청은 한번 밖에 없었는데undefined와 false가 연달아서 찍히더라구요다른 질문에서 답변해주신 내용을 보니 데이터 로딩중엔 undefined라고 말씀해주셨는데, 맨 처음 컴포넌트가 렌더링될 때 useSWR이 api를 호출하게 되고 이때 console.log(data)는 아직 데이터가 로딩 중이라서 undefined가 찍히게 되고, 이후 데이터 로딩이 완료되면 useSWR이 다시 호출되어? false가 찍히는 프로세스로 이해했는데 맞는걸까요그렇다면 useSWR로 api호출 시 무조건 최소 2번 렌더링될 수 밖에 없는걸까요?// Login.tsx import React, { useState, useCallback, useEffect } from 'react'; import { TextField, Button } from '@components/index'; import { Link, Navigate } from 'react-router-dom'; import { useInput } from '@hooks/useInput'; import { LogoSlack } from '@assets/icons/'; import axios from 'axios'; import useSWR from 'swr'; import fetcher from '@utils/fetcher'; const Login = () => { // useSWR은 get으로 요청한 데이터를 받아와서 저장한다. // mutate : 내가 원할 때 SWR 호출하기 const { data, error, mutate } = useSWR('http://localhost:3095/api/users', fetcher, { dedupingInterval: 5000, // 주기적으로 호출하지만, dedupingInterval 기간 내에는 캐시에서 불러온다 }); const [logInError, setLogInError] = useState(false); const [email, setEmail, onChangeEmail] = useInput(''); const [password, setPassword] = useInput<string>(''); const onChangePassword = useCallback( (e: React.ChangeEvent<HTMLInputElement>) => { setPassword(e.target.value); }, [email, password, data], ); const onSubmit = useCallback( (e) => { setLogInError(false); axios .post( 'http://localhost:3095/api/users/login', { email, password }, { withCredentials: true, }, ) .then(() => { mutate(); }) .catch((error) => { setLogInError(error.response?.status === 401); }); }, [email, password], ); console.log(data); // if (data) return <Navigate to="/workspace/channel" />; return ( <div className="max-w-[400px] mx-auto px-[20px]"> <h1 className="flex justify-center pt-[60px] pb-[20px]"> <LogoSlack /> <span className="blind">Slack</span> </h1> <TextField label="이메일 주소" type="email" value={email} onChange={onChangeEmail} /> <TextField label="비밀번호" type="password" value={password} onChange={onChangePassword} /> {logInError && <p className="mb-[20px] mt-[-10px] text-red-500 font-normal">로그인 실패</p>} <Button text="로그인" onClick={onSubmit} /> <p className="mt-[10px] text-center"> Slack을 처음 사용하시나요? <Link to="/sign" className="ml-[4px] text-blue-600"> 회원가입 </Link> </p> </div> ); }; export default Login;