inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

input box에 데이터 입력후 확인 버튼 누르고 input 데이터 수정하면 오류 발생 ...

미해결

코드로 배우는 React 19 with 스프링부트 API서버

안녕하세요 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
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
just kim 댓글 1 좋아요 1 조회수 128

질문있어요

미해결

따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기

앞에 질문에 답변을 받았지만 링크로 참조하라는 답변이었는데 저는 그걸로는 해결을 할 수 없었습니다. 혹시 괜찮으시면 직관적인 해결법을 알려주실 수 없나요? send를 누르면 터미널에 이렇게 뜹니다. Server Running at 5000 C:\project\vswork\chatbot-app-master\node_modules\google-gax\node_modules\google-auth-library\build\src\auth\jwtclient.js:193 throw new Error('The incoming JSON object does not contain a client_email field'); ^ Error: The incoming JSON object does not contain a client_email field at JWT.fromJSON (C:\project\vswork\chatbot-app-master\node_modules\google-gax\node_modules\google-auth-library\build\src\auth\jwtclient.js:193:19) at GoogleAuth._cacheClientFromJSON (C:\project\vswork\chatbot-app-master\node_modules\google-gax\node_modules\google-auth-library\build\src\auth\googleauth.js:313:16) at ReadStream.<anonymous> (C:\project\vswork\chatbot-app-master\node_modules\google-gax\node_modules\google-auth-library\build\src\auth\googleauth.js:347:36) at ReadStream.emit (node:events:519:28) at endReadableNT (node:internal/streams/readable:1696:12) at process.processTicksAndRejections (node:internal/process/task_queues:82:21) Node.js v20.16.0 PS C:\project\vswork\chatbot-app-master> 아래와 같이 값이 입력이되어있는데도말입니다. 루트파일에다가 구글 인증json을 위치를 끌어다 넣어도 그렇습니다. 가르쳐줘서 고맙습니다. 근데 이렇게 문제가 생겨서 이 구간을 벗어나고 싶습니다 ㅠㅠ

  • react
  • node.js
코딩의외로 댓글 1 좋아요 0 조회수 227

카카오 맵 오류

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

import { useEffect } from "react"; declare const window: typeof globalThis & { kakao: any; }; export default function KakaoMapPage(): JSX.Element { useEffect(() => { const container = document.getElementById("map"); const options = { center: new window.kakao.maps.LatLng(33.450701, 126.570667), level: 3, }; const map = new window.kakao.maps.Map(container, options); console.log(map); }, []); return ( <> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=키" ></script> <div id="map" style={{ width: 500, height: 400 }}></div> </> ); } Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching <div> in <div>. See more info here: https://nextjs.org/docs/messages/react-hydration-error 카카오 맵 하는데 오류 왜 뜨는건가요??

  • react
  • node.js
  • seo
  • graphql
  • next.js
br 댓글 1 좋아요 0 조회수 169

변하지 않는 코드 분리하기 - 메소드 추출

해결됨

토비의 스프링 6 - 이해와 원리

안녕하세요 토비님 변하지 않는 코드 분리 commit 에서 WebApiExRateProvider가 private "static" 인 이유가 있나요? 강의에서는 extract method 단축키로 만드셨는데 왜 intellij가 static을 붙이는것을 추천해줬는지 도 좀 궁금합니다...

  • java
  • spring
dohyun_lim 댓글 1 좋아요 0 조회수 276

hashCode 결과로 음수가 나올 수 있게 해놓은 이유?

미해결

김영한의 실전 자바 - 중급 2편

========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 강의 내용에서 hashCode 결과로 음수 값이 나올 수 있으므로 절대값으로 변환하는 과정을 가졌는데요, 자바에서는 왜 음수 값이 나올 수 있게 해놓은 건가요? 인덱스로 사용하는 용도 외에 다른 용도가 있나요?

  • java
  • 객체지향
  • 코딩-테스트
  • 알고리즘
느린 나무늘보 댓글 2 좋아요 0 조회수 244

2024년 2회 17번 재귀함수

해결됨

(2026 최신!) 일주일만에 합격하는 정보처리기사 실기

재귀 함수로 계속 돌면 Char c = a 만 남고 if(idx <0) return""; 으로 빠져나오는거 아닌가요?ㅠ idx : 0, c: a,seen[a]:false idx : 1, c: b,seen[b]:false 어떻게 나오는지 모르겠습니다.

  • python
  • java
  • c
  • 정보처리기사
2828won 댓글 1 좋아요 0 조회수 145

윈도우 빌드 질문

해결됨

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

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. 자바 버전 17이상을 사용하는데 빌드가 안됩니다.

  • java
  • spring
  • mvc
  • spring-boot
썩은도토리 댓글 1 좋아요 0 조회수 358

분산락과 서버별 락에 대해 질문드립니다!

미해결

김영한의 실전 자바 - 고급 1편, 멀티스레드와 동시성

안녕하세요 영한님! 다중서버로 이루어진 분산환경에서 분산락이 주로 사용되는데 이는 전체 또는 여러 서버에서 동기화가 필요한 데이터여서 그런것이죠? 현재 학습내용인 자바에서 제공하는 락 (서버별로 락을 갖는 방식은) 분산환경에는 적합하지 않고, 서버별로 락을 걸어도 커버 되는 자원에 한정되게 사용되는걸로 이해한게 맞을까요?

  • java
  • 객체지향
  • 동시성
  • multithread
  • thread
다라미 댓글 1 좋아요 0 조회수 292

로그아웃 시 메서드 거절이 발생합니다.

미해결

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

auth LoginView/LogoutView에 success_url_allowed_hosts 설정 추가하여, 로그인/로그아웃 후에 지정 호스트로의 이동 허용 현재 로그인/로그아웃후 지정 호스트로 이동을 허용하는 부분을 실습하고 있는데 막히는부분이 있어서 질문 드립니다. 이부분 코드를 붙여넣고 실행하였더니 로그아웃 부분에서 아래와 같은 에러가 발생하였습니다. (프로필 페이지로 이동은 잘 됩니다.) 찾아보니 GET 메서드가 거절된 것같은데, 이전 강의에서 장고에서 과거에는 GET으로 받았으나, 이제는 POST 요청만 허용한다는 내용을 들은적이 있었던것같은데, 그것과 관련된 것인지 궁금합니다. 다른 분들은 잘되셔서 넘어가셨을텐데, 저가 잘못된것 같긴한데 혹시나해서 여쭈어봅니다. 아래는 로그아웃 구현된 부분입니다.

  • react
  • python
  • django
  • web-api
  • htmx
백종성 댓글 2 좋아요 0 조회수 147

Postman 500에러

미해결

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

선생님처럼 무한 루프로 안가고 500에러가 뜨는데 왜 그런건가요??

  • java
  • spring
  • spring-boot
  • jpa
봉준 댓글 2 좋아요 0 조회수 399

11-15) 프로필 수정에서 이미지 저장 시 문제

해결됨

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

질문을 온전히 이해할 수 있도록, 모든 맥락을 전달해주세요. 질문은 질문자가 번거로워야 보다 좋은 답변을 얻으실 수 있습니다. 시행착오를 알려주시면 곧바로 원하는 문제에 집중할 수 있습니다. 오류 메시지는 일부만 알려주시기보다 전체 오류 메시지를 캡처해서 주시면, 오류 파악에 도움이 됩니다. 당신의 파이썬/장고 페이스메이커가 되겠습니다. ;-) 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 11-15 강의에서 구현한 프로필 수정 폼에서 이미지를 올린 경우, 다시 프로필 수정 페이지에 들어가면 정상적으로 이전에 등록된 이미지가 현재 란에 보여집니다. 이렇게 구현된 모델은 문제가 몇 가지 있는데요. 수정하지 않고 저장 을 누를 경우 이전 강의에서 교육하신 내용처럼 접미사가 계속 바뀌어가면서 같은 내용의 파일이 spamming 되는 문제가 발생합니다. 우리가 만약 프로필에 다른 항목이 추가된다면, 다른 항목만 수정하지 않고 나가는 유저가 있을텐데 해당 문제를 해결하려면 어떻게 해야할까요? 수정 혹은 취소 체크 박스를 선택하여 삭제를 할 경우 여전히 경로 안에 파일이 남아 있습니다. signal을 이용하면 될 것 같은데, 하기와 같은 방법을 생각해 볼 수 있을까요? @receiver(pre_save, sender=Profile) def edit_delete_on_profile(instance=Profile, **kwargs): instance.avatar.delete(save=False) 수업 내용과는 상관없지만, 기본 제공되는 이미지 업로드 양식이 어색합니다. 특히 취소 체크 박스를 체크하여 제거하는 방식은 너무 어색한데요. 더 좋은게 없을까요? 예를들어 아래는 네이버 '치지직' 에서 프로필 수정 양식입니다.

  • react
  • python
  • django
  • web-api
  • htmx
pplkjh2 댓글 3 좋아요 0 조회수 242

컴포지션 , 정적팩토리메서드

미해결

김영한의 실전 자바 - 중급 1편

강의를 듣던 중 다른 클레스를 참조 하거나 자기 클래스 이름으로 만들어진 함수가 있길래 구글링을 해보았는데 (정적 팩토리 메서드) 디자인 패턴이라는 개념이 있더라구요,,, 혹시 디자인 패턴에 관한 강의도 있나요,,?

  • java
  • 객체지향
ghkdlxld 댓글 1 좋아요 0 조회수 68

내부 클래스, 코드 질문

해결됨

김영한의 실전 자바 - 중급 1편

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 안녕하세요. car 클래스 engine클래스르 리팩토링 후에 car에 engine을 넣는것을 보았습니다. 그리고 그것을 좀 살펴 보던 중에, engine 안에 있는 start() 메서드를 private로 바꿔 보면 어떨까 라는 생각을 하게 되었고, 구동 결과가 이렇게 되었습니다. stop()이라는 메서드를 추가하고 여기 메서드에 private로 바꾸고 start()는 그대로 public임 영한님은 Enige이라는 클래스만 private로 바꾸고 나머지 메서드는 public로 놔두었는데, 메서드도 private로 바꾸는게 낳을까요? 아니면 그냥 그대로 놔두는것이 좋을까요? 답변 부탁드립니다.

  • java
  • 객체지향
생각하는자 댓글 2 좋아요 0 조회수 173

안쪽에 있는 클래스가 외부에서 사용되는 경우는 어느 경우 인가요?

해결됨

김영한의 실전 자바 - 중급 1편

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 안녕하세요. 궁금증이 생겨서 질문을 남깁니다. 섹션7 - 정적 중첩클래스의 활용 - 8분때 중첩클래스의 접근 에서, 흔하지는 않지만 안쪽에 있는 클래스가 외부에서 사용되는 경우가 있다고 말씀하셨습니다. 그래서 어떨때 안쪽 클래스가 외부에서 사용될까?라는 궁금증이 생겼습니다. 일단 두가지를 생각해 보았는데, 헌혈을 할때(피를 다른사람에게 줄대) 차에서 기름을 뺄때(차에 있는 기름을 기름통에 담음) 이 두가지 경우가 있기는 한데 코딩이랑은 좀 상관이 없는것 같아서 어떻게 쓸까? 라는 감이 안 잡히네요. 어느 때에 사용하는지 알켜 주실 수 있으신가요? 답변 부탁 드립니다.

  • java
  • 객체지향
생각하는자 댓글 1 좋아요 0 조회수 140

영속성 전이 질문

미해결

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

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. child 객체가 parent만 연관관계를 가지면 사용가능 하지만, 다른 엔티티와도 연관관계를 가지면 영속성 전이를 사용하지 못한다고 설명하셨습니다. 위 ERD는 제가 지금 프로젝트를 하고 있는 예시인데요 동아리마다 게시판이 존재하고, 회원은 여러 동아리에 참여할 수 있습니다. 그래서 각 동아리마다 직위가 다르기 때문에 테이블을 따로 빼서 관리를 해주고 있는데요. 그럼 혹시 요 상황에서, 사용자가 가입을 했을 때 가입 테이블에도 자동으로 데이터를 저장하고 싶은데, 동아리 테이블과 연관관계를 가지고 있으므로 영속성 전이를 사용하지 못하는 것일까요? 만약 안된다면, 어떤 방식으로 가입 테이블에 자동으로 추가를 해야할지 조언을 해주실 수 있을까요 ㅠ

  • java
  • jpa
주혁 댓글 1 좋아요 0 조회수 201

그래프큐엘 패치보드 질문

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

포트폴리오 과제중 BoardDetail 작성글 페이지에서 패치보드가 안불러와져서 계속 코드 고쳐보다가 결국 강사님이 올려주시는 포트폴리오리뷰 파일 불러와서 코드보고 똑같이 따라쳐도 제 파일에서만 패치보드가 안불러와져서 오류가 계속나네요.. 혹시 좀 봐주실수 있을까요?(_app.js에서 아폴로 주소 확인도 했습니다) 아래는 패치보드 로드 실패로 나오는 창입니다

  • react
  • node.js
  • seo
  • graphql
  • next.js
cyh1908 댓글 1 좋아요 0 조회수 157

fetch 함수에 searchParams.toString() 사용 관련

미해결

Next + React Query로 SNS 서비스 만들기

export const getSearchResult : QueryFunction<Post[], [_1 : string, _2 : string, searchParams : {q : string, pf? : string, f? : string> = async ({queryKey}) =>{ const res = await fetch(` http://localhost:9090/api/search/$ {searchParams.toString()? ${searchParams.toString()}` 여기서 searchParams는 객체 타입인데 toString() 처리가 가능한지 궁금합니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
그린티라떼 댓글 1 좋아요 0 조회수 188

45강 배포후

미해결

자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지]

jar명령어까지 하여 스프링부트를 실행해주었는데 다음과 같은 오류가 뜨고 웹에서도 서버 내부 오류라고 뜹니다. 무엇이 잘못된건지 모르겠네요. https://www.inflearn.com/community/questions/1199055/45%EA%B0%95-dev-%EC%97%B0%EA%B2%B0-%EC%97%90%EB%9F%AC 이거 참고해도 이해가 안가요

  • java
  • spring
  • aws
  • mysql
  • spring-boot
  • jpa
댓글 1 좋아요 0 조회수 121

2.1 프로젝트 설치 alias 부분

해결됨

한 입 크기로 잘라먹는 Next.js

이 부분 진행할 때 "default alias를 쓸 거냐? No" 라고 말씀해 주셨는데 반대로 말씀해 주신 거 같아요! default alias를 쓴다는 선택이니까요. default import alias 대신 custmize으로 쓰겠냐는 질문에 No라고 선택한 걸로 보입니다!

  • react
  • typescript
  • next.js
주니어에요 댓글 2 좋아요 0 조회수 290

댓글 비밀번호 입력 오류

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요, 댓글 삭제 기능을 구현하던 도중 Modal에서 입력받은 비밀번호가 제가 댓글을 생성할 때 입력했던 비밀번호와 동일함에도 비밀번호가 틀렸다는 에러 메시지가 나옵니다. 제가 작성한 코드에서 어떠한 오류가 있는 건지 가르쳐주시면 감사하겠습니다... BoardComment Container import { useState } from "react"; import { useRouter } from "next/router"; import { useMutation, useQuery } from "@apollo/client"; import BoardCommentsUI from "./BoardComments.presenter"; import { FETCH_BOARD, CREATE_BOARD_COMMENT, FETCH_BOARD_COMMENTS, DELETE_BOARD_COMMENT, } from "./BoardComments.queries"; import { MouseEvent, ChangeEvent, MouseEventHandler } from "react"; import { IMutation, IMutationCreateBoardCommentArgs, IMutationDeleteBoardCommentArgs, IQuery, IQueryFetchBoardArgs, IQueryFetchBoardCommentsArgs, } from "../../../../commons/types/generated/types"; export default function BoardComments() { const [writer, setWriter] = useState(""); const [password, setPassword] = useState(""); const [contents, setContents] = useState(""); const [rating, setRating] = useState(0); const [user, setUser] = useState(""); const [boardCommentId, setBoardCommentId] = useState(""); const [modalPassword, setModalPassword] = useState(""); const [contentLength, setContentLength] = useState(0); const [isOpen, setIsOpen] = useState(false); const router = useRouter(); if (typeof router.query.boardId !== "string") { router.query.boardId = Array.isArray(router.query.boardId) ? router.query.boardId[0] : String(router.query.boardId); } const { data } = useQuery<Pick<IQuery, "fetchBoard">, IQueryFetchBoardArgs>( FETCH_BOARD, { variables: { boardId: router.query.boardId, }, } ); const { data: commentData, refetch } = useQuery< Pick<IQuery, "fetchBoardComments">, IQueryFetchBoardCommentsArgs >(FETCH_BOARD_COMMENTS, { variables: { boardId: router.query.boardId, }, }); const [createBoardComment] = useMutation< Pick<IMutation, "createBoardComment">, IMutationCreateBoardCommentArgs >(CREATE_BOARD_COMMENT); const [deleteBoardComment] = useMutation< Pick<IMutation, "deleteBoardComment">, IMutationDeleteBoardCommentArgs >(DELETE_BOARD_COMMENT); const onChangeWriter = (event: ChangeEvent<HTMLInputElement>) => { setWriter(event.target.value); }; const onChangePassword = (event: ChangeEvent<HTMLInputElement>) => { setPassword(event.target.value); }; const onChangeContents = (event: ChangeEvent<HTMLTextAreaElement>) => { setContents(event.target.value); setContentLength(event.target.value.length); }; const onChangeRating = (value: number) => { setRating(value); }; const onChangeUser = (event: ChangeEvent<HTMLInputElement>) => { setUser(event.target.value); }; const onChangeModalPassword = (event: ChangeEvent<HTMLInputElement>) => { setModalPassword(event.target.value); }; const showModal = (event: MouseEvent<HTMLImageElement>): void => { setBoardCommentId(event.currentTarget.id); setIsOpen(true); console.log(boardCommentId); }; const handelOk = (): void => { setIsOpen(false); }; const handelCancel = (): void => { setIsOpen(false); }; const onClickSubmitComment: MouseEventHandler< HTMLButtonElement > = async () => { try { if (typeof router.query.boardId !== "string") { return; } await createBoardComment({ variables: { boardId: router.query.boardId, createBoardCommentInput: { writer, password, contents, rating, }, }, }); refetch(); } catch (error) { console.log(error.message); } setRating(0); setWriter(""); setPassword(""); setContents(""); }; const onClickDeleteComment = async ( event: MouseEvent<HTMLButtonElement> ): Promise<void> => { try { await deleteBoardComment({ variables: { boardCommentId, password: modalPassword, }, }); refetch(); } catch (error) { alert(error.message); } setIsOpen(false); setModalPassword(""); }; return ( <BoardCommentsUI data={data} commentData={commentData} writer={writer} password={password} contents={contents} modalPassword={modalPassword} contentLength={contentLength} rating={rating} user={user} isOpen={isOpen} onChangeWriter={onChangeWriter} onChangePassword={onChangePassword} onChangeRating={onChangeRating} onChangeContents={onChangeContents} onChangeUser={onChangeUser} onChangeModalPassword={onChangeModalPassword} onClickSubmitComment={onClickSubmitComment} onClickDeleteComment={onClickDeleteComment} showModal={showModal} handelOk={handelOk} handelCancel={handelCancel} /> ); } BoardComment Presenter import * as S from "./BoardComments.styles"; import { IBoardCommentsUIProps } from "./BoardComments.types"; import { Rate } from "antd"; export default function BoardCommentsUI(props: IBoardCommentsUIProps) { return ( <S.Container> <S.PasswordCheck open={props.isOpen} onOk={props.onClickDeleteComment} onCancel={props.handelCancel} > 비밀번호 입력:{" "} <input type="text" onChange={props.onChangeModalPassword} /> </S.PasswordCheck> <S.CommentTitleWrapper> <S.CommentIcon src="/icon/rate_review.png" /> 댓글 </S.CommentTitleWrapper> <S.CommentInputWrapper> <S.CommentInputWrapperHeader> <S.CommentWriter type="text" placeholder="작성자" onChange={props.onChangeWriter} value={props.writer} /> <S.CommentPassword type="password" placeholder="비밀번호" onChange={props.onChangePassword} value={props.password} /> <Rate onChange={props.onChangeRating} value={props.rating} /> </S.CommentInputWrapperHeader> <S.CommentInputWrapperBody> <S.CommentInputWrapperBottom placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다." onChange={props.onChangeContents} maxLength={99} value={props.contents} /> <S.CommentTextCount>{props.contentLength}/100</S.CommentTextCount> <S.CommentSubmitButton onClick={props.onClickSubmitComment}> 등록하기 </S.CommentSubmitButton> </S.CommentInputWrapperBody> </S.CommentInputWrapper> <S.CommentListWrapper> {props.commentData?.fetchBoardComments.map((el) => ( <S.CommentListItemWrapper key={el._id}> <S.CommentListProfileWrapper> <S.CommentListProfileImage src="/icon/profile.png" /> </S.CommentListProfileWrapper> <S.CommentListContentsWrapper> <S.CommentListContentsHeader> <S.CommentListWriter>{el.writer}</S.CommentListWriter> <Rate disabled defaultValue={el.rating} /> </S.CommentListContentsHeader> <S.CommentListContents>{el.contents}</S.CommentListContents> <S.CommentListDate>2024-07-27</S.CommentListDate> </S.CommentListContentsWrapper> <S.CommentListItemButtonWrapper> <S.CommentListItemButton src="/icon/mode.png" //onClick={() => props.onClickDeleteComment(el._id)} /> <S.CommentListItemButton src="/icon/clear.png" //onClick={() => props.onClickDeleteComment(el._id)} id={el._id} onClick={props.showModal} /> </S.CommentListItemButtonWrapper> </S.CommentListItemWrapper> ))} </S.CommentListWrapper> </S.Container> ); }

  • react
  • node.js
  • seo
  • graphql
  • next.js
Levi 댓글 2 좋아요 0 조회수 188

인기 태그

인프런 TOP Writers

주간 인기글