묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
[JS 10-2-3] 트렌드 및 방향 - 3단계 강의 질문
리액트 컴포넌트 실습에서 <철수의버튼 /> <영희의인풋 /> 하면 실행이 안되고,{철수의버튼} <영희의인풋 /> 하면 실행이 되는데 첫번째 실행이 안되는 이유가 무엇인가요?!
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
웹 프론트엔드 부트캠프 과제 관련 질문드립니다
게시글 등록 컴포넌트 생성해서 렌더링 하는 것 같은데, 등록 페이지는 피그마에서 보여지는 "트립토크 등록" 컴포넌트 UI를 스스로 생성해서 연결하라는 뜻인가요?아니면 레퍼런스 코드에 있는 것처럼 단지 렌더링만 하는 코드를 작성하라는 건가요?그리고 모든 과제는 피그마를 참고하면서 A-Z 까지 스스로 하는건가요?
-
미해결Next.js 15로 완성하는 실전 YouTube 클론 개발
폴더구조
해당 영상에서 사용된 폴더구조는 어떤 아키텍처를 따른것일까요?
-
미해결Next.js와 yolov11로 화재감지 시스템 구축하기
데이터셋 자료를 받을 수가 없어요.
안녕하세요,Roboflow에서 Dataset 다운로드 받을 수 있게 알려주셨는데, 영상과 같이 다운로드 받으면 실제 zip 파일에 README.dataset.txt파일과 README.roboflow.txt 파일만 존재합니다.데이터셋파일도 강의자료로 올려주시면 감사합니다.
-
해결됨제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
카카오톡 공유 API 연동 중 SDK 오류에 대한 질문
카카오톡 공유 API 연동 중 SDK 오류에 대한 질문 선생님, 안녕하세요.Next.js 프로젝트에 카카오톡 공유 API를 연동하는 과정에서 지속적으로 'SDK error'가 발생하여 질문드립니다. 제가 이해하고 적용한 방식이 올바른지 검토가 가능하시다면 답변 부탁드립니다.! 1. JavaScript 키 관리 방식 (.env.local) 민감한 정보인 카카오 JavaScript 키를 안전하게 관리하기 위해 .env.local 파일을 사용하고 있습니다.Next.js 환경의 특성상, 클라이언트 사이드(브라우저)에서 해당 키를 사용해야 하므로 환경 변수 이름에 아래와 같이 저장하는 것이 올바른 방법인지 궁금합니다..env.localNEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY="여기에_발급받은_자바스크립트_키" 2. SDK 연동 및 초기화 과정 카카오 개발자 가이드를 참고하여 아래와 같은 순서로 SDK 연동 및 초기화를 진행했습니다. 이 과정이 올바른지 확인하고 싶습니다. 1단계: SDK 불러오기 웹 페이지에 아래 스크립트 태그를 추가하여 JavaScript SDK를 불러왔습니다. ${VERSION}과 ${INTEGRITY_VALUE}는 카카오 개발자 사이트에서 제공하는 최신 값으로 적용했습니다.HTML<script src="https://t1.kakaocdn.net/kakao_js_sdk/${VERSION}/kakao.min.js" integrity="${INTEGRITY_VALUE}" crossorigin="anonymous"></script> 2단계: SDK 초기화 불러온 SDK를 초기화하기 위해 Kakao.init() 함수를 호출했습니다. 이때, 인자 값으로 .env.local에 저장한 process.env.NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY를 사용했습니다.JavaScript// SDK를 초기화합니다. Kakao.init(process.env.NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY); // SDK 초기화 여부를 콘솔에 출력하여 확인합니다. console.log(Kakao.isInitialized()); 전체 코드 예시 최종적으로 아래와 같은 구조로 코드를 작성하여 초기화를 시도하고 있습니다.HTML<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Kakao JavaScript SDK</title> <script src="https://t1.kakaocdn.net/kakao_js_sdk/v1/kakao.min.js" integrity="sha384-..." crossorigin="anonymous"></script> <script> // 2. SDK 초기화 // 실제로는 Next.js 환경 변수를 사용합니다. Kakao.init('YOUR_JAVASCRIPT_KEY'); // 초기화 여부 확인 console.log(Kakao.isInitialized()); </script> </head> <body> ... </body> </html> 요약 질문하자면..Next.js 프로젝트에서 카카오 JavaScript 키를 .env.local 파일에서 관리하는 방식이 올바른가요?script 태그로 SDK를 로드한 후, Kakao.init() 함수에 환경 변수 값을 넣어 초기화하는 현재의 구현 방식이 정확한가요?만약 위 과정에 문제가 없다면, 'SDK error'가 발생할 수 있는 다른 일반적인 원인(예: 카카오 개발자 사이트의 플랫폼 도메인 설정 오류, 앱 키 오타 등)은 무엇이 있을까요?바쁘시겠지만 시간 나실 때 확인 부탁드립니다. 감사합니다!
-
미해결Next.js 시작하기
globals.css를 삭제하니 404가 나옵니다
styles/globals.css의 내용을 삭제하니_app.jsx에서 import 에러가 생기고import를 삭제하니 화면에Link 의 내용과 404화면이 함께 나옵니다 그리고 다음강의에서 Layout.tsx도Module not found: Can't resolve '@/layouts/Layout.tsx' 이러한 에러가 나오는데 next 15버전이라서 에러가 나는걸까요?..
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
섹션 8 모달 관련 질문
안녕하세요! 섹션 9 마지막 강의 듣던 중 궁금한 점이 생겨서 질문 드립니다.모달 뒤쪽에 모달이 띄워지기 이전 페이지를 병렬로 렌더링 하기 위해 Parallel Route를 이용해서 루트 레이아웃에 modal을 전달하면, 리턴 내부의 {modal}에 모달 컴포넌트가 나타나는 건가요?앞서 createPortal에서 두 번째 인수(document.getElementById("modal-root"))는 모달이 렌더링 될 위치라고 들었던 것 같은데, 루트 레이아웃에 모달이 렌더링 되는 위치를 나타내는 div 태그(modal-root라는 id값을 가지는 div 태그)와 {modal}이 함께 있는 것이 문제가 되지는 않는지, 모달 컴포넌트가 중복되어 열리는 건 아닌지 궁금합니다..!
-
미해결Next.js App router 기반 Chat GPT 만들기
page loading... 이 안보입니다.
안녕하세요. Loading UI & Streaming 강의를 따라 하는데,캐시 비우기 및 강력 새로고침으로 해도 page loading... 이 안보이네요.개발자도구 띄우고 '캐시 비우기 및 강력 새로고침'으로 하면, 개발자도구 > 네트워크 에서 dashboard페이지가 '대기중' 상태이고, 미리보기에서 보이는 내용은 없습니다.route.ts에서 랜덤 지연시간이 지난 후 VSCode 에서 data { data: '4057만에 응답완료!' }라고 뜬 후에 브라우저 개발자도구 > 네트워크에서 dashboard페이지 미리보기를 보면 "루트 레이아웃대시보드 레이아웃 page loading..." 이라고 보이는데, 지연시간이 지난 후이라서 그런지 브라우저 상에서는 "루트 레이아웃대시보드 레이아웃 대시 보드 페이지" 으로만 보입니다.datashboard 페이지의 응답이 지연 시간이 지난 후에 하는거 같은데 왜 이럴까 궁금해지네요.
-
미해결Next.js 15로 완성하는 실전 YouTube 클론 개발
[ Server ] Error: Cannot read properties of undefined (reading 'useSuspenseQuery')
아래와 같이 코드르 작성하고 그냥 PageClient 만 불러왔을 때도 정상 동작하는데 useSuspenseQuery 를 사용하면 에러가 발생합니다. page.tsximport { trpc } from "@/trpc/server"; import { PageClient } from "./client"; export default async function Home() { void trpc.hello.prefetch({ text: "Kyuleelim" }) return ( <div> <PageClient /> </div> ); } client.tsx"use cilent" import { trpc } from "@/trpc/client" export const PageClient = () => { const [data] = trpc.hello.useSuspenseQuery({ text: "Kyuleelim", }); return ( <div> {/* Page client */} Page Client says: {data.greeting} </div> ) }
-
미해결Next + React Query로 SNS 서비스 만들기
next.js 에서 로그인에 관하여
안녕하세요 제로초님, 로그인 관련해서 어려움이 있어서 질문드립니다. 현재 사용하고 있는 기술 스택은 다음과 같습니다.프론트 : next.js/백엔드 : express 로그인을 구현했고 백엔드에서 토큰을 만들어서 refreshToken 은 httpOnly cookie 에,accessToken 은 응답 바디에 넣어서 보내주도록 만들었습니다. 라이브러리 사용하지 않고, next.js 에서 로그인 api 호출하고 token 은 전역으로 관리하고, 토큰 만료시 토큰 재발급하고, 새로고침 시에도 로그인이 유지되도록(httponly 쿠키로) fetchWrapper 을 따로 만들었습니다. -> fetch 은 axios 와 달리 interceptor 같은거 못사용하니까요 하지만 이는 클라이언트 컴포넌트에서만 가능하고, 서버에서는 토큰 만료시 재시도 로직이 불가능하다는 것을 알게되었습니다. 코드도 지저분해지는 것같고.. 그래서 다른 해결책이 있나해서 이 강의의 로그인 부분을 보고있습니다. 근데 auth,js 는 env 에 jwt secret 키를 넣어야하는걸 보니 클라이언트에서 토큰을 관리하는 것 같더라구요 제 생각은 auth.js 는 백엔드 서버에서 쿠키를 관리하는 방식과 함께 사용하기에는 맞지 않다는 느낌을 들었습니다. 그래서 next.js 에서 로그인 및 권한 관리를 쉽게 사용하려면 결국 auth.js 를 사용해야만 하는 것인지.... 궁금합니다. 그렇게된다면 백엔드에서 토큰 만드는 로직을 없애는 것이 맞는지 궁금합니다. 감사합니다.
-
미해결제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
Versel 대신...Cloudflare Workers 어떨까요?
ㅎㅎ 완강했어용~이전에 유튜브 통해 커서 AI로 프론트앤드 쪽이나 단위 기능 구현은 실습을 몇번 해봐서 강사님 강의 듣는데 수월했습니다. 백앤드쪽 연계가 무척 궁금해서 강의를 봤는데 궁금했던게 많이 해소되었습니다. 감사드리고요~그런데 강사님!배포할 때 Vercel 대신 Cloudflare Workers도 괜찮을까요?
-
해결됨웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크
typescript를 사용하는 이유
강의에서 Typescript를 사용하고 있는데, 정작타입은 제대로 안 잡고 넘어가는 경우가 많네요수강생 타겟이 초보라고 되어 있지만, 타입 에러가 방치돼 있어서 따라가기가 더 어려운 느낌이에요오히려 타입을 명확히 잡고 넘어갔으면 더 수월하게 진행됐을 것 같다는 생각이 드네요
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
섹션 6. 페이지 캐싱 - 동일한 fetch 요청을 다른 cache 옵션으로 데이터 패칭 하는 경우
안녕하세요 !섹션 6. 페이지 캐싱 강의를 듣고 루트(/) 페이지를 static page 로 만들어 보기 위한 실습 과정에서 app/layout.tsx 파일 내부의 모든 도서를 패칭하는 fetch 함수의 option에는 아무 옵션도 설정하지 않고 (Next15 버전 기본값은 no-store), 루트 페이지 내부의 동일한 데이터 패칭만 cache 옵션(force-cache)을 추가하여 데이터가 캐싱되도록 설정했습니다.이러한 과정 후 npm run build 를 통해 빌드 하니 루트 페이지가 정적 페이지(static page)로 빌드 되었습니다.정적 페이지가 되기 위해서는 동적 함수를 사용하지 않아야 하며, 데이터를 반드시 캐싱해야 되는데 동일한 url로 데이터 패칭을 보냈을 때 서로 다른 옵션을 사용하게 되면 request memoization으로 캐싱된 데이터force-cache 로 설정된 데이터)를 우선적으로 사용해서 정적 페이지로 동작하는 건가요?1번 과정에서 궁금한 점이 발생하여 이번에는 layout.tsx 페이지의 데이터 패칭 옵션을 강제로 cache : "no-store" 를 추가하여 빌드 를 진행했더니 빌드 가 정상적으로 완료되지 않고 오류가 발생하여 빌드가 완료되지 않는 문제가 발생했습니다. 동일한 url로 데이터 패치를 보낼 때 기본 값을 사용한 패치와 옵션을 추가한 패치가 있다면 옵션을 추가한 패치를 우선적으로 사용하고, 서로 다른 옵션은 추가할 수 없는건가요? (기존 build 파일인 .next 폴더를 제거하고 빌드하니 빌드가 성공적으로 동작했으며, 루트 페이지가 Dynamic page로 빌드되었네요.. 기존 빌드된 .next 폴더가 있을 때 2번 상황 처럼 동일한 fetch url에 옵션만 다르게 설정하여 빌드하니 오류가 발생한 이유를 모르겠네요..ㅎㅎ)dynamic page에서 dynamic params에 generateStaticParams 함수를 통해 params 값을 미리 전달하여 페이지를 만드는 경우, return 값으로 전달하지 않은 params의 페이지를 사전 렌더링 할 때 page router의 getStaticPaths의 fallback 옵션 blocking 처럼 동작하는 건가요?테스트 과정에서 발생한 문제들을 이해하고 싶은데 이해가 가지 않아서 질문 드립니다 ! app/layout.tsximport "./globals.css"; import Link from "next/link"; import style from "./layout.module.css"; import { BookData } from "@/types"; async function Footer() { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book`, { cache: "no-store", } ); if (!response.ok) { return <footer>제작 @rekoding</footer>; } const books: BookData[] = await response.json(); return ( <footer> <div>제작 @rekoding</div> <div>총{books.length}권</div> </footer> ); } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body> <div className={style.container}> <header> <Link href={"/"}>📚 ONEBITE BOOKS</Link> </header> <main>{children}</main> <Footer /> </div> </body> </html> ); }(with-searchbar)/page.tsximport BookItem from "@/components/book-item"; import style from "./page.module.css"; import { BookData } from "@/types"; const AllBooks = async () => { try { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book`, { cache: "force-cache", } ); if (!response.ok) { throw new Error(); } const allBooks: BookData[] = await response.json(); return allBooks.map((book) => <BookItem key={book.id} {...book} />); } catch (error) { console.error(error); return <div>예상치 않은 문제가 발생했습니다.</div>; } }; const RandomBooks = async () => { try { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/random`, { next: { revalidate: 3 }, } ); if (!response.ok) { throw new Error(); } const randomBooks: BookData[] = await response.json(); return randomBooks.map((book) => <BookItem key={book.id} {...book} />); } catch (error) { console.error(error); return <div>예상치 않은 문제가 발생했습니다.</div>; } }; export default async function Home() { return ( <div className={style.container}> <section> <h3>지금 추천하는 도서</h3> <RandomBooks /> </section> <section> <h3>등록된 모든 도서</h3> <AllBooks /> </section> </div> ); }
-
미해결제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
사업자 등록
토스페이먼츠에 실제로 결제를 달려면 사업자 등록을 하라고 하는데 유형 같은건 어떤걸 선택해야 할까요? 저는 결제 연동 방법은 이미 아는 상태에서 이런 구체적인 팁이 있을까 해서 수강했는데 없어서 여쭤봅니다.
-
미해결Next.js 15로 완성하는 실전 YouTube 클론 개발
ngrok 실행 안됨
ngork http --domain ----- 3000명령어 실행 시 해당 오류가 발생하면서 실행이 안됩니다 어떻게 해결하면 될까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
완벽한 프론트엔드
안녕하세요.저는 현재 고농축 프론트엔드와 백엔드 강의를 모두 수강 중인데요,최근에 ‘완벽한 프론트엔드’ 강의가 새로 생긴 걸 알게 됐습니다.이미 고농축 강의를 수강 중인데도, 완벽한 프론트엔드 강의도 수강하는 게 도움이 될까요?그리고 ‘고농축 프론트엔드’와 ‘완벽한 프론트엔드’의 가장 큰 차이점이 궁금합니다.혹시 고농축 강의를 수강한 사람 입장에서 완벽한 프론트에서 꼭 들어야 하는 파트가 있다면 추천도 부탁드립니다!그리고 혹시 ‘완벽한 프론트엔드’ 강의에 대해 쿠폰을 받을 수 있는지도 문의드립니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
9.1 이미지 최적화(13:36)에서 webp로 바뀌지 않습니다.
https://github.com/kimyoda/Next.js15_-.git해당 깃 주소입니다!! 13분전까지 모든 세팅과 설정을 바꿨는데도, 계속 위와 같이 작동합니다.book/[id]/page.ts import Image from "next/image"; <div className={style.cover_img_container} style={{ backgroundImage: `url('${coverImgUrl}')` }} > <Image src={coverImgUrl} width={80} height={105} alt={`도서 ${title}의 표지 이미지`} />next.config.ts까지 강의와 똑같으나 위 화면처럼 계속 jpeg로 나오는데 도저히.. 이유를 못찾아서 문의드립니다!! import type { NextConfig } from "next"; const nextConfig: NextConfig = { /* config options here */ logging: { fetches: { fullUrl: true, }, }, images: { domains: ["shopping-phinf.pstatic.net"], }, }; export default nextConfig;
-
해결됨인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트
Test 질문입니다.
Test 질문입니다.
-
미해결한 입 크기로 잘라먹는 Next.js(v15)
vscode 확장 vscode-stlyedcomponent 적용 안되는 오류
안녕하세요. 지금 Next.js강의중 글로벌 레이아웃강의를 듣고있는데 css를 자동완성해주는 styledcomponent가 적용이 안되서 문의드립니다. 구글링을 통해 vscode-styled component의 버전을 낮춰보기도하고 typescripts에 버전을 낮추니 next.js가 적용이 안되어서 다시 돌려놓긴했는데 여전히 적용이 안돼서 뭐가 문제인지 몰라서 질문드립니다.혹시몰라 제가 설치한 모든 확장프로그램들을 보내드립니다.
-
미해결Next.js 15로 완성하는 실전 YouTube 클론 개발
dirzzle-kit push error
bunx drizzle-kit push 명령어 실행 시 이런 오류가 발생합니다.어떻게 해결해야할까요?
