inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

찜하기 관련 질문드립니다.

미해결

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

안녕하세요 상세페이지에서 찜하기 요청을 하게되면 users/favorite/${peopleId}로 post 요청을 보내게되고 그럼 users/favorite api에 찜한 사람들의 목록이 추가됩니다. 찜하기를 눌렀을경우 아이콘의 컬러를 변경시켜야해서 getQueryData로 찜한 사람들의 목록 을 가져오려고 하였는데 const { data: likePeopleList } = useQuery<GetPeoples>({ queryKey: ["get", "likepeoples"], queryFn: getLikePeoples, staleTime: 60 * 1000, // fresh -> stale, 5분이라는 기준 gcTime: 300 * 1000, }); 위에 코드가 없으면 likeQuery를 가져오지 못하고있는것같습니다. getQueryData로 가져오는 방법이 잘못된걸까요? 다른 좋은 방법있다면 여쭤보고싶습니다. 밑에는 전체 코드입니다. type Props = { peopleId: string; }; export default function PeoplePosts({ peopleId }: Props) { const { data } = useQuery< GetPeoplePost, Object, GetPeoplePost, [_1: string, _2: string, _3: string] >({ queryKey: ["get", "peoplesDetail", peopleId], queryFn: getPeopleDetail, }); const { data: likePeopleList } = useQuery<GetPeoples>({ queryKey: ["get", "likepeoples"], queryFn: getLikePeoples, staleTime: 60 * 1000, // fresh -> stale, 5분이라는 기준 gcTime: 300 * 1000, }); const { content, nickname, userFileUrl, favoriteCount, viewCount, softSkill, techStack, links, position, alarmStatus, year, } = data?.data ?? {}; const queryClient = useQueryClient(); const likeQuery = queryClient.getQueryData<GetPeoples>([ "get", "likepeoples", ]); console.log("likeQuery", likeQuery); const liked = !!likeQuery?.data.find( (item) => item.userId === Number(peopleId), ); console.log("liked", liked); const like = useMutation({ mutationFn: (peopleId: string) => { return fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/users/favorite/${peopleId}`, { method: "post", }, ); }, onMutate(peopleId: string) { const oldData = queryClient.getQueryData<GetPeoples>([ "get", "likepeoples", ]); if (oldData) { const newData = { ...oldData, data: oldData.data.map((item) => ({ ...item, userId: Number(peopleId), })), }; queryClient.setQueryData(["get", "likepeoples"], newData); } }, }); const unLike = useMutation({ mutationFn: (peopleId: string) => { return fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/users/favorite/${peopleId}`, { method: "delete", }, ); }, onMutate(peopleId: string) { const oldData = queryClient.getQueryData<GetPeoples>([ "get", "likepeoples", ]); if (oldData) { const deleteData = { ...oldData, data: oldData.data.filter((item) => item.userId !== Number(peopleId)), }; queryClient.setQueryData(["get", "likepeoples"], deleteData); } }, }); const onLike: MouseEventHandler<HTMLButtonElement> = (e) => { e.preventDefault(); if (liked) { unLike.mutate(peopleId); } else { like.mutate(peopleId); } }; return ( <div className="flex flex-col"> <div className="flex flex-col gap-4 border-b pb-10"> <div className="flex items-center gap-[10px]"> <Image src={`${userFileUrl}`} alt="유저프로필" width={30} height={30} /> <h1 className="text-[32px] font-bold">{nickname}</h1> <div> <BlueTextBox textSize="12px" textToShow={`${position}`} /> </div> </div> <div className="flex flex-col gap-2"> {softSkill ?.split(",") .map((skill, i) => <HashTag text={skill} key={i} />)} </div> <div className="flex gap-3"> <HeartEyeIconBox count={favoriteCount as number} icon={heartIcon} /> <HeartEyeIconBox count={viewCount as number} icon={eyeIcon} /> </div> </div> <div className="mt-[42px] flex flex-col gap-[50px]"> <div className="people-post-grid"> <h1 className="text-[22px] font-bold">경력</h1> <h3>{year}</h3> </div> <div className="people-post-grid"> <h1 className="text-[22px] font-bold">사용언어</h1> <div className="flex gap-2"> {techStack ?.split(",") .map((stack, i) => ( <TechStack techStack={stack} showText key={`stack${i}`} /> ))} </div> </div> <div className="flex flex-col gap-3"> <h1 className="text-[22px] font-bold">자기소개</h1> <p>{content}</p> </div> <div className="flex flex-col gap-3"> <h1 className="text-[22px] font-bold">Link</h1> <Link href={links as string}>{links}</Link> </div> </div> <div className="mt-[60px] flex gap-[13px] self-center"> <button className={`h-[58px] w-[142px] rounded-md bg-neutral-orange-500 font-bold ${alarmStatus ? "text-neutral-white-0" : "text-neutral-black-800"}`} > {alarmStatus ? "제안하기" : "제안불가"} </button> <button onClick={onLike} className="flex h-[58px] w-[58px] flex-col items-center justify-center rounded-md border" > {liked ? ( <Image src={fillHeartIcon} alt="하트아이콘" width={20} height={20} /> ) : ( <Image src={heartIcon} alt="하트아이콘" width={20} height={20} /> )} <h5 className="text-[12px]">{favoriteCount}</h5> </button> </div> </div> ); }

  • react
  • next.js
  • react-query
  • next-auth
  • msw
댓글 1 좋아요 0 조회수 230

영속성 전이는 연관관계를 매핑하는 것과 관련이 없다는 의미에 대한 질문

미해결

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

강의 자료에 보면 영속성 전이는 연관관계를 매핑하는 것과 아무 관련이 없음이라고 하셨는데 이 얘기는 즉, 양방향인 경우 편의메소드를 캐스캐이드로 대체할 수 없다는 것과 같은 얘기인것인가요? 캐스케이드를 사용한다고 편의 메소드를 사용하지 않아도 된다는 얘기가 아니다로 이해를 해도 될까요?

  • java
  • jpa
japark720 댓글 2 좋아요 0 조회수 251

h2 데이터 베이스 연결 문제

미해결

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

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 뭐가 문제일까여 밑에 글 찾아보고 rm -rf test.mv .db touch test.mv .db 하면 된다길래 해봣는데 이렇게 뜹니다 ! ㅠ 도와주세요

  • java
  • spring
  • mvc
  • spring-boot
김병곤 댓글 4 좋아요 1 조회수 734

nx,ny에 대한 질문

해결됨

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

if(nx>=0 && nx<n && ny>=0 && ny<n && arr[nx][ny]>=arr[i][j]) { flag = false; break; } 이 조건에 대해 질문이 있습니다. nx>=0 && nx<n && ny>=0 && ny<n 이것이 가장자리를 찾는 조건식인 것은 알겠습니다. 그런데 if조건식이 and연산자로 이루어져있어서 하나라도 false이면 if문이 돌아가지 않는것으로 알고있습니다. 그럼 가장자리에 있는 값들 중에 arr[i][j]보다 큰 값들만 if문을 돌면서 flag를 false로 주는 것인데 가장자리가 아니면서 arr[i][j]보다 큰 값들은 어디서 비교를 하나요?? 또, arr의 n의 개수를 그냥 n으로 잡으면 가장자리를 0으로 초기화를 언제 시키는 것인지 궁금합니다 제가 처음 풀었을때 arr을 arr[n+2][n+2]로 잡고 (i=1;i<n;i++)로 이중for문을 돌려 풀었습니다 이렇게 풀어도 되는건가요?

  • java
  • 코딩-테스트
해톨 댓글 1 좋아요 0 조회수 305

geolocation부분에 대해 질문있습니다.

미해결

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

geolocation부분에 const askForLocation = function () { navigator.geolocation.getCurrentPosition((position) => { console.log(position); }); }; askForLocation(); 이렇게 함수가 있는데 여기서 궁금한점이 askForLocation(); 함수 호출부분에 인자로 전달하는 것이 없는데 매개변수로 position에 위치정보 객체형식으로 콘솔에 나오는 이유가 뭔지 궁금합니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
부드러운 족제비 댓글 3 좋아요 0 조회수 293

교제 다운로더

미해결

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

잊어버리고 있다 다시 시작 할려는데 교제를 찾을수 없네요.. car4000@naver.com 아니면 다운 받는곳이 있나요?

  • HTML/CSS
  • jquery
최수성 댓글 1 좋아요 1 조회수 206

F1실무코드

미해결

웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)

안녕하십니까? 강사님. 다름이 아니라 F1 실무코드로 변경해서 만드신 코드도 한번 보고 싶은데... 가능할까요? 파일 있으시다면 업로드 시켜주시면 감사하겠습니다:)

  • HTML/CSS
  • jquery
sy4562 댓글 1 좋아요 0 조회수 183

3000번은 잘 들어가지는데 80번은 안됩니다.

미해결

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

sudo iptables -A PREROUTING -t nat -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 3000 까지 하고 3000번 포트로 잘 들어가지는데 3000번포트를 지우고 들어가봐도 뒤에 :80을 붙여 넣어 들어가봐도 사이트에 연결할 수 없음이 뜨네요 왜 그럴까요??

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
댓글 0 좋아요 1 조회수 316

.container>div{} 작성해야 하는 경우는?

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

.container{} .container>div{} .container{}만 하고 .container>div{} 는 하지 않는 경우도 있고 .container>div{} 를 하는 경우도 있는데 .container>div{} 어떤 경우에 해야 합니까?

  • HTML/CSS
  • jquery
  • 웹-디자인
HL5PFM 댓글 1 좋아요 1 조회수 198

doitdjango 블로그 게시판 작동 오류

미해결

Do It! 장고+부트스트랩: 파이썬 웹개발의 정석

안녕하세요. 요즘에 'aws lightsail 로 프로젝트 옮기기'를 듣고 있습니다. 거기서 블로그 글을 참고하라고 하셔서, 블로그를 들어갔더니, 해당 블로그 게시판이 작동하지 않습니다. 확인 부탁드려도 될까요? 감사합니다.

  • HTML/CSS
  • javascript
  • python
  • django
  • bootstrap
  • aws
  • docker
  • tdd
smile.jisoo 댓글 1 좋아요 1 조회수 316

AuthenticationManager 질문 있습니다.

미해결

스프링 시큐리티 OAuth2

강사님 강의 스프링 시큐리티 6 에서 AuthenticationManager를 생성할 때 HttpSecurity.getSharedObject() 를 사용하는 것으로 공부했는데 AuthenticationConfiguration 으로 생성하는 것과는 어떤 차이가 있는 건가요? 더 권장되는 방식이 있는 건가요?? 좋은 강의 감사합니다.

  • java
  • spring
  • spring-boot
  • oauth
이런개발 댓글 2 좋아요 0 조회수 388

단방향으로 코드를 짜도 Lazy 로딩으로 바꿔야하나요??

미해결

실전! 스프링 데이터 JPA

양방향으로 코드를 짤때 Lazy로 바꿔야하는건 이유를 아는데 단방향일때는 굳이 안바꿔도 되지 않을까 생각이 들어 질문합니다.

  • java
  • spring
  • spring-boot
  • jpa
restpmpmpm 댓글 1 좋아요 0 조회수 288

함수, 변수의 호이스팅 부분 질문있습니다.

해결됨

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

함수, 변수의 호이스팅 강의 영상 부분에 if (storageData?.complete) { newLi.classList.add("complete"); } 이 코드에서 storageData 뒤에 ? 이 물으표가 없으면 매개변수를 받아오지 않게 되니 undefined라고 강사님이 말씀하시는데 이게 무슨 말인지 잘 모르겠습니다. 그리고 ToDoList에서 리스트에 추가를 하고 더블클릭 삭제, 전체 삭제까지는 어느정도 이해가 되는데 로컬스트리지 전체 부분이 조금 이해도 어려운데 어떻게 이해를 하면서 공부를 하면 좋을까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
부드러운 족제비 댓글 2 좋아요 0 조회수 226

MappedSuperClass 사용하는 경우 createdBy 외래키 제약조건

미해결

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

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 모든 테이블에 깔리는 createdBy, lastModifiedBy 값들의 경우 실제로는 member 테이블의 id(pk) 값일텐데요. @MappedSuperClass를 사용하면 테이블 매핑이 된 상태가 아니라 @ManyToOne 등이 불가한데, 실무에서는 외래키 제약조건을 어떻게 주로 처리하셨을까요?

  • java
  • jpa
박호정 댓글 1 좋아요 0 조회수 221

h2 window 설정 h2.bat 안됩니다 도와주세요

해결됨

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

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

  • java
  • spring
  • mvc
  • spring-boot
김병곤 댓글 1 좋아요 1 조회수 562

H2 테이블 생성이 되지 않습니다.

미해결

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 안녕하세요, 이전 강의의 MEMBER (id, username으로 구성된 테이블) 까지는 잘 생성이 되었는데 [엔티티 클래스 개발] 부터 DB가 업데이트 되지 않는 것 같습니다. 개발 환경 특이사항 스프링부트 3.3 / JUnit5 현재 문제 상황 애플리케이션 실행 시 Started Application까지 문제 없이 실행된 이후 쿼리가 찍히지 않음 DB에는 변동이 없음 (MEMBER는 이전에 생성했던 테이블) 질문 전 확인 완료 사항 프로젝트 처음 생성 시 생성되는 Application 클래스의 패키지 하위에 엔티티 클래스들이 위치함 h2로 테이블 생성이 안됩니다. ddl-auto 옵션이 create로 설정되어 있음 h2 테이블 생성이 안됩니다 application.yml의 들여쓰기를 확인함 h2 데이터베이스 테이블 생성이 안됩니다. DB url을 정확히 입력함 확인 부탁 드립니다. 감사합니다!

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
이지윤 댓글 2 좋아요 0 조회수 435

예제처럼 선밖으로 딱 붙여서 배치하는법있나요

미해결

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

강의에서처럼 선 안쪽경계에 자식요소가 부모요소 너비만큼 이동했을때 선안쪽경계에 붙는게 아니라 예제처럼 선바깥쪽경계에 딱 붙게하려면 어떻게 하는게 가장 좋은 방법인가요? 같은 질문이 있긴한데 border-box를 줘도 선두께만큼 배치한 자식요소도 같이 따라 가서 결국 똑같이 되서요

  • HTML/CSS
  • jquery
부드러운 종다리 댓글 1 좋아요 1 조회수 196

F-1 메뉴 제이쿼리로 제작하는 강의

미해결

웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)

강사님. F1 메뉴 제이쿼리 로 제작된 파일은 업로드 되지 않아 혹시나 싶어 문의글 남깁니다^^;;

  • HTML/CSS
  • jquery
sy4562 댓글 2 좋아요 0 조회수 223

localhost 오류

미해결

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

cmd가서 종료한다음 다시 실행햇는데도 안되어서 질문 드려요

  • java
  • spring
  • mvc
  • spring-boot
스치리밤 댓글 2 좋아요 0 조회수 379

spring boot를 사용한 social login

해결됨

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

Next.js와 Spring boot를 사용해서 소셜 로그인을 추가하려고 합니다. 소셜 로그인의 경우 코드와 토큰을 프론트에서 관리하지 않는 것이 좋다고 하여 백엔드에서 모든 로직을 처리하고 있습니다. 현재 프론트에서 window.location.href = "http://localhost:8080/oauth2/authorization/google"; 위와 같은 경로로 백엔드로 소셜 로그인 요청을 보내고 백엔드에서는 소셜 로그인을 진행한 뒤에 유저 정보를 생성하고 JWT를 생성한 뒤 응답의 헤더에 쿠키 형태로 JWT를 넣어 response.sendRedirect("http://localhost:3000/auth/social"); 로 리다이렉트하고 있습니다. 프론트에서는 /auth/social 페이지에서 쿠키에 있는 JWT를 꺼내 유저 정보를 가져오는 API를 다시 호출해 유저 정보를 가져오고 있습니다. 이 후 auth.js 라이브러리를 통한 session 관리를 하고자 하는데 session을 업데이트 하려면 어떻게 해야 하나요..? (session.user가 있는지 없는지를 통한 로그인 체크를 위해 사용한다고 이해했습니다.) 서버 컴포넌트에서 import { auth } from "@/auth"; 를 통해 가져온 session에 데이터를 넣어보았지만 데이터가 제대로 들어가지 않는 것 같아 조언을 구해봅니다..

  • react
  • next.js
  • react-query
  • next-auth
  • msw
이우열 댓글 1 좋아요 0 조회수 891

인기 태그

인프런 TOP Writers

주간 인기글