getPostData 함수 질문
미해결
손에 익는 Next.js - 블로그 만들기
return 문에 왜 matterResult.data를 반환해주나요? id 와 content만 있으면 되는거 아닌가요?? 추가해주는 이유가 궁금합니다.
- react
- 블로그
- next.js
173만명의 커뮤니티!! 함께 토론해봐요.
미해결
손에 익는 Next.js - 블로그 만들기
return 문에 왜 matterResult.data를 반환해주나요? id 와 content만 있으면 되는거 아닌가요?? 추가해주는 이유가 궁금합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
backend-practice 로 시작하는 포트폴리오용 백엔드 서버만 접속이 가능하고 다른 서버들은 현재 접속할 수 없습니다. 이로인해 현재 포트폴리오용 사이트 실습을 제외하고 기본 강의에서 제시해주시는 코드 테스트가 불가능합니다. 약 일주일정도 살짝 넘게 강의 수강하면서 시도하는데 문제가 지속되는 것으로 봐서 관리가 안되고 있는 것 같은데 확인 부탁드립니다.
해결됨
프론트엔드 마스터클래스
저는 풀스택 주니어입니다. 특수 목적을 위해 바닐라js에서 ,document.innerHTML이나 element.remove(), element.append() 등으로 html element의 생성과 삭제가 빈번한 로직을 다루고 있습니다. 이 때 종종 브라우저 렌더링의 실행 완료에 대해 명확하게 알지 못해서 찝찝한 채로 브라우저에 렌더링 일을 시키고 있습니다. 그러던 중 이벤트 루프 관련 3개 강의(16,17,18강) 를 듣고 복습차, 17강으로 다시 돌아와서 보는 2분18초 경에 브라우저 랜더링에 대해 궁금한게 생겼습니다. 예를 들면 const mySchedule = async () => { await randeringPipelineTask(); //랜더링파이프라인 await macroTask(); // 매크로태스크(); } 으로 구성된 mySchedule 메서드가 있다고 가정하겠습니다. macroTask()는 renderingPipelineTask()의 브라우저 페인트까지 모두 완료를 확인한 후에 실행될까요? 아니면 JS엔진이라는 것은, 페인트는 브라우저에 렌더링을 해달라고 부탁까지만하고 macroTask()를 실행할까요? ('실행의 시작'과 '실행의 끝'을 나눠서 생각해서 그런지 생각하면 할수록 햇갈립니다.)
해결됨
비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE
안녕하세요! 현재 flutter를 통한 IOS 앱스토어 등록을 진행하고 있는데요. 지금까지 진행 상황은 Apple Developer 등록 (1년 결제까지 완료) 그리고 승인 메일까지 받았습니다. Xcode를 통해서 4-9 App Store 출시하기를 따라하는 중인데, 5분 55초 부분에서 이제 Signing & Capabilities에서 Team을 등록한 Apple Developer 계정으로 선택을 했습니다. 그 이후에 Status에 아래의 에러 Status가 계속 나오면서 AI와 함께 이것저것 해보고 있는데 안되고 있는 상황입니다. 도와주세요! Communication with Apple failed Your team has no devices from which to generate a provisioning profile. Connect a device to use or manually add device IDs in Certificates, Identifiers & Profiles. https://developer.apple.com/account/ No profiles for 'com.xxx.xxxx' were found Xcode couldn't find any iOS App Development provisioning profiles matching 'com.xxxx.xxxxx'.
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
*먼저 이 질문의 글을 그랩님께서 보신다면, [꼭][[꼭] 그랩님, 답변 부탁드립니다], Failed to load resource: the server responded with a status of 404 (Not Found) 상품 상세 페이지 질문입니다. https://inf.run/FB4N9 링크부터 본 뒤 답변을 그 게시물에 해 주신 후 이 질문 글 아래에도 답변 을 부탁 드립니다. 그랩님, 좋은 강의 잘 듣고 있습니다. 다름이 아니라, 아래 질문글에서 단 하나도 수정한 것 없이 몇일 뒤 재부팅만 해주었는데요, VS CODE에서 실행을 해주면 아래와 같이 에러도 줄어들어들었습니다. 그리고 위 그림에서 축구공을 누르면 '상품 상세 페이지'가 아무리 기다려도 뜨지 않고 오른쪽에 에러 가 발생 합니다. 에러 발생 스샷 아래 첨부 합니다. ( 참고로 이전에는 상품 상세 페이지의 상품 정보를 받고 있습니다...가 에러 없이 내용을 잘 불러왔었습니다 . 그런데 왜 지금은 아무리 기다려도 내용을 불러오지 못하는 이유를 모르겠습니다. ) 오른쪽에 에러를 해결하여 상품 정보를 받고 있습니다... 내용이 불러오게 하려면 어떻게 해야 하나요 ? ------------------------------------------------------------------------------------------------- 또한 79강 강의 2분 56초 부터 3분 32초 보면, POSTMAN 테스트 를 하는 부분이 나오는데, 여기서 아래 사진을 보면[왼쪽 메뉴 get product] Body 부분에서 그랩 강사님 화면과 다르게 뜨는데, 이것은 왜 그런 건가요? 어떻게 해야 http://localhost:8080/products/1 , http://localhost:8080/products/2 , http://localhost:8080/products/3 을 제대로 작동하게 할 수 있나요? 마지막으로 [참고 사진]으로 POSTMAN의 잘 작동하는 [get products]사진 첨부해 봅니다. 어떻게 해야 이 모든 에러 를 해결 할 수 있을지에 대해 자세한 답변 부탁 드립니다.
해결됨
[Live 챌린지] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)
언제부터 영상을 볼수 있나요? 공지를 해주세요
해결됨
[Live 챌린지] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)
챌린지 시작전 먼저 강의 볼 수 없나요?
미해결
내가 타이타닉에 탔었다면?! PyTorch & Next.js로 생존 확률 예측 AI 웹 서비스 만들기
또한 next에서 실습시 사용한 폴더구조는 어떤 구조이며 , 상용화된 구조인가요? 궁금합니다. 추가로 닭강정님 강의 잘 듣고있습니다. 이번강의 완독후 electron 강의도 학습하려고하는데 프론트 프레임워크가 해당강의는 next인데 , electron강좌는 react인것같더라구요 next도 electron을 통해서 포팅가능한가요?
미해결
모바일 웹 제작 입문: Figma 디자인 완벽 구현하기 with Javascript
11. login 페이지 - 폼 요소 작성 및 스타일 19:12 앱 전체 사이즈 넓이가 414px 피그마에서 빨간줄에는 us.가 한줄 강사님의 코딩 저의 코딩 수업 중 따라하던 중 뷰어를 보니 us.가 내려가 있음 똑같이 했는데 왜 이럴까요 근데 font-weight: 700; 이 부분을 빼니 us.가 위로 잘 올라가 있고요 font-weight: 700;를 넣으면 다시 내려오지요 header 패딩도 강사님이랑 동일한데 무엇때문일까요? 참고로 저는 맥을 사용하고 크롬을 보고 있었습니다.
미해결
모바일 웹 제작 입문: Figma 디자인 완벽 구현하기 with Javascript
11. login 페이지 - 폼 요소 작성 및 스타일 9:58 수업노트보기에서 참조: https://creatie.ai/ 이 링크가 지금은 변경이 되어 https://readdy.ai/ 로 되어있어서요 이젠 유료이고 프롬프트로 이젠 제작하는 것 같습니다. 그래서 대안은 피그에 플로그인에 AutoHTML | Components to Code 나 다른 플러그인 추천이 좋을 것 같습니다.
해결됨
Vue.js 끝장내기 - 실무에 필요한 모든 것
vue CLI 대신 vite를 사용해도 강의 내용을 잘따라갈수있을까요? 회사 프로젝트를 리팩토링을 하려고합니다. eslint나 프리티어를 포함한 세팅부분에서 도움을 얻고자 강의를 구매하였는데 vite를 사용해도 강의 실습을 잘따라갈수있는지 문의드립니다.
해결됨
프론트엔드 마스터클래스
안녕하세요! 강의가 누락된 것 같아 글 작성합니다. 확인부탁드릴게요! 30강 Map 강의로부터 31강까진 문제없이 연결되는데, 32. WeakRef + FinalizationRegisty 강의시작부터 연결이 매끄럽지 못합니다. 뜬금없이 대안?에 대해서 나오는데 Map 예제부분과 WeakMap 부분이 누락된것같습니다.
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
좋은 강의 감사합니다. React.js 소개 부분을 보며 궁금한점이 있어 문의드립니다. 화면 업데이트 관련 브라우저 렌더링 과정은 React.js뿐 아니라 Vue.js에서도 동일하게 적용되나요? 예를들면, Virtual Dom에서 한번에 모아 Actual DOM에 적용되는 방식등이요
해결됨
[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)
안녕하세요! 저도 동일한 현상을 겪고 있습니다. 레이아웃은 그대로 복제되는데, 이미지가 모두 누락되어 있습니다. 제 생각에는 수강생들에게 보기 권한만 부여되어 있어서 해당 리소스에 접근할 수 없고, 그로 인해 파일 복제 시 이미지가 빠지는 것 같습니다. 혹시 가능하시다면, 모든 수강생이 문제없이 접근할 수 있도록 이미지를 파일 내에 직접 포함한 버전으로 자료를 수정해 다시 업로드해 주실 수 있을까요? 그렇게 해주신다면 저를 포함한 다른 수강생들도 문제없이 실습을 진행할 수 있을 것 같습니다. 바쁘시겠지만 확인 부탁드립니다. 좋은 강의 감사드립니다!
미해결
한 입 크기로 잘라먹는 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 해결완료 버튼을 클릭해주세요 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요 더 빠른 답변이 가능합니다!
해결됨
[자바스크립트부터 리액트까지] 포기없는 React로 가는 길 [Full vers.]
[자바스크립트부터 리액트까지] 포기없는 React로 가는 길 [Full vers.] 122 / 122강(100%) 2027. 01. 01. 23:59 만료 모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.] 78 / 78강(100%) 2027. 01. 01. 23:59 만료 쌩초보, 비전공자를 위한 [HTML 스타터] 부트캠프 이3강좌가 수강기간이 제한이있어서 무제한으로 변경즘부탁드립니다.
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
저는 아무래도 정답이 C 같은데.. 질문에서 /docs 도 포함되어야 한다고 했으므로, 옵셔널 캐치올만이 루트 경로( /docs )까지 모두 처리할 수 있는거 아닌가요? 다 학습하고 혼란이 오네요..
해결됨
비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE
아니 며칠이나 기다렸는데, 웹에 특별히 더 넣을 기능도 없는데, 어떻게 더 고품질로 만들죠...게시글도 15개이상 1000자이상 무조건 넣어야하나요~?ㅜ 정확히 뭐가 어디가 부족하다라고 해주면 좋은데 특별한 고지도 없고.. ,이렇게 웹승인 받기가 힘들면...어떻게 만들으라구..ㅜㅠ 혹시 방법있을까요 샘? 커서는 두리뭉실한 얘기만 해줘서 또 며칠이나 기다려서 실패하면 어떡하나 고민입니다. 그리고 커뮤니티 즉 회원가입,로그아웃 기능에 대해서 조금더 설명이나 관련 링크를 좀 주실수 있을까요?회원가입이나 뭐가 되야 결제시스템도 등록이 가능한데 그런게 없어서 계속 헤매고 있네요...
해결됨
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); } };
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
이런식으로 함수 표시 방식인 ()=>{} 이렇게 사용을 하면 삭제 버튼을 눌렀을 때 모든 리스트가 사라집니다. 또한 앞에서 사용했던 map함수 같은 경우에도 강의와는 다르게 중괄호를 쓰면 문제가 생겼어서 소괄호로 바꿨더니 정상적으로 돌아갔었습니다. 현재 위 함수들에는 중괄호를 쓰면 안되는걸까요?? 참고로 map함수는 한 줄이 아니라 여러줄이었는데도 중괄호를 쓰면 에러, 소괄호를 써야 정상작동했었습니다. 정환님 책에는 별다른 말이 없고 강의에도 별다른 얘기가 없어서 미치겠습니다ㅜㅜㅜㅜㅜ