묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
다른 페이지갔다가 오면 게시글 불러와지는 이슈
게시글을 끝까지 스크롤하고,다른 페이지에 다녀오면다른 페이지갔다가 오면 게시글 불러와지는 이슈를 발견했습니다.index.js에서 게시글 불러오는 부분에mainposts의 조건을 붙여서 실행하면될거같은데차후 강의에서 해결해주시는 이슈인지 궁금합니다.아니면 저만 그런건지 여쭤봅니다!감사합니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
도메인과 S3연결 후 AWS 요금 과금문제 문의드립니다.
강의를 보고 따라하다가 오늘 보니 저번 달 사용량에 관련된 요금이 결제되었다고 메일을 받았습니다.. Amazon Virtual Private Cloud 에서 좀 많이 나왔고,,Amazon Route 53에도 요금이 나왔네요..총 만원정도 과금이 되었는데 어떤건지 몰라서 어디부분을 삭제해야 비용이 발생하지 않는걸까요?강의를 잘 보고 따라했는데.. 당황스럽습니다...
-
해결됨실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
mockServiceWorker.js 파일이 프로젝트내에 포함되어 있어야 하나요?
실무에 적용하려고 하니 msw 에서 많이 막히네요 ㅠ 그래서 올려주신 깃헙 프로젝트를 샅샅히 훑어보고 있는데 mockServiceWorker.js 이 파일과 package.json에"msw": { "workerDirectory": "public" } 요런 부분이 있더라고요. 요것들의 역할이 뭔지 알수 있을까요? msw 사이트에 가서 Getting started 를 가봐도 안나와 있는것 같아서 궁금합니다!
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
두 코드의 차이점
function add(a,b,callback){ sum = a + b; setTimeout(callback(sum),3000); } add(1,2,(value)=>{console.log(value)});function add(a,b,callback){ setTimeout(()=>{ const sum = a+b; callback(sum); },3000); } add(1,2,(value)=>{console.log(value)}); 위 두 코드의 차이점이 궁금합니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
props Dirlling을 방지하기 위해 Context를 사용하지만..
안녕하세요..!결국 Context도 이 컨테이너 안에 데이터를 몽땅 넣을 순 없으니 불필요한 렌더링을 최소화하기 위해 용도에 따라 분리하는것이 좋다라고 알려주셔서 잘 이해가 되었습니다 : )그런데 복잡한 대형 프로젝트에서는 결국 Context도 6개,7개 .. 늘어나다보면,<Context1.Provider> <Context2.Provider> <Context3.Provider> <Context4.Provider> <ContextN.Provider> .......이런식으로 늘어날텐데, Context도 몇개 이상 늘어나지 않도록 어느정도는 그룹핑을 해야할 것 같다고 생각이 듭니다. 코드 가독성을 유지하기 위해서 하위 컴포넌트들에게 전달할 데이터들을 최대 몇개 정도의 Context로 관리하는게 이상적일까요?..
-
해결됨코드로 배우는 React 19 with 스프링부트 API서버
config 패키지 내 파일 문의
이전 학습인 섹션2 Rest 방식 컨트롤러 만들기 (2)까지만 해도 RootConfig 파일이 없었는데 지금 수업 Rest컨트롤러 - 수정/삭제, CORS 에는 해당 class 파일이 추가 되어 있더라구요.그런데 querydsl 검색처리 에서 제공해주신 압축 파일에 해당 RootConfig 파일이 존재 하는데 해당 파일을 추가 해야하는지 없어도 괜찮은지 궁금해서 문의 드려요.
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
회원가입 과제 완료용
안녕하세요!!과제 완료해서 피드백 부탁드리고자 올렸습니다!앞으로 잘 부탁 드립니당~<html><!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link rel="stylesheet" href="./02-signup.css"> </head> <body> <div class="signUpContent"> <h2> 회원 가입을 위해<br> 정보를 입력해주세요 </h2> <label for="email" class="label text">* 이메일</label> <input id="email" class="input_text" type="text"> <label for="name" class="label text">* 이름</label> <input id="name" class="input_text" type="text"> <label for="password" class="label text">* 비밀번호</label> <input id="password" class="input_text" type="password"> <label for="password_chk" class="label text">* 비밀번호 확인</label> <input id="password_chk" class="input_text" type="password"> <div class="signUpChk"> <input id="gender_w" class="input_radio" type="radio" name="gender"> <label for="gender_w" class="label gender">여성</label> <input id="gender_m" class="input_radio" type="radio" name="gender"> <label for="gender_m" class="label gender">남성</label> </div> <div class="agreeChk"> <input type="checkbox" id="input_chk"> <span class="agree_text"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </span> </div> <div class="out-line"> <div class="line"></div> </div> <button> <span>가입하기</span> </button> </di> </body> </html><css>* { box-sizing: border-box; } h2 { font-size: 32px; color: #0068FF; font-weight: 700; line-height: 47px; } .out-line{ padding: 30px 0px; } .line { border-bottom: 1px solid #E6E6E6; } .label{ font-size: 16px; font-weight: 400; line-height: 24px; } .signUpContent{ width: 670px; height: 960px; border: 1px solid #AACDFF; border-radius: 20px; box-shadow: 7px 7px 39px rgba(0, 104, 255, .25) ; display: flex; flex-direction: column; padding: 72px 100px 70px 100px; } .label.text{ padding: 20px 20px 0 0; color: #797979; } .input_text{ border-style: none; border-bottom: 1px solid #CFCFCF; height: 60px; } .signUpChk{ display:flex; justify-content: center; align-items: center; padding: 50px 0; } .input_radio{ margin: 0 5px 0 0; width: 20px; height: 20px; } .label.gender{ padding-right: 30px; } .agreeChk{ display: flex; justify-content: center; align-items: center; } .agree_text{ height: 22px; font-size: 14px; font-weight: 400; line-height: 20px; } button{ width: 470px; height: 75px; background-color: #FFF; border: 1px solid #0068FF; border-radius: 10px; } button > span { font-size: 18px; font-weight: 400; color: #0068FF; }
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
회원가입하고나서 로그인 풀리는 현상
안녕하세요회원가입 후에 로그인이 된 상태여야 하는데로그인이 풀리는 현상을 확인했습니다. 왜 인지 찾아보니프론트에선 회원가입 후 더미데이터를 가지고 로그인 하고 있었음백단에서는 회원가입 유저의 정보를 내려주지 않고 있었음.이런 경우때문인 것 같았습니다.그래서 회원가입 후 메인 페이지로 라우팅 되면메인페이지에서 로그인 유무를 판단하는 로직이 실행되고,더미데이터로 있던 데이터를 로그인 풀어버려서 그런게 아닐까 합니다. 그러면/back/routes/user.jsconst user = await User.create({ email, nickname, password: hashedPassword, }); 여기서 user정보를 내려줘야할거 같은데여기서 더 필요한 post, image같은 이미지는 어떻게 추가해야하는지 궁금합니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
센셕4 게시물 불러오기 postcard.js에서 post.User.nickname[0]에러
안녕하세요센셕4 게시물 불러오기 postcard.js에서 post.User.nickname[0]에러가 발생해서 처음엔 간단하게/components/postcard.js<Card.Meta avatar={<Avatar>{post.User?.nickname[0]}</Avatar>} title={post.User?.nickname} description={<PostCardContent postData={post.content} />} />이런식으로 해결했었습니다.아 같은 파일 위치에서{id && post.User?.id === id ? ( <> <Button type='primary' key='modify'> 수정 </Button> <Button type='danger' key={"delete"} onClick={onRemovePost} loading={removePostLoading}> 삭제 </Button> </> ) : ( <Button type='dashed' key={"report"}> 신고 </Button> )}post.User?.id이것도 같은 식으로 처리했었습니다.그런데 제로초님 코딩을 몇번 다시봤더니비슷한 에러가 코멘트에서 났었는데/routes/posts.jsconst express = require("express"); const router = express.Router(); const { Post, User, Image, Comment } = require("../models"); // GET /posts 여러 게시글 가져오기 router.get("/", async (req, res, next) => { try { const posts = await Post.findAll({ limit: 10, include: [ { model: User, attributes: ["id", "nickname"], }, { model: Image, }, { model: Comment, include: [ { model: User, attributes: ["id", "nickname"], }, ], }, ], }); res.status(200).json(posts); } catch (error) { console.error(error); next(error); } }); module.exports = router; 이런식으로 데이 필요한 id, nickname을 넣어주셔서 ?를 붙이지 않고 해결하셨더라구요.혹시 저 nickname부분도 위와같이 백단에서 코드를 수정해서 고칠수 있을까요?따라서 해봤는데 잘 안되서 여쭤봅니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
리액트쿼리 어떤부분이 잘못되었을까요?
안녕하세요.인피니티스크롤 을 따라하는데 잘안되서요.const queryClient = new QueryClient(); await queryClient.prefetchInfiniteQuery({ queryKey: ["member", "sales", sawonCode], queryFn: getSales, initialPageParam: 0, }) const dehydratedState = dehydrate(queryClient); return <> <Suspense fallback={<Loading />}> <HydrationBoundary state={dehydratedState}> <SalesList sawonCode={sawonCode} /> </HydrationBoundary> </Suspense> </>const { data, fetchNextPage, hasNextPage, isFetching, } = useInfiniteQuery<Item[], Object, InfiniteData<Item[]>, [_1: string, _2: string, _3: number], number>({ queryKey: ["member", "sales", sawonCode], queryFn: getSales, initialPageParam: 0, getNextPageParam: (lastPage) => lastPage.at(-1)?.page, staleTime: 60 * 1000, // fresh -> stale, 5분이라는 기준 gcTime: 300 * 1000, }); const { ref, inView } = useInView({ threshold: 0, delay: 0, }); useEffect(() => { if(inView) { console.log(data); !isFetching && hasNextPage && fetchNextPage(); } }, [inView, isFetching, hasNextPage, fetchNextPage]);useEffect에 콘솔에찍은 data는 undefined 이 찍히고 그후에 getSales에 찍은 api 로 가져온 데이터가 찍힙니다.어떤게 잘못되서 data에 값이 안들어가는지 몇시간을 봐도 잘모르겠네요..ㅜㅜ
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
터미널에 vercel이란 말을 인식을 못 해요..
PS C:\Users\user\Documents\onebite-react\section12> vercel loginvercel : 'vercel' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오.위치 줄:1 문자:1+ vercel login+ ~~~~~~ + CategoryInfo : ObjectNotFound: (vercel:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException이렇게 뜹니다..ㅜ
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
인텔리제이 tailwindcss
안녕하세요. 저는 인텔리제이에서 vite로 리액트를 설치하고, 스프링 부트 프로젝트와 연동을 시켜놓은 상태로 강사님 강의를 따라가고 있는데요. 강의 따라서 tailwind 설치하고, 코드 추가해주고 App Component에서 스타일을 쓰려고 하니, 적용이 안되는데 어떻게 해결할 수 있을까요??
-
미해결Next + React Query로 SNS 서비스 만들기
NextAuth Credentials authorize의 결과 타입
return { name: user.nickname, email: user.email, image: user.profileImage, ...user, };강의에서 user를 그대로 리턴해서 사용하지 않고 user를 커스텀해준 것을 보았습니다. 현재 return하는 값은 Typescript에서 지정한 User 타입을 그대로 사용하면서 수정해서 값을 할당해줬다고 이해했는데 추가로 들어가는 ...user는 어디에서 사용할 수 있는지 궁금합니다. 추가로 제 코드에는 반환하는 정보가 더 많은데 어떤 식으로 값을 할당해서 사용할 수 있는지 궁금합니다.타입을 하나 만들어서 확장해서 사용하고 싶은데 따로 파일을 만들어줘야 할까요?
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
mariadb 다운로드 관련 질문입니다.
안녕하세요 강의 잘 듣고 있습니다.저는 version을 클릭해도 아무것도 뜨지 않습니다....도움 부탁드립니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
로그인 기능을 next-auth와 수업에서 처럼 직접 구현하는 것 어떤걸 더 추천하시나요?
안녕하세요 제로초님강의를 따라가다 보니 로그인 부분이 엄청 복잡하더라구요,개인적으로 next-auth을 사용하면 되게 간편했던걸로 기억하는데 제로초님은로그인 기능을 만들게 된다면 next-auth와 수업에서 처럼 직접 구현하는 것 어떤걸 더 추천하실지 궁금합니다.직접구현하는게 로그인이 어케 이뤄지는지 이해할수있어서 좋은거같은데 여쭤보고 싶었습니다!
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
changer라는 컴포넌트를 사용하는 이유
HeaderBgChanger라는 컴포넌트는 단순히 서버 컴포넌트에서 react hook을 사용할 수 없기 때문에 만드는 컴포넌트인지 궁금합니다.또 이렇게 컴포넌트를 만들 경우에 렌더링 될 때 영향을 주는 부분은 없는지 궁금합니다.
-
미해결Next + React Query로 SNS 서비스 만들기
Nextjs fetch, react-query 캐시 개념
Nextjs fetch도 캐시가 지원되고, react-query도 캐시가 지원되는걸로 이해를 했는데요 문득 궁금한 점이 생겨서 질문 드립니다. Nextjs fetch와 react-query에서의 캐시는 같은 개념인가요? 아니면 서로 다른 개념인가요?왜 Nextjs fetch를 안 쓰고 react-query를 쓰는 걸까요?Nextjs fetch는 어떨 때 쓰고 react-query는 어떨 때 쓰는 건가요?감사합니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
Suspense 컴포넌트의 fallback 요소로 클라이언트 컴포넌트 전달?
안녕하세요.Suspense 컴포넌트의 fallback 요소로 서버 컴포넌트 전달은 문제가 없는데, 내부적으로 useEffect와 타이머를 사용하는 클라이언트 컴포넌트를 전달했더니 해당 훅과 관련된 내용은 모두 스킵되고 그냥 초기 렌더링 내용만 나오는 것 같은데, 애초에 클라이언트 컴포넌트는 전달이 불가능한걸까요?클라이언트 컴포넌트 사용 의도는 1초마다 로딩바 게이지가 증가하는 모습을 보여주고 싶어서 사용해보려고 했습니다.공식 문서를 봐도 해당 내용에 대해서는 언급이 없는 것 같습니다.감사합니다.
-
미해결Next + React Query로 SNS 서비스 만들기
useQuery 오류가 발생합니다
"use client"; import { useQuery } from "@tanstack/react-query"; import { getPostRecommends } from "@/app/(afterLogin)/home/_lib/getPostRecommends"; import Post from "@/app/(afterLogin)/_component/Post"; import { Post as IPost } from "@/model/Post"; export default function PostRecommends() { const { data, error, isLoading } = useQuery<IPost[]>({ queryKey: ["posts", "recommends"], queryFn: getPostRecommends, // gcTime은 staleTime보다 길어야한다 staleTime: 5 * 1000, // 새로 가져온 데이터를 몇 초 후에 fresh에서 stale로 바꿀 것인지 gcTime: 300 * 1000, }); if (isLoading) { return <div>Loading...</div>; } if (error) { return <div>Failed to load posts</div>; } return data?.map((post) => <Post key={post.postId} post={post} />); } react query에서 에러가 발생합니다 이유는 모르겠지만 useQuery부분에서 에러가 발생하는 것 같습니다getPostRecommend.ts는 이렇게 작성한 상태입니다export async function getPostRecommends() { const res = await fetch(`http://localhost:9090/api/postRecommends`, { next: { tags: ["posts", "recommends"], }, //캐시를 저장하라고 지정하는 태그 // 너무 강력하게 캐싱을 하면 새로운 데이터가 안불러와 질 수 있다 // 이런 일을 방지하기위해 새로고침을 해야하는 이때 tags를 사용한다 }); // The return value is *not* serialized // You can return Date, Map, Set, etc. if (!res.ok) { // This will activate the closest `error.js` Error Boundary throw new Error("Failed to fetch data"); } // 이렇게 하면 recommends를 키로 가지고 있는 서버에 있는 캐시가 날아감 // revalidateTag("recommends") // home으로 온 요청이 왔을때 페이지 전체의 캐시를 새로고침한다 // revalidatePath('/home') return res.json(); }근데 getPostRecoomed.ts가 잘못된거 같지는 않은것이처음 작동하는 queryClient.prefetchQuery는 잘 작동합니다
-
해결됨코드로 배우는 React 19 with 스프링부트 API서버
/api/member/login 404 에러 질문 드립니다.
시큐리티까지 강의를 듣고 혼자 실습 예제 만들어서 회원가입부터 진행하고 있습니다. 강의 따라서 진행할 때에는 잘 됐는데, 지금은 섹션6 시큐리티 부터 따라했는데 /api/member/login 으로 포스트맨이나 웹 브라우저로 접속하면 해당 경로를 찾을 수 없다는 404 에러가 발생하게 됐습니다. ㅠㅠ http.formLogin(config -> config.loginPage("/api/member/login"));강의 따라 진행할 때에도 /api/member/login 컨트롤러는 별도로 없었는데, 지금 왜 갑자기 에러가 발생하는지 궁금합니다 ㅜㅜ
