inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

새로고침을 해야하는 기준

미해결

프로젝트로 배우는 React.js

안녕하세요 코지코더님 강의 수강중인 수강생입니다. 가끔 보면 새로고침을 하지 않아도 local 에 바로 업데이트가 되는게 있고 이번 강의처럼 새로고침을 한번 누르시는게 있는데 그 기준이 있을까요?

  • redux
  • react
  • es6
댓글 1 좋아요 0 조회수 360

배포는되는데 회원가입부터 오류가 막뜹니다

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

안녕하세요 선생님 첫화면엔 커넥션 리퓨즈 뜨고 회원가입 누르면 이러한 오류가 뜹니다 넘어가질 않고 오류가 계속나오는데 왜이런걸까요?.. 무엇이 문제인지 궁금합니다 :4000 으로 계속 찍히는거 보면 cors가 안되는것일까요 강의보고 다 제대로 따라했는데 ㅠㅠ 도와주시면 감사하겠습니다

  • postgresql
  • docker
  • react
  • nodejs
  • typescript
  • Next.js
  • 클론코딩
레드 댓글 3 좋아요 0 조회수 608

에러 문의 react hook useEffect

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

src/components/Row.js Line 14:7: React Hook useEffect has a missing dependency: 'fetchMovieData'. Either include it or remove the dependency array react-hooks/exhaustive-deps 쌤 그리고 fetchMovieData 가 있습니다. 그것을 포함하거나 종속성 배열 React-hooks/exhausitve deps를 제거하라는게 무슨말인가요??

  • react
  • tdd
  • typescript
  • redux
  • Next.js
김사랑 댓글 1 좋아요 0 조회수 1491

섹션3 JSX 코드 작성해보기

미해결

처음 만난 리액트(React)

이곳에서 코드를 똑같이 따라했는데 아래와 같은 오류가 뜨네요 ㅜㅜ 에러가 왜 나는지 모르겠습니다.

  • HTML/CSS
  • react
  • javascript
댓글 2 좋아요 0 조회수 483

에러가 나요ㅠㅠ

미해결

처음 만난 리액트(React)

에러가 나서요ㅠ

  • HTML/CSS
  • javascript
  • react
조은진 댓글 1 좋아요 0 조회수 646

3일동안 삽질하다 결국 여기로 왔습니다. 꼭좀 상세히 알려주세요.

미해결

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

todoapp 클라이언트(리액트), 서버(몽구스) 로 작업중입니다. (글읽기, 리스트보여주기, 삭제 까지는 구현을 했는대요. 글리스트에서 특정리스트를 클릭시 해당상세페이지로 넘어가는 방법이 잘안됩니다. 구체적으로 어떻게 해야되는지 꼭좀 알려주세요. -----------리액트-------------------------- import React, { useEffect } from 'react' import axios from 'axios' import { useParams } from 'react-router-dom' const ShowPage = () => { const {id} = useParams() const getPost = (id) => { axios.get(`users/board/${id}`).then((res)=>{ console.log(res.data.user); }) } useEffect(()=>{ getPost(id); },[]) return ( <div>ShowPage</div> ) } -----------server-------------------------- userRouter.get('/board/:userId',async(req,res)=>{ try{ const {userId} = req.params; const user = await User.findOne({id:userId}); return res.status(200).json({success:true, user}) }catch(err){ console.log(err); return res.status(500).send({err: err.message}) } })

  • react
  • redux
  • mongodb
  • 웹앱
  • nodejs
foxball 댓글 1 좋아요 0 조회수 643

AOP

미해결

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예 [질문 내용] 여기에 질문 내용을 남겨주세요. 스프링부트 3.0, JDK17 사용중입니다. AOP 코드를 넣지않고, 스프링 빈 클래스가 잘 찍히는지 확인해보다가. 강의 설명과 다르게, AOP 설정을 넣지 않았는데도 프록시객체가 찍힙니다.

  • java
  • spring-boot
  • MVC
  • spring
Accidently Woo 댓글 2 좋아요 0 조회수 701

다른 분들의 질문을 보면 Math.sqrt, num / 2 하는 것을 볼 수 있는데...

미해결

자바(Java) 알고리즘 문제풀이 입문: 코딩테스트 대비

저렇게 하시는 이유가 뭔지 궁금합니다 ㅠㅠ 구글링해보았을 때도 비슷한 케이스를 볼 수 있었는데 정확한 이유를 잘 모르겠습니다 ㅠㅠ

  • 코테 준비 같이 해요!
  • java
australialove19 댓글 1 좋아요 0 조회수 427

Optional 질문드립니다.

미해결

더 자바, Java 8

Optional 첫번째 강의영상 10분20초쯤 나오는 내용인데요. progress.ifPresent((p) -> { this.progress = p }); 위와 같은 코드가 나오는데, 제가 알기로는 람다식에서는 외부변수를 변경하면 안되는것으로 알고있는데 this.progress는 외부변수인것같은데도 변경이 되는것 같아서요..! 이 경우에는 외부변수를 변경하는게 왜 가능한지 궁금합니다. 또, 변경가능하다면, 이렇게 외부변수를 변경하는 것은 지양해야하는 건가요?!

  • java
시골쥐 댓글 0 좋아요 0 조회수 491

useInput 했을때, 배열의 첫번째 요소가 func으로 나와요

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

id와 nickname에 마우스를 올리면 useState를 이용한 password(string), passwordCheck(boolean)과 다르게, 함수라고 나오는데 이렇게 되어도 괜찮은건가요?? 그리고 이것과 관련된 오류인지는 모르겠는데, 약관동의 버튼을 누르고 아이디와 비밀번호를 수정해도 값이 변경되지않습니다. 강의랑 똑같이 작성한것같은데 어디가 잘못된건지 모르겠네요 ㅠㅠ .. 어떻게 해결해야 할까요?? ```signup.js import React, { useCallback, useState } from 'react'; import AppLayout from '../components/AppLayout'; import Head from 'next/head'; import styled from 'styled-components'; import { Button, Checkbox, Form, Input } from 'antd'; import useInput from '../components/hooks/useInput'; const ErrorMessage = styled.div` color: red; `; const Signup = () => { const [id, onChangeId] = useInput(''); const [nickname, onChangeNickname] = useInput(''); const [password, onChangePassword] = useInput(''); const [passwordCheck, setPasswordCheck] = useState(''); const [passwordError, setPasswordError] = useState(false); const onChangePasswordCheck = useCallback( (e) => { setPasswordCheck(e.target.value); setPasswordError(e.target.value !== password); }, [password] ); console.log(id); const [term, setTerm] = useState(false); const [termError, setTermError] = useState(false); const onChangeTerm = useCallback((e) => { setTerm(e.target.checked); setTermError(false); }, []); const onSubmit = useCallback(() => { if (password !== passwordCheck) { return setPasswordError(true); } if (!term) { return setTermError(true); } console.log(id, nickname, password); }, [password, passwordCheck, term]); return ( <> <AppLayout> <Head> <title>회원가입 | NodeBird</title> </Head> <Form onFinish={onSubmit}> <div> <label htmlFor="user-id">아이디</label> <br /> <Input name="user-id" value={id} required onChange={onChangeId} /> </div> <div> <label htmlFor="user-nick">닉네임</label> <br /> <Input name="user-nick" value={nickname} required onChange={onChangeNickname} /> </div> <div> <label htmlFor="user-password">패스워드</label> <br /> <Input name="user-password" value={password} required onChange={onChangePassword} /> </div> <div> <label htmlFor="user-password-check">비밀번호체크</label> <br /> <Input name="user-password-check" value={passwordCheck} required onChange={onChangePasswordCheck} /> {passwordError && ( <ErrorMessage>비밀번호가 일치하지 않습니다</ErrorMessage> )} </div> <div> <Checkbox name="user-term" checked={term} onChange={onChangeTerm}> 약관에 동의합니다. </Checkbox> {termError && <ErrorMessage>약관에 동의하지 않습니다</ErrorMessage>} </div> <div style={{ marginTop: '10px' }}> <Button type="primary" htmlType="submit"> 가입하기 </Button> </div> </Form> </AppLayout> </> ); }; export default Signup; import { useState, useCallback } from 'react'; export default (initialValue = null) => { const [value, setValue] = useState(initialValue); const handler = useCallback((e) => { setValue(e.target.value); }, []); return [value, handler]; };

  • useinput
  • nodejs
  • 커스텀훅
  • react
  • redux
  • express
  • Next.js
ohjaehokor 댓글 1 좋아요 0 조회수 484

강의 자막

미해결

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1

안녕하세요, 동균님! 😁 강의 자막은 제공되지 않는걸까요!?

  • devtools
  • react
한세계 댓글 2 좋아요 1 조회수 976

선생님 삭제기능은 어떤식으로 해야될까요

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

선생님 포스트 나 댓글 삭제기능은 어떤식으로 해야될까요 따로 강의는 없겟죠? ㅠ

  • typescript
  • nodejs
  • react
  • docker
  • postgresql
  • Next.js
  • 클론코딩
레드 댓글 1 좋아요 0 조회수 439

이미지 지연 로딩 질문 있습니다!

해결됨

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2

이미지 지연 로딩에서 picture tag를 사용하여 webp가 지원되지 않는 브라우저인 경우 jpg로 로딩되도록 previousSibling을 사용하셨는데 picture tag 안에 source tag가 두 개 이상인 경우에는 어떻게 해야하나요? 반복문을 돌려야 하는 것인가요?

  • devtools
  • react
marios 댓글 1 좋아요 2 조회수 473

프록시와 연관관계 관리 - orphanRemovel 관련 질문

해결됨

자바 ORM 표준 JPA 프로그래밍 - 기본편

안녕하세요. [ 프록시와 연관관계 관리 - orphanRemovel ] 내용에서 질문드립니다. orphanRemovel = false, cascade = ALL 로 설정한 상태에서 @OneToMany 로 설정된 컬렉션 내의 값을 제거하면, cascade 옵션에 의해 update 쿼리가 나갈 때 컬렉션에서 제거된 원소가 같이 삭제되어야 하는게 아닌가요? 위 내용이 틀렸다면 cascade 의 delete 쿼리는 부모 엔티티 '자체'가 사라졌을 때만 컬렉션 내의 자식 엔티티들에게 전이되는 걸까요?? 추가로, 고아 객체 제거 기능은 cascade 와 마찬가지로, 연관관계의 주인이 아닌 컬럼에서도 사용이 가능한건지도 궁금합니다! 내용이 잘 이해되질 않아 질문이 다소 두서없는 점 죄송합니다ㅜ

  • java
  • JPA
현상혁 댓글 1 좋아요 1 조회수 276

오늘 구매햇구요 토씨 하나 안틀리고 클라이언트 환경세팅 9:02까지왔습니다 에러로 안됩니다/

해결됨

풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기

[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 으로하시는것으로보입니다만 제환경에서는 안될것같군요 원활한 해결책을 보고 환불을 결정하겟습니다

  • graphql
  • firebase
  • react
oksky2957 댓글 1 좋아요 1 조회수 961

@PostMapping으로 등록 시 파라미터 안에 List 질문입니다.

해결됨

실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화

안녕하세요 강의 완강 후 따로 프로젝트를 만들어 보던 중 궁금한 게 생겨서 질문 드립니다. PostMapping으로 등록할 때 CreateRequest라는 별도의 클래스를 만들어 주어서 파라미터로 받았는데 이 CreateRequest안에 List를 받아야 할 경우가 있다면 어떻게 해줘야 하는지 잘 모르겠습니다. Product 클래스 입니다. Module 클래스 입니다. 하나의 Product에 여러 개의 Module이 들어갈 수 있기 때문에 ProductModule 클래스를 만들어줬습니다. 이러한 경우에서 Product를 등록할 때 아래와 같이 넘겨주고 싶으면 CreateProductRequest 에서 List를 어떤식으로 받아줘야 하나요? 아래와 같이 해봤는데 잘 안되는 것 같아서요...

  • java
  • JPA
  • spring-boot
  • spring
gnstjrdlsla 댓글 1 좋아요 1 조회수 808

entity로 의존관계가 들어와야하는데 반대로 의존관계가 나가버린다

미해결

실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화

회원조회api 영상의 5:40초쯤 하신 말씀입니다. 근데 이 말이 무슨말인지 잘 모르겠어요 왜 의존관계가 나간다고 표현하시는 거죠? json으로 출력할때만 출력하지 않는것이 왜 의존관계가 나가는일인건가요?

  • spring
  • java
  • spring-boot
  • JPA
김민지 댓글 1 좋아요 0 조회수 415

PostForm에서 Input이 초기화가 되지않습니다.

해결됨

[리뉴얼] 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;

  • react
  • redux
  • express
  • nodejs
  • Next.js
댓글 1 좋아요 0 조회수 469

CQS

미해결

실전! 스프링 부트와 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
  • spring-boot
  • spring
  • java
김민지 댓글 1 좋아요 0 조회수 1181

memberUpdateDto가 필요한 이유

미해결

실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화

강의도중에 설명해주시긴 했는데 그래도 이해가 덜 가서 질문드립니다 membersaveDto만있으면 memberupdatedto를 만들지 않아도돼요 둘다 만들게 되면 코드의 중복이 발생하는것아닌가요? save와 update는 아예다른것이기때문에 중복이 발생해도 상관이 없는걸까요? 아예다른것이라기엔 update에도 있고 save에도 있는 필드에 변화가 생겼을때 둘다 수정을 해주어야해요 그럼 수정해야할 포인트가 늘어나는건데도 updateDto를 생성해주는게 맞는걸까요?

  • spring
  • JPA
  • java
  • spring-boot
김민지 댓글 2 좋아요 0 조회수 508

인기 태그

인프런 TOP Writers

주간 인기글