inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

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

미해결

기초부터 배우는 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 조회수 314

챕터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 조회수 236

아코디언 (3/6) css transition 추가 부분 max-height 질문

해결됨

[React / VanillaJS] UI 요소 직접 만들기 Part 1

안녕하세요, 수강 중에 css transition 파트에서 궁금증이 생겨 질문 드립니다. max-height 속성을 이용해서 애니메이션을 적용해주셨는데, 아래 방식처럼 height를 0, auto로 애니메이션 주는 것과 차이가 있을까요? .item3 { overflow: hidden; .description { padding: 0 15px; border-bottom-width: 0; // max-height: 0; height: 0; transition: ease 0.3s; } &.current .description { padding: 15px; border-bottom-width: 1px; // max-height: 300px; height: auto; } }

  • react
  • typescript
  • dom
  • ui
  • vanilla-js
보나 댓글 2 좋아요 1 조회수 452

강의 정리에 대한 블로그 정리 글 게시 문의

해결됨

[React / VanillaJS] UI 요소 직접 만들기 Part 1

안녕하세요 강의를 들으면서 정리하는 데 블로그에 게시글로 같이 올려도 가능한지 문의드립니다 예를 들어 아코디언을 듣고 코드와 주석 및 정리한 내용들을 바탕으로 출처와 함께 글을 올리는 것입니다 따로 강의 코드에 대한 github이 없는 것 같아 여쭤봅니다 !

  • react
  • typescript
  • dom
  • ui
  • vanilla-js
codinglego 댓글 1 좋아요 0 조회수 327

잘 배우고있었는데 ㅠㅠ

미해결

React & Express 를 이용한 웹 어플리케이션 개발하기

이제 조금씩 알아가는 과정중에 강의가 딱 끊겨서... 저도 배움이 딱 끊기는 기분이 드네요 ㅠㅠ 페이지 내 라우터라든가...실전에서 백엔드 api 연결해서 데이터 가져오는 부분이라든가 강의 볼려면 어디로 가서 이후 버전을 배워야 할지 걱정이네요 ㅠㅠ 실전 코드들을 보고싶습니다.

  • react
odark 댓글 1 좋아요 0 조회수 327

정적배포

해결됨

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

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

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

안녕하세요, 단위 테스트 대상 관련해서 질문있습니다.

미해결

실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트

web api인 IntersectionObserver을 활용한 훅이 있는데요, 훅은 독립적으로 동작되기 때문에 단위 테스트 대상이라고 말씀하셨는데, 궁금한점은 web api를 활용한 훅은 단위테스트 대상일까요? 테스트 환경이 다르고 web api는 이미 검증된 api이기 때문에 단위테스트 대상에서 제외 했거든요 만약 단위 테스트 대상이라면 web api를 모킹해서 훅을 통해 반환한 값들을 확인 하면될까요? 단위테스트 대상이 아니라면 통합테스트에서 해당 훅을 제대로 호출해서 사용하는지만 확인하면 될까요?

  • javascript
  • react
  • 소프트웨어-테스트
  • vitest
TAEHEE JANG 댓글 1 좋아요 0 조회수 201

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 조회수 363

감정일기장에서 일기추가와 정렬기능이 되지않습니다.

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

https://github.com/heeyoung123/OneBite 안녕하세요 감정일기장 부분에서 문제가 2가지 생겨서 질문 남깁니다. 일기 작성 후 리스트에 렌더링이 되지않습니다.임시일기데이터에서 정렬을 최신순,오래된순을 바꿔도 적용이 안됩니다.무엇이 문제일까요..

  • javascript
  • react
  • node.js
댓글 2 좋아요 0 조회수 231

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 조회수 231

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

해결됨

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

현재 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 조회수 347

팔로우 게시글 불러올 때 내 게시글이 가져와지는 문제

해결됨

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

getFollowingPosts 호출 시 내 게시글들이 불러와집니다. credentials: 'include' 제대로 넣어줬는데 원인을 모르겠습니다. 무한스크롤은 적용했고 팔로잉은 아직 없는 상태입니다. getFollowingPosts type Props = { pageParam?: number; }; export async function getFollowingPosts({ pageParam }: Props) { const response = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/posts/followings?cursor=${pageParam}`, { next: { tags: ['posts', 'followings'], }, credentials: 'include', cache: 'no-store', }, ); if (!response.ok) { throw new Error('Failed to fetch data'); } return response.json(); } FollowingPosts 'use client'; import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query'; import { getFollowingPosts } from '../_lib/getFollowingPosts'; import Post from '../../_components/post'; import type { Post as IPost } from '@/model/post'; import { useInView } from 'react-intersection-observer'; import { Fragment, useEffect } from 'react'; export default function FollowingPosts() { const { data, fetchNextPage, hasNextPage, isFetching } = useInfiniteQuery< IPost[], Object, InfiniteData<IPost[]>, [_1: string, _2: string], number >({ queryKey: ['posts', 'followings'], queryFn: getFollowingPosts, initialPageParam: 0, // required getNextPageParam: (lastPage) => lastPage.at(-1)?.postId, // required staleTime: 60 * 1000, gcTime: 300 * 1000, }); const { ref, inView } = useInView({ threshold: 0, delay: 0, }); useEffect(() => { //. inView: ref가 화면에 보일 때 //. !isFetching: 패칭상태 아닐때 (중복 패칭 방지) //. hasNextPage: 다음 페이지가 있을 때 console.log('useEffect', { inView, isFetching, hasNextPage }); if (inView && !isFetching && hasNextPage) { fetchNextPage(); } }, [inView, isFetching, hasNextPage, fetchNextPage]); return data?.pages.map((page, index) => ( <Fragment key={`posts-followings-page-${index}`}> {page.map((post) => ( <Post key={post.postId} post={post} /> ))} {!isFetching && <div ref={ref} style={{ height: 50 }}></div>} {isFetching && <div style={{ height: 50 }}></div>} </Fragment> )); } response에는 내 게시글들이 담겨옵니다 서버쪽 PostsService findAll 콘솔 찍어보면 유저정보 제대로 받아옵니다 { cursor: 0, type: 'followings', user: { id: 'asdf', nickname: '슈퍼맨', image: '/upload/dummy1719568724038.png' } }

  • react
  • next.js
  • react-query
  • next-auth
  • msw
andante 댓글 1 좋아요 0 조회수 273

유저정보 유지관련해서 세션쿠키, 엑세스토큰 질문드립니다.

미해결

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

안녕하세요 선생님 선생님강의 따라서 로그인을 구현했습니다. auth에서 관리해주는 세션으로는 프론트용, 로그인 후 내려주는 connect.id 세션으로는 백엔드용, 으로 사용했습니다. 그런데 궁금한게 로그인을 하고 기간이 지나거나 그런 경우를 대비해서 엑세스토큰, 리프레시 토큰을 많이 사용하는 것을 보았는데 선생님은 넥스트에서 어떤 방식을 사용하시는지, 어떤방식을 추천하시는지 궁금합니다. 검색해보니까 엑세스토큰이 아닌 쿠키세션으로 사용할때에는 일정시간 inter시켜주고 특정시간지나면 쿠키시간을 업데이트해주기도 하더라구요. 선생님 조언이 궁금합니다. 감사합니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
챠챠_ 댓글 1 좋아요 0 조회수 211

부트 프로젝트 생성 시

미해결

코드로 배우는 React 19 with 스프링부트 API서버

부트 프로젝트 생성 시에 jdk 버전을 17로 해도 따라서 학습하는데에 지장 없나요??

  • react
  • spring-boot
  • jdk
조영서 댓글 1 좋아요 0 조회수 247

Cannot return null for non-nullable field ~~~ 에러

미해결

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

위와 같이 작성하여 요청하였을 때 이러한 에러가 나타납니다 무엇이 문제일까요?

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

3:07에 const result = 입력하는 부분은 복붙인가요??

해결됨

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

플러그인이나 단축키가 따로 있는지 기존에 작성하신 코드 복사 붙여넣기인지 궁금합니다.

  • react
  • 클론코딩
  • next.js
  • supabase
정중한 몽구스 댓글 1 좋아요 0 조회수 192

안녕하세요 배포관련 질문드립니다 !

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요 배포를 마쳐서 이런식으로 떠서 Production 링크를 누르면 저는 잘 들어가지는데 이 링크를 공유를 하면 다른사람들은 Vercel에 로그인을 하라는 창이 뜨더라고요,,, 어떤 해결방안이 있을까요,,,

  • javascript
  • react
  • node.js
kjklovekhw 댓글 1 좋아요 0 조회수 259

7-37번 강의 관련 커밋 페이지 오류인것같습니다.

미해결

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

7-37번강의에 관련 커밋으로 아래 처럼되어 있는데 delete 예시 url이 잘못연결되어 있는것같습니다. pre_save 예시 : slugify 자동 호출 post_save 예시 : User 생성 시에 Profile 자동 생성 post_delete 예시 : Profile 삭제 시에 관련 이미지 파일 자동 삭제 django-lifecycle 예시 : blog.Post의 content/status 변경 탐지 연결되야할 페이지: https://github.com/pyhub-kr/course-django-complete-guide-v3/commit/563749a5be33f10ec46a166faf29bbaa0e1d7144 현재 연결된 페이지: https://github.com/pyhub-kr/course-django-complete-guide-v3/commit/714c274e0d6f26b68aa5bc75a9bf2a78c924633c 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

  • react
  • python
  • django
  • web-api
  • htmx
백종성 댓글 1 좋아요 0 조회수 143

인기 태그

인프런 TOP Writers

주간 인기글