묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
강의 내용 빈약함
EC2 설정하고 RDS 설정하고그 후에 어떻게 하라는 건지 설명이 없어요...구글링하면서 보안 설정은 했는데마지막 강의가 너무 설명이 없었어서 따로 강의를 추가해주셨으면 해요나머지 강의는 다 좋은데 배포하기 강의가 너무 아쉽네요
-
미해결Next + React Query로 SNS 서비스 만들기
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
프라이빗 컴포넌트로 잡은 것과 그냥 컴포넌트로 잡은 것의 차이가 없지 않나요?컴포넌트를 예로 강의를 찍어 주셨는데 폴더만 더 늘어나고 좋은 예는 아닌듯합니다.프라이빗 폴더가 어떨 때 왜 필요한지를 알려주는게 더 교육적일 것 같아 글 남깁니다.컴포넌트 자체가 재사용성을 갖는 것이기에 내부 구성요소만 표기하는 프라이빗은 큰 의미가 없을 것 가은데요. 컴포넌트 외 폴더라고 해도 와닿지는 않습니다. 어차피 컴포넌트로 사용하면 uri 에도 잡히지 않고 말이죠. 전체적으로 폴더 구조만 더 복잡해지는 것 같아요
-
미해결Next + React Query로 SNS 서비스 만들기
vanilla-extract 못찾는 문제
안녕하세요~ 강의 잘 보고 있습니다! vanilla-extract 적용해보려고 하는데 패키지 설치하고 config설정까지 했는데 해당 에러가 나서 질문드립니다. next.config.ts파일과 globalTheme.css.ts, layout.ts중에 문제가 있을까요?? 파일 이름도 문제가 없고 코드 그대로 사용했는데도 해당 에러가 나서 next15에서 vanilla-extract 적용을 할 수 없는건지 궁금해서 여쭤봅니다.. 감사합니다// package.json// next.config.tsimport type { NextConfig } from "next"; const { createVanillaExtractPlugin // eslint-disable-next-line @typescript-eslint/no-require-imports } = require('@vanilla-extract/next-plugin'); const withVanillaExtract = createVanillaExtractPlugin(); const nextConfig: NextConfig = { /* config options here */ experimental: { serverActions: { bodySizeLimit: '10mb', // Set the body size limit for server actions } }, async rewrites() { return [ { source: '/upload/:slug', destination: `${process.env.NEXT_PUBLIC_BASE_URL}/upload/:slug`, // Matched parameters can be used in the destination }, ] }, }; module.exports = withVanillaExtract(nextConfig); // globalTheme.css.tsimport {assignVars, createGlobalTheme, createGlobalThemeContract, globalStyle} from "@vanilla-extract/css"; export const global = createGlobalThemeContract({ background: { color: 'bg-color' }, foreground: { color: 'fg-color' }, }) const whiteGlobalTheme = { background: { color: 'rgb(255, 255, 255)' }, foreground: { color: 'rgb(0, 0, 0)' }, } const darkGlobalTheme = { background: { color: 'rgb(0, 0, 0)' }, foreground: { color: 'rgb(255, 255, 255)' }, } createGlobalTheme(':root', global, whiteGlobalTheme); // 실제 적용 globalStyle(':root', { '@media': { '(prefers-color-scheme: dark)': { vars: assignVars(global, darkGlobalTheme), } } }) globalStyle('*', { boxSizing: 'border-box', padding: 0, margin: 0, }) globalStyle('html', { '@media': { '(prefers-color-scheme: dark)': { colorScheme: 'dark', } } }); globalStyle('html, body', { maxWidth: '100dvw', overflowX: 'hidden', }) globalStyle('body', { color: global.foreground.color }) globalStyle('a', { color: 'inherit', textDecoration: 'none', }) // layout.tsximport type {Metadata} from 'next' import {Inter} from 'next/font/google' import './globalTheme.css'; import {MSWProvider} from "@/app/_component/MSWComponent"; import AuthSession from "@/app/_component/AuthSession"; if (process.env.NEXT_RUNTIME === 'nodejs' && process.env.NODE_ENV !== 'production' && process.env.MSW_ENABLED !== 'false') { const {server} = require('@/mocks/http') server.listen() } const inter = Inter({subsets: ['latin']}) export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', } type Props = { children: React.ReactNode, }; export default function RootLayout({children}: Props) { return ( <html lang="en"> <body className={inter.className}> <MSWProvider> <AuthSession> {children} </AuthSession> </MSWProvider> </body> </html> ) }
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
인텔레리제이 세팅환경도 알려주세요
인텔레리제이 세팅환경도 알려주세요
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
린캔버스 수정 시 CanvasDetail 컴포넌트 리랜더링 질문
안녕하세요. 린캔버스 수정 수업 관련해서 질문이 있어서 문의 드립니다. const handleCanvasChange = async updatedCanvas => { try { await updateCanvas(id, updatedCanvas); setCanvas(updatedCanvas); } catch (err) { alert(err.message); } };addNote, deleteNote, updateNote 등의 이벤트가 발생할 경우 setCanvas를 통해 useState에 선언된 canvas 값을 바꾸는데 그렇게 되면 CanvasDetail과 그 하위에 선언된 자식 컴포넌트들이 전부 리랜더링되는 것 같은데 강의에서는 그렇게 보이지 않아서 문의 드립니다.const [canvas, setCanvas] = useState();canvas가 setCanvas 메서드를 통해서 상태가 변하면 리랜더링 되면서 하위 컴포넌트인 Note의 isEditing 값이 다시 false로 초기화되는데 강의에서는 여전히 true값이 남아있는 것 같습니다. 전체적인 코드를 동일하게 작성한 것 같은데 차이점이 발생하는 이유가 무엇일까요?
-
해결됨아바타 커뮤니티앱 만들기 (React Native Expo)
Tanstack query 구조에 관해 질문 드립니다.
엔드포인트마다 훅을 만드는 게 가장 좋은 방법일까요? 엔드포인트가 많아진다면 파일이 너무 많아질 것 같은데 더 좋은 방법이 있을까요?
-
미해결Next + React Query로 SNS 서비스 만들기
fetch 캐싱과 revalidate 관련
안녕하세요 제로초님 fetch 캐싱과 revalidate 관련해서 궁금한 점이 있어 질문드립니다. await fetch('https://api.example.com/posts', { next: { revalidate: 60 }, });A가 /posts를 최초 요청합니다.→ API에서 데이터를 받아오고, 해당 데이터는 Next.js 서버 캐시에 저장이후 60초 동안은 다른 누구든지 이 캐시된 데이터를 그대로 받음그런데 60초가 지나기 전에 DB에서 게시글 1번의 제목이나 내용이 수정됨60초가 지나고 A가 다시 목록을 요청→ 이 시점은 revalidate 만료 시점 이후이므로 재검증 타이밍→ 하지만 A는 여전히 이전 캐시 데이터를 먼저 받고,→ A의 요청을 계기로 Next.js가 백그라운드에서 API를 다시 fetch하여 캐시를 갱신곧이어 B가 /posts를 요청하면→ B는 A 덕분에 갱신된 최신 데이터를 바로 받음 제가 이해한 것이 맞을까요? 만약 저런식으로 동작하면 상세 페이지와 데이터 불일치 문제가 발생할 수 있지 않을까 해서요 만약 상세 페이지 요청도 이렇게 작성되어 있다면await fetch('https://api.example.com/posts/1', { next: { revalidate: 60 }, });A는 목록 요청만 했고, 상세 페이지는 요청하지 않음B는 A 이후에 목록을 보고 → 최신 제목을 확인한 뒤,→ 게시글 1번의 상세 페이지를 클릭그런데 상세 페이지의 제목은 여전히 수정 전의 이전 제목으로 보임→ 목록과 상세 페이지 간에 데이터가 불일치할 수 있음정리하자면 제가 이해한 Next.js의 fetch + revalidate 캐시 동작이 맞는지 궁금하고위와 같은 목록-상세의 데이터 불일치 현상은 실제로 발생 가능한 문제인지 궁금합니다. 제가 실제로 테스트해봤을 때 위 시나리오대로 목록과 상세 페이지에서 서로 다른 제목이 보이는 걸 확인했습니다. 혹시 제가 잘못 이해하고 테스트한 부분이 있는 건지, 아니면 실제로도 발생할 수 있는 동작인지 궁금합니다.
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
forwardRef 지원 중단에 대한 대응?
https://ko.react.dev/reference/react/forwardRef공식문서를 보면 앞으로는 forwardRef 지원을 중단한다고 나와있는데 이에 대응하려면 코드 작성을 어떻게 하면 될까요?
-
미해결Next + React Query로 SNS 서비스 만들기
강의 듣는 방법
안녕하세요.강의를 어떤 방식으로 듣는 것이 가장 효율적인지 여쭤보고 싶습니다.처음 page.tsx를 만들 때는 하나하나 따라 만들며 진행했지만, 중간부터는 급하게 따라가기만 하다 보니 시간도 오래 걸리고, 오히려 비효율적이라는 생각이 들었습니다.또한 수업 자료의 GitHub를 보면 각 폴더 설명에 "따라치기 위해 보면 안 된다"고 안내되어 있어서, 제가 잘못된 방식으로 수강하고 있는 건 아닌지 고민이 됩니다.그리고 ch0~ch4 강의 이후의 코드를 올려주신 것은, 강의를 들으면서 이해가 안 되거나 따라가지 못한 부분이 있을 경우 해당 코드를 참고하거나 다운로드해서 사용해도 괜찮다는 의미일까요?또한 강의 초반에 GitHub에서 해당 폴더로 들어가 복사하고, 설명을 들으며 진도를 나가는 방식이라고 말씀하신 것을 보았는데, 그렇다면 굳이 모든 코드를 따라 치기보다는 전체 코드를 먼저 불러온 뒤 실행해두고, 강의를 들으며 흐름과 설명 위주로 이해하는 방식으로 수강해도 괜찮을지 궁금합니다.지금처럼 따라치며 수강하려다 보니 상대적으로 시간이 많이 소요되고, 비효율적일 수 있다는 생각이 들어 이렇게 문의드립니다.이에 대해 보다 효율적인 수강 방법에 대해 조언해주시면 감사하겠습니다.
-
미해결Next + React Query로 SNS 서비스 만들기
40강 로그인
안녕하세요! 40강 관련 질문입니다. 강의에서 로그인 하는 방식을 두 가지 알려주셨습니다. 서버액션 사용서버액션 미사용 서버액션 미사용해서 구현할 때 tanstack query 의 mutation 을 사용하는 방식도 좋지 않을까 생각을 하는데요, 로그인 버튼에 loading 처리를 하거나 등 의 이유로요! 근데 제로초님은 useState 만 쓰셨는데, 간단하게 보여주기 위해서 그렇게 하신걸까요? 로그인/회원가입에 tanstack query 를 사용하는 것이 추천하는 방식은 아닌걸까요?? 제가 강의 들으면서 개인프로젝트에 적용하고 있어서, 어떤 방식이 좋은지 고민이 돼서 여쭙니다!
-
미해결Next + React Query로 SNS 서비스 만들기
47강 팔로잉 게시글
안녕하세요 제로초님! 47강의 팔로잉 게시글은 SSR 안필요하다고 하셨는데 그 이유가 뭔가요?! 제 생각은.. 팔로우 한 것은 유저마다 달라서? ssr 자체가 말이 안돼서(?) 그런거라고 추측해봅니다.
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
S3, EC2, RDS까지 다 연결 후
S3, EC2, RDS까지 다 연결한 후에 끝인가요?ec2에 따로 postgresql를 설치해야하는 건가요?
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
강의를 들을 수가 없네요
여기 질문 답변 게시판을 보면 환경설정 버전 문제 때문에 질문이 한가득인데, 강사님과 인프런 측에서 새로운 영상이라도 만들어야 하는 것 아닐까요? 아니면 버전에 따라 업데이트된 공식 문서라도 제공해야 하는 것 아닌가요? 프로젝트를 시작을 할 수가 없네요
-
미해결Next + React Query로 SNS 서비스 만들기
Post 정보 불러올 때
안녕하세요 제로초님 질문있습니다. 강의에서 post 데이터 서버로부터 불러오고 화면에 렌더링 해주는 과정을 아래와 같이 이해하였습니다. prefetchQuery 로 서버로부터 데이터를 가져온다.그렇게 가져온 데이터를 client component 에서 useQuery 로 가져온다 위와 같이 하는 이유가 궁금합니다. 사실 처음부터 클라이언트 컴포넌트로 useQuery 만 써도 문제없이 동작할텐데useQuery 이전에 prefetchQuery 로 먼저 불러오는 이유는 ssr 을 위해서이고, 그말은 즉 seo 를 위해서 인가요? (useQuery 만 사용하면 csr 방식이여서..?) 감사합니다.
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
루비버전 에러
% npx react-native@0.72.6 init MatzipApp --version 0.72.6 ###### ###### ### #### #### ### ## ### ### ## ## #### ## ## #### ## ## ## ## ## ## ### ### ## ## ######################## ## ###### ### ### ###### ### ## ## ## ## ### ### ## ### #### ### ## ### ## #### ######## #### ## ## ### ########## ### ## ## #### ######## #### ## ### ## ### #### ### ## ### ### ## ## ## ## ### ###### ### ### ###### ## ######################## ## ## ### ### ## ## ## ## ## ## #### ## ## #### ## ## ### ### ## ### #### #### ### ###### ###### Welcome to React Native! Learn once, write anywhere ✔ Downloading template✔ Copying template✔ Processing template✔ Installing Ruby Gemsℹ Installing Ruby Gems⠧ Installing CocoaPods(node:89384) [DEP0053] DeprecationWarning: The util.isObject API is deprecated. Please use arg !== null && typeof arg === "object" instead.(Use node --trace-deprecation ... to show where the warning was created)(node:89384) [DEP0049] DeprecationWarning: The util.isFunction API is deprecated. Please use typeof arg === "function" instead.✖ Installing CocoaPodserror ✖ Installing CocoaPodserror An error occured while trying to install CocoaPods, which is required by this template.Please try again manually: sudo gem install cocoapods.CocoaPods documentation: https://cocoapods.org/.info Run CLI with --verbose flag for more details.% ruby -vruby 2.7.6p219 (2022-04-12 revision c9c2245c0a) [arm64-darwin24]% 강의대로 따라해서 루비버전 ruby 2.7.6 으로 바뀌면 될 줄 알았는데 이렇게 나오네요 맥북프로 m4 셀은 zsh 쓰고 있습니다 이거 어떻게 하죠 뭐가 문제인지 알려주세요
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
버전관련
맥북쓰는데 웹사이트 가보니까 명령어가 이렇게 뜨는데 npx @react-native-community/cli@latest init AwesomeProject강의랑은 완전 커맨드가 다른데 어떤 커맨드로 써야되나요 빨리 알려주세요
-
해결됨아바타 커뮤니티앱 만들기 (React Native Expo)
expo, cli 선택 중 고민이있습니다..
안녕하세요, 강사님. 좋은 강의 감사히 듣고 있습니다!현재 실제 앱 출시를 목표로 개발을 시작하려고 하는데, Expo와 CLI 중 어떤 방식으로 진행할지 고민 중입니다.공식 문서에서도 Expo를 권장하고 있고, Prebuild 기능 덕분에 대부분의 네이티브 라이브러리도 사용할 수 있고, 성능 최적화도 많이 이루어진 것으로 알고 있습니다.CLI와 Expo 사이의 런타임 성능이나 최종 번들 용량 차이에 대한 정확한 비교 자료가 부족해 선택이 쉽지 않은 상황입니다.강사님께서 CLI와 Expo를 모두 사용해보셨을 때, 두 방식 간에 실제 체감되는 성능이나 앱 용량 차이가 유의미했는지 궁금합니다.만약 차이가 크다면 CLI를 선택하는 쪽이 맞을 것 같기도 한데, 강사님의 의견이 듣고 싶습니다. 감사합니다!
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요 카카오 이미지 uri 부분이 잘못된 것이 아닌가 싶습니다?
카카오 이미지 uri는 카카오쪽 서버 도메인까지 모두 포함하고 있는데,로컬호스트 도메인까지 앞에 붙여주는 것 같아서 그 부분이 정정되어야 할 것 같습니다?
-
미해결[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
무한스크롤 기능, 검색기능 대소문자
강의 잘 보고 있습니다.무한 스크롤 기능 구현 해보았는데요영화가 60개까지 나오고 진행이 되지 않다가 개발자 도구를 켜면 더 스크롤이 되는데 그것도 120번 영화에서 끊깁니다. 머가 문제일까요 ...ㅠ 검색기능에서 title 첫글자 대소문자 상관없이 하려면 어디를 수정해야 하나요?
-
해결됨아바타 커뮤니티앱 만들기 (React Native Expo)
token 관련 질문
로그인 과정에서 refresh token은 강의 편의상 생략한 건가요?! 따로 사용하지 않은 이유가 있는지 궁금합니다.
