회원가입 후 로그인 된 상태로 home으로 이동하게 되는데 여기서 useSession정보가 업데이트 되지않아서 Props로 session정보를 넘겨주는 방식으로 사용하셨는데 다르게 처리하는 방법도 있을까요 ? 예를 들면 로그인 모달에서 했던 것 처럼 서버액션을 사용하지 말고 클라이언트 컴포넌트에서 fetch 를 처리한 후replace(/home) 시키는 방법이요 !

Chapter 5 실습을 하고 있습니다. 작성한 코드를 컴파일하면 유저의 이름과 댓글이 한 줄에 출력되고 있는데 코드에서 어디를 잘못 작성한걸까요??여러번 강의 영상을 돌려봤는데 못 찾겠네요 ㅠㅜ 

const onClickLoad = async (event: MouseEvent<HTMLDivElement>) => { const IMP = window.IMP; IMP.init("imp00000000"); //실제로는 강의자료에 있는 식별코드 사용했습니다! IMP.request_pay( { pg: "kakaopay", pay_method: "card", name: "아이리버 무선 마우스 외 1개", amount: 10000, buyer_email: "이메일@gmail.com", buyer_name: "홍길동", buyer_tel: "010-4242-4242", buyer_addr: "서울특별시 강남구 신사동", buyer_postcode: "01181", m_redirect_url: "/", }, function (rsp: any) { if (rsp.success) { alert("결제가 성공했습니다."); console.log(rsp); } else { alert("결제에 실패했습니다."); } }, ); };위와 같은 코드로 정상적으로 rsp를 받고, imp_uid 까지 받았습니다. 그런데graphql api 호출을 했더니 _id 가 null이라는 에러가 계속해서 발생하네요. 챗gpt 도움을 받아보니, 백엔드가 impUid를 기반으로 결제 정보를 조회하고 DB에 적립하는 로직이 정상적으로 동작하는지 확인해야한다고 하는데, 에러원인이 무엇이고,어떻게 해결해야 하는지 알려주세요! 포트원 가맹점 식별코드는 강의 자료에 있는 식별코드를 사용했습니다!

안녕하세요 선생님강의 잘들었습니다! 마지막 영어 및 다국어 변환만 들으면 벌써 완강이네요 감사합니다 :)전체적으로 코드를 보다가 궁금증이 있어서 문의합니다.코드 정리하면서 기능 하나씩 눌러보니, 1. 회원가입 페이지가 저희 프로젝트에는 없어서 몽고db에 수동으로 등록하면서 진행했잖아요 이부분을 회원가입으로 어떻게 연동하는지 궁금합니다.2. 실무에서 사용하는 강의라고 하셨는데 이부분은 실무에서 저희 프로젝트처럼 진행하면 어떻게 설명하는지도 궁금합니다. "로그인이 다른곳에되어있습니다"이렇게 어드민에 뜨게 되면 지금이야 저희가 몽고db에 들어가서 false로 변경하면 들어가지긴하나, 이걸 온라인에 배포한다고 하면 어떻게 실무적으로 처리하나요??

package com.example.backend.mallapi.dto; import lombok.Builder; import lombok.Data; import java.util.List; import java.util.stream.Collectors; import java.util.stream.IntStream; @Data public class PageResponseDTO<E> { private List<E> dtoList; private List<Integer> pageNumList; private PageRequestDTO pageRequestDTO; private boolean prev, next; private int totalCount, prevPage, nextPage, totalPage, current; @Builder(builderMethodName = "withAll") public PageResponseDTO(List<E> dtoList, PageRequestDTO pageRequestDTO, long totalCount) { this.dtoList = dtoList; this.pageRequestDTO = pageRequestDTO; this.totalCount = (int)totalCount; int end = (int)(Math.ceil( pageRequestDTO.getPage() / 10.0 )) * 10; int start = end - 9; int last = (int)(Math.ceil((totalCount/(double)pageRequestDTO.getSize()))); end = end > last ? last: end; this.prev = start > 1;//1보다 크면 참 밑에 if문 실행. this.next = totalCount > end * pageRequestDTO.getSize(); this.pageNumList = IntStream.rangeClosed(start,end).boxed().collect(Collectors.toList()); // start부터 end까지 연속된 숫자 스트림(IntStream)을 생성 // rangeClosed(a, b): a부터 b까지 포함 // IntStream은 기본형 int 스트림이기 때문에, // 객체형 리스트(List<Integer>)로 변환하기 위해 .boxed()를 사용. // 스트림을 리스트로 변환하는 역할 if(prev) { this.prevPage = start -1; } if(next) { this.nextPage = end + 1; } this.totalPage = this.pageNumList.size(); this.current = pageRequestDTO.getPage(); } }위에 코드를 옆에처럼 디버깅할려면(https://www.youtube.com/watch?v=OHrLRg150As )즉 step over로 사용도 하면서 한 줄 한 줄 씩 어떻게 실행되는 지 보고 싶은데 아래와 같이 에러가 나옵니다.혹시 스프링부트를 사용하면 디버거 모드가 활성화가 안되나요? 아래 사진을 보시면 38번째 줄에 브레이크 포인트 표시 해놨고 우측 상단에 디버그 모드도 실행되어있는데 중앙에 네모박스처럼 step over 모드가 비활성화 되어있습니다. 한 줄 한줄씩 디버깅을 할려면 어떻게 해야하는지 궁금합니다. 

피그마로 들어갔는데 과제관련한 회원가입을 찾을 수가 없어요. 그리고 섹션을 살펴봤는데요 여긴 섹션3번인데 안보이네요.. 제가 못찾고 있는것 같은데요

코드가 조금 다른 것 같습니다.2. 문의하기 누르면 어드민으로 문의하기가 넘어가고 어드민으로 들어왔을때 확인 되어야하는거죠?제가 놓친 것 같아서 깃허브를 찾아서 복사 붙여넣기하니,아래 처럼 뜹니다.저희가 이걸 배운적이 있나요? 있다면 어느 부분인지 궁금합니다.import ContactLocale from "../../Locale/Contact.json"; [plugin:vite:import-analysis] Failed to resolve import "../../Locale/Contact.json" from "src/Page/Contact/Contact.jsx". Does the file exist?C:/Users/shin/Desktop/company_website/frontend/src/Page/Contact/Contact.jsx:4:2619 | import { motion } from "framer-motion"; 20 | import axios from "axios"; 21 | import ContactLocale from "../../Locale/Contact.json"; | ^ 22 | const Contact = () => { 23 | _s();

사내 환경에서 외부 인터넷은 프록시를 통해 접속 가능합니다.백엔드 서버 구축시 npm install 수행시 prisma engine을 다운로드 받을수 없다는 메시지가 나옵니다. Downloading Prisma engines for Node-API for windows [ ] 0%Error: request to https://binaries.prisma.sh/all_commits/acc0b9dd43eb689cbd20c9470515d719db10d0b0/windows/schema-engine.exe.sha256 failed, reason:  엔진을 수작업으로 다운로드 받아 참조 할수 있는 방법이 없을까요

강의 19:07까지 따라하다가 오류가 갑자기 많이 뜨는데 어디에서 잘못된 것인지 모르겠습니다...DiaryList.jsximport "./DiaryList.css"; import Button from "./Button"; import DiaryItem from "./DiaryItem"; const DiaryList=({data})=>{ return <div className="DiaryList"> <div className="menu_bar"> <select> <option value={"latest"}>Newest</option> <option value={"oldest"}>Oldest</option> </select> <Button text={"write new diary"} type={"POSITIVE"} /> </div> <div className="list_wrapper"> {data.map((item)=><DiaryItem key={item.id} {...item}/>)} </div> </div>; }; export default DiaryList;DiaryItem.jsximport {getEmotionImage} from "../util/get-emotion-image"; import Button from "./Button"; import "./DiaryItem.css"; const DiaryItem=({id,emotionId,createdDate,content})=>{ return (<div className="DiaryItem"> <div className={`img_section img_section_${emotionId}`}> <img src={getEmotionImage(emotionId)}/> </div> <div className="info_section"> <div className="created_date"> {new Date(createdDate).toLocaleDateString()}; </div> <div className="content">{content}</div> </div> <div className="button_section"> <Button text={"수정하기"} /> </div> </div> ); }; export default DiaryItem;App.jsximport './App.css' import{useReducer,useRef,createContext} from "react"; import {Routes,Route} from "react-router-dom"; import Home from "./pages/Home"; import Diary from "./pages/Diary"; import New from "./pages/New"; import Edit from "./pages/Edit"; import Notfound from "./pages/Notfound"; const mockData=[ { id:1, createdDate:new Date("2025-02-18").getTime(), emotionId:1, content:"1번 일기 내용", }, { id:2, createdDate:new Date("2025-02-17").getTime(), emotionId:2, content:"2번 일기 내용", }, { id:3, createdDate:new Date("2025-01-15").getTime(), emotionId:3, content:"3번 일기 내용", }, ]; function reducer(state,action){ switch(action.type){ case "CREATE": return [action.data,...state]; case "UPDATE": return state.map((item)=> String(item.id)===String(action.data.id) ?action.data : item ); case "DELETE": return state.filter( (item)=>String(item.id)!==String(action.id) ); default: return state; } } export const DiaryStateContext=createContext(); export const DiaryDispatchContext=createContext(); function App() { const [data,dispatch]=useReducer(reducer,mockData); const idRef=useRef(3); //새로운 일기 추가 const onCreate=(createdDate,emotionId,content)=>{ dispatch({ type:"CREATE", data:{ id: idRef.current++, createdDate, emotionId, content, }, }); }; //기존 일기 수정 const onUpdate =(id,createdDate,emotionId,content)=>{ dispatch({ type:"UPDATE", data: { id, createdDate, emotionId, content, }, }); }; //기존 일기 삭제 const onDelete=(id)=>{ dispatch({ type:"DELETE", id, }); }; return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ onCreate, onUpdate, onDelete, }} > <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/diary/:id" element={<Diary />} /> <Route path="/edit/:id" element={<Edit />} /> <Route path="*" element={<Notfound />} /> </Routes> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> </> ); } export default App  

저희가 수업진행하면서 프론트엔드,백엔드에 많은 npm으로 설치하잖아요. 이런 라이브러리들을 매번 새로운 프로젝트마다설정해야할까요??비슷한 작업을 뽑아낸다고할때 기존 지금 폴더를 다시 연 다음에 이미지 및 텍스트 수정할때말고 다시 비슷한 프로젝트 폴더를 만들어서 한다고 하면 반드시 다시 전부 깔아야하는거죠? ㅠㅠ

질문이 많아 죄송합니다 선생님 ㅠㅠ아래와 같이 오류메시지가 발생됩니다,, 

한 입 크기로 잘라먹는 리액트 책 잘 보고 있습니다.카운터앱 프로젝트는 완료 후,두 번째 할 일 관리 앱 실행 중에 문제가 발생해서 문의드려요.  1. 문제 : 326쪽까지 문제없이 잘 실행이 되었는데, 327쪽 <div>{it.content}</div> 이 코드를 넣었을때부터 327쪽 책과 동일하게 코드 넣었는데, 에러 문구가 아래처럼 나왔어요. WARNING in [eslint] src\component\TodoList.js Line 1:8: 'TodoItem' is defined but never used no-unused-vars webpack compiled with 1 warning  TodoItem을 import했지만, 코드에서 사용하지 않아서 발생하는 ESLint 경고인 것 같은데, {todo.map((it) => ( <TodoItem key={it.id} content={it.content} /> ))}여기서 TodoItem이 개별 할 일을 나타내는 컴포넌트라고 가정하고 content를 props로 전달했습니다.(이때, key 값으로 it.id를 사용하여 React에서 리스트 렌더링 최적화를 도와야 합니다.)파란색 부분과 같은 조언을 받아 코드를 수정했더니 npm run start 실행하면 서버에서 지금까지 한 모든 화면이 안 보이고 백지화 되었어요. ㅠㅠ 기존에 html5로 이펍3 만들기 조금 배웠고, css개념 어느 정도 이해하는 수준의 초보인데,책 보고 프로젝트1 마치고, 프로젝트2도 거의 다 와가서 재미있게 하는 중에 날벼락이 ㅠㅠ; 혼자서는 도저히 해결이 안 될 거 같아서 강의등록 후 문의드려요.. 초보라 문의도 이렇게 하는게 맞는지 모르겠네요.답변 부탁드릴게요~ 참고 todoeditor.js return 이하App.js import "./App.css"; import Header from "./component/Header"; import TodoEditor from "./component/TodoEditor"; import TodoList from "./component/TodoList"; import { useState, useRef } from "react"; const mockTodo = [ { id: 0, isDone: false, content: "React 공부하기", createDate: new Date().getTime(), }, {id: 1, isDone: false, content: "빨래 널기", createDate: new Date().getTime(), }, {id: 2, isDone: false, content: "노래 연습하기", createDate: new Date().getTime(), }, ]; function App() { const idRef = useRef(3); const [todos, setTodos] = useState(mockTodo); const onCreate = (content) => { const newItem = { id: idRef.current, content, isDone: false, createDate: new Date().getTime(), }; setTodos([newItem,...todos]); idRef.current += 1; }; return ( <div className="App"> <Header /> <TodoEditor onCreate={onCreate} /> <TodoList todos={todos}/> </div> ); } export default App;   

info 작성 예시 다운로드info 탬플릿 다운로드 두개의 파일들이 권한이 없네요??? 

저번에 사놓고(2시간들음)다시 공부를 시작하려는데 혹시 새로운 강의로 들을수있을까요! 이번에는 꼭 완강 하겠습니다

이런 붉은색 에러가 생기는데요,,,

안녕하세요 강의를 기반으로 작업을 하다 궁금한점이 생겨서 product - modify에서 사진을 모두 삭제하고 저장을 해두거나product - register에서 사진이 없는상태로 저장을 해두면   @Query("select p, pi from Product p left join p.imageList pi where pi.ord = 0 and p.delFlag = false ") Page<Object[]> selectList(Pageable pageable);ProductRepository에서 selectList 쿼리부분의 ord = 0인 설정만 만 호출하게 되버리는데 이때 이미지리스트 테이블에서 이미 ord가 없는 게시물은조회가 되지 않습니다..ord가 이미 없는 게시물은 delFlag가 false임에도 조회가 되지않습니다... 강의 목표는 아마도 default.jpeg 가 나와야 정상인거같은데 어떻게 해야 좋을까요 ?처음엔 서비스에서 imageStr이 없으니 imageStr을 강제로 default.jpeg로 설정해봤지만 어차피 조회되지 않아서 의미가 없었습니다.쿼리를 수정해봐야 할까요 ..?? 

안녕하세요! 좋은 강의 잘 들었습니다!강의 중 내용에 관한 질문이 있어 여쭙니다.현업에서 작은 사이드 프로젝트를 운영중인데 기존에는 Firebase를 사용하다가 SQL DB가 필요해 Supabase로 이전을 고려하다 강의를 듣게 되었습니다.다름이 아니라 Supabase에서도 REST API 형태를 지원하는 것으로 알고 있는데강의 내용을 보면, REST API 형태를 사용하는 것이 아닌,직접 Supabase의 Database에 CRUD 하는 것으로 여겨집니다.보안이나 코드의 유지 / 보수, 또는 프론트 개발자와 백엔드 개발자의 역할 분리 등 여러 측면을 고려하였을 때 REST API 형태가 아닌 프론트 코드 내에 직접 CRUD 코드가 구현된 이유가 무엇인지 궁금합니다.

Recoil과 비슷해 보이는 Jotai로 혼자 바꿔보고 있는 중입니다 ㅠㅠ 근데 이번 강의 코드는 어떻게 바꿔야 하는지 감이 안 와요....

npm run start:dev 명령어를 실행을 할 시 아래처럼 타입 에러가 나오고 있는데, 어떻게 해결을 해야 할까요? ㅠㅠ error TS2339: Property 'where' does not exist on type 'string | number | bigint | boolean | [] | { [K in keyof A]: Exact<A[K], any>; }'. Property 'where' does not exist on type 'string'.13 where: args.where, ~~~~~src/prisma.extension.ts:25:23 - error TS2339: Property 'where' does not exist on type 'string | number | bigint | boolean | [] | { [K in keyof A]: Exact<A[K], any>; }'. Property 'where' does not exist on type 'string'.25 where: args.where, ~~~~~ 

강의 들으면서 제로초님 RTK GitHub 코드도 보고 있는데요. RTK는 immer가 내부적으로 사용되어 state를 써도 불변성을 자동으로 처리하는 걸로 알고 있습니다. 그런데 https://github.com/ZeroCho/react-nodebird/blob/master/toolkit/front/reducers/user.js에선 리듀서 마다 state를 쓰는 곳이 있고 draft를 쓰는 곳이 있어서 질문합니다!역할은 같지만 단지 코드를 명시적이고 의도를 나타내기 위해 구분해서 쓰는 것이라고 생각되는데 구분해서 쓰는 다른 이유가 있는지 궁금합니다.