강사님 vs코드 화면에서처럼 오류 메시지 바로 볼 수 있게 하려면 어떻게 하나요?ESlint 설치는 했습니다.터미널에서는 오류 내용 나오는데, 편집창에서 나왔으면 좋겠네요 ㅠ 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

프로젝트 세팅할때는 yarn을 쓰셨는데요.shadcn에서 avatar 설치할때는 npx을 쓰셔서요.같이 써도 문제가 없나요?

16분 그림을 기준으로 초기 접속 시(SSR방식) : JS번들링(html 렌더링)하고 hydration으로 상호작용이 가능한 페이지로 변환페이지 이동 시(CSR방식) : 브라우저가 서버에게 별도의 페이지를 추가로 요청하지않고 js를 실행해서 컴포넌트를 교체뒤에 나오는 섹션의 데이터페칭과 프리페칭에 관해 궁금합니다.SSR에서의 데이터 페칭은 서버가 접속요청을 받고 백엔드 서버로부터 API를 주고받고 JS를 실행해서 렌더링된 HTML을 브라우저에 렌더링하는 것으로 알고 있는데 페이지 이동시에는 CSR방식으로 처리된다고 하셔서 이럴때는 브라우저에 렌더링 후에 데이터페칭을 하는것인지 궁금합니다. 위의 질문과 유사한데 프리페칭이 현재 페이지에 걸려있는 링크들에 대해서 JS번들링을 미리 가져오는것으로 알고있습니다. 그러면 이것들도 데이터 페칭되지 않은 해당 페이지의 리액트 컴포넌트들만을 가져오는 것인가요? 

안녕하세요 제로초님. 강의 잘 보고 있습니다. <img src={photo.link} alt={photo.Post?.content} /><div className={style.image} style={{backgroundImage: `url(${photo.link})`}} />여기서 css를 보니 img에 display none을 주고 div에 style의 bg로 이미지를 주셨던데 왜 이렇게 하신건지 특별한 이유가 있나요? 궁금합니다.

병렬 라우팅에 문제가 있는 거 같아 문의 드립니다.강의 그대로 패러렐 라우트, 인터셉터 라우트까지 모두 따라했었는데,"Application error: a client-side exception has occurred (see the browser console for more information)."브라우저에 이런 에러가 뜨면서, 콘솔창에는 아래와 같이 에러가 뜨더라구요.app-index.js:33 Warning: Cannot update a component (`HotReload`) while rendering a different component (`Router`). To locate the bad setState() call inside Router, follow the stack trace as described in https://reactjs.org/link/setstate-in-render at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11) at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11) at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:13) at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27) at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)window.console.error @ app-index.js:33Show 1 more frameShow lessUnderstand this errorreact-dom.development.js:9126 Uncaught TypeError: initialTree is not iterable at applyPatch (apply-router-state-patch-to-tree.js:17:53) at applyRouterStatePatchToTree (apply-router-state-patch-to-tree.js:74:30) at applyRouterStatePatchToTree (apply-router-state-patch-to-tree.js:76:30) at eval (navigate-reducer.js:142:88)Understand this errorapp-index.js:33 The above error occurred in the <Router> component: at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11) at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11) at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:13) at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27) at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundaryHandler. 그래서 어디서 난 에러인지 추리려고 인터셉터 라우트 부분은 아예 빼버리고,패러랠 라우트 부분으로 확인해보는데, 패러랠 라우트 부분부터 아예 에러가 나서 이것이 문제인 거 같더라구요. { "name": "z-com", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "classnames": "^2.5.1", "dayjs": "^1.11.13", "next": "14.2.11", "react": "^18", "react-dom": "^18" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.4.20", "eslint": "^8", "eslint-config-next": "14.2.11", "postcss": "^8.4.47", "tailwindcss": "^3.4.12", "typescript": "^5" } }  package.json과 디렉토리 구조는 이런 상태이구요.@modal/compose/tweet/page.tsx@modal/compose/tweet/modal.module.css@modal/default.tsx이 세 파일은 깃헙 ch2-2 에 나온대로 그대로 적었습니다. import {ReactNode} from "react"; import style from '@/app/(afterLogin)/layout.module.css'; import Link from "next/link"; import Image from "next/image"; import ZLogo from '../../../public/zlogo.png'; import NavMenu from "@/app/(afterLogin)/_component/NavMenu"; import LogoutButton from "@/app/(afterLogin)/_component/LogoutButton"; import TrendSection from "@/app/(afterLogin)/_component/TrendSection"; import FollowRecommend from "@/app/(afterLogin)/_component/FollowRecommend"; // import RightSearchZone from "@/app/(afterLogin)/_component/RightSearchZone"; type Props = { children: ReactNode, modal: ReactNode } export default function AfterLoginLayout({ children, modal }: Props) { return ( <div className={style.container}> <header className={style.leftSectionWrapper}> <section className={style.leftSection}> <div className={style.leftSectionFixed}> <Link className={style.logo} href="/home"> <div className={style.logoPill}> <Image src={ZLogo} alt="z.com로고" width={40} height={40} /> </div> </Link> <nav> <ul> <NavMenu /> </ul> <Link href="/compose/tweet" className={style.postButton}> <span>게시하기dd</span> {/* <svg viewBox="0 0 24 24" aria-hidden="true" className="r-jwli3a r-4qtqp9 r-yyyyoo r-1472mwg r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-lrsllp"><g><path d="M23 3c-6.62-.1-10.38 2.421-13.05 6.03C7.29 12.61 6 17.331 6 22h2c0-1.007.07-2.012.19-3H12c4.1 0 7.48-3.082 7.94-7.054C22.79 10.147 23.17 6.359 23 3zm-7 8h-1.5v2H16c.63-.016 1.2-.08 1.72-.188C16.95 15.24 14.68 17 12 17H8.55c.57-2.512 1.57-4.851 3-6.78 2.16-2.912 5.29-4.911 9.45-5.187C20.95 8.079 19.9 11 16 11zM4 9V6H1V4h3V1h2v3h3v2H6v3H4z"></path></g></svg> */} </Link> </nav> <LogoutButton /> </div> </section> </header> <div className={style.rightSectionWrapper}> <div className={style.rightSectionInner}> <main className={style.main}>{children}</main> <section className={style.rightSection}> {/* <RightSearchZone /> */} <TrendSection /> <div className={style.followRecommend}> <h3>팔로우 추천</h3> <FollowRecommend /> <FollowRecommend /> <FollowRecommend /> </div> </section> </div> </div> {modal} </div> ) }layout.tsx도 위에 코드와 같이 거의 그대로 적었구요. 참고로 layout.tsx에서 console.log(modal) 했을 때, undefined 뜹니다.근데 또 explore로 이동한 뒤 게시하기 버튼을 누르면 modal이 뜹니다.이것 저것 다해보다가 도저히 안풀려서 문의드립니다.제가 어디서 놓친 걸까요...  

안녕하세요 개발자님.vite초기설정할때 "Select a variant" 설정에서typescript+ SWC대신 typescript를 하는 이유가 뭔가요?최근에 vite를 사용하면서 검색을 한 결과 보통 react에서 사용하는 babel보다 c로 만들어진 SWC가 더 빨라서 좋다고 들어서 이전에는 typescript + SWC를 선택하여 프로젝트를 하였는데 그냥 typescript를 선택한 이유가 있나요?현업에서는 주로 어떤걸 선택하나요? 추가로, 현업에서는 보통 번들러를 vite를 사용하나요?현재 컴퓨터학부에 진학중인 3학년이라 궁금한 점이 많고 현업에선 어떻게 (번들러 등)쓰이는지 궁금하네요!아는 현업자 선배분께선 보통 vite는 아직 안정하지가 않아서 다른 번들링 방법을 사용하다고 들었는데 개발자님의 생각이 궁금합니다. 말이 길어져서 죄송합니다. 긴 글 읽어주셔서 감사합니다!

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요아래와 같이 강의 들으면서 코딩 했는데,DiaryList.jsx Home.jsx 아래와 같이 맵 관련 인식이 안되는 오류가 납니다.Uncaught TypeError: data.map is not a function at DiaryList (DiaryList.jsx:17:15)  어디가 잘못된지 모르겠어서 질문드립니다.- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

import NextAuth from "next-auth" import CredentialsProvider from "next-auth/providers/credentials"; import {NextResponse} from "next/server"; export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: '/i/flow/login', newUser: '/i/flow/signup', }, providers: [ CredentialsProvider({ async authorize(credentials) { const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, }), }) if (!authResponse.ok) { return null } const user = await authResponse.json() console.log('user', user); return { email: user.id, name: user.nickname, image: user.image, ...user, } }, }), ] });@/auth.ts 파일 코드입니다. 이런식으로 에러가 나서 에러 창을 확인해보면 전달된 매개변수의 타입이 적절치 않다고 하는데, 강의 그대로 따라가면서 깃허브 참고하면서 코드를 작성했음에도 불구하고 오류가 나옵니다..

 깃헙에 올리셨다면 링크 공유해주실수 있나요?

import { defineConfig } from 'vite' import react from '@vitejs/plugin-react-swc' import path, {resolve} from 'path' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], // resolve:{ // alias: [ // { // find: "@src", // replacement: path.resolve(__dirname, "src") // // @src 를 쓰면 src 폴더를 의미하게 된다. // // ../../ 이런거 안 써도 된다. // }, // { // find: "@components", // replacement: path.resolve(__dirname, "src/components") // } // ] // } resolve: { alias: { '@components': path.resolve(__dirname, 'src/components'), '@src': path.resolve(__dirname, 'src') } } })chatGPT 가 알려줬어여 ㅎㅎ

{ "compilerOptions": { "baseUrl": ".", "paths": { "@components/*" : ["src/components/*"], "@src/*" : ["src/*"] } }, "files": [], "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" } ] } 6분 08초 인데, 제꺼는 강사님꺼와 다르게 tsconfig 가 위와 같이 되어 있고, 여기 부분에서 넘어가 지지 않습니다. import React from "react"; import { Canvas } from "@react-three/fiber" import ShowRoom from "@components/ShowRoom" import { OrbitControls } from "@react-three/drei"; export default function Home(){ return ( <> <Canvas> <OrbitControls/> <directionalLight position={[5, 5, 5]}/> <axesHelper args={[5]}/> <gridHelper/> <ShowRoom/> </Canvas> </> ) } import ShowRoom from "@components/ShowRoom" 여기부분에 에러가 뜹니다에러메세지 [plugin:vite:import-analysis] Failed to resolve import "@components/ShowRoom" from "components/Home.tsx". Does the file exist? vite.config.js 는 아래와 같이 설정 했습니다. import { defineConfig } from 'vite' import react from '@vitejs/plugin-react-swc' import path from 'path' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], resolve:{ alias: [ { find: "@src", replacement: path.resolve(__dirname, "src") // @src 를 쓰면 src 폴더를 의미하게 된다. // ../../ 이런거 안 써도 된다. }, { find: "@components", replacement: path.resolve(__dirname, "src/components") } ] } }) 파일 구조입니다.

안녕하세요.getServerSideProps를 선언하지 않을시 SSR 이 아닌 CSR 로 동작하게 되는걸까요? (SSR 2.실습 강의를 듣는 현재까지 SSR 방식의 사전렌더링이 동작하고 있다고 생각했어요..)추가적으로 만약 위 함수를 선언해야 SSR 방식의 사전렌더링을 사용할 수 있다면 매 함수 선언에 작업자의 비용이 조금 발생하지 않나 생각합니다결국 페이지 이동시 CSR 형태가 된다면 사람들 접근이 많은 페이지 위주로 SSR 을 적용하면 좋지 않을까 생각이 들어 질문드립니다!

Next.js에서는 기본적으로 제공하는 빌트인 Image 컴포넌트가 있음에도 불구하고, 강의에서는 일반 HTML img 태그를 사용하고 있습니다.Next.js의 Image 컴포넌트는 이미지 최적화와 같은 여러 이점을 제공하는 것으로 알고 있는데, 왜 이를 사용하지 않고 img 태그를 선택했는지 궁금합니다.이에 대한 이유나 특별한 상황이 있다면 설명해 주시면 감사하겠습니다.

처음 배울 때에는 브라우저에 요청이 들어올 때 기본적으로 SSR 방식으로 사전 렌더링이 된 후, 하이드레이션 작용이 일어나 그 후 CSR 방식으로 작동된다고 알고 있습니다.질문하기 쉽게 / 경로를 보여주는 컴포넌트를 Home, book/:id 경로를 보여주는 컴포넌트를 BookDetail 라고 표기하겠습니다.Home 컴포넌트에 getServerSideProps 메서드로 사전 렌더링때 데이터 페칭을 하고, BookDetail 컴포넌트도 getServerSideProps 메서드로 사전 렌더링때 데이터 페칭을 진행 할 수 있도록 둘다 설정해 놓았을 때,처음 HOME 컴포넌트 접속시 getServerSideProps 메서드가 실행되고 BookDetail 로 이동시 getServerSideProps 도 메서드도 실행됩니다.getServerSideProps 메서드는 사전 랜더링 때 실행이 되는 걸로 알고 있는데,기존에 Next.js 랜더링 방식은 사전 렌더링 후, 페이지 이동은 CSR 로 진행된다고 배웠습니다.그렇다면 BookDetail 로 이동시 CSR 방식으로 랜더링 된다면, BookDetail 의getServerSideProps 메서드는 실행되지 않아야 하는게 아닌가요 ? 

안녕하세요 제로초님 강의를 듣다가 문득 궁금한점이 있어서 질문드립니다.현재 폴더 구조가 app하위에 (afterLogin) 폴더와 (beforeLogin) 폴더가 있는데, 지금 강의에서는 당연한듯이 beforeLogin 폴더의 layout이 뜨고있는데요, 왜 그런건지 궁금합니다.현재 단계에서는 뭔가 로그인을 했다는 조건같은걸 아직 작성하지 않은것 같아서요 정리하자면 현재 localhost:3000의 기본 페이지가afterlogin 폴더의 layout이 아니라 beforeloign의 layout이 뜨는 이유가 궁금합니다.

11장 팔로잉 기능 구현에서는팔로잉 하는 목록 페이지팔로우 하고 있지 않는 목록 페이지두 가지를 구현하였습니다.이를 기반으로 인스타그램처럼 프로필을 카드기반으로 꾸미고 10-12 에서 구현한 무한 스크롤을 적용하였습니다. 프로필 페이지에서 구현한 프로필 카드를 목록에서 재활용하여 반복을 줄이고자 했습니다.대부분의 기능은 구현하였습니다만, 강의의 내용만으로는 스스로 해결하기 힘든 점들이 있어 질문글을 파란색으로 남깁니다. 우선, 팔로잉 목록과 언팔로인 목록을 나눈 경우 언팔로잉 목록에서 내가 팔로잉 한지 모르고 검색한 경우 유저 목록이 검색되지 않는 불편함이 존재할 수 있습니다.물론 인스타 그램의 경우 강사님께서 구현한 것처럼 탭을 나누어서 구현하였으니 이는 문제가 아닐 수 있습니다.그러나 하기의 사진은 정확한 예시는 아닐 수 있으나 내 팔로워들 중 내 팔로잉 여부를 확인할 수 있는 페이지를 구현하고 싶습니다.인스타 팔로워 페이지인스타 팔로잉 페이지 따라서 팔로우하지 않는 목록 페이지를 유저 목록들이 모두 나열되면서 눈으로 팔로우 여부를 확인할 수 있는 페이지로 구현하고자 합니다.  하기는 현재 구현한 목록 페이지의 일부 입니다.개인 프로필 페이지에서는 팔로잉 버튼 대신 edit 버튼이 활성화 됩니다.해당 페이지를 구현하기 위해 11장에서 구현한 두 함수를 generic ListView를 상속받은 class 기반 뷰로 구현하였습니다.# views.py @method_decorator(login_required_hx, name="dispatch") class DiscoverListView(ListView): model = User paginate_by = 12 context_object_name="user_list" def get_queryset(self): qs = User.objects.all() user: User = self.request.user follow_relation = self.kwargs.get("follow_relation", False) # url로 부터 받는 인자 match follow_relation: case "following": qs = user.following_user_set.all() case "followed": qs = user.followed_user_set.all() # qs = User.objects.exclude(id__in=user.following_user_set.all()) qs = qs.exclude(id__in=[user.pk]).select_related("profile").prefetch_related("follower_user_set", "following_user_set") query = self.request.GET.get("query", "").strip() if query: qs = qs.filter( Q(username__icontains=query) | Q(full_name__icontains=query) | Q(email__icontains=query) ) return qs.order_by("username") def get_template_names(self) -> list[str]: # htmx로 요청이 들어오면 검색바 등 불필요한 위 아래 내용 제거 후 내용만 업데이트 if self.request.htmx: template_name = "accounts/_user_list.html" else: template_name = "accounts/user_list.html" return [template_name] def get_context_data(self, **kwargs): context = super().get_context_data(**kwargs) # is_follwer 는 html에서 follow 버튼을 구분하기 위한 인자 # context['is_follower'] = True if self.kwargs.get("follow_relation", False)=="following" else False qs = self.get_queryset() follow_dict = { q.username:self.request.user.is_follower(q) for q in qs } context['follow_dict'] = follow_dict query = self.request.GET.get("query", "").strip() context['query']=query return context여기서 .prefetch_related("follower_user_set", "following_user_set") 을 통해 모델에서 구현한 팔로워와 팔로잉 유저 수를 불러오는 property를 templates에서 호출할 때 N+1 문제를 해결하고자 하였습니다.<!-- _user_profile_card.html --> {% load static %} <div class="card" style="border-radius: 15px;"> <div class="card-body p-4"> <div class="d-flex"> <div class="flex-shrink-0"> {% if user.profile.avatar %} <img src="{{user.profile.avatar.url}}" alt="{{user}}'s avatar" class="img-fluid" style="width: 180px; border-radius: 10px;"> {% else %} <img src="{% static 'images/profile-icon-design-free-vector.jpg' %}" alt="{{user}}'s avatar" class="img-fluid" style="width: 180px; border-radius: 10px;"> {% endif %} </div> <div class="flex-grow-1 ms-3"> <h5 class="mb-1" style="display:inline">{{ user.full_name }} </h5> {% if user.profile.team %} <h6 class="text-muted" style="display:inline">{{ user.profile.team }}</h6> {% endif %} <p class="mb-1 pb-1">{{ user.email }}</p> <div class="d-flex justify-content-start rounded-3 p-2 mb-2 bg-body-tertiary"> <div> <p class="small text-muted mb-1">Data</p> <p class="mb-0">TDA</p> </div> <div class="px-3"> <p class="small text-muted mb-1">Followers</p> <p class="mb-0">{{user.follower_count}}</p> </div> <div> <p class="small text-muted mb-1">Following</p> <p class="mb-0">{{user.following_count}}</p> </div> </div> <div class="d-flex pt-1"> {% if request.user == user %} <a href="{% url 'accounts:profile_edit' %}" class="btn btn-outline-primary btn-sm"> <i class="bi bi-pencil-square"></i> 프로필 수정 </a> {% else %} {% comment %} {% include "accounts/_user_follow.html" with username=user.username%} {% endcomment %} {% include "accounts/_user_follow.html" with is_follower=follow_dict.user.username username=user.username%} {% endif %} </div> </div> </div> </div> </div>프로필 카드 내에서 팔로워와 팔로잉 수를 보여주기 위해 접근한 제 방식이 맞는지가 궁금합니다. models.py에서 구현한 follower_count 또는 following_count를 template에서 호출하는 방식이 일반적인 접근 방식인가요?그 다음 제가 위에서 구현하고자 한 유저별 팔로우 여부를 get_context_data에서 follow_dict 라는 변수명으로 저장하여 하기와 같이 template에 넘겨주었습니다.<!--user_follow.html--> {% include "core/_messages_as_event.html" %} {% load keyvalue %} {% if follow_dict|keyvalue:username %} <a href="#" hx-post="{% url 'accounts:user_unfollow' username %}" hx-swap="outerHTML" class="btn btn-sm btn-primary"> <i class="bi bi-person-check-fill"></i> 팔로잉 중 </a> {% else %} <a href="#" hx-post="{% url 'accounts:user_follow' username %}" hx-swap="outerHTML" class="btn btn-sm btn-secondary"> <i class="bi bi-person-add"></i> 팔로잉 하기 </a> {% endif %}dictionary 키 값으로 변수를 입력하는 것이 django template에서 지원되지 않기 때문에 하기의 함수를 등록하여 활용하였습니다.register = template.Library() @register.filter def keyvalue(dict, key): return dict[key]결과물은 구현한 페이지처럼 잘 보여지지만, 두 가지 문제가 존재합니다.확실치 않지만 하기의 코드에서 N+1 오류가 발생하는 것으로 보입니다.follow_dict = { q.username:self.request.user.is_follower(q) for q in qs }팔로잉 혹은 언팔로잉 요청 시 500 서버 에러가 발생합니다. 아마도 follow_dict가 요청 시에 업데이트 되지 않아 발생하는 오류로 보입니다. 이러한 점 때문에 인스타그램에서도 따로 탭을 두어서 관리하는가 싶기도 합니다만 이를 해결할 방법이 있을까요?어렵다면 팔로워 목록에서 내가 팔로잉 하는지 여부를 표기하는 인스타그램 페이지는 어떻게 구현해야 할까요?

어떨 때 useRef를 사용하고 어떨 때 useState를 사용하는지 기준을 모르겠어요. 리렌더링 즉 화면 UI가 변할 때usestate를 사용한다고 생각해도 될까요? Input 값이 비어있으면 폼을 제출 못하고 focus()하는 메서드를 사용할 때 포커스도 화면 UI가 변경된 것일텐데, useref를 사용하는 거 같더라구요 그렇다면 리액트가 변화를 감지해야할 때는 usestate를 사용하고 감지하지 않아도 되는 경우에는 useref를 사용한다고 생각해야할까요?? 마지막으로 keyframe애니메이션을 사용하려면 UI가 변경되었기때문에 usestate로 사용해야하는 걸까요? 아니면 리액트가 그 변화를 감지하지 않아도 되기때문에 useref를 사용해야하는 걸까요?ㅠㅠ 정말 헷갈립니다

12:22 npm run build 시에 에러가 validator 모듈이 없다고 나오네요validate-decoration.ts 파일에서 import * as validator from 'validator';packae.json에 업데이트가 안되어 있는 것 같아요. 

안녕하세요!카운터앱 구현하기를 조금 다르게 코드를 짜보았는데, 커스텀훅을 활용법에 익숙하지 않아서, 이렇게 구현하는 방법이 적절한지 감이 안와요.. 바쁘신데 죄송하지만 아래와 같은 커스텀훅 구현방식의 장단점에 대해서 알려주시면 감사하겠습니다! 먼저 useCount.jsx를 아래와 같이 작성하였구요import { useState } from 'react'; function useCount() { const [num, setNum] = useState(0); const onClinkCount = (e) => { setNum(num + Number(e.target.value)) } return [num, onClinkCount]; } export default useCount; 아래는 넘버 조작 부분인 Controller.jsxconst Controller = ({ onClinkCount }) => { return ( <div> <button onClick={onClinkCount} value="-1">-1</button> <button onClick={onClinkCount} value="-10">-10</button> <button onClick={onClinkCount} value="-100">-100</button> <button onClick={onClinkCount} value="+100">+100</button> <button onClick={onClinkCount} value="+10">+10</button> <button onClick={onClinkCount} value="+1">+1</button> </div> ) } export default Controller카운트 넘버 표시부분인 Viewer.jsxconst Viewer = ({ num }) => { return ( <div> <div>현재 카운트:</div> <h1>{num}</h1> </div> ) } export default Viewer그리고 부모 컴포넌트인 App.jsx 입니다.import "./App.css" import Controller from './components/Controller' import Viewer from './components/Viewer' import useCount from './hooks/useCount' function App() { const [num, onClinkCount] = useCount(); return ( <div className='App'> <h1>Simple Counter</h1> <section> <Viewer num={num} /> </section> <section> <Controller onClinkCount={onClinkCount} /> </section> </div> ) } export default App    🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

article 과 section tag 를 자주 사용하시는데, 혹시 어떤 기준으로 사용하시나요?