inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

동영상 버그

해결됨

(2026 최신!) 일주일만에 합격하는 정보처리기사 실기

동영상 재생이 제대로 보이지 않고 버그 현상이 반복 됩니다 한번쯤은 점검이 있어야 될 것 같네요

  • python
  • java
  • c
  • 정보처리기사
hoogok 댓글 1 좋아요 0 조회수 107

section04 포트폴리오 리뷰

해결됨

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

지금 section04 포트폴리오 리뷰까지 왔는데 지금은 작성자, 비밀번호 , 제목 , 내용을 입력하고 등록하기 버튼을 눌러도 등록안되고 에러뜨는게 정상인건가요? 저만 안되는건가 싶어서요

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

Next.js 사전 렌더링에 대해서 더 궁금한 부분이 있습니다.

해결됨

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

안녕하세요 Next.js 강의를 잘 보고 있습니다. Next.js 장단점 내용을 보고 궁금한 점이 생겨서 질문드립니다. 1. 8:59초에 서버에서 모든 컴포넌트를 사전 렌더링을 한다고 말씀하셨는데, 작성한 모든 컴포넌트의 HTML을 서버에 생성해놓는다는 의미인가요? 그렇다면 그 HTML을 받아서 브라우저가 파싱할 때, 서버로부터 받는 스크립트는 해당 컴포넌트의 관련된 로직의 js 파일을 받아오는건가요? 이 동작까지 Next.js에서 담당해주는건가요..? 사용자의 접속 요청이 들어왔을 때, FCP는 빠르겠지만 이 과정에서 서버에서 모든 컴포넌트의 사전 렌더링이 진행되고, 하이드레이션 과정까지 있습니다. 전처리 작업은 늘어난 것 같고, 사용자의 인터렉션이 불가한 지점까지 있는데 이 부분은 어떻게 핸들링하는지와 과연 FCP가 단축된게 장점이라고 할 수 있는지 궁금합니다. 해소가 안되는 부분들이 계속 생기는데, 영상을 계속 보다보면 뒤에서 다 설명을 해주시는 부분들일까요...?

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

세팅

미해결

[리뉴얼] 파이썬입문과 크롤링기초 부트캠프 [파이썬, 웹, 데이터 이해 기본까지] (업데이트)

안녕하세요. 강의 그대로 따라해도 세팅부터 막히는데 어떻게 하나요? 파일을 만들고 나서 셀에 입력하는 화면이 안나오는데요. 강의에서 python3으로 들어가면 강의에서는 셀을 입력할 수 있도록 나오는데 저는 python3이라는게 뜨지를 않습니다.

  • python
  • 웹-크롤링
고예진 댓글 1 좋아요 0 조회수 73

getPublicUrl로 이미지 URL 받는 방법?

해결됨

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

getImageUrl을 얻는 방식을 강의 방식이 아닌 getPublicUrl을 사용해서 얻으려면 어떻게 해야 하나요?

  • firebase
  • next.js
  • tailwind-css
  • react-query
  • supabase
Jihwaan Chun 댓글 1 좋아요 0 조회수 339

SSR실습 질문

해결됨

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

파라미터를 받아서 특정 도서 상세페이지로 이동하는 [id].tsx에서 이전에 사용하던 export default async function fetchBooks(q?: string): Promise<BookData[]> { let url = `http://localhost:12345/book`; export default async function fetchBooks(q?: string): Promise<BookData[]> { let url = `http://localhost:12345/book`; if (q) { url += `/search?q=${q}`; } try { const response = await fetch(url); if (!response.ok) { throw new Error(); } return await response.json(); } catch (err) { console.error(err); return []; } } 이 코드에서 아래와 같은 방식도 가능할까요? export default async function fetchBooks(q?: any): Promise<BookData[]> { let url = `http://localhost:12345/book`; if (typeof q === "string") { url += `/search?q=${q}`; } else if (typeof q === "number") { url += `/${q}`; } try { const response = await fetch(url); if (!response.ok) { throw new Error(); } return await response.json(); } catch (err) { console.error(err); return []; } }

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

reactQuery와 supabase의 channel등

해결됨

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

reactQuery의 queryFn : ['users'] supabase의 channel의 const channel = supabase.channe l("online_users", { 부분 users와 online_users의 쓰임새를 모르겠습니다. queryFn : ['users', userId]를 하면 useEffect의 의존성 배열처럼 userId의 값에 따라 실행되는게 맞나요? 그럼 'users'는 뭔가요? 구조가 잘 와닿지 않습니다.ㅜㅜ const channel = supabase.channe l("online_users", { 도 " online_users"라는 이름값을 다른곳에서 사용할 때 쓰임새가 있는건가요?

  • firebase
  • next.js
  • tailwind-css
  • react-query
  • supabase
정지죤 댓글 1 좋아요 0 조회수 207

섹션5 <공지>

미해결

[개정판] 딥러닝 컴퓨터 비전 완벽 가이드

섹션5 <공지> 코드 https://github.com/chulminkw/DLCV <여기에 있나요?? 찾아도 없어서요.

  • python
  • 머신러닝
  • 딥러닝
  • keras
  • tensorflow
  • 컴퓨터-비전
WY Lee 댓글 1 좋아요 0 조회수 112

On-Demand-ISR 방식을 index 페이지에 적용하는 방법

해결됨

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

안녕하세요 선생님! 해당 수업에서 On-Demand-ISR을 적용하기 위해 page/api/revalidate.ts 파일에 재 생성을 요청하는 handler 함수를 정의를 했습니다. // 강의에서 작성한 handler 코드 export default async function handler( req: NextApiRequest, res: NextApiResponse ) { try { // 인덱스 페이지를 요청받을 때 revalidate 되도록 하기 await res.revalidate("/"); // 재 생성이 잘 완료되었다는 걸 리턴함 return res.json({ revalidate: true }); } catch (err) { // 재생성 실패 했을 떄 실행할 코드 res.status(500).send("실패"); console.error(err); } } 현재 강의에서는 직접 localhost:3000/api/revalidate 를 입력해 수동으로 페이지를 재 생성했는데, 만약 인덱스 페이지 접속할 때마다 자동으로 페이지를 재 생성하고 싶으면 useEffect 훅을 사용하면 될까요? 아래는 제가 작성한 코드입니다! useEffect(() => { fetch("/api/revalidate") .then((res) => res.json()) .then((data) => { if (data.revalidate) { console.log("페이지가 성공적으로 재생 성되었습니다."); } }); }, []);

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

나만의 Azure OpenAI service (gpt-4o) 구성하기

해결됨

Azure Native로 나만의 GPT 만들기

조금씩이지만 열심히 따라서 구현을 해 보려고 하지만 모르는게 너무 많아 조금은 힘드네요 그래도 강의 내용이 스텝 바이 스텝으로 상세해 아주 큰 도움이 됩니다 저희 중요 업무는 고객 요구 사항들 (텍스트/ 이미지)이 기록되어 있는 문서를 참조로 현재 개발된 디자인이 모든 요구 사항들을 다 잘 지켜서 개발이 완료된 건지를 체크하는 일입니다 기존에 일일히 하나하나 체크를 하다 보니 시간도 너무 오래 걸리고 일부 경험 많은 엔지니어의 경우 기존 경험에 의존해 체크가 누락되는 경우도 발생이 되고 있습니다 이에 고객 요구 사항들을 AI (gpt-4o)에게 학습시키고 완료된 디자인 문서를 프로프팅 창에 입력해 자동으로 미지원 항목을 체크해 알려주는 기능을 만드는 것이 목표입니다 이를 위해 프롬프트 창에 디자인 문서 (텍스트/ 파워포인트/ PDF/ JPG 등) 멀티모달 프롬프팅이 되어야 디자이너 스스로 자기가 만든 디자인 파일의 셀프 체크가 가능하기에 gpt-4o를 선택해서 구현을 할려고 합니다 여기서 중요한건 비교를 해야 하는 고객 요구 사항을 어떻게 gpt-4o에게 학습시키는지에 대해 잘 몰라 난감해서 문의 드립니다 가장 효과적인 학습 방법에 대한 조언을 주실 수 있으실지요? 사내 전용 우리 회사만의 GPT라면 비교 자료도 나만의 자료가 되는게 필요해서 문의 드립니다 답변 부탁 드리겠습니다 감사합니다

  • javascript
  • python
  • mongodb
  • azure
  • FastAPI
tk.lee 댓글 2 좋아요 1 조회수 360

완전탐색 숫자야구 뭐가 틀린지 모르겠어요..

해결됨

2주만에 통과하는 알고리즘 코딩테스트 (2024년)

n = int(input()) hint = [list(map(int,input().split())) for _ in range(n)] answer = 0 #100 ~ 999 for a in range(1,10): # 100의 자리 for b in range(10): # 10의 자리 for c in range(10): # 1의 자리 if (a == b or b == c or c == a): continue cnt = 0 for arr in hint: number = list(map(int, str(arr[0]))) strike = arr[1] ball = arr[2] ball_count = 0 strike_count = 0 #스트라이크카운트 자리수,숫자 둘다 if number[0] == a: strike_count += 1 if number[1] == b: strike_count += 1 if number[2] == c: strike_count += 1 #볼카운트 자리수는 안맞고 숫자만 if a in number and number[0] != a: ball_count += 1 if b in number and number[1] != b: ball_count += 1 if c in number and number[2] != c: ball_count += 1 if ball == ball_count and strike == strike_count: cnt += 1 if cnt == n: answer += 1 print(answer)

  • python
  • 코딩-테스트
  • 알고리즘
댓글 2 좋아요 1 조회수 230

Nextjs14 에서의 react query사용의 필요성

해결됨

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

리액트 쿼리를 사용하면 결국 client side fetching이 됩니다. nextjs13부터 server side fetching이 가능해지고 suspense를 활용한 data streaming은 데이터펫칭에서 새로운 패러다임을 제시했다고 생각합니다. 굳이 리액트 쿼리를 사용할 이유가 있을까요?

  • next.js
  • react-query
  • supabase
5MIN VET 댓글 1 좋아요 3 조회수 691

가운데 정렬

해결됨

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

container 중앙으로 이동시킬때 .container { background: #eeeeee; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 50px; } 라고 하셨는데 가운데 정렬하게 될때 , margin: 0 auto; 하는것과 어떤차이가 있을까요 ??

  • react
  • node.js
  • seo
  • graphql
  • next.js
SJ 댓글 2 좋아요 0 조회수 129

SyntaxWarning: invalid escape sequence '\.' 에러가

미해결

[신규 개정판] 이것이 진짜 크롤링이다 - 실전편 (인공지능 수익화)

제가 뭘 건든건지 잘되던게 갑자기 SyntaxWarning: invalid escape sequence '\.' 에러가 출력됩니다. 셀레니움 css셀렉터에서 검색 카피해와서 붙였는데 그중에 \ 들어가면 에러를 내보네요.. 이유를 모르겠습니다.

  • python
  • 웹-크롤링
J Park 댓글 2 좋아요 1 조회수 2100

On-Demand ISR 관련 질문

해결됨

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

On-Demand ISR 사전 렌더링 방식을 보면서 현재 대부분의 SSR로 구현 되어 있는 어플리케이션을 좀 더 최적화 할 수 있겠다는 생각을 했습니다! 여기서 질문은 API Router를 생성해서 revalidate할 경로를 작성해서 해당 경로의 페이지를 On-Demand ISR 처리되도록 구현해주셨는데요..! 실제로 비지니스 로직을 작성할 때는 많은 페이지들이 존재하는데, 이럴때는 API Router에서 "/" 인덱스 페이지 경로를 하드코딩한 부분을 동적으로 받을 수 있게 처리해서 백엔드 서버와 통신 시, 정상응답을 받았을 때, 해당 API Router를 호출하게 하면 되는걸까요..?! 추가로, 페이징 기능 같은 페이지가 있는 경우에는 어떤식으로 On-Demand ISR을 적용하는지도 궁금합니다..!! 바쁘시겠지만 답변 해주시면 감사하겠습니다 😀 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

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

2.8) 레이아웃 설정시 getLayout 메서드말고 if문 써서 이렇게 해도 될까요?

해결됨

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

레이아웃 컴포넌트의 경우 여러 페이지에 공통적으로 들어가야 하는 것이기 때문에, _app.tsx에 넣어야 하는 것은 이해했습니다. 그리고 모든 페이지에 들어가는 레이아웃이 아닌 특정 페이지만 들어가는 레이아웃의 경우에 정환님 같은 경우에는 getLayout이라는 메서드를 해당 레이아웃을 필요로 하는 페이지 컴포넌트 함수에 메서드로 주시고 _app.tsx에서는 그 메서드를 불러오게끔 하셨는데요. 제가 머리가 나빠서인지는 모르겠지만, 뭔가 이런 메서드로 레이아웃을 관리하니까 이해하기 어렵고 뭔가 직관적으로 다가오는 느낌이 없어서 힘들더라구요.. 그래서 그냥 router와 if문을 이용해서 특정 페이지의 경우에만 searchable 레이아웃이 나오게 하고, 아닌 경우에는 그냥 페이지를 리턴하도록 하는 게 저한테는 뭔가 더 직관적..? 으로 다가오는데 이런 식으로 사용해도 되는지 궁금해서 여쭈어봅니다.. (코드는 밑에 같이 써놓았습니다!) export default function App({ Component, pageProps }: AppProps) { const router = useRouter(); const isSearchableLayoutPage = router.pathname === '/' || router.pathname === '/search'; return ( <GlobalLayout> {isSearchableLayoutPage ? ( <SearchableLayout> <Component {...pageProps} /> </SearchableLayout> ) : ( <Component {...pageProps} /> )} </GlobalLayout> ); }

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

바탕쪽, 머리말, 꼬리말, 미주 장식, 두 줄이상의 빈 줄 삭제

해결됨

직장인에게 꼭 필요한 파이썬-아래아한글 자동화 레시피

hwp 파일에서 바탕쪽, 머리말, 꼬리말, 미주 장식, 두 줄이상의 빈 줄을 자동으로 없애고자 강의를 수강합니다. 힌트를 얻고 싶습니다.

  • python
  • 한컴오피스
rosetteer 댓글 1 좋아요 1 조회수 951

2.20) vercel에 프로젝트 배포 시 fetch failed 에러가 발생합니다

해결됨

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

안녕하세요! 다름이 아니라 2.20 실습을 진행하면서 vercel에 앱을 배포하려고 하는데 Error: Command "npm run build" exited with 1 에러가 발생했습니다. [cause]: Error: connect ECONNREFUSED 127.0.0.1:12345 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1607:16) { errno: -111, code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 12345 } vercel 에서 에러 로그를 살펴보니 book/1 , book/2 , book/3 페이지를 prerendering 할 때 위와 같은 에러가 발생했습니다. 로컬에서 앱을 빌드한 후 실행했을 때엔 문제가 발생하지 않았습니다 ㅠㅠ export default async function fetchBookById(id: number): Promise<BookData | null> { const url = `http://127.0.0.1:12345/book/${id}`; try { const response = await fetch(url); if (!response.ok) { throw new Error(); } return response.json(); } catch (error) { console.error(error); return null; } } 위 코드는 book/{id} 페이지로 들어왔을 때 실행하는 함수입니다! import { useRouter } from "next/router"; import style from "./[id].module.css"; import fetchBookById from "@/lib/fetch-book-by-id"; import { GetStaticPropsContext, InferGetStaticPropsType } from "next"; import Head from "next/head"; export const getStaticPaths = () => { return { paths: [{ params: { id: "1" } }, { params: { id: "2" } }, { params: { id: "3" } }], fallback: true, }; }; export const getStaticProps = async (context: GetStaticPropsContext) => { const id = context.params!.id; const data = await fetchBookById(Number(id)); return { props: { data, }, }; }; export default function Page({ data }: InferGetStaticPropsType<typeof getStaticProps>) { const router = useRouter(); if (router.isFallback) { return ( <> <Head> <title>한입북스</title> <meta property="og:image" content="/thumbnail.png" /> <meta property="og:title" content="한입북스" /> <meta property="og:description" content="한입 북스에 등록된 도서들을 만나보세요" /> </Head> <div>로딩중입니다.</div> </> ); } if (!data) { return { notFound: true, }; } const { id, title, subTitle, author, coverImgUrl, description, publisher } = data; return ( <> <Head> <title>{title}</title> <meta property="og:image" content={coverImgUrl} /> <meta property="og:title" content={title} /> <meta property="og:description" content={description} /> </Head> <div className={style.container}> <div className={style.cover_img_container} style={{ backgroundImage: `url('${coverImgUrl}')` }}> <img src={coverImgUrl} /> </div> <div className={style.title}>{title}</div> <div className={style.subTitle}>{subTitle}</div> <div className={style.author}> {author} | {publisher} </div> <div className={style.description}>{description}</div> </div> </> ); } 혹시 몰라 해당 페이지의 전체 코드 같이 남겨봅니다 😭 감사합니다!

  • react
  • typescript
  • next.js
강혁준 댓글 1 좋아요 0 조회수 602

3.2) 페이지 라우팅 설정하기 강의에서 질문입니다.

해결됨

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

param의 타입을 지정할 때 string은 이해가 되는데, string의 배열인 형태는 예를 들어 어떤게 있을까요?

  • react
  • typescript
  • next.js
거누 댓글 1 좋아요 0 조회수 417

240825현재 네이버쇼핑에서 "닭가슴살"검색후 a 태그를 못가져오네요

미해결

[신규 개정판] 이것이 진짜 크롤링이다 - 실전편 (인공지능 수익화)

11.네이버 쇼핑 크롤링의 3편 데이터 추출하기(복작한 HTML)구조 편에서 # 나무태그 선택자 만들기 soup.select(".product_item__MDtDF")까지 하더라도 a 태그에 해당되는 부분을 가져오지 못합니다. 네이버 쇼핑에서 크롤링을 차단하는 것인지, 다른 방법으로 크롤링하는 방법은 없는건가요?

  • python
  • 웹-크롤링
BlueCloud 댓글 1 좋아요 1 조회수 134

인기 태그

인프런 TOP Writers

주간 인기글