173만명의 커뮤니티!! 함께 토론해봐요.
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
제목과 같이 npm i react-router-dom@6.25.1로 해서 package.json 에도 "react-router-dom": "^6.25.1", 라고 뜨는데, 레이아웃을 만들수가 없습니다 ㅠㅠ 처음의 App 컴포넌트는 나오는데, home, about, contact 가 그 밑에 나와야 하는데 나오질 않습니다. ㅠㅠ ㅠ
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
react router 사이트에서 최신 스펙에 대한 튜토리얼을 보면, framework mode, data mode, declarative mode 3가지로 나뉘어 있습니다. 여기서 이 3가지 방식은 각각의 tutorial 에서 보여주는 install하는 방법도 다르고, 그 안에서 route 생성하고 layout 만드는것도 코드 방식이 다 갈리는 것 같습니다. 제가 react router 강의를 거의 시작하지 못한 상태이고, 자세히 몰라서 확실하게 말을 할순 없지만, router 를 만드는 방식을 보면, 강좌의 버전과 지금 현재 버전은 달라도, data mode의 튜토리얼에서 설명하는 코드 방식이 강좌와 매우 비슷한것 같습니다. ex) import {createBrowserRouter, RouterProvider} from 'react-router-dom' 으로 시작하는 것이 똑같습니다. 이 3가지 모드는 뭐가 다른건가요? 강좌에서 나온 홈페이지에서도 이런 형식은 아니었던것 같은데 혼란스럽습니다. 일단 저는 npm i react-router-dom 으로 설치했고, 강좌에 나온 코드를 일단 따라가고는 있는데, 최신스펙과 차이를 어떻게 받아들여야 할지 모르겠습니다. 예를 들어, 최신 스펙에서는 설치코드 부터 'npm i react-router'로 뒤에 '-dom'이 붙지 않습니다. 그럼에도 router생성 과정에서 import {createBrowserRouter, RouterProvider} from 'react-router-dom' 과 같이 코드가 거의 똑같은데 어떻게 받아들어야 하나요? 혹시 강사님은 최신스펙의 react router를 사용하시나요? 그렇다면 강좌에 나온 코드 그대로 최신스펙에서 가져다 써도 문제가 없는지 알 수 있을까요?(경험이 있으시다면, 변경된점에 대해도 알고 계실것 같아서요)
미해결
맛집 지도앱 만들기 (React Native & NestJS)
강의 내용대로 설정하고 App 에 <AuthNavigation /> 을 추가하니 아래와 같은 에러가 발생했습니다. 아직 강의를 두 개밖에 듣지 않았는데, 이 에러 때문에 진도를 나가지 못하고 해결하느라 너무 많은 시간을 소모하고 있습니다.
미해결
맛집 지도앱 만들기 (React Native & NestJS)
error Failed to install the app. Command failed with exit code 1: ./gradlew app:installDebug -PreactNativeDevServerPort=8081 WARNING: A restricted method in java.lang.System has been called 위와 같은 에러가 표시되어 안드로이드 시뮬을 킬 수가 없습니다. 방법대로 했는데, 이런 경우 어떻게 해야하나요?
미해결
아바타 커뮤니티앱 만들기 (React Native Expo)
강의 화면 처럼 기기를 오른쪽에 배치하려면 어떻게 해야 하나요
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
지난강의에서 useImmer에서 활용한 update함수에서는 push, splice와 같은 현재의 객체를 변환시키는 api를 활용했었습니다. 그래서 immer 가 적용된 상황에서는, 현재 객체를 변환시키는 것만이 답일것이라 생각해서, 오히려 filter api를 써야 코드가 더 간단해지는 상황에서는 useState를 따로 분리해서 써야 고민하고 있었습니다. 그런데 이번 강의에서 useImmerReducer에서 활용하는 것을 보아하니, State가 아니라 Immer 이 적용된 케이스더라도, return으로 새로운 객체를 반환하거나, 직접 객체에 변화를 주거나 하는 방법이 둘다 적용이 되는것으로도 보이는것 같더라구요? case 'deleted':에서도 draft.filter에 return 이 적용되면, immerReducer라도 잘 작동하고, return을 없애고, break로 나오게 하면, 변화가 아무래도 적용이 안되더라구요(당연하겠죠... 원래 객체에 변화를 준것이 아니니) 그래서 immer나 immerReducer를 활용한다는 것은 useState을 확장시키는 느낌인건가요? 직접객체에 변화를 주는것 뿐만아니라, useState에서 했던것처럼 새로운 객체를 만들어 return하는 것 '까지' 가능한건가요? 만약 immer가 적용된 상황에서, 직접 객체를 변환하는 코드와, 새로운 객체를 만들어 return 하는 코드가 하나에 전부 적용되어 있다면 어떻게 작용하나요? 다시 말해, draft.push로 '변경사항이 immer에 반영되고', 동시에return으로 draft.filter한 값을 보내면, 어떻게 작용하며, 어떤 로직이 적용되나요? 감사합니다
미해결
Next + React Query로 SNS 서비스 만들기
seo 관련해서 궁금한게 있습니다. seo 최적화라는게 크롤링 봇이 서버에서 렌더링된 html을 크롤링하고 인덱싱하는걸로 알고 있습니다. 만약 서버 fetch 를 했지만 data 자체는 렌더링하지 않은 경우는 크롤링 봇이 어떻게 인식을 하는지 궁금합니다. 예를 들어 서버 fetch를 했지만 아래와 같이 서스펜스 역할하는 로직으로 인해 클라이언트 환경에서 hydrate 된 이후에 데이터가 렌더링된다면 서버에서 fetch는 이루어졌지만 렌더링된건 아니기 때문에 크롤링봇이 데이터를 인식하지 못하게 되는걸까요?? export function ConditionalClientWrapper({ children, fallback, }: ConditionalClientWrapperProps) { const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); if (!mounted) return fallback ?? null; return children; } <ConditionalClientWrapper fallback={<Loading />}> //dataList에서 서버 fetch 가 이루어집니다. <dataList /> </ConditionalClientWrapper> SEO 최적화를 위한 조건이 데이터 렌더링인지 단순 서버 fetch 만하면 되는건지 궁금합니다. 추가로 리액트 쿼리의 prefetch를 사용하면 seo 최적화를 가질 수 있는건가요?? 감사합니다!
미해결
아바타 커뮤니티앱 만들기 (React Native Expo)
윈도우 환경입니다. KeyboardAwareScrollView 가 작동이 안되네요. absolute를 없애봐도 안되고.. scrollView를 주석 처리하고 해봐도 안되네요
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
안녕하세요 vite를 설치해서 리액트를 잘 사용하다가 최근 vite를 설치하고 npm run dev로 실행을 하니 아래 이미지와 같은 에러가 계속 나더라구요. 찾아보니 버전과 관련이 되어 있는거 같은데 아무리 찾아봐도 해결이 되지 않더라구요. 현재 vite는 사용하지 못하는건가요?
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
npm init vite@5.2.3 를 통해 설치 후 npm i를 통해 필요한 라이브러리를 다운 받을시에, 터미널 창을 통해 각종 경고 안내가 나옵니다. 예를 들어 하나만 보여드리자면, npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported 입니다. 이처럼 온갖 라이브러리들이 '더 이상 지원하지 않는 버전임'을 명시하고 있는데, 최신 버전을 사용해서 수업을 따라가야 하나요, 아니면 '더이상 지원하지 않는 버전'의 라이브러리를 사용해서 코드를 짜도 이상이 없을까요? 안내해주신 것처럼 라이브러리 버전을 맞춰서 수업을 따라가고 싶은데, 터미널에서 이러한 경고를 보여주니, 버전을 맞출시에 '지원하지 않는 버전'문제로 인한 추가적인 오류가 생길까 걱정됩니다. 요약 1.터미널에서 말하는 '더 이상 지원하지 않는 버전' 안내를 무시하고, 짐코딩님 강의의 라이브러리 버전을 사용해도 문제가 없을까요? 2.최신 버전을 사용하고, 달라진 문법등의 오류를 감당하는게 나을까요? 2번 질문의 문제에 대한 기술적인 지원을, 짐코딩님을 통해 받을 수 있을까요?
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
추가할 todo에 공백이 포함된 상태로 엔터를 입력하면 위와 같이 추가가 되는데 제가 잘못한 부분이 있을까요? https://github.com/juan-rybczinski/learn-react/commit/dba6aab43a96601fed941edfa652e4508f6a88e9
미해결
아바타 커뮤니티앱 만들기 (React Native Expo)
[2-2] 네비게이션 구조 설정 with Expo Router 여기서 최상단 _layout.tsx뿐만 아니라 모든_layout.tsx 에 모두 headershown을 false로 하는 이유가 따로 있는지 궁금합니다!
미해결
아바타 커뮤니티앱 만들기 (React Native Expo)
54강 강의 노트에서 수정 버전으로 작성 시 오히려 에러가 발생하여 질문드립니다! 수정 전에 오히려 문제가 없었는데, 수정 후 발생한 문제에 대해 어떻게 해결하면 좋을 지 답변주시면 정말 감사하겠습니다:) <에러 메시지> 'context.previousPost'은(는) 'undefined'일 수 있습니다.ts(18048)
미해결
아바타 커뮤니티앱 만들기 (React Native Expo)
안녕하세요, Kyo 선생님! 좋은 강의 항상 감사히 듣고 있습니다. 다름이 아니라 한 가지 궁금한 점이 있어 연락드립니다. 저는 고등학생이고, 현재 동아리 프로젝트에 활용하기 위해 리액트 네이티브 강의를 수강하고자 합니다. 그런데 강의 소개에서 리액트 웹 개발 경험자를 대상으로 한다고 하신 것을 보았습니다. 저는 아직 리액트 웹 경험이 없는데, 모르는 컴포넌트나 개념은 따로 찾아보면서 공부하면 강의를 무리 없이 따라갈 수 있을까요? 아니면 리액트 웹을 먼저 공부하고 수강하는 것이 더 좋을까요? 선생님의 조언 부탁드립니다. 감사합니다!
미해결
아바타 커뮤니티앱 만들기 (React Native Expo)
itialized +6ms 📦 Loaded Entities: [ 'Image', 'Vote', 'Like', 'Post', 'Comment', 'User', 'UserVote', 'VoteOption' ] [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RoutesResolver] PostController {/posts}: +92ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RouterExplorer] Mapped {/posts, GET} route +16ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RouterExplorer] Mapped {/posts/my, GET} route +15ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RouterExplorer] Mapped {/posts/user/:id, GET} route +8ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RouterExplorer] Mapped {/posts/search, GET} route +1ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RouterExplorer] Mapped {/posts/:id, GET} route +1ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RouterExplorer] Mapped {/posts, POST} route +2ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RouterExplorer] Mapped {/posts/:id, PATCH} route +4ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RouterExplorer] Mapped {/posts/:id, DELETE} route +1ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RouterExplorer] Mapped {/posts/:postId/vote/:voteOptionId, POST} route +4ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RoutesResolver] AuthController {/auth}: +1ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RouterExplorer] Mapped {/auth/signup, POST} route +2ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RouterExplorer] Mapped {/auth/signin, POST} route +1ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RouterExplorer] Mapped {/auth/me, GET} route +1ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RouterExplorer] Mapped {/auth/me, PATCH} route +0ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RouterExplorer] Mapped {/auth/:id, GET} route +1ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RoutesResolver] ImageController {/images}: +1ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RouterExplorer] Mapped {/images, POST} route +1ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RoutesResolver] CommentController {/comments}: +1ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RouterExplorer] Mapped {/comments, POST} route +1ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RouterExplorer] Mapped {/comments/:id, DELETE} route +2ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RoutesResolver] LikeController {/likes}: +0ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RouterExplorer] Mapped {/likes, GET} route +1ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RouterExplorer] Mapped {/likes/:postId, POST} route +6ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RoutesResolver] NotificationController {/notification}: +1ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RouterExplorer] Mapped {/notification, POST} route +1ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RoutesResolver] AvatarController {/avatar}: +2ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [RouterExplorer] Mapped {/avatar/:type, GET} route +8ms [Nest] 27196 - 2025. 07. 20. 오후 6:58:11 LOG [NestApplication] Nest application successfully started +22ms http://localhost:3030 [Nest] 27196 - 2025. 07. 20. 오후 6:58:18 ERROR [ExceptionsHandler] No metadata for "User" was found. EntityMetadataNotFoundError: No metadata for "User" was found. at DataSource.getMetadata (c:\community\server\server\node_modules\typeorm\data-source\src\data-source\DataSource.ts:450:30) at Repository.get metadata (c:\community\server\server\node_modules\typeorm\repository\src\repository\Repository.ts:53:40) at Repository.count (c:\community\server\server\node_modules\typeorm\repository\src\repository\Repository.ts:487:40) at AuthService.signup (c:\community\server\server\src\auth\auth.service.ts:38:50) at async c:\community\server\server\node_modules\@nestjs\core\router\router-execution-context.js:46:28 at async c:\community\server\server\node_modules\@nestjs\core\router\router-proxy.js:9:17 [Nest] 27196 - 2025. 07. 20. 오후 6:58:18 LOG [HTTP] [POST] /auth/signup (500) (okhttp/4.12.0) 이렇게 오류가나는데 혹시나해서 백엔드 소스코드 자료에서 User도 등록이 되는지 로그찍어봤는데 되있더라구여 회원가입 버튼을 누를때 이 에러가 뜨더라구여..
미해결
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
강사님 강의 잘봤습니다, 개인적으로 만들고 싶은게 있어서 하다가 postgres_changes로 채팅방 기능을 만들어서 배포를 하였는데 로컬에서는 평균 속도가 200ms인데 vercel 무료로 하니까 1.2s 정도 잡히더라구여 그래서 쿼리문제인가 싶어서 컬럼도 필요한것만 가져오고 나름대로 최적화를 진행했는데도 배포에서만 느려가지고 제가 잘못하고 있나... 그래가지고 무료버전이라서 그런지 궁금합니다.
미해결
Next + React Query로 SNS 서비스 만들기
next 공식문서를 살펴보면 단순 서버 fetch (서버액션x) 관련 에러 핸들링 방법은 딱히 안나와 있는 것 같아 질문드립니다. 만약 SectionA, SectionB, SectionC 서버 컴포넌트 내에서 각각 서버 fetch가 일어난다 가정했을 때 SectionB에서만 요청이 실패했다면 SectionB 영역만 fallback ui를 띄우고 나머지 SectionA, SectionC는 정상적으로 데이터를 렌더링하도록 구현하는 방법이 없을까요? error-boundary 라이브러리는 클라이언트 환경에서만 사용가능해 서버 컴포넌트에선 사용할 수 없고 next 내부적으로 설계되어있는 에러 바운더리(error.js 등)는 전역에러를 캐치하는 걸로 알고있습니다. 때문에 페이지 내 특정 영역만 fallback ui를 띄우는 용도는 아닌 것 같더라구요. 혹시 다른 방법이 있나 궁금합니다 감사합니다!!
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
이런식으로 저도 그렇고, 로펀님도 그렇고 material 가져올때 붉은 밑줄이 나오는데, 이거 안 나오게 하는 방법이 있나요?
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
안녕하세요, 강의 내용대로 했는데 500 에러가 나서 확인해보니 한글로 된 파일일 경우 에러를 내는 상황입니다 ㅜ supabase 스토리지에서는 한글로된 이름을 허용하지 않는것 같은데, 따로 해결방법이 있을까요?
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. recoil 이게 next에서 쓸 때에 따로 타입 에러 등 next가 recoil을 못 찾아내는 거 같은데, 강의 진행할때에는 recoil을 쓸거잖아요? 이럴때에는 어떻게 해야 하나요? 버전을 낮추어야 하나요? 낮춘다면 어디 버전까지 낮춰야 할까요?
