inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

connect.sid 삭제가 되지 않습니다.

해결됨

Next + React Query로 SNS 서비스 만들기

개별적으로 서버를 만들어서 진행중입니다. // 로그인시 서버에서 발급하는 코드 response.cookie('connect.sid', accessToken, { httpOnly: true, sameSite: 'none', secure: false, }); // 프론트에서 아래와 같이 저장 if (res.ok && res.status === 204) { let setCookie = res.headers.get("set-cookie"); if (setCookie) { const parsed = cookie.parse(setCookie); cookies().set("connect.sid", parsed["connect.sid"]); const user = jwtDecode(parsed["connect.sid"]); return { ...user, }; } } // 서버에서 삭제하는 코드 logout(request: any, response: Response) { const { user } = request; response.clearCookie('connect.sid', { httpOnly: true, sameSite: 'none', secure: false, }); ... } 로그인 하면 서버에서 쿠키 설정 -> 프론트에서 저장을 진행한 후, 로그아웃시 위 코드처럼 삭제하도록 하고있습니다. 강의 하단부에 작성해주신것 처럼 아래와 같이 events부분에 작성하였는데 쿠키 삭제가 되지 않습니다 ㅠㅠ events에 넣지 않고 강의 그대로 했을 때는 s%3..으로 바뀌어서 삭제되지 않습니다. events에 넣었을때는 아예 값도 바뀌지 않고 삭제되지 않습니다. 어떤 작업이 필요할까요 ㅠㅠ //auth.ts events: { signOut: async (data) => { const token = cookies().get("connect.sid"); if (!token) return; const res = await logout(token.value); console.log("signOut"); }, }, // logout fetch export const logout = async (token: string) => { const res = await fetch(`${BASE_URL}/logout`, { method: "POST", headers: { Authorization: `Bearer ${token}`, }, credentials: "include", }); return res; };

  • react
  • next.js
  • react-query
  • next-auth
  • msw
성민최 댓글 3 좋아요 0 조회수 392

types.ts 생성 오류

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

필요한 요소들 다 설치 되어있고, 오타없이 작성했는데도 Unable to find template plugin matching '-typescript' 오류와 함께 types.ts가 생성이 안됩니다. 혹시나해서 >yarn add -D @graphql-codegen/typescript 다시 설치했지만 같은 오류가 뜹니다. >@graphql-codegen/typescript-plugin 도 설치해봤는데 아래와 같은 오류로 설치가 안되네요

  • react
  • node.js
  • seo
  • graphql
  • next.js
호롤롤로 댓글 2 좋아요 0 조회수 226

css, div size와 크기가 다른 background image 적용 문의

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

background-image에 적용하는데 있어서 문의가 있습니다.outerbox.png 이미지 키기는 807px 544px 로 나옵니다.현재 outerbox css class에서 width 888px로 주면서 대략 81px 정도가 이미지가 반복되어서 표시됩니다. 이미지 반복을 없애기 위해서 아래와 같은 css를 추가했는데 이번에는 이미지가 잘려서 보입니다. background-repeat: no-repeat background-size: cover 강사님 처럼 888px 544px div에 다른 이미지를 일치시켜서 표기하려면 어떻게 해야하나요 ?

  • react
  • node.js
  • seo
  • graphql
  • next.js
댓글 0 좋아요 0 조회수 132

server ,client 컴포넌트 랜더링 질문입니다!

해결됨

Next + React Query로 SNS 서비스 만들기

안녕하세요~ 직접 만들어보고 비교하려고하는데 의문점이 하나 생겨서요! 서버컴포넌트로 Link를 생성하고 useSelectedLayoutSegment로 active클래스 처리해주려고 합니다! export default function SideBar() { const links = [ { path: "/home", pathName: "Home" }, { path: "/", pathName: "탐색하기" }, { path: "/", pathName: "쪽지" }, { path: "/", pathName: "프로필" }, ]; return ( <div className={classes.nav}> <div>logo</div> <nav> <ul> {links.map((link, idx) => { return ( <li key={`${link}-${idx}`}> <SideLink href={link.path}>{link.pathName}</SideLink> </li> ); })} </ul> </nav> <button className={classes.btn}>게시하기</button> </div> ); } interface SideLinkProps { children: ReactNode; href: string; } export default function SideLink({ children, href }: SideLinkProps) { const segment = useSelectedLayoutSegment(); const isSegment = href.slice(1); return ( <Link href={href} className={segment === isSegment ? classes.active : undefined} > {children} </Link> ); } 근데 랜더링이 Sidebar가 서버에서 초기 랜더링 하고 client에서 class 반영한다 라고 이해하고 있는데용 브라우저에서 "페이지 소스보기"를 했더니 이미 class에 active가 반영된 상태로 랜더링 되어있어요 캐시도 지우고 빌드해서 npm start 해봐도 "/home" path에서 소스보기 했더니 class가 반영된 상태로 서버에서 랜더링 되어옵니다. hook에 의한 할당될 class는 비워진 상태로 html를 생성하고 이후 client에서 hook을 이용한 클래스 부여가 된다고 알고 있었는데 왜 서버에서 세그먼트 훅에 의한 class 처리가 되서 오는건지 궁금합니다! 검색해도 명확한 답이 없어서 질문드려요!

  • react
  • next.js
  • react-query
  • next-auth
  • msw
squirrel PARK 댓글 1 좋아요 1 조회수 202

슬랙 채널 개설 안내

해결됨

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

안녕하세요 로펀입니다. 강의를 수강하시면서 공지사항과 질문을 편하게 관리하기 위해 슬랙 채널을 개설했습니다 🙂 강의와 관련된 질문이 있으실 경우 슬랙의 #supabase-nextjs-클론-강의 채널에서 질문 부탁드립니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 제 강의를 수강하시는 모든 분들은 슬랙 채널에 들어오실 수 있습니다. 슬랙에 들어오시면 더 빠르게 질문에 답변을 받아보실 수 있어요! 😉

  • firebase
  • next.js
  • tailwind-css
  • react-query
  • supabase
  • 슬랙채널개설안내
로펀 댓글 1 좋아요 1 조회수 383

500 오류

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

강의 듣고 복습하면서 과제도 푸는 중에 갑자기 인터넷 페이지로 보기 위해 실행을 하니, 500번 오류가 수업(example)랑 과제(practice) 둘다 뜨면서 아무것도 뜨지 않습니다.. import 해오는 부분은 아무 이상이 없고, 과제 같은 경우도 이전에 문제 없었던 페이지에서도 같은 500번 오류가 뜹니다 ㅠ

  • react
  • node.js
  • seo
  • graphql
  • next.js
호롤롤로 댓글 2 좋아요 0 조회수 192

type과 interface를 사용하는 기준이 궁금합니다.

미해결

Next + React Query로 SNS 서비스 만들기

model 폴더에서 PostImage는 interface를 사용하시고 Post컴포넌트에서는 type을 사용하셨는데 두 개를 다르게 사용하는 강사님만의 기준이 있나요 ? 제가 공부한 바로는 간단한 객체 타입일 경우 둘다 사용해도 상관없다. type은 복잡한 유니언 타입을 지정할때 사용한다 interface는 확장이 필요할 경우 사용한다고

  • react
  • next.js
  • react-query
  • next-auth
  • msw
한나릴 댓글 2 좋아요 0 조회수 254

재질문 합니다

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

위와 같이 작성하여 요청하였을 때 이러한 에러가 나타납니다 무엇이 문제일까요? 검색해보니 전에도 질문이 올라왔는데 답변이 안달려있네요 _id 값은 받아와지는데 name과 email 등 다른 정보 요청하면 위와 같은 오류가 나타납니다 AI 답변 말고 강사님 답변 듣고싶습니다

  • react
  • node.js
  • seo
  • graphql
  • next.js
박진성 댓글 2 좋아요 0 조회수 225

fetchUseditems 나 fetchUseditem에 제목이 어떤걸로 사용하나요?

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

판매자: name 2019 LTE 32GB: remarks 240.120원: price 내용: contents 태그: tags 찜: pickedCount 주소: useditemAddress 를 사용을 하는데 "삼성전자 갤럭시탭 A 10.1" 이건 어디서 가져왔는지 모르겠습니다. title은 playground를 봐도 안 나와 있는데 어떤 걸 사용을 해야 하나요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
초무 댓글 2 좋아요 0 조회수 210

보다 직관적으로 수정하면 안되나요?

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

interface IUseMoveToPageReturn { onClickMoveToPage: (path: string) => () => void } export const useMoveToPage = (): IUseMoveToPageReturn => { const router = useRouter() const onClickMoveToPage = (path: string) => () => { void router.push(path) } return {onClickMoveToPage} } 위 처럼 작성 후 <button onClick={onClickMoveToPage("/markets")}>마켓 이동</button> 호출 할 수도 있지만 import { useRouter } from "next/router" export const useMoveToPage = (path: string) => { const router = useRouter() return () => router.push(path) } 보다 직관적으로 하면 인터페이스로 typescript 지정 안하고 <button onClick={useMoveToPage("/boards")}>게시판 이동</button> 호출해서 쓸 수 있지 않나요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
gkdlsb1234 댓글 1 좋아요 0 조회수 202

내가 나에게 채팅을 거는 이유

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요, 강사님, 개발 하는 도중에, test2계정으로 -> test1계정에 메시지를 걸 떄 원래는 test1계정이 나와야하는데, 현재 로그인한 유저의 정보를 불러오는 상황이 생겼습니다.이유가 무엇인지 궁금합니다!! import { HydrationBoundary, QueryClient, dehydrate, } from '@tanstack/react-query'; import style from './profile.module.css'; import UserPosts from './_component/UserPosts'; import { getUserPosts } from './_lib/getUserPosts'; import UserInfo from './_component/UserInfo'; import { auth } from '@/auth'; import { getUserServer } from './_lib/getUserServer'; import { User } from '@/model/User'; export async function generateMetadata({ params }: Props) { const user: User = await getUserServer({ queryKey: ['users', params.username], }); return { title: `${user.nickname} (${user.id})`, description: `${user.nickname} (${user.id})`, openGraph: { title: `${user.nickname} (${user.id}) / Z`, description: `${user.nickname} (${user.id})`, // 프로필 images: [ { url: `https://z.nodebirde.com${user.image}`, // upload width: 800, height: 600, }, ], }, }; } type Props = { params: { username: string }; }; export default async function Profile({ params }: Props) { const { username } = params; const queryClient = new QueryClient(); const session = await auth(); // 사용자 정보 쿼리로 가져옴 await queryClient.prefetchQuery({ queryKey: ['users', username], queryFn: getUserServer, }); // 해당 유저의 게시글 await queryClient.prefetchQuery({ queryKey: ['posts', 'users', username], queryFn: getUserPosts, }); const dehydratedState = dehydrate(queryClient); // 서버쪽에서 쿼리를 해온 것을 나중에 dehydratedState로 받으면 됨. // const user = { // id: 'zerohch0', // nickname: '제로초', // image: '/5Udwvqim.jpg', // }; return ( <main className={style.main}> <HydrationBoundary state={dehydratedState}> <UserInfo username={username} session={session} /> <div> <UserPosts username={username} /> </div> </HydrationBoundary> </main> ); }

  • react
  • next.js
  • react-query
  • next-auth
  • msw
김용민 댓글 1 좋아요 0 조회수 217

소스 수정 후 자동 컴파일 문의드립니다.

미해결

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

1.3 NextJS 설치 편에서 다크모드 설정하는 부분에서 문의드립니다. <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange > {children} </ThemeProvider> 설정 후, 영상에서는 dark, light로 수정하면 반영되는것을 확인할 수 있는데 제 코드에서는 Warning: Extra attributes from the server: class,style 그리고 Warning: Prop className did not match. Server: "__className_aaf875 vsc-initialized" Client: "__className_aaf875" 라는 워닝이 발생하여 자동적으로 반영되지 않는 것을 확인했습니다. 해당 이슈를 수정할 수 있는 방법이 있을까요 ?

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
km.kim 댓글 2 좋아요 1 조회수 307

next-auth session expire 관련 질문이 있습니다.

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요. 우선 강의 너무 잘 보고 있습니다 감사합니다! 강의 내용을 기반으로 NextAuth 관련 작업을 하다가 궁금한 점이 생겼습니다. NextAuth로 signIn 을 할 때 세션 정보가 쿠키에 저장되는데, 이때 max-age 옵션을 따로 설정하지 않으면 기본적으로 1달로 설정되고 있는 것 같습니다. 찾아보니 max-age 값을 최대값으로 설정하려고 해도(예: 4년), NextAuth에서는 자체적으로 최대 1년으로 제한하는 것 같습니다. 여기서 제가 궁금한 것은, NextAuth를 사용하면 쿠키의 max-age 가 최대 1년이고, 그렇다면 1년 후에 세션이 만료되니까 모든 사용자가 로그아웃되는 것인가? 라는 생각이 들었습니다. 세션 저장 기한을 무기한으로 설정하는건 불가능해보이고, 찾아보니 서버 환경에서 세션을 업데이트할 수 있는 unstable_update 라는 함수를 발견했는데 문서에서 해당 함수는 세션 정보를 업데이트하는 것이고 cookie에 저장된 세션 자체의 expire를 조정하는 예시는 나와있지 않아서 이걸 사용하는게 맞는지도 확신이 안드는 상태입니다 ㅠㅠ 지속적으로 접속하는 사용자에 한해서 세션 만료 시간을 연장할 수 있는 방법이 따로 있을까요?

  • next.js
  • next-auth
이자이 댓글 2 좋아요 0 조회수 649

챕터1까지 듣고 질문입니다. 새로고침해도 @modal이 유지되게 할 순 없을까요?

해결됨

Next + React Query로 SNS 서비스 만들기

안녕하세요! 강의 잘듣고있습니다. login 폴더가 불필요한 루트 인 것 같아서 바로 인터셉터 라우터를 이용해 @modal로 연결했습니다. <Link href="/i/flow/login" className={styles.login}>로그인</Link> 또 추가로 새로고침 해도 Modal을 유지하고 싶어서 i/flow/login폴더에서 아래와 같이 마운트시에 인터셉터 하도록 유도하였습니다. "use client"; import { useRouter } from "next/navigation"; import { useEffect } from "react"; export default function Login() { const router = useRouter(); useEffect(() => { router.replace("/i/flow/login"); }, [router]); return null; } 기존 유입방식으로 SSR Page에서 i/flow/login으로 이동 시, 인터셉터 라우팅하여 병렬 라우팅 하던것과 달리, 바로유입 -> i/flow/login -> (replace) -> (.)i/flow/login/page.tsx 순으로 @modal이 출력될줄 알았는데 모달이 출력되질 않네요.. 이유가 i/flow/login으로 바로 접속했기에 상위 폴더 영역에서 {modal}을 선언한 layout을 찾지 못하기 때문에 아무것도 뜨지 않는건가요? 제가 이해한 것이 맞을지 검색해도 잘 안나와서 질문드립니다!

  • react
  • next.js
  • react-query
  • next-auth
  • msw
squirrel PARK 댓글 1 좋아요 0 조회수 234

정적배포

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

안녕하세요 ! 강의를 따라하고있다가 문득 생각이 들었는데요. channel / [id] 이렇게 동적 페이지가 나오게 되면 정적 배포를 하게 될땐 어떤 방식으로 하시게 되나요 ?

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
SJ 댓글 1 좋아요 0 조회수 222

frontend 강의 노션 학습 자료가 전혀 보이질 않습니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

이렇게 다 사라졌습니다. 다른 학습 자료들은 잘 보이는데 갑자기 왜 frontend학습 자료만 안보이는 걸까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
akor1 댓글 1 좋아요 1 조회수 175

zustand 상태관리

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

안녕하세요 ! 강의따라서 zustand 라는 상태관리 지금 사용해보고있는데요 강사님은 현업에서 백엔드와 같이 작업하시면서 zustand 사용하고 계시나요 ?? 만약 사용하고 계신다면 제한사항이나 불편한것들이 있었나요 ??

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
SJ 댓글 1 좋아요 0 조회수 357

state에서 buffer랑 time이 안 나옵니다

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

예시 코드 따라하는데 재생버튼이 계속 안 나오고 로딩바만 돌아가서 state를 찍어보니까 buffer랑 time 값이 저렇게 빈 값으로 나옵니다. 그런데 isLoading으로 로딩스피너 구현하는 걸 제거하고 바로 play, pause버튼 나오게 하면 노래 자체는 재생이 됩니다만 여전히 buffered와 time 부분 값은 빈 값으로 찍힙니다ㅜㅜ 무엇이 문제일까 모르겠습니다... 코드는 몇번이고 똑같은 걸 검토했는데...

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
gksdygks2124 댓글 2 좋아요 0 조회수 222

안녕하세요 공부 방식에 대해 질문드립니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

현재 18강까지 강의를 들었습니다. 수업 방식이 굉장히 효율적이고 짜임새가 있어 독학하기 굉장히 좋다는 느낌을 많이 받았습니다. 근데 저의 공부 방식이 효율적인지 비효율적인지 이 글을 보고 코드캠프 측의 견해를 알려주시면 좋겠다는 생각을 들어 글을 남겨봅니다. 현재 저의 방식은 이렇습니다. ex) 섹션 17, 18강을 듣는다 -> 개념을 노션에 정리하고 이해한다 -> 퀴즈와 포트폴리오를 될 수 있으면 하루에 한개씩 푼다 -> 다 풀기 전에 다음 섹션의 강의를 듣는다 .입니다. 그런데 한 차례의 섹션을 듣고 퀴즈와 포트폴리오를 모두 클리어하고 다음 강의를 듣는게 맞는지, 아님 저처럼 미리미리 들어놓고 다시 한번 재복습 느낌으로 그날그날 해당 섹션의 퀴즈와 포트폴리오를 풀면서찾아보는게 맞는건지 의문이 들어 글을 남겨봅니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
로그 댓글 1 좋아요 1 조회수 202

components 들은 jsx 로 만드신 이유

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

제목과 같이 componets 들에 Sidebar , Header 등은 tsx 로 하지않고 jsx 로 하신 이유가 있나요 ?? ㅎ

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
SJ 댓글 3 좋아요 0 조회수 340

인기 태그

인프런 TOP Writers

주간 인기글