inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

강사님의 로그와 저의 리퀘스트 메모이제이션 로그가 달라요!

미해결

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

넥스트 서버에서 찍히는 로그가 달라서 문의드립니다. 다만 제가 백엔드쪽에서 콘솔을 찍어보니까 넥스트 로그와는 별개로 한번씩만 호출되는걸로 보여지는데 리퀘스트 메모이제이션이 잘 동작하는게 맞는지 궁금합니다 넥스트 로그 네스트 컨트롤러 로그

  • react
  • typescript
  • next.js
baby4 댓글 3 좋아요 1 조회수 312

모듈 에러

해결됨

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

✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 모듈 에러가 뜨는데 수파베이스 설치를 잘못 한 것일까요? 검색해서 이리 저리 해보아도 잘 해결이 되지 않네요. 도와주세요~

  • firebase
  • next.js
  • tailwindcss
  • react-query
  • supabase
댓글 2 좋아요 0 조회수 186

Parallel Route를 사용한 모달에 대해 질문이 있어요.

해결됨

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

하드 내비게이션(새로고침, 직접 URL 접근) 불가라고 하셨는데, default.js를 활용하면, 딥 링킹과 공유 가능 URL을 지원할 수 있는걸까요??

  • react
  • typescript
  • next.js
주구름 댓글 2 좋아요 0 조회수 132

서버 컴포넌트 console.log

해결됨

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

앱 라우터의 데이터 패칭 수업 중 서버 컴포넌트에서 찍은 콘솔창은 브라우저에서는 보이지 않는다고 하시는데 브라우저 콘솔에 아주 잘보이거든여? 제가 잘 못 이해한걸 까요? // 랜덤으로 추천도서 가져옴 async function RecoBooks() { //api로 데이터를 불러오면 타입스크립트는 어떤 결과값을 가져올지 몰라 타입정보를 지정해줘야한다. const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/random` ); //예외처리 필수 if (!response.ok) { return <div>오류가 발생했습니다...</div>; } const recoBooks: BookData[] = await response.json(); //타입 : BookData[] console.log("랜덤 => ", recoBooks); //정상적으로 불러와서 렌더링까지 확인할 수 있다. return ( <div> {recoBooks.map((book) => ( <BookItem key={book.id} {...book} /> ))} </div> ); } export default function Home() { //async 제외 // 인덱스 페이지 return ( <div className={style.container}> {/* section 태그는 div 태그와 이름만 다른뿐 기능은 같다 */} <section> <h3>지금 추천하는 도서</h3> {/*books은 mock폴더안에 임시 배열데이터, list 형태로 렌더링 */} <RecoBooks /> </section> <section> <h3>등록된 모든 도서</h3> <AllBook /> </section> </div> ); }

  • react
  • typescript
  • next.js
ddobbi 댓글 1 좋아요 -1 조회수 181

서버 컴포넌트의 렌더링 과정

해결됨

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

Next.js의 App Router 강의를 듣다가 헷갈리는 부분이 있어서 질문 드립니다! 서버 컴포넌트로 초기 접속을 하게 되면 서버에서 RSC Payload와 HTML을 렌더링해서 브라우저에 보여주는걸까요? 아니면 RSC Payload가 직렬화한 HTML 정보를 가지고 있어서 바로 브라우저에 보내지는걸까요? 공식 문서에는 하이드레이션을 한다고 되어 있는데 하이드레이션을 하게 되면 두 번 렌더링이 되는거 아닌가요?? Link를 통해 서버 컴포넌트로 이동하게 되면 클라이어트 컴포넌트가 이동하는 것처럼 CSR 방식으로 동작을 하는건가요? 만약 동작을 한다 그러면, prefetch된 RSC Payload를 통해서 브라우저가 새로운 UI를 구성하는건가요?

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

소유권을 확인할 수 없습니다.

미해결

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

OAuth 클라이언트 ID를 생성하는데 "소유권을 확인할 수 없습니다. Android 패키지 이름과 디지털 지문이 이미 사용 중이므로 요청이 실패했습니다." 이런 메시지가 떠서 확인을 하는 데도 이유를 모르겠습니다. 오류를 고칠 수 있는 방법을 알려주세요

  • javascript
  • react
  • node.js
  • react-native
  • typescript
README 댓글 2 좋아요 0 조회수 217

navigation.replace() 작동하지 않습니다.

미해결

핸즈온 리액트 네이티브

navigation.replace(MainRoutes.WRITE_TEXT, { photoUris }); 이 부분이 replace로 작동하지 않고 뒤로 가기시 navigate 와 같이 다시 사진선택 화면으로 이동하는데 뭐가 문제인지 몰라서 질문드립니다. git주소는 => https://github.com/dvrakry/rn-photo2 입니다 감사합니다!

  • react-native
dvdve 댓글 2 좋아요 0 조회수 183

stylecomponents 오류

미해결

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

styled-components를 설치하고 import하면 다음과 같은 오류가 발생합니다: runtime not ready: ReferenceError: Property 'document' doesn't exist, js engine: hermes, stack: ... 해결을 위해 시도한 것들은 다음과 같습니다: - import 부분에 /native 잘 붙어 있는지 확인 - Metro 캐시 삭제 후 다시 실행 - styled-components 버전을 낮춰 설치 (5.3.11 등) 하지만 여전히 동일한 에러가 발생해서, 현재는 StyleSheet 방식으로 전환해서 사용하고 있습니다. 혹시 이런 상황에서 styled-components를 안정적으로 사용하는 다른 방법이 있을까요? 아니면 React Native에서는 styled-components를 피하고 StyleSheet를 사용하는 게 나은 선택일까요? 같은 경험을 하신 분이 있다면 공유해주시면 감사하겠습니다!

  • javascript
  • react
  • node.js
  • react-native
  • typescript
이소연 댓글 3 좋아요 0 조회수 352

npx prisma db push 오류 해결 부탁드립니다.

해결됨

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

이미 다른 분들이 동일하거나 비슷한 경우를 많이 올려주셔서 다시 해봐도 도저히 해결이 안되어 문의 글 남깁니다. .env 생성했고... # Connect to Supabase via connection pooling DATABASE_URL="postgresql://postgres.zbjatvpiqrregrejqyok:akswlwlak29@aws-0-ap-northeast-2.pooler.supabase.com:6543/postgres?pgbouncer=true" # Direct connection to the database. Used for migrations DIRECT_URL="postgresql://postgres.zbjatvpiqrregrejqyok:akswlwlak29@aws-0-ap-northeast-2.pooler.supabase.com:5432/postgres" 이렇게 오류가 발생합니다. C:\Users\BANG\Documents\onebite-books-server-main\onebite-books-server-main>npx prisma db push Environment variables loaded from .env Prisma schema loaded from prisma\schema.prisma Datasource "db": PostgreSQL database "postgres", schema "public" at " aws-0-ap-northeast-2.pooler.supabase.com:5432 " Error: Schema engine error: FATAL: Tenant or user not found supabase에서 계속 프로젝트 삭제 후 재생성해보고 비번도 바꿔봐도 동일한 증상입니다. 확인 부탁드립니다.

  • react
  • typescript
  • next.js
p4sh4 댓글 2 좋아요 1 조회수 376

모달 Metadata 질문입니다.

해결됨

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

모달을 열 때는 Metadata가 제대로 설정되지 않고 새로고침 했을 때 메타데이터가 적용되는데 이 부분은 어떻게 해결을 해야 하나요?(주신 예제파일을 그대로 실행해도 같은 결과가 나옵니다.)

  • typescript
  • next.js
Kunkun 댓글 2 좋아요 0 조회수 86

UpdateProfileScreen 에서 사진 버튼 클릭시 오류발생.

미해결

핸즈온 리액트 네이티브

UpdateProfileScreen 에서 <Pressable onPress={() => navigation.navigate(MainRoutes.IMAGE_PICKER)} style={styles.imageButton} >...</Pressable> 여기 클릭 후 ImagePicker.js로 이동시 이 오류가 발생하는 상태인데요 getLocalUri는 onSubmit 누를때 사용하게 되는 상태가 그전에 ImagePicker로 이동한후 getPhotos함수에서 assets 를 가져올때 오류가 발생하는거 같은데... 문제와 해결방법이 뭔지 궁금해서 질문드립니다!. 깃주소는 : https://github.com/dvrakry/rn-photo2 입니다 감사합니다!

  • react-native
dvdve 댓글 2 좋아요 0 조회수 182

4-3 UI 구성하기 화면

해결됨

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

안녕하세요. 15분 23초 부분 전에 화면이 잘린 것 같아 문의드려요. 그 전의 부분에서는 이렇게 썼는데 const OperatorButton = styled(NumberButton)` height: 8%; width: 13%; `; 15분 23초 이후에 갑자기 이 부분이 const OperatorButton = styled.TouchableOpacity로 바껴져 있어요. ㅠㅠ 자동변환인가여? 이해가 안돼요

  • javascript
  • react
  • node.js
  • react-native
  • typescript
이소연 댓글 2 좋아요 0 조회수 127

17-03 백엔드 호스트와 포트 에러

해결됨

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

강의 45:00분에 나오는 host, port, username, password 등을 따라 작성해보고, 노션에 기입된 해당 코드 역시 시도해보았지만, 다음과 같은 에러가 계속해서 발생합니다. 백엔드 프로그램을 실행합니다! 여기서 API를 만들거예요. 여기에 DB에 접속하고, 테이블을 만들 거예요. Error: connect ETIMEDOUT 34.64.244.122:5031 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1634:16) { errno: -60, code: 'ETIMEDOUT', syscall: 'connect', address: '34.64.244.122', port: 5031 } 아래는 index.ts와, Board.postgres.ts 입니다. import { DataSource } from "typeorm" import { Board } from "./Board.postgres." console.log("백엔드 프로그램을 실행합니다!") console.log("여기서 API를 만들거예요.") // // console.log("여기에 DB에 접속하고, 테이블을 만들 거예요.") const AppDataSource = new DataSource({ type: "postgres", host: "34.64.244.122", port: 5031, username: "postgres", password: "postgres2022", database: "postgres", synchronize: true, logging: true, entities: [Board], }) AppDataSource.initialize() .then(() => { console.log("DB에 접속 성공했습니다. 동기화를 시작합니다.") }) .catch((error) => console.log(error)) import { BaseEntity, Column, Entity, PrimaryGeneratedColumn } from "typeorm" @Entity() export class Board extends BaseEntity { @PrimaryGeneratedColumn("increment") number!: number @Column({ type: "text" }) writer!: string @Column({ type: "text" }) title!: string @Column({ type: "text" }) contents!: string }

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
이승엽 댓글 2 좋아요 0 조회수 187

유튜브 영상과의 차이점 문의

미해결

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

유튜브에서도 이미 올려주시는것을 보고 강의도 구매했는데 영상이 꽤 겹치는것 같은데, 인프런 강의에서만 나와있는 영상은 어떤걸까요?

  • react
  • typescript
  • next.js
29999 댓글 1 좋아요 0 조회수 260

template.tsx 가 SEO 에 주는 이점에 대한 질문

해결됨

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

template.tsx 는 페이지 전환 시 새로운 인스턴스를 생성하여 상태가 초기화되는데, 이러한 특성을 활용해 SEO 메타데이터 처리의 정확성과 일관성을 높이기 위한 목적으로 사용하는 것인가요? 즉, 전역 상태나 클라이언트 캐시 등으로 인해 예외적으로 SEO 메타데이터가 적용되지 않는 문제를 방지하기 위한 보완적 수단으로 보면 될까요?

  • react
  • typescript
  • next.js
주구름 댓글 2 좋아요 0 조회수 144

자동화 스크립트 관련하여 질문있습니다.

해결됨

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

스크립트를 수정해 동적 라우팅이나, Route Group 같은 폴더도 고려해서 pathname.ts를 구성해야 될까요?

  • react
  • typescript
  • next.js
주구름 댓글 2 좋아요 0 조회수 125

서버 502 error

해결됨

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

백엔드 서버 키니 이렇게 나오는데 왜이런가요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
민선 댓글 2 좋아요 0 조회수 272

리액트 1강

해결됨

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

선생님 수업 내용 똑같이 따라쳤는데 (바벨도 다운로드 코드도 쳤는데) 라이브서버로 실행시켰을때 (>)신택스 에러뜨면서 안녕하세요 안떠요 ㅠㅠ 리액트나 바벨 설치가 안된거 아닌가요?

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
H Hun 댓글 2 좋아요 0 조회수 89

Vs code 코드 저장하면 정렬 이상하게 되요!

해결됨

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

이런 코드가 ctrl+s 눌러서 저장하면 이렇게 바뀌는데 가독성이 안좋아서 저장해도 가독성좋게 1줄로 하고싶은데 해결방법이 있을까요ㅠㅠ?

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

인기 태그

인프런 TOP Writers

주간 인기글