안녕하세요~직접 만들어보고 비교하려고하는데 의문점이 하나 생겨서요!서버컴포넌트로 Link를 생성하고useSelectedLayoutSegment로 active클래스 처리해주려고 합니다!export default function SideBar() { const links = [ { path: "/home", pathName: "Home" }, { path: "/", pathName: "탐색하기" }, { path: "/", pathName: "쪽지" }, { path: "/", pathName: "프로필" }, ]; return ( <div className={classes.nav}> <div>logo</div> <nav> <ul> {links.map((link, idx) => { return ( <li key={`${link}-${idx}`}> <SideLink href={link.path}>{link.pathName}</SideLink> </li> ); })} </ul> </nav> <button className={classes.btn}>게시하기</button> </div> ); } interface SideLinkProps { children: ReactNode; href: string; } export default function SideLink({ children, href }: SideLinkProps) { const segment = useSelectedLayoutSegment(); const isSegment = href.slice(1); return ( <Link href={href} className={segment === isSegment ? classes.active : undefined} > {children} </Link> ); }근데 랜더링이Sidebar가 서버에서 초기 랜더링 하고client에서 class 반영한다 라고 이해하고 있는데용브라우저에서 "페이지 소스보기"를 했더니이미 class에 active가 반영된 상태로 랜더링 되어있어요캐시도 지우고 빌드해서 npm start 해봐도 "/home" path에서 소스보기 했더니 class가 반영된 상태로 서버에서 랜더링 되어옵니다.hook에 의한 할당될 class는 비워진 상태로 html를 생성하고 이후 client에서 hook을 이용한 클래스 부여가 된다고 알고 있었는데왜 서버에서 세그먼트 훅에 의한 class 처리가 되서 오는건지 궁금합니다!검색해도 명확한 답이 없어서 질문드려요!

강의대로 package.json에 scripts 내 start에 경로 추가 후("node src/index.js)터미널에 npm run start 입력 시 아래와 같은 error가 발생됩니다.PS C:\Users\HOME\Desktop\oneBite-React\section03> npm run start> section03@1.0.0 start> node src/index.jsnpm error code ENOENTnpm error syscall spawn C:\Program Files\Git\bin\git.exenpm error path C:\Users\HOME\Desktop\oneBite-React\section03npm error errno -4058npm error enoent spawn C:\Program Files\Git\bin\git.exe ENOENTnpm error enoent This is related to npm not being able to find a file.npm error enoentnpm error A complete log of this run can be found in: C:\Users\HOME\AppData\Local\npm-cache\_logs\2024-07-14T05_57_50_914Z-debug-0.log 

제목 그대로 SurveyPie 기획서 pdf를 어디서 받아야 하는지 모르겠습니다.처음에 받은 "학습노트_리엑트기초심화.pdf" 파일에서는 디자인 가이드와 코드만 존재합니다. 기획서 어디서 받을 수 있는지 알려주시면 감사하겠습니다.

안녕하세요 section08까지 듣고 투두리스트 복습을 하던 중 할일이 한개는 추가가 되는데 그 뒤로는 추가된 할일에 덮어쓰기가 되어 추가가 안되는 문제가 발생하는 문제가 발생하여 어제부터 해결이 안되 질문남깁니다.onCreate함수 내부에 로그를 찍어보면새롭게 저장된 데이터가 아닌 매번 기존에 3개 만들어놓은 mockData가 불러와져서 데이터가 추가되는거 까진 확인하였습니다.또한 useReducer를 사용하면 강의와 같이 정상적으로 되는데 useState를 이용하면 위와 같은 문제가 발생합니다.몬가 Context를 사용해서 이런 현상이 발생하는 것으로 추측되는데 어떤 차이 때문에 이런 현상이 발생하는지 궁금합니다. App.jsximport './App.css' import Header from "./component/Header.jsx"; import Editor from "./component/Editor.jsx"; import List from "./component/List.jsx"; import {createContext, useMemo, useRef, useState} from "react"; export const ContextStateData = createContext(); export const ContextDispatchData = createContext(); const mockData = [{ id: 0, isDone: false, content: "Study react", date: new Date().getTime() }, { id: 1, isDone: false, content: "go to bed", date: new Date().getTime() }, { id: 2, isDone: false, content: "play game", date: new Date().getTime() },]; function App() { const [todos, setTodos] = useState(mockData); const idRef = useRef(3); const onCreate = (content) => { const newTodos = { id: idRef.current++, isDone: false, content: content, date: new Date().getTime() } setTodos([newTodos, ...todos]); } const memorizedDispatch = useMemo(() => { return {onCreate} }, []); return (<div className="App"> <Header/> <ContextStateData.Provider value={todos}> <ContextDispatchData.Provider value={memorizedDispatch}> <Editor/> <List/> </ContextDispatchData.Provider> </ContextStateData.Provider> </div>) } export default App   전체 코드 깃허브 주소https://github.com/ironwhale1014/one-bite-react/tree/main/todo_list_train 

지금3일차 강의를 듣고 있습니다.전반적인 내용 설명이 잘 되어 너무 감사합니다.그런데 제가 프로젝트를 하나 해야 합니다.3d 모델링 사진을 띄워 주고, 외부에서 json으로 값을 받아 데이터 베이스에 저장합니다.그리고 저장된 값을 가져와서 계산하고 보여 주는 웹을 만들고 싶습니다.강의 자료가 너무 많은데 어느 부분을 공부하면 도움이 될까요?아니면 싶게 만들수 있는 아이디어 부탁을 드립니다.당신의 파이썬/장고 페이스메이커가 되겠습니다. ;-)인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

안녕하세요 강사님 좋은 강의 잘 듣고 있습니다!제네릭에 대한 이해를 위해서 따로 문서도 찾아봤는데 궁금증이 해결되지 않아서 질문드립니다.제네릭 타입을 사용해서 tagList로 넘어온 아이템이 onTagClick으로 전달된다는것을 보증 해준다고 하셨는데, 제네릭의 어떤 기능으로 이것을 보증해주는지 궁금합니다.그리고 아래처럼 작성한것과 어떤 차이가 있는지 궁금합니다.import { useState } from "react"; import TagButton from "./TagButton"; interface ITagListProps { tagList: string[]; onTagClick: (tag: string) => void; } export default function TagList({ tagList, onTagClick, }: ITagListProps) { const [selectedTag, setSelectedTag] = useState<string>(tagList[0]); return ( <div className="flex gap-x-4" onClick={(event) => { const eventTarget = event.target as HTMLButtonElement; const tag = eventTarget.textContent as string onTagClick(tag) } }> {tagList.map((tag) => ( <TagButton key={tag} isChecked={tag === selectedTag} onClick={() => setSelectedTag(tag)} > {tag} </TagButton> ))} </div> ); }

안녕하세요 게시글 렌더링 컴포넌트 구현하기 강의에서 {contentfulPost.slug}.tsx 파일 내에 아래와 같이 graphql을 호출하고 useRenderRichText 훅을 구현시 아래와 같은 에러가 발생합니다. export const query = graphql` query PostPage($slug: String!) { contentfulPost(slug: { eq: $slug }) { title thumbnail { gatsbyImageData(width: 1000) } category date content { raw references { ... on ContentfulAsset { contentful_id title description gatsbyImageData(width: 774) __typename } } } } } `

강의 듣고 복습하면서 과제도 푸는 중에 갑자기 인터넷 페이지로 보기 위해 실행을 하니, 500번 오류가 수업(example)랑 과제(practice) 둘다 뜨면서 아무것도 뜨지 않습니다.. import 해오는 부분은 아무 이상이 없고, 과제 같은 경우도 이전에 문제 없었던 페이지에서도 같은 500번 오류가 뜹니다 ㅠ

올려주신 코드에서 ManyToMany 관계를 맺기 전에 pk(즉, id) 값이 필요하기 때문에 bulk_create를 수행하고 tag_set.add 매서드를 호출한다고 강의에서 설명해주셨습니다. def create_posts(orig_post_list): """포스팅 생성""" category_dict = {category.name: category for category in Category.objects.all()} tag_dict = {tag.name: tag for tag in Tag.objects.all()} user_list = list(User.objects.all()) post_list = [] for orig_post in orig_post_list: post = Post( category=category_dict[orig_post["category_name"]], author=choice(user_list), title=orig_post["title"], status=choice([Post.Status.DRAFT, Post.Status.PUBLISHED]), content=orig_post["content"], ) post._tag_list = orig_post["tag_list"] post.slugify() post_list.append(post) if post_list: print(f"{len(post_list)} 개의 포스팅 생성") Post.objects.bulk_create(post_list, batch_size=1000) for post in post_list: _tag_list = [tag_dict[tag_name] for tag_name in post._tag_list] post.tag_set.add(*_tag_list) 그러나 해당 코드를 실행 시 여전히 tag_set.add를 위해서는 id가 필요하다고 에러가 발생합니다.사용 중인 DB는 mysql 이며, 일단 임시 변통으로 bulk_create 전에 id를 직접 할당하여 해결하였습니다.for idx, orig_post in enumerate(orig_post_list): post.id = idx + 1 # id는 0이 될 수 없음 그러나 이는 --clear argument를 주었기 때문에 가능한 행위였습니다. 수정하기 위해서 하기와 같은 방법이 적절할까요? 그리고 왜 제 경우만 에러가 발생하는 걸까요? if post_list: print(f"{len(post_list)} 개의 포스팅 생성") Post.objects.bulk_create(post_list, batch_size=1000) tag_lists = [t for t in orig_post["tag_list"]] post_list = Post.objects.all() # id 로드를 위함 for post, tag_list in zip(post_list, tag_lists): _tag_list = [tag_dict[tag_name] for tag_name in tag_list] post.tag_set.add(*_tag_list)

model 폴더에서 PostImage는 interface를 사용하시고 Post컴포넌트에서는 type을 사용하셨는데 두 개를 다르게 사용하는 강사님만의 기준이 있나요 ? 제가 공부한 바로는 간단한 객체 타입일 경우 둘다 사용해도 상관없다. type은 복잡한 유니언 타입을 지정할때 사용한다 interface는 확장이 필요할 경우 사용한다고

강사님 좋은 강의 잘 듣고 있습니다.혹시 사용하시는 Copilot이 어떤건지 여쭤봐도 되나요?

질문을 온전히 이해할 수 있도록, 모든 맥락을 전달해주세요.질문은 질문자가 번거로워야 보다 좋은 답변을 얻으실 수 있습니다.시행착오를 알려주시면 곧바로 원하는 문제에 집중할 수 있습니다.오류 메시지는 일부만 알려주시기보다 전체 오류 메시지를 캡처해서 주시면, 오류 파악에 도움이 됩니다. 당신의 파이썬/장고 페이스메이커가 되겠습니다. ;-)인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

(사진)

이미지를 업로드할때 에러가 발생합니다Upload is 0% doneUpload is runningPOST 403 (Forbidden)Promise.then(async)이렇게 뜨면서 오류가 발생하는데 해결법이 있을까요?

안녕하세요 강사님! 리액트, 타입스크립트 강의 너무 잘 듣고 있습니다. 8월 중에 nextjs 도 나온다니 기대됩니다!혹시 리액트 심화버전도 추후 진행하실 예정이 있나요? Redux 등등.. 강사님버전으로 배우면 이해하기 좋을 것 같아서요 🙂

 이것들이 도대체 뭘까요 ....안드로이드는 나오지도 않네요 .... 제발 알려주세요 ... "type": "module" 이거 에러는 왜자꾸 나는걸까요 ㅠㅠ node버전 확인해보면 22이상이라 에러가 안 떠야 하는데 계속 뜨네요 ㅠㅠ 지금 에러 때문에 아무것도 안되는데 제발 도와주세요 ..

위와 같이 작성하여 요청하였을 때이러한 에러가 나타납니다무엇이 문제일까요?검색해보니 전에도 질문이 올라왔는데 답변이 안달려있네요_id 값은 받아와지는데 name과 email 등 다른 정보 요청하면 위와 같은 오류가 나타납니다AI 답변 말고 강사님 답변 듣고싶습니다

Expo로 폴더를 만들어서 npm start를 했을 시 사진처럼 빨간 Warning이 나옵니다 ..어떻게 해결해야 하나요??package.json에 "type": "module" 작성도 해봤고,Xcode도 다운받아서 해봤습니다 ㅠㅠㅠ 근데도 사라지지 않네요 어떻게 해야하나요 ..

판매자: name2019 LTE 32GB: remarks240.120원: price내용: contents태그: tags찜: pickedCount주소: useditemAddress를 사용을 하는데 "삼성전자 갤럭시탭 A 10.1" 이건 어디서 가져왔는지 모르겠습니다.title은 playground를 봐도 안 나와 있는데 어떤 걸 사용을 해야 하나요?

interface IUseMoveToPageReturn { onClickMoveToPage: (path: string) => () => void } export const useMoveToPage = (): IUseMoveToPageReturn => { const router = useRouter() const onClickMoveToPage = (path: string) => () => { void router.push(path) } return {onClickMoveToPage} }위 처럼 작성 후<button onClick={onClickMoveToPage("/markets")}>마켓 이동</button>호출 할 수도 있지만import { useRouter } from "next/router" export const useMoveToPage = (path: string) => { const router = useRouter() return () => router.push(path) }보다 직관적으로 하면 인터페이스로 typescript 지정 안하고<button onClick={useMoveToPage("/boards")}>게시판 이동</button>호출해서 쓸 수 있지 않나요?