172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라먹는 Next.js
error.tsx 핸들링에서 막국수를 검색할때 error.tsx component가 보이지 않습니다. 혹시 변경된부분이 있나요..? 현재 api주소로 직접 던져보니 빈배열을 받아와서 error처리가 안됬네요, 혹시 강사님께서는 이런에러처리를 어떻게하셨나요? 보통 어떻게하는게 좋을지를 몰라서요.. 아 죄송합니다. 백엔드 server를 중단안했네요.하하하 참 정신이없네요. 그나저나 위의 저 빈배열은 보통 에러처리가 어떻게하는지는 궁금합니다.
해결됨
한 입 크기로 잘라먹는 Next.js
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
해결됨
한 입 크기로 잘라먹는 Next.js
왜 안되는 것인지 잘 모르겠습니다. https://onebite-books-page-l47231g07-min-jiyeongs-projects.vercel.app/ 화면은 보였다가 안보였다가 하고, book id 별로 보이는 것도 있고 보이지 않는 것도 있습니다
해결됨
한 입 크기로 잘라먹는 Next.js
/book/3만 " 존재하지 않는 페이지 입니다."라고 뜨는데 이유를 잘 모르겠습니다. 아래는 npm run build 결과입니다. > section02@0.1.0 build > next build ▲ Next.js 15.1.6 ./src/components/book-item.tsx 17:7 Warning: Using <img> could result in slower LCP and higher bandwidth. Consider using <Image /> from next/image or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element ./src/pages/book/[id].tsx 51:9 Warning: Using <img> could result in slower LCP and higher bandwidth. Consider using <Image /> from next/image or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element ./src/pages/search/index.tsx 20:6 Warning: React Hook useEffect has a missing dependency: 'fetchSearchResult'. Either include it or remove the dependency array. react-hooks/exhaustive-deps info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/app/api-reference/config/eslint#disabling-rules ✓ Linting and checking validity of types Creating an optimized production build ... ✓ Compiled successfully ✓ Collecting page data 인덱스 페이지 렌더링 fetchOneBook error Error: 서버 상태 오류 at u (.next/server/pages/book/[id].js:1:634) at async x (.next/server/pages/book/[id].js:1:873) ✓ Generating static pages (8/8) ✓ Collecting build traces ✓ Finalizing page optimization Route (pages) Size First Load JS ┌ ● / (ISR: 3 Seconds) 1.05 kB 95.7 kB ├ /_app 0 B 94.6 kB ├ ○ /404 322 B 94.9 kB ├ ƒ /api/hello 0 B 94.6 kB ├ ƒ /api/revalidate 0 B 94.6 kB ├ ● /book/[id] (5318 ms) 705 B 95.3 kB ├ ├ /book/3 (5072 ms) ├ ├ /book/1 ├ └ /book/2 └ ○ /search 1.11 kB 95.7 kB + First Load JS shared by all 96.9 kB ├ chunks/framework-a4ddb9b21624b39b.js 57.5 kB ├ chunks/main-d4c20200ddabac7f.js 33.7 kB └ other shared chunks (total) 5.68 kB ○ (Static) prerendered as static content ● (SSG) prerendered as static HTML (uses getStaticProps) (ISR) incremental static regeneration (uses revalidate in getStaticProps) ƒ (Dynamic) server-rendered on demand // book/[id].tsx // index.tsx
미해결
따라하며 배우는 리액트 네이티브 기초
안녕하세요, 인프런 AI 인턴입니다. 장우진님, 리액트 네이티브로 웹앱을 구현한 후에 구글 로그인 기능을 추가하고자 하신다면 파이어베이스를 통해 이 기능을 제공할 수 있습니다. 파이어베이스는 웹과 모바일 애플리케이션 모두를 지원하는 강력한 플랫폼입니다. 리액트 네이티브에서는 파이어베이스의 Authentication 모듈을 사용하여 쉽게 구글 로그인 기능을 구현할 수 있습니다. 과정은 일반적으로 다음과 같습니다: 1. 파이어베이스 콘솔에서 해당 프로젝트에 구글 로그인 기능을 활성화합니다. 2. 리액트 네이티브 앱에 필요한 파이어베이스 SDK를 설치하고 구성합니다. 3. 파이어베이스 Authentication 모듈을 사용하여 구글 로그인 기능을 구현합니다. 구글 로그인 기능은 웹앱에서 구현 가능하며, 리액트 네이티브에도 동일하게 적용할 수 있다는 점에서 효율적인 개발이 가능합니다. 구체적인 코드 및 구현 방법은 다음의 문서를 참조해 보세요: - 파이어베이스 웹으로 구글 로그인 구현하기 프로젝트의 구체적인 요구 사항에 따라 추가적인 설정이나 코드가 필요할 수도 있습니다. 따라서 더 자세한 구현 방법은 위의 공식 문서나 관련 블로그 글을 참고하시길 바랍니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다. 이런 너의 대답은 알겠어! 그런데 내가 궁금한거는 강의에서는 파이어베이스 프로젝트를 만들때 웹 애플리케이션으로 만들어서 진행했는데 구글 로그인 환경도 웹 애플리케이션으로 진행할 수 있는지 물어보는거야! 아니면 안드로이드 환경으로 프로젝트를 다시 만들어야해? reactnative야!
미해결
따라하며 배우는 리액트 네이티브 기초
우리는 파이어베이스 웹앱으로 연결해서 진행하는데 구글 로그인 기능 추가하려면 웹앱으로 해도돼??
해결됨
하루만에 배우는 ChatGPT API
다음과 같은 양식으로 남겨주세요. 질문을 한 배경 : 질문내용 : 섹션5 강의에서 넬리파이로 배포하는 방법을 듣던중...강사님과 화면이 달라서 그런지 제가 메뉴를 못찾겟네요.... 디자인구체화까지 하고 강사님 화면에서는 왼쪽에 아이콘을 누르면 배포 할수 있는 종류가 나오던데.... 전 아무리 찾아봐도 찾지를 못했네요 ㅡㅡ 어디로 들어가야 비셀이나 넬리파이가 있는걸까요 ㅡㅡ 넬리파이뿐만 아니라 배포하는 메뉴 자체가 없어서요...메뉴마다 다 눌러서 찾아봤는데도 없네요
미해결
따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
vs code가 업데이트 되어서 그런지.. eslint.config.js로 바뀌었는데 어떻게 설정해야할지 잘 모르겠습니다. 일단 gpt에서 말하는대로 바꾸어보긴 했는데 작동을 안하더라고요.. 어케 해야할까요 import globals from "globals"; import pluginJs from "@eslint/js"; import pluginReact from "eslint-plugin-react"; /** @type {import('eslint').Linter.Config[]} */ export default [ {files: ["**/*.{js,mjs,cjs,jsx}"], languageOptions: { globals: globals.browser, sourceType: "module", ecmaVersion: "latest" }, plugins: { react: pluginReact }, rules:{ ...pluginJs.configs.recommended.rules, ...pluginReact.configs.recommended.rules, "react/prop-types": "off", }, }, { files:[".eslintrc.{js,cjs}"], languageOptions:{ sourceType:"script", }, environment: { node:true, } } ]
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 선생님. 강의 잘 듣고 있습니다! 강의 주제에 벗어나는 것 같아서 조심스럽게 질문드려보자면, 앱 라우트 방식에서 반응형을 구현하는 방법을 알고 싶습니다. 저는 이전에 페이지 라우터 방식에서 작업할 때 window.matchMedia 를 사용해서 useMediaQuery 훅을 만들어 반응형을 구현했습니다. 근데 서버 컴포넌트에서는 위와 같은 방식을 사용하기 어려울 것 같은데 혹시 앱 라우트 방식에서 반응형을 구현할 때 많이 쓰이는 방식이 있을까요? 화면 너비에 따라 컴포넌트의 size prop을 다르게 넘겨주어야 하는 경우에 클라이언트 컴포넌트로 사용해야 할까요? 이 경우 다수의 컴포넌트가 클라이언트 컴포넌트가 될 것 같아 우려스럽더라고요. Next.js의 앱 라우터에서 반응형을 구현하는 방식에 대해 조언을 구하고 싶습니다.
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
31일에 올라오지 않아서 궁금해 질문드립니다!
미해결
따라하며 배우는 리액트 네이티브 기초
파이어 베이스 11로 했을때 똑같이 실행했을때 , getAuth를 인식을 못합니다. 찾아보니까 9버전부터 하나하나 import해야한다는데 맞나요 ?
해결됨
한 입 크기로 잘라먹는 Next.js
현재 이미지를 public 폴더에 잘 넣어주었는데 아래 이미지처럼 바뀌지 않고 지구 모양으로 뜹니다.. app.tsx , document.tsx, index.tsx 파일에서 favicon 설정하는 코드가 없는데.. 이거때문인걸까요?
미해결
한 입 크기로 잘라먹는 Next.js
[1.2) Next.js 사전렌더링 이해하기] 강의 15분 부근에서 " 사전 렌더링에서 페이지 이동 요청 시 클라이언트 사이드 렌더링 방식과 동일하게 처리한다 "는 내용을 보고 질문 드립니다. 강의를 따라가며 CSR에서의 JS Bundle은 서비스 전체 코드에 대한 번들 사전 렌더링에서의 JS Bundle은 해당 페이지에 대한 번들 라고 스스로 생각하여 페이지 이동 요청 시 웹 서버로부터 새 JS Bundle을 받을 줄 알았는데, 사전 렌더링에서도 JS Bundle은 서비스 전체 코드에 대한 번들인 것인지 궁금합니다. 만약 제가 이해한 것이 맞다면, 아래 답변에 대해서 마지막으로 현재 페이지에 필요한 자바스크립트 코드만 Hydration이 이루어지게 됩니다. 그 이유는 간단한데요 단순히 Hydration이라는 과정이 현재 브라우저에 렌더링된 페이지의 HTML과 JS를 연결하는 과정이기 때문입니다. 전체 JS Bundle에서 현재 페이지에 대한 JS를 실행하고, 컴포넌트 교체 및 수화가 일어난다고 생각하면 될까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 useEffect에 대해 공부를 하다가 궁금한점이 생겨 질문을 드립니다. 강의처럼 useEffect의 배열에 count를 작성하면 컴포넌트가 마운트 될때 먼저 실행되고 그다음 count가 바뀔때마다 useEffect가 실행이된다... 까지는 이해를 했는데 그럼 의존성 배열에 count를 넣으면 이 count의 값만 바뀔때에만 실행되기 때문에 불필요한 렌더링을 줄여주어서 useEffect를 사용하는건가요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강사님께서 말씀주신대로 년월 증가처리에 대해서 동일하게 코드를 작성하였습니다. <div> <Header title={`${pivotDate.getFullYear()}년 ${pivotDate.getMonth()+1}월`} leftChild={<Button onClick={onDecreaseMonth} text={"<"}/>} rightChild={<Button onClick={onIncreaseMonth} text={">"}/>} /> <DiaryList/> </div> (질문)Home.jsx에서 Button 구성요소 ">" 클릭시에 onClick시에 onIncrease 함수객체가 <Button/> 구성요소가 props형태로 함수객체가 전달되고 있습니다. rightChild={<Button onClick={onIncreaseMonth} text={">"}/>} Button 구성요소에는 전달받은 onClick 전달받은 함수객체에 대해서 별도 처리가 없어도 되는것인가요? const Button = ({text, type, onClick}) => { console.log("Button onClick : ", onClick) return ( <button onClick={onClick} className={`Button Button_${type}`}> {text} </button> ) }
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 선생님. 강의 잘 듣고 있습니다. 강의를 듣고 Next.js도 아니고 React는 CSR 방식인데 왜 서버 컴포넌트를 지원하지? 라는 의문이 생겼습니다. React 공식문서를 보니 프레임워크와 통합하기 위해 Next.js 팀과 협력했다고 나오더라고요. React가 서버 컴포넌트를 지원하게 된 계기가 Next.js의 SSR 때문인지 궁금합니다. 공식문서 : https://react.dev/learn/start-a-new-react-project#bleeding-edge-react-frameworks
미해결
30분 요약 강좌 시즌4 : 알잘딱깔센 GitHub
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 노션이 다운로드 하는 부분이 없어요 로그인으로 넘어가고 이미 로그인을 한 상태에선 페이지만 생성이 될 뿐 다운로드가 되지가 않습니다 수정 부탁드립니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 강의를 너무 잘 듣고 있습니다. 강의가 업데이트가 되었다는 공지를 오늘 처음 확인을 하게 되었는데 업데이트 된 내용으로 새로 듣고 싶은데 쿠폰을 혹시 발급 받을 수 있을까요?
해결됨
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
📢 질문을 작성하기 전에 꼭 읽어주세요! 📢 질문 전에 준비할 것 스스로 먼저 확인하기 같은 문제를 겪은 사람이 있는지 인터넷에서 검색해보세요. 대부분의 경우 비슷한 사례를 쉽게 찾을 수 있습니다. 오류와 코드를 다시 한번 점검하기 간단한 실수나 오타가 없는지 확인해보세요. (예: 변수 이름, 함수 호출 방식 등) 문제 상황 정리하기 본인이 겪고 있는 문제를 정확히 이해하고, 어떤 상황에서 발생하는지 메모해보세요. 질문 작성 시 유의할 점 간결하고 명확한 제목 문제를 한눈에 이해할 수 있도록 제목을 작성하세요. ("React에서 상태값 초기화 문제"처럼 구체적으로!) 상황 설명 포함 문제가 발생한 맥락과 이미 시도했던 해결 방법을 간략히 정리해서 알려주세요. 코드 공유 문제가 발생한 코드를 첨부하여 보여주세요. 강의 관련 질문 강의 내용과 관련된 질문이라면 문제가 발생한 강의의 시간이나 챕터를 반드시 적어주세요. 추가 안내사항 답변을 받으면 꼭 확인하고 감사 인사를 남겨주세요. 작은 반응도 답변자에게 큰 동기부여가 됩니다! 질문 게시판에서는 서로를 존중하며 커뮤니케이션해주세요. 강의 외적인 문의(예: 계정 문제, 결제 등)는 고객센터 를 이용해주세요. 여러분의 꼼꼼한 질문이 더욱 빠르고 정확한 답변으로 이어질 수 있습니다. 😊
해결됨
한 입 크기로 잘라먹는 Next.js
제목그대로의 질문입니다! app/layout.tsx에서 <Providers>{children}</Providers> 와 같이 했을때 전체 페이지는 클라이언트 컴포넌트가 되는걸까요?
