묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결코드로 배우는 React with 스프링부트 API서버
input box에 데이터 입력후 확인 버튼 누르고 input 데이터 수정하면 오류 발생 ...
안녕하세요 Redux 수업 다 듣고 이해 되지 않아서 따로 프로젝트를 뽑아서 Redux를 연습 하고 있어요...일단 이해는 다된거 같아요...아래 dispatch 하는 부분에서 오류가 뜨네요..먼저 처리 순서가 ... input에 데이터를 입력하고 로그인 버튼을 클릭하고 다시 input에 데이터를 입력하면 오류가 뜨네요cannot assign to read only property 'current' of object '# object '버튼 클릭하는 부분에 dispatch하는 내용을 넣었구요..구글에는 깊은 복사 뭐 이런거 있던데 그거랑 관련 없는거 같구... ===================================리듀스 기본을 알면 저 문제 해결될꺼라는 어떤분의 답변이 야속하네요 ... 코드 시작=============================import { useState } from "react"; import { useDispatch } from "react-redux"; import {login} from "../slices/loginSlice" const initState = { email:'', password:'' } function LoginComponent(props) { const [loginParam, setLoginParam] = useState({...initState}) const disPatch = useDispatch() const handleChange = (e)=> { loginParam[e.target.name] = e.target.value setLoginParam({...loginParam}) } const handleLoginClick = (e)=>{ console.log(".......") disPatch ( login(loginParam) ) } const handleLogoutClick = (e)=>{ disPatch( login(initState) ) } return ( <div> <div className="flex flex=nowrap gap-x-8 place-content-center "> <div> <div> login </div> <div> <input className="text-base w-300 p-6 rounded-r border border-solid border-neutral-500 shadow-md" name="email" type ={'text'} value={loginParam.email} onChange ={handleChange}> </input> </div> <div> <input className="text-base w-300 p-6 rounded-r border border-solid border-neutral-500 shadow-md" name="password" type={'password'} value={loginParam.password} onChange={handleChange} > </input> </div> <div> <button className = "rounded p-4 w-36 bg-blue-500 text-xl text-white" onClick={handleLoginClick} > Login.. </button> </div> </div> <button onClick={handleLogoutClick}> logout </button> </div> </div> ) } export default LoginComponent; =============================
-
미해결코드로 배우는 React with 스프링부트 API서버
Refresh Token 만료시 로그아웃 및 페이지 이동 처리
Refresh Token마저 만료되었을때 Todo 또는 Product 메뉴를 누르면 자동으로 로그아웃 및 메인페이지로 이동하려고 합니다. 강의 내용대로 쿠키 member를 삭제하여 로그아웃 처리는 하였으나 '/' Path로 이동은 안되어서 방법을 찾지 못하여 질문드립니다. 추가로 토큰만료시 jwtUtil의 beforeRes에서 쿠키를 삭제하였으나 todo 페이지가 호출 및 페이지 이동이 안되어서 todo 페이지 나오기전에 페이지 이동을 하고싶습니다. ListComponent의 useEffect에 hook을 사용했으나 실제로 이동안 되고 jwtUtil, todoAPI 는 모두 규칙 위반으로 hook이나 navigate를 사용할수 없더라구요. 어떻게 해야할까요..
-
미해결코드로 배우는 React with 스프링부트 API서버
세션 8장 마무리 후 product 에서 상품 이미지 깨짐 현상
안녕하세요 8장 까지 마무리 하고 product 이미지 가 출력되지 않는 현상을 봤습니다. 확실한건 이미지 링크는 header에 Authorization에 bearer token이 없어서 출력되지 않는거 같아요..일단 shouldNotFilter에 if(path.startsWith("/api/products/view")) { return true;}해서 보이게 했긴해지만 결국에는 링크도 토큰 인증 처리해야겠죠?
-
미해결코드로 배우는 React with 스프링부트 API서버
Redux에서 <provider >사용시 오류 -Cannot read properties of undefined (reading ‘getState’)
안녕하세요 열심히 강의 듣고 있습니다. 거의 중 후반까지 왔어요. jwt 강의 까지 듣고 많은걸 알게 되어서 많이 기쁩니다. 자신감이 많이 생겼네요.(참고로 java는 잘 못해서 kotlin으로 다 컨버팅 했네요 .... )https://github.com/justkjy/apiserver 컨버팅 작업 하니깐 2번 듣게 되고 정확하게 이해가 되네요 ...== 본론 === 리덕스 툴킷 설정 강의에서 알려주신 코드를 따라 쳤는데 에러가 났어요..const root = ReactDOM.createRoot(document.getElementById('root')); // root.render( // <Provider strote={store}> // <App /> // </Provider> // ); root.render( <App /> );Cannot read properties of undefined (reading ‘getState’) 그래서 provider를 지워라고 하네요...이게 맞나요??인프런 이슈 정보에도 지워라고 하긴 하는데 ===========https://www.inflearn.com/community/questions/36034/%EC%A0%9C%EB%A1%9C%EC%B4%88%EB%8B%98-%EC%BD%94%EB%93%9C%EB%A5%BC-%EB%94%B0%EB%9D%BC%EC%84%9C%EB%8F%84-%EA%B7%B8%EB%8C%80%EB%A1%9C-%EB%B3%B5%EC%82%AC%ED%96%88%EB%8A%94%EB%8D%B0-%EC%9D%B4-%EB%AC%B4%EC%8A%A8%EC%97%90%EB%9F%AC%EC%9D%B8%EA%B0%80%EC%9A%94-%EB%AA%87%EC%9D%BC%EC%A7%B8-%ED%95%B4%EA%B2%B0-%EB%AA%BB%ED%95%98%EA%B3%A0-%EC%9E%88%EC%8A%B5%EB%8B%88%EB%8B%A4================================= 저렇게 하면 강의 따라 가는데 문제가 없을까요?리덕스 툴킷 설정
-
해결됨코드로 배우는 React with 스프링부트 API서버
[스프링부트 3.2] RefreshToken 발급시 파라미터 오류
스프링부트 3.2 버전인데 APIRefreshController의 refresh의 파라미터중 String refreshToken만 적으면 -parameter 오류가 나네요. 인텔리제이에서 gradle로 빌드하거나 어노테이션에 이름을 붙여 적으니 잘 동작합니다. 식겁했습니다..
-
미해결코드로 배우는 React with 스프링부트 API서버
ModelMapper 와 entityToDto 차이
강사님의 강의에서 엔티티를 DTO로 변환할때 2가지 방식을 다 보여주셨는데 , 모델 매퍼로 엔티티 -> DTO 변환방식과 entityToDto 메소드 처럼 직접 개발자가 명시해줘서 엔티티를 DTO로 변환하는 방식의 차이점과 선택기준이 궁금합니다!!
-
미해결코드로 배우는 React with 스프링부트 API서버
섹션1의 첫번째강의에서 WebStorm으로 프로젝트 진행할때의 질문
WebStorm으로 작업하신다고 하시고 프로젝트 처음에 불러오는 과정이 안나와서 짐작으로 frontend/ch02_start폴더를 만들고 cmd콘솔에서 npm install react-router-dom진행했거든요. 근데 강사님이 실습하는 폴더구조가 다르거든요? 이 과정이 생략되어있어서.. src폴더, public폴더가 자동으로 안생기는데 임의로 src폴더 만들고 그냥 하는건가요? 중간 과정 생략된걸 짐작으로 따라하려다보니 확신이 안들어서 여쭤봅니다
-
미해결코드로 배우는 React with 스프링부트 API서버
writer content
서버 쪽 이랑 이름이 다르면 데이터 바인딩이 안되지 않나요?
-
해결됨코드로 배우는 React with 스프링부트 API서버
querydsl 에러
(사진)
-
미해결코드로 배우는 React with 스프링부트 API서버
안녕하세요 로그인 비밀번호 관리 질문드려용....
안녕하세요 로그인 질문 드립니다. 강의와 크게 상관은 없지만 강의 듣다가 궁금한게 생겨서요..현재 시큐리티 강의 듣고 있습니다. DB에 암호화해서 저장하는건 이해하였습니다. 사용자가 암호를 잊었을때 시큐리티 암호 같은 방식은 암호 재발급 하면 되지만 복원 하는건 힘들어 보이네요 .예를 들어서 이런 방식입니다. 암호의 3째자리 까진 알려주는 방식 암호의 흰트를 입력하면 가입한 이메일에 암호를 보내준다던지...ms sqlserver에는 암호 복원 기능 있는거 같던데 ...암튼 강의듣다가 생각나서 질문 드려요
-
해결됨코드로 배우는 React with 스프링부트 API서버
router 이동 질문 드립니다.
안녕하세요. 열심히 강의 듣고 있습니다. ... react에서 router 이동에 궁금한거 잇어서 질문 드려요1root 의 라우터에는 TodoIndex와 ProductsIndex 2개의 페이지가 있습니다. ............ 생략 ..............{ path: "todo", element: ...<TodoIndex/>..., children: todoRouter() }, { path: "products", element: ... <ProductsIndex/>..., children: productsRouter() }2.TodoIndex의 child은 todoRoter이고 add의 TodoAdd와 mdify의 TodoModify가 있습니다. { path: "add", element: ...<TodoAdd/>... }, { path: "modify/:tno", element: ...<TodoModify/>... }ProductsIndex의 child은 productsRouter이고 add의 ProductList와 mdify의 ProductModify가 있습니다. 현재 ../products/add 에 있다고 했을때 add 페이지에 있는 버튼을 누르면 ../todo/add 로 점프해서 이동하려면 어떻게 navigate 해야되나요? todo/add에서 todo/modify 이런식의 같은 폴더 레벨이면 쉽게 이동되던데 ...
-
미해결코드로 배우는 React with 스프링부트 API서버
Product 컨트롤러 api 결과값 리턴 질문
상품 등록이나 수정을 하고나서return Map.of("result", "Success")이렇게 리턴해주셨는데실무에서 이런 방식을 많이 사용하나요 아니면 교육목적이기 때문에 조금 러프하게 하신건가요??이번 강의를 보고 실무와 가깝게 프로젝트를 진행하고 싶은데 이렇게 Map에 간단하게 리턴할지 아니면 api마다 매번ResponseEntity에 Http Status Code 담아 리턴해야 할지 기준을 모르겠습니다.제 목적에 맞게 하려면 어떤 방식으로 api 결과를 리턴해줘야 할까요??
-
미해결코드로 배우는 React with 스프링부트 API서버
파일 업로드 관련 질문
[파일 업로드 설정과 확인] 강의에서 DB에 아주 중요한게 아니라면 성능적인 부분때문에 DB에 파일을 저장하면 안된다고 하셨습니다. 클라우드를 이용하는게 일반적이라고 생각합니다만 한가지 궁금한게 있습니다. 만약 게시글이라는 엔티티에 대표 사진이 딱 한장 들어갈 수 있다고 한다면 아래와 같은 순서로 구현할 수 있겠다는 생각이 들었습니다. 이런 방법에 대해 어떻게 생각하시나요?? 애플리케이션 단에서 이미지 등록 -> 이미지 base64 인코딩 -> 인코딩 된 긴 문자열을 압축 -> 압축된 문자열을 RDB(MYSQL) 게시글 테이블에 게시물 대표이미지 (longtext 형)에 저장.조회할때는 애플리케이션 단에서 별도로 압축된 문자를 원래 인코딩 된 문자열로 디코딩하는 로직 필요하겠지만 비용이 크지 않다고 생각했습니다.
-
미해결코드로 배우는 React with 스프링부트 API서버
PageResponseDTO 오
TodoServiceImpl에서 PageResponseDTO<TodoDTO> getList 부분에서 오류가 발생합니다. PageResponseDTO혹시 PageResponseDTO 에서 제가 놓친 부분이 있을까요??
-
해결됨코드로 배우는 React with 스프링부트 API서버
함수선언과 화살표 함수
안녕하세요 강사님 강의에서 react는 대부분 함수로 선언하지 않고,화살표 함수를 선언해서 사용해주고 계시는데요, 함수가 아닌 화살표 함수를 사용하는 이유가 따로 있는지 궁금합니다.함수를 사용하지 않는 이유가 있다면 그 이유도 설명해주시면 감사하겠습니다.
-
미해결코드로 배우는 React with 스프링부트 API서버
리액트 부트연결
리액트랑 부트 연결하는 방법 axios까지 코드입력했는데 cmd라던지 연동하는 방법은 안알려주시나요?
-
미해결코드로 배우는 React with 스프링부트 API서버
node 설지시 오류 입니다.
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 버전은 이렇게 깔려있습니다. 재설치 해도 여전히 오류가 발생합니다 ㅜㅠ 어떻게 해결해야 할까요?
-
미해결코드로 배우는 React with 스프링부트 API서버
책없이 강의듣는중입니다.
저는 책이 없이 강의만을 통해 학습중입니다. 강의 중간중간 코드를 복사해서 오시더라구요 ~ js같은 경우는 따라치는것에 대해 어려운 부분이 있는데 혹시 어쩔 수 없는 부분인 걸까요 ?
-
미해결코드로 배우는 React with 스프링부트 API서버
tno값 초기화
제목 그대로 tno값은 어떻게 초기화 시키나요? testDelete 함수를 이용해서 삭제후 다시 testInsert 함수를 이용해서 1 ~ 100까지 만들고 싶은데, tno값은 1부터 시작하는게 아닌, 기존의 tno값부터 1씩 증가됩니다.
-
해결됨코드로 배우는 React with 스프링부트 API서버
api repository 폴더 안에 있던 search 폴더가 안보여요
안녕하세요 Section2-5 강의 "Querydsl설정하기" 강의에서는 분명repository 폴더 안에 search 폴더가 있었는데 강의를 듣다보니 강사님 화면에서는 search 폴더가 어느새 사라져있습니다.. 강의화면만 보고 어디있는지 알수가 없어서요ㅠ 어느 폴더로 이동해갔는지 알려주시면 감사하겠습니다. 그리고 강사님 화면을 보다가 발견했는데 config 폴더 아래에 RootConfig 파일이 새로 생겨있고,깃 파일을 확인해보니 modelMapper를 사용하여 DTO 와 entity를 변환해주고 있는데,앞에 강의에서 제가 듣기론 funciton을 이용해서 변환해주고RootConfig 파일을 따로 만든 기억이 없습니다ㅠ교육 뒷 부분에 새로 생기는 건가요?