172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라먹는 Next.js
도서의 데이터를 불러오는 과정에서 Promise 객체에 id를 이미 사용해 book에 저장한 데이터들을 구조분해할당할 때 id가 이미 선언되었다고 오류가 발생합니다 ㅠㅠ 강의에서는 Promise 객체로 URL 파라미터를 받아오는 게 아니어서 어떻게 해결할 수 있는지 모르겠습니다... 아래는 코드랑 오류 메시지입니다! 코드의 붉은 줄에 커서를 올리면 블록 범위 변수 'id'를 다시 선언할 수 없다고 나옵니다
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
수업 외 질문인데요. 시작은프리캠프 강의에서 사용된 캐릭터 움직이는 애니메이션?은 어떤 프로그램으로 만드신거에요?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
PS C:\Users\user\Documents\prepare\front> npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See npm help init for definitive documentation on these fields and exactly what they do. Use npm install <pkg> afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (front) PS C:\Users\user\Documents\prepare\front> 터미널을열고 저도 패키지 네임 다음 react-nodebird-front를 작성하고 싶은데 어떤방법이 있을까요?
해결됨
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
에러화면 /mdx-page 렌더링이 안됩니다... 작업 순서 패키지 설치 npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx next.config.ts import type { NextConfig } from 'next'; import createMDX from '@next/mdx'; const nextConfig: NextConfig = { /* config options here */ // experimental: { // typedRoutes: true, // }, images: { remotePatterns: [ { hostname: 'picsum.photos', }, { hostname: 'images.unsplash.com', }, { hostname: 'www.notion.so', }, { hostname: 'prod-files-secure.s3.us-west-2.amazonaws.com', }, ], }, pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'], }; const withMDX = createMDX({ // Add markdown plugins here, as desired }); // Merge MDX config with Next.js config export default withMDX(nextConfig); mdx-components.tsx import type { MDXComponents } from 'mdx/types'; export function useMDXComponents(components: MDXComponents): MDXComponents { return { ...components, }; } app/mdx-page/page.mdx # Welcome to my MDX page! This is some **bold** and _italics_ text. This is a list in markdown: - One - Two - Three Checkout my React component: package.json { "name": "notion-blog-nextjs", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev --turbopack", "build": "next build", "start": "next start", "lint": "next lint", "lint:fix": "next lint --fix", "format": "prettier --write ." }, "dependencies": { "@mdx-js/loader": "^3.1.0", "@mdx-js/react": "^3.1.0", "@next/mdx": "^15.3.2", "@notionhq/client": "^3.0.1", "@radix-ui/react-select": "^2.2.4", "@radix-ui/react-separator": "^1.1.6", "@radix-ui/react-slot": "^1.2.2", "@types/mdx": "^2.0.13", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "date-fns": "^4.1.0", "lucide-react": "^0.507.0", "next": "15.2.5", "postcss": "^8.5.3", "react": "^19.0.0", "react-dom": "^19.0.0", "react-icons": "^5.5.0", "tailwind-merge": "^3.2.0" }, "devDependencies": { "@eslint/eslintrc": "^3", "@eslint/js": "^9.26.0", "@tailwindcss/postcss": "^4.1.5", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "eslint": "^9", "eslint-config-next": "15.2.5", "eslint-config-prettier": "^10.1.2", "globals": "^16.0.0", "prettier": "^3.5.3", "prettier-plugin-tailwindcss": "^0.6.11", "tailwindcss": "^4.1.5", "tw-animate-css": "^1.2.9", "typescript": "^5" } }
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
안녕하세요! supabase.ts 파일에서 createServerSideClient 함수에서 serverComponent=false일 때 쿠키 세팅을 하는 이유가 무엇인가요? 이 쿠키는 수파베이스 로그인할 때 외에 어디서 사용되나요? 코드에서는 createServerSideClientRSC, createServerSideMiddleware 함수는 사용하지 않고 있는데, 그냥 정의만 해놓은 건가요? 서버컴포넌트에서 쿠키를 조작하면 어떤 오류가 발생하나요?
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
9-1강의 수업노트 봤는데요, 코드에서 getUser 함수는 2군데서 사용되는데, 항상 인자가 serverComponent가 true로 전달되더라구요. 그러면 getUser를 사용할 때 인자를 넘기지 않고, getUser 함수는 아래와 같이 코드를 만들어도 되는 건가요? export const getUser = async () => { const supabase = await createServerSideClient(true); const user = await supabase.auth.getUser(); return user?.data?.user; };
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
9-1강의 수업노트 봤는데요, 코드에서 getUser 함수는 2군데서 사용되는데, 항상 인자가 serverComponent가 true로 전달되더라구요. 그러면 getUser를 사용할 때 인자를 넘기지 않고, getUser 함수는 아래와 같이 코드를 만들어도 되는 건가요? export const getUser = async () => { const supabase = await createServerSideClient(true); const user = await supabase.auth.getUser(); return user?.data?.user; };
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
const getUserInfo = useCallback(async () => { const result = await supabase.auth.getUser(); if (result?.data?.user) setUser(result?.data?.user); }, [supabase]); 이 코드를 이해 못했어요. 왜 dependency 배열에 supabase가 들어가나요? userId 넣으면 왜 안되나요?
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
안녕하세요! 수파베이스 로그인 하면, sb-로 시작하는 쿠키가 생성되는데요, 이 쿠키 value를 디코딩해보면 이메일, 이름 같은 정보들이 나와서 보안에 취약할 것 같아요 어떻게 하면 이러한 개인정보를 노출하지 않을 수 있을까요??
해결됨
한 입 크기로 잘라먹는 Next.js
제공해주신 백엔드 서버는 어떤 기술 스택으로 백엔드가 구성이 되었는지 궁금합니다.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요. 강의를 듣고 정리하면서 제가 이해한 게 맞는지 확인하고 싶어 질문드리게 되었습니다! 클라이언트 컴포넌트를 포함하고 있는 서버 컴포넌트의 경우, 프리페칭 시 RSC payroad만 미리 가져오고 이후 해당 서버 컴포넌트에 접근하게 되면 클라이언트 컴포넌트를 실행하기 위해 JS Bundle을 불러오는 건가요? 페이지를 캐시 및 하드 새로고침으로 진행했을 때 아래처럼 인덱스 페이지에서 이동할 수 있는 페이지인 search페이지와 book/1페이지의 RSC payroad만 프리페칭 되어있는 걸 볼 수 있었습니다. 이후 위의 Link 태그를 통해 search 페이지로 이동했을 때 아래처럼 새롭게 search 페이지의 RSC payroad가 나타나는 이유가 뭔가요? book 페이지도 똑같이 RSC payroad가 새롭게 추가되는데 이미 인덱스 페이지에서 프리페칭을 통해 RSC payroad를 불러왔는데 추가되는 이유가 궁금합니다! 2번과 연관되어 있는데 search 페이지로 이동했을 때 인덱스 페이지의 RSC payroad가 네트워크에 나타나지 않는 건 인덱스 페이지에서 이동한 것이기 때문에 프리페칭이 일어나지 않기 때문인가요? 이것도 2번과 연관된 질문입니다! search 페이지나 book/1페이지에서 새로고침을 진행하고 인덱스 페이지로 넘어갈 때는 새롭게 인덱스 페이지에 대한 RSC payroad가 나타나지는 않는데 그 이유가 궁금합니다 URL에 직접적으로 book/5로 이동하게 만들었는데, 프리페칭으로 네트워크상에 인덱스와 search, book/1의 RSC 페이로드뿐만 아니라 clinet-component 파일과 searchbar 파일에 대한 JS Bundle도 함께 들어와있는데 search 페이지가 동적인 페이지여도 같은 레이아웃을 사용하고 있는 인덱스 페이지가 정적인 페이지이기 때문에 clinet-component와 searchbar의 JS Bundle이 같이 프리페칭 된 건가요?
미해결
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
커서에서 깃을 커맨드 프롬프트창에서 커밋하는 방법은 없나요? 마우스 클릭 말고요.
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
안녕하세요! 캐시관련 질문 사항이 있습니다! 현재, 강의 내용에선, react query 를 사용한 클라이언트측 캐시와, unstable_cached 를 사용한 서버 캐시를 둘다 같은 하나의 데이터에 적용하신 모습을 확인하였습니다. 궁금증은, 현재 블로그 목록 조회는 두개 캐시 기법이 모두 적용되어 있는데, 둘 중 하나만 캐시를 해 놓아도 될 것 같다 라는 생각이 드는데, 이게 맞는지 궁금합니다. 혹시, 하나만 선택해야 된다면 이번 블로그 목록 케이스에서는 어떤 방식의 캐시를 적용하시는걸 추천하시나요?
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
next js 14버전, tailwind도 3.4.17로 설치하였는데, @apply 가 먹히지 않네요. 어떻게 하나요? globals.css에도 @tailwind base; @tailwind components; @tailwind utilities; 입력 시, 'Unkown at rule @tailwind' 라는 메시지가 송출됩니다. tailwind.config.ts (js->ts 변경) 파일에도 module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", "./app/**/*.{js,ts,jsx,tsx}", "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: { colors: { background: "var(--background)", foreground: "var(--foreground)", 철수가좋아하는색깔: "blue", 영희가좋아하는색깔: "green", }, }, }, plugins: [], }; 입력했습니다.
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
안녕하세요 강사님 좋은 강의 감사드립니다 vscode 테마 정보좀 알수있을까요?
해결됨
한 입 크기로 잘라먹는 Next.js
🚨 긴급 공지 04.30 ~ 05.07 휴가 기간으로 인해 효빈님 께서 답변을 대신 해 주실 예정입니다. 불편함을 드려 죄송합니다. 금방 복귀하겠습니다 🫡 🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요) 제목을 구체적으로 작성해 주세요 ✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다. ⛔ ️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다. 깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요 직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요 더 빠른 답변이 가능합니다! 강의랑 동일하게 [[...id]].tsx랑 404.tsx 만들었는데 url을 http://localhost:3000/book/123-123123 로 해도 왜 잘 표현 될까요? http://localhost:3000/adfafdas 이런식으로 하면 404페이지로 잘 이동 됩니다.
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
저는 왜 notepad가 안뜰까요?
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
안녕하세요! 학습 중, 궁금한게 있어 질문 드립니다! 이번 무한 스크롤 과정에서는 클라이언트 컴포넌트가 사용되었는데, 순수 서버 컴포넌트로는 개발하기는 거의 불가능에 가깝다고 느껴졌습니다. 가정을 하면, "사용자의 동작 혹은 이벤트에 따라서 랜더링 요소가 변경되어야 한다" 면, 클라이언트 컴포넌트를 거의 사용해야 될 것 같다라고 생각이 됩니다. 이러한 케이스가 아니라면, 대부분 서버 컴포넌트로 하는것이 좋다(?) 라고 느껴집니다. 보안성...? 응답 성능적으로도, SEO 관점으로도... 혹시 위의 내용이 틀리거나, 또 다르게 판단을 해야될 기준? 같은게 있을까요?
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요 해당수업중 강의 내용대로 했는데 실행시 아래와 같이 에러 뜨고 정상 실행이 안됩니다. TypeError: react_dom_1.default.findDOMNode is not a function at ReactQuill.getEditingArea ( http://localhost:3000/_next/static/chunks/node_modules_5754136c._.js:16760:43 ) at ReactQuill.instantiateEditor ( http://localhost:3000/_next/static/chunks/node_modules_5754136c._.js:16631:50 ) at ReactQuill.componentDidMount ( http://localhost:3000/_next/static/chunks/node_modules_5754136c._.js:16590:14 ) at LoadableComponent ( http://localhost:3000/_next/static/chunks/_2df4111c._.js:296:57 ) at WebEditorPage ( http://localhost:3000/_next/static/chunks/_2df4111c._.js:81:215 ) at ClientPageRoot ( http://localhost:3000/_next/static/chunks/node_modules_next_dist_1a6ee436._.js:2053:50 )
해결됨
한 입 크기로 잘라먹는 Next.js
백엔드서버와 통신할 때, service폴더를 만들고 하위에 api 정리를 자주 하였는데요,(fetch, axios instance등) 현재 강의에서 언급하고있는 이 api폴더는 next로 풀스택 개발외에는 딱히 사용되지 않는편인가요?
