inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

도메인과 S3연결 후 AWS 요금 과금문제 문의드립니다.

미해결

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

강의를 보고 따라하다가 오늘 보니 저번 달 사용량에 관련된 요금이 결제되었다고 메일을 받았습니다.. Amazon Virtual Private Cloud 에서 좀 많이 나왔고,, Amazon Route 53에도 요금이 나왔네요.. 총 만원정도 과금이 되었는데 어떤건지 몰라서 어디부분을 삭제해야 비용이 발생하지 않는걸까요? 강의를 잘 보고 따라했는데.. 당황스럽습니다...

  • react
  • redux
  • node.js
  • express
  • next.js
hyuri 댓글 2 좋아요 0 조회수 416

섹션 10. try - with - resources

해결됨

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

질문입니다! 상황 1 . 우선 NetworkClientExceptionV5는 RuntimeException을 상속 받은 상태입니다. public class NetworkClientExceptionV5 extends RuntimeException { public NetworkClientExceptionV5(String message) { super(message); } } 그러면 NetworkClientExceptionV5를 상속받은 ConnectException과 SendException도 RuntimeException이 되는 거구요. public class ConnectExceptionV5 extends NetworkClientExceptionV5 { private final String address; public ConnectExceptionV5(String address, String message) { super(message); this.address = address; } public String getAddress() { return address; } } public class SendExceptionV5 extends NetworkClientExceptionV5 { private final String data; public SendExceptionV5(String data, String message) { super(message); this.data = data; } public String getData() { return data; } } 상황 2 . 그리고 NetworkClientV5는 AutoCloseable을 구현했습니다. import exception.ex5.exception.ConnectExceptionV5; import exception.ex5.exception.SendExceptionV5; public class NetworkClientV5 implements AutoCloseable { private final String address; private boolean connectError; private boolean sendError; public NetworkClientV5(String address) { this.address = address; } public void connect() { if (connectError) { throw new ConnectExceptionV5(address, address + " 서버 연결 실패"); } // 연결 성공 System.out.println(address + " 서버 연결 성공"); } public void send(String data) { if (sendError) { throw new SendExceptionV5(data, address + " 서버에 데이터 전송 실패 : " + data); } // 전송 성공 System.out.println(address + " 서버에 데이터 전송 : " + data); } public void disconnect () { System.out.println(address + " 서버 연결 해제"); } public void initError(String data) { if (data.contains("error1")) { connectError = true; } if (data.contains("error2")) { sendError = true; } } @Override public void close() throws Exception { System.out.println("NetworkClientV5.close"); disconnect(); } } ==질문입니다!!== NetworkServiceV5에서 public class NetworkServiceV5 { public void sendMessage(String data) { String address = "http://example.com"; try (NetworkClientV5 client = new NetworkClientV5(address)) { client.initError(data); // 추가 client.connect(); client.send(data); } } } try (NetworkClientV5 client = new NetworkClientV5(address))에서 컴파일 오류가 납니다. client에서 올라오는 예외들은 다 RuntimeException이므로 따로 throws를 안 해줘도 되는데 왜 해결하려고 하면 throws를 선언하거나 catch를 해야한다고 하는 건가요? RuntimeException은 예외를 throws 선언없이 자동으로 밖으로 던지기에 catch를 안 해도 상관이 없을텐데 왜 alt + enter을 누르면 throws 선언과 catch를 해야만 된다고 하는 건지 이해가 가지 않습니다. 제가 생각하는 건 이런식으로 흘러간다고 생각했습니다. main()에서 (error1 | error2)를 입력 받음 -> sendMessage를 호출 -> sendMessage에서 코드 진행 -> (client.connect | client.send)를 만나서 NetworkClientV5에 들어감 -> (ConnectException | SendException)을 터트림 -> NetworkClientV5에서 예외를 밖으로 던짐 (런타임이라서 throws 선언 안 해도 던져짐) -> NetworkService로 예외가 날라옴 -> 여기서도 처리가 불가능 하니, 예외를 밖으로 던짐 (여기서 throws 선언을 안해도 던져져야 한다고 생각함. 날아온 예외는 RuntimeException이기 때문에) -> main으로 예외가 넘어옴 -> main에는 catch (Exception e)가 있어서 예외를 잡고 정상흐름으로 돌아옴. 마지막은 메인메서드 입니다! import exception.ex5.exception.SendExceptionV5; import java.util.Scanner; public class NetworkmainV5 { public static void main(String[] args) { NetworkServiceV5 service = new NetworkServiceV5(); Scanner scanner = new Scanner(System.in); while (true) { System.out.print("전송할 문자 : "); String input = scanner.nextLine(); if (input.equals("exit")) { break; } try { service.sendMessage(input); } catch (Exception e) { exceptionHandler(e); } System.out.println(); } System.out.println("프로그램을 종료합니다."); } // 공통 처리 예외 private static void exceptionHandler(Exception e) { System.out.println("사용자 메시지 : 죄송합니다. 알 수 없는 문제가 발생했습니다."); System.out.println("==개발자용 디버깅 메시지=="); // 스택 트레이스 출력 e.printStackTrace(System.out); // 스택 트레이스 출력 System.err //e.printStackTrace(); // 필요하면 예외별로 별도의 추가 처리 가능 if (e instanceof SendExceptionV5 sendEx) { System.out.println("[전송 오류] 전송 데이터 = " + sendEx.getData()); } } }

  • java
  • 객체지향
권정익 댓글 1 좋아요 0 조회수 200

회원가입 과제 완료용

미해결

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

안녕하세요!! 과제 완료해서 피드백 부탁드리고자 올렸습니다! 앞으로 잘 부탁 드립니당~ <html> <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link rel="stylesheet" href="./02-signup.css"> </head> <body> <div class="signUpContent"> <h2> 회원 가입을 위해<br> 정보를 입력해주세요 </h2> <label for="email" class="label text">* 이메일</label> <input id="email" class="input_text" type="text"> <label for="name" class="label text">* 이름</label> <input id="name" class="input_text" type="text"> <label for="password" class="label text">* 비밀번호</label> <input id="password" class="input_text" type="password"> <label for="password_chk" class="label text">* 비밀번호 확인</label> <input id="password_chk" class="input_text" type="password"> <div class="signUpChk"> <input id="gender_w" class="input_radio" type="radio" name="gender"> <label for="gender_w" class="label gender">여성</label> <input id="gender_m" class="input_radio" type="radio" name="gender"> <label for="gender_m" class="label gender">남성</label> </div> <div class="agreeChk"> <input type="checkbox" id="input_chk"> <span class="agree_text"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </span> </div> <div class="out-line"> <div class="line"></div> </div> <button> <span>가입하기</span> </button> </di> </body> </html> <css> * { box-sizing: border-box; } h2 { font-size: 32px; color: #0068FF; font-weight: 700; line-height: 47px; } .out-line{ padding: 30px 0px; } .line { border-bottom: 1px solid #E6E6E6; } .label{ font-size: 16px; font-weight: 400; line-height: 24px; } .signUpContent{ width: 670px; height: 960px; border: 1px solid #AACDFF; border-radius: 20px; box-shadow: 7px 7px 39px rgba(0, 104, 255, .25) ; display: flex; flex-direction: column; padding: 72px 100px 70px 100px; } .label.text{ padding: 20px 20px 0 0; color: #797979; } .input_text{ border-style: none; border-bottom: 1px solid #CFCFCF; height: 60px; } .signUpChk{ display:flex; justify-content: center; align-items: center; padding: 50px 0; } .input_radio{ margin: 0 5px 0 0; width: 20px; height: 20px; } .label.gender{ padding-right: 30px; } .agreeChk{ display: flex; justify-content: center; align-items: center; } .agree_text{ height: 22px; font-size: 14px; font-weight: 400; line-height: 20px; } button{ width: 470px; height: 75px; background-color: #FFF; border: 1px solid #0068FF; border-radius: 10px; } button > span { font-size: 18px; font-weight: 400; color: #0068FF; }

  • react
  • node.js
  • seo
  • graphql
  • next.js
개발하는 알파카 댓글 2 좋아요 0 조회수 301

회원가입하고나서 로그인 풀리는 현상

미해결

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

안녕하세요 회원가입 후에 로그인이 된 상태여야 하는데 로그인이 풀리는 현상을 확인했습니다. 왜 인지 찾아보니 프론트에선 회원가입 후 더미데이터를 가지고 로그인 하고 있었음 백단에서는 회원가입 유저의 정보를 내려주지 않고 있었음. 이런 경우때문인 것 같았습니다. 그래서 회원가입 후 메인 페이지로 라우팅 되면 메인페이지에서 로그인 유무를 판단하는 로직이 실행되고, 더미데이터로 있던 데이터를 로그인 풀어버려서 그런게 아닐까 합니다. 그러면 /back/routes/user.js const user = await User.create({ email, nickname, password: hashedPassword, }); 여기서 user정보를 내려줘야할거 같은데 여기서 더 필요한 post, image같은 이미지는 어떻게 추가해야하는지 궁금합니다.

  • react
  • redux
  • node.js
  • express
  • next.js
챠챠_ 댓글 1 좋아요 0 조회수 166

센셕4 게시물 불러오기 postcard.js에서 post.User.nickname[0]에러

미해결

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

안녕하세요 센셕4 게시물 불러오기 postcard.js에서 post.User.nickname[0]에러가 발생해서 처음엔 간단하게 /components/postcard.js <Card.Meta avatar={<Avatar>{post.User?.nickname[0]}</Avatar>} title={post.User?.nickname} description={<PostCardContent postData={post.content} />} /> 이런식으로 해결했었습니다. 아 같은 파일 위치에서 {id && post.User?.id === id ? ( <> <Button type='primary' key='modify'> 수정 </Button> <Button type='danger' key={"delete"} onClick={onRemovePost} loading={removePostLoading}> 삭제 </Button> </> ) : ( <Button type='dashed' key={"report"}> 신고 </Button> )} post.User?.id 이것도 같은 식으로 처리했었습니다. 그런데 제로초님 코딩을 몇번 다시봤더니 비슷한 에러가 코멘트에서 났었는데 /routes/posts.js const express = require("express"); const router = express.Router(); const { Post, User, Image, Comment } = require("../models"); // GET /posts 여러 게시글 가져오기 router.get("/", async (req, res, next) => { try { const posts = await Post.findAll({ limit: 10, include: [ { model: User, attributes: ["id", "nickname"], }, { model: Image, }, { model: Comment, include: [ { model: User, attributes: ["id", "nickname"], }, ], }, ], }); res.status(200).json(posts); } catch (error) { console.error(error); next(error); } }); module.exports = router; 이런식으로 데이 필요한 id, nickname을 넣어주셔서 ?를 붙이지 않고 해결하셨더라구요. 혹시 저 nickname부분도 위와같이 백단에서 코드를 수정해서 고칠수 있을까요? 따라서 해봤는데 잘 안되서 여쭤봅니다.

  • react
  • redux
  • node.js
  • express
  • next.js
챠챠_ 댓글 3 좋아요 0 조회수 354

리액트쿼리 어떤부분이 잘못되었을까요?

해결됨

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

안녕하세요. 인피니티스크롤 을 따라하는데 잘안되서요. const queryClient = new QueryClient(); await queryClient.prefetchInfiniteQuery({ queryKey: ["member", "sales", sawonCode], queryFn: getSales, initialPageParam: 0, }) const dehydratedState = dehydrate(queryClient); return <> <Suspense fallback={<Loading />}> <HydrationBoundary state={dehydratedState}> <SalesList sawonCode={sawonCode} /> </HydrationBoundary> </Suspense> </> const { data, fetchNextPage, hasNextPage, isFetching, } = useInfiniteQuery<Item[], Object, InfiniteData<Item[]>, [_1: string, _2: string, _3: number], number>({ queryKey: ["member", "sales", sawonCode], queryFn: getSales, initialPageParam: 0, getNextPageParam: (lastPage) => lastPage.at(-1)?.page, staleTime: 60 * 1000, // fresh -> stale, 5분이라는 기준 gcTime: 300 * 1000, }); const { ref, inView } = useInView({ threshold: 0, delay: 0, }); useEffect(() => { if(inView) { console.log(data); !isFetching && hasNextPage && fetchNextPage(); } }, [inView, isFetching, hasNextPage, fetchNextPage]); useEffect에 콘솔에찍은 data는 undefined 이 찍히고 그후에 getSales에 찍은 api 로 가져온 데이터가 찍힙니다. 어떤게 잘못되서 data에 값이 안들어가는지 몇시간을 봐도 잘모르겠네요..ㅜㅜ

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

NextAuth Credentials authorize의 결과 타입

미해결

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

return { name: user.nickname, email: user.email, image: user.profileImage, ...user, }; 강의에서 user를 그대로 리턴해서 사용하지 않고 user를 커스텀해준 것을 보았습니다. 현재 return하는 값은 Typescript에서 지정한 User 타입을 그대로 사용하면서 수정해서 값을 할당해줬다고 이해했는데 추가로 들어가는 ...user 는 어디에서 사용할 수 있는지 궁금합니다. 추가로 제 코드에는 반환하는 정보가 더 많은데 어떤 식으로 값을 할당해서 사용할 수 있는지 궁금합니다. 타입을 하나 만들어서 확장해서 사용하고 싶은데 따로 파일을 만들어줘야 할까요?

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

데이터 베이스 쿼리 실행 시점 관련 문의

미해결

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

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 이전에 데이터베이스에 반영되는 실행 시점은 em.flush() 트랜잭션 커밋 JPQL 쿼리 실행 으로 알고 있습니다. 그런데 11:45초 쯤부터 em.persist(team) 을 실행할때 id 값을 갖고 오기위해 new Member 이전에 insert문이 실행된다면 위의 경우가 아닌 것으로 판단되는데 em.persist 호출해도 쓰기 지연 SQL에 쌓이는 것이 아닌 바로 쿼리를 실행하게 되는 건가요?

  • java
  • jpa
김가가가 댓글 2 좋아요 0 조회수 222

로그인 기능을 next-auth와 수업에서 처럼 직접 구현하는 것 어떤걸 더 추천하시나요?

미해결

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

안녕하세요 제로초님 강의를 따라가다 보니 로그인 부분이 엄청 복잡하더라구요, 개인적으로 next-auth을 사용하면 되게 간편했던걸로 기억하는데 제로초님은 로그인 기능을 만들게 된다면 next-auth와 수업에서 처럼 직접 구현하는 것 어떤걸 더 추천하실지 궁금합니다. 직접구현하는게 로그인이 어케 이뤄지는지 이해할수있어서 좋은거같은데 여쭤보고 싶었습니다!

  • react
  • redux
  • node.js
  • express
  • next.js
챠챠_ 댓글 1 좋아요 0 조회수 290

changer라는 컴포넌트를 사용하는 이유

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

HeaderBgChanger라는 컴포넌트는 단순히 서버 컴포넌트에서 react hook을 사용할 수 없기 때문에 만드는 컴포넌트인지 궁금합니다. 또 이렇게 컴포넌트를 만들 경우에 렌더링 될 때 영향을 주는 부분은 없는지 궁금합니다.

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
김택수 댓글 2 좋아요 1 조회수 293

Nextjs fetch, react-query 캐시 개념

미해결

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

Nextjs fetch도 캐시가 지원되고, react-query도 캐시가 지원되는걸로 이해를 했는데요 문득 궁금한 점이 생겨서 질문 드립니다. Nextjs fetch와 react-query에서의 캐시는 같은 개념인가요? 아니면 서로 다른 개념인가요? 왜 Nextjs fetch를 안 쓰고 react-query를 쓰는 걸까요? Nextjs fetch는 어떨 때 쓰고 react-query는 어떨 때 쓰는 건가요? 감사합니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
주니어에요 댓글 1 좋아요 0 조회수 454

jar build 동작 확인을 위한 Window cmd 이용 중 Build failed with an exception 오류

미해결

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

질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] H2 database Ctrl C 후 gradlew clean build 실행 시 아래와 같이 화면이 나타납니다. 이전에 시행했을땐 이런 오류가 떴습니다. (base) C:\study\jpashop\jpashop>gradlew clean build Welcome to Gradle 8.7! Here are the highlights of this release: Compiling and testing with Java 22 Cacheable Groovy script compilation New methods in lazy collection properties For more details see https://docs.gradle.org/8.7/release-notes.html Starting a Gradle Daemon (subsequent builds will be faster) Task :compileJava FAILED FAILURE: Build failed with an exception. What went wrong: Execution failed for task ':compileJava'. error: invalid source release: 21 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 8s 2 actionable tasks: 2 executed Gradle 8.7같은 경우 Java 22와 호환이 되어있는것 같은데 Java21로 설정하고 프로젝트를 진행 했을 때 어떻게 처리해야하는지 궁금합니다.

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
박진재 댓글 1 좋아요 0 조회수 561

Spring Data JPA에서 update 하는 방법

미해결

실전! 스프링 데이터 JPA

검색해보니 Spring Data JPA는 순수 JPA와 다르게 save() 조차 하지 않아도 자동으로 변경감지가 일어난다고하는데, 제가 작성한 코드를 바탕으로 테스트해보니 save()를 하지 않으면 업데이트가 되지 않았습니다. 조금 더 디테일한 설명을 해주실 수 있을까요? save()는 @PostMapping의 postRepository.save (findPost); 부분을 지칭하는 것입니다. @Controller @RequestMapping("/post") @RequiredArgsConstructor @Slf4j public class PostController { private final BoardService boardService; private final BoardRepository boardRepository; private final PostService postService; private final PostRepository postRepository; /** * 게시물 수정 */ @GetMapping("/edit/{id}") public String showEdit(@PathVariable Long id, @SessionAttribute(name = SessionConst.LOGIN_MEMBER, required = false) Member loginMember, Model model) { Post findPost = boardRepository.findById(id).orElseThrow(() -> new IllegalArgumentException("No Post Found."));// findPost 게시물 보여주기 model.addAttribute("findPost", findPost); return "editPost"; } @PostMapping("/edit/{id}") public String editPost(@PathVariable Long id, Post editPost) { Post findPost = boardRepository.findById(id).orElseThrow(() -> new IllegalArgumentException("No Post Found.")); findPost.setTitle(editPost.getTitle()); findPost.setContent(editPost.getContent()); findPost.setCategory(editPost.getCategory()); findPost.setLastModifiedTime(LocalDateTime.now()); postRepository.save(findPost); return "redirect:/board/post/" + id; } } public interface PostRepository extends JpaRepository<Post, Long> { /** * 게시물 저장 */ Post save(Post post); }

  • java
  • spring
  • spring-boot
  • jpa
Jaesang Yoon 댓글 2 좋아요 0 조회수 2534

Suspense 컴포넌트의 fallback 요소로 클라이언트 컴포넌트 전달?

해결됨

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

안녕하세요. Suspense 컴포넌트의 fallback 요소로 서버 컴포넌트 전달은 문제가 없는데, 내부적으로 useEffect와 타이머를 사용하는 클라이언트 컴포넌트를 전달했더니 해당 훅과 관련된 내용은 모두 스킵되고 그냥 초기 렌더링 내용만 나오는 것 같은데, 애초에 클라이언트 컴포넌트는 전달이 불가능한걸까요? 클라이언트 컴포넌트 사용 의도는 1초마다 로딩바 게이지가 증가하는 모습을 보여주고 싶어서 사용해보려고 했습니다. 공식 문서를 봐도 해당 내용에 대해서는 언급이 없는 것 같습니다. 감사합니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
Yu Byung Suk 댓글 1 좋아요 0 조회수 359

useQuery 오류가 발생합니다

미해결

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

"use client"; import { useQuery } from "@tanstack/react-query"; import { getPostRecommends } from "@/app/(afterLogin)/home/_lib/getPostRecommends"; import Post from "@/app/(afterLogin)/_component/Post"; import { Post as IPost } from "@/model/Post"; export default function PostRecommends() { const { data, error, isLoading } = useQuery<IPost[]>({ queryKey: ["posts", "recommends"], queryFn: getPostRecommends, // gcTime은 staleTime보다 길어야한다 staleTime: 5 * 1000, // 새로 가져온 데이터를 몇 초 후에 fresh에서 stale로 바꿀 것인지 gcTime: 300 * 1000, }); if (isLoading) { return <div>Loading...</div>; } if (error) { return <div>Failed to load posts</div>; } return data?.map((post) => <Post key={post.postId} post={post} />); } react query에서 에러가 발생합니다 이유는 모르겠지만 useQuery부분에서 에러가 발생하는 것 같습니다 getPostRecommend.ts는 이렇게 작성한 상태입니다 export async function getPostRecommends() { const res = await fetch(`http://localhost:9090/api/postRecommends`, { next: { tags: ["posts", "recommends"], }, //캐시를 저장하라고 지정하는 태그 // 너무 강력하게 캐싱을 하면 새로운 데이터가 안불러와 질 수 있다 // 이런 일을 방지하기위해 새로고침을 해야하는 이때 tags를 사용한다 }); // The return value is *not* serialized // You can return Date, Map, Set, etc. if (!res.ok) { // This will activate the closest `error.js` Error Boundary throw new Error("Failed to fetch data"); } // 이렇게 하면 recommends를 키로 가지고 있는 서버에 있는 캐시가 날아감 // revalidateTag("recommends") // home으로 온 요청이 왔을때 페이지 전체의 캐시를 새로고침한다 // revalidatePath('/home') return res.json(); } 근데 getPostRecoomed.ts가 잘못된거 같지는 않은것이 처음 작동하는 queryClient.prefetchQuery 는 잘 작동합니다

  • react
  • next.js
  • react-query
  • next-auth
  • msw
i1004gy 댓글 2 좋아요 0 조회수 340

하이드레이션 에러

미해결

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

Unhandled Runtime Error Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Did not expect server HTML to contain a <a> in <div>. See more info here: https://nextjs.org/docs/messages/react-hydration-error 이런 에러가 발생하는데 초반 랜더링과 뭐가 다르거나 랜덤 데이터를 사용하면 오류가 나온다는 것 같아서 혹시 faker를 사용해서 생긴느 에러인지 궁금합니다 "use client"; import { useQuery } from "@tanstack/react-query"; import { getPostRecommends } from "@/app/(afterLogin)/home/_lib/getPostRecommends"; import Post from "@/app/(afterLogin)/_component/Post"; import { Post as IPost } from "@/model/Post"; export default function PostRecommends() { const { data } = useQuery<IPost[]>({ queryKey: ["posts", "recommends"], queryFn: getPostRecommends, // gcTime은 staleTime보다 길어야한다 staleTime: 60 * 1000, // 새로 가져온 데이터를 몇 초 후에 fresh에서 stale로 바꿀 것인지 }); return data?.map((post) => <Post key={post.postId} post={post} />); } 여기에서 queryFn: getPostRecommends 이 부분을 지워도 정상 작동하는데 queryFn: getPostRecommends 이것이 하는 기능이 무엇인가요? 또 여기에서 Retech와 invalidate를 눌러도 트윗이 변하지 않습니다 혹시 위 에러와 관련이 있나요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
i1004gy 댓글 2 좋아요 0 조회수 497

참조값(사이드 이펙트) 질문

해결됨

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

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 안녕하세요. 영한님의 설명을 보면 자바 문법상 Address b = a 가 만들어저도 문제가 없다고 하였고, 참조값을 공유해서 사이드 이펙트를 만드는 경우가 있다고 말하였습니다. 여기서 갑자기 궁금해지네요. 여태 까지의 코드를 보면, 사이드 이펙트를 만드는 경우가 없었던 걸로 기억하는데.. 어는 경우 에서야, 사이드 이펙트를 활용하는지. 예시를 알켜 주실수 있으실까요? 답변 부탁 드립니다.

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

graphQL 강의중

해결됨

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

플레이 그라운드에서 스크랩 해오면 코드에서 인식이 안돼는것 같은데 원인을 못찾겠습니다 ㅠ

  • react
  • node.js
  • seo
  • graphql
  • next.js
박수민 댓글 2 좋아요 0 조회수 333

수업자료 질문입니다.

해결됨

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

안녕하세요 오늘 이 프론트엔드 부트캠프 수업을 결제해서 시작했는데 노션 수업자료를 준다라고 알고 있는데 이 노션 수업자료는 어디서 받아보면 되나요?

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

섹션2 문제와 풀이

해결됨

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

[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] section2 문제와 풀이를 다음과 같이 풀어보았는데, 결과는 맞지만 제 코드에서 부족한 부분이 있는지, 개선점은 없는지 한번 확인 부탁드립니다!

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

인기 태그

인프런 TOP Writers

주간 인기글