173만명의 커뮤니티!! 함께 토론해봐요.
미해결
[초급] 찍어먹자! 코틀린과 Spring Security + JWT로 회원가입 만들기
안녕하세요 강사님, 좋은 강의 잘 듣고 있습니다. 따라하던 중 토큰을 잘못 입력했을 경우 403 Forbidden 에러가 발생하는데 이 에러의 경우는 RestControllerAdvice 에서 처리를 할 수 없는건가요?? 이 경우에도 Response형태를 통일 시키고 싶은데 어떻게 하면 될까요..?
미해결
코드로 배우는 React 19 with 스프링부트 API서버
제목 그대로 tno값은 어떻게 초기화 시키나요? testDelete 함수를 이용해서 삭제후 다시 testInsert 함수를 이용해서 1 ~ 100까지 만들고 싶은데, tno값은 1부터 시작하는게 아닌, 기존의 tno값부터 1씩 증가됩니다.
해결됨
코드로 배우는 React 19 with 스프링부트 API서버
안녕하세요 Section2-5 강의 " Querydsl설정하기" 강의에서는 분명 repository 폴더 안에 search 폴더가 있었는데 강의를 듣다보니 강사님 화면에서는 search 폴더가 어느새 사라져있습니다.. 강의화면만 보고 어디있는지 알수가 없어서요ㅠ 어느 폴더로 이동해갔는지 알려주시면 감사하겠습니다. 그리고 강사님 화면을 보다가 발견했는데 config 폴더 아래에 RootConfig 파일이 새로 생겨있고, 깃 파일을 확인해보니 modelMapper를 사용하여 DTO 와 entity를 변환해주고 있는데, 앞에 강의에서 제가 듣기론 funciton을 이용해서 변환해주고 RootConfig 파일을 따로 만든 기억이 없습니다ㅠ 교육 뒷 부분에 새로 생기는 건가요?
미해결
스프링부트 시큐리티 & JWT 강의
안녕하세요 SpringSecurity를 이용해서 유저 , 관리자 로그인의 대한 로직을 따로 두고싶습니다. SecurityFilter내에서 유저 로그인 URL과 로직을 관리자 로그인 URL과 로직을 어떻게 나눌 수 있을까욤 ㅠㅠ?
해결됨
코드로 배우는 React 19 with 스프링부트 API서버
안녕하세요 멋진 강의 잘 듣고 있습니다. 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 아래에 추가한 이유도 궁금합니다. 확인 부탁드립니다. 감사합니다.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
button onClick () => moveToList() 호출 시 파라미터가 없기 때문에 if 절 타지 않고(undefined) else로 빠지는데, 동작이 잘 되는 이유는 moveToList() 함수 밖에서 선언한 const queryDefault = createSearchParams({ page, size }).toString(); 덕분에 동작이 잘 되는것입니다.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
수업을 듣다가 궁금한 점이 생겨 문의 드립니다. 현재 React를 사용하여 API 서버와 작업할 때는 JWT 토큰을 자주 사용하는데, 타임리프(Thymeleaf)와 같은 서버 사이드 렌더링을 사용할 때도 JWT 토큰을 사용해도 되는지, 혹은 사용하면 안 되는지 궁금합니다!
미해결
스프링부트 시큐리티 & JWT 강의
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. github에 올려주신 version2, 3 둘 다 빨간줄뜨고 6.1 이후로 deprecated 되었다고 나오는데 설정 어떻게 해야 할까요? ㅜㅜ 스프링부트 시큐리티2강 - 시큐리티 설정 듣고있습니다.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
지난 강의에서 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로 써야할 것을 구분하라고 하셨습니다. 혹시 이것과 관련된 말씀이셨나요? 검색해도 명쾌히 이해가 가지 않습니다!!
미해결
SignalR + ASP.NET Core [+MAUI +WPF +JWT]
혹시 unity에서는 signalR을 사용 할 수 있는 방법이 있을까요? unity에 maui를 붙이는 건 힘들 거 같습니다.
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
실시간 채팅방 강좌 코드를 작성하여 작동 시켜 본 결과 메시지 전송 까지는 잘 되는 것을 확인 하였는데 GIF 업로드 시 다음 그림과 같은 현상이 발생하고 있습니다 그림 하단에 표시한 부분 처럼 처음에 GIF 올리기를 하면 그림이 보이지 않다가 새로 고침을 하면 위의 다른 GIF 처럼 잘 보이긴 하는데 무슨 문제 일까요? 참고로 관련 코드를 같이 올립니다 chat.html {% extends 'layout.html' %} {% block content %} <h1>{{title}}</h1> <a href="/" id="exit-btn">방 나가기</a> <fieldset> <legend>채팅 내용</legend> <div id="chat-list"> {% for chat in chats %} {% if chat.user === user %} <div class="mine" style="color: {{chat.user}}"> <div>{{chat.user}}</div> {% if chat.gif %}} <img src="/gif/{{chat.gif}}"> {% else %} <div>{{chat.chat}}</div> {% endif %} </div> {% elif chat.user === 'system' %} <div class="system"> <div>{{chat.chat}}</div> </div> {% else %} <div class="other" style="color: {{chat.user}}"> <div>{{chat.user}}</div> {% if chat.gif %} <img src="/gif/{{chat.gif}}"> {% else %} <div>{{chat.chat}}</div> {% endif %} </div> {% endif %} {% endfor %} </div> </fieldset> <form action="/chat" id="chat-form" method="post" enctype="multipart/form-data"> <label for="gif">GIF 올리기</label> <input type="file" id="gif" name="gif" accept="image/gif"> <input type="text" id="chat" name="chat"> <button type="submit">전송</button> </form> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="/socket.io/socket.io.js"></script> <script> const socket = io.connect('http://localhost:8005/chat', { path: '/socket.io', }); socket.emit('join', new URL(location).pathname.split('/').at(-1)); socket.on('join', function (data) { const div = document.createElement('div'); div.classList.add('system'); const chat = document.createElement('div'); div.textContent = data.chat; div.appendChild(chat); document.querySelector('#chat-list').appendChild(div); }); socket.on('exit', function (data) { const div = document.createElement('div'); div.classList.add('system'); const chat = document.createElement('div'); div.textContent = data.chat; div.appendChild(chat); document.querySelector('#chat-list').appendChild(div); }); socket.on('chat', function (data) { const div = document.createElement('div'); if (data.user === '{{user}}') { div.classList.add('mine'); } else { div.classList.add('other'); } const name = document.createElement('div'); name.textContent = data.user; div.appendChild(name); if (data.chat){ const chat = document.createElement('div'); chat.textContent = data.chat; div.appendChild(chat); } else { const gif = document.createElement('img'); gif.sr = '/gif/' + data.gif; div.appendChild(gif); } div.style.color = data.user; document.querySelector('#chat-list').appendChild(div); }); document.querySelector('#chat-form').addEventListener('submit', function (e) { e.preventDefault(); if (e.target.chat.value) { axios.post('/room/{{room._id}}/chat', { chat: this.chat.value, }) .then( () => { e.target.chat.value = ''; }) .catch( (err) => { console.error(err); }); } }); document.querySelector('#gif').addEventListener('change', function (e) { console.log('******',e.target.files); const formData = new FormData(); formData.append('gif', e.target.files[0]); axios.post('/room/{{room._id}}/gif', formData) .then( () => { e.target.file = null; }) .catch( (err) => { console.error(err); }); }); </script> {% endblock %} routes/index.js const express = require('express'); const { renderMain, renderRoom, createRoom, enterRoom, removeRoom, sendChat, sendGif } = require('../controllers'); const multer = require('multer'); const fs = require('fs'); const path = require('path'); const router = express.Router(); router.get('/', renderMain); router.get('/room', renderRoom); router.post('/room', createRoom); router.get('/room/:id', enterRoom); router.delete('/room/:id', removeRoom); router.post('/room/:id/chat', sendChat); try {fs.readdirSync('uploads'); } catch (err) { console.error('uploads 폴더가 없어 uploads 폴더를 생성합니다.'); fs.mkdirSync('uploads'); } const upload = multer({ storage: multer.diskStorage({ destination(req, file, done) { done(null, 'uploads/'); }, filename(req, file, done ) { const ext = path.extname(file.originalname); done(null, path.basename(file.originalname, ext) + Date.now() + ext); }, }), limits: {fileSize: 5 * 1024 *1024 }, }) router.post('/room/:id/gif', upload.single('gif'), sendGif); module.exports = router; controllers/index.js const Room = require('../schemas/room'); const Chat = require('../schemas/chat'); const { removeRoom: removeRoomService } = require('../services'); exports.renderMain = async ( req, res, next ) => { try{ const rooms = await Room.find({}); res.render('main', {rooms, title: 'GIF 채팅방'}); } catch (error) { console.error(error); next(error); } }; exports.renderRoom = ( req, res, next ) => { res.render('room', { title: 'GIF 채팅방 생성'}); }; exports.createRoom = async ( req, res, next ) => { try{ const newRoom = await Room.create({ title: req.body.title, max: req.body.max, owner: req.session.color, password: req.body.password, //session data 에서 옮 }); const io = req.app.get('io'); io.of('/room').emit('newRoom', newRoom); // 방에 들어가는 부분 if (req.body.password ) { res.redirect(`/room/${newRoom._id}?password=${req.body.password}`); } else { res.redirect(`/room/${newRoom._id}`); } } catch (error) { console.error(error); next(error); } }; exports.enterRoom = async( req, res, next ) => { try{ const room = await Room.findOne({_id: req.params.id}); if (!room){ return res.redirect('/?error=존재하지 않는 방입니다.'); } if (room.password && room.password !== req.query.password ){ return res.redirect('/?error=비밀번호가 틀렸습니다.'); } const io = req.app.get('io'); const { rooms } = io.of('/chat').adapter; if (room.max <= rooms.get(req.params.id)?.size) { return res.redirect('/?error=허용 인원을 초과하였습니다.'); } const chats = await Chat.find({room: room._id }).sort('createdAt'); res.render('chat', { title: 'GIF 채팅방 생성', chats , room, user: req.session.color }); } catch (error) { console.error(error); next(error); } }; exports.removeRoom = async ( req, res, next ) => { try { await removeRoomService(req.params.id ); res.send('ok'); setTimeout(() => { req.app.get('io').of('/room').emit('removeRoom', req.params.id); }, 2000) } catch (error) { console.error(error); next(error); } }; exports.sendChat = async (req, res, next ) =>{ try { const chat = await Chat.create({ room: req.params.id, user: req.session.color, chat: req.body.chat, }); req.app.get('io').of('/chat').to(req.params.id).emit('chat', chat); res.send('ok'); } catch( error ){ console.error(error); next(error); } } exports.sendGif = async (req, res, next ) => { try { const chat = await Chat.create({ room : req.params.id, user: req.session.color, gif: req.file.filename, }) setTimeout(() => { req.app.get('io').of('/chat').to(req.params.id).emit('chat',chat); }, 1000); res.send('ok'); } catch (error) { console.error(error); next(error); } } [제로초 강좌 질문 필독 사항입니다] 질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다. 도움이 되는 질문을 하는 방법을 알려드립니다. https://www.youtube.com/watch?v=PUKOWrOuC0c 0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다. 1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다. 2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다. 3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요. 4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요. 5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다. 6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.
해결됨
Spring Boot JWT Tutorial
spring 3.3.0, java 17에 적용 중인데 deprecated된 것들 거의다 고쳐놨고 거의다 왔는데 아주 아쉽게 막바지에서 안되고 있어요 ㅎㅎ 전체 코드만 볼 수 있으면 바로 해결 할 수 있을 것 같아서요 전체 소스코드를 볼수 있는지 확인 부탁드립니다.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
configuration.setAllowedHeaders(Arrays.asList("Authorization", "Cache-Control", "Content-Type")); 이걸 어디에 추가해야 하는지 알 수 있을까요?? if(path.startsWith("/api/member/")) { return true; } if(path.startsWith("/api/todo/")) { return true; } 이건 이렇게 입력했지만 저 부분이 어딘지 몰라서 작동이 안되네요 ㅠㅠ
미해결
코드로 배우는 React 19 with 스프링부트 API서버
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]]: Error Promise.then(비동기) (익명)@ ListComponent.js:29 프레임 11개 더 표시 jwtUtil.js를 강의에서 알려주신대로 틀린거 없이 따라하고 todoApi.js에 Axios에서 jwtAxios로 변경하고 로그인 하고 todo를 클릭했는데 위에 메세지 처럼 에러가 발생합니다 그래서 오류메세지를 검색해 보니 이 에러는 CORS(Cross-Origin Resource Sharing) 정책 위반 이 에러는 주로 프론트엔드 애플리케이션(React 등)이 백엔드 API에 요청을 보낼 때 발생한다고 하는데요 어떻게 해야할지 모르겠습니다 ㅠㅠ
해결됨
스프링부트 시큐리티 & JWT 강의
8강 15:08쯤에 구글 로그인을 하고 http://localhost:8080/test/oauth/login 경로로 get요청을 보내게 되면 아래와 같은 에러가 발생합니다. 원인은 authentiacation의 값이 null이기 때문에 getPrincipal()을 하지 못하는 것 같습니다. 어떤 부분에서 Authentication객체에 값을 넣어주는 걸까요?? 혹시 loadUser메소드에서는 값이 정확하게 노출이 되는것을 확인 할 수 있는데 혹시 loadUser에서 authentication객체에 값을 넣어주는 부분일까요??
미해결
코드로 배우는 React 19 with 스프링부트 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를 가져오지를 못하고 있습니다 ㅠ 왜 그런건지 알 수 있을까요 ㅠ 오타도 아닌거 같고..
미해결
따라하며 배우는 NestJS
아마 해당 강의에서 다루는 주 내용이 아니라 그런 것 같긴한데, 강의자님 영상에서는 #10 프론트 엔드단 만들기와 #12 배포하기 강의자료가 존재하는데, 강의자료를 다운 받는 아래 링크에 존재하지 안흔데, 강의가 생성된 이후 의도적으로 제거하신 건가요? https://drive.google.com/drive/folders/1SbVMMPXVhEomuCJl-2fWAcTW4Do1OqJ2
미해결
코드로 배우는 React 19 with 스프링부트 API서버
@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 필드가 잘못된 타입으로 전달되었기 때문에 발생합니다. 이런 메세지를 주는데 강의 내용과 똑같이 입력했는데 왜 이런 메세지를 뱉어내는지 잘 모르겠습니다 ㅠ
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
[제로초 강좌 질문 필독 사항입니다] 세션 6번 app.js 시퀄라이즈 싱크에 관한 문의 입니다. const { sequelize } = require('./models'); app.js 에서 시퀄라이즈를 가져오는데 해당 모둘안에는 3개의 파일 있습니다 .( user, comment, index ) index 파일만 실행하면 될거 같은데 sequelize 자져오는 이유가 궁금하고 , 여기서 가르키는 sequelize 가 index에 있는 sequelize 인지 궁금합니다.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
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')
