172만명의 커뮤니티!! 함께 토론해봐요.
미해결
Next + React Query로 SNS 서비스 만들기
프라이빗 컴포넌트로 잡은 것과 그냥 컴포넌트로 잡은 것의 차이가 없지 않나요? 컴포넌트를 예로 강의를 찍어 주셨는데 폴더만 더 늘어나고 좋은 예는 아닌듯합니다. 프라이빗 폴더가 어떨 때 왜 필요한지를 알려주는게 더 교육적일 것 같아 글 남깁니다. 컴포넌트 자체가 재사용성을 갖는 것이기에 내부 구성요소만 표기하는 프라이빗은 큰 의미가 없을 것 가은데요. 컴포넌트 외 폴더라고 해도 와닿지는 않습니다. 어차피 컴포넌트로 사용하면 uri 에도 잡히지 않고 말이죠. 전체적으로 폴더 구조만 더 복잡해지는 것 같아요
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요~ 강의 잘 보고 있습니다! vanilla-extract 적용해보려고 하는데 패키지 설치하고 config설정까지 했는데 해당 에러가 나서 질문드립니다. next.config.ts파일과 globalTheme.css.ts, layout.ts중에 문제가 있을까요?? 파일 이름도 문제가 없고 코드 그대로 사용했는데도 해당 에러가 나서 next15에서 vanilla-extract 적용을 할 수 없는건지 궁금해서 여쭤봅니다.. 감사합니다 // package.json // next.config.ts import type { NextConfig } from "next"; const { createVanillaExtractPlugin // eslint-disable-next-line @typescript-eslint/no-require-imports } = require('@vanilla-extract/next-plugin'); const withVanillaExtract = createVanillaExtractPlugin(); const nextConfig: NextConfig = { /* config options here */ experimental: { serverActions: { bodySizeLimit: '10mb', // Set the body size limit for server actions } }, async rewrites() { return [ { source: '/upload/:slug', destination: `${process.env.NEXT_PUBLIC_BASE_URL}/upload/:slug`, // Matched parameters can be used in the destination }, ] }, }; module.exports = withVanillaExtract(nextConfig); // globalTheme.css.ts import {assignVars, createGlobalTheme, createGlobalThemeContract, globalStyle} from "@vanilla-extract/css"; export const global = createGlobalThemeContract({ background: { color: 'bg-color' }, foreground: { color: 'fg-color' }, }) const whiteGlobalTheme = { background: { color: 'rgb(255, 255, 255)' }, foreground: { color: 'rgb(0, 0, 0)' }, } const darkGlobalTheme = { background: { color: 'rgb(0, 0, 0)' }, foreground: { color: 'rgb(255, 255, 255)' }, } createGlobalTheme(':root', global, whiteGlobalTheme); // 실제 적용 globalStyle(':root', { '@media': { '(prefers-color-scheme: dark)': { vars: assignVars(global, darkGlobalTheme), } } }) globalStyle('*', { boxSizing: 'border-box', padding: 0, margin: 0, }) globalStyle('html', { '@media': { '(prefers-color-scheme: dark)': { colorScheme: 'dark', } } }); globalStyle('html, body', { maxWidth: '100dvw', overflowX: 'hidden', }) globalStyle('body', { color: global.foreground.color }) globalStyle('a', { color: 'inherit', textDecoration: 'none', }) // layout.tsx import type {Metadata} from 'next' import {Inter} from 'next/font/google' import './globalTheme.css'; import {MSWProvider} from "@/app/_component/MSWComponent"; import AuthSession from "@/app/_component/AuthSession"; if (process.env.NEXT_RUNTIME === 'nodejs' && process.env.NODE_ENV !== 'production' && process.env.MSW_ENABLED !== 'false') { const {server} = require('@/mocks/http') server.listen() } const inter = Inter({subsets: ['latin']}) export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', } type Props = { children: React.ReactNode, }; export default function RootLayout({children}: Props) { return ( <html lang="en"> <body className={inter.className}> <MSWProvider> <AuthSession> {children} </AuthSession> </MSWProvider> </body> </html> ) }
미해결
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
커밋을 하고 나서 sure all&commit changes를 누르면 저렇게 화면이 분활되고 아무것도 작성이 안되는 상태가 되는데 어떤 이유인지 잘 모르겠습니다...
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
강의 영상에서 getPostMetadata 메서드 내부에서 getCoverImage 메서드를 선언하여 커버 이미지를 다루고 있는데, 저는 이 함수가 내부에 선언된 이유를 두 가지로 이해했습니다. 캡슐화 및 스코프 제한 : 외부에서 사용할 필요가 없는 함수이므로 내부에 선언해 함수의 범위를 명확히 제한 가독성 향상 : 커버 처리 로직을 분리하여 주 함수의 가독성을 개선 그런데 영상을 보면서 든 궁금증이 한 가지 있습니다. 현재 코드에서는 getCoverImage 에 page.cover 를 매개변수로 전달하고 있는데, getPostMetadata 내부에서만 사용되는 함수라면, 클로저를 이용해 page 에 직접 접근하는 방식이 더 자연스럽지 않나요? function getPostMetadata(page: PageObjectResponse): Post { const getCoverImage = () => { if (!page.cover) return ''; switch (page.cover.type) { case 'external': return page.cover.external.url; case 'file': return page.cover.file.url; default: return ''; } }; return { coverImage: getCoverImage(), // ... }; } 이렇게 하면 page.cover 를 매개변수로 전달하지 않아도 되어 더 간결하고, 함수 내부에서도 page 에 자유롭게 접근하여 처리할 수 있다고 생각합니다. 물론 정답은 없겠지만 클로저를 활용하여 외부 스코프에 직접 접근하는 방식 명확하게 매개변수를 전달하여 의도를 분리하는 방식 이 두 가지 방식 중 위 상황에서는 어떤 방식이 더 바람직한지, 혹은 상황에 따라 어떤 기준으로 선택해야 하는지 궁금합니다!
미해결
Next.js 15로 완성하는 실전 YouTube 클론 개발
아래와 같은 에러 발생한다면 drizzle-orm 를 최신버전으로 업데이트 하시면 해결됩니다.
해결됨
Next.js 15로 완성하는 실전 YouTube 클론 개발
프로젝트 하나 남기고 싶어서 강의는 구매했는데 React를 잘 몰라서 공부를 하고 난 뒤 강의를 수강하려고 합니다. 강의 설명에 언급된 React, javascript 외 추가적으로 더 알아야하는 사전 지식이 있을까요?
미해결
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
승인된 리디렉션 URI에서 왜 3가지 https를 등록해 주는것인지 궁금합니다!
해결됨
인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트
혹시 노션 링크 어디서 찾을 수 있을까요? 초기 설정 할떄 몇몇 부분은 노션 없이 좀 하는데 어려움이 있어서요
해결됨
인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트
25년 06월 01일 기준, 노션페이지에서 해당 글이 안 보이는데 슬랙채널 링크 여쭤봐도 되나요?
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 getServerSideProps 함수로 반환된 props 타입을 정의하는데 있어서 이해가 잘 가지 않아 질문드립니다. props의 타입을 지정할 때, next js의 내장타입을 사용하면서 해당 타입의 제네릭으로 InferGetServerSidePropsType<typeof getServerSideProps> 이렇게 작성하는데, <typeof getServerSideProps> 의 값은 function인데 어떻게 props 내부의 값을 전달할 파악할 수 있는지 궁금합니다. 제가 제네릭에 대한 이해도가 낮아서 그런거 같기도 한데,,, 답변 주시면 감사드리겠습니다.
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
선생님 프론트엔드 커서AI활용 코스의 경우에는 커서AI로 일일이 바이브 코딩하는건가요?? AI로 코딩할일이 뭐가 있을지 궁금합니다.
미해결
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
선생님, 안녕하세요. Supabase를 사용하여 제 서비스에 사용자 인증 기능을 구현하려고 합니다. 제가 이해한 내용이 맞는지 확인 부탁드려요! (1)인증 방식 설정: Supabase 프로젝트 대시보드의 Authentication 섹션 내 Providers 탭으로 이동하고, 여기서 제 서비스 사용자들이 이용할 로그인 방식(예: 이메일/비밀번호, Google/Kakao 등의 소셜 로그인, Magic Link 등)을 선택하고 필요한 설정을 완료하여 활성화 한다. (2) 애플리케이션 프론트엔드 구현: 제 웹사이트코드(나 앱의 프론트엔드 예: JavaScript, React, Flutter 등)에서 Supabase 클라이언트 라이브러리를 가져와 사용하고, 사용자들이 회원가입, 로그인, 로그아웃 등을 할 수 있는 UI(예: 로그인 페이지, 회원가입 폼)를 만들고, 이 UI와 Supabase 클라이언트 라이브러리의 함수들 연동하여 실제 인증 기능을 구현한다. (3) 사용자 데이터 관리: 사용자가 위 프론트엔드를 통해 회원가입하면, 그 정보는 Supabase 내의 auth.users라는 전용 테이블에 자동으로 저장되는 것이 맞나요? 결론적으로, 제 서비스의 최종 사용자들은 제가 프론트엔드에 구현한 로그인/회원가입 시스템과 Supabase Auth를 통해 별도의 사용자 계정을 갖고 서비스를 이용하게 되는 구조라고 이해하면 될까요? 혹시 제가 잘못 이해하고 있거나, 추가적으로 고려해야 할 중요한 사항이 있다면 알려주시면 감사하겠습니다.
해결됨
Next.js 15로 완성하는 실전 YouTube 클론 개발
bunx 로 프로젝트 생성 후 tailwind.config.ts 파일이 생성되지 않았습니다. 왜 생성되지 않았을까요..?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
graphql 포트폴리오용 주소는 접속이 되지만 graphql practice 주소와 rest-api practice 주소가 접속이 안되는 것 같습니다. http://practice.codebootcamp.co.kr/graphql http://practice.codebootcamp.co.kr/api-docs 해당 주소로 접속하였을 때 사이트에 연결할 수 없다고 나옵니다.
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
안녕하세요 강사님의 강의 항상 정말 잘 듣고있습니다! 프로젝트 세팅 관련 질문이 있습니다! 강의 자료의 Project Rules 추가 부분은 커서ai 업데이트로 살짝 달라진 부분이 있는데요 추가로 주신 rules 강의 자료 봤는데 잘 모르겠어서 질문드립니다! 이런식으로 하는거 맞나요? 그리고 Notepads 역할 설정도 rules manual로 대체 가능하다고 하신거 같은데 이 경우 파일 확장자가 .mdc로 되는데 이렇게 해도 되는건가요?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님 fetch 캐싱과 revalidate 관련해서 궁금한 점이 있어 질문드립니다. await fetch('https://api.example.com/posts', { next: { revalidate: 60 }, }); A가 /posts를 최초 요청합니다. → API에서 데이터를 받아오고, 해당 데이터는 Next.js 서버 캐시에 저장 이후 60초 동안은 다른 누구든지 이 캐시된 데이터를 그대로 받음 그런데 60초가 지나기 전에 DB에서 게시글 1번의 제목이나 내용이 수정 됨 60초가 지나고 A가 다시 목록을 요청 → 이 시점은 revalidate 만료 시점 이후이므로 재검증 타이밍 → 하지만 A는 여전히 이전 캐시 데이터를 먼저 받고 , → A의 요청을 계기로 Next.js가 백그라운드에서 API를 다시 fetch하여 캐시를 갱신 곧이어 B가 /posts를 요청하면 → B는 A 덕분에 갱신된 최신 데이터를 바로 받음 제가 이해한 것이 맞을까요? 만약 저런식으로 동작하면 상세 페이지와 데이터 불일치 문제가 발생할 수 있지 않을까 해서요 만약 상세 페이지 요청도 이렇게 작성되어 있다면 await fetch('https://api.example.com/posts/1', { next: { revalidate: 60 }, }); A는 목록 요청만 했고, 상세 페이지는 요청하지 않음 B는 A 이후에 목록을 보고 → 최신 제목을 확인한 뒤 , → 게시글 1번의 상세 페이지를 클릭 그런데 상세 페이지의 제목은 여전히 수정 전의 이전 제목 으로 보임 → 목록과 상세 페이지 간에 데이터가 불일치 할 수 있음 정리하자면 제가 이해한 Next.js의 fetch + revalidate 캐시 동작이 맞는지 궁금하고 위와 같은 목록-상세의 데이터 불일치 현상은 실제로 발생 가능한 문제인지 궁금합니다. 제가 실제로 테스트해봤을 때 위 시나리오대로 목록과 상세 페이지에서 서로 다른 제목이 보이는 걸 확인했습니다. 혹시 제가 잘못 이해하고 테스트한 부분이 있는 건지, 아니면 실제로도 발생할 수 있는 동작인지 궁금합니다.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요! 강의 잘 듣고 있습니다. Next에서 제공하는 fetch의 기능만 잘 활용해도 React Query를 사용할일이 잘 없을것같은데.. 무한스크롤같은 기능을 구현할때정도는 편하긴 할것같지만, 보통 App Router환경에서 React Query를 활용할 수 있는경우가 어떤 경우가 있을까요??
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요. 강의를 어떤 방식으로 듣는 것이 가장 효율적인지 여쭤보고 싶습니다. 처음 page.tsx를 만들 때는 하나하나 따라 만들며 진행했지만, 중간부터는 급하게 따라가기만 하다 보니 시간도 오래 걸리고, 오히려 비효율적이라는 생각이 들었습니다. 또한 수업 자료의 GitHub를 보면 각 폴더 설명에 "따라치기 위해 보면 안 된다"고 안내되어 있어서, 제가 잘못된 방식으로 수강하고 있는 건 아닌지 고민이 됩니다. 그리고 ch0~ch4 강의 이후의 코드를 올려주신 것은, 강의를 들으면서 이해가 안 되거나 따라가지 못한 부분이 있을 경우 해당 코드를 참고하거나 다운로드해서 사용해도 괜찮다는 의미일까요? 또한 강의 초반에 GitHub에서 해당 폴더로 들어가 복사하고, 설명을 들으며 진도를 나가는 방식이라고 말씀하신 것을 보았는데, 그렇다면 굳이 모든 코드를 따라 치기보다는 전체 코드를 먼저 불러온 뒤 실행해두고, 강의를 들으며 흐름과 설명 위주로 이해하는 방식으로 수강해도 괜찮을지 궁금합니다. 지금처럼 따라치며 수강하려다 보니 상대적으로 시간이 많이 소요되고, 비효율적일 수 있다는 생각이 들어 이렇게 문의드립니다. 이에 대해 보다 효율적인 수강 방법에 대해 조언해주시면 감사하겠습니다.
해결됨
한 입 크기로 잘라먹는 Next.js
POST /book 해당 API에 { "title": "string", "subTitle": "string", "author": "string", "description": "string", "publisher": "string" } 위 body를 넣어서 요청했을 때 { "statusCode": 400, "message": "coverImgUrl는 요청에 포함되지 않아야 합니다", "error": "Bad Request" } 이런 에러가 나오는데 coverImgUrl가 없는데도 불구하고 위 에러가 나오는 이유는 뭘까요? 도서 생성 api는 사용할 수 없는 건가요..?
미해결
한 입 크기로 잘라먹는 Next.js
bookId데이터를 hidden input으로 서버액션에 보내는 방식은 유저가 클라이언트 단에서 개발자 도구로 input의 value를 수정하여 데이터를 조작할 수 있는 가능성이 있어보이는데, 이런 경우까지 고려하면 어떤 방법이 더 안정적인 방법일까요?
