묻고 답해요

강의에 사용된 코드 다운 받는 사이트 주소 있나요?

미해결

이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)

강의에 사용된 코드 다운 받는 사이트 주소 있나요?

• react
• node.js
• aws
• mongodb
• express
• lambda

react-query의 useSuspense.. 사용 시 클라이언트에서 suspense가 동작을 하지 않습니다.

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요. 강사님 예제를 보고 하던 중 suspense 가 동작하지 않아 질문드립니다. 처음 예시로 알려주신 react-query의 isPending 을 사용한 로딩처리는 잘 동작하지만 마지막에 알려주신 useSuspense( useSuspenseInfiniteQuery, useSuspenseQuery )들을 사용하는 경우 동작하지 않네요.. * 팔로우 중 을 선택해도 suspense에 설정한 로딩 컴포넌트가 나오지 않고 딜레이된 시간(5초) 후 데이터가 보여집니다. 로딩 컴포넌트도 회전하지 않고 멈춰있습니다. 어떤부분을 봐야할까요?ㅠㅠ 반대로 이런 증상을 경험하니 이전 데이터가 먼저 보여진 후 5초 뒤에 최신 데이터로 보여지므로 사용자가 잘 못된 데이터를 표시 할 수 있다는걸 배울 수 있었습니다. 😎 소스코드 const HomePage = async () => { return ( <HomeContextProvider> <HomeTopTab /> <WriteForm /> <Suspense fallback={<Loader />}> <TabDividerSuspense /> </Suspense> </HomeContextProvider> ); }; const TabDividerSuspense = async () => { const queryClient = new QueryClient(); await queryClient.prefetchInfiniteQuery({ queryKey: ["tweet", "recommends"], queryFn: getPostRecommends, initialPageParam: 0, }); const dehydratedState = dehydrate(queryClient); return ( <HydrationBoundary state={dehydratedState}> <TabDivider /> </HydrationBoundary> ); }; const TabDivider = () => { const { tab } = useContext(HomeContext); return tab === "recommended" ? <TweetList /> : <FollowingList />; }; const TweetList = () => { const { ref, inView } = useInView(); const { data, fetchNextPage, hasNextPage, isFetching, isPending } = useSuspenseInfiniteQuery< Post[], object, InfiniteData<Post[]>, [string, string], number >({ queryKey: ["tweet", "recommends"], queryFn: getPostRecommends, initialPageParam: 0, getNextPageParam: (lastPage) => lastPage.at(-1)?.postId, }); useEffect(() => { if (inView) { !isFetching && hasNextPage && fetchNextPage(); } }, [fetchNextPage, hasNextPage, inView, isFetching]); const tweets = useMemo(() => { if (data) { return data.pages.flat(); } }, [data]); return ( <> {tweets?.map((tweet) => ( <Tweet post={tweet} key={tweet.postId} /> ))} {isPending && <Loader />} <div ref={ref} /> </> ); }; 추가 질문 빌드 후 네트워크 탭에서 home 을 확인해보면 post 글 들이 모두 html로 변환되어 내려 오고 있습니다! (dev에서는 템플릿?으로 표현되더라고요) 저는 html이 아닌 데이터 형태로 내려와 useQuery로 해당 키로 접근해서 그냥 데이터를 가져올 줄 알았는데..그게 아닌가 보네요. 혹시 좀 더 자세히 설명 좀 부탁드려도 될까요?ㅠ 그리고 home 의 미리보기 탭에서는 post글들이 아닌 로딩 컴포넌트가 보입니다. (위의 사진에 응답 탭에서는 post글 들이 존재하고요) 로딩 컴포넌트가 보이는 이유는 하이드레이션이 처리되기 전이라 그런게 맞나요? 지금 자료를 다시 찾으려니 못 찾고 있는데.. suspense를 사용할 경우 완성된 화면이 아닌 로딩화면을 먼저 내려주므로 seo에는 나쁠 수 있다 라는 글을 본적이 있던 것 같은데..맞을까요? *SEO 관련해서 추가로 궁금한건 강의가 따로 있다고 영상에서 말씀하셔서 거기까지 보고 필요할 경우 질문 한번 더 드리겠습니다. 👍

• react
• next.js
• react-query

defaultProps 사용이 이제 불가해진다고 경고문이 왔습니다

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

내용을 찾아보니 defaultProps에 대한 지원은 향후 주요 릴리스의 함수 구성 요소에서 제거될 예정이고, 대신 JavaScript 기본 매개변수를 사용하세요. 라고 나와있는데 defaultProps 를 사용하지 않으면 기본값은 어떻게 설정해야 할까요??

• javascript
• react
• node.js

map을 이용한 EmotionItem 렌더링 질문

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

강의 14:00 쯤에 작성하신 map 함수를 이용한 EmotionItem 렌더링 파트에 질문이 있습니다. 강의에서는 아래처럼 작성하셨는데 emotionList.map((item) => { <EmotionItem key={item.emotionId} {...item} /> }); 저는 map 내부 콜백함수에서 return 을 붙이지 않으면 화면에 렌더링 되지 않더라구요. 특별히 다른 이유가 있을까요?

• javascript
• react
• node.js

Provider를 외부에 노출하는 것보다 내부 로직으로 숨기는 것은 어떤가요?

해결됨

[React / VanillaJS] UI 요소 직접 만들기 Part 2

<Dropdown.Provider list={data}> <Dropdown.Container> <Dropdown.Trigger></Dropdown.Trigger> <Dropdown.List></Dropdown.List> </Dropdown.Container> </Dropdown.Provider> 위와같이 Provider을 노출하는 것보다, 아래와 같이 Container 내부에 Provider을 불러와서 사용하는 것이 캡슐화 측면에서 좋지 않나요?! // DropdownContainer <DropdownContextProvider> <div className={cx("Dropdown")} onKeyDown={handleKeyDown} onClick={(e) => e.stopPropagation()} > {children} </div> </DropdownContextProvider> <Dropdown.Container list={data}> <Dropdown.Trigger></Dropdown.Trigger> <Dropdown.List></Dropdown.List></Dropdown.Container>

• react
• typescript
• dom
• ui
• vanilla-js

keyEventMap를 전역에 구현하신 이유가 궁금합니다!

해결됨

[React / VanillaJS] UI 요소 직접 만들기 Part 2

const KeyEventMap: Partial<Record<KeyboardEvent<Element>['key'], KeyEventHandler>> = { ArrowUp: (e, { size, focusIndex }) => { e.preventDefault() focusIndex(prev => (size + prev - 1) % size) }, ArrowDown: (e, { size, focusIndex }) => { e.preventDefault() focusIndex(prev => (size + prev + 1) % size) }, Enter: (e, { focusedIndex, selectIndex }) => { e.preventDefault() selectIndex(focusedIndex) }, Escape: (e, { toggle }) => { toggle(false) }, } 제 짧은 지식으로는 focusIndex, selectIndex를 파라미터로 받는 것보다 context 내부에서 그냥 사용하는 것이 더 간단할 것 같다고 생각했습니다. keyEventMap을 전역에 구현하여, focusIndex와, selectIndex를 따로 파라미터로 받아서 사용하시는 이유가 있을까요?

• react
• typescript
• dom
• ui
• vanilla-js

jsx 코드 작성 후 터미널 연결

미해결

처음 만난 리액트(React)

jsx 코드 사용 후 터미널 연결하기를 하면 아래와 같은 오류가 뜹니다. 폴더 이름은 맞게 입력했는데 왜 이런 오류가 생기는지 모르겠습니다.ㅠ

• HTML/CSS
• javascript
• react

변수, useState 부분 질문있습니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요 수업 너무 잘 듣고 있습니다. 수업을 듣다 궁금한점이 생겼는데 제가 인강을 보면서 변수 let, const와, 리액트에서 useState부분을 보고 이해는 갔지만 제가 막상 혼자 코드를 친다고 했을때 let, const와 useState를 언제 작성을 하면 되는지 잘 모르겠더라구요. 혼자 코드를 작성을 한다고 할때 변수와 useState를 언제 작성을 하면된다라고 이해를 하면 쉽게 이해할수있을까요?

• react
• node.js
• seo
• graphql
• next.js

link태그의 prefetching 질문

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요 선생님 상세페이지에서 홈으로 이동할때 로딩화면에 관련해서 Link태그의 prefetching 질문있습니다. 아래와 같이 suspense를 적용했을때 app/(afterLoging)/home/page.tsx import style from './home.module.scss' import Tab from "@/app/(afterLogin)/home/_component/Tab"; import TabProvider from "@/app/(afterLogin)/home/_component/TabProvider"; import PostForm from "@/app/(afterLogin)/home/_component/PostForm"; import TabDeciderSuspense from '@/app/(afterLogin)/home//_component/TabDeciderSuspense'; import { Suspense } from 'react'; import Loading from './loading'; import { auth } from '@/auth'; export default async function Home() { const session = await auth(); return ( <main className={style.main}> <TabProvider> <Tab /> <PostForm me={session} /> {/* suspense는 서버컴포넌트여야만 한다. */} {/* suspense는 부모컴포넌트여야지 자식(아래)있는 컴포넌트 감지할 수 있다. */} <Suspense fallback={<Loading />}> <TabDeciderSuspense /> </Suspense> </TabProvider> </main> ); } next.js 문서를 보면 link태그가 있는 경우, 화면에 들어왔을때 static한 부분은 prefetch하고, 데이터 호출이 필요한 경우는 loading.tsx까지 호출해준다고 되어있더라구요. 그래서 제가 기대한 것은 상세페이지에서, 홈의 Link태그가 화면에 들어오기 대문에, 홈으로 이동했을때 첫번째 이미지가 아닌, 두번째 이미지처럼 로딩이 되어야할 것 같은데 첫번째 이미지 처럼 되더라구요. (이동한것도 30초 이내였습니다) 혹시 제가 잘못이해한건지 알려주시면 감사합니다. 유저 상세페이지에서 홈으로 이동할때 suspense적용후 새로고침하거나 팔로우중 클릭시

• react
• next.js
• react-query
• next-auth
• msw

찜하기하고 해당글 상세페이지 이동시 찜 정보제대로 안내려오는 현상

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요 선생님 홈에서 찜했다, 안했다 잘 작동하고 상세페이지로 이동하면 찜하기 데이터가 제대로 내려오지 않는 부분을 확인했습니다. 호출은 아래와 같이 하고있습니다. /src/app/(afterLogin)/[username]/status/[id]/page.tsx import BackButton from "@/app/(afterLogin)/_component/BackButton"; import style from './singlePost.module.scss'; import Post from "@/app/(afterLogin)/_component/Post"; import CommentForm from "@/app/(afterLogin)/[username]/status/[id]/_component/CommentForm"; import SinglePost from '@/app/(afterLogin)/[username]/status/[id]/_component/SinglePost'; import Comments from '@/app/(afterLogin)/[username]/status/[id]/_component/Comments'; import { HydrationBoundary, QueryClient, dehydrate } from '@tanstack/react-query'; import { getSinglePost } from '@/app/(afterLogin)/[username]/status/[id]/_lib/getSinglePost'; import { getComments } from '@/app/(afterLogin)/[username]/status/[id]/_lib/getComments'; type Props = { params: { id: string} } export default async function Pasge({ params }: Props) { console.log('----------------------------- single post params', params); const { id } = params; const queryClient = new QueryClient(); await queryClient.prefetchQuery({ queryKey: ['posts', id], queryFn: getSinglePost }); await queryClient.prefetchQuery({ queryKey: ['posts', id, 'comments'], queryFn: getComments }); const dehydratedState = dehydrate(queryClient); return ( <div className={style.main}> <HydrationBoundary state={dehydratedState}> <div className={style.header}> <BackButton/> <h3 className={style.headerTitle}>게시하기</h3> </div> <SinglePost id={id} /> <CommentForm id={id} /> <div> <Comments id={id} /> </div> </HydrationBoundary> </div> ) } /src/app/(afterLogin)/[username]/status/[id]/_component/SinglePost.tsx 'use client'; import { Post as IPost } from '@/models/Post' import { useQuery } from '@tanstack/react-query' import { getSinglePost } from '@/app/(afterLogin)/[username]/status/[id]/_lib/getSinglePost'; import Post from '@/app/(afterLogin)/_component/Post'; export default function SinglePost({id, noImage}: {id: string, noImage?: boolean}) { const { data: post, error } = useQuery<IPost, Object, IPost, [_1: string, _2: string]>({ queryKey: ['posts', id], queryFn: getSinglePost, staleTime: 60 * 1000, gcTime: 300 * 100, }); console.log(post, '--------------------------single post'); if (error) { return ( <div style={{ height: 100, alignItems: 'center', fontSize: 31, fontWeight: 'bold', display: 'flex', justifyContent: 'center' }}>게시글을 찾을 수 없습니다.</div> ) } if (!post) { return null; } return <Post post={post} key={post.postId} noImage={noImage} /> } 찜하기 코드 export default function ActionButtons({ white, post }: Props) { const queryClient = useQueryClient(); const { data: session } = useSession(); const commented = !!post.Comments?.find(d => d.userId === session?.user?.email); const reposted = !!post.Reposts?.find(d => d.userId === session?.user?.email); const liked = !!post.Hearts?.find(d => d.userId === session?.user?.email); const { postId } = post; const heart = useMutation({ mutationFn: () => { return fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts/${postId}/heart`, { method: 'post', credentials: 'include', }) }, onMutate() { const queryCache = queryClient.getQueryCache(); const queryKeys = queryCache.getAll().map(cache => cache.queryKey); console.log('queryKey', queryKeys); queryKeys.forEach((queryKey) => { if (queryKey[0] === 'posts') { const value: Post | InfiniteData<Post[]> | undefined = queryClient.getQueryData(queryKey); if (value && 'pages' in value) { const obj = value.pages.flat().find(d => d.postId === postId); if (obj) { // 존재는 하는지? const pageIndex = value.pages.findIndex(page => page.includes(obj)); const index = value.pages[pageIndex].findIndex(d => d.postId === postId); const shallow = produce(value, draft => { draft.pages[pageIndex][index].Hearts = [{ userId: session?.user?.email as string }]; draft.pages[pageIndex][index]._count.Hearts += 1; }) queryClient.setQueryData(queryKey, shallow); } } else if (value) { // 싱글 포스트인 경우 if (value.postId === postId) { const shallow = { ...value, Hearts: [...value.Hearts, { userId: session?.user?.email as string }], _count: { ...value._count, Hearts: value._count.Hearts + 1, } } queryClient.setQueryData(queryKey, shallow); } } } }) }, onError() { }, onSettled() { } }); 다른 찜하기 질문에서 키를가지고 호출하지 않해서라고 하신걸 봤었는데, 위와 같은 경우에는 클라이언트 서버에서 쿼리키를 가지고 호출했는데 데이터가 잘 안내려오는 것을 확인했습니다. 찜을 눌렀을때 찜을 누르고 해당글 상세로 이동했을때 이러한 경우에는 찜하기를 누르고 추가적인 작업이 필요한지 궁금합니다. 예를들면 찜하기를 누르고 해당 쿼리키의 데이터를 호출해야한다는지... 혹은 제가 잘못호출한것이라면 알려주시면 감사하겠습니다.

• react
• next.js
• react-query
• next-auth
• msw

3-4질문 계속합니다 ㅠㅠ 죄송합니다

미해결

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

계속 질문드려 죄송합니다 ㅜㅠ 들여쓰기했는데 이번에 Song.from_dict() missing 1 required positional argument: 'data' 이런오류가뜹니다.. 너무 질문이 많아 죄송합니다..

• react
• python
• django
• web-api
• htmx

No API key found in request

해결됨

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

강의를 보고 같이 프로젝트도 만들어봤는데 문제가 생겨 글을 작성합니다. response 값을 확인하려고 네트워크 탭을 확인하니 프리플라이트가 같이 생성되고 클릭할 시 아래와 같은 메시지가 나옵니다. {"message":"No API key found in request","hint":"No apikey request header or url param was found."} 혹시 이 문제를 해결할 수 있는 방법을 알고 계신가요? 처음부터 supabase 설정을 다시 해야될까요?

• react
• 클론코딩
• next.js
• supabase

프로필 부분 getUser.ts Error가 반환되지 않는 이유를 모르겠습니다.

미해결

Next + React Query로 SNS 서비스 만들기

import { QueryFunction } from "@tanstack/react-query"; import { User } from "@/model/User"; const getUser: QueryFunction<User, [string, string]> = async ({ queryKey }) => { const [_1, username] = queryKey; const res = await fetch(`http://localhost:9090/api/users/${username}`, { next: { tags: ["users", username], }, cache: "no-store", }); console.log("res.ok : ", res.ok); if (!res.ok) { throw new Error("해당 유저 정보를 불러오지 못 했습니다."); } return res.json(); }; export default getUser; mocks>handler.ts에 없는 username을 url에 입력해도 res.ok로 떠서 if문을 그냥 통과해버립니다. 혹시 제가 놓치는 부분이 있는걸까요?

• react
• next.js
• react-query
• next-auth
• msw

3-4 질문입니다

미해결

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

데이터베이스 sqlite연결하고 models.py 파일들어가서도 변경했습니다 변경하고 모델 Song 클래스 table까지 생성완료했습니다 그런데 사진과 같이 예상외 오류가뜹니다 그전까지는 핫트랙 홈페이지가 잘떳습니다 오류내용보니 전혀 건들이지 않는 views.py song.from_dic 에서 오류가 먼저 났습니다 이유를 잘 모르겠습니다...

• react
• python
• django
• web-api
• htmx

Postman UI가 또 바뀌어서 Mockserver 를 찾을 수가 없습니다

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

제목 그대로 입니다. 가장 최근에 업데이트 해주신게 벌써 2년전인데, 강의를 계속 걸어놓으시려면 적어도 매년 단위로UI 상태에 맞게 해당 부분만이라도 강의를 업데이트 해주셔야 할 것 같습니다.Mock server 부분 도저히 찾지못해 시간만 보내고 진척이 없습니다. 대체 어떻게 해야 하나요?

• HTML/CSS
• javascript
• react
• node.js
• react-native
• 머신러닝
• express
• tensorflow

이 작업 영역에서 아직 발견된 테스트가 없습니다.

미해결

실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트

다른 분들도 겪은 문제인데 0.2.42 버전으로 다운그레이드 하려고해도 지원하지 않는 버전이라고 나오네요. npm run test 는 잘 실행되는거 같습니다. 혹시 해당 이슈 해결방법 알 수 있을까요 .. 아니면 그냥 npm run test 로 진행해도 상관없을까요

• javascript
• react
• 소프트웨어-테스트
• vitest

react useState 실행순서에 대해서 질문드립니다.

미해결

import React,{useState} from 'react'; function Exptest (){ const [number, setNumber] = useState('A'); const checkNumber =() =>{ alert("첫번째 "+number); setNumber(function (prevnumber){ alert(prevnumber+"/3번/"+number); setNumber((prevnumber)=>{ alert(prevnumber+"/4번/"+number); return prevnumber+'B'; }); return prevnumber+'C'; }); alert("두번째"+number); }; return ( <> <button onClick = {checkNumber}> {number} </button> </> ); }; export default Exptest; /* 이런식으로 안쓰는건 알지만 실행순서에 대해서 공부하다 이것저것 해보다가 이해가 안가서 질문드립니다. 질문1. 처음 버튼 클릭 시 number='A' -> number = 'AC' 이렇게 업데이트된다. 그리고 두번 째 실행 시 결과는 number = 'ACCB' 가 되는데 왜 처음엔 B를 추가하지 않나요? 질문2. alert 메세지가 뜨는 순서를 보면 처음 버튼 클릭 시 첫번째 A -> A/3번/A -> A/4번/A -> 두번째 A 그리고 두번 째 버튼 클릭 부터는 첫번째 AC -> 두번째 AC -> AC/3번/AC -> ACC/4번/AC 이렇게 메세지가 뜨는데 왜 순서가 달라지나요? */

• react
• javascript

3-4 db sqlite3 파일 질문입니다22

미해결

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

새로고침을해도 데이터베이스 테이블 목록에는 저거 밖에 안뜨는데 이유를 알수있을까요??

• react
• python
• django
• web-api
• htmx

클래스 설명시 음성 OFF

미해결

김일한의 리액트(React) 개발자를 위한 실습을 통한 입문 과정

클래스 설명시 음성 OFF 되어 있네요.

• HTML/CSS
• javascript
• react

prefetchQuery 관련 질문

미해결

Next + React Query로 SNS 서비스 만들기

prefetchQuery 서버컴포넌트에서 데이터를 한번 불러오면, 정상적으로 불러왔는지 확인할 수 있나요?? 서버 컴포넌트에서 prefetchQuery한 다음에 클라이언트컴포넌트에서 useQuery로 불러오게 되면(queryKey 동일) 이미 데이터가 저장 되어 있는거로 알고 있는데, console.log를 찍어보게 되면, undefined가 뜬 다음에 데이터가 호출 됩니다. prefetchQuery가 정상적으로 동작 안하는게 아닌가 싶습니다. export default function TestClient() { const { data } = useQuery({ queryKey: ['typeData'], queryFn: getTypeData, }); console.log(typeData); ... export default async function TestServer() { const queryClient = new QueryClient(); await queryClient.prefetchQuery({ queryKey: ['typeData'], queryFn: getTypeData }); const dehydratedState = dehydrate(queryClient); return ( <> <HydrationBoundary state={dehydratedState}> <TestClient /> </HydrationBoundary> </> ); }

• react
• next.js
• react-query
• next-auth
• msw