inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

next-auth 사용이유

미해결

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

안녕하세요 섹션4의 next-auth 를 수강하고있습니다. next-auth를 사용하는 이유가 무엇인가요? 보통 백엔드에서 로그인 기능을 구현하는 것이 일반적이라고 알고 있습니다. next-auth는 백엔드가 로그인 기능을 구현하지 않았을 때 사용하는 것인가요? 아니면 이미 백엔드에서 구현한 로그인 API를 사용하기 위해서도 next-auth를 사용하는 경우가 있나요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
찹찹이 댓글 1 좋아요 0 조회수 312

Next15의 서버사이드 렌더링과 서버 컴포넌트

미해결

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

안녕하세요! Next 강좌를 보던 중 헷갈리는게 있어 질문을 올리게 되었습니다! 다름이아니라, 현재 next15에서 getServerSideProps 등이 사라진걸로 알고있는데 그럼 서버사이드 렌더링을 서버 컴포넌트로 대체하는건지 여쭤보려고 합니다! 서버사이드 렌더링과 서버 컴포넌트는 다른 개념이라고 알고있는데 결국 서버사이드 렌더링을 서버 컴포넌트를 이용해서 구현하는 것인지,, 그게 궁금합니다!

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

안녕하세요

해결됨

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

안녕하세요, 혹시 최초 프로젝트 생성할때, nextjs15버전으로 설정되었는데 괜찮을까요? 14로 다운그레이드 해야할까요?

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

macOS개발환경 세팅

해결됨

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

안녕하세요 현재 macOS를 사용해서 개발환경을 세팅하고 있는데요. 저는 원래 iOS 개발을 하고있어서 기본적으로 xcode와 cocoaPods가 깔려있어서 iOS개발관련해서는 별도로 셋팅할게 없었는데요. Android의 경우에는 한번도 개발해본적이 없어서 셋팅이 필요합니다. Chocolatey, 등이 필요한건가요? 아님 Chocolatey와 Windows 파워쉘은 Window 세팅의 경우만 필요한건가요? 저는 그냥 안드로이드 스튜디오만 설치하면 되는 걸까요?

  • react-native
  • 환경셋팅
김라영 댓글 2 좋아요 0 조회수 161

회원가입시 왜 리다이렉트 안되죠?

미해결

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

회원가입후 회원가입완료되면 자동으로 메인페이지 이동해야 하는데, 라이디렉트가 안되고 있습니다. db는 확인해보니 제대로 전송되고 있고요. 데이터 또한 정상적으로 200 떠서 넘김 처리한거 같은데 뭐가 말썽인지 모르겠습니다. 기존꺼 듣다가 15로 업데이트 해서 패키지로 기존에 싹다 날리고, npm i로 다시 설치 했습니다. 그래도 안되서 문의드려요. 1. env, 2.handler, 3.browser, 4.https, 5.auth 6.기타 컴포넌트 그대로 복사해서 붙여놨는데도 문제가있네요. 그리고 추가로 가입하기 버튼후 새로고침 안하면 계속 대기중으로 표시되는것 같습니다. 회원가입 시 프론트서버 회원가입 시 백엔드 서버(npm run start:dev) 회원가입시 브라우저콘솔( 이부분은 확인해보니 매우느리게 status가 200으로 처리가 되었네요) 확인사항: 방금 https://github.com/ZeroCho/next-app-router-15 으로 그대로 zip파일열어서 그대로 실행시켜 봤는데 제 코드랑 같은 현상이 일어나는걸로 봐서는 백엔드 혹은 백엔드와 상호작용에서 뭔가 문제가 있는것 같은데 혹시 문제해결을 알수있을까요? *추가로 새로보시는 분들은 상관없는데, 기존에 보시다가 변경되신 분들은 지금 강의 너무 혼란스럽습니다. 진행자 입장에서는 크게 변한게 없다고 하겠지만, 시청하는 입장에서는 패키지 버전부터, 기타 등등 이 바꼈고, 이해안가는 부분만 해당 강의를 시청할려고 다시 듣는데 기존꺼랑 새로운거랑 그냥 아예 섞여버려서 강의가 가독성이 지금 너무 떨어지고있습니다. 인트로부분에 15버전수정은 15버전이라고 기재한다고 했는데, 그것도 일부분만 하고 나머지도 슬쩍 변경이 됬는데, 아예 기존것처럼 해놔서 더 혼동이 오네요. 차라리 업데이트를 한번에 하시지 왜 진행도중에 하시는지 ..조금 불편합니다.. 나중에 참고해주시면 감사하겠습니다.

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

window - mac 협업 과정 질문합니다

미해결

배달앱 클론코딩 [with React Native]

안녕하세요 제로초님 현재 저희는 두명이서 같이 rn 으로 앱을 만들려고하는데요 한사람은 window이고 한사람은 mac을 이용하는 상황입니다. 그래서 깃을 통해 파일을 하나로 통합시켜 진행하려고 하는데 window개발자가 개발해놓은 파일을 Git-clone해보니 mac에서 안돌아가고(android 빌드 까지는 되는데, ios 빌드에서 자꾸 RCTAppDelegate import에 대한 오류가 발생합니다) 그래서 반대로 mac에서 먼저 프로젝트를 새로 만든 후, ios, android에서 모두 빌드가 되는 것을 확인한 후에 window로 넘겨주니 또 window에서 빌드 오류가 생깁니다.. 1. 원래 운영체계가 다른 두 컴퓨터로 하나의 프로젝트를 개발하는 것이 잘못인 건가요? 2. 그게 아니라면 통합하는 매뉴얼같은게 있을까요? 3일째 일을 못하고 이거에만 시간쓰다 도저히 모르겠어서 질문드립니다..감사합니다

  • react-native
조호연 댓글 1 좋아요 0 조회수 236

antd 적용

미해결

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

antd 편해서 적용하려는데 문제없나요? styled component 문제있다하셔서 css module로 커스텀하려는데 인라인 스타일로 커스텀하면되나요?

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

checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>() 에러?

해결됨

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

한입 잘라먹는 NEXT.JS 강좌 풀라우트 캐시 2 4분 30초 쯤에 Suspense 를 사용하여 next run build 를 하는 과정이 있습니다 그런데 Type error: Type '{ searchParams: { q?: string | undefined; }; }' does not satisfy the constraint 'PageProps'. Types of property 'searchParams' are incompatible. Type '{ q?: string | undefined; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag] 32 | 33 | // Check the prop type of the entry function > 34 | checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>() | ^ 35 | 36 | // Check the arguments and return type of the generateMetadata function 37 | if ('generateMetadata' in entry) { 계속 이런 에러가 발생해서 구글링 해서 찾아보면 components 및 해당 app 폴더 안에 중첩되는 page.tsx 나 layout.tsx 가 존재하면 이러한 에러가 발생할수도 있다고 하여 각 폴더 마다 파일명을 변경하고 계속 빌드를 시도했지만 에러문구는 해결이 되지않고 있네요... 위의 사진은 제가 현재 문제가 발생하고 있는 프로젝트의 전체 폴더 및 파일 구조입니다. 어디가 문제일까요...ㅠ 답변 부탁드리겠습니다.

  • react
  • typescript
  • next.js
임용준 댓글 1 좋아요 0 조회수 374

ios 빌드 중 RCTBridgeDelegate.h import 오류

미해결

배달앱 클론코딩 [with React Native]

파일들도 다 올바른 경로에 있고, stackoverflow에서 해당 import문을 "RCTBridgeDelegate.h" 이렇게 바꾸라해서 바꿔도 안되고 .workspace 에서 해야한다해서 해도 안되고 build setting 에 Header Searching 에 추가하라고 해도 안되고 해서 질문드립니다.. #import <React/RCTBridgeDelegate.h> /Users/bbxgu/Spray_codes/src/frontend/Cirxle/node_modules/react-native/Libraries/AppDelegate/RCTAppDelegate.h:8:9 'React/RCTBridgeDelegate.h' file not found 도와주세요...

  • react-native
조호연 댓글 2 좋아요 0 조회수 306

리액트와 next의 js번들시 질문

해결됨

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

안녕하세요 강사님 좋은 강의 감사드립니다. 몇 가지 헷갈리는 점이 있어 질문드립니다. React (CSR)에서는 js Bundle시 요청 페이지 뿐만 아니라 모든 페이지의 자바스크립트 파일과 컴포넌트들을 불러오는 반면, Next (SSR)에서는 js Bundle시 모든 페이지가 아닌 요청페이지의 파일과 컴포넌트들을 불러온다. 제가 이해한 게 맞을까요? 2. 프리 페칭 시점은 js bundle후 -> 페이지에 접속한 후 -> "프리페칭" 이 시점이 맞을까요? (프리페칭 시점에 현재 페이지에서 이동할 수 있는 모든 페이지들의 자바스크립트를 사전에 불러온다.) 3. next에서 js bundle시 요청페이지의 파일을 불러온다고 했는데, 요청페이지의 파일은 _app.tsx를 기준으로 하나요?

  • react
  • typescript
  • next.js
김건희 댓글 1 좋아요 0 조회수 257

강의 자료 내용 확인 부탁드립니다.

해결됨

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

안녕하세요. 수강생 입니다. 좋은 강의 잘 수강하면서 열심히 공부하고 있습니다. 노션 페이지 내용 관련으로 문의드립니다. [입문] 시작은 프리캠프 - 섹션 3 CSS의 기본과 싸이월드 실습 1 CSS 사용방법 3가지 예시 이미지 중 해당 내용들에 대한 이미지가 이상해 문의 남깁니다. 감사합니다.

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

ios 앱 빌드 중 hermesEnabled 관련 오류발생

미해결

배달앱 클론코딩 [with React Native]

터미널에 which node 했을 때 나온 node의 경로와 xcode에서 빌드할 때받는 경로가 일치하지 않아 문제가 발생가는 것 같은데 어떤 부분을 수정해야할지 모르겠어서 질문드립니다 xcode에서 빌드과정 중 발생한 오류 전문입니다. Node found at: /opt/homebrew/Cellar/node/23.4.0/bin/node /Users/bbxgu/Library/Developer/Xcode/DerivedData/Spray_test1-habyfnbzlisxndgxhjrqnmzxpxjp/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/hermes-engine.build/Script-46EB2E00018FC0.sh: line 9: /opt/homebrew/Cellar/node/23.4.0/bin/node: No such file or directory Command PhaseScriptExecution failed with a nonzero exit code 보시는 것 과 같이 불러오는 node의 경로와 버전이 which node 의 경로와 다릅니다..

  • react-native
조호연 댓글 2 좋아요 0 조회수 268

강의 자료 내용 맞는지 확인 부탁드립니다.

해결됨

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

[입문] 시작은 프리캠프 - 섹션 2 HTML과 기술스택 이해하기 노션 페이지 내용 중 종속태그 예시 부분의 이미지에 태그 내용은 없고 글자만 표기되어 있습니다. 이 부분이 오류인지 확인 부탁드립니다.

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

서버 컴포넌트에서 API 호출 시 Supabase의 클라이언트/서버 클라이언트 차이점이 궁금합니다.

해결됨

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

강의를 듣다가 궁금한 점이 생겨서 질문드립니다. 브라우저에서 실행되는 코드에서는 브라우저 클라이언트를 사용하고, 서버에서 실행되는 코드에서는 서버 클라이언트를 사용합니다. - [ Creating a Supabase client for SSR ]( https://supabase.com/docs/guides/auth/server-side/creating-a-client?queryGroups=framework&framework=nextjs&queryGroups=environment&environment=client#create-a-client ) @supabase/ssr 라이브러리를 사용해서 2가지 유형의 클라이언트를 생성합니다. 클라이언트 컴포넌트 클라이언트(createBrowerClient) - 브라우저에서 실행되는 클라이언트 컴포넌트에서 Supabase에 접근 서버 컴포넌트 클라이언트(createServerClient) - 서버에서만 실행되는 서버 컴포넌트, 서버 액션 및 라우트 핸들러에서 Supabase에 접근 서버 컴포넌트로 동작하는 page 컴포넌트에서 각 클라이언트를 사용해 번갈아 API 호출을 해봤는데 동일하게 작동하는 것 같았습니다. 서버 컴포넌트에서 Supabase의 클라이언트/서버 클라이언트가 동작하는 방식의 차이가 있는지, 렌더링 방식에 차이가 있는지 궁금합니다. 서버와 클라이언트 개념과 렌더링 방식(SSR, CSR)이 자꾸 혼동되어 헷갈리네요.. import { getTodos as getTodosClient } from '@/apis/todos'; import { getTodos as getTodosServer } from '@/actions/todos'; export default async function page() { const todos = await getTodos...(); } // todos.ts import { createBrowserSideClient } from "@/lib/client/supabase"; export const getTodos = async() => { const supabase = await createBrowserSideClient(); const result = await supabase.from("todos").select("*"); return result.data; } // todos.action.ts import { createServerSideClient } from "@/lib/server/supabase"; export const getTodos = async() => { const supabase = await createServerSideClient(); const result = await supabase.from("todos").select("*"); return result.data; }

  • react
  • 클론코딩
  • next.js
  • supabase
seong2 댓글 2 좋아요 0 조회수 366

타입스트립트 interface와 type 쓰기

미해결

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

선생님 타입스트립트에서 interface와 type 을 구현이 진행되는데 저의 기준으로는 type은 복잡한 타입정의시 사용 interface 상속이 필요한경우 사용 으로 보고있는데 선생님은 어떤 기준으로 두개를 사용하는지 알고 싶습니다. interface로도 다 구현이 가능할것 같아서 질문 드립니다. ❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다.

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
khjeong 댓글 1 좋아요 0 조회수 120

배포 강의 중 질문있습니다.

미해결

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

강의 마지막 부분에서 막혀서 문의 드립니다. 배포 강의를 따라서 진행했는데 AWS에서 S3, EC2, RDS 까지 다 연결하고 난 뒤에 또 뭘 해야하나요? 어플 빌드했을때 로그인, 회원가입해도 알 수 없는 에러가 발생했다고 뜨면서 안되서요 ㅠ

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
장태훈 댓글 2 좋아요 0 조회수 201

페이지라우터와 앱라우터의 데이터 패칭 방식의 차이에 관한 질문.

해결됨

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

해당 강의에서 선생님이 설명해주시기로는, 페이지라우터와 앱라우터의 차이로 인해 앱 라우터 버전에서는 리퀘스트 메모이제이션이 생겼다고 하셨습니다. 페이지라우터에서는, 트리의 최상단에서 api요청이 발생한다음에 해당 결과값을 각 컴포넌트에 나눠주는 구조이고, 앱 라우터는 모든 서버컴포넌트가 각각 api를 호출해야하는 구조라고 하셧는데, 제가 테스트 해본결과, 서버컴포넌트 끼리도 props로 데이터를 주고받을 수 있는것 같습니다. 그래서 햇갈리는 부분이 존재하는데요. import "./globals.css"; import Link from "next/link"; import style from "./layout.module.css"; import { BookData } from "@/types"; function InnerFooter({ books }: { books: BookData[] }) { return <>{books[0].author}</>; } async function Footer() { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book` ); if (!response.ok) { return <footer>제작 @winterlood</footer>; } const books: BookData[] = await response.json(); const bookCount = books.length; return ( <footer> <footer>제작 @winterlood</footer> <div>{bookCount}개의 책이 존재함</div> <InnerFooter books={books} /> </footer> ); } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body> <div className={style.container}> <header> <Link href={"/"}>📚 ONEBITE BOOKS</Link> </header> <main>{children}</main> <Footer /> </div> </body> </html> ); } 제가 테스트 한 코드에서는 Footer 컴포넌트가 내부적으로 InnerFooter 컴포넌트를 호출하면서 데이터를 넘겨주고 있습니다. 선생님이 설명하신 부분이 제가 이해한 부분과는 다른걸까요?

  • react
  • typescript
  • next.js
2Digit APP 댓글 1 좋아요 0 조회수 191

새버전 강의

해결됨

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

주기적으로 업데이트한다고 강의 소개에 크게 적어놓으셨는데, 왜 2023년 초 이후로 업데이트가 없나요? 그리고 새로운 버전 강의가 나왔던데, 이전 버전 수강자들에게는 무료로 제공되나요? 이 강의가 저렴한 것도 아니고 몇십만 원이나 하는데, 그 정도 보상은 해주셔야 한다고 생각합니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
King_God_0 댓글 2 좋아요 4 조회수 230

신규강의가 비슷하게 나왔던데...

해결됨

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

기존에 프론트엔드 강의 수강생들에 대한 혜택은 없는건가요?? 거기는 이제 업데이트 안되는건가요?? 아 너무한데.....

  • react
  • node.js
  • seo
  • graphql
  • next.js
musful 댓글 2 좋아요 3 조회수 280

인기 태그

인프런 TOP Writers

주간 인기글