묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
안녕하세요 급하게 next.js를 배워아햐는데
현재 react.js는 수강한상태이고 타입스크립트는 수강안한 상태입니다.급하게 회사에서 next.js를 배우라고해서 인강을들어아햐는데 타입스크립트 모르고 react.js만 알아도 수강하는데 아무지장없을까요?
-
미해결Next + React Query로 SNS 서비스 만들기
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
더보기 버튼 클릭 시 페이지 이동 (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> ) } 강의 잘 듣고있습니다. 감사합니다! 참고로 백엔드는 문제가 없습니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
api 를 호출해야만 ISR 이 적용 되는것 같은데 자동으로 적용하려면 어떻게 해야 하나요?
🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요)제목을 구체적으로 작성해 주세요✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다.⛔️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다.깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요!제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요더 빠른 답변이 가능합니다!
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
List.jsx에서 검색어를 입력 시 getAnalyzedData() 함수가 지속적으로 호출되는 이유가 뭔가요
안녕하세요. 강의 잘 보고 있습니다.웹 페이지 중 List영역의 검색창에 단어를 입럭할 때 마다 getAnalyzed() 함수가 호출되는 이유가 궁금합니다.저의 부족한 실력으로나마 추측을 했을 때, 검색창에 해당하는<input>태그에 입력이 발생할 때 마다 search라는 내부 state의 값이 바뀌게 되어 랜더링이 다시 진행되고, 이에따라 getAnalyzed()가 실행되는 것 같습니다.답변 기다리겠습니다. 감사합니다!
-
미해결제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
토스페이먼츠 개발자 화면이 강의와 많이 달라졌는데 확인 부탁드립니다.
https://developers.tosspayments.com/ 언어별 코드 예제를 복사 붙여넣기만 하면 연동 끝 이라고 방식이 변경된것 같습니다.확인 부탁드립니다.
-
미해결타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
tailwindcss 부분적용 문제
참 신기하게도 tailwindcss 공식문서에 나온대로 그대로~~~ 했는데 아이러니 하게도<h2 className="text-8xl font-bold underline">hello world</h2>해당 코드에서 font-bold랑 underlilne은 잘만 적용되는데 text-8xl만 적용이 안되네요 왜 이러는건지 전 이해가 안되네요 따로 styled-component에서 globalStyle을 적용해서 작업중이라서 예상은 되는데 어떻게 수정해도 답이 안보이네요
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
remark-gfm
remark-gfm 설치 이후 모든 css 가 망가지고 글자와 이미지만 렌더링 되는데 뭐가 문제일까요? global css 에서 import 한것도 아니고 영상과 같이 Plugin 으로 했어요.next-mdx-remote 깃헙 보니까 업데이트도 1년 지났고 버그 로그 많던데 그거 때문이려나요? https://github.com/hashicorp/next-mdx-remotenext 공식문서에서도 next-mdx-remote 는 더이상 없고 next-mdx-remote-client 만 있던데 그거 쓰면 되는걸까요?
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
마크업 파트 가독성 향상 방법
전부 다 따라하면서 배우고 있습니다!다만, 마크업 파트 에서 이렇게 글자 색으로 인해 가독성이 떨어지는데 마크업 파트 속성을 바꿀 방법은 없을까요?
-
미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
Next.js 블로그 결과물 공유 이벤트 진행 여부
안녕하세요, 선생님. 아직 디스코드에 Next.js 블로그 결과물 공유하면 실용적인 블로그 소스코드 받을 수 있는 이벤트 진행하고 있나요?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
[수업 노트] ISR 공식 문서 링크 변경
현재 강의 수업노트에 첨부된 ISR 공식 문서 링크에 접속하면 SSR 관련 문서로 표시되고 있습니다.문서 링크가 아래로 변경된 것으로 보입니다.https://nextjs.org/docs/pages/guides/incremental-static-regeneration
-
미해결React Native with Expo: 제로초에게 제대로 배우기
푸시 토큰 만료 시간?
최신 버전 쓰고 있어요expo push token이 만료시간이 따로 있나요? 지금은 프로젝트에서 하루에 한번씩 앱 시작할때마다 토큰 갱신하고 있는데 이렇게 할 필요가 있는지 궁금해요
-
미해결React Native with Expo: 제로초에게 제대로 배우기
router 질문있습니다.
현재 expo 제일 최신버전인 53.0.20 버전으로 강의를 듣고있습니다.강사님처럼 const router= useRouter() 말고import {router} from 'expo-router' 에서router.push 이런거도 동일하게 동작하나요?
-
해결됨타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
vscode 셋팅질문
안녕하세요 강의 잘듣고있습니다 선생님 다름이 아니라 제 화변 볼때보다 선생님 화면볼때가 뭔가 눈이 편안하고 폰트도 눈에 잘들어오는 느낌인데 어떤 테마와 폰트인지 여쭤봐도될까요...
-
미해결제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
Git Graph가 강사님처럼 나타나지 않는데요.
강사님처럼 메인 탭으로 열리지 않고, 좌측 하단에 작게 열리고 작게 열린 부분에서 마우스 우측 클릭해도 이전 버전으로 돌아가는 메뉴가 안 뜹니다.
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
404 에러
Request failed with status code 404 AxiosError: Request failed with status code 404 at settle (http://localhost:3000/main.6a808547f5f7e45e28ea.hot-update.js:1702:12) at XMLHttpRequest.onloadend (http://localhost:3000/main.6a808547f5f7e45e28ea.hot-update.js:338:66) at Axios.request (http://localhost:3000/main.6a808547f5f7e45e28ea.hot-update.js:832:41)저의 경우는, client에서 npm install http-proxy-middleware@2 로 다운로그레이드를 한 뒤 해결되었습니다. @3 버전이 깔렸는데 cra와 이게 호환성 이슈가 있는 것 같습니다.
-
미해결Spring Boot + React.js 로그인 (+소셜) 서비스 이해하기
Access Token 30분 오타요..
1000L * 60 * 30 해야 30분아닌가요 1초 * 60 -> 1분1분 * 30 -> 30분
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
9.2) 14분 10초 - SEO 패러렐 라우트 페이지 미적용 문제
62. 검색 엔진 최적화(SEO)에서 보면상세페이지의 메타데이터 설정하는 부분에서이전시간에 적용한 인터셉트/패러렐 라우트 때문인지모달 형태로 뜨면 book/[id]에 설정한 메타 태그가 적용되지 않고, 최상위 (with-searchbar) 부분에 적용한 부분이 뜹니다.하지만 새로고침해서 최초 접속 상태로 상세페이지에 접근하면 book/[id]에 설정한 meta태그랑 오픈그래프가 보입니다!이게 의도하신 부분 맞을까요? 어차피 링크로 공유할때는 맨 처음 접속하는 것과 마찬가지니까 크게 상관 없는 부분일까요!?강의 잘 수강하고 있습니다! 감사합니다.
-
미해결타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
section8 93강 [해설] 복합 상태 버튼 그룹 스타일링 및 관리에 관련 궁금증
해설 강의를 보다가 궁금한 점이 생겨 글 남겨봅니다. <button key={btn.id} className={cx("button", { active: activeStates[btn.id], disabled: btn.isDisabled, highlight: btn.id === 2, })} onClick={() => handleToggle(btn.id, btn.isDisabled)} // disabled={btn.isDisabled} <- 따로 안쓰신 특별한 이유가 있는걸까? > {btn.icon} {btn.label} </button> // 토글 함수 const handleToggle = (id: number, isDisabled: boolean) => { if (isDisabled) return; setActiveStates((active) => ({ ...active, [id]: !active[id], })); };disabled처리를 해도 스타일과 상태값이 변경되는 문제로 토글함수에 값을 전달해서 isDisabled가 true이면 return되게 작성하셨는데 button에 disabled 속성을 사용하지 않으시고 따로 isDisabled를 전달해 매개변수로 받아 처리하신 이유가 있나요?
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
07-01 IPv4AddressIntegerField 질문
안녕하세요 강사님. 강의자료 소스코드 메소드 각각에 대한 세부적인 설명은 자세히 없는 것 같아 질문드립니다. 혹시 틀리거나 부족한 부분이 있다면 설명 부탁드립니다!https://gist.githubusercontent.com/allieus/6134497ba5e0f0aa541a18b700fe9a0e/raw/212aff65dd66095455b2bc87564470f4ba8a5219/IPv4AddressIntegerField.py1. 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.js) : 기초부터 실전까지
useRef를 사용하는 이유
todo list 구현 중 id 값을 변경할 때 useState가 아닌 useRef를 사용하는 이유가 무엇인가요? useRef를 사용하는 이유와 사용되는 경우를 아직 이해하지 못해 조금 더 자세하게 알려주시면 감사하겠습니다ㅠ