172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
모두의 깃 & 깃허브
mac에서 vi 를 cat으로 고쳤다가 다시 vi쓰려고 git config --global core.editor "vim" 입력했습니다 git log 입력 후 아무것도 안하고 다시 명령어 창으로 가려고 :q를 누르면 계속 e37: no write since last change (add ! to override) 메세지가 뜨는데 cat 으로 하기전에는 강제종료 안해도 되던데 왜 그런건가요? swp와 같은 백업파일도 계속 만들어지고 혹시 되돌릴순 없나요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
공부하고 싶어요..ㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
지금 터저서 테스트 안되요 고쳐주세요.
미해결
Next + React Query로 SNS 서비스 만들기
마지막에 로그인시 저는 http://localhost:3000/api/auth/error "이 페이지는 존재하지 않습니다. 다른 페이지를 검색해 보세요 검색" 위 URL로 리다이렉트 되고 해당 ㅁㅔ시지가 뜹니다. 혹시 어디에 있는 정보로 로그인하는건지 궁금합니다
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
왜 mutationfn은 비동기 함수를 할당해주고 async () => { return createTodo(todoInput)} 왜 queryfn은 그냥 일반 함수를 할당한건가요? () => getTodo(), 차이가 무엇인지 궁금합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
주소 안들어가집니다/
해결됨
팀 개발을 위한 Git, GitHub 입문
안녕하세요. 강의 잘보고 있습니다. PPT 자료를 다운 받고 싶은데, 어디서 다운받아야 할지 모르겠네요. 시간되실때 이메일로 보내주시면 감사하겠습니다. 이메일 : shinyeoneui@naver.com
미해결
Next + React Query로 SNS 서비스 만들기
제로초님의 next-auth 작업하시는걸 보고 프론트에서 next-auth로 로그인하는것을 구현을 하긴 했는데 로그인(인가)을 하는 주체가 프론트다 보니 기존에 배웠을때는 nest 또는 node에서 passport를 이용해서 작업을 했엇는데 이제는 passport로 인가 하는 작업이 필요가 없어진건지 궁금합니니다. 필요가 없다라고 하면 백엔드서버에서는 이사람이 로그인을 했는지 안했는지를 알아야 할텐데 그거는 어떻게 구현을 해야할지가 막막해서 질문드립니다 ㅠㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
api 요청하기를 눌러도 콘솔창에 아무것도 안떠요
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
https://github.com/supabase/storage/issues/207 모든 파일을 제거했을 때 갑자기 .emptyFolderPlaceholder가 파일 리스트에 나오는 문제입니다. 슬랙에 올라온 질문인데 같은 이슈를 겪는 분들이 종종 계실 것 같아 인프런 커뮤니티에도 해결책을 공유드립니다.
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
Slack에 올라온 질문이 좋아서 인프런 커뮤니티에도 공유드립니다.
미해결
Next + React Query로 SNS 서비스 만들기
강좌와 git을 보면서 했는데, 왜 아래에 회색영역이 생기는 건지 잘 모르겠습니다.ㅜㅜ 세로로 생기는 스크롤도 흰색영역에만 생깁니다. 그런데 로그아웃버튼은 회색영역에 생기네요 이리저리 해봐도 잘 모르겠어서 도움을 요청합니다
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세여 제로초님 UserInfo에서 팔로우버튼을 누르면 팔로잉으로 변해야되고 다시 한번 누르면 팔로우로 변해야되는데 버튼을 누르고 새로고침을 해야지만 반영이됩니다... 팔로우 추천에서는 바로 반영이 되는데.... 깃허브 ch3-2 UserInfo에 있는 코드로 가져다 써도 안되네여 ㅠㅠ "use client"; import style from "@/app/(afterLogin)/[username]/profile.module.css"; import BackButton from "@/app/(afterLogin)/_component/BackButton"; import { useQuery, useQueryClient, useMutation } from "@tanstack/react-query"; import { User } from "@/model/User"; import { getUser } from "@/app/(afterLogin)/[username]/_lib/getUser"; import cx from "classnames"; import { MouseEventHandler } from "react"; import { Session } from "@auth/core/types"; type Props = { username: string; session: Session | null; }; export default function UserInfo({ username, session }: Props) { const { data: user, error } = useQuery< User, Object, User, [_1: string, _2: string] >({ queryKey: ["users", username], queryFn: getUser, staleTime: 60 * 1000, // fresh -> stale, 5분이라는 기준 gcTime: 300 * 1000, }); const queryClient = useQueryClient(); const follow = useMutation({ mutationFn: (userId: string) => { console.log("follow", userId); return fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/users/${userId}/follow`, { credentials: "include", method: "post", } ); }, onMutate(userId: string) { const value: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (value) { const index = value.findIndex((v) => v.id === userId); if (index > -1) { console.log(value, userId, index); const shallow = [...value]; shallow[index] = { ...shallow[index], Followers: [{ id: session?.user?.email as string }], _count: { ...shallow[index]._count, Followers: shallow[index]._count?.Followers + 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } } const value2: User | undefined = queryClient.getQueryData([ "users", userId, ]); if (value2) { const shallow: User = { ...value2, Followers: [{ id: session?.user?.email as string }], _count: { ...value2._count, Followers: value2._count?.Followers + 1, }, }; queryClient.setQueryData(["users", userId], shallow); } }, onError(error, userId: string) { console.error(error); const value: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (value) { const index = value.findIndex((v) => v.id === userId); console.log(value, userId, index); if (index > -1) { const shallow = [...value]; shallow[index] = { ...shallow[index], Followers: shallow[index].Followers.filter( (v) => v.id !== session?.user?.email ), _count: { ...shallow[index]._count, Followers: shallow[index]._count?.Followers - 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } const value2: User | undefined = queryClient.getQueryData([ "users", userId, ]); if (value2) { const shallow = { ...value2, Followers: value2.Followers.filter( (v) => v.id !== session?.user?.email ), _count: { ...value2._count, Followers: value2._count?.Followers - 1, }, }; queryClient.setQueryData(["users", userId], shallow); } } }, }); const unfollow = useMutation({ mutationFn: (userId: string) => { console.log("unfollow", userId); return fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/users/${userId}/follow`, { credentials: "include", method: "delete", } ); }, onMutate(userId: string) { const value: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (value) { const index = value.findIndex((v) => v.id === userId); console.log(value, userId, index); if (index > -1) { const shallow = [...value]; shallow[index] = { ...shallow[index], Followers: shallow[index].Followers.filter( (v) => v.id !== session?.user?.email ), _count: { ...shallow[index]._count, Followers: shallow[index]._count?.Followers - 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } const value2: User | undefined = queryClient.getQueryData([ "users", userId, ]); if (value2) { const shallow = { ...value2, Followers: value2.Followers.filter( (v) => v.id !== session?.user?.email ), _count: { ...value2._count, Followers: value2._count?.Followers - 1, }, }; queryClient.setQueryData(["users", userId], shallow); } } }, onError(error, userId: string) { console.error(error); const value: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (value) { const index = value.findIndex((v) => v.id === userId); console.log(value, userId, index); if (index > -1) { const shallow = [...value]; shallow[index] = { ...shallow[index], Followers: [{ id: session?.user?.email as string }], _count: { ...shallow[index]._count, Followers: shallow[index]._count?.Followers + 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } } const value2: User | undefined = queryClient.getQueryData([ "users", userId, ]); if (value2) { const shallow = { ...value2, Followers: [{ userId: session?.user?.email as string }], _count: { ...value2._count, Followers: value2._count?.Followers + 1, }, }; queryClient.setQueryData(["users", userId], shallow); } }, }); console.log("error"); console.dir(error); if (error) { return ( <> <div className={style.header}> <BackButton /> <h3 className={style.headerTitle}>프로필</h3> </div> <div className={style.userZone}> <div className={style.userImage}></div> <div className={style.userName}> <div>@{username}</div> </div> </div> <div style={{ height: 100, alignItems: "center", fontSize: 31, fontWeight: "bold", justifyContent: "center", display: "flex", }} > 계정이 존재하지 않음 </div> </> ); } if (!user) { return null; } const followed = user.Followers?.find((v) => v.id === session?.user?.email); console.log(session?.user?.email, followed); const onFollow: MouseEventHandler<HTMLButtonElement> = (e) => { e.stopPropagation(); e.preventDefault(); console.log("follow", followed, user.id); if (followed) { unfollow.mutate(user.id); } else { follow.mutate(user.id); } }; return ( <> <div className={style.header}> <BackButton /> <h3 className={style.headerTitle}>{user.nickname}</h3> </div> <div className={style.userZone}> <div className={style.userRow}> <div className={style.userImage}> <img src={user.image} alt={user.id} /> </div> <div className={style.userName}> <div>{user.nickname}</div> <div>@{user.id}</div> </div> {user.id !== session?.user?.email && ( <button onClick={onFollow} className={cx(style.followButton, followed && style.followed)} > {followed ? "팔로잉" : "팔로우"} </button> )} </div> <div className={style.userFollower}> <div>{user._count.Followers} 팔로워</div> <div>{user._count.Followings} 팔로우 중</div> </div> </div> </> ); } 제가 보기에는 useQuery가 제대로 작동안하는거같은데...제로초님 의견이 궁금합니다 팔로우버튼 안눌렀을때 팔로우버튼 눌렀을때
미해결
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
현재 투두 페이지에서 새로고침을 하면 empty -> loading -> todolist 보여짐 이렇게 되는데, loading -> empty loading -> todolist 와 같이 로딩 후에 데이터가 없으면 empty가 보여지고, 데이터가 있으면 todolist가 보여지는 구조로 가야하지 않나요?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 선생님. 요즘 기업 트렌드에 맞게 tailwind로 진행해보려고 하는데 강의 css 참고하면서 저 만의 방법으로 tailwind로 수정해서 진행해도 상관없겠죠! 혹시 css로 진행한 이유가 있을까요? 요즘 기업에선 tailwind를 더 추구하나요? 저는 tailwind가 더 익숙하더라구요.. 유튜브에서 우연히 제로초 개발자님을 뵙게되어, 제로초의 JS교재와 함께 큰 도움이 되어서 인프런 강의까지 듣게됐네요. 감사합니다!
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 개발자님. 백엔드를 만약 구축한다고했을때 구글링해보면 보통 prisma랑 mongoDB를 같이 쓰더라구요 저는 이때까지 mongoDB만 써서 백엔드를 구축했는데 풀스택으로 만든다고 하면 prisma, mongoDB를 같이 쓰는게 좋나요? 둘 사이에 쓰임에 대해서 어떤 다른 목적이 있나요? 아마 목적에 따라 사용하는게 다를 것 같긴한데.. 개발자님께서는 어떻게 생각하시나요?
해결됨
팀 개발을 위한 Git, GitHub 입문
aparkjun@naver.com
해결됨
기초부터 배우는 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 + React Query로 SNS 서비스 만들기
안녕하세요, next-auth 5 베타를 사용하다가 "r is not a function"이라는 에러 메시지 때문에 next-auth 버전을 "^4.24.5"로 낮추었더니 해결되었습니다. 그런데 vercel에 배포하려하니 자꾸 아래의 사진과 같은 에러 때문에 어려움을 겪고 있습니다...ㅜ 해당 에러 구글에 찾아봐도 해결방법을 모르겠던데 도와주실 수 있으실까요ㅠㅠㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
플레이 그라운드에 정보를 넣는데 이게 왜 오류가 뜨는지 모르겠어요. 분명 몇 주전에는 된 내용을 복사 붙이기로 몇십번 시도해도 안됩니다. 그리고 '섹션 04'부터 api 요청하는 부분 다 안돼요. 뭘 잘못했는지 모르겠습니다. 코드만 몇십번 확인하고, 다시 강의 재생해서 봤는데도 Api 요청에만 문제가 있습니다. 다른 섹션들도 'api 요청 부분' 만 아무리 클릭해도 맨 마지막 이미지와 같이 아무것도 안떠요. 구글에서 하라는대로 캐시도 다 지웠고, 확장프로그램도 지우고를 여러 번 했음에도 안됩니다. apollo/client 버전은 3.11.1입니다. api 요청만 다 실패해서 몇주째 잡고 있는데...너무 답답해요.
