inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

revalidateTag 에서 매개 변수가 하나 더 늘어서 질문합니다.

해결됨

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

안녕하세요. next.js 16 버전으로 해당 강의를 보며 달리고 있는데요. revalidateTag 설정에서 파라미터 값이 하나 더 늘어나 있습니다. revalidateTag(tag: string, profile: string | { expire?: number }): void; tag 파라미터 뒤에 profile 파라미터를 넣어야 하네요. 기본적으로는 'max' 값을 넣었고, expire로 사용자 지정 만료 동작을 위한 값을 지정하게 되어 있습니다. 이것이 구체적으로 어떤 매개변수인지 궁금합니다. 그리고 이전의 tag 파라미터만 있을 경우 와 같은 조건의 매개변수 값은 어떻게 되는지 알고 싶습니다.

  • react
  • typescript
  • next.js
  • 카카오공채-개발
Codingbear 댓글 1 좋아요 0 조회수 109

토큰 관리에 대해 질문을 드리고 싶습니다.

해결됨

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

안녕하세요 멘토님, 정말 쉽게 설명해주셔서 수업 잘 듣고 있습니다. 인증 처리하기 부분에 대해서 흐름도를 자세하고 재밌게 설명해주셔서 덕분에 이해하기 수월했습니다. 다만 현재 토큰들을 localStorage에 저장하고 이 값을 zustand로 관리하고 있는 것 같은데 사실 토큰을 storage에 저장하는 방식이 일반적이지는 않은 것 같습니다. 이 부분에 대해서 찾아본 결과 supabase를 이용하기에 쿠키에 저장하는 건 무리인 것 같고, 그렇다면 그나마 토큰을 메모리에 저장하는 방식이 안전할 것 같습니다. 로그인을 진행하면 토큰이 localStorage에 저장되는 형태인데, 이때 만약 storage에 저장하지 않고 메모리에 받게하려면 어떻게 할 수 있을까요 .. ? 또한 사실 토큰 자체를 zustand에서 가지고 있는 것도 괜찮은지 의문입니다.. 전역상태로 들고 있는 것이라서 충분히 탈취위험이 있을 것이라고 생각이 되어서요.. 사실 백엔드 서버가 있었다면 쿠키에 저장하는 로직으로 진행했을 거 같은데 만약 이때는 로그인 상태를 어떻게 판별하는지에 대해서도 궁금합니다 !

  • react
  • typescript
  • react-query
  • supabase
  • zustand
이헨 댓글 2 좋아요 0 조회수 129

fetch api의 상태값 유지

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

안녕하세요..강의 잘 보고 있습니다. import { ITodoInfo } from "@/utils/types"; export async function fetchTodos(blngCoCd:string, userId:string) { const respose = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/todo/list?blngCoCd=${blngCoCd}&userId=${userId}` ); if (!respose.ok) { throw new Error("Fetch Todo Error"); } const data: ITodoInfo[] = await respose.json(); console.log('todo data=',JSON.stringify(data, null, 2)); return data; } import { fetchTodos } from "@/api/todo/fetch-todos"; import useUserInfoStore from "@/store/user-info-store"; import { ILoginUserInfo } from "@/utils/types"; import { useQuery } from "@tanstack/react-query"; export function UserTodosData() { const loinData: ILoginUserInfo = useUserInfoStore((state) => state.userInfo); return useQuery({ queryFn: () => fetchTodos(loinData.blngCoCd, loinData.userId) , queryKey: ["todos"], }); } 이런식으로 zustand의 유저 정보를 가져와 훅에서 api를 호출을 하면 처음은 정보를 가져오는데. refresh를 하면 다시 가져 올때 blngCoCd와 userId가 null이 되면서 리스트를 가져오지 못하네요. zustand의 정보는 localstorage로 보관하고 있고... const loinData: ILoginUserInfo| null = useUserInfoStore((state) => state.userInfo); const blngCoCd = loinData?.blngCoCd; const userId = loinData?.userId; // blngCoCd와 userId가 모두 존재할 때만 쿼리를 활성화합니다. const enabled = !!blngCoCd && !!userId; return useQuery({ queryFn: () => fetchTodos(blngCoCd, userId) , queryKey: ["todos", blngCoCd, userId], enabled: enabled, }); 이렇게 변경을 했는데... api에 파라미터를 넘겨야 하는경우 새로고침을 할 경우 이런식으로 하는게 일반적인가요?

  • react
  • typescript
  • react-query
  • supabase
  • zustand
shoncg 댓글 2 좋아요 0 조회수 107

함수나 변수 작성(선언?) 위치 선택 기준

해결됨

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

아래의 코드를 기준으로 했을때, getMonthlyData함수는 Home 컴포넌트의 바깥에서 작성해주고 있고, 그외에 onIncreaseMonth같은 것은 Home 내부에 작성해주고 있는데, 매번 이런 작성 위치가 헷갈리더라고요. 작성 위치를 정하는 명확한 기준이 따로 있을까요?? import { useState, useContext } from "react"; import { DiaryStateContext } from "../App"; import Header from "../components/Header"; import Button from "../components/Button"; import DiaryList from "../components/DiaryList"; const getMonthlyData = (pivotDate, data) => { const beginTime = new Date( pivotDate.getFullYear(), pivotDate.getMonth(), 1, 0, 0, 0 ).getTime(); const endTime = new Date( pivotDate.getFullYear(), pivotDate.getMonth() + 1, 0, 23, 59, 59 ).getTime(); return data.filter( (item) => beginTime <= item.createdDate && item.createdDate <= endTime ); }; const Home = () => { const data = useContext(DiaryStateContext); const [pivotDate, setPivotDate] = useState(new Date()); const monthlyData = getMonthlyData(pivotDate, data); const onIncreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() + 1)); }; const onDecreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() - 1)); }; return ( <div> <Header title={`${pivotDate.getFullYear()}년 ${pivotDate.getMonth() + 1}월`} leftChild={<Button onClick={onDecreaseMonth} text={"<"} />} rightChild={<Button onClick={onIncreaseMonth} text={">"} />} /> <DiaryList /> </div> ); }; export default Home;

  • javascript
  • react
keeenco 댓글 2 좋아요 0 조회수 93

one과 two의 값지정

미해결

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

🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요) 제목을 구체적으로 작성해 주세요 ✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다. ⛔ ️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다. 깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요 직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요 더 빠른 답변이 가능합니다! 2.4 강의 중 rest매개변수 부분에서 // 2. Rest 매개변수 // -> Rest는 나머지, 나머지 매개변수 function funcB(one,two,...rest) { console.log(rest); } funcB(...arr1); 여기서 혹시 one과 two에 값을 지정할 수 있는 방법도 있을까요?? one = 10, two =20 해서 console.log()로 찍어봤을 때 10, 20 ,...이 되게 하는 방법이 있는 지 궁금합니다.

  • javascript
  • react
  • node.js
  • 카카오공채-개발
고민지 댓글 1 좋아요 0 조회수 49

혹시 해당 강의 보면서 테스트용으로 사용할 맥북을 구매할 예정인데 어느정도 스펙 이상으로 사야 할지 의견 받아볼수있을까요?

해결됨

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

혹시 해당 강의 보면서 테스트용으로 사용할 맥북을 구매할 예정인데 어느정도 스펙 이상으로 사야 할지 의견 받아볼수있을까요?

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

.

미해결

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

.

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

import 파일 경로를 찾지 못 해서 에러가 발생합니다.

미해결

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

안녕하세요. 에러가 발생해서 질문드립니다. 경로는 아무리 봐도 맞게 쓴거 같은데 찾지를 못 합니다. Build Error Module not found: Can't resolve '@/app/(afterLogin)/_component/FollowRecommend' ./Desktop/FRONT/z-com/src/app/(afterLogin)/layout.tsx (10:1) Module not found: Can't resolve '@/app/(afterLogin)/_component/FollowRecommend' 8 | import LogoutButton from "@/app/(afterLogin)/_component/LogoutButton"; 9 | import TrendSection from "@/app/(afterLogin)/_component/TrendSection"; > 10 | import FollowRecommend from "@/app/(afterLogin)/_component/FollowRecommend"; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 11 | 12 | export default function AfterLoginLayout({ children }: { children: ReactNode }) { 13 | return ( Import map: aliased to relative './src/app/(afterLogin)/_component/FollowRecommend' inside of [project]/Desktop/FRONT/z-com/src https://nextjs.org/docs/messages/module-not-found

  • react
  • next.js
  • react-query
  • next-auth
  • msw
김영제 댓글 2 좋아요 0 조회수 144

댓글 수정, 삭제 시 캐시 수정

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

강의 정말 잘 듣고있습니다! 10.6 강의 수강 중 댓글 추가 시에는 Comment 타입과 일치시키기 위해 프로필 데이터를 조회해서 author 객체를 포함시켜주었는데 수정, 삭제 시에는 왜 따로 처리를 하지 않는지 궁금합니다. 삭제 시에는 해당 데이터를 삭제하기에 불필요하다고 생각되긴하는데 수정 시에는 왜 에러가 발생하지 않나요??

  • react
  • typescript
  • react-query
  • supabase
  • zustand
rladbstjd96 댓글 3 좋아요 0 조회수 118

forget-password 이후 reset password 이메일이 오지 않네요.

해결됨

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

강의 잘 듣고 있습니다. 다름이 아니라, forget-password 로 정상적으로 처리가 되었다고 하는데요. 그러나, 등록해 둔 이메일로 reset password 메일이 오지 않네요. 혹시 Supabase 셋팅에서 어떤 부분을 확인해야 할까요? 검색을 해보니 이렇게 셋팅하라고 해서 한 상태입니다 답변 부탁드립니다.

  • react
  • typescript
  • react-query
  • supabase
  • zustand
억수 댓글 2 좋아요 0 조회수 142

소리가 잘 들리지 않는 부분이 있습니다.

해결됨

알면 칼퇴하는 Spring Boot 백엔드 바이브 코딩 맛보기

중간중간 소리가 잘 들리지 않는 구간이 있습니다.

  • java
  • spring-boot
  • intellij-idea
  • claude
  • 바이브코딩
이준영 댓글 2 좋아요 0 조회수 93

[staleTime 설정] 새로고침 시 로딩 중 대신 에러 메세지 출력

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

staleTime 을 5초로 설정하고 slow4G 로 설정한 다음 /todos/1 페이지 에서 새로고침을 했는데 로딩중입니다.. 가 아니라 오류가 발생했습니다. 가 잠깐 나오고 페이지가 정상적으로 랜더링 되어서 아래와 같이 error 조건문을 수정하고 data?.content 로 바꾸니까 강사님께서 알려주신대로 로딩중입니다.. 가 잠깐 나오고 페이지가 정상적으로 랜더링 됩니다. 혹시 이렇게 해도 상관이 없는건지 여쭤봅니다

  • react
  • typescript
  • react-query
김성빈 댓글 2 좋아요 0 조회수 108

Zustand 사용 중 컴포넌트 리렌더링 관련 질문

해결됨

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

관련 챕터: Zustand 기본 사용법 2 질문 관련 부분: 4:34 ~ 6:20 질문 내용: 역할에 따라 컴포넌트를 분리하는 과정에서, count 값 변경 시 Controller 컴포넌트까지 리렌더링되는 이유에 대해 설명해주셨는데요. 제가 맞게 이해했는지 헷갈려서 질문 드립니다. count 값이 바뀔 때마다 Viewer , Controller 컴포넌트가 동시에 리렌더링된다. 버튼 태그를 포함하는 Controller 컴포넌트까지 리렌더링되는 이유는 1. Zustand는 store 안의 state 가 바뀌면 store 를 가져다 쓴 모든 컴포넌트가 다시 그 state 값을 반영하도록 리렌더링된다. 2. Controller 는 구조분해 할당으로 increase , decrease 만 쓴다고 해도, 훅이 반환한 객체 안에 count 도 포함돼 있으므로 count 가 바뀌면 Controller 도 리렌더링된다. 제가 맞게 이해한 걸까요?

  • react
  • typescript
  • react-query
  • supabase
  • zustand
춘식이 댓글 1 좋아요 0 조회수 125

tailwind css / sass 사용율? 에 대해서 궁금합니다

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

저는 항상 scss를 많이 사용해서 쭉 사용하고있었는데 tailwind 가 무섭게 치고 올라오는거 같더라구요 ㅎㅎ 둘다 공부를 하면서 사용해보고있는데 혹시 실무나 이런쪽에서는 어느걸 더 많이 활용하는지도 궁금합니다 ㅎㅎ

  • react
  • typescript
  • react-query
  • supabase
  • zustand
므민 댓글 2 좋아요 0 조회수 180

4.6 useMutation 관련 질문 !

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

useMutation에 대해 설명하실 때, createTodo라는 비동기 함수의 상태를 관리해야 하기 때문에 별도의 state를 만들어야 한다. 하지만, useMutation을 사용하면 이러한 상태까지도 관리해준다. 라고 설명해주셨는데 여기서 말씀하신 "비동기 함수의 상태 관리" 라는 것이 isLoading이나 isPending 이런 것들을 의미하는 걸까요??

  • react
  • typescript
  • react-query
창한 댓글 2 좋아요 0 조회수 123

수강생 디스코드 커뮤니티 관련 질문

미해결

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

개인적으로 오픈 채팅방이나 카페는 별로 선호하지 않아서 혹시 안내된 디스코드 같은 경우에는 링크가 없을까요?

  • react
  • typescript
  • next.js
  • 카카오공채-개발
yeong 댓글 1 좋아요 0 조회수 46

관리자 자동 로그아웃 문의드립니다.

해결됨

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

관리자 계정이 시간이 지나면 자동으로 로그아웃이 안되어서 매번 isLoggedIn false로 바꿔주고 있는데 강의에서 24시간 설정했는데 24시간 이후 자동로그인이 안되는 것 같아서 문의드립니다. 감사합니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • mongodb
robot 댓글 1 좋아요 0 조회수 102

page 컴포넌트명을 동일하게 Page 로 짓는 이유가 있나요?

해결됨

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

안녕하세요. layout 컴포넌트는 레이아웃 용도에 맞게 컴포넌트 함수명을 짓는데.. page 컴포넌트는 일관되게 Page 로 컴포넌트 명을 사용하는 이유가 있나요? page 컴포넌트도 IndexPage, SearchPage, BookDetailPage 식으로 의미를 부여했으면 합니다.

  • react
  • typescript
  • next.js
  • 카카오공채-개발
Codingbear 댓글 2 좋아요 1 조회수 101

별도의 CSS 파일을 styles 폴더에 작성하면 안되나요?

해결됨

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

Next.js 에서 스타일 파일을 작성할 때 기존에 styles 폴더 안에 작성하지 않는 이유가 있나요? 처음 프로젝트 생성할 때 보면 styles 폴더에 module.css 파일이 존재하던데.. styles 폴더가 존재하는 이유는 globals.css 하나 땜인가요?

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

인기 태그

인프런 TOP Writers

주간 인기글