172만명의 커뮤니티!! 함께 토론해봐요.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
선생님 포스트 나 댓글 삭제기능은 어떤식으로 해야될까요 따로 강의는 없겟죠? ㅠ
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
이미지 지연 로딩에서 picture tag를 사용하여 webp가 지원되지 않는 브라우저인 경우 jpg로 로딩되도록 previousSibling을 사용하셨는데 picture tag 안에 source tag가 두 개 이상인 경우에는 어떻게 해야하나요? 반복문을 돌려야 하는 것인가요?
해결됨
자바 ORM 표준 JPA 프로그래밍 - 기본편
안녕하세요. [ 프록시와 연관관계 관리 - orphanRemovel ] 내용에서 질문드립니다. orphanRemovel = false, cascade = ALL 로 설정한 상태에서 @OneToMany 로 설정된 컬렉션 내의 값을 제거하면, cascade 옵션에 의해 update 쿼리가 나갈 때 컬렉션에서 제거된 원소가 같이 삭제되어야 하는게 아닌가요? 위 내용이 틀렸다면 cascade 의 delete 쿼리는 부모 엔티티 '자체'가 사라졌을 때만 컬렉션 내의 자식 엔티티들에게 전이되는 걸까요?? 추가로, 고아 객체 제거 기능은 cascade 와 마찬가지로, 연관관계의 주인이 아닌 컬럼에서도 사용이 가능한건지도 궁금합니다! 내용이 잘 이해되질 않아 질문이 다소 두서없는 점 죄송합니다ㅜ
해결됨
풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
[plugin:vite:react-babel] D:\react_01\shopping-mall\src\routes.tsx: Unterminated string constant. (14:14) 17 | } D:/react_01/shopping-mall/src/routes.tsx:14:14 12 | element: <GlobalLayout />, 13 | children: [ 14 | { path: 'D:\', element: <DynamicIndex />, index: true}, | ^ 15 | { path: 'D:\products\:id', element: <DynamicId />, }, 16 | ] at instantiate (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:67:32) at constructor (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:364:12) at TypeScriptParserMixin.raise (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:3365:19) at Object.unterminated (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:2333:20) at readStringContents (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:2065:16) at TypeScriptParserMixin.readString (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:3244:9) at TypeScriptParserMixin.getTokenFromCode (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:2964:14) at TypeScriptParserMixin.getTokenFromCode (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:7267:18) at TypeScriptParserMixin.getTokenFromCode (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:9752:18) at TypeScriptParserMixin.nextToken (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:2451:10) at TypeScriptParserMixin.next (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:2366:10) at TypeScriptParserMixin.eat (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:2371:12) at TypeScriptParserMixin.parseObjectProperty (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:12126:14) at TypeScriptParserMixin.parseObjPropValue (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:12154:100) at TypeScriptParserMixin.parseObjPropValue (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:9482:18) at TypeScriptParserMixin.parsePropertyDefinition (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:12083:17) at TypeScriptParserMixin.parseObjectLike (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11993:21) at TypeScriptParserMixin.parseExprAtom (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11464:23) at TypeScriptParserMixin.parseExprAtom (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:7239:20) at TypeScriptParserMixin.parseExprSubscripts (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11171:23) at TypeScriptParserMixin.parseUpdate (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11153:21) at TypeScriptParserMixin.parseMaybeUnary (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11127:23) at TypeScriptParserMixin.parseMaybeUnary (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:9590:20) at TypeScriptParserMixin.parseMaybeUnaryOrPrivate (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10956:61) at TypeScriptParserMixin.parseExprOps (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10962:23) at TypeScriptParserMixin.parseMaybeConditional (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10937:23) at TypeScriptParserMixin.parseMaybeAssign (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10895:21) at TypeScriptParserMixin.parseMaybeAssign (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:9529:20) at D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10863:39 at TypeScriptParserMixin.allowInAnd (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:12640:12) at TypeScriptParserMixin.parseMaybeAssignAllowIn (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10863:17) at TypeScriptParserMixin.parseExprListItem (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:12380:18) at TypeScriptParserMixin.parseExprList (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:12352:22) at TypeScriptParserMixin.parseArrayLike (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:12240:26) at TypeScriptParserMixin.parseArrayLike (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:8976:24) at TypeScriptParserMixin.parseExprAtom (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11455:23) at TypeScriptParserMixin.parseExprAtom (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:7239:20) at TypeScriptParserMixin.parseExprSubscripts (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11171:23) at TypeScriptParserMixin.parseUpdate (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11153:21) at TypeScriptParserMixin.parseMaybeUnary (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11127:23) at TypeScriptParserMixin.parseMaybeUnary (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:9590:20) at TypeScriptParserMixin.parseMaybeUnaryOrPrivate (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10956:61) at TypeScriptParserMixin.parseExprOps (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10962:23) at TypeScriptParserMixin.parseMaybeConditional (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10937:23) at TypeScriptParserMixin.parseMaybeAssign (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10895:21) at TypeScriptParserMixin.parseMaybeAssign (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:9529:20) at D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10863:39 at TypeScriptParserMixin.allowInAnd (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:12640:12) at TypeScriptParserMixin.parseMaybeAssignAllowIn (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10863:17) at TypeScriptParserMixin.parseObjectProperty (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.j 라고 코드 에러낫구요 이런 상황입니다 1화 앱입니다까지 햇고 그뒤로 product 페이지 만드는데서안되네요 오늘 구매햇구요 토씨 하나 안틀리고 클라이언트 환경세팅 9:02까지왔습니다 에러로 안됩니다/ 반품해도될까요? window 환경입니다 지금강의하신것은 mac 으로하시는것으로보입니다만 제환경에서는 안될것같군요 원활한 해결책을 보고 환불을 결정하겟습니다
해결됨
실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화
안녕하세요 강의 완강 후 따로 프로젝트를 만들어 보던 중 궁금한 게 생겨서 질문 드립니다. PostMapping으로 등록할 때 CreateRequest라는 별도의 클래스를 만들어 주어서 파라미터로 받았는데 이 CreateRequest안에 List를 받아야 할 경우가 있다면 어떻게 해줘야 하는지 잘 모르겠습니다. Product 클래스 입니다. Module 클래스 입니다. 하나의 Product에 여러 개의 Module이 들어갈 수 있기 때문에 ProductModule 클래스를 만들어줬습니다. 이러한 경우에서 Product를 등록할 때 아래와 같이 넘겨주고 싶으면 CreateProductRequest 에서 List를 어떤식으로 받아줘야 하나요? 아래와 같이 해봤는데 잘 안되는 것 같아서요...
미해결
실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화
회원조회api 영상의 5:40초쯤 하신 말씀입니다. 근데 이 말이 무슨말인지 잘 모르겠어요 왜 의존관계가 나간다고 표현하시는 거죠? json으로 출력할때만 출력하지 않는것이 왜 의존관계가 나가는일인건가요?
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
짹짹 버튼을 눌렀을 때, 처음 클릭 시에만 해당 Input이 초기화 되고, 그 뒤로는 초기화 되지 않는 오류입니다. useEffect가 addPostDone 이 바뀔 때 마다 작동이 되어야 하는데, Redux Devtool에서는 분명 변경이 되었음에도 , PostForm에서 변경이 없는걸로 감지가 됩니다. PostAction export const ADD_POST_REQUEST = 'ADD_POST_REQUEST'; export const ADD_POST_SUCCESS = 'ADD_POST_SUCCESS'; export const ADD_POST_FAILURE = 'ADD_POST_FAILURE'; const addPostRequestAction = (data) => ({ type: ADD_POST_REQUEST, data, }); export { addPostRequestAction, }; post.js (reducer) import shortId from 'shortid'; const dummyPost = (data) => ({ id: shortId.generate(), content: data, User: { id: 1, nickname: 'admin', }, Images: [], Comments: [], }); const reducer = (state = initialState, action) => { switch (action.type) { case ADD_POST_REQUEST: console.log('ADD_POST_REDUCER'); return { ...state, addPostLoading: true, addPostDone: false, addPostError: null, }; case ADD_POST_SUCCESS: return { ...state, mainPosts: [dummyPost(action.data), ...state.mainPosts], addPostLoading: false, addPostDone: true, }; case ADD_POST_FAILURE: return { ...state, addPostLoading: false, addPostError: action.error, }; default: return state; } }; ==Redux-Saga=== index.js(rootSaga) import { all, fork } from 'redux-saga/effects'; import postSaga from './post'; import userSaga from './user'; export default function* rootSaga() { yield all([ fork(postSaga), fork(userSaga), ]); } postSaga import { all, fork, takeLatest, put, delay } from 'redux-saga/effects'; import axios from 'axios'; import { ADD_POST_REQUEST, ADD_POST_SUCCESS, ADD_POST_FAILURE, } from '../reducers/Actions/post'; function* addPostRequest(action) { try { // const result = yield call(addPostAPI,action.data) delay(1000); yield put({ type: ADD_POST_SUCCESS, data: action.data, }); } catch (err) { yield put({ type: ADD_POST_FAILURE, error: err.response.data, }); } } function* watchAddPost() { yield takeLatest(ADD_POST_REQUEST, addPostRequest); } export default function* postSaga() { yield all([ fork(watchAddPost), ]); } ==Component== PostForm.js import { useCallback, useRef, useEffect, useState } from 'react'; import { Form, Input, Button } from 'antd'; import { useDispatch, useSelector } from 'react-redux'; import { addPostRequestAction } from '../reducers/Actions/post'; const PostForm = () => { const { imagePaths, addPostLoading, addPostDone } = useSelector((state) => state.post); const [text, setText] = useState(''); const dispatch = useDispatch(); useEffect(() => { if (addPostDone) { setText(''); } }, [addPostDone]); const onSubmit = useCallback(() => { dispatch(addPostRequestAction(text)); }, [text]); const onChangeText = useCallback((e) => setText(e.target.value), []); return ( <Form style={{ margin: '10px 0 20px' }} encType="multipart/form-data" onFinish={onSubmit}> <Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder="어떤 신기한 일이 있었나요?" /> <div> {imagePaths.map((v) => ( <div key={v} style={{ display: 'inline-block' }}> <img src={v} style={{ width: '200px' }} alt={v} /> <div> <Button>제거</Button> </div> </div> ))} </div> </Form> ); }; export default PostForm;
미해결
실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화
관련 질문에 대한 답변을 읽어봤는데도 이해가 가지 않아서 질문드립니다. 커맨드와 쿼리를 분리해야한다는 CQS를 설명하신 말이었어요. 내부변경이 일어나는것은 커맨드, 명령어라고 부른다 커맨드는 결과값을 그대로 반환하면안된다 내부변경이 일어나지않는 것은 쿼리라고 부른다. 쿼리는 결과값을 반환한다 -> 1. 커맨드에서 결과값을 반환하면 안되는 이유가 뭘까요? update 메서드 안에서도 결국은 update하는것(커맨드)과 findOne(쿼리)하는 코드가 모두 들어가있는거잖아요? 근데 이게 왜 cqs를 지킨 사례인거죠? @Transactinal public vodi update(Long id, String name){ memberService.update(id,name); Member member = memberService.findOne(id); rreturn ~~~; }
미해결
실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화
강의도중에 설명해주시긴 했는데 그래도 이해가 덜 가서 질문드립니다 membersaveDto만있으면 memberupdatedto를 만들지 않아도돼요 둘다 만들게 되면 코드의 중복이 발생하는것아닌가요? save와 update는 아예다른것이기때문에 중복이 발생해도 상관이 없는걸까요? 아예다른것이라기엔 update에도 있고 save에도 있는 필드에 변화가 생겼을때 둘다 수정을 해주어야해요 그럼 수정해야할 포인트가 늘어나는건데도 updateDto를 생성해주는게 맞는걸까요?
미해결
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 [질문 내용] 강의에서는 개발과 테스트 코드가 모두 동일한 h2 DB 기반으로 구현이 되는데 실무에서는 테스트 코드에 대한 DB 연결을 어떤식으로 하게되는지 궁금합니다. 예를 들어 실제 개발은 A 서버의 mysql 을 사용하고 테스트는 로컬의 h2 로 별도로 연결을 하는지, 아니면 동일한 서버(환경)에서 테스트용 테이블들만 별도로 만들어서 하는지, 또는 모든 환경을 동일하게 하고 테스트 코드만 인메모리에서 실행되게 하는지, 실제 개발 시에는 테스트 코드에 대한 서버, DB 구성 방법이 궁금합니다.
해결됨
자바 ORM 표준 JPA 프로그래밍 - 기본편
안녕하세요! 일대일매핑을 '주 테이블에 외래 키'로 사용했을 때 단점이 값이 없으면 외래 키에 null을 허용하는 것이라고 되어있는데 이 부분 잘 이해가 되지 않아서요ㅜㅜ '대상 테이블에 외래 키' 방식으로 일대일 매핑을 하더라도 결국 대상 테이블 입장에서는 값이 없으면 null이 들어가는 건 마찬가지 아닌가요??
미해결
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
안녕하세요. 로드맵 수강하고 토이 프로젝트 진행 중인데 궁금한 점이 계속 나오네요.. 일반적으로 사용하는 표현 - 비즈니스 - 도메인 계층 구조에서 비즈니스 정책을 검증하는 위치와 관련해서 질문 드립니다. 예를 들어 사용자용 게시글 삭제 API는 현재 요청 사용자가 게시글의 작성자가 맞는지 검사합니다. 이 검증 작업을 서비스 계층에서 처리했습니다. public class PostService { private final PostRepository postRepository; // 게시글 삭제 기능 public void deletePost(Long postId, Long currentMemberId) { // 엔티티 조회 후 게시글 작성자가 현재 요청 사용자( currentMemberId )와 일치하는지 검사 Post post = postRepository.findById(postId); if (!post.getWriter().getId().equals(currentMemberId)) { // 작성자가 아니면 예외 발생 } post.delete(); } } 이 메서드를 사용자 API 컨트롤러에서는 잘 사용했는데, 관리자 API는 게시글 작성자 검증이 필요 없다 는게 문제였습니다. 사용자 및 관리자용 API 컨트롤러에서 호출하는 것은 결국 '게시글 삭제'라는 동일한 기능이므로 하나의 서비스 클래스에서 제공하는 게 맞다 판단하여 deletePost() 메서드에서 수행하던 유효성 검증 로직을 사용자 API 컨트롤러로 이관했습니다. public class PostController { private final PostService postService; // 실제 코드는 아니며 설명용 코드입니다. // 예를 들어 currentMemberId의 경우 실제론 @AuthenticationPrincipal 등을 통해 얻습니다. @DeleteMapping("/{postId}") public void delete(Long currentMemberId, @PathVariable Long postId) { Post post = postService.findPost(postId); if (!post.getWriter().getId().equals(currentMemberId)) { // 작성자가 아니면 예외 발생 } postService.deletePost(postId); } } 이렇게 구성하니 PostService 를 사용자 API 컨트롤러에서도, 관리자 API 컨트롤러에서도 사용 가능했지만.. 표현 계층에서 비즈니스 정책을 검증하니 구조가 이상한 것 같아서 질문 드립니다. '게시글을 삭제하려는 사용자가 게시글의 작성자인가?' 를 확인하는 작업은 비즈니스 정책에 의한 작업이라 생각합니다. 그러므로 서비스 계층에서 검사하는 게 맞다 생각되는데, 관리자 API에서 사용하기 불편하더라구요. 이런 경우 구조를 어떻게 가져가시나요? PostService 는 비즈니스 로직만 처리하고, PostUserService 같은 래퍼 서비스를 만들어 검증 부분을 처리할까 했는데, 썩.. 맘에 들진 않았습니다. 예시처럼 정책 검증을 컨트롤러에서 수행한다 가정하면, 제 코드의 경우 PostService.findPost() 메서드에 @Transactional(readOnly=true) 를 적용한 상태라 deletePost() 메서드에서 SELECT 쿼리를 또 실행합니다. @Transactional(readOnly=true) 은 정말 필요한 곳에만 선택적으로 적용하시나요? 아니면 읽기 전용 메서드는 별도로 구분하시나요? '서비스는 최대한 비즈니스 로직만 수행하고, 정책 유효성 검증은 다른 위치에서 진행하는 것이 좋다'라는 분들도 있던데, 보통 어떤 식으로 처리하시나요?
미해결
Java TPC (생각하고, 표현하고, 코딩하고)
안녕하세요 선생님! 45강 실습을 따라하던 중 해당부분에 오류가 나서 질문드립니다. 분명히 다르게한게 없는데.. i 변수를 찾을 수 없다는 오류가 납니다..어떤부분이 잘못된건지 도저히 답이 안나와서..여쭤봅니다!
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
안녕하세요 선생님 post 타이틀을 한글로 쓰면 경로이동이 안됩니다 영어로 쓰면 라우터대로 경로가 이동하는데 한글로 쓰면 이동이 안되네요... 왜이럴까요 한글타이틀 도 영어타이틀 처럼 잘 이동될순 없을까요
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
setupProxy.js 파일 내용을 아래처럼 바꾸시면 됩니다. 공식 문서 보니 설정 문법이 바뀌었나봐요. https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually const { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = function (app) { app.use( "/api", createProxyMiddleware({ target: "http://localhost:5000", changeOrigin: true, }) ); };
미해결
Slack 클론 코딩[실시간 채팅 with React]
회원가입을 눌렀으나 회원가입이 안되고 요청이 가지 않는 것 같습니다. 에러메세지를 긁어서 확인 해보았으나 어디가 잘못된건지 모르겠고, 서버 부분의 콘솔을 확인해 보았으나 에러메세지가 나오지 않았습니다. 에러 메세지 이미지와 본문입니다. react_devtools_backend.js:4012 Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Bsuccess%2C%20code%2C%20data%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at ka (react-dom.production.min.js:140:47) at react-dom.production.min.js:150:265 at Ml (react-dom.production.min.js:176:171) at Bi (react-dom.production.min.js:271:134) at Eu (react-dom.production.min.js:250:347) at wu (react-dom.production.min.js:250:278) at bu (react-dom.production.min.js:250:138) at pu (react-dom.production.min.js:243:163) at react-dom.production.min.js:123:115 at t.unstable_runWithPriority (scheduler.production.min.js:18:34 혹시나 ENV를 까먹었을까봐 다시 확인했지만 있었고, 아래는 서버쪽 터미널 이미지입니다. 감사합니다.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
배포하기 전에 커뮤니티, 포스트, comment 삭제하고 다시작성하고 싶은데 어떻게해야될까요?
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
import React, {useState} from "react"; import "./App.css"; export default function App () { const [todoData, setTodoData] = useState([ { id:"1", title:"공부하기", completed: false, }, { id:"2", title:"청소하기", completed: false, } ]); const [Value,setValue] = useState(""); // 첫번째 인수는 변수 두번재 인수는 state를 정하는 변수 const btnStyle ={ color: "#fff", border: "none", padding: "5px 9px", borderRadius: "50%", cursor: "pointer", float:"right", }; const getStyle = (completed) => { return{ padding:"10px", borderBottom:"1px #ccc dotted", textDecoration: completed ? 'line-through' : "none", }; }; const handleClick = (id) =>{ let newTodoData = todoData.filter(data => data.id !== id) console.log("newTodoData",newTodoData) setTodoData(newTodoData); }; const handleChange = (event) => { console.log("event",event.target.Value) setTodoData(event.target.Value); }; const handleSubmit = (event) =>{ console.log("event",event) event.preventDefault(); // reload를 막아줌 // 새로운 할일 데이터 let newTodo ={ id: Date.now(), title : Value, completed: false, }; // 원래 있던 할 일에 새로운 할일을 더해주기 setTodoData(prev => [...prev,newTodo]); setValue(""); }; const handleCompleteChange = (id) => { console.log("todoData",todoData) let newTodoData = todoData.map((data) =>{ if(data.id === id){ data.completed = !data.completed; } return data; }); setTodoData(newTodoData) }; return ( <div className="container"> <div className="todoBlock"> <div className="title"> <h1>할일 목록</h1> </div> {todoData.map((data) => ( <div style={getStyle(data.completed)} key={data.id}> <input type="checkbox" defaultChecked={false} onChange={() => handleCompleteChange(data.id)}/> {data.title} <button style={btnStyle} onClick={() => handleClick(data.id)}>x</button> </div> ))} <form style={{display:'flex'}} onSubmit={handleSubmit}> <input type="text" name="value" style={{flex:'10', pedding:'50'}} placeholder="해야 할 일을 입력하세요." value={Value} onChange={handleChange}/> <input type="submit" value="입력" className="btn" style={{flex:'1'}} /> </form> </div> </div> ); } 아래 코드에서 form에 어떠한 글자를 입력하면 Console 창에 왜 Uncaught TypeError: Cannot read properties of undefined (reading 'map') 에러가 발생하는지 도저히 모르겠습니다. 혹시 아시는분 답변 부탁드립니다. 감사합니다.
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. intelllij환경설정 전부 이상없이 설정하였고, 자바 11사용중인데 cmd 창에서 빌드하려니 계속 아래와 같은 에러가 뜹니다 ㅠㅠ 어떻게 해결할 수 있을까요?? Task :test FAILED Error: Could not find or load main class worker.org .gradle.process.internal.worker.GradleWorkerMain Caused by: java.lang.ClassNotFoundException: worker.org .gradle.process.internal.worker.GradleWorkerMain FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':test'. > Process 'Gradle Test Executor 3' finished with non-zero exit value 1 * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. * Get more help at https://help.gradle.org BUILD FAILED in 3s 7 actionable tasks: 1 executed, 6 up-to-date
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 [질문 내용] 안녕하세요. 엔티티 매니저 remove() 메서드 관련 질문이 있습니다. remove는 영속성 컨텍스트의 1차 캐시에서 엔티티를 삭제 하고, DB의 데이터를 delete 해주는 메서드로 알고 있습니다. 여기서 문제는 1차 캐시에서 엔티티를 삭제한다는 것이 "전체 데이터를 지우는 것(key:value)"인지 아니면 "해당 식별자에 할당된 데이터(value)"를 지우는 것인지가 궁금합니다. 위에서 그림에서 member를 remove 한 후에 remove된 member id를 받아 조회를 수행했습니다. 저는 1차 캐시에서 삭제된다고 알고 있었기에 select 쿼리가 실행될 것이라고 예상했으나 다음과 같이 select 쿼리가 실행되지 않았습니다. 제가 remove를 제대로 이해못한 것 같은데, remove를 수행하면 1차 캐시에서 바로 삭제되지 않는 걸까요?
