inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

UI 뎁스에 관한 질문이 있습니다

해결됨

한 입 크기로 잘라먹는 Next.js

중첩된 라우팅에서 다른 레이아웃 혹은 레이아웃을 사용하고싶지 않을 때 어떻게 제어할 수 있는지 궁금합니다. 현재 소스를 보면 (with-searchbar) search book ... 와 같은 형태로 되어있는 것을 알 수 있는데요 만약에 search가 1 depth 라고 했을 때, search 페이지 아래에 예를 들어 detail-search 라는 주소를 가진 페이지가 있다고 가정할 때 (with-serachbar) serach detail-search 파일 구조 및 중첩된 라우터 구조가 위와 같이 되잖아요? 이 때 detail-search는 with-searchbar 대신 가령 with-detail-serachbar 라던가, 아예 with-searchbar 레이아웃을 사용하고 싶지 않을 수 있잖아요? 이럴 때 어떻게 해야하는지 궁금합니다 😀

  • react
  • typescript
  • next.js
김동훈 댓글 1 좋아요 0 조회수 68

강의에서 사용하는 api 접속 불가

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

안녕하세요~ 강의에서 사용하는 api 2개 다 접속이 안되네요 1번은 외부 서버라 안될수 있는데, 2번은 서버가 죽은 건가요? koreanjson.com http://main-example.codebootcamp.co.kr/graphql

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
김주원 댓글 2 좋아요 0 조회수 146

revalidateTag 에 대해서 질문이 있습니다.

미해결

한 입 크기로 잘라먹는 Next.js

안녕하세요! 좋은 Next.js 강의 덕분에 열심히 배워나가고 있는 학생입니다. 😀 다름이 아니라 revalidateTag를 사용했을 때, 첫 번째 인수로 전달한 태그 값을 가지는 데이터 캐시가 재검증된다고 이해했는데요! 제가 revalidateTag의 인수와 data fetch에 사용되는 옵션의 태그 값을 다르게 세팅해봤는데도 갱신이 되어서요. 제가 잘못 이해한 걸까요..?? 이 부분이 이상해서 질문 남깁니다. 아래는 제가 작성한 코드입니다! createReviewAction export async function createReviewAction(formData: FormData) { const bookId = formData.get('bookId')?.toString(); const content = formData.get('content')?.toString(); const author = formData.get('author')?.toString(); if (!bookId || !content || !author) { return; } // JSON.stringify 객체를 문자열 형태로 직렬화 해서 보내줘야 함 try { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/review`, { method: 'POST', body: JSON.stringify({ bookId, content, author }), }, ); revalidateTag(`revew-${bookId}`); // 일부로 오타 냄 } catch (error) { console.error(error); return; } } ReviewList 컴포넌트 async function ReviewList({ bookId }: { bookId: string }) { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/review/book/${bookId}`, { next: { tags: [`review-${bookId}`] } }, ); if (!response.ok) { throw new Error(`Review fetch faild: ${response.statusText}`); } const reviews: ReviewData[] = await response.json(); return ( <section> {reviews.map((review) => ( <ReviewItem key={`review-item-${review.id}`} {...review} /> ))} </section> ); }

  • react
  • typescript
  • next.js
fud3725 댓글 3 좋아요 0 조회수 105

윈도우 환경입니다.

미해결

아바타 커뮤니티앱 만들기 (React Native Expo)

import DescriptionInput from "@/components/DescriptionInput"; import TitleInput from "@/components/TitleInput"; import { FormProvider, useForm } from "react-hook-form"; import { StyleSheet } from "react-native"; import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"; type FormValues = { title: string; description: string; }; export default function PostWriteScreen() { const postForm = useForm<FormValues>({ defaultValues: { title: "", description: "", }, }); return ( <FormProvider {...postForm}> <KeyboardAwareScrollView contentContainerStyle={styles.container}> <TitleInput /> <DescriptionInput /> <DescriptionInput /> <DescriptionInput /> <DescriptionInput /> <DescriptionInput /> <DescriptionInput /> <DescriptionInput /> </KeyboardAwareScrollView> </FormProvider> ); } const styles = StyleSheet.create({ container: { margin: 16, gap: 16 }, }); KeyboardAwareScrollView를 써도 여전히 키보드가 입력창을 가리는데 이유가 뭔지 잘 모르겠습니다.

  • react-native
  • typescript
  • expo
  • react-hook-form
  • react-query
성혜람 댓글 3 좋아요 0 조회수 125

강의 커리큘럼에 대해 질문이 있습니다.

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

안녕하세요 강의를 구매 후 듣다가 일이 생겨서 오랜만에 다시 공부하려고 하는데 커리큘럼을 다시 보니 처음에 html, css 강의 순서대로 나오다가 js가 나오고 또 섹션04부분에서 다시 css가 나오고 또 js가 나오더라구요 그래서 이 부분이 헷갈리는데 그냥 처음부터 순서대로 강의를 들으면 될까요?

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
부드러운 족제비 댓글 2 좋아요 0 조회수 128

강의자료가 제공되는것으로 아는데, 어디서 받을 수 있나요?

해결됨

비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

현재 수강 진도를 함께 알려주세요! "1주차 3강까지 완료" 또는 "2주차 실습 중"처럼 어디까지 들으셨는지 적어주시면 맞춤형 답변을 드릴 수 있어요 2-3강 구체적인 상황과 함께 질문해주세요! "AI가 안 된다"보다는 "Cursor에서 이런 프롬프트를 입력했는데 이런 에러가 나와요"처럼 상세하게 적어주시면 더 정확한 답변을 드릴 수 있어요 스크린샷이나 코드를 첨부해주세요. 에러 화면, 현재 진행 상황을 보여주시면 문제 해결이 10배 빨라집니다! 마크다운 코드 블록(```)을 활용하면 더 깔끔하게 정리할 수 있어요 커뮤니티 검색을 먼저 해보세요. 같은 문제로 고민하신 분들이 이미 해결책을 찾았을 수도 있어요. 검색 후 못 찾으시면 언제든 새로 질문해주세요! 서로 도우며 함께 성장해요. 나도 모르는 건 "저도 궁금해요!"라고 댓글 달아주시고, 아는 건 적극적으로 공유해주세요. 가르치면서 더 잘하게 됩니다 바이브코딩 관련 질문은 환영, 기술 세부사항은 GPT 활용! 프롬프트 작성법, AI 도구 사용법은 여기서, 복잡한 코딩 문법은 ChatGPT에게 물어보시는 게 더 빨라요 진도나 과제 관련 문의는 1:1 문의를 이용해주세요. 개인적인 학습 계획, 환불, 수강 기간 연장 등은 따로 문의해주시면 더 자세히 상담드릴게요 실패 사례도 공유해주세요! "이렇게 했더니 망했어요" 같은 경험담도 다른 수강생들에게 큰 도움이 됩니다. 실패도 소중한 학습 자료예요 좋은 질문 예시 [진도] 2주차 5강 - React 컴포넌트 생성까지 완료 [질문] Cursor에서 버튼 컴포넌트 생성 시 에러 발생 상황: 2주차 실습 중 버튼 컴포넌트를 만들려고 하는데 프롬프트: "빨간색 버튼 컴포넌트 만들어줘" 에러 메시지: [스크린샷 첨부] 시도해본 것: GPT에게도 물어봤는데 같은 에러 발생 어떻게 해결하면 될까요?

  • flutter
  • next.js
  • cursor
  • supabase
  • 바이브코딩
man ai 댓글 3 좋아요 0 조회수 173

svg질문

미해결

따라하며 배우는 리액트 네이티브 기초

안녕하세요 react-navie 강의중 18강 보고 있는데요 svg 잘 설치 되어있고, 이미지도 잘 넣었는데 저는 이미지 스타일 편집하는게 안보이고 svg 파일 클릭을 하면 svg 파일 모양만 보이고 있어서 svg 테스트시 화면에 이미지 너무 크게 보입니다. 툴에서 어떻게 설정하면 svg 스타일이 보일까요?

  • react
  • react-native
  • expo
kimdk1406 댓글 1 좋아요 0 조회수 91

윈도우 -> 맥 파일 옮기기 / 실행

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

안녕하세요! 지금까지 수업을 윈도우 노트북으로 듣고 있었습니다. 그런데 노트북에 문제가 생겨 새로운 노트북으로 구매 후 파일을 옮기려고 하는데 이번에 구매한 노트북 운영체제 맥os입니다. 간편하게 옮기고 빠르게 실행 할 수 있는 방법이 있을까요?? 일단 node, npm, yarn까지 다운 받은 상태 입니다.

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
skykwj0422 댓글 1 좋아요 0 조회수 161

커서 유료버전 써야하나요?

미해결

제로베이스부터 배우는 웹개발의 개념과 바이브 코딩

현재 2주 free같은데 claude3.5 3.7 4 등등 모든 버전에서 코드짜는게 안되고 Anthropic's latest models are currently only available to paid users. Please upgrade to a paid plan to use these models. (Request ID: aec9ae0d-5eb4-4514-a54e-478383ef2f0a) 라고 뜹니다. Free users can only use GPT 4.1 or Auto as premium models (Request ID: 849c6230-8e63-4751-9b03-9def2bab9e86) 라고 뜰 때도 있고요

  • react
  • 웹앱
  • next.js
  • cursor
  • 인공지능(ai)
ㄹㄹㄹ 댓글 2 좋아요 0 조회수 1391

next Request Memoization과 react cache

미해결

Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로

next.js에서 제공하는 Request Memoization 기능은 같은 엔드포인트 경로로 여러 개의 요청이 들어왔을 때 하나의 요청으로 캐싱해주는걸로 알고있습니다. 이와 관련해서 3가지 궁금증이 있습니다. Request Memoization 기능은 같은 페이지 한정인가요. 아님 프로젝트 전역에 적용되는걸까요?? 예를 들어 /dashboard 와 /home 두 페이지 모두에서 getUserInfo 라는 fetch 함수를 호출한다면 이 경우도 Request Memoization 이 적용되는건가요. 만약 같은 엔드포인트지만 넘겨주는 파라미터가 다를 경우도 Request Memoization이 적용되나요? axios를 사용한다면 Request Memoization 기능을 활용할 수 없는걸로 알고있는데 react에서 제공하는 cache 함수를 사용하면 동일한 효과를 기대할 수 있나요? 감사합니다!!

  • react
  • typescript
  • next.js
변재정 댓글 1 좋아요 0 조회수 96

next Request Memoization과 react cache

미해결

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

next.js에서 제공하는 Request Memoization 기능은 같은 엔드포인트 경로로 여러 개의 요청이 들어왔을 때 하나의 요청으로 캐싱해주는걸로 알고있습니다. 이와 관련해서 3가지 궁금증이 있습니다. Request Memoization 기능은 같은 페이지 한정인가요. 아님 프로젝트 전역에 적용되는걸까요?? 예를 들어 /dashboard 와 /home 두 페이지 모두에서 getUserInfo 라는 fetch 함수를 호출한다면 이 경우도 Request Memoization 이 적용되는건가요. 만약 같은 엔드포인트지만 넘겨주는 파라미터가 다를 경우도 Request Memoization이 적용되나요? axios를 사용한다면 Request Memoization 기능을 활용할 수 없는걸로 알고있는데 react에서 제공하는 cache 함수를 사용하면 동일한 효과를 기대할 수 있나요? 감사합니다!!

  • react
  • next.js
  • react-query
  • next-auth
  • msw
변재정 댓글 2 좋아요 0 조회수 135

카카오 로그인이 안됩니다.

미해결

React Native with Expo: 제로초에게 제대로 배우기

//app\login.tsx import { initializeKakaoSDK, getKeyHashAndroid } from "@react-native-kakao/core"; const onKakaoLogin = async()=>{ console.log(await getKeyHashAndroid()); try{ const result = await kakaoLogin(); // 로그인 완료될 때까지 대기 console.log("로그인 결과:", result); } catch (error) { console.error("로그인 실패:", error); } }; 코드를 이렇게 작성해서 콘솔창에 출력된 키 해시를 kakao dev 홈페이지에도 등록했습니다. 이 화면까지는 잘 뜨는데, accept and continue를 눌러도 다시 앱으로 돌아가지도 않고 콘솔창에도 access token과 같은 로그인 여부 로그가 안뜹니다..

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
dbrud5804 댓글 3 좋아요 0 조회수 553

러버블에 대한 궁금한 점입니다.

해결됨

비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

러버블과 n8n과 같은 것을 연동하는 이유는 무엇일까요? 러버블로 프로젝트 제작을 해봤는데요. 유뷰트 스크립트를 가져오려고 외부 라이브러리를 설치해서 스크립트를 가져오게 하는 방법을 사용하려고 하고 있는데요. 계속 스크립트를 가져오지 못하고 있습니다. 이와 같은 경우는 러버블이 할 수 없는 영역이라고 봐야 할까요?

  • flutter
  • next.js
  • cursor
  • supabase
  • 바이브코딩
양승근 댓글 1 좋아요 0 조회수 228

그랩님, 상품 상세 페이지 에러와 의문점 질문드립니다.

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩님, 강의 잘 듣고 있습니다. 다름이 아니라, 상품 상세 페이지 에러와 의문점이 있어서 어떻게 해결해야 하는지 궁금한 사항이 있어 질문 드리게 되었습니다. 일단 src/main/index.js 소스 코드를 첨부합니다. import './index.css'; import axios from "axios"; import React from 'react'; import {Link} from 'react-router-dom'; function MainPage(){ const [products, setProducts]=React.useState([]); React.useEffect( function(){ axios.get("제 mock 서버 주소 넣었습니다/products") .then(function(result){ const products=result.data.products; setProducts(products); }).catch(function(error){ console.error("에러 발생:",error); }); },[]); return ( <div> <div id="header"> <div id="header-area"> <img src="../images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="../images/banners/banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"> { products.map(function(product, index){ return ( <div className="product-card"> <Link className="product-link" to={`/products/${product.id}`}> <div> <img className="product-img" src={product.imageUrl} /> </div> <div className="product-contents"> <span className="product-name">{product.name} </span> <span className="product-price">{product.price}원 </span> <div className="product-seller"> <img className="product-avatar" src="../images/icons/avatar.png" /> <span>{product.seller}</span> </div> </div> </Link> </div> ); }) } </div> </div> <div id="footer"></div> </div> ); } export default MainPage; 2.src/product/index.js 소스 첨부합니다. import {useParams} from 'react-router-dom'; import axios from "axios"; import { useEffect, useState } from 'react'; function ProductPage(){ // const params=useParams(); const {id} = useParams(); const [product, setProduct] = useState(null); useEffect(function(){ axios.get('제 mock 서버 주소 넣었습니다/products/${id}' ) .then(function (result) { setProduct(result.data); // console.log(result); }).catch(function(error){ console.error(error); } ); },[]); console.log(product); // console.log(params); return <h1>상품 상세 페이지 {id} 상품</h1>; } export default ProductPage; -->여기서부터 의문점과 문제점이 발생하게 되니 읽어주시고 해결할 수 있는 방법을 알려주시면 좋겠습니다. 위 소스에서 axios.get('제 mock 서버 주소 넣었습니다/products/ ${id}') 처럼 소스를 달러 중괄호 아이디 입력하면 , 아래와 같은 첨부 사진처럼 에러 가 납니다. --> 위 에러 첨부 사진은 어떻게 해결해야 할까요? 3. 하지만, 위 소스대로 입력 안하면 axios.get('제 mock 서버 주소 넣었습니다 /products/1 ') 하면 제대로 데이터를 오류 없이 아래 첨부 사진처럼 받아 오는 것 을 알 수 있습니다. 3-1. 그랩님, 강의 소스에서 처럼 axios.get('제 mock 서버 주소 넣었습니다/products/ ${id} ')해서 하면 위 첨부 사진 처럼 에러가 나는데요, 성공적으로 오류 없이 불러오고 싶은데요 , 어떻게 해야 하나요? 단계별로 어떻게 소스를 수정해야하는지 알려주시면 좋겠습니다. 확인하시면 답변 부탁 드립니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
isbcom1004 댓글 2 좋아요 0 조회수 128

[2-0] Stack Navigation 에러

미해결

맛집 지도앱 만들기 (React Native & NestJS)

강의 내용대로 설정하고 App 에 <AuthNavigation /> 을 추가하니 아래와 같은 에러가 발생했습니다. 아직 강의를 두 개밖에 듣지 않았는데, 이 에러 때문에 진도를 나가지 못하고 해결하느라 너무 많은 시간을 소모하고 있습니다.

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
댓글 2 좋아요 0 조회수 95

TypeError: Invalid URL

미해결

Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)

안녕하세요, 1) 강사님 깃코드에서 코드 clone해서 가져온 후 2) 노션 환경 변수 세팅 3) npm run dev 실행하니까 localhost:3000에서 저런 에러가 뜨네요 어떻게 해결하면 될까요?

  • react
  • 블로그
  • next.js
  • cursor
  • cursorai
댓글 2 좋아요 0 조회수 220

프로젝트 생성 시 android 폴더 오류 및 npm run android 실행 오류

미해결

맛집 지도앱 만들기 (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
  • typescript
  • nestjs
  • react-query
  • zustand
gmobc 댓글 4 좋아요 0 조회수 298

앱라우팅 방식의 네비게이팅 방식

해결됨

한 입 크기로 잘라먹는 Next.js

1. 앱 라우터에서는 왜 페이지 이동 전에 프리패칭(prefetching)이 이뤄지지 않는 것처럼 보일까요? 페이지 라우터(Page Router) 방식에서는 링크가 뷰에 등장하면 해당 링크의 JS 번들이 자동으로 프리패칭되는 것으로 알고 있습니다. 그런데 앱 라우터의 동작 구조를 설명한 도식(2번 사진)에서는, 사용자가 실제로 페이지 이동을 요청한 이후에 JS 번들과 RSC Payload를 받는 것으로 표현되어 있습니다. 페이지 라이팅과 달라진 점이 RSC payload를 보내주는 것이라 하셨는데 도식에서는 언제 JS 번들을 보내주는지에 차이가 있어보여서 질문드립니다. 2. 앱라우터 방식에서 클라이언트 컴포넌트만 JS 번들에 포함된다는 설명과 관련해서, 다음 내용이 맞는지 확인 부탁드립니다. 초기 접속 시 서버에서 서버컴포넌트를 RSC 페이로드로 해석하고 완성된 HTML을 보내준다. 초기 접속 시 브라우저는 해당 페이지의 클라이언트 컴포넌트 JS Bundle만 받는다. 이후, JS Bundle과 HTML을 하이드레이션 한다. 페이지 전환 시, 새로 이동하는 페이지의 JS Bundle과 함께 서버 컴포넌트에 대한 RSC Payload도 함께 받아 브라우저에서 조합된다. 즉, 페이지 전환 전에 프리패칭이 없다. 이렇게 이해하는게 맞을까요?

  • react
  • typescript
  • next.js
kos7662 댓글 2 좋아요 0 조회수 112

새로운 모듈 설치시 모듈 없음.

미해결

React Native with Expo: 제로초에게 제대로 배우기

expo-location 때부터 모듈을 설치를 해도 해당 모듈이 없다는 메시지가 뜹니다. eas build --platform android --profile development 명령어로 새로 빌드하면 되긴 하는데, 모듈 하나 설치할 때마다 빌드하면 5분씩 넘게 걸리는데 다른 방법이 있을까요? 아니면 제가 놓치고 있는게 있을까요?

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
main 댓글 3 좋아요 0 조회수 174

인기 태그

인프런 TOP Writers

주간 인기글