[파일 업로드 설정과 확인] 강의에서 DB에 아주 중요한게 아니라면 성능적인 부분때문에 DB에 파일을 저장하면 안된다고 하셨습니다. 클라우드를 이용하는게 일반적이라고 생각합니다만 한가지 궁금한게 있습니다. 만약 게시글이라는 엔티티에 대표 사진이 딱 한장 들어갈 수 있다고 한다면 아래와 같은 순서로 구현할 수 있겠다는 생각이 들었습니다. 이런 방법에 대해 어떻게 생각하시나요?? 애플리케이션 단에서 이미지 등록 -> 이미지 base64 인코딩 -> 인코딩 된 긴 문자열을 압축 -> 압축된 문자열을 RDB(MYSQL) 게시글 테이블에 게시물 대표이미지 (longtext 형)에 저장.조회할때는 애플리케이션 단에서 별도로 압축된 문자를 원래 인코딩 된 문자열로 디코딩하는 로직 필요하겠지만 비용이 크지 않다고 생각했습니다.

TodoServiceImpl에서 PageResponseDTO<TodoDTO> getList 부분에서 오류가 발생합니다. PageResponseDTO혹시 PageResponseDTO 에서 제가 놓친 부분이 있을까요??

안녕하세요 강사님 강의에서 react는 대부분 함수로 선언하지 않고,화살표 함수를 선언해서 사용해주고 계시는데요, 함수가 아닌 화살표 함수를 사용하는 이유가 따로 있는지 궁금합니다.함수를 사용하지 않는 이유가 있다면 그 이유도 설명해주시면 감사하겠습니다.

리액트랑 부트 연결하는 방법 axios까지 코드입력했는데 cmd라던지 연동하는 방법은 안알려주시나요?

npx create-react-app mall 명령어 입력시 해당 오류가 발생합니다. log의 내용은 다음과 같습니다.0 verbose cli C:\Program Files\nodejs\node.exe C:\Users\USER\AppData\Roaming\nvm\v10.16.3\node_modules\npm\bin\npm-cli.js1 info using npm@10.7.02 info using node@v20.15.03 silly config:load:file:C:\Users\USER\AppData\Roaming\nvm\v10.16.3\node_modules\npm\npmrc4 silly config:load:file:C:\Users\USER\reactAPI_workSpace\.npmrc5 silly config:load:file:C:\Users\USER\.npmrc6 silly config:load:file:C:\Users\USER\AppData\Roaming\npm\etc\npmrc7 verbose title npm exec create-react-app mall8 verbose argv "exec" "--" "create-react-app" "mall"9 verbose logfile logs-max:10 dir:C:\Users\USER\AppData\Local\npm-cache\_logs\2024-07-01T07_49_17_781Z-10 verbose logfile C:\Users\USER\AppData\Local\npm-cache\_logs\2024-07-01T07_49_17_781Z-debug-0.log11 verbose stack TypeError: LRUCache is not a constructor11 verbose stack at Object.<anonymous> (C:\Users\USER\AppData\Roaming\nvm\v10.16.3\node_modules\npm\node_modules\cacache\lib\memoization.js:5:18)11 verbose stack at Module._compile (node:internal/modules/cjs/loader:1358:14)11 verbose stack at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)11 verbose stack at Module.load (node:internal/modules/cjs/loader:1208:32)11 verbose stack at Module._load (node:internal/modules/cjs/loader:1024:12)11 verbose stack at Module.require (node:internal/modules/cjs/loader:1233:19)11 verbose stack at require (node:internal/modules/helpers:179:18)11 verbose stack at Object.<anonymous> (C:\Users\USER\AppData\Roaming\nvm\v10.16.3\node_modules\npm\node_modules\cacache\lib\get.js:8:14)11 verbose stack at Module._compile (node:internal/modules/cjs/loader:1358:14)11 verbose stack at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)12 verbose cwd C:\Users\USER\reactAPI_workSpace13 verbose Windows_NT 10.0.1904514 verbose node v20.15.015 verbose npm v10.7.016 error LRUCache is not a constructor17 verbose exit 118 verbose code 119 error A complete log of this run can be found in: C:\Users\USER\AppData\Local\npm-cache\_logs\2024-07-01T07_49_17_781Z-debug-0.lognode 와 npm 버전은 이렇게 깔려있습니다. 재설치 해도 여전히 오류가 발생합니다 ㅜㅠ 어떻게 해결해야 할까요?

저는 책이 없이 강의만을 통해 학습중입니다. 강의 중간중간 코드를 복사해서 오시더라구요 ~ js같은 경우는 따라치는것에 대해 어려운 부분이 있는데 혹시 어쩔 수 없는 부분인 걸까요 ?

제목 그대로 tno값은 어떻게 초기화 시키나요? testDelete 함수를 이용해서 삭제후 다시 testInsert 함수를 이용해서 1 ~ 100까지 만들고 싶은데, tno값은 1부터 시작하는게 아닌, 기존의 tno값부터 1씩 증가됩니다.

안녕하세요 Section2-5 강의 "Querydsl설정하기" 강의에서는 분명repository 폴더 안에 search 폴더가 있었는데 강의를 듣다보니 강사님 화면에서는 search 폴더가 어느새 사라져있습니다.. 강의화면만 보고 어디있는지 알수가 없어서요ㅠ 어느 폴더로 이동해갔는지 알려주시면 감사하겠습니다. 그리고 강사님 화면을 보다가 발견했는데 config 폴더 아래에 RootConfig 파일이 새로 생겨있고,깃 파일을 확인해보니 modelMapper를 사용하여 DTO 와 entity를 변환해주고 있는데,앞에 강의에서 제가 듣기론 funciton을 이용해서 변환해주고RootConfig 파일을 따로 만든 기억이 없습니다ㅠ교육 뒷 부분에 새로 생기는 건가요?

안녕하세요멋진 강의 잘 듣고 있습니다. Todo에서 ReadComponent.js 안에서 read 할때 const makeDiv = () => () 와 같이 Arrow Function을 사용해서 간단하게 표현해주셨는데요, 수정할때도 간단하게 사용해보고 싶어서Product의 ModifyComponent.js 에서 아래와 같이 만들어 사용해봤습니다.{makeDiv("name", product.pname, "text", handleChangeProduct)} {makeDiv("description", product.pdesc, "text", handleChangeProduct)} {makeDiv("price", product.price, "number", handleChangeProduct)}const makeDiv = (title, value, type, handleChangeProduct) => ( <div className="flex justify-center"> <div className="relative mb-4 flex w-full flex-wrap items-stretch"> <div className="w-1/5 p-6 text-right font-bold">{title}</div> <input className="w-4/5 p-6 rounded-r border border-solid border-neutral-300 shadow-md" name={title} type={type} value={value} onChange={handleChangeProduct} ></input> </div> </div> );만들어보니까,price(넘버)는 수정이 되는데,pname과 pdesc는 수정이 안되더라구요, readOnly가 먹혀있었습니다.text와 number가 다른걸까요...수정이 안되는 이유가 뭔지 궁금합니다ㅠ 추가로, const makeDiv 는 return 아래에 추가를 해주셨는데,return 위에가 아니라 return 아래에 추가한 이유도 궁금합니다. 확인 부탁드립니다.감사합니다.   

button onClick () => moveToList()호출 시 파라미터가 없기 때문에if 절 타지 않고(undefined)else로 빠지는데, 동작이 잘 되는 이유는moveToList() 함수 밖에서 선언한const queryDefault = createSearchParams({ page, size }).toString();덕분에 동작이 잘 되는것입니다. 

수업을 듣다가 궁금한 점이 생겨 문의 드립니다. 현재 React를 사용하여 API 서버와 작업할 때는 JWT 토큰을 자주 사용하는데, 타임리프(Thymeleaf)와 같은 서버 사이드 렌더링을 사용할 때도 JWT 토큰을 사용해도 되는지, 혹은 사용하면 안 되는지 궁금합니다!

지난 강의에서 LIST, ADD 클릭 할때와 const handleClickList = useCallback(() => { navigate({ pathname: 'list' }); }, []); const handleClickAdd = useCallback(() => { navigate({ pathname: 'add' }); }, []);지금 강의에서 moveToModify 클릭할 때 const moveToModify = () => { navigate({ pathname: `/todo/modify/${tno}`, search: queryStr }); };useCallback() 사용 여부 차이가동적으로 변할 여지가 있는 함수를 새로 호출하는게 맞아서 그런걸까요?(=${tno}의 변경 가능성?)props로 써야할 것과 router로 써야할 것을 구분하라고 하셨습니다. 혹시 이것과 관련된 말씀이셨나요?검색해도 명쾌히 이해가 가지 않습니다!!  

configuration.setAllowedHeaders(Arrays.asList("Authorization", "Cache-Control", "Content-Type"));이걸 어디에 추가해야 하는지 알 수 있을까요??if(path.startsWith("/api/member/")) { return true; } if(path.startsWith("/api/todo/")) { return true; }이건 이렇게 입력했지만 저 부분이 어딘지 몰라서 작동이 안되네요 ㅠㅠ

before request.............jwtUtil.js:34 -----------------------------eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzb2NpYWwiOmZhbHNlLCJwdyI6IiQyYSQxMCRWQ1dGY0ZhWC9aTzF2TGhpU0VpY3NlY0hGWmdIV2dZV0RNa0JMRmlCZk5yYTQvVVgvMERORyIsIm5pY2tuYW1lIjoiVXNlcjUiLCJyb2xlTmFtZXMiOlsiVVNFUiIsIk1BTkFHRVIiXSwiZW1haWwiOiJ1c2VyNUBhYWEuY29tIiwiaWF0IjoxNzE2OTc2NTc5LCJleHAiOjE3MTY5NzcxNzl9.r_619xyQq9zGhf5YG4-Sprtiz4W9rNNhf5ml4XyAQ3M:3000/todo/list:1 Access to XMLHttpRequest at 'http://localhost:8080/api/todo/list?page=1&size=10' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.jwtUtil.js:56 response fail error.............:3000/todo/list:1 Uncaught (in promise)AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}code: "ERR_NETWORK"config: {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}message: "Network Error"name: "AxiosError"request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}stack: "AxiosError: Network Error\n at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:54389:14)\n at Axios.request (http://localhost:3000/static/js/bundle.js:54841:41)\n at async getList (http://localhost:3000/static/js/bundle.js:184:15)"[[Prototype]]: ErrorPromise.then(비동기)(익명)@ListComponent.js:29프레임 11개 더 표시 jwtUtil.js를 강의에서 알려주신대로 틀린거 없이 따라하고 todoApi.js에 Axios에서 jwtAxios로 변경하고 로그인 하고 todo를 클릭했는데 위에 메세지 처럼 에러가 발생합니다 그래서 오류메세지를 검색해 보니 이 에러는 CORS(Cross-Origin Resource Sharing) 정책 위반 이 에러는 주로 프론트엔드 애플리케이션(React 등)이 백엔드 API에 요청을 보낼 때 발생한다고 하는데요 어떻게 해야할지 모르겠습니다 ㅠㅠ

import axios from "axios" import { API_SERVER_HOST } from "./todoApi" // api server host const host = `${API_SERVER_HOST}/api/products` // 외부 보낼것 만들기 비동기 통신 export const postAdd = async (product) => { // 객체지정 const header = {headers: {'Content-Type':'multipart/form-data'}} // product와 header 같이 보내기 const res = await axios.post(`${host}/`, product, header) return res.data } export const getList = async (pageParam) => { try{ const {page, size} = pageParam const res = await axios.get(`${host}/list`, {params: {page:page, size:size}}) return res.data } catch (error) { console.error('Error in getList:', error); throw error; } }productsApi.js 위 코드이고 import React, { useState, useEffect } from 'react'; import useCustomMove from '../../hooks/useCustomMove'; import { API_SERVER_HOST } from '../../api/todoApi'; import { getList } from '../../api/productsApi'; const initState = { dtoList: [], pageNumList: [], pageRequestDTO: null, prev: false, next: false, prevPage: 0, nextPage: 0, current: 0 } // 서버에 주소가 바뀌면 상수값만 바꿔줄려고 선언한것 const host = API_SERVER_HOST function ListComponent(props) { // 커스텀 훅 사용해서 이동 refresh: 갱신 const {moveToList, moveToRead, page, size, refresh} = useCustomMove() // 목록 데이터 가져오기 const [serverData, setServerData] = useState(initState) // 데이터 가져오기 const [fetching, setFetching] = useState(false) useEffect(() => { setFetching(true) // 데이터 가져오는 중 자동으로 처리되기 때문에 // 서버데이터가 처리가 되면 getList({page,size}).then(data => { console.log("data>>>>>>>", data); setFetching(false) setServerData(data) }) }, [page,size,refresh]); return ( <div className="border-2 border-blue-100 mt-10 mr-2 ml-2"> {/* fetching일때는 FetchingModal 호출하고 그렇지 않으면 아무것도 안보여준다. */} {fetching? <FetchingModal/> :<></>} <div className="flex flex-wrap mx-auto p-6"> {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> </div> ); } export default ListComponent;ListComponent.js 파일인데 import React from 'react'; import ListComponent from '../../components/products/ListComponent'; function ListPage(props) { return ( <div className="p-4 w-full bg-white"> <div className="text-3xl font-extrabold"> Products List Page </div> <ListComponent/> </div> ); } export default ListPage;ListPage.js 파일입니다 터미널에 에러도 뜨지 않고 서버에서 데이터를 못가져오는데 postman으로 서버 테스트를 했을때는 잘 되는데요 서버에서 클라이언트로 연동되는 부분에서 문제가 생긴건지 list를 가져오지를 못하고 있습니다 ㅠ 왜 그런건지 알 수 있을까요 ㅠ 오타도 아닌거 같고..

@PutMapping("/{pno}") public Map<String, String> modify(@PathVariable Long pno, ProductDTO productDTO) { // productDTO안에 pno값만 고정 productDTO.setPno(pno); // 원래 상품을 가지고 온다. old product 가져온다. DB에 저장되어 있는 저장된 정보 ProductDTO oldProductDTO = productService.get(pno); // 새로 업로드할 파일 가져온다. List<MultipartFile> files = productDTO.getFiles(); // 새로 업로드할 파일 저장 List<String> currentUploadFileNames = fileUtil.saveFiles(files); // 지워지지 않는 파일들 keep files 예전 파일 그대로 있는 것 List<String> uploadedFileNames = productDTO.getUploadFileNames(); if(currentUploadFileNames != null && !currentUploadFileNames.isEmpty()) { uploadedFileNames.addAll(currentUploadFileNames); } // 수정하기 productService.modify(productDTO); // 오래된 파일이 문제. 지워져야 하는 파일들 처리 // 기존 파일들을 가져온다. List<String> oldFileNames = oldProductDTO.getUploadFileNames(); if(oldFileNames != null && !oldFileNames.isEmpty()) { // 기존 파일 남아 있는지 확인 // uploadedFileNames에서 없다는건 이 파일은 이제 존재할 의미가 없다는것 그런것만 골라서 모은다. List<String> removeFiles = oldFileNames.stream().filter(fileName -> uploadedFileNames.indexOf(fileName) == -1 ) .collect(Collectors.toList()); // 삭제한다. fileUtil.deleteFiles(removeFiles); } return Map.of("RESULT", "SUCCESS"); }ProductController 에 이 메서드를 입력하고ProductService에는// 수정 void modify(ProductDTO productDTO);이걸 입력하고ProductServiceImpl에는@Override public void modify(ProductDTO productDTO) { // 조회 Optional<Product> result = productRepository.findById(productDTO.getPno()); Product product = result.orElseThrow(); // 변경내용 반영 product.changePrice(productDTO.getPrice()); product.changeName(productDTO.getPname()); product.changeDesc(productDTO.getPdesc()); product.changeDel(productDTO.isDelFlag()); // 이미지 처리를 위해 목록을 비운다. List<String> uploadFileNames = productDTO.getUploadFileNames(); product.clearList(); if(uploadFileNames != null && uploadFileNames.isEmpty()) { uploadFileNames.forEach(uploadName ->{ product.addImageString(uploadName); }); } // 저장될 때 파일이 문제 파일이 변경됐는지 알 수 가 없다. productRepository.save(product); } private ProductDTO entityToDTO(Product product) { ProductDTO productDTO = ProductDTO.builder() .pno(product.getPno()) .pname(product.getPname()) .pdesc(product.getPdesc()) .price(product.getPrice()) .delFlag(product.isDelFlag()) .build(); List<ProductImage> imageList = product.getImageList(); if(imageList == null || imageList.isEmpty()) { return productDTO; } // 상품 이미지 목록 문자열로 바꾸기 List<String> fileNameList = imageList.stream().map(productImage -> productImage.getFileName()).toList(); productDTO.setUploadFileNames(fileNameList); return productDTO; } 이걸 입력하고 postman에서 PUT방식으로 해서 기존 이미지파일 내용을 그대로 복사해서 테스트를 하는데 "msg": "Validation failed for argument [1] in public java.util.Map<java.lang.String, java.lang.String> org.zerock.apiserver.controller.ProductController.modify(java.lang.Long,org.zerock.apiserver.dto.ProductDTO): [Field error in object 'productDTO' on field 'uploadFileNames': rejected value [org.springframework.web.multipart.support.StandardMultipartHttpServletRequest$StandardMultipartFile@192a0968]; codes [typeMismatch.productDTO.uploadFileNames,typeMismatch.uploadFileNames,typeMismatch.java.util.List,typeMismatch]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [productDTO.uploadFileNames,uploadFileNames]; arguments []; default message [uploadFileNames]]; default message [Failed to convert property value of type 'org.springframework.web.multipart.support.StandardMultipartHttpServletRequest$StandardMultipartFile' to required type 'java.util.List' for property 'uploadFileNames'; Cannot convert value of type 'org.springframework.web.multipart.support.StandardMultipartHttpServletRequest$StandardMultipartFile' to required type 'java.lang.String' for property 'uploadFileNames[0]': no matching editors or conversion strategy found]] "이런 에러가 계속 발생하는데요 왜 그럴까요 ㅠpostman에서 출력하는 메세지입니다. GTP에 입력해서 물어봤는데ProductController의 modify 메서드에서 ProductDTO 객체의 uploadFileNames 필드가 잘못된 타입으로 전달되었기 때문에 발생합니다.  이런 메세지를 주는데 강의 내용과 똑같이 입력했는데 왜 이런 메세지를 뱉어내는지 잘 모르겠습니다 ㅠ

import React from "react"; // 게시판 아래 페이징 처리 1페이지 2페이지 3페이지 <<prev page, next page>> 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-grev-500':'bg-blue-400'}`} onClick={ () => movePage( {page:pageNum}) }> {pageNum} </div> )} {/* 마지막 next */} {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; 이렇게 입력을 똑같이 했는데 Prev </div> : <></> 이쪽 코드에서 아래 에러메세지가 발생을 하는데요 저만 이런건가요 ㅠ 서버쪽은 문제가 아니라고 구글링 해보니까 그러는데 여기서 뭐가 문제인지 도저히 모르겠습니다 ㅠ Uncaught TypeError: Cannot read properties of undefined (reading 'map')

장바구니 수량 변경 및 커스텀 훅 강의에서 장바구니 수량 +,- 버튼 클릭하면 장바구니의 수량이 동적으로 변경되더라구요. 그런데 저는 화면에 수량이 변경되지않네요. ajax 로 정상 처리 되고 장바구니 데이터도 정상적으로 받아 와서 새로고침 하면 수량이 변경된것을 확인은 할 수 있어요. 소스코드:React CH11 에서 코드를 비교했는데 다르지 않았습니다. 확인부탁드릴게요~

안녕하세요 강의를 듣는중에 섹션 2 마지막 REST컨트롤러-수정/삭제,CORS 설정 이 부분에서 PutMapping modify 메서드에 서비스 명과 파라미터명이 위에서 코딩한거랑 다르더라구요 service가 아니라 todoservice이고 파라미터는 todoDTO가 아니라 dto 던데 제가 입력한 부분이 정확히 맞는건지 확인하기가 어려워서 코드를 볼 수 있는 첨부파일을 요청합니다!

안녕하세요. 강의 따라서 진행하였는데요. localhost:8080으로 접속하면 아무것도 뜨지 않아서요.