inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

[소셜 로그인 16강] 로그인 실패 시 리다이렉트 관련 질문

미해결

스프링 부트와 리액트로 구현하는 소셜 로그인

16강을 수강하고 있습니다. CustomLoginFailureHandler 사용자가 로그인에 실패했을 때 호출되는 메서드에 대한 질문입니다. if(savedRequest != null) { String targetUrl = savedRequest.getRedirectUrl(); //사용자가 접근하려던 URL // 즉, 로그인에 실패했지만 사용자를 원래 있던 페이지로 보내줌 // 실패 시 사용자가 접근하려던 URL 로그 출력 log.info("[핸들러 - 사용자가 접근 시도한 URL]\n-> " + targetUrl); // 사용자가 접근하려던 URL로 리다이렉트 (로그인 실패 후에도 이동) response.sendRedirect(targetUrl); } 그런데 if문의 마지막 줄을 보면 로그인 실패 후에도 targetUrl 즉, 사용자가 접근하려했던 페이지로 이동시킨다고 작성 되어 있는데 ... 로그인 실패 시에도 targetUrl로 리다이렉트시키는 이유가 뭔가요?? 로그인에 실패하면 로그인 페이지에 남아있어야 하는 것 아닌가요 ...?

  • react
  • java
  • spring-boot
  • jpa
  • spring-security
정수현 댓글 2 좋아요 0 조회수 100

Map 강의 누락된 것 같습니다.

해결됨

프론트엔드 마스터클래스

안녕하세요! 강의가 누락된 것 같아 글 작성합니다. 확인부탁드릴게요! 30강 Map 강의로부터 31강까진 문제없이 연결되는데, 32. WeakRef + FinalizationRegisty 강의시작부터 연결이 매끄럽지 못합니다. 뜬금없이 대안?에 대해서 나오는데 Map 예제부분과 WeakMap 부분이 누락된것같습니다.

  • javascript
  • react
  • 함수형-프로그래밍
  • 객체지향
  • next.js
모던 댓글 2 좋아요 0 조회수 185

브라우저의 렌더링 과정 질문

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

좋은 강의 감사합니다. React.js 소개 부분을 보며 궁금한점이 있어 문의드립니다. 화면 업데이트 관련 브라우저 렌더링 과정은 React.js뿐 아니라 Vue.js에서도 동일하게 적용되나요? 예를들면, Virtual Dom에서 한번에 모아 Actual DOM에 적용되는 방식등이요

  • javascript
  • react
  • node.js
  • 카카오공채-개발
kmh880507 댓글 2 좋아요 0 조회수 83

Context API 리랜더링 방지를 위한 Memoization에 대한 질문

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

계속해서 학습을 진행중인데, 함수값을 넘길때에는 useCallback을 사용해야한다는 것으로 알고있었는데, >>밑에는 실제 강의 중 공유해 주신 ContextProvider 안에 함수들 const increment = () => { setCount((count) => count + 1); }; const decrement = () => { setCount((count) => count - 1); }; const reset = () => { setCount(0); }; const memoization = useMemo(()=>({ increment, decrement, reset }),[]); >>제가 생각했던 방식 const increment = useCallback(() => { setCount((count) => count + 1); },[]); const decrement = useCallback(() => { setCount((count) => count - 1); },[]); const reset = useCallback(() => { setCount(0); },[]); const memoization = useMemo(()=>({ increment, decrement, reset }),[increment, decrement, reset]); 저는 밑에 memoization 변수를 빼고 바로 useCallback을 이용해서 객체값으로 넘겨주는 식으로 작성해야 한다고 생각을 했었습니다. 코드를 작성하는 방법에는 정답은 없지만, 당장은 기본에 입각한 학습을 해야하기에 어떤 방법이 조금 더 효율적인지 여쭤보고 싶습니다.

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
유키 댓글 2 좋아요 0 조회수 71

저도 피그마 강의 자료 이미지 누락 문제 관련 문의드립니다.

해결됨

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

안녕하세요! 저도 동일한 현상을 겪고 있습니다. 레이아웃은 그대로 복제되는데, 이미지가 모두 누락되어 있습니다. 제 생각에는 수강생들에게 보기 권한만 부여되어 있어서 해당 리소스에 접근할 수 없고, 그로 인해 파일 복제 시 이미지가 빠지는 것 같습니다. 혹시 가능하시다면, 모든 수강생이 문제없이 접근할 수 있도록 이미지를 파일 내에 직접 포함한 버전으로 자료를 수정해 다시 업로드해 주실 수 있을까요? 그렇게 해주신다면 저를 포함한 다른 수강생들도 문제없이 실습을 진행할 수 있을 것 같습니다. 바쁘시겠지만 확인 부탁드립니다. 좋은 강의 감사드립니다!

  • react
  • next.js
  • cursor
  • 프롬프트엔지니어링
  • 바이브코딩
  • figma
조내일 댓글 2 좋아요 0 조회수 218

벌써 요금제 도달

미해결

[4주 과정] <클로드 코드> 완독 챌린지 : 매일 1시간씩 4주 동안 클로드 코드 도서 완독하기!

⎿ Session limit reached ∙ resets 12am /upgrade to increase your usage limit. 오늘의 실습.. 생각보다 정말 토큰을 이렇게 많이 썼다니 요금이 너무 비싸네요ㅠㅠ 다시 정상적으로 이용할 수 있는거지요? 계속 메시지 제한걸린다면 제한하는데로 재설정해서 계속 사용할 수 있는거지요?

  • 업무-생산성
  • 인공지능(ai)
  • ai-활용-(ax)
  • claude
  • 바이브코딩
고은아 댓글 2 좋아요 0 조회수 950

CLAUDE.md 파일의 적절한 길이

미해결

[4주 과정] <클로드 코드> 완독 챌린지 : 매일 1시간씩 4주 동안 클로드 코드 도서 완독하기!

개발하면서 지속적으로 md파일을 업데이트하면 길이가 1000줄 가까이 길어지는데, 이렇게 길어지면 토큰도 많이 잡아먹어서 효율성도 떨어질 것 같습니다. 길이가 길어지면 길다고 다 못읽는 경우가 커서에는 있었습니다. 물론 클로드에게 최적화 해달라고 하면 해주겠지만, 일반적으로 어느정도 길이가 적절한지 궁금합니다.

  • 업무-생산성
  • 인공지능(ai)
  • ai-활용-(ax)
  • claude
  • 바이브코딩
ㄱ.ㅎㅅㅇ 댓글 2 좋아요 0 조회수 563

.

미해결

React Native with Expo: 제로초에게 제대로 배우기

.

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
이영훈 댓글 2 좋아요 0 조회수 112

안녕하세요

미해결

[25.10.02] 코드캠프 라이브 테스트

모야모야 이거 모야

  • react
  • python
  • java
성실한 도마뱀 댓글 1 좋아요 0 조회수 42

궁금한 점 5가지 있습니다.

미해결

[25.10.02] 코드캠프 라이브 테스트

하루에 4번 사랑을 말하기 8번 웃기

  • react
  • python
  • java
썸머 댓글 1 좋아요 1 조회수 56

여기에 쓰면 무슨 질문이지

미해결

[25.10.02] 코드캠프 라이브 테스트

하이

  • react
  • python
  • java
인프런 애시 댓글 1 좋아요 1 조회수 50

next.js 와 SOP

미해결

웹 개발의 핵심, HTTP 완벽 마스터하기!

react (client) + node.js (backend) 와 같은 구성에서는 SOP 에서 설명해주신 '동일 출처 정책' 으로 인해 'fetch' 등을 사용할때 막히는 경우가 종종 있었는데요. 그래서, 이전에는 fe 팀과 be 팀이 개발을 할때 CORS 작업을 항상 했었던걸로 기억합니다. 최근에 많이 사용하는 next.js 는 bff (backend for frontend) 가 중간에 있어서 SOP 로 인한 문제가 거의 없는것 같은데요. (SOP 는 설명해주신것처럼 브라우저 자체의 보안이기 때문에) 이렇게 이해하는게 맞을까요?

  • 네트워크
  • ajax
  • https
  • cors
  • cookie
writer0713 댓글 2 좋아요 1 조회수 93

.

미해결

React Native with Expo: 제로초에게 제대로 배우기

.

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
이영훈 댓글 2 좋아요 0 조회수 179

동적페이지 풀라우트 캐시 질문 있습니다.

미해결

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

강의에서 book/4는 동적 페이지인데 첫 접속 후 Full Route Cache에 저장되어 두 번째 접속이 빨라진다고 했습니다. 동적 페이지는 Full Route Cache에 저장되지 않는다고 배웠는데 왜 적용되나요? .next 폴더에 해당 페이지가 남아있는 것을 확인했는데, 이것이 Full Route Cache 적용을 의미하나요? npm run start로 프로덕션 모드에서 테스트했는데 첫 접속과 두 번째 접속 모두 170ms로 동일합니다. 왜 속도 차이가 없나요? import { notFound } from "next/navigation"; import style from "./page.module.css"; import { BookData } from "@/types"; // export const dynamicParams = false; export function generateStaticParams() { return [{ id: "1" }, { id: "2" }, { id: "3" }]; } export default async function Page({ params, }: { params: Promise<{ id: string | string[] }>; }) { const { id } = await params; const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${id}` ); if (!response.ok) { if (response.status === 404) { notFound(); } return <div>오류가 발생했습니다...</div>; } const book: BookData = await response.json(); const { coverImgUrl, title, subTitle, author, publisher, description } = book; return ( <div className={style.container}> <div className={style.cover_img_container} style={{ backgroundImage: `url('${coverImgUrl}')` }} > <img src={coverImgUrl} /> </div> <div className={style.title}>{title}</div> <div className={style.subTitle}>{subTitle}</div> <div className={style.author}> {author} | {publisher} </div> <div className={style.description}>{description}</div> </div> ); } 🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요) 제목을 구체적으로 작성해 주세요 ✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다. ⛔ ️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다. 깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요 직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요 더 빠른 답변이 가능합니다!

  • react
  • typescript
  • next.js
  • 카카오공채-개발
hinpuo 댓글 2 좋아요 0 조회수 106

개인 커스텀

미해결

[4주 과정] <클로드 코드> 완독 챌린지 : 매일 1시간씩 4주 동안 클로드 코드 도서 완독하기!

두 가지 질문이 있습니다. 1. CLAUDE.md 개인 커스텀 하는 방법과 그 파일을 수정하는 명령어 혹은 방법 2. User, Project 스코프 하는 방법을 쫌 더 상세하게 알려주세요

  • 업무-생산성
  • 인공지능(ai)
  • ai-활용-(ax)
  • claude
  • 바이브코딩
kimoon Hong 댓글 2 좋아요 0 조회수 87

인증 알림 추가 문의

미해결

[4주 과정] <클로드 코드> 완독 챌린지 : 매일 1시간씩 4주 동안 클로드 코드 도서 완독하기!

카카오톡 주간학습 알림 중 주말 인증은 당일 저녁이나 오후 정도에 한 번 더 알림을 주실 수 있을까요? 학습은 꾸준히 했는데, 개인사정상 주말에 집중하기 힘들어서 인증을 놓쳐서 아쉬운데, 약간의 도움이 더 있으면 좋겠습니다.

  • 업무-생산성
  • 인공지능(ai)
  • ai-활용-(ax)
  • claude
  • 바이브코딩
설모 댓글 1 좋아요 0 조회수 79

제가 신청한강좌들 무제한으로 변경즘부탁드릴게요

해결됨

[자바스크립트부터 리액트까지] 포기없는 React로 가는 길 [Full vers.]

[자바스크립트부터 리액트까지] 포기없는 React로 가는 길 [Full vers.] 122 / 122강(100%) 2027. 01. 01. 23:59 만료 모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.] 78 / 78강(100%) 2027. 01. 01. 23:59 만료 쌩초보, 비전공자를 위한 [HTML 스타터] 부트캠프 이3강좌가 수강기간이 제한이있어서 무제한으로 변경즘부탁드립니다.

  • javascript
  • react
  • jquery
  • typescript
  • es6
pcdo.omco 댓글 2 좋아요 0 조회수 108

퀴즈 질문 풀이 오류

미해결

Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)

저는 아무래도 정답이 C 같은데.. 질문에서 /docs 도 포함되어야 한다고 했으므로, 옵셔널 캐치올만이 루트 경로( /docs )까지 모두 처리할 수 있는거 아닌가요? 다 학습하고 혼란이 오네요..

  • react
  • 블로그
  • next.js
  • cursor
  • cursorai
Junho 댓글 2 좋아요 0 조회수 119

토큰으로 구매해도 괜찮을까요?

미해결

[4주 과정] <클로드 코드> 완독 챌린지 : 매일 1시간씩 4주 동안 클로드 코드 도서 완독하기!

토큰 구매 페이지가 먼저떠서,, 토큰으로 구매했는데, 가성비가 더 나쁠까요

  • 업무-생산성
  • 인공지능(ai)
  • ai-활용-(ax)
  • claude
  • 바이브코딩
wonder010 댓글 2 좋아요 0 조회수 104

팔로우 추천 목록이 빈 배열로 들어옵니다.

해결됨

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

안녕하세요. 팔로우 추천 API는 팔로워 수가 많은 순으로 최대 3명을 가져오도록 되어 있는 것으로 알고 있습니다. 현재 발생하는 현상으로는 회원가입한 유저가 없는 경우에 기존 유저에게 추천 목록이 빈 배열로 나타납니다. 그런데 회원가입 후 로그인하면 추천 목록에 로그인한 본인 아이디가 뜨고, 로그아웃 후 기존 유저 A로 로그인하면 이전에 회원가입한 유저 아이디가 추천 목록에 나타납니다. 기존 유저 A가 그 회원가입 한 유저를 팔로우한 상태에서, 다른 기존 유저 B로 로그인하면 A가 팔로우했던 아이디가 추천 목록에서 사라져 있습니다. 팔로우나 언팔로우 기능을 사용할 때 데이터는 정상적으로 들어오는 것으로 확인되고, 팔로워가 있는 아이디가 추천 목록에 나타나야 하는데 빈 배열로 표시됩니다. 어느 부분을 점검해야 문제를 정확히 파악할 수 있을지 감이 잡히지 않아 질문 남겨봅니다..! import { MouseEventHandler } from "react"; import { User } from "@/model/User"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { useSession } from "next-auth/react"; type Props = { user: User; }; export default function FollowRecommend({ user }: Props) { const queryClient = useQueryClient(); const { data: session } = useSession(); const followed = !!user.Followers?.find((v) => v.id === session?.user?.id); // 팔로우 const follow = useMutation({ // 호출 시마다 userId를 전달 mutationFn: (userId: string) => { return fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/users/${userId}/follow`, { method: "POST", credentials: "include", }, ); }, onMutate: (userId: string) => { const data: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (data) { // 내가 팔로우 하는 대상 // User 배열 중에 팔로우 버튼을 누른 대상의 userId를 찾아서 그 유저의 Followers 수정 const index = data.findIndex((users) => users.id === userId); const shallow = [...data]; shallow[index] = { ...shallow[index], Followers: [{ id: session?.user?.id as string }], _count: { ...shallow[index]._count, Followers: shallow[index]._count.Followers + 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } }, onError: (error, userId: string) => { console.error("팔로우/언팔로우 에러:", error); console.log("실패한 userId:", userId); const data: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (data) { const index = data.findIndex((users) => users.id === userId); const shallow = [...data]; shallow[index] = { ...shallow[index], // 내 아이디가 대상 유저의 팔로워 목록에서 빠져야함 Followers: shallow[index].Followers.filter( (f) => f.id !== (session?.user?.id as string), ), _count: { ...shallow[index]._count, Followers: shallow[index]._count.Followers - 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } }, }); // 팔로우 끊기 const unfollow = useMutation({ mutationFn: (userId: string) => { return fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/users/${userId}/follow`, { method: "DELETE", credentials: "include", }, ); }, onMutate: (userId: string) => { const data: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (data) { const index = data.findIndex((users) => users.id === userId); const shallow = [...data]; shallow[index] = { ...shallow[index], Followers: shallow[index].Followers.filter( (f) => f.id !== (session?.user?.id as string), ), _count: { ...shallow[index]._count, Followers: shallow[index]._count.Followers - 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } }, onError: (error, userId: string) => { const data: User[] | undefined = queryClient.getQueryData([ "users", "followRecommends", ]); if (data) { const index = data.findIndex((users) => users.id === userId); const shallow = [...data]; shallow[index] = { ...shallow[index], Followers: [{ id: session?.user?.id as string }], _count: { ...shallow[index]._count, Followers: shallow[index]._count.Followers + 1, }, }; queryClient.setQueryData(["users", "followRecommends"], shallow); } }, }); const onFollow: MouseEventHandler<HTMLButtonElement> = (e) => { e.stopPropagation(); e.preventDefault(); if (followed) { console.log("언팔로우"); unfollow.mutate(user.id); } else { console.log("팔로우"); follow.mutate(user.id); } };

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

인기 태그

인프런 TOP Writers

주간 인기글