inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

안녕하세요 급하게 next.js를 배워아햐는데

해결됨

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

현재 react.js는 수강한상태이고 타입스크립트는 수강안한 상태입니다. 급하게 회사에서 next.js를 배우라고해서 인강을들어아햐는데 타입스크립트 모르고 react.js만 알아도 수강하는데 아무지장없을까요?

  • react
  • typescript
  • next.js
임다정 댓글 2 좋아요 0 조회수 109

리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??

미해결

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

더보기 버튼 클릭 시 페이지 이동 (page=1 -> page=2) + 무한스크롤 구현 기능 구현이 필요해서 아래와 같이 구현해보았는데 어쩔땐 되고 어쩔땐 안되더라구요... 만약 데이터를 10개씩 불러올 경우 10개 -> 20개 -> 30개 -> 40개 이러다 갑자기 다시 10개가 됩니다... 원래 useInfiniteQuery 무한스크롤 구현 시 페이지이동하면서 기존 데이터를 보존하는 방법이 불가능한건지 아님 제가 코드를 잘못짠건지 궁금합니다... const useInfiniteQuery = (params: Params) => { const searchParams = useSearchParams() const page = searchParams.get('page') return useInfiniteQuery({ queryKey: [CONTENTS_KEY, params], queryFn: ({ pageParam }) => { return getContentsApiClient({ ...params, ...outLinkParams(), page: Number(pageParam) }) }, getNextPageParam: (lastPage, _, lastPageParam) => { // 마지막 page라면 hasNextPage가 false const lastPageNumber = Math.ceil(lastPage.totalCount / (params.size || 10)) if (lastPageNumber === lastPageParam) { return undefined } return Number(lastPageParam) + 1 }, initialPageParam: Number(page) || 1, placeholderData: keepPreviousData, }) } //더보기 버튼 // 클릭 시 페이지 이동 function AddMore({ fetchNextPage, totalPages }: { fetchNextPage: () => void; totalPages: number }) { const searchParams = useSearchParams() const pathname = usePathname() const params = new URLSearchParams(searchParams.toString()) const pageNo = Number(searchParams.get('page') || 1) params.set('page', (pageNo + 1).toString()) if (totalPages === pageNo) return null return ( <div className={cn('wrap')}> <Link className={cn('link')} href={`${pathname}?${params.toString()}`} onClick={fetchNextPage} scroll={false} > <span className={cn('label')}>더보기</span> </Link> </div> ) } 강의 잘 듣고있습니다. 감사합니다! 참고로 백엔드는 문제가 없습니다.

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

api 를 호출해야만 ISR 이 적용 되는것 같은데 자동으로 적용하려면 어떻게 해야 하나요?

해결됨

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

🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요) 제목을 구체적으로 작성해 주세요 ✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다. ⛔ ️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다. 깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요 직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요 더 빠른 답변이 가능합니다!

  • react
  • typescript
  • next.js
강지웅 댓글 1 좋아요 0 조회수 126

수료증은 어떻게 받나요?

미해결

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

완강했는데 수료증은 어떻게 받나요?

  • python
  • 웹-크롤링
김영호 댓글 2 좋아요 0 조회수 139

카카오맵 API 를 사용해서 내컴퓨터의 갤러리맵 만들기

해결됨

파이썬으로 뭘 만들지? 남박사의 파이썬 알쓸파잡

해당 강의를 해볼려고 해도 카카오 개발자 사이트에서 'Web 플랫폼 등록'탭이 없는데 다른 방법이 없나요?

  • python
  • 웹-크롤링
  • gui
이종익 댓글 2 좋아요 0 조회수 115

remark-gfm

미해결

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

remark-gfm 설치 이후 모든 css 가 망가지고 글자와 이미지만 렌더링 되는데 뭐가 문제일까요? global css 에서 import 한것도 아니고 영상과 같이 Plugin 으로 했어요. next-mdx-remote 깃헙 보니까 업데이트도 1년 지났고 버그 로그 많던데 그거 때문이려나요? https://github.com/hashicorp/next-mdx-remote next 공식문서에서도 next-mdx-remote 는 더이상 없고 next-mdx-remote-client 만 있던데 그거 쓰면 되는걸까요?

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

마크업 파트 가독성 향상 방법

미해결

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

전부 다 따라하면서 배우고 있습니다! 다만, 마크업 파트 에서 이렇게 글자 색으로 인해 가독성이 떨어지는데 마크업 파트 속성을 바꿀 방법은 없을까요?

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

Next.js 블로그 결과물 공유 이벤트 진행 여부

미해결

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

안녕하세요, 선생님. 아직 디스코드에 Next.js 블로그 결과물 공유하면 실용적인 블로그 소스코드 받을 수 있는 이벤트 진행하고 있나요?

  • react
  • 블로그
  • next.js
  • cursor
  • cursorai
산독기 댓글 1 좋아요 0 조회수 92

[수업 노트] ISR 공식 문서 링크 변경

해결됨

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

현재 강의 수업노트에 첨부된 ISR 공식 문서 링크에 접속하면 SSR 관련 문서로 표시되고 있습니다. 문서 링크가 아래로 변경된 것으로 보입니다. https://nextjs.org/docs/pages/guides/incremental-static-regeneration

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

섹션 4 퀴즈 3번 문제 질문

미해결

프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)

A - str[6:]도 정답이지 않나요?

  • python
이용채(Yongchae Lee) 댓글 2 좋아요 0 조회수 85

Git Graph가 강사님처럼 나타나지 않는데요.

미해결

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

강사님처럼 메인 탭으로 열리지 않고, 좌측 하단에 작게 열리고 작게 열린 부분에서 마우스 우측 클릭해도 이전 버전으로 돌아가는 메뉴가 안 뜹니다.

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

9.2) 14분 10초 - SEO 패러렐 라우트 페이지 미적용 문제

해결됨

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

62. 검색 엔진 최적화(SEO)에서 보면 상세페이지의 메타데이터 설정하는 부분에서 이전시간에 적용한 인터셉트/패러렐 라우트 때문인지 모달 형태로 뜨면 book/[id]에 설정한 메타 태그가 적용되지 않고, 최상위 (with-searchbar) 부분에 적용한 부분이 뜹니다. 하지만 새로고침해서 최초 접속 상태로 상세페이지에 접근하면 book/[id]에 설정한 meta태그랑 오픈그래프가 보입니다! 이게 의도하신 부분 맞을까요? 어차피 링크로 공유할때는 맨 처음 접속하는 것과 마찬가지니까 크게 상관 없는 부분일까요!? 강의 잘 수강하고 있습니다! 감사합니다.

  • react
  • typescript
  • next.js
보키 댓글 2 좋아요 0 조회수 85

class명을 활용하여 선택자를 만들지 않는 경우..?

미해결

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

안녕하세요, class 안에 띄어쓰기 및 특수문자가 있는 경우 선택자를 만드는 방안에 대하여 설명해주셨는데요, 사진과 같이 dt > a를 활용하여서도 제목과 링크주소를 뽑아낼 수 있는 것으로 확인하여서요! 혹시 꼭 class명을 활용하여 선택자를 만들어야 하나요? dt >a 로도 원하는 내용을 추출할 수 있다면 사진과 같은 방향으로 해도 크롤링 진행에 문제가 없는지 궁금합니다.

  • python
  • 웹-크롤링
여니 댓글 2 좋아요 0 조회수 80

07-01 IPv4AddressIntegerField 질문

미해결

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

안녕하세요 강사님. 강의자료 소스코드 메소드 각각에 대한 세부적인 설명은 자세히 없는 것 같아 질문드립니다. 혹시 틀리거나 부족한 부분이 있다면 설명 부탁드립니다! https://gist.githubusercontent.com/allieus/6134497ba5e0f0aa541a18b700fe9a0e/raw/212aff65dd66095455b2bc87564470f4ba8a5219/IPv4AddressIntegerField.py 1. to_python, get_prep_value, from_db_value 세가지 메소드의 공통점은 value값을 적절한 형식으로 변환하는 것 같은데요. 차이점은 아래와 같이 이해하면 될까요? -get_prep_value: save(), create() 메소드 사용시 호출되는 내부 메소드 -from_db_value: 데이터베이스에서 오브젝트/쿼리셋을 가져올 때 호출되는 내부 메소드 -to_python: ModelForm을 통해 입력받거나 모델.<필드명> = "192.168.56.1" 처럼 직접 필드값을 할당할 때 호출되는 내부 메소드.

  • react
  • python
  • django
  • web-api
  • htmx
성지 댓글 1 좋아요 0 조회수 108

데이터 : members.csv 어디서 불러오나용 ㅜㅜ?

해결됨

[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)

데이터 : members.csv 어디서 불러오나용 ㅜㅜ?

  • python
  • 머신러닝
  • 빅데이터
  • pandas
  • 빅데이터분석기사
윤유나 댓글 2 좋아요 0 조회수 71

구글에드센스 velcel 상업적이용

미해결

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

안녕하세요. 좋은강의 제공해주셔서 감사합니다. vercel 무료 티어 같은 경우 구글에드센스를 상업적 이용으로 치부하고 있어 규정에 어긋나게 되는거 같은데 다른 대안이나 방안이 있을까요?

  • react
  • 웹앱
  • next.js
  • cursor
  • 인공지능(ai)
안상수 댓글 1 좋아요 0 조회수 401

데이터 패칭과 프리패칭 순서

해결됨

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

안녕하세요 강사님, 복습하는 과정 중에 Page Router 기준으로 SSR + 프리패칭 + Hydration 흐름을 제가 이해한 대로 정리해보았는데, 이게 맞는지 확인 부탁드립니다. 사용자가 /a 페이지에 있을 때 <Link href="/c" prefetch> 가 있으면, 브라우저는 백그라운드에서 /c.js (코드 스플리팅된 JS 청크)만 미리 받아 캐시에 저장해둔다. → 이 단계에서는 HTML이나 데이터( getServerSideProps 결과)는 가져오지 않는다. 사용자가 실제로 /c 를 클릭하면, 서버가 getServerSideProps 를 실행해서 데이터를 패칭하고, 그 결과를 반영한 SSR HTML + JSON을 브라우저에 내려준다. 브라우저는 HTML을 먼저 렌더링해서 FCP가 나오고, 이어서 캐시에 있던 /c.js 를 실행한다. 그 후 React가 HTML과 JS를 매칭시켜 Hydration을 수행하여 이벤트 핸들러를 연결한다. 즉, SSR 페이지 전환 시 1. User 클릭 → (서버) HTML 생성 및 데이터 패칭 → (브라우저) HTML 렌더링 → JS 실행 → Hydration 이고, 프리패칭은 그 전에 JS만 준비해 두는 과정으로 이해했습니다. 제가 이해한 흐름이 맞을까요? 머메이드로 도식화하자면 다음과 같습니다 . 위가 맞다면, 빠른 페이지 전환을 위해하는 프리패칭을 했지만 결국 데이터 패칭 및 HTML을 서버에서 다시 그려오는데 빠른 전환이 가능한건지 궁금합니다. 혹시 여기서 놓치고 있는 부분이나, 실제 네트워크 요청에서 다른 점이 있다면 알려주시면 감사하겠습니다!

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

튜플, 딕셔너리는 자료 첨부가 안되어있네요

미해결

프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)

안녕하세요 튜플, 딕셔너리 에는 자료가 첨부되어있지않습니다. 이럴경우 별도로 자료 요청을 해야하나요?

  • python
minhee kim 댓글 2 좋아요 0 조회수 58

인기 태그

인프런 TOP Writers

주간 인기글