173만명의 커뮤니티!! 함께 토론해봐요.
미해결
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
현재 투두 페이지에서 새로고침을 하면 empty -> loading -> todolist 보여짐 이렇게 되는데, loading -> empty loading -> todolist 와 같이 로딩 후에 데이터가 없으면 empty가 보여지고, 데이터가 있으면 todolist가 보여지는 구조로 가야하지 않나요?
미해결
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
안녕하세요! Google Map, Geolocator 설정 관련 문의드립니다. 1. 구글맵 버전이 강의하실 때보다 업그레이드가 되어서, 그 버전으로 실행하니, 아래와 같이 에러가 뜨는데 해결방법 문의드립니다. 2. 구글맵과 지오로케이터 모두 예전 강의해주신대로 degrade하면 아래의 에러가 뜨는데 어떻게 해결하면 좋을지 문의드립니다. 감사합니다.
미해결
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
Flutter 설치강좌에서 home-brew 설치하기 강좌보고있습니다. 다만 영상에서 보여주시는 notion에 있는 설치커멘드를 보려고 하니 접속이 불가능하네요 brew환경변수 등록코멘드를 복사해서 입력하고 싶은데 이제 노션은 더이상 사용안하시는 건가요?
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
import { IoPlaySkipBackSharp, IoPlaySkipForwardSharp } from "react-icons/io5"; import { PlayerSlider } from "../ui/PlayerSlider"; import { useAudio } from "react-use"; import { AiOutlinePause } from "react-icons/ai"; import { usePlayerState } from "@/hooks/usePlayerState"; import { ClipLoader } from "react-spinners"; import { RiPlayFill } from "react-icons/ri"; export default function PlayerContent() { const { activeSong } = usePlayerState(); const [audio, state, controls, ref] = useAudio({ src: activeSong?.src ?? "", autoPlay: true, }); const isLoading = activeSong?.src && state.buffered?.length === 0; console.log("로딩상태:", isLoading); const onClickPreBtn = () => {}; const onClickStartBtn = () => { controls.play(); console.log("start일때 로딩상태:", isLoading); }; const onClickPauseBtn = () => { controls.pause(); console.log("pause일때 로딩상태:", isLoading); }; const onClickNextBtn = () => {}; return ( <div className="w-full h-full relative"> <div className="absolute top-[-16px] w-full"> <PlayerSlider className="w-full" defaultValue={[0]} value={[state.time]} onValueChange={(value) => { controls.seek(value); }} /> </div> {audio} <section className="flex flex-row justify-between items-center w-full h-full px-2 lg:px-6"> <div className="flex flex-row items-center h-full gap-1 lg:gap-8"> <IoPlaySkipBackSharp size={40} className="cursor-pointer" onClick={onClickPreBtn} /> {isLoading ? ( <ClipLoader color="#FFF" /> ) : state.playing ? ( <AiOutlinePause size={40} className="cursor-pointer" onClick={onClickPauseBtn} /> ) : ( <RiPlayFill size={40} className="cursor-pointer" onClick={onClickStartBtn} /> )} <IoPlaySkipForwardSharp size={40} className="cursor-pointer" onClick={onClickNextBtn} /> </div> <article></article> <div></div> </section> </div> ); } playerContent.tsx 파일인데 무한로딩이 계속 생겨서 UI만 뱅글뱅글 돌아가네요.. 그리고 thumb도 조절이 안되요.. 어디가 잘못된지 모르겠네요 1시간째 찾고있는데 ㅠㅠ 저는 모든 파일을 jsx가 아닌 tsx로 해서 어딘가에 문제가 있는것 같은데 못찾겠습니다.
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
각 페이지마다 loading과 error.tsx를 각각 주고 있는데 그냥 root에 loading.tsx error.tsx를 하나만 둬서 공유하는 방식은 안되나요? 각 페이지마다 따로 둔 이유가 뭔가요? 현업에서도 layout은 보통 page마다 다르게 두나요? 이전에는 프로젝트에서 그냥 root에 위치한 하나의 layout만 써와서.. 강의 잘 보고있습니다. 선생님!
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 제로초님 점점 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" } }
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
안녕하세요..!! 제가 백엔드나 db관련해서 지식이 없어서 잘 이해가 안되네요 ㅠ db관리를 supabase 사이트로 들어가서 확인하면 되는데, 왜 클라이언트 툴인 DBeaver를 쓰는건가요? supabase 서버에 접근하지 못하는 클라이언트들이 테스트를 할때 쓰는것일까요? 답변 부탁드립니다..
미해결
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
해당 이미지와 같이 링크에 접속이 불가능합니다.
해결됨
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
강의가 좋아서 출간하신 강의 학습 도서를 발견했는데, 이 책이랑 강의 내용 흐름이 동일한가요??? 구매를 하면 강의내용을 이해하고, 공부하는데 도움이 될까 궁금해서요
미해결
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
개발자님 같은 경우 어떠한 기능을 넣고싶을 때 그 기능이 있는 dependency를 어디서, 어떻게 찾아서 주로 사용하시는지 궁금합니다.
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
api/(site)/page.tsx 에 actions/todo/todo.actions.ts를 사용하고 하위컴포넌트들에서는 ex) api/(site)/compoents/...container.ts 내부에서는 hook을 임포트한것들이 apis/todo-no-rls.ts를 사용하면 될까요? *위 예시는 강의에서 다룬 파일만을 예를 들었보았습니다.
미해결
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
안녕하세요! 섹션22 동영상 트는 부분에서 async와 await를 쓰시는 이유가 궁금해요~! 비동기를 안써도 그냥 자연스럽게 작동될 것 같은데 의문점이 생겨 문의드립니다. 감사합니다. onLogoTap () async { final video = await ImagePicker ().pickVideo( source : ImageSource. galle ry , ); print(video); } }
미해결
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
환경변수, SDK 설정은 수없이 확인해보았고 지웠다 깔았다도 반복해보았습니다. 경로에 한글이 들어가 있지도 않았는데 도저히 에뮬레이터가 작동할 생각을 안 하네요.. 디바이스 매니저에서 추가를 해서 에뮬레이터 실행을 누르면 바로 오류가 뜨지 않고 실행은 되는데 정말 잠깐 뜨고 사라진 다음 작업 표시줄에만 남아있습니다. 그래서 다시 눌러보면 각종 dll 파일들이 없다고 뜹니다. libandroid-emu-metrics.dll libprotobuf.dll libandroid-emu-agents.dll libglib2_windows_msvc-x86_64.dll 이렇게 네 종류가 뜹니다. 노트북 기종은 950sbe/951sbe 입니다. 혹시 제 노트북이 플러터 프로그램과 호환이 안 되는걸까요?
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
아래와 같은 타입에러가 발생했습니다. 데이터베이스와 todoDto모두 설정 및 정상적으로 가져온거 같은데요 마우스를 올려보고 에러내용도 확인해보면 타입은 다 같게 설정되어있는거 같습니다. 타입자체를 비교해서 대입 하려해도 에러가나오네요.. 플러그인을 통해서 시각화해서 좀 더 자세하게 머가 문제인지 비교해봐도 타입이 같습니다.. 혹시 뭐가 문제인지 알 수 있을까요?...
미해결
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
안녕하세요! 저는 simulator로 아이폰은 잘 뜨는데 안드로이드 시뮬레이터는 핸드폰처럼 뜨지 않고 tools-device manager로 들어가서 실행하니 아래처럼 뜹니다. 강사님처럼 실제 핸드폰처럼 뜨게하는 방법은 없을까요? 감사합니다.
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
안녕하세요 선생님 ㅎ channel쪽 진행하고 있었는데 앨범 밑에 PlayListCarousel이 크기가 이상하게 나오네여 ㅠㅠ 코드를 다똑같이 써도 안되서 질문드립니다! channel/[id]/page.tsx import 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.tsx import { 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;
미해결
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
위 사진처럼 에러 발생합니다. 문서처럼 sudo xcode-select --install sudo xcode-select -s /Applications/Xcode.app/Contents/Developer sudo xcodebuild -runFirstLaunch 실행을 했으며 영상을따라서 XCode 로 가서 시뮬레이터를 다운받았습니다.
미해결
[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
flutter 하시는 이유가 있을까요 ?? 코드팩토리 다른 nest js 강의를 듣고있는데요 만약 typescript 를 사용하고있다면 react native 를 사용하는것이 더 이득이지 않을까?? 생각했습니다. react native 가 성능이 안좋다곤하지만 큰 기업에서 이미 사용하고있어서 그럼.. 성능이 flutter 만큼은 나오지 않더라도 사용하는 사람에 따라 다른거 아닌가 생각이 들더라구요. 그럼 배우지마 !! 할수 있지만 ㅎㅎ 배우는 입장에서 궁금해서 여쭤봅니다.
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
9.1장에서 user.action.ts의 getUser 함수에 serverComponent라는 속성이 갑자기 생겨났는데 이거에 대한 설명이 필요한 것 같습니다.
해결됨
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요 제로초님 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/*"] }
