묻고 답해요
137만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결코드로 배우는 React with 스프링부트 API서버
토큰쿠키저장에 대해서 질문드립니다.
강의에서 토큰을 보관하기에 보안에도 좋고 적절한 곳이 쿠키라고 말씀해주셨는데 보통 쿠키에 저장을 많이 하는편일까요?내년 하반기에 크롬에서 쿠키차단예정을 하고 있다고 들어서 왠지 다른 대체제가 필요할거같은데 쿠키를 사용 못하게 된다면 보통 클라이언트에서는 로컬스토리지 이외에는 대체제가 없는지 궁금합니다.
-
미해결코드로 배우는 React with 스프링부트 API서버
Product게시판 이미지에 대해서
토큰적용 후 발생하는 현상에 대해서 질문드립니다.Product게시판에 이미지에 경우, 아래와 같이 표시가되는데요 이때 토큰을 헤더에 설정 되어있지않기떄문에 {"error":"ERROR_ACCESS_TOKEN"}가 발생합니다.jwtAxios를 사용하여 처리는 가능할듯한데 문제는 결과값이 문자열로 되돌아와서 이미지표시가 좀 힘들어보이고 어떻게 처리해야할지 모르겠습니다.이런경우 어떠한방식으로 처리하는게 좋을까요?src={`${host}/api/products/view/s_${product.uploadedFileNames[0]}`}
-
미해결코드로 배우는 React with 스프링부트 API서버
강의 순서 및 누락 건 확인
안녕하세요 강의 진행 중에[로그인 적용 확인] -> [로그아웃 처리] 를 보다 보니 중간에 쿠키 설정이 다되어 있어서뭔가 순서가 뒤바뀐 건가요...
-
미해결코드로 배우는 React with 스프링부트 API서버
로그인 적용확인 회차에대해서
위에 내용하고 겹치는듯한데 맞나요?... 로그인 적용확인 회차부터해서 뭔가 내용이 이어지질 않는듯한 느낌이듭니다....
-
해결됨코드로 배우는 React with 스프링부트 API서버
강의 영상에 혹시 빠진게 있나요??
조금 전 있던 질문글 이랑 동일한 에러가 발생해서 코드 확인했더니 TodoController 클래스에서 put, delete를 구현하지 않았더라구요. 제가 뭔가 빼먹었나보다 하고 소스코드 찾아보니까 소스코드에는 있길래 소스코드 참고해서 해결했거든요. 그런데 그 다음에도 RootConfig 클래스를 만드는거나, CustomServletConfig 클래스에 addCorsMappings 메서드를 추가하는 과정을 소스코드 보면서 해결했었는데, 혹시 강의 영상에는 소스코드에 있는 내용 전부가 작성되는 과정이 나오는건 아닌걸까요? 제가 영상보다 코드치다 하면서 실수로 넘어간 부분이 있을수도 있는데, 강의 영상에는 빠져있고, 소스코드는 올라와 있는 부분들이 있는것 같아서요. 한번 확인 부탁드려도 될까요..? 제 착오였다면 죄송합니다 ㅠㅠ
-
미해결코드로 배우는 React with 스프링부트 API서버
cors 설정에도 불구하고 405 에러 스프링부트 3.16
안녕하세요 영상강의를 보며 클론 코딩하면서 하나씩 배우고 있는데백단에서 Cors 설정을 해주었음에도 불구하고 (강의 섹션 3 수정/삭제 처리 진행 중 )@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("*").allowedMethods("HEAD", "GET", "POST", "PUT", "DELETE", "OPTIONS").maxAge(300).allowedHeaders("Authorization", "Cache-Control", "Content-Type");}여전히 호출 불가 상태로 있는데 원인을 모르겠습니다. 혹시나 몰라 todoApi.js 파일을 제공된 소스파일로 엎어쳐서 진행을 했는데도 불구하고 말이죠..
-
미해결코드로 배우는 React with 스프링부트 API서버
연관관계 맵핑에 대해서 질문드립니다.
@ElementCollection와 @EntityGraph사용법에 대해서 잘 숙지 하였습니다. 한가지 질문이 있습니다. JPA사용시 일반적으로 쓰이는 @OneToMany, @ManyToOne, @ManyToMany를 대신해서 @ElementCollection으로대체하여 사용이 가능할까요?왠지 될거같은생각이 들긴하는데....
-
미해결코드로 배우는 React with 스프링부트 API서버
모달이 뜨질않습니다....
모달이 작동하지않아서 혹시 몰라서 카페에 올라와있는 소스코드를 덮어씌어도 모달이 뜨질않습니다.. 분명 데이터는 등록되는데 result값도 제대로 들어오는데도 불구하고 뜨질않더라구요.. 아래코드는 카페에 올라와있는 코드를 제 프로젝트에 인식시켜본 코드입니다. import React, {useState} from 'react'; import ResultModal from "../common/ResultModal"; import {postAdd} from "../../api/todoApi"; import userCustomMove from "../../hooks/userCustomMove"; const initState = { title:'', content: '', dueDate: '' } const AddComponent = () => { const [todo, setTodo] = useState({...initState}) const [result, setResult] = useState(null) //결과 상태 const {moveToList} = userCustomMove() //useCustomMove 활용 const handleChangeTodo = (e) => { todo[e.target.name] = e.target.value setTodo({...todo}) } const handleClickAdd = () => { //console.log(todo) postAdd(todo) .then(result => { console.log(result) setResult(result.TNO) //결과 데이터 변경 setTodo({...initState}) }).catch(e => { console.error(e) }) } const closeModal = () => { setResult(null) moveToList() //moveToList( )호출 } return ( <div className = "border-2 border-sky-200 mt-10 m-2 p-4"> {/* 모달 처리 */} {result ? <ResultModal title={'Add Result'} content={`New ${result} Added`} callbackFn={closeModal}/>: <></>} <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-500 shadow-md" name="title" type={'text'} value={todo.title} onChange={handleChangeTodo} > </input> </div> </div> <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">CONTENT</div> <input className="w-4/5 p-6 rounded-r border border-solid border-neutral-500 shadow-md" name="content" type={'text'} value={todo.content} onChange={handleChangeTodo} > </input> </div> </div> <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">DUEDATE</div> <input className="w-4/5 p-6 rounded-r border border-solid border-neutral-500 shadow-md" name="dueDate" type={'date'} value={todo.dueDate} onChange={handleChangeTodo} > </input> </div> </div> <div className="flex justify-end"> <div className="relative mb-4 flex p-4 flex-wrap items-stretch"> <button type="button" className="rounded p-4 w-36 bg-blue-500 text-xl text-white " onClick={handleClickAdd} > ADD </button> </div> </div> </div> ); } export default AddComponent;
-
미해결코드로 배우는 React with 스프링부트 API서버
에러가 나지만 작동은합니다.
아래와 같은 에러가 발생하여 application.properties를 application.yml로 바꾸어봤지만 같은에러가납니다.***************************APPLICATION FAILED TO START***************************Description:Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured.Reason: Failed to determine a suitable driver classAction:Consider the following: If you want an embedded database (H2, HSQL or Derby), please put it on the classpath. If you have database settings to be loaded from a particular profile you may need to activate it (no profiles are currently active). 아래 코드는 application.yml내용입니다.spring: datasource: driver-class-name: org.mariadb.jdbc.Driver url: jdbc:mariadb://localhost:3306/apidb username: apidbuser password: apidbuser jpa: hibernate: ddl-auto: update properties: hibernate: format_sql: true show-sql: true logging: level:debug아래코드는 build.gradle 내용입니다. buildscript { ext { queryDslVersion = "5.0.0" } } plugins { id 'java' id 'org.springframework.boot' version '3.0.13' id 'io.spring.dependency-management' version '1.1.4' } group = 'org.mail' version = '0.0.1-SNAPSHOT' java { sourceCompatibility = '17' } configurations { compileOnly { extendsFrom annotationProcessor } } repositories { mavenCentral() } dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' implementation 'org.springframework.boot:spring-boot-starter-web' compileOnly 'org.projectlombok:lombok' testCompileOnly'org.projectlombok:lombok' developmentOnly 'org.springframework.boot:spring-boot-devtools' runtimeOnly 'org.mariadb.jdbc:mariadb-java-client' annotationProcessor 'org.projectlombok:lombok' testAnnotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-boot-starter-test' implementation "com.querydsl:querydsl-jpa:${queryDslVersion}:jakarta" annotationProcessor( "jakarta.persistence:jakarta.persistence-api", "jakarta.annotation:jakarta.annotation-api", "com.querydsl:querydsl-apt:${queryDslVersion}:jakarta") } tasks.named('bootBuildImage') { builder = 'paketobuildpacks/builder-jammy-base:latest' } tasks.named('test') { useJUnitPlatform() } compileJava.dependsOn('clean')맨위에 에러 난 후 이하 반복적인 에러가 발생하지만 값을 가져오는데는 이상이없습니다.프론트에서 호출해도 정상적으로 데이터가 호출됩니다.그래서 quertdsl에 관한내용을 지우고 해봤는데 에러가 사라졌습니다. 혹시 querydsl 에 관한 이슈가 있는걸까요? 검색을 해봤지만 발견할 수가 없었습니다. java.lang.NullPointerException: Cannot read field "generatedClass" because "data" is null
-
해결됨처음 만난 리덕스(Redux)
Ducks 패턴에 대해서
안녕하세요. Ducks패턴 강의를 방금 들었습니다.실습에서 todoDuck.js에 todo 컴포넌트에서 사용되는 action만을 넣었는데,duck file은 컴포넌트로 구분하여 만드는것인가요??
-
해결됨NodeFull Stack 개발 가이드
강의 자료
안녕하세요 수업 잘 듣고 있습니다!그런데 노션에 올려주신 수업자료 수강생들에게만 공개하신다고 하셨는데 제가 학습방법까지 들었는데 어떻게 접근하는지를 잘 모르겠어서 질문드립니당!
-
미해결처음 만난 리덕스(Redux)
상태관리 불변성 질문드립니다
안녕하세요 소플님 리액트와 리덕스툴킷을 같이 사용 할때 궁금한 점이 있어 질문 드립니다상태관리에서 데이터를 계속 해서 추가 할 때 불변성을 유지하나요?상태관리에서 데이터를 수정, 삭제 할 때 불변성을 유지하나요?
-
해결됨처음 만난 리덕스(Redux)
getDefaultMiddleware 질문 드립니다
const store = configureStore({ reducer:rootReducer, middleware: (getDefaultMiddleware)=>{ const defaultMiddleware = getDefaultMiddleware(); return [...defaultMiddleware]; } });강사님 마지막 실습코드에서여기서 기본미들 웨어를 가져 오는 이유를 잘 모르겠습니다
-
해결됨처음 만난 리덕스(Redux)
강사님 질문이 있어요
serializableCheck: { ignoredActions: [ REHYDRATE, FLUSH, PAUSE, PERSIST, PURGE, REGISTER, ], },강사님 마지막 실습 코드에서 질문드려요 여기 코드는 검색을 하니 직렬화,역질렬화 검사 할때 사용 하는거라는데 마지막 실습 코드에서는 어떻게 사용 되는 건가요? 어떤 연관성? 이 있는 건가요?
-
미해결처음 만난 리덕스(Redux)
저질문이있습니다 .
react랑 redux 연결해서 화면 처음 띄우고 있는데 이처럼 강의랑 똑같이 코딩했는데,화면이 나오질않고있습니다. ㅠ 뭐가 문제일까요?
-
해결됨처음 만난 리덕스(Redux)
createStore()와 combineReducers()에 대한 질문
각각의 todoReducer, memoReducer에 initialState를 전달하는 방법말고 createStore() 함수의 2번째 인자로 preloadedState를 전달하는 방법은 없나요?const preloadedState = { todo: initialTodoState, memo: initialMemoState, }; const store = createStore( rootReducer, preloadedState, applyMiddleware(loggerMiddleware), );(추가) 위와 같이 작성 후(각 reducer의 초기 상태 전달 안함), 애플리케이션이 동작하지 않더라구요..!(추가) 해서 GPT에게 물어봤습니다! 그랬더니 답변으로이 방법을 사용하면 preloadedState를 통해 전체 앱의 초기 상태를 한 곳에서 관리할 수 있어 유용합니다. 하지만 이 방법은 각 리듀서에서 초기 상태를 설정하는 방법과 병행해서 사용해야 합니다. 왜냐하면 preloadedState는 앱이 시작될 때 한 번만 사용되고, 그 이후에는 각 리듀서에서 정의한 초기 상태가 사용되기 때문입니다.해서 각 reducer에도 각각의 initialState 배열을 전달하니 동작은 하긴 하는데, 이럴꺼면 굳이 preloadedState를 전달하는 의미가 없는 것 같아서 조금 헷갈리네요..!결론적으로 질문은 아래와 같습니다..!1) 각 reducer에게 초기 상태를 전달하지않고 combine한 reducer를 createStore에 전달할 때, 초기 상태를 전달해서 사용하는 방법이 있나요?
-
해결됨처음 만난 리덕스(Redux)
action creator에 관해서 질문이 있습니다!
const ACTION_TYPE_ADD_TODO = "ADD_TODO"; const ACTION_TYPE_REMOVE_TODO = "REMOVE_TODO"; const ACTION_TYPE_REMOVE_ALL = "REMOVE_ALL"; function addTodoActionCreator(text) { return { type: ACTION_TYPE_ADD_TODO, text, }; } function removeTodoActionCreator() { return { type: ACTION_TYPE_REMOVE_TODO, }; } function removeAllActionCreator() { return { type: ACTION_TYPE_REMOVE_ALL, }; }위와 같은 actionCreator들을 하나의 함수로 묶어서 쓰는 경우는 잘 없나요? 예를 들어 아래처럼요!function actionCreator(type, payload = {}) { return { type, ...payload, }; }정답은 없겠지만 뭔가 위에 3개로 분리되어있는 것도 하나로 표현하면 좋지 않을까 싶어서 여쭤봅니다!
-
미해결처음 만난 리덕스(Redux)
안녕하세요~ 혹시 pdf파일은 따로 제공안되나요?
pdf파일로도 보고싶은데 따로 제공안되나요?
-
미해결처음 만난 리덕스(Redux)
안녕하세요! RTK Query 에 대해 궁금합니다
RTK Query 에 대한 강의도 추후에 올려주실 생각 있으신가요 ??RTK Query 에 대한 한국어 자료가 별로 없네요 ㅠ
-
미해결
redux-toolkit에서 createAsyncThunk 오류
안녕하세요 한참 검색하다 해결을 못해서 질문합니다.현재 vite를 통해 react를 돌리고 있는데 redux-toolkit으로 상태관리를 하고 있습니다.그러던 중 비동기 store를 만들기 위해 createAsyncThunk를 사용했는데컴퍼넌트내에서 호출 시Actions must be plain objects. Use custom middleware for async actions.다음과 같은 오류가 발생했습니다. 그래서 console에 값을 찍어보니 type과 action 대신creatorAction이라는 함수가 결과 값으로 나왔습니다.호출 시에 '변수명()'를 붙여주었는데도 다음과 같은 결과를 받았는데 해결 방안이 있는지 궁금합니다.(추가로 create-react-app으로 설치한 다른 폴더에서는 잘 작동됩니다.)