안녕하세요 컴퓨터공학 전공을 하고 있는 대학생입니다.스프링부트와 리액트로 웹사이트를 만든 경험자들과 함께 이번엔 웹게임을 만들어보려고 합니다 .웹게임에 관심 있던 사람들인지라 방탈출 게임으로 여러 개의 방을 탐험하며, 퍼즐을 풀어 탈출구를 찾는 게임을 만들어보려고 하는데 스프링과 리액트로 웹게임을 만든 사례를 많이 찾아보지 못해서 여기다가 물어보아요!각방에는 문제나 퍼즐이 있고, 이를 해결해야 탈출할 수 있는 주고백엔드에서 방과 퍼즐 데이터를 관리하고 프론트에서 방을 시각적으로 표현하고, 사용자 입력을 통해 퍼즐을 해결모든 방을 통과하면 게임이 종료되고, 승리 메시지 표시하는 방식으로 제작을 해보고 싶은데,스프링부트와 리액트로 웹게임을 제작해보신 분들 이러한 틀로 게임을 만들 수 있을지와 경험담을 들어보고 싶습니다 !!

안녕하세요. 저는 flask와 react를 활용해서 프로젝트를 진행하고 있는 대학생입니다.flask는 5000번, 리액트는 3000번 포트를 사용하고리액트에서 웹앱의 배경화면 이미지를 flask의 라우팅 함수를 통해 받아오는 중입니다. localhost:포트번호 에 접속할 때는 문제가 없고, 같은 와이파이에서 다른 노트북으로 아이피:포트 로 접속해봐도 문제가 없습니다.다만, 모바일에서 아이피:포트 에 접속할 때는 이미지가 로딩되지 않는 문제가 있습니다.이미지 외에 네비게이션은 잘 나오고 기타 동작은 문제가 없는 것으로 확인했습니다.react에서 로컬 디렉토리에 있는 이미지를 랜더링할 땐 모바일에서도 이미지가 잘 나옵니다.flask에서 받아온 이미지를 랜더링할 때만 모바일 접속시 이미지가 안나옵니다. 아이패드로 접속시 화면맥에서 로컬호스트 접속시 화면3. 코드@app.route('/map-image/') def serve_map_image(): return send_from_directory('static', 'map.png')리액트파일에서 아래처럼 flask서버를 통해 받아옵니다.const imageUrl = "http://localhost:5000/map-image";  관련 경험이 있으신 분들의 많은 도움과 조언 부탁드립니다..

const Order = () => { const orders = useOrders(); const { books } = useBooks(); const { remove, removeAll, addToOrder } = useActions(); const [count,setCount] = useState(1); const totalPrice = useMemo(() => { return orders.map((order) => { const { isbn, quantity } = order; const book = books.find((b) => b.isbn === isbn); return book.sale_price * quantity ; }) .reduce((l, r) => l + r, 0); }, [orders, books]); 다른 컴포넌트와 hooks 에서 받아온 함수로 총액 계산을 하는데 (totalPrice) 해당 컴포넌트에서 아래처럼 권수를 변경할 수 있는 함수를 만들었습니다.return( {book.title} {order.quantity} 권 <button onClick={() => setCount(order.quantity ++)} >+</button> <button onClick={() => setCount(order.quantity --)} >-</button> </div>)여기서 변경된 권수의 금액으로 총액도 변경하게 하고 싶은데 어떻게 함수를 만들어야 할까요...? 

제가 포트폴리오를 목적으로 스프링부트 즉, 백엔드를 맡았고 리액트와 진행했는데 프로젝트는 완성이 되었지만 리팩토링을 하고 있으면 좋을거 같은 기능들을 추가하려고 할 때 그러면 백엔드에서는 만들지만 화면은 구성을 못하니 그냥 건들지 말아야 할까요 아니면 백엔드에서 구현하더라도 그냥 포폴에는 언급하지 말아야 하나요? 포트폴리오 용으로 만들고 나서 코드를 가독성 있게 리팩토링하고 갑자기 아 이런 기능이 있었으면 좋았겠는데 그런 생각들이 들어서 백엔드에서라도 구현할까 하다가 연습용이면 모를까 포폴용이라 어떻게 해야할지 헷갈리네요

개인 프로젝트로 블로그 만들기를 구현하는 중입니다.모든 프로젝트에 대한 설명은 할 수 없지만, 보안으로 jwt token을 사용하고있고, multipartfile을 통해서 게시글 내에 이미지, 영상, 기타 파일 등을 함께 첨부하여 게시글을 작성할 수 있도록 기능을 구현하였습니다.파일 업로드 단계까진 잘 되었고, 우선 로컬 저장소를 사용하여 파일은 스프링 부트 프로젝트 내 resources/static/ ~ 이하 이미지:img, 영상:video, 기타 파일:file 로 세부 디렉토리를 나눠서 접근하도록 하였습니다. 우선 사진으로만 테스트 해보는 중인데, 리액트에서 파일을 보여주는 데에 어려움을 겪고있습니다.export const getImageApi = async (token: string | null, imageName: string) => { const url = `http://localhost:4000/api/images/${imageName}.jpg`; try { const response = await axios.get(url, { headers: { Authorization: `Bearer ${token}`, }, }); const result = response.data; return result; } catch (error) { console.error("Error fetching board data:", error); return null; } };토큰을 이용해야만 파일에 접근이 가능하기에, 이런식으로 따로 api를 설정하고 접근하는 방식으로 해보려고 하는데 제 생각처럼 잘 되지 않습니다. 해당 api를 통한 요청을 포스트맨으로 조회해보니 이진화 된 파일이 응답으로 나오곤 하는데, 이를 다시 원본으로 복구한 후에 보여줘야하는 것 같은데,, 아직 많이 부족해서 어떤식으로 해야할지 잘 모르겠습니다. 리액트 - 스프링(부트)를 사용하면서 파일 업로드/다운로드(조회)를 할 때, 이런 방식을 사용하는 것이 바람직한 것인지, 단순히 사진을 업로드 하고 조회할 때에 이정도 복잡한 수준으로 구현하는 것이 일반적인 것인지 궁금하고 더 간단하거나 쉽게 할 수 있는 방법이 있다면 알려주시면 감사하겠습니다. 첫 질문이라 소스코드를 많이 올리는 것이 번잡할까 싶어 많이 올려두지 않았습니다. 혹시 도움을 주실 때 관련 소스코드를 필요로 하신다면 보내드리도록 하겠습니다. 감사합니다.

안녕하세요. 요즘 리액트 컴포넌트를 만들 때 관심사 분리를 더욱 잘하기 위해 노력 중인 주니어 개발자입니다.컴포넌트 설계 시 도메인 종속적이지 않도록 유의하고 있으며 도메인 특화된 컴포넌트를 위해서 비종속적 컴포넌트에 합성해서 만들어 사용하려고 노력 중입니다.이 얘기를 왜 드렸나면 리액트에서 컴포넌트는 결국 함수이며 위에 언급된 고민들은 결국 함수를 합성하는 것과 다르지 않다고 생각이 들더군요. 그 와중에 이 강의가 눈에 들어왔습니다.  질문1. 해당 강의는 위의 고민과 같은 결의 문제를 해결하는데 도움이 되는 강의일까요?질문2. (위의 글과 상관없이) fxjs, fxts 라이브러리를 사용하지 않으면 해당 강의에서 다루는 내용을 실무에서 응용하는 게 힘들까요?(잠깐 수강해봤을 땐 문제를 정의하고 그 문제를 fxjs 속 특정 함수를 통해 어떻게 해결하는 지 보여주는 것의 반복이었던 거 같은데 그래서 여쭤봅니다) 

안녕하세요.늘 재밌고 쉽게 배우고 있는데 궁금한 것이 생겨질문 납깁니다. 아래처럼 Ball 컴포넌트를 렌더링 할 때<div> {winBalls.map((v) => <Ball key={v} number={v} />)} </div> {winBalls.map((v) => <Ball key={v} number={v} />)}위와 같이 결과가 나오는데요.div로 감싸지 않았을 때 재렌더링 되는 이유가 있나요?어떤 이유로 재렌더링 되는지 궁급합니다.감사합니다.

따라하며 배우는 노드, 리액트 시리즈 -쇼핑몰 사이트 말들기 를 듣고있는 수강생입니다.FileUpload.js를 작성하는도중 아래 오류가 납니다. react 버젼과 reactdom버전이 같은걸 확인하고 github 소스를 가져와 써서 오타일 확률도 없는데 어떤 오류일까요 ㅜㅜ

styled component 적용하는 거에서 Invalid hook call. 와 Cannot read properties of null 이라는 에러가 뜹니다. 버전은     "styled-component": "^2.8.0", 인데 대체 뭐가 문제일까요???  

안녕하세요 선생님들 :) 사이드프로젝트로 react와 GraphQL을 공부하여 Gatsby로 블로그를 개발중에 있습니다.   다음 추가기능으로는 질문답변 기능을 넣어보고싶어서요 그러려면 로그인 기능도 필요할테고, 그러면 동적 코드들이 많아질것 같은데요   생각하는 기능들을 추가하려면, (내 질문글 보기, 내 답변 보기등등.. 그러면 매우 동적인 프로필컴포넌트도 추가될것같구...)   굳이 개츠비에서 업그레이드하는게 맞나? 하는 생각도 드는데요. 만약 다른 프레임워크를 찾아본다면 프론트, 서버, 호스팅, 배포단에서 추천해주실만한 프레임웤이나 인프라가 있을까요?   툭툭 던져주시면 자세한건 제가 찾아보면서 공부해보겠습니다! 고수님들 조언 부탁드려요 ㅠ-ㅠ

counter 변수도 초기값이 없으면 아마 null이 되는 것 같아요. 에러는 나지 않지만 최초에 "번째 고양이" 으로 나오길래 Try 1:         const [counter, setCounter]  = React.useState(jsonLocalStorage.getItem("counter") || 0); 했더니 0번째 고양이 가라사대라고 나오는군요. 물론 이것도 자연스럽지만 ㅎㅎ   Try 2:  const [counter, setCounter]  = React.useState(jsonLocalStorage.getItem("counter") || 1);   요렇게 해 주니 조금 더 자연스럽게 되었습니다. || 값 처음 알았는데 유용한 기능 같아요 ^^.

function Form() 이 html 처럼 고정적으로 표시되고 있는 거라고 생각했는데요. 매번 console.log(counter) 가 호출되는 걸 보니까,  이벤트가 발생할 때마다 Form()도 호출되서 화면에 새로 그려지고 있는 것 같은데 맞는 걸까요? 

쌤 리액트로 앱 만들수 있는건가요?

한줄이기 때문에 그런 걸까요?  

react에서 새로운 라이브러릴 다운받고 사용할때 자주 일어나는 오류로 알고있습니다..   구글링의 결과 삭제후 재설치를 대부분 권장하시길래, 기본적으로 package-lock.json과 node_modules폴더를 삭제 진행후 npm install 이후 실행하는 것을 몇번을 반복해도 아래와 같이 같은 결과가 나오네요ㅠㅠ 해결책을 아시는 분이 있다면,, 알려주시면 감사드리겠습니다..   Compiled with problems:X ERROR in ./node_modules/fs.realpath/index.js 8:9-22 Module not found: Error: Can't resolve 'fs' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\fs.realpath' ERROR in ./node_modules/fs.realpath/old.js 21:17-32 Module not found: Error: Can't resolve 'path' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\fs.realpath' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false } ERROR in ./node_modules/fs.realpath/old.js 25:9-22 Module not found: Error: Can't resolve 'fs' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\fs.realpath' ERROR in ./node_modules/glob/common.js 13:9-22 Module not found: Error: Can't resolve 'fs' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\glob' ERROR in ./node_modules/glob/common.js 15:11-26 Module not found: Error: Can't resolve 'path' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\glob' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false } ERROR in ./node_modules/glob/glob.js 52:11-26 Module not found: Error: Can't resolve 'path' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\glob' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false } ERROR in ./node_modules/glob/glob.js 54:13-30 Module not found: Error: Can't resolve 'assert' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\glob' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }' - install 'assert' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "assert": false } ERROR in ./node_modules/glob/glob.js 67:11-26 Module not found: Error: Can't resolve 'util' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\glob' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }' - install 'util' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "util": false } ERROR in ./node_modules/glob/sync.js 12:11-26 Module not found: Error: Can't resolve 'util' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\glob' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }' - install 'util' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "util": false } ERROR in ./node_modules/glob/sync.js 14:11-26 Module not found: Error: Can't resolve 'path' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\glob' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false } ERROR in ./node_modules/glob/sync.js 16:13-30 Module not found: Error: Can't resolve 'assert' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\glob' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }' - install 'assert' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "assert": false } ERROR in ./node_modules/node-sass/lib/extensions.js 4:10-27 Module not found: Error: Can't resolve 'os' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\node-sass\lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }' - install 'os-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "os": false } ERROR in ./node_modules/node-sass/lib/extensions.js 5:9-22 Module not found: Error: Can't resolve 'fs' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\node-sass\lib' ERROR in ./node_modules/node-sass/lib/extensions.js 6:11-26 Module not found: Error: Can't resolve 'path' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\node-sass\lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false } ERROR in ./node_modules/node-sass/lib/index.js 4:11-26 Module not found: Error: Can't resolve 'path' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\node-sass\lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false } ERROR in ./node_modules/true-case-path/index.js 5:11-26 Module not found: Error: Can't resolve 'path' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\true-case-path' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false }   -    

1. 이부분에 삼항연산자 왜쓰는건가요? 이미 Skip, Limit를 useState로 관리하면서 초기값을 설정해주었고 getProducts(body)가 호출될때마다 skip,limit은 항상 있었는데 그러면 삼항연산자 부분에서 req.body.limit은 항상 true이니깐 let limit= req.body.limit ? parseInt(req.body.limit): 20; 할필요없이 let limit= parseInt(req.body.limit) 해줘야한다고 생각했었는데요. 2. 이 두방식의 차이점이 있어서 이렇게 하신걸까요??   

프론트에서 이미지를 전달받아서 서버측에서 저장을 할때 uploads폴더에 이미지가 저장되게 했는데  1. img태그에 src속성을 보면 왜 uploads폴더에서 가져오지않고 로컬호스트에서 가져오는지 이해가 가지않습니다. 이미지를 uploads폴더에 저장을 해놨는데 다시 서버에 접근하는 느낌을 잘 모르겠습니다. 그냥 uploads폴더에 있는거 가져다가 쓰면 왜 안되는걸까요?  2. uploads폴더에 이미지를 저장한후에 다시 화면으로 가져오는과정이, uploads폴더에 있는거 서버에 올림 -> 서버에 이미지가 올라와있음 -> 서버측에서 프론트로 올림 이런느낌인걸까요? 그러면 다시 이해가 안가는게 localhost/uploads/이미지 왜 이렇지 않은걸까요..? 만약에 여러폴더에 같은이름으로 이미지가 저장되있다면 폴더명을 명시해줘야하는게 아닌가요ㅠㅠ  

안녕하세요! 상태 강의 8:08초쯤 count에서 값을 1씩 올릴때 +1을 하면 오류가 안생기는데 제가 궁금해서 count ++를 써보니 const로 선언돼서 값을 재할당할 수 없다고 오류가 뜨더라구요!   +와 ++의 차의점을 알 수 있을까요?   감사합니다!   const [count, setCount] = useState(0); const onIncrease = () => { setCount(count + 1); };    

안녕하세요. create react app 강의 19:30초 부분에서 node_modules 파일이 지워졌을 경우 npm i로 다운 받으면 된다고 하셨는데, 뒤에 다른 명령어 추가되는 것 없이 그냥 root 파일위치에서 npm i 만 입력하면 node_modules 파일이 알아서 생성이 되는건가요? 감사합니다! :D 강의 너무 재밌게 잘 듣고있습니다!

   리액트로 로그인을 구현하려 파이어베이스를 설치했는데 사이트를 열려고 하니 오른쪽처럼 오류가 떴습니다  설치도 제대로 했고 firebaseConfig를 만들기 전까진 오류없이 잘 실행됐는데 어떤게 문제일까요?