데이터는 정상적으로 가져와지고 있습니다. 하지만 선택된 페이지 번호가 회색으로 변경이 안되고 있는데, 어느 부분이 문제인지 모르겠습니다...PageComponent.js 에서 선택된 페이지 번호에 회색을 부여하는 것으로 알고 있는데, 왜 안되는 걸까요..? 아래는 PageComponent.js 코드입니다. 강의 내용과 피피티와 코드가 동일합니다.import React from 'react'; function PageComponent({serverData, movePage}) { // serverData.prev, pageNumList, next return ( <div className="m-6 flex justify-center"> {serverData.prev ? <div className="m-2 p-2 w-16 text-center font-bold text-blue-400 " onClick={() => movePage({page: serverData.prevPage})}> Prev </div> : <></>} {serverData.pageNumList.map(pageNum => <div key={pageNum} className={`m-2 p-2 w-12 text-center rounded shadow-md text-white ${serverData.current === pageNum ? 'bg-gray-500' : 'bg-blue-400'}`} onClick={() => movePage({page: pageNum})}> {pageNum} </div> )} {serverData.next ? <div className="m-2 p-2 w-16 text-center font-bold text-blue-400" onClick={() => movePage({page: serverData.nextPage})}> Next </div> : <></>} </div> ); } export default PageComponent; 그리고 콘솔창에서 다음과 같은 경고창이 뜨는데 가장 좋은 해결 방법에 대해 알 수 있을까요?이 문제는 해결됐습니다! 제가 ListComponent.js 파일 안에서 div 태그 안의 key 속성에 todo.tno 를 큰따옴표로 묶은 오타였습니다.  

안녕하세요.현재 섹션 4 서비스계층 - 상품 목록 처리 강의 7분 44초 진행중 문제가 생겨 질문 드려요.제 코드에서는 totalCount 를 사용하지 못하는데, 선생님 강의에서는 totalCount 로 사용 하셨더라구요. 기존의 섹션2 - 페이지처리를 위한 DTO설계 14분 56초 부분에서는 매개변수 명을 total 로 작성 해주셨는데 매개변수 명을 totalCount 로 작성하면 해결 되는건가요?? 

counter 애플리케이션의 코드 중 render함수에서store에서 getState를 사용해 state 값을 가져오는데 이 때 toString()을 해주는 이유가 궁금합니다.  function render() { console.log(typeof store.getState()); valueElem.innerHTML = store.getState().toString(); }

2024-04-18T17:27:21.633+09:00 ERROR 19504 --- [apiserver] [nio-8080-exec-2] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed: java.lang.RuntimeException: java.lang.NoClassDefFoundError: org/zerock/apiserver/domain/QTodo] with root causejava.lang.ClassNotFoundException: org.zerock.apiserver.domain.QTodo at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:641) ~[na:na] at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:188) ~[na:na] at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:525) ~[na:na]package org.zerock.apiserver.repository.search; import com.querydsl.jpa.JPQLQuery; import lombok.extern.log4j.Log4j2; import org.springframework.data.domain.*; import org.springframework.data.jpa.repository.support.QuerydslRepositorySupport; import org.zerock.apiserver.domain.QTodo; import org.zerock.apiserver.domain.Todo; import org.zerock.apiserver.dto.PageRequestDTO; import java.util.List; @Log4j2 public class TodoSearchImpl extends QuerydslRepositorySupport implements TodoSearch { public TodoSearchImpl() { super(Todo.class); } @Override public Page<Todo> search1(PageRequestDTO pageRequestDTO) { log.info("search1........................"); QTodo todo = QTodo.todo; JPQLQuery<Todo> query = from(todo); query.where(todo.title.contains("")); Pageable pageable = PageRequest.of( pageRequestDTO.getPage() - 1, pageRequestDTO.getSize(), Sort.by("tno").descending()); this.getQuerydsl().applyPagination(pageable, query); List<Todo> list = query.fetch(); // 목록 데이터 long total = query.fetchCount(); return new PageImpl<>(list, pageable, total); } } 코드는 잘 따라 친거같은데 getList() 할때마다 QTodo 클래스를 못찾는다고 요류가 뜨네요.... 어떻게 해결할 수 있을까요?

안녕하세요. 섹션2 RootConfig라는 클래스가 없다가 마지막 강의에서 보이던데 아무 언급이 없어서 질문 드립니다. 섹션2 pdf에는 RootConfig와 ModelMapper에 대해 언급되어 있던데 거기 있는 내용만 보고 넘어가면 되나요?

2장 보는데 ch02_start 폴더를 하나 생성하고 시작하신건가요..???

 눌러봐도 강의 재생이 되진 않네요.

화면 html 소스 같은 것들 때문에 github 주소는 없나요?

@PreAuthorize("(#itemDTO.email == authentication.name)") @PostMapping("/change") public List<CartItemListDTO> changeCart(@RequestBody(required = true) CartItemDTO itemDTO) { log.info("itemDTO : {}", itemDTO); if (itemDTO.getQuantity() <= 0) { return cartService.remove(itemDTO.getCino()); } return cartService.addOrModify(itemDTO); }위코드에서 #ItemDTo 값이 null 설정되는것같습니다.아무리 찿아봐도 원일을 알수없는데 확인좀 부탁드릴수 있을까요? 우선 오류로그는 아래와 같습니다.jakarta.servlet.ServletException: Request processing failed: java.lang.IllegalArgumentException: Failed to evaluate expression '(#itemDTO.email == authentication.name)' at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1022) ~[spring-webmvc-6.1.5.jar:6.1.5] at org.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:914) ~[spring-webmvc-6.1.5.jar:6.1.5] Caused by: java.lang.IllegalArgumentException: Failed to evaluate expression '(#itemDTO.email == authentication.name)' Caused by: org.springframework.expression.spel.SpelEvaluationException: EL1007E: Property or field 'email' cannot be found on null at org.springframework.expression.spel.ast.PropertyOrFieldReference.readProperty(PropertyOrFieldReference.java:224) ~[spring-expression-6.1.5.jar:6.1.5] at org.springframework.expression.spel.ast.PropertyOrFieldReference.getValueInternal(PropertyOrFieldReference.java:111) ~[spring-expression-6.1.5.jar:6.1.5] at org.springframework.expression.spel.ast.PropertyOrFieldReference$AccessorValueRef.getValue(PropertyOrFieldReference.java:416) ~[spring-expression-6.1.5.jar:6.1.5] at org.springframework.expression.spel.ast.CompoundExpression.getValueInternal(CompoundExpression.java:98) ~[spring-expression-6.1.5.jar:6.1.5] at org.springframework.expression.spel.ast.OpEQ.getValueInternal(OpEQ.java:42) ~[spring-expression-6.1.5.jar:6.1.5] at org.springframework.expression.spel.ast.OpEQ.getValueInternal(OpEQ.java:32) ~[spring-expression-6.1.5.jar:6.1.5] at org.springframework.expression.spel.ast.SpelNodeImpl.getTypedValue(SpelNodeImpl.java:119) ~[spring-expression-6.1.5.jar:6.1.5] at org.springframework.expression.spel.standard.SpelExpression.getValue(SpelExpression.java:309) ~[spring-expression-6.1.5.jar:6.1.5] at org.springframework.security.access.expression.ExpressionUtils.evaluateAsBoolean(ExpressionUtils.java:30) ~[spring-security-core-6.2.3.jar:6.2.3]    

안녕하세요 강사님 !!리액트 + 스프링부트 웹개발 강의이지만스터디용으로리액트 네이티브에서 해당 스프링부트 어플리케이션 API 를 활용해도 되는 부분인가요??? 

어떤 클래스명이 어떤 css에 해당하는지를 일부내용들은 암기하고 사용하시는건지 궁금합니다! 그냥 사용하다보면 저절로 외워지는건가요?그리고 강의내용과는 별개로 현업에서 디자인같은 부분은 피그마를 많이 사용하는듯 하는데 피그마로 디자인한것을 코드로 변환하는 과정이 어떻게 이루어지나요?피그마 자체기능으로 html코드로 변환한다음에 이걸 잘 가공?해서 프론트코드로 만들어내는건지 아니면 그냥 피그마 이미지만 보고 클론코딩하는것처럼 코드를 작성하는건지 궁금합니다

프론트 부분에서 ESLint 때문에 계속 에러를 겪고 있는데요,,해결했다 싶으면 신기하게도 다음번 컴퓨터를 키면 또 에러가 생겨있고 그러는데요,빨간색 에러는 없앴는데 노란색 경고글도 없애고 싶습니다.아래 노란색 경고글들도 없앨수 있는 방법이 있을까요...에러때문에 이것저것 시도하다가 뭔가 버전이 안맞는 걸까요...

섹션2 영상에선 TodoSearch랑 TodoSearchImpl 작성한건 어떻게 해야하나요 Todo 삭제하고 이번 수업에 있는 ProductSearch, ProductSearchImpl로 다 바꿔야 하는건가요 ?

(node:8952) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option. (Use `node --trace-deprecation ...` to show where the warning was created) (node:8952) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option. 리액트 실행이랑 강의 내용대로 정상적으로 동작 되는데, npm start 를 수행하면 위와 같은 문구가 출력됩니다. 구글에 검색해봤는데 해결 방법과 원인이 다양해서 적합한 해결책을 못찾았습니다. 무시해도 되는 에러일까요? 어떻게 처리하는지 궁금합니다.

크롬에서의 문제입니다웹스톰 내에서는 또 다른 문제가 있다고 하네용 import { useEffect, useState } from "react"; import { getList } from "../../api/productsApi"; import useCustomMove from "../../hooks/useCustomMove"; import FetchingModal from "../common/FetchingModal"; import { API_SERVER_HOST } from "../../api/todoApi"; import PageComponent from "../common/PageComponent"; import useCustomLogin from "../../hooks/useCustomLogin"; const host = API_SERVER_HOST const initState= { dtoList:[], pageNumList:[], pageRequestDTO: null, prev: false, next: false, totalCount: 0, prevPage: 0, nextPage: 0, totalPage: 0, current: 0 } const ListComponent = (props) => { const {page, size, refresh, moveToList, moveToRead} = useCustomMove() const {exceptionHandle} = useCustomLogin() //serverData는 나중에 사용 const [serverData, setServerData] = useState(initState) //for FetchingModal const [fetching, setFetching] = useState(false) useEffect(() => { setFetching(true) getList({page,size}).then(data => { console.log(data); if(data && data.dtoList){ setServerData(data); } setFetching(false); }).catch( err => exceptionHandle(err)) }, [page,size, refresh]) return ( <div className={"border-2 border-blue-100 mt-10 mr-2 ml-2"}> {fetching ? <FetchingModal/> :<></>} <div className="flex flex-wrap mx-auto p-6"> {serverData.dtoList && serverData.dtoList.map(product => <div key= {product.pno} className="w-1/2 p-1 rounded shadow-md border-2" onClick={() => moveToRead(product.pno)} > <div className="flex flex-col h-full"> <div className="font-extrabold text-2xl p-2 w-full "> {product.pno} </div> <div className="text-1xl m-1 p-2 w-full flex flex-col"> <div className="w-full overflow-hidden "> <img alt="product" className="m-auto rounded-md w-60" src={`${host}/api/products/view/s_${product.uploadFileNames[0]}`}/> </div> <div className="bottom-0 font-extrabold bg-white"> <div className="text-center p-1"> 이름: {product.pname} </div> <div className="text-center p-1"> 가격: {product.price} </div> </div> </div> </div> </div> )} </div> <PageComponent serverData={serverData} movePage={moveToList}></PageComponent> </div> ); } export default ListComponent;Listcomponent에 문제가 있다고 해서 찾아보려고 하는데 어떻게 봐도 모르겠습니다ㅜㅜ 누구든 도와주세요

소셜로그인 강의까지 봤는데요,강의에 있는 프로세스는소셜로그인시 이메일을 가져와서 DB에 저장이 되어있지 않으면 카카오이메일로 회원가입을 시키고, DB에 저장이 되어있으면 비밀번호 없이 해당 계정으로 로그인이 되게끔 만드는 프로세스로 이해 했습니다.그런데, 기존에 회원가입을 하지 않은 사람이 소셜로그인을 할 때 이미 기존에 가입되어 있는 이메일이 있다면 다른사람 계정을 비밀번호 없이 로그인 할 수 있게되는게 지금 구현한 상황에서는 맞는거죠? ex) 기존에 회원가입한 'A' 의 이메일이 test@AAA.com 일 때신규 유입된 사람 'B'의 카카오계정 이메일이 test@AAA.com 인 경우 위와 같은 경우를 방지하려면 소셜로그인시(최초로그인) 회원가입을 시킬 때 이메일 중복체크를 하고 중복되어있다면 다른 이메일 사용을 권유 해야되는식으로 처리를 해야 하는건가요?

ㅠㅠㅠㅠㅠㅠ 강사님 ... ㅠㅠㅠㅠㅠ이번에는 yarn, create-react-app으로 해서 다시 해당 실습 진행해보고 있는데요...(npx로 cra 설치하는데 예전엔 잘 썼었는데 왜인지 모르겠는데 계속 에러가 나서 똑같이는 못했어요...)강의와 동일한 코드인데 에러문구대로 한건지 모르겠는데 import thunkMiddleware from "redux-thunk";의 thunkMiddleware 키워드를 thunk로 변경했더니어제와 같이 vite 패키지 에러가 콘솔창에 뜨더라구여.....살려주세요ㅠㅠ해당 작업한 것까지 커밋한 내용인데 혹시 봐주실 수 있을까요...ㅜㅜhttps://github.com/laurenCho9/soaple-redux-cra

카카오 토큰 받기 이후로 많은 오류가 한번에 떠서 질문 드립니다!부트 서버에서도 member.service, impl에 콘솔 찍은것도 에러로 인해 안뜹니다상황마다 500오류 400오류 grant value 오류 등이 계속 뜹니다 ㅜㅜ  부트https://github.com/hyeonbin03/IntelliJHub일단 부트 코드는 선생님 주셨던 파일 참고해서 Member Modify 기능까지 작성 완료 된 상태입니다 리엑트https://github.com/hyeonbin03/WebStromHub깃 주소 남겨드겠습니다 ㅠㅠ

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/redux-thunk.js?v=c406571d' does not provide an export named 'default' (at store.js:3:8)(내용 수정 및 진행상태 업데이트 2023.03.21 am 02:33)비트로 설치한 모듈에서 제공하지 않는 내보내기라길래해결방법 찾아보다가https://github.com/reduxjs/redux-templates여기에 있는 리드미 내용대로yarn add vite-template-redux설치를 하긴 했는데 Vite, with TypeScript 가 아니라 React로 해서 그런지는 모르겠는데그래도 같은 오류가 뜨네요ㅠㅠㅠ  아래는 각각 입력한 코드 내용입니다store.jsimport { applyMiddleware, compose, createStore } from "redux"; import rootReducer from "./reducers"; import thunkMiddleware from "redux-thunk"; // import asyncFunctionMiddleware from "./middlewares/asyncFunctionMiddleware"; const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const store = createStore( rootReducer, composeEnhancers(applyMiddleware(thunkMiddleware)) ); export default store;addTodoThunks.jsimport { addTodo as addTodoActionCreator, removeTodo as removeTodoActionCreator, } from "../actions/todoAction"; const TODO_MAX_COUNT = 3; function addTodoThunkActionCreator(text) { return async function addTodoThunk(dispatch, getState) { const state = getState(); if (state.todo.length < TODO_MAX_COUNT) { dispatch(addTodoActionCreator("아이템 추가중...")); setTimeout(() => { dispatch(removeTodoActionCreator()); dispatch(addTodoActionCreator(text)); }, 3000); return; } else { dispatch(addTodoActionCreator("최대 개수 초과!")); setTimeout(() => { dispatch(removeTodoActionCreator()); }, 3000); } }; } export default addTodoThunkActionCreator; TodoAppContainer.jsimport { connect } from "react-redux"; // import { // addTodoActionCreator, // removeTodoActionCreator, // removeAllActionCreator, // } from "../actions"; // import { // addTodoActionCreator, // removeTodoActionCreator, // removeAllActionCreator, // } from "../ducks/todoDuck"; import { addTodo as addTodoActionCreator, removeTodo as removeTodoActionCreator, removeAll as removeAllActionCreator, } from "../actions/todoAction"; import addTodoThunkActionCreator from "../thunks/addTodoThunks"; import TodoApp from "../../components/TodoApp"; function mapStateToProps(state, ownProps) { return { todoItems: state.todo, }; } function mapDispatchToProps(dispatch, ownProps) { return { addTodo: (text) => { // dispatch(addTodoActionCreator(text)); dispatch(addTodoThunkActionCreator(text)); }, removeTodo: () => { dispatch(removeTodoActionCreator()); }, removeAll: () => { dispatch(removeAllActionCreator()); }, triggerAsyncFunction: (asyncFunction) => { dispatch(asyncFunction); }, }; } const TodoAppContainer = connect(mapStateToProps, mapDispatchToProps)(TodoApp); export default TodoAppContainer;    

jwt 10분 유효기간 끝난 상황에서jwtAxios를 이용해서 products 를 호출하면 JWTCheckFilter를 걸쳐서 validateToken 메서드를 호출하고 거기서 Exired Exception 이 납니다. accessToken 이 유효시간(10분)이 경과하였으면refreshToken 으로 교체되는 걸로 강의내용을 인지했었는데요. 제가 어디서 놓친건지 잘 모르겠네요 ㅠ react쪽에서 beforeReq 쪽에서 결국 expired 처리가되고brforeRes 에서 뭔가 유효기간이 끝났으면/api/member/refresh 를 호출해야될 것 같은데  예제 소스 잘 따라한거 filter에서 먼저 유효기간이 만료되어 exception 부터 호출되어 더이상 진행이 안되네요. 어디가 정확히 문제인지 모르겠네요.jwtUtil.js 는 제공해주신 소스는 오타가 있을까봐 동일하게 ctrl+c , v 도 했습니다.  JWTUtil.java 일부분 public static Map<String, Object> validateToken(String token) { Map<String, Object> claim = null; try { SecretKey key = Keys.hmacShaKeyFor(JWTUtil.key.getBytes("UTF-8")); claim = Jwts.parserBuilder() .setSigningKey(key) .build() .parseClaimsJws(token) // 파싱 및 검증, 실패 시 에러 .getBody(); } catch (MalformedJwtException malformedJwtException) { throw new CustomJWTException("MalFormed"); } catch (ExpiredJwtException expiredJwtException) { throw new CustomJWTException("Expired"); } catch (InvalidClaimException invalidClaimException) { throw new CustomJWTException("Invalid"); } catch (JwtException jwtException) { throw new CustomJWTException("JWTError"); } catch (Exception e) { throw new CustomJWTException("Error"); } return claim; }