inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

Server Actions CRUD 로직, RLS 테스트 권한 error

해결됨

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

$ npx supabase gen types typescript --project-id 'rirtnceyccxjlupupgxi' --schema public > types/supabase.ts 를 터미널에서 실행시 아래와 같이 error가 발생하고 있어요 ㅠㅠ failed to retrieve generated types: {"message":"Your account does not have the necessary privileges to access this endpoint. For more details, refer to our documentation https://inf.run/QdNfs "}

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

Ch1-4. 네비게이션바 컴포넌트 만들기(1부) 에서 오류질문

해결됨

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

안녕하세요 강의 코드 중에 질문드립니다. 상단 네비게이션바 코드 작성시 Navbar.jsx 에서 노션에 올려주신 MenuItem 컴포넌트가 올바로 작동하지 않습니다. 다만, 찾아보니 '화살표 함수에서 중괄호를 사용하면 명시적으로 return 문을 작성해야 JSX가 반환됩니다.' 라고 하는데... 실제로 return 을 추가하면 실행이 됩니다. 선생님 강의에서는 MenuItem 컴포넌트 선언시 retrun 명시를 안하신거 같은데 어떻게 개발서버에서 상단 네비바가 보여지나요..? (전 : 노션코드) const MenuItem = ({ path, label, onClick }) => ( <li> <Link to={path} className="hover:text-blue-600 transition duration-300" onClick={onClick} > {label} </Link> </li> ); (후-실행됨) const Menuitem = ({ path, label, onClick }) => { return ( <li> <Link to={path} className="hover:text-blue-600 transition duration-300" onClick={onClick} > {label} </Link> </li> ); };

  • HTML/CSS
  • javascript
  • react
  • node.js
  • mongodb
BS 댓글 2 좋아요 0 조회수 207

koreanjson.com 사이트가 안열려요..

해결됨

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

강의 수강중인데 koreanjson.com 참고사이트가 사이트에 연결할 수 없음이라고 뜨네요 다른 방법이 있을까요?

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
방가워요 댓글 2 좋아요 0 조회수 130

강의 전체 소스코드 받을수있을까요?

해결됨

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

강의를 듣는데 보내주시면 감사드리겠습니다

  • javascript
  • node.js
  • docker
  • rest-api
  • nestjs
momodooly 댓글 1 좋아요 0 조회수 189

latest 버전 변경에 따른 프로젝트 설정 방식 업데이트 가능하신가요

해결됨

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

프로젝트 생성 시 이제 npx create-next-app@latest next-tutorial 를 하면 이제 강의 만들던 시기의 설정과 다르게 되는 부분이 꽤나 있는데, 해당 부분에 대해서 강의 노트 업데이트를 해주실 수 있으실까요 ?ㅠ tailwind 설정이나 , latest 로 설정되는 라이브러리들의 버전에 따라 설정 방식이 다른 것 같습니다 ✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다.

  • next.js
  • tailwindcss
  • supabase
Junho 댓글 2 좋아요 0 조회수 176

[3.4] export default 모듈 불러오기

해결됨

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

Node.js 에서 ES 사용시, default 메서드를 import 하는 과정에서 오류가 생깁니다. 강의 마지막 부분처럼 import를 한 줄로 선언해도 안되네요 ..

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

프로젝트를 실행하고 localhost 쪽으로 들어가면 404에러가 발생합니다 ㅠㅠ

해결됨

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

2.2 강의를 들으면서 실습하려고 프로젝트를 실행했는데 npm run dev로 입력해도 서버가 열리지 않은 건지 경로로 들어가면 404: This page could not be found. 라고 화면에 띄어져 있습니다. 프로젝트 실행이 어려워 진도가 막혔는데 어떻게 해결해야 될까요...? ㅠㅠ 아래는 터미널에 출력된 글이고 처음에는 Ready in 2.7s 까지 작성되어 있다가 위의 Local 경로로 접속한 뒤에 컴파일 에러 문구가 출력되었습니다! 비슷한 오류가 있나 질문답변 글을 찾아봤을 때 .next 파일을 지우고 다시 실행하는 글을 발견하여 여러 차례 지우고 실행할 때는 아래 사진처럼 나왔습니다!!

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

rules for ai 기능 변경

해결됨

3시간 만에 끝내는 Cursor 완벽 가이드

안녕하세요, 수강중인 학생입니다. 강사님께서 만들어주신 영상에서 대부분이 현재 기능이 바뀌어서 따로 하나하나 찾아가며 공부하고 있습니다. 때문에 많이 불편하다고 느낍니다. 특히 rules for ai는 한참을 찾다가 결제까지 했는데 알고보니 기능이 바뀌었더군요, 이 부분이라도 현재 어떻게 사용해야 하는지 알고싶습니다.!

  • react
  • next.js
  • cursor
  • 인공지능(ai)
Ming 댓글 2 좋아요 0 조회수 203

app/_layout.tsx에서 useEffect 구간 의미

해결됨

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

혹시 app/_layout.tsx 파일에서 아래 부분 의미가 뭘까요...? useEffect(() => { if (loaded) { SplashScreen.hideAsync(); } }, [loaded]); if (!loaded) { return null; }

  • javascript
  • react
  • react-native
  • typescript
  • react-query
메리빌리아 댓글 2 좋아요 0 조회수 114

smooth-scrollbar 관련 질문

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.03

smooth-scrollbar js 는 scrollerProxy 랑 연동해야하는 귀찮은 문제가있는데 Lenis는 scroll 값을 window.scrollY 에 그대로 반영하면서 부드러운 스크롤 효과를 주기 때문에, GSAP의 ScrollTrigger 랑 자연스럽게 연동되거든요 굳이 왜 어려운길을 가는지 이유가 궁금합니다. scrollerProxy 의 학습을 위해서인지 아니면 Lenis의 어떠한 문제가있어서 인지 궁금해서 여쭈어 봅니다.

  • javascript
  • 애니메이션
  • 인터랙티브-웹
  • gsap
  • scrolltrigger
duddnd 댓글 2 좋아요 1 조회수 258

prevIsConfiromed 질문

미해결

처음 만난 리액트(React)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 섹션 9 실습에서 setIsConfirmed((prevIsConfirmed) => !prevIsConfirmed); 로 setState 정의 했는데 prevIsConfrimed라는 state는 어디에서 나온 건가요

  • HTML/CSS
  • javascript
  • react
오00 댓글 2 좋아요 1 조회수 170

2.8 페이지별 라우팅 설정에 강의 이외 과제를 하다가 막힌 부분이 있어 문의드립니다.

미해결

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

해당 화면에서 강의와 비슷하게 검색기능을 누르거나 엔터키를 치면 search결과가 나오도록 코드를 짰는데, 에러도 나오지 않고 아무것도 나오지않아. 이리저리 해보다가 우선 문의를 남깁니다! 파일 구조는 아래와 같습니다! index.tsx import SearchableLayout from "@/components/searchable-layout"; import { ReactNode } from "react"; export default function Home() { return <h1>ONEBITE CINEMA</h1>; } Home.getLayout = (page: ReactNode) => { return <SearchableLayout>{page}</SearchableLayout>; }; searchable-layout.tsx import { useRouter } from "next/router"; import React, { ReactNode, useEffect, useState } from "react"; import style from "./searchable-layout.module.css"; export default function SearchableLayout({ children, }: { children: ReactNode; }) { const router = useRouter(); const [search, setSearch] = useState(""); const q = router.query.q as string; useEffect(() => { setSearch(q || ""); }, [q]); const onSubmit = () => { router.push(`/search?q=${search}`); }; const onChangeSearch = (e: React.ChangeEvent<HTMLInputElement>) => { setSearch(e.target.value); }; // Enter 키 입력 이벤트 const onkeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { if (e.key === "Enter") { onSubmit(); } }; return ( <div> <div className={style.searchbar_container}> <input value={search} onChange={onChangeSearch} placeholder="영화를 입력해주세요..." onKeyDown={onkeyDown} /> <button onClick={onSubmit}>검색</button> </div> {children} </div> ); } global-layout import Link from "next/link"; import { ReactNode } from "react"; import style from "./global_layout.module.css"; export default function GlobalLayout({ children }: { children: ReactNode }) { return ( <div className={style.container}> <header className={style.header}> <Link href={"/"}>ONEBITE CINEMA</Link> </header> <main className={style.main}>{children}</main> </div> ); } search - index.tsx import SearchableLayout from "@/components/searchable-layout"; import { useRouter } from "next/router"; import { ReactNode } from "react"; export default function Page() { const router = useRouter(); const { q } = router.query; return <h1>검색결과 {q}</h1>; } Page.getLayout = (page: ReactNode) => { return <SearchableLayout>{page}</SearchableLayout>; }; 위와 같이 구성되어있고, 도저히 제가.. 찾지 못하여 문의드립니다 후.. 아마 input쪽이나 search.tsx에 문제가 있는거 같은데 좀 자괴감이 드네요.. 일어나서 다시한번 살펴볼 예정입니다! 다른분들 git도 궁금해서 봤는데 코드는 너무 똑같은데 대체 뭐가 다른 지 모르겠네요..

  • react
  • typescript
  • next.js
ssi02014 댓글 4 좋아요 0 조회수 238

개인 개발자 비즈 앱 전환 버튼이 안보여요

해결됨

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

✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 강의처럼 개인 개발자 비즈 앱 전환 버튼이 뜨지 않고 카카오 비즈니스 통합 서비스 약관 동의로 표시되어있는데,, 어떻게 해야 이메일 필수항목도 넣을 수 있을까요?

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

supabase에서 가입된 유저를 강제로 로그아웃 시키는 방법?

해결됨

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

✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. supabase에서 가입된 유저를 강제로 로그아웃 시키는 방법이 궁금합니다.

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

혹시, 중간에 book에서 catach all 쪽 강의 부분에서 에러뜨는 분들은 .next 지우고 다시 해보세요!

해결됨

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

갑자기 500에러가 뜨면서 강의랑 코드가 틀린게 없는데 뜨길래 뭐지 싶어서 찾아봤는데, .next쪽에 손상이 있어서 그럴 수 있다고 하여, .next를 없애고 다시 'npm run dev'로 빌드했더니, 강의대로 잘 작동하였습니다! 참고하실분들, 참고하시길..!

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

메세지를 전송하면 DB에는 남는데 화면에 보이지 않아요.

해결됨

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

✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 제목 그대로 DB에는 채팅이 잘 남고 있는데 화면에는 보이지 않습니다 console로 찍어봐도 빈배열을 반환하는데 이유가 뭘까요?? 강의를 돌려보고 gpt를 써도 원인을 못찾겠어요. 제가 생각했을때 채팅 목록을 나타내는 코드를 캡쳐해서 보내고 현재까지 문제생긴 부분을 커밋해둘테니 캡쳐사진으로 확인이 안되시면 제 깃헙에서 확인해주세요! 깃헙 링크

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

chapter14 잘이해가 되지않습니다..

해결됨

처음 만난 리액트(React)

안녕하세요 소플님 덕분에 리액트 공부 잘하고 있습니다. chapter14 실습영상을 계속 돌려보고 있는데 이해가 안가서요.. DarkOrLight 컴포넌트가 ThemeContext MainContent 두개의 컴포넌트를 하위로 가지고 있는거 같은데 return ( <ThemeContext.Provider value={{ theme, toggleTheme }}> <MainContent /> </ThemeContext.Provider> ); ThemeContext.Provider Provider 로 감싼다는 부분이 이해가 잘안되서요 ㅠ Provider 로 감쌌을때 ThemeContext 컴포넌트를 사용한다는 의미인가요? 전체적인 설명 부탁드립니다 ~!!

  • HTML/CSS
  • javascript
  • react
limganji 댓글 2 좋아요 1 조회수 163

2.8 페이지별 레이아웃 질문있습니다!

해결됨

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

2.8 페이지별 레이아웃을 설정하는 방법을 듣고있는 학생입니다! getLayout이란 메서드를 레이아웃을 적용할 컴포넌트 객체에 생성해서 _app.tsx 파일에서 메서드를 통해 레이아웃을 적용시키는 방법이라는건 이해했습니다. 그런데 여기서 궁금했던 점이 특정 레이아웃을 적용하기 위해 페이지 마다 따로 코드를 작성해줘야 하는 방식이라면 그냥 레아이웃 컴포넌트를 적용시킬 컴포넌트의 최상위 요소로 감싸주는게 app.tsx에 추가로 코드를 작성할 필요도 없어 더 좋지 않나요? 그리고 리액트 라우터에서는 특정 레이아웃을 적용시킬 컴포넌트들을 <Route element={<Layout/>}><Route/> 이런 path가 없는 컴포넌트 안에서 감싸주는 방식을 사용하는걸로 알고 있습니다. 지금 배우는 방식보다 더 직관성이나 코드 길이 등에서 리액트 라우터가 더 좋은거 같은데 Next는 페이지별 레이아웃 설정방식이 getLayout로 설정하는것 밖에 없는건가요? 유지보수 할 때 특정 레이아웃이 적용된 페이지를 찾기 위해 getLayout을 사용한거라 보기에도 뭔가 애매하게 느껴지고 app.tsx에서 타입을 추가로 만들어줘야 해서 코드가 더 복잡해 보이는거 같습니다.

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

jwtService.verify() 사용 시 ESLint 관련 경고가 발생합니다

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다! [코드팩토리 디스코드] https://inf.run/54jjz - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 rotateToken(token: string, isRefreshToken: boolean) { const decoded = this.jwtService.verify(token, { secret: JWT_SECRET, }); 여기를 비롯해서 다양한곳에서 Unsafe assignment of an any value라는 오류가 뜨는데 강사님 영상에서는 따로 이런 에러가 발생하지 않더라고요. 혹시 강의에서 ESLint 설정을 약하게 해두신 건가요? 아니면 verify 결과에 타입을 명시해줘야 하는 건가요?

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
ssavengers 댓글 2 좋아요 0 조회수 186

decodeBasicToken() 사용 시 'void 타입 에러' 발생 원인 질문드립니다

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다! [코드팩토리 디스코드] https://inf.run/54jjz - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 강의에서 알려주신 decodeBasicToken() 함수를 그대로 구현했는데요, 다음과 같이 리턴을 명확히 하고 있음에도 불구하고, decodeBasicToken(base64String: string){ // 그냥 공식으로 외우면 됨 const decoded = Buffer.from(base64String, 'base64').toString('utf8'); const split = decoded.split(':'); if (split.length !== 2) { throw new UnauthorizedException('잘못된 유형의 토큰입니다.'); } const email = split[0]; const password = split[1]; return { // email: email, // password: password, email, password, }; } 에서 이 함수를 사용하면 TypeScript가 다음과 같은 에러를 표시합니다: Argument of type 'void' is not assignable to parameter of type ... 혹시 이 부분은 TypeScript의 일시적인 추론 문제일까요? 리턴 타입을 명시하니까 에러가 사라지긴 했는데, 강의에서는 따로 리턴 타입 없이도 문제없이 작동하던 것 같아서요! 혹시 제가 놓친 부분이 있는지, 아니면 단순히 타입스크립트 인텔리센스의 문제인지 궁금합니다 감사합니다!

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
ssavengers 댓글 1 좋아요 0 조회수 103

인기 태그

인프런 TOP Writers

주간 인기글