172만명의 커뮤니티!! 함께 토론해봐요.
미해결
[4주 과정] <클로드 코드> 완독 챌린지 : 매일 1시간씩 4주 동안 클로드 코드 도서 완독하기!
개발하면서 지속적으로 md파일을 업데이트하면 길이가 1000줄 가까이 길어지는데, 이렇게 길어지면 토큰도 많이 잡아먹어서 효율성도 떨어질 것 같습니다. 길이가 길어지면 길다고 다 못읽는 경우가 커서에는 있었습니다. 물론 클로드에게 최적화 해달라고 하면 해주겠지만, 일반적으로 어느정도 길이가 적절한지 궁금합니다.
미해결
웹 개발의 핵심, HTTP 완벽 마스터하기!
react (client) + node.js (backend) 와 같은 구성에서는 SOP 에서 설명해주신 '동일 출처 정책' 으로 인해 'fetch' 등을 사용할때 막히는 경우가 종종 있었는데요. 그래서, 이전에는 fe 팀과 be 팀이 개발을 할때 CORS 작업을 항상 했었던걸로 기억합니다. 최근에 많이 사용하는 next.js 는 bff (backend for frontend) 가 중간에 있어서 SOP 로 인한 문제가 거의 없는것 같은데요. (SOP 는 설명해주신것처럼 브라우저 자체의 보안이기 때문에) 이렇게 이해하는게 맞을까요?
미해결
한 입 크기로 잘라먹는 Next.js
강의에서 book/4는 동적 페이지인데 첫 접속 후 Full Route Cache에 저장되어 두 번째 접속이 빨라진다고 했습니다. 동적 페이지는 Full Route Cache에 저장되지 않는다고 배웠는데 왜 적용되나요? .next 폴더에 해당 페이지가 남아있는 것을 확인했는데, 이것이 Full Route Cache 적용을 의미하나요? npm run start로 프로덕션 모드에서 테스트했는데 첫 접속과 두 번째 접속 모두 170ms로 동일합니다. 왜 속도 차이가 없나요? import { notFound } from "next/navigation"; import style from "./page.module.css"; import { BookData } from "@/types"; // export const dynamicParams = false; export function generateStaticParams() { return [{ id: "1" }, { id: "2" }, { id: "3" }]; } export default async function Page({ params, }: { params: Promise<{ id: string | string[] }>; }) { const { id } = await params; const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${id}` ); if (!response.ok) { if (response.status === 404) { notFound(); } return <div>오류가 발생했습니다...</div>; } const book: BookData = await response.json(); const { coverImgUrl, title, subTitle, author, publisher, description } = book; return ( <div className={style.container}> <div className={style.cover_img_container} style={{ backgroundImage: `url('${coverImgUrl}')` }} > <img src={coverImgUrl} /> </div> <div className={style.title}>{title}</div> <div className={style.subTitle}>{subTitle}</div> <div className={style.author}> {author} | {publisher} </div> <div className={style.description}>{description}</div> </div> ); } 🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요) 제목을 구체적으로 작성해 주세요 ✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다. ⛔ ️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다. 깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요 직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요 더 빠른 답변이 가능합니다!
미해결
[4주 과정] <클로드 코드> 완독 챌린지 : 매일 1시간씩 4주 동안 클로드 코드 도서 완독하기!
두 가지 질문이 있습니다. 1. CLAUDE.md 개인 커스텀 하는 방법과 그 파일을 수정하는 명령어 혹은 방법 2. User, Project 스코프 하는 방법을 쫌 더 상세하게 알려주세요
미해결
[4주 과정] <클로드 코드> 완독 챌린지 : 매일 1시간씩 4주 동안 클로드 코드 도서 완독하기!
카카오톡 주간학습 알림 중 주말 인증은 당일 저녁이나 오후 정도에 한 번 더 알림을 주실 수 있을까요? 학습은 꾸준히 했는데, 개인사정상 주말에 집중하기 힘들어서 인증을 놓쳐서 아쉬운데, 약간의 도움이 더 있으면 좋겠습니다.
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
저는 아무래도 정답이 C 같은데.. 질문에서 /docs 도 포함되어야 한다고 했으므로, 옵셔널 캐치올만이 루트 경로( /docs )까지 모두 처리할 수 있는거 아닌가요? 다 학습하고 혼란이 오네요..
해결됨
비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE
아니 며칠이나 기다렸는데, 웹에 특별히 더 넣을 기능도 없는데, 어떻게 더 고품질로 만들죠...게시글도 15개이상 1000자이상 무조건 넣어야하나요~?ㅜ 정확히 뭐가 어디가 부족하다라고 해주면 좋은데 특별한 고지도 없고.. ,이렇게 웹승인 받기가 힘들면...어떻게 만들으라구..ㅜㅠ 혹시 방법있을까요 샘? 커서는 두리뭉실한 얘기만 해줘서 또 며칠이나 기다려서 실패하면 어떡하나 고민입니다. 그리고 커뮤니티 즉 회원가입,로그아웃 기능에 대해서 조금더 설명이나 관련 링크를 좀 주실수 있을까요?회원가입이나 뭐가 되야 결제시스템도 등록이 가능한데 그런게 없어서 계속 헤매고 있네요...
미해결
[4주 과정] <클로드 코드> 완독 챌린지 : 매일 1시간씩 4주 동안 클로드 코드 도서 완독하기!
토큰 구매 페이지가 먼저떠서,, 토큰으로 구매했는데, 가성비가 더 나쁠까요
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요. 팔로우 추천 API는 팔로워 수가 많은 순으로 최대 3명을 가져오도록 되어 있는 것으로 알고 있습니다. 현재 발생하는 현상으로는 회원가입한 유저가 없는 경우에 기존 유저에게 추천 목록이 빈 배열로 나타납니다. 그런데 회원가입 후 로그인하면 추천 목록에 로그인한 본인 아이디가 뜨고, 로그아웃 후 기존 유저 A로 로그인하면 이전에 회원가입한 유저 아이디가 추천 목록에 나타납니다. 기존 유저 A가 그 회원가입 한 유저를 팔로우한 상태에서, 다른 기존 유저 B로 로그인하면 A가 팔로우했던 아이디가 추천 목록에서 사라져 있습니다. 팔로우나 언팔로우 기능을 사용할 때 데이터는 정상적으로 들어오는 것으로 확인되고, 팔로워가 있는 아이디가 추천 목록에 나타나야 하는데 빈 배열로 표시됩니다. 어느 부분을 점검해야 문제를 정확히 파악할 수 있을지 감이 잡히지 않아 질문 남겨봅니다..! import { MouseEventHandler } from "react"; import { User } from "@/model/User"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { useSession } from "next-auth/react"; type Props = { user: User; }; export default function FollowRecommend({ user }: Props) { const queryClient = useQueryClient(); const { data: session } = useSession(); const followed = !!user.Followers?.find((v) => v.id === session?.user?.id); // 팔로우 const follow = useMutation({ // 호출 시마다 userId를 전달 mutationFn: (userId: string) => { return fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/users/${userId}/follow`, { method: "POST", credentials: "include", }, ); }, onMutate: (userId: string) => { const data: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (data) { // 내가 팔로우 하는 대상 // User 배열 중에 팔로우 버튼을 누른 대상의 userId를 찾아서 그 유저의 Followers 수정 const index = data.findIndex((users) => users.id === userId); const shallow = [...data]; shallow[index] = { ...shallow[index], Followers: [{ id: session?.user?.id as string }], _count: { ...shallow[index]._count, Followers: shallow[index]._count.Followers + 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } }, onError: (error, userId: string) => { console.error("팔로우/언팔로우 에러:", error); console.log("실패한 userId:", userId); const data: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (data) { const index = data.findIndex((users) => users.id === userId); const shallow = [...data]; shallow[index] = { ...shallow[index], // 내 아이디가 대상 유저의 팔로워 목록에서 빠져야함 Followers: shallow[index].Followers.filter( (f) => f.id !== (session?.user?.id as string), ), _count: { ...shallow[index]._count, Followers: shallow[index]._count.Followers - 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } }, }); // 팔로우 끊기 const unfollow = useMutation({ mutationFn: (userId: string) => { return fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/users/${userId}/follow`, { method: "DELETE", credentials: "include", }, ); }, onMutate: (userId: string) => { const data: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (data) { const index = data.findIndex((users) => users.id === userId); const shallow = [...data]; shallow[index] = { ...shallow[index], Followers: shallow[index].Followers.filter( (f) => f.id !== (session?.user?.id as string), ), _count: { ...shallow[index]._count, Followers: shallow[index]._count.Followers - 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } }, onError: (error, userId: string) => { const data: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (data) { const index = data.findIndex((users) => users.id === userId); const shallow = [...data]; shallow[index] = { ...shallow[index], Followers: [{ id: session?.user?.id as string }], _count: { ...shallow[index]._count, Followers: shallow[index]._count.Followers + 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } }, }); const onFollow: MouseEventHandler<HTMLButtonElement> = (e) => { e.stopPropagation(); e.preventDefault(); if (followed) { console.log("언팔로우"); unfollow.mutate(user.id); } else { console.log("팔로우"); follow.mutate(user.id); } };
미해결
[4주 과정] <클로드 코드> 완독 챌린지 : 매일 1시간씩 4주 동안 클로드 코드 도서 완독하기!
cd Wed/ 부터 시작하는데, 우분투를 껐다가 켜면 다 리셋되는거니까 cd _Book_Claude-Code/Week1/Wed/ 로 해서 실행하는게 맞나요? 그리고 Wed에서 Thu로 바꾸는 방법이 있나요? /quit 하고 Thu/를 입력해도 No such file or directory 라고 뜨면서 안돼서 껐다켜고있습니다. 54쪽에 1번 ! Is가 잘 작동이 안되는데 뭘하는건지 잘 모르겠습니다. ! for bash mode라고 뜨는데요. Is를 입력하면 /bin/bash: line1: Is: command not found 라고 뜹니다.
미해결
[4주 과정] <클로드 코드> 완독 챌린지 : 매일 1시간씩 4주 동안 클로드 코드 도서 완독하기!
$ git clone https://github.com/sysnet4admin/_Book_Claude-Code.git Cloning into '_Book_Claude-Code'... remote: Enumerating objects: 2458, done. remote: Counting objects: 100% (182/182), done. remote: Compressing objects: 100% (137/137), done. remote: Total 2458 (delta 93), reused 107 (delta 45), pack-reused 2276 (from 2) Receiving objects: 100% (2458/2458), 23.96 MiB | 11.07 MiB/s, done. Resolving deltas: 100% (550/550), done. error: invalid path 'week4/Thu/[클로드_코드]_p329외_npx:uvx는_왜_AI_시대에_필요 하며_동시에_위험할까요.pdf' fatal: unable to checkout working tree ~/projects/_Book_Claude-Code (main) $ ls git clone할때 error가 있더니, ls 명령어를 쳐도 아무것도 안나와요.. window/bash 사용
미해결
[4주 과정] <클로드 코드> 완독 챌린지 : 매일 1시간씩 4주 동안 클로드 코드 도서 완독하기!
윈도우 실습을 우분투 말고 IDE에 연결해서 사용하는 방법은 없나료... 어쨌든 실무애서 사용을 해야되는데 실습환경이 너무 제한적입니다 윈도우 데스크탑 앱을 사욘해서 하는 방법이라던지..
미해결
[4주 과정] <클로드 코드> 완독 챌린지 : 매일 1시간씩 4주 동안 클로드 코드 도서 완독하기!
● Bash(cd cat-dancing-page && npm run dev) ⎿ Error: Command timed out after 2m 0s > cat-dancing-page@0.0.0 dev > vite VITE v7.1.7 ready in 223 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose 페이지 안열립니다. 어떻게 해결하나요?
미해결
[4주 과정] <클로드 코드> 완독 챌린지 : 매일 1시간씩 4주 동안 클로드 코드 도서 완독하기!
라고 책과 동일하게 작성을 하였는데 아래처럼 다르게 나오는게 맞는건가요? 코드가 쭉 나오더니 이렇게 마무리 되는데 7단계는 아니고 바로 만들어 버린것 같기는 한데요. cat_webpage.html 열어 보라고 하는데 브라우저에서 어떻게 열어야 하는지 물어보니 명령어를 제공해 줍니다. 에러는 발생하였지만 웹페이지는 만들어 줬습니다.
미해결
[4주 과정] <클로드 코드> 완독 챌린지 : 매일 1시간씩 4주 동안 클로드 코드 도서 완독하기!
108페이지 내용에서 2개의 스코프 유형 중 User Scope(사용자 범위)에 대한 내용으로 질문 드립니다. 표 2-1 의 내용을 보면 User Scope 의 파일 위치 및 이름 항목에서~/.claude/CLAUDE.md 처럼 실습해보고 싶은데요. .claude가 무엇인지 궁금합니다. 설명부탁드립니다.
미해결
[4주 과정] <클로드 코드> 완독 챌린지 : 매일 1시간씩 4주 동안 클로드 코드 도서 완독하기!
디렉터리 잘 연결된것이 맞는건가요? 프롬프트 보고 입력하였는데 결과가 달라도 너무 다른것 같아서요
해결됨
한 입 크기로 잘라먹는 Next.js
예를 들어 로그인이 되지 않는 경우는 메뉴가 굳이 나올필요가 없어서.. 세션이 미존재면 보이지 않게 처리 했는데.... 이렇게 처리하는 방법이 일반적이지는 않을거 같은데.... 보통 로그인이 되지 않아 메뉴가 필요 없는 페이지는 어떻게 처리하나요? export default async function RootLayout({ children }: Readonly<{ topmenu: React.ReactNode; children: React.ReactNode; }>) { const cookie = (await cookies()).get("session")?.value; const session = await verify(cookie); return ( <html lang="en"> <body className={`${geistSans.variable} ${geistMono.variable} antialiased`} > {/* 세션이 undefined가 아닌 경우 TopNavigationMenu를 렌더링합니다. 'undefined'는 문자열이 아닌 JavaScript의 실제 undefined 값입니다. */} { session!==undefined&&<TopNavigationMenu/> } <main> {children} </main> </body> </html> ); }
해결됨
알면 칼퇴하는 Spring Boot 백엔드 바이브 코딩 맛보기
왤까요 저는 같은 SCP -SERVER 플러그인을 받았는데 이렇게 뜨고 클로드 연결도 안 되네요 ㅠㅠ 아 저는 커뮤니티가 아니라 울티메이트입니다 ㅠ
해결됨
웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크
React Native에서 바텀 네비게이션을 만들었다면, 웹에서는 바텀 네비게이션이 나오게하려면 어떻게 해야하나요?
미해결
[4주 과정] <클로드 코드> 완독 챌린지 : 매일 1시간씩 4주 동안 클로드 코드 도서 완독하기!
╭───────────────────────────────────────────────────╮ │ ✻ Welcome to Claude Code! │ │ │ │ /help for help, /status for your current setup │ │ │ │ cwd: /home/boss/_Book_Claude-Code/week1 │ ╰───────────────────────────────────────────────────╯ Tips for getting started: Run /init to create a CLAUDE.md file with instructions for Claude Run /install-github-app to tag @claude right from your Github issues and PRs > cd ../Thu/ ● Bash(cd ../Thu/) ⎿ Error: /bin/bash: line 1: cd: ../Thu/: No such file or directory ● Bash(ls -la ../) ⎿ total 40 drwxr-xr-x 7 boss boss 4096 Sep 22 15:03 . drwxr-x--- 8 boss boss 4096 Sep 25 10:57 .. … +7 lines (ctrl+o to expand) ● The Thu directory doesn't exist. Available directories in the parent folder are week1-4. Which directory would you like to navigate to? > Claude ● I'm Claude Code, Anthropic's official CLI for Claude. How can I help you with your software engineering tasks today? > 현재 디렉토리의 목적을 알려줘 ● Read(~/_Book_Claude-Code/week1) ⎿ Error: EISDIR: illegal operation on a directory, read ● Bash(ls -la) ⎿ total 28 drwxr-xr-x 6 boss boss 4096 Sep 24 18:08 . drwxr-xr-x 7 boss boss 4096 Sep 22 15:03 .. … +5 lines (ctrl+o to expand) ● Read( README.md ) ⎿ Read 14 lines (ctrl+o to expand) ● 현재 디렉토리(week1)는 클로드 코드 학습서의 1주차 과정입니다. 목적은 클로드 코드의 기본 사용법을 주차별로 학습하는 것입니다: - 월: 클로드 코드 설치 및 실행 - 화: 내장 명령어 학습 - 수: 로컬 파일 분석 방법 - 목: 디렉터리 분석 및 학습 계획 수립 - 금: 웹 페이지 생성 및 배포 - 주말: 다른 AI CLI 도구와 비교
