inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

http://localhost:3000/api/auth/session 500에러

미해결

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

안녕하세요 선생님 로컬에서 locallhost:3000/api/auth를 호출하면 500에러가 발생합니다. * 참고: 1. useSession()은 모두 클라이언트 컴포넌트에만 적용했습니다. 2. 원인을 찾아보다가 예전 선생님 답변해주신 서버 컴포넌트에서 세션props로 받아스라고 하신거 참고해서 그렇게 수정해도 동일하게 발생합니다. 3. 비슷한 질문에 쿠키랑 다 없앤뒤 잘됐다는것도 보고 다제거해봤지만 동일하게 발생했습니다. 4. .next, node_module 다 제거후 새로 깔거나, 빌드를 새로 하거나 테스트도 해보았습니다. 5. 브라우저 껐다키고, 컴퓨터 재부팅도 해보았습니다. 6. 선생님의 깃코드를 가져다 쓰기도 해보았습니다. 빌드 한후에 npm run start로 했을땐 정상적으로 나오는데 로컬에서만 발생합니다. /src/auth.ts import NextAuth from "next-auth" import Credentials from "next-auth/providers/credentials" export const { handlers, signIn, signOut, auth } = NextAuth({ pages: { signIn: '/login', newUser: '/signup', }, providers: [ Credentials({ credentials: { id: {}, password: {}, }, authorize: async (credentials) => { try { const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(credentials), }) console.log(authResponse.ok, '-----------------------------authResponse.ok'); if (!authResponse.ok) { return null; } let user = await authResponse.json(); console.log(user, '--------------------------------'); return { ...user, email: user.id, name: user.nickname, image: user.image, } } catch (err) { console.error('로그인 에러', err); } }, }), ], }) .env AUTH_SECRET=WKFOJhbw7gZOYXumT66CwwKtDZ9YsalV8qMRx134Uc8= AUTH_TRUST_HOST=http://localhost:3000 .env.local NEXT_PUBLIC_API_MOCKING=enabled NEXT_PUBLIC_MODE=local NEXT_PUBLIC_BASE_URL=http://localhost:9090 NEXTAUTH_URL=http://localhost:3000 /src/app/layout.tsx import type { Metadata, Viewport } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; import { MSWComponent } from './_component/MSWComponent'; import AuthSession from './_component/AuthSession'; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: { template: '%s | MBTI', default: 'MBTI가 어떻게 되세요?', }, description: "MBTI로 찾는 내 연인", }; export const viewport: Viewport = { width: 'device-width', initialScale: 1, maximumScale: 1, userScalable: false, // Also supported by less commonly used // interactiveWidget: 'resizes-visual', } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body className={`${inter.className} antialiased`}> <MSWComponent /> <AuthSession> {children} </AuthSession> </body> </html> ); } /src/app/_component 'use client'; import { SessionProvider } from 'next-auth/react'; import { ReactNode } from 'react'; export default function AuthSession({children}: {children: ReactNode}) { return ( <SessionProvider>{children}</SessionProvider> ) } /src/app/api/auth/[...nextauth]/route.ts import { handlers } from "@/auth" // Referring to the auth.ts we just created export const { GET, POST } = handlers; 폴더구조 📦src ┣ 📂app ┃ ┣ 📂(afterLogin) ┃ ┃ ┣ 📂(home) ┃ ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┃ ┣ 📜mbtiCarousel.module.css ┃ ┃ ┃ ┃ ┣ 📜MbtiCarousel.tsx ┃ ┃ ┃ ┃ ┗ 📜UserCardList.tsx ┃ ┃ ┃ ┗ 📂_lib ┃ ┃ ┃ ┃ ┗ 📜getUserAll.ts ┃ ┃ ┣ 📂@modal ┃ ┃ ┃ ┣ 📂(.)promise ┃ ┃ ┃ ┃ ┗ 📂form ┃ ┃ ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┃ ┣ 📂[userId] ┃ ┃ ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┃ ┃ ┣ 📜UserDetailContent.tsx ┃ ┃ ┃ ┃ ┃ ┣ 📜UserDetailPromise.tsx ┃ ┃ ┃ ┃ ┃ ┣ 📜UserDetailTop.tsx ┃ ┃ ┃ ┃ ┃ ┣ 📜UserInfo.tsx ┃ ┃ ┃ ┃ ┃ ┗ 📜UsrCarousel.tsx ┃ ┃ ┃ ┃ ┣ 📂_lib ┃ ┃ ┃ ┃ ┃ ┣ 📜getAUser.ts ┃ ┃ ┃ ┃ ┃ ┗ 📜getUserPromise.ts ┃ ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┃ ┗ 📜default.tsx ┃ ┃ ┣ 📂like ┃ ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┃ ┣ 📜LikeCard.tsx ┃ ┃ ┃ ┃ ┣ 📜LikeTabProvider.tsx ┃ ┃ ┃ ┃ ┣ 📜Tab.tsx ┃ ┃ ┃ ┃ ┣ 📜TabDecider.tsx ┃ ┃ ┃ ┃ ┣ 📜UserILike.tsx ┃ ┃ ┃ ┃ ┗ 📜UserLikeMe.tsx ┃ ┃ ┃ ┣ 📂_lib ┃ ┃ ┃ ┃ ┣ 📜getUserILike.ts ┃ ┃ ┃ ┃ ┗ 📜getUserLikeMe.ts ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📂messages ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📂profile ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📂promise ┃ ┃ ┃ ┣ 📂form ┃ ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┃ ┣ 📜PromiseCard.tsx ┃ ┃ ┃ ┃ ┣ 📜PromiseCardDropdown.tsx ┃ ┃ ┃ ┃ ┣ 📜PromiseCardLink.tsx ┃ ┃ ┃ ┃ ┣ 📜PromiseFormButton.tsx ┃ ┃ ┃ ┃ ┣ 📜promiseSection.module.css ┃ ┃ ┃ ┃ ┗ 📜PromiseSection.tsx ┃ ┃ ┃ ┣ 📂_lib ┃ ┃ ┃ ┃ ┗ 📜getPromiseAll.ts ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📂recommend ┃ ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┃ ┗ 📜RecommendSection.tsx ┃ ┃ ┃ ┣ 📂_lib ┃ ┃ ┃ ┃ ┗ 📜getUserRecommends.ts ┃ ┃ ┃ ┣ 📜page.tsx ┃ ┃ ┃ ┗ 📜recommend.module.css ┃ ┃ ┣ 📂search ┃ ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┃ ┣ 📜SearchCard.tsx ┃ ┃ ┃ ┃ ┣ 📜SearchForm.tsx ┃ ┃ ┃ ┃ ┗ 📜SearchResult.tsx ┃ ┃ ┃ ┣ 📂_lib ┃ ┃ ┃ ┃ ┗ 📜getSearchResult.ts ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📂setting ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📂[userId] ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┣ 📜Back.tsx ┃ ┃ ┃ ┣ 📜ImageWithPlaceholder.tsx ┃ ┃ ┃ ┣ 📜LogoutButton.tsx ┃ ┃ ┃ ┣ 📜MainTitle.tsx ┃ ┃ ┃ ┣ 📜MbtiRecommendSection.tsx ┃ ┃ ┃ ┣ 📜Modal.tsx ┃ ┃ ┃ ┣ 📜RQProvider.tsx ┃ ┃ ┃ ┣ 📜SearchForm.tsx ┃ ┃ ┃ ┣ 📜userCard.module.css ┃ ┃ ┃ ┣ 📜UserCard.tsx ┃ ┃ ┃ ┣ 📜UserCardArticle.tsx ┃ ┃ ┃ ┗ 📜UserRandomRecommendSection.tsx ┃ ┃ ┣ 📂_lib ┃ ┃ ┃ ┣ 📜getBase64.ts ┃ ┃ ┃ ┗ 📜getUserRandomRecommends.ts ┃ ┃ ┣ 📜layout.module.css ┃ ┃ ┣ 📜layout.tsx ┃ ┃ ┗ 📜page.tsx ┃ ┣ 📂(beforeLogin) ┃ ┃ ┣ 📂login ┃ ┃ ┃ ┣ 📜login.module.css ┃ ┃ ┃ ┗ 📜page.tsx ┃ ┃ ┣ 📂signup ┃ ┃ ┃ ┣ 📜page.tsx ┃ ┃ ┃ ┗ 📜signup.module.css ┃ ┃ ┣ 📂userSetting ┃ ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┃ ┣ 📜BirthdaySelect.tsx ┃ ┃ ┃ ┃ ┣ 📜DrinkSelect.tsx ┃ ┃ ┃ ┃ ┣ 📜GenderSelect.tsx ┃ ┃ ┃ ┃ ┣ 📜ImageSelect.tsx ┃ ┃ ┃ ┃ ┣ 📜JobSelect.tsx ┃ ┃ ┃ ┃ ┣ 📜MbtiSelect.tsx ┃ ┃ ┃ ┃ ┣ 📜NicknameSelect.tsx ┃ ┃ ┃ ┃ ┣ 📜RegionSelect.tsx ┃ ┃ ┃ ┃ ┣ 📜ReligionSelect.tsx ┃ ┃ ┃ ┃ ┣ 📜SchoolSelect.tsx ┃ ┃ ┃ ┃ ┣ 📜SetUser.tsx ┃ ┃ ┃ ┃ ┣ 📜SetUser2.tsx ┃ ┃ ┃ ┃ ┣ 📜SetUserComplete.tsx ┃ ┃ ┃ ┃ ┣ 📜SetUserProvider.tsx ┃ ┃ ┃ ┃ ┣ 📜SetUserProvider2.tsx ┃ ┃ ┃ ┃ ┣ 📜SetUserTop.tsx ┃ ┃ ┃ ┃ ┣ 📜SmokeSelect.tsx ┃ ┃ ┃ ┃ ┗ 📜TallSelect.tsx ┃ ┃ ┃ ┣ 📜page.tsx ┃ ┃ ┃ ┗ 📜userSetting.module.css ┃ ┃ ┣ 📂_component ┃ ┃ ┃ ┣ 📜title.module.css ┃ ┃ ┃ ┗ 📜Title.tsx ┃ ┃ ┗ 📂_lib ┃ ┃ ┃ ┗ 📜login.ts ┃ ┣ 📂api ┃ ┃ ┗ 📂auth ┃ ┃ ┃ ┗ 📂[...nextauth] ┃ ┃ ┃ ┃ ┗ 📜route.ts ┃ ┣ 📂_component ┃ ┃ ┣ 📜AuthSession.tsx ┃ ┃ ┣ 📜BottomNav.tsx ┃ ┃ ┣ 📜LeftNav.tsx ┃ ┃ ┣ 📜MSWComponent.tsx ┃ ┃ ┣ 📜nav.module.css ┃ ┃ ┗ 📜TopNav.tsx ┃ ┣ 📜favicon.ico ┃ ┣ 📜globals.css ┃ ┗ 📜layout.tsx ┣ 📂components ┃ ┗ 📂ui ┃ ┃ ┣ 📜avatar.tsx ┃ ┃ ┣ 📜badge.tsx ┃ ┃ ┣ 📜button.tsx ┃ ┃ ┣ 📜card.tsx ┃ ┃ ┣ 📜carousel.tsx ┃ ┃ ┣ 📜dropdown-menu.tsx ┃ ┃ ┣ 📜form.tsx ┃ ┃ ┣ 📜input.tsx ┃ ┃ ┣ 📜label.tsx ┃ ┃ ┣ 📜progress.tsx ┃ ┃ ┣ 📜skeleton.tsx ┃ ┃ ┣ 📜textarea.tsx ┃ ┃ ┗ 📜tooltip.tsx ┣ 📂lib ┃ ┗ 📜utils.ts ┣ 📂mocks ┃ ┣ 📜browser.ts ┃ ┣ 📜handlers.ts ┃ ┗ 📜http.ts ┣ 📂model ┃ ┣ 📜Post.ts ┃ ┣ 📜postImage.ts ┃ ┣ 📜User.ts ┃ ┗ 📜UserImage.ts ┣ 📜auth.ts ┗ 📜middleware.ts 로컬에서 잘되다가 어느순간부터 됐다 안됐다 하다가 이제는 안되고 있습니다. 어느 부분을 좀 더 찾아보고 해야할지 조언주시면 정말 감사하겠습니다.

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

[긴급-재업로드]수업질문 로그인 안 되는 문제

미해결

스프링과 JPA 기반 웹 애플리케이션 개발

https://drive.google.com/file/d/1ZLSuM4WzJVs4Hec74h64ketY0KtzEEFu/view?usp=sharing 이 링크에 가면 pdf가 있는데, 여기에 제가 작성한 코드를 모두 작성했습니다. 이 구글드라이브 링크에 가서 코드를 확인해보시고 답변에 참고가 되셨으면 좋겠습니다. 이 외에 Tag.java , ConsoleMailSendeer.java , check-email.html, checked-email.html, profile.html, fragments.html 는 pdf에 있습니다.

  • java
  • spring
  • spring-boot
  • jpa
  • thymeleaf
YOIEO_0120 댓글 1 좋아요 0 조회수 260

Integer age에 age=""를 넘기는 경우

미해결

스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술

@ResponseBody @RequestMapping("/request-param-required") public String requestParamRequired( @RequestParam(required = true) String username, @RequestParam(required = false) Integer age) { log.info("username={}, age={}", username, age); return "ok"; } ' http://localhost:8080/request-param-required?username=&age=' 라고 요청을 했습니다. Integer age = "";과 같이 되기에 오류가 발생할 것이라고 생각했는데, 요청이 정상적으로 처리되었고 콘솔에는 'username=, age=null'로 찍혔습니다. 왜 그런걸까요?

  • spring
  • mvc
도토리 댓글 3 좋아요 0 조회수 345

섹션 10. List.of()

해결됨

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

복습하다 문득 이 코드를 보고 생각이 들었습니다. ArrayList<MyUser> list = new ArrayList<>(List.of(myUser1, myUser2, myUser3)); List<MyUser> list1 = List.of(myUser1, myUser2, myUser3); List로 반환되는 건 맞는 거 같은데... static <E> List<E> of(E e1, E e2, E e3) { return ImmutableCollections.listFromTrustedArray(e1, e2, e3); } List.of()는 분명 List타입으로 반환이 되는데 ArrayList에 어떻게 들어가는 건가요? List가 ArrayList를 받을 수는 있지만, 그 반대는 안 되는 거 아닌가 해서요!!

  • java
  • 객체지향
  • 코딩-테스트
  • 알고리즘
권정익 댓글 1 좋아요 0 조회수 192

안녕하세요 질문있습니다.

미해결

스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술

MemberListControllerV4 에서 model을 return 하지 않고도 FrontControllerServletV4에서 process메소드를 호출해도 model에 members 값이 들어가 있는이유가 참조변수라서 그런건가요?

  • spring
  • mvc
조소영 댓글 1 좋아요 0 조회수 150

instanceof 연산자 실제 구현

미해결

김영한의 실전 자바 - 기본편

instanceof 연산자를 어떤식으로 사용이 되는지는 감이 오는데 실제로 이것이 어떤식으로 구현되어 있는지가 갑자기 궁금해져서 구글링을 해보니 아래와 같은 글이 나오긴 하는데요, java - How is 'instanceof' implemented in the JVM? - Stack Overflow 글만 봐서는 살짝 느낌이 안오는데 조금 더 쉽게 설명된 글이 있을까요?

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

질문

해결됨

스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술

[질문 내용] objectMapper을 써서 JSON을 Java로 변환시킬때 readValue()안에 있는 자바 클래스안에 생성자가 있어야 되는걸로 알고있습니다 ! 그럼 따로 만들지 않았으니 자바가 생성해주는 기본생성자를 쓰는 것인가요??

  • spring
  • mvc
해톨 댓글 1 좋아요 0 조회수 244

Class 클래스 질문입니다!

해결됨

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

========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 안녕하세요!! 강사님 중급 1편도 너무 알차게 듣고 있습니다! Class 클래스 편 강의 듣다가 궁금한 점이 있어 질문드립니다! 이 부분 (강의 12:00 쯤!) 인데요!Class 클래스의 정보 (생성자)를 이용해 객체생성 하는 방법 보여주셨는데 평소처럼 Hello hello = new Hello();로 객체생성하고 hello.hello() 처럼 메서드 사용도 가능한데 이렇게도 생성할 수 있다를 보여주신걸까요?? 강의로 배우고있는 저의 입장에선 당연히 평소하던대로 Hello hello = new Hello()로 객체생성하고 hello.hello()메서드 사용하는게 훨씬 편할거라고 생각해서 질문드립니다! 위에서 Class.forName("사용자가 스캐너 같은걸로 직접 입력하는 상황도 있을것") 처럼 패키지와 클래스명으로 생성해야할 경우는 경로 직접 입력하는 방식이 더 편리. 즉, 객체 생성에는 여러 방법이 있다. 상황마다 알맞게 사용하면 된다로 이해하면 될까요?! 사실 그냥 넘기라고 하셨긴 한데 굳이왜 reflection으로 이렇게 복잡하게 객체를 생성하는지 궁금합니다..! 간단하게라도 알려주실 수 있으실까요??

  • java
  • 객체지향
한슬기 댓글 1 좋아요 2 조회수 348

prefetchQuery 적용 후 Warning: Text content did not match. 오류가 발생합니다.

해결됨

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

안녕하세요. 강의 잘 보고 있습니다.!! 👍 👍 react-query를 적용 중 오류가 표시되어 오류와 궁금한 부분이 있어서 문의 드립니다. Text content did not match. 오류가 발생하는데 어느 부분이 문제인지 잘 모르겠습니다 ㅠㅠ prefetchQuery 를 사용하여 서버에서 post(트윗)데이터를 프리패치 후 TweetList컴포넌트에서 useQuery 를 사용하게 만들었습니다. Post의 데이터는 msw에서 알려주신 faker를 통해서 요청마다 content를 동적으로 생성하게 했구요. 콘솔로 출력한 데이터와 reactQuery개발 도구의 데이터는 동일한데 화면에 표기된 데이터는 전혀 다른 데이터로 표시되네요.. 그리고 방식이 prefetchQuery 를 사용한 데이터는 staleTime과 상관없이 Fresh상태로 되어 useQuery 호출 시 데이터가 아직 fresh한 상태이므로 서버를 호출하지 않고 캐쉬에서 가져와 보여주는 방식이 맞나요? 오류로그 app-index.js:33 Warning: Text content did not match. Server: "Tener adulatio decens conitor. Thesis apostolus ago at decerno. Iste uberrime commodo. Verus amitto quas cometes delicate. Cognomen alii curto ciminatio. Solitudo complectus tristis. Teneo sum vindico. Adhuc decimus triumphus ipsa arguo umquam addo adulatio cresco. Sponte degenero non trado cauda beneficium laboriosam approbo." Client: "Tremo collum sint terror templum summisse viduo usque unus benevolentia. Eligendi substantia concido amissio uredo turpis aperte. Admoneo titulus audeo conicio fuga." at div at div at div at article at TweetWrapper (webpack-internal:///(app-pages-browser)/./src/app/(afterLogin)/home/_components/TweetWrapper.tsx:11:11) at Tweet (webpack-internal:///(app-pages-browser)/./src/app/(afterLogin)/home/_components/Tweet.tsx:31:11) at TweetList (webpack-internal:///(app-pages-browser)/./src/app/(afterLogin)/home/_components/TweetList.tsx:16:93) at HydrationBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@tanstack+react-query@5.39.0_react@18.2.0/node_modules/@tanstack/react-query/build/modern/HydrationBoundary.js:14:11) at HomeContextProvider (webpack-internal:///(app-pages-browser)/./src/app/(afterLogin)/home/_components/Provider.tsx:17:11) at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:242:11) at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:74:9) at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:82:11) at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/not-found-boundary.js:84:11) at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:340:11) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js:162:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:152:9) at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:227:11) at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/render-from-template-context.js:16:44) at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:359:11) at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:242:11) at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:74:9) at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/redirect-boundary.js:82:11) at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/not-found-boundary.js:84:11) at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:340:11) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/error-boundary.js:162:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@14.1.4_@babel+core@7.24.4_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/client/components/layout-router.js:152:9) at ScrollAndFocu 소스코드 (Tweet이 Post입니다! 나중에 바꿔야겠네여) [page.tsx] /home import React from "react"; import HomeTopTab from "./_components/HomeTopTab"; import WriteForm from "./_components/WriteForm"; import TweetList from "./_components/TweetList"; import HomeContextProvider from "./_components/Provider"; import { QueryClient, dehydrate, HydrationBoundary, } from "@tanstack/react-query"; import getPostRecommends from "./_lib/getPostRecommends"; const HomePage = async () => { const queryClient = new QueryClient(); await queryClient.prefetchQuery({ queryKey: ["tweet", "recommends"], queryFn: getPostRecommends, }); const dehydratedState = dehydrate(queryClient); return ( <HomeContextProvider> <HomeTopTab /> <WriteForm /> <HydrationBoundary state={dehydratedState}> <TweetList /> </HydrationBoundary> </HomeContextProvider> ); }; export default HomePage; TweetList.tsx "use client"; import React from "react"; import Tweet from "./Tweet"; import getPostRecommends from "../_lib/getPostRecommends"; import { Post } from "./TweetWrapper"; import { QueryClient, useQuery } from "@tanstack/react-query"; const TweetList = () => { const { data: tweets } = useQuery<Post[]>({ queryKey: ["tweet", "recommends"], queryFn: getPostRecommends, enabled: false, }); console.log("🚀 _ TweetList _ tweets:", tweets); return tweets?.map((tweet) => <Tweet post={tweet} key={tweet.postId} />); }; export default TweetList;

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

로그인에서 받아온 Session을 활용하고 자 할 때

해결됨

ASP.NET Core MVC +ASP.NET Core +REST API +.NET 8.0

안녕하세요 선생님 자주... 문의드려 죄송합니다. 로그인에서 가져온 Session 값을 활용하는 방법 DAL 부분의 활용 여부 로그인에서 가져온 Session 값을 활용하는 방법 public async Task<IActionResult> GetUser(GetUserDTO getUserDTO) { if (ModelState.IsValid) { } else { return Redirect("/login/SearchUserId"); } GetUserResponseDTO dto = await loginService.GetUser(getUserDTO); HttpContext.Session.Set("LoginUser", dto); return Redirect("/home/index"); } "LoginUser"으로 세션값을 사용하는 것은 이해했습니다. controller public async Task<IActionResult> GetUserList () { if (ModelState.IsValid) { } else { return Redirect("/home/UserList"); } GetUserResponseDTO ? user = HttpContext.Session.Get<GetUserResponseDTO>("LoginUser"); GetUserListResponseDTO dto = await UserListService.GetUserList(); return Redirect("/home/index"); } service public async Task<GetUserListResponseDTO> GetUserList(GetUserListDTO getUserListDTO) { var configuration = new MapperConfiguration(cfg => { }); Mapper mapper = new Mapper(configuration); Dictionary<string, object> dc = mapper.Map<GetUserListDTO, Dictionary<string, object>>(getUserListDTO); ProcCall procCall = new ProcCall(); DataTable dt = await procCall.RequestProcedure("SP_UserList", dc); GetUserListResponseDTO dto = new GetUserListResponseDTO(); return dto; } 구현하고자 하는 내용. 로그인 해서 나온 데이터를 활용하여 조회 화면을 구성하고자 함 A 등급을 가진 사람한테 -> A-1 화면만 조회하도록 구현하고자 합니다. Session 값을 가져와서 구현하고자 했는데.. 그럼 DTO를 거치면 안 될까요...? DAL 부분의 활용 여부 SP_ 형식을 차용하는데 DAL.Mapper와 DAL.Model 추가적인 사용은 필요가 없을 것 같습니다...? DB와 소통하는 부분으로만 남겨도 될까요?

  • C#
  • mvc
  • rest-api
  • 아키텍처
  • mssql
  • ef-core
  • asp.net-core
wltn07551 댓글 1 좋아요 0 조회수 337

로그인 처리하기 - 세션 직접 만들기 관련 질문입니다.

미해결

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술

SessionManager를 보면 SESSION_COOKIE_NAME과 로그인 할 때마다 새로 생성한 sessionId로 쿠키를 만드는 것 같습니다. 이 프로그램을 사용하는 여러 멤버들이 동시에 로그인을 한다면, sessionId는 다르지만 SESSION_COOKIE_NAME이 동일한 쿠키가 중복되서 생기지 않나요? findCookie에서는 SESSION_COOKIE_NAME만 가지고 로그인한 멤버가 사용하는 sessionId를 제대로 찾을 수 있는건가요?

  • spring
  • mvc
jfk6725 댓글 1 좋아요 0 조회수 248

연결리스트 배열 선언?

해결됨

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

해시 알고리즘6-해시 충돌 구현 파트에서 LinkedList<Integer>[] buckets = new LinkedList[CAPACITY]; 이런 코드가 등장했는데요. 제가 앞선 강의에서 이런 내용을 놓친 것인지는 잘 모르겠지만...ㅠ 제네릭을 통해 선언하는 것인데 new LinkedList<>()[CAPACITY]; 를 하면 안되는 이유가 무엇인가요?

  • java
  • 객체지향
  • 코딩-테스트
  • 알고리즘
디와이 댓글 1 좋아요 1 조회수 401

Request.Query는 배열로는 받을 수 없나요?

미해결

ASP.NET Core MVC +ASP.NET Core +REST API +.NET 8.0

queryString으로 데이터를 받아오는 것에서 매개변수에 string[] datas를 해주면, datas Name을 가진 input 태그에서는 받는 값들은 이 배열에 모인다는 걸 이해 했습니다. 근데 Request.Query로는 그게 불가능한가요?

  • C#
  • mvc
  • rest-api
  • 아키텍처
  • mssql
  • ef-core
  • asp.net-core
로엔 댓글 2 좋아요 0 조회수 397

SQL MAPPER Mybatis

미해결

스프링 DB 1편 - 데이터 접근 핵심 원리

최근에 우연히 spring.start.io 에서 프로젝트를 만들다가 스프링 부트 3.3버전에서는 mybatis 의존성 추가를 막아 놓은것을 발견했습니다. mybatis라는 기술이 최신 버전의 스프링에서는 별로 좋지않은 방법이어서 의존성 추가를 못하게 막아놓는 건가요?

  • spring
  • mvc
  • spring-jdbc
박민수 댓글 1 좋아요 0 조회수 271

JpaRepository 조건

해결됨

스프링 DB 2편 - 데이터 접근 활용 기술

스프링 데이터 JPA 조건2에서 SpringDataJpaRepository의 findAll 메서드의 `@Query`에서 오타를 내서 코드가 테스트에서 오류가 발생했습니다. 추후 코드를 고치니 문제를 해결할 수 있었습니다. 여기서 궁금한 점은 테스트에서 findAll에만 영향을 미치는 것이 아니라 왜 전체 테스트에서 오류가 발생하는 것인지 궁금합니다. 혹시 이 부분에 대해선 프록시 객체를 띄우는 데, 메서드의 유효성을 검사하는 로직이 존재하거나 아니면 다른 무언가가 있는지 궁금합니다. package hello.itemservice.repository.jpa; import hello.itemservice.domain.Item; import java.util.List; import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.jpa.repository.Query; import org.springframework.data.repository.query.Param; public interface SpringDataJpaItemRepository extends JpaRepository<Item, Long> { List<Item> findByItemNameLike(String itemName); List<Item> findByPriceLessThanEqual(Integer price); // 쿼리 메서드(아래 메서드와 같은 기능 수행) List<Item> findByItemNameLikeAndPriceLessThanEqual(String itemName, Integer price); // 쿼리 직접 실행 // error를 추가해 쿼리 오류 생성 @Query("error select i from Item i where i.itemName like :itemName and i.price <= :price") List<Item> findItems(@Param("itemName") String itemName, @Param("price") Integer price); }

  • spring
  • mvc
  • jpa
  • querydsl
  • spring-data-mybatis
  • spring-jpa
박주성 댓글 1 좋아요 0 조회수 208

DTO request와 response

미해결

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

dto에서 request를 구성할 때에 Create와 Update에 대한 request를 두 개로 나누어 구성하시는 것을 봤습니다. 제가 생각하기에 user 테이블에 접근하여, userService에 사용되기 위한 것이니 UserRequest라는 클래스를 만들어 하나로 통합하여 사용하면 보기 편하고 사용하기 쉬울 것 같습니다. 성능에서 차이가 있다던지 request를 따로 구별해서 사용하신 이유가 있는지 궁금합니다.

  • java
  • spring
  • aws
  • mysql
  • spring-boot
  • jpa
오쩜오 댓글 1 좋아요 1 조회수 1735

HttpRequestServlet - 기본 사용법 강의 질문

해결됨

스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술

빈 등록이 제대로 안되서 생긴 오류 같은데 원인을 모르겠습니다 package hello.servlet; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.boot.web.servlet.ServletComponentScan; @ServletComponentScan @SpringBootApplication public class ServletApplication { public static void main(String[] args) { SpringApplication.run(ServletApplication.class, args); } } package hello.servlet.basic.request; import jakarta.servlet.ServletException; import jakarta.servlet.annotation.WebServlet; import jakarta.servlet.http.HttpServlet; import jakarta.servlet.http.HttpServletRequest; import jakarta.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet(name = "requestHeaderServlet", urlPatterns = "/request-header") public class RequestHeaderServlet extends HttpServlet { @Override protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { printStartLine(request); } private static void printStartLine(HttpServletRequest request) { System.out.println("--- REQUEST-LINE - start ---"); System.out.println("request.getMethod() = " + request.getMethod()); // GET System.out.println("request.getProtocol() = " + request.getProtocol()); // HTTP/1.1 System.out.println("request.getScheme() = " + request.getScheme()); // http // http://localhost:8080/request-header System.out.println("request.getRequestURL() = " + request.getRequestURL()); // /request-header System.out.println("request.getRequestURI() = " + request.getRequestURI()); // username=hi System.out.println("request.getQueryString() = " + request.getQueryString()); System.out.println("request.isSecure() = " + request.isSecure()); // https 사용유무 System.out.println("--- REQUEST-LINE - end ---"); System.out.println(); } } 2024-05-28T16:16:58.435+09:00 WARN 10588 --- [ main] s.c.a.AnnotationConfigApplicationContext : Exception encountered during context initialization - cancelling refresh attempt: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'servletComponentRegisteringPostProcessor': Instantiation of supplied bean failed 2024-05-28T16:16:58.452+09:00 INFO 10588 --- [ main] .s.b.a.l.ConditionEvaluationReportLogger : Error starting ApplicationContext. To display the condition evaluation report re-run your application with 'debug' enabled. 2024-05-28T16:16:58.498+09:00 ERROR 10588 --- [ main] o.s.boot.SpringApplication : Application run failed org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'servletComponentRegisteringPostProcessor': Instantiation of supplied bean failed at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.obtainFromSupplier(AbstractAutowireCapableBeanFactory.java:1223) ~[spring-beans-6.1.6.jar:6.1.6] at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBeanInstance(AbstractAutowireCapableBeanFactory.java:1161) ~[spring-beans-6.1.6.jar:6.1.6] at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.doCreateBean(AbstractAutowireCapableBeanFactory.java:562) ~[spring-beans-6.1.6.jar:6.1.6] at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(AbstractAutowireCapableBeanFactory.java:522) ~[spring-beans-6.1.6.jar:6.1.6] at org.springframework.beans.factory.support.AbstractBeanFactory.lambda$doGetBean$0(AbstractBeanFactory.java:326) ~[spring-beans-6.1.6.jar:6.1.6] at org.springframework.beans.factory.support.DefaultSingletonBeanRegistry.getSingleton(DefaultSingletonBeanRegistry.java:234) ~[spring-beans-6.1.6.jar:6.1.6] at org.springframework.beans.factory.support.AbstractBeanFactory.doGetBean(AbstractBeanFactory.java:324) ~[spring-beans-6.1.6.jar:6.1.6] at org.springframework.beans.factory.support.AbstractBeanFactory.getBean(AbstractBeanFactory.java:205) ~[spring-beans-6.1.6.jar:6.1.6] at org.springframework.context.support.PostProcessorRegistrationDelegate.invokeBeanFactoryPostProcessors(PostProcessorRegistrationDelegate.java:202) ~[spring-context-6.1.6.jar:6.1.6] at org.springframework.context.support.AbstractApplicationContext.invokeBeanFactoryPostProcessors(AbstractApplicationContext.java:788) ~[spring-context-6.1.6.jar:6.1.6] at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:606) ~[spring-context-6.1.6.jar:6.1.6] at org.springframework.boot.SpringApplication.refresh(SpringApplication.java:754) ~[spring-boot-3.2.5.jar:3.2.5] at org.springframework.boot.SpringApplication.refreshContext(SpringApplication.java:456) ~[spring-boot-3.2.5.jar:3.2.5] at org.springframework.boot.SpringApplication.run(SpringApplication.java:334) ~[spring-boot-3.2.5.jar:3.2.5] at org.springframework.boot.SpringApplication.run(SpringApplication.java:1354) ~[spring-boot-3.2.5.jar:3.2.5] at org.springframework.boot.SpringApplication.run(SpringApplication.java:1343) ~[spring-boot-3.2.5.jar:3.2.5] at hello.servlet.ServletApplication.main(ServletApplication.java:12) ~[main/:na] Caused by: java.lang.NoClassDefFoundError: jakarta/servlet/annotation/WebServlet at org.springframework.boot.web.servlet.WebServletHandler.<init>(WebServletHandler.java:39) ~[spring-boot-3.2.5.jar:3.2.5] at org.springframework.boot.web.servlet.ServletComponentRegisteringPostProcessor.<clinit>(ServletComponentRegisteringPostProcessor.java:62) ~[spring-boot-3.2.5.jar:3.2.5] at org.springframework.boot.web.servlet.ServletComponentScanRegistrar$ServletComponentRegisteringPostProcessorBeanDefinition.lambda$getInstanceSupplier$0(ServletComponentScanRegistrar.java:94) ~[spring-boot-3.2.5.jar:3.2.5] at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.obtainInstanceFromSupplier(AbstractAutowireCapableBeanFactory.java:1257) ~[spring-beans-6.1.6.jar:6.1.6] at org.springframework.beans.factory.support.DefaultListableBeanFactory.obtainInstanceFromSupplier(DefaultListableBeanFactory.java:951) ~[spring-beans-6.1.6.jar:6.1.6] at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.obtainFromSupplier(AbstractAutowireCapableBeanFactory.java:1217) ~[spring-beans-6.1.6.jar:6.1.6] ... 16 common frames omitted Caused by: java.lang.ClassNotFoundException: jakarta.servlet.annotation.WebServlet at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:641) ~[na:na] at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:188) ~[na:na] at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:526) ~[na:na] ... 22 common frames omitted

  • spring
  • mvc
징니 댓글 1 좋아요 1 조회수 237

Single View Engine은 뭘까요?

미해결

ASP.NET Core MVC +ASP.NET Core +REST API +.NET 8.0

Razor는 ASP.NET Core가 기본적으로 사용하는 Single View Engine이다 라고 하셨는데요. View Engine이 뭔지는 검색으로 알았는데 single view engine은 어떤 의미로 말씀하신걸까요?

  • C#
  • mvc
  • rest-api
  • 아키텍처
  • mssql
  • ef-core
  • asp.net-core
로엔 댓글 1 좋아요 0 조회수 211

Results API가 뭔가요?

미해결

ASP.NET Core MVC +ASP.NET Core +REST API +.NET 8.0

1강 1분 35초에 ASP.NET Core를 사용하면 웹, RESTful API, Results API 개발이 가능합니다. 라고 하셨는데요. Results API가 뭔가요? 검색해도 따로 나오는게 없어서요...

  • C#
  • mvc
  • rest-api
  • 아키텍처
  • mssql
  • ef-core
  • asp.net-core
로엔 댓글 1 좋아요 0 조회수 251

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

미해결

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

인기 태그

인프런 TOP Writers

주간 인기글