묻고 답해요
160만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
- 
      
        
    미해결따라하며 배우는 리액트 A-Z[19버전 반영]
안녕하세요 개발과 상관없는 질문입니다만
안녕하세요 강사님 좋은 강의 감사드립니다vscode 테마 정보좀 알수있을까요?
 - 
      
        
    해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
완성 전에 배포
완성전에 확인차 배포를 했는데 완성 후 그냥 vercel만 입력하면 빌드까지 되는건가요?
 - 
      
        
    미해결코딩 몰라도 OK! CursorAI로 시작하는 개발 생활 (웹/초급)
codebase 안뜨는 경우
실습과정 따라하는 중에 codebase가 안뜨더라구요.해결 방법을 찾으려해도 잘 안찾아져요..
 - 
      
        
    해결됨한 입 크기로 잘라먹는 Next.js(v15)
404.tsx
🚨긴급 공지04.30 ~ 05.07 휴가 기간으로 인해 효빈님께서 답변을 대신 해 주실 예정입니다.불편함을 드려 죄송합니다. 금방 복귀하겠습니다 🫡 🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요)제목을 구체적으로 작성해 주세요✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다.⛔️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다.깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요!제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요더 빠른 답변이 가능합니다!강의랑 동일하게 [[...id]].tsx랑 404.tsx 만들었는데 url을 http://localhost:3000/book/123-123123로 해도 왜 잘 표현 될까요?http://localhost:3000/adfafdas 이런식으로 하면 404페이지로 잘 이동 됩니다.
 - 
      
        
    미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
제 에디터에선 notepad가 안나와요
저는 왜 notepad가 안뜰까요?
 - 
      
        
    미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
서버/클라이언트 컴포넌트를 나누는 기준이 궁금합니다.
안녕하세요! 학습 중, 궁금한게 있어 질문 드립니다!이번 무한 스크롤 과정에서는 클라이언트 컴포넌트가 사용되었는데, 순수 서버 컴포넌트로는 개발하기는 거의 불가능에 가깝다고 느껴졌습니다. 가정을 하면, "사용자의 동작 혹은 이벤트에 따라서 랜더링 요소가 변경되어야 한다" 면, 클라이언트 컴포넌트를 거의 사용해야 될 것 같다라고 생각이 됩니다. 이러한 케이스가 아니라면, 대부분 서버 컴포넌트로 하는것이 좋다(?) 라고 느껴집니다.보안성...? 응답 성능적으로도, SEO 관점으로도...혹시 위의 내용이 틀리거나, 또 다르게 판단을 해야될 기준? 같은게 있을까요?
 - 
      
        
    해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
섹션 5. React.js 개론 - 구동원리에서 강의와 제 코드가 다릅니다
안녕하세요 강의 잘 듣고 있습니다현재 섹션 5. React.js 개론 - 구동원리를 듣고 있는데 import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css' import App from './App.jsx' createRoot(document.getElementById('root')).render( <StrictMode> <App /> </StrictMode>, )강의에 있는 코드와 제 main.jsx의 코드가 달라서요.. 전부 똑같이 설치했는데 달라도 괜찮은건가요?
 - 
      
        
    해결됨아바타 커뮤니티앱 만들기 (React Native Expo)
저장 버튼이 생기지 않습니다.
저장 버튼을 동일하게 작성했는데 화면상에 그려지지 않더라구요. 공식문서도 확인해보고 찾아보는데, isFocused나 useLayoutEffect등을 통해 실험해봐도 저장 버튼이 보이지 않습니다.무엇을 잘못 작성했나 싶어 자료를 다운로드 받아 post 의 _layout.tsx 와 write.tsx도 복사, 붙여넣기 하여 확인했는데도 저장버튼이 보이지 않았습니다. 그런데, post의 _layout에서 headerRight을 작성하니 보입니다. setOptions가 동작하지 않는 것 같이 보이는데, 원인을 잘 모르겠습니다.어떻게 해결하면 될까요? import CustomButton from "@/components/CustomButton"; import DescriptionInput from "@/components/DescriptionInput"; import TitleInput from "@/components/TitleInput"; import useCreatePost from "@/hooks/queries/useCreatePost"; import { ImageUri } from "@/types"; import { useNavigation } from "expo-router"; import { useEffect } from "react"; import { FormProvider, useForm } from "react-hook-form"; import { StyleSheet } from "react-native"; import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"; type FormValues = { title: string; description: string; imageUris: ImageUri[]; }; export default function PostWriteScreen() { const navigation = useNavigation(); const createPost = useCreatePost(); const postForm = useForm<FormValues>({ defaultValues: { title: "", description: "", imageUris: [], }, }); const onSubmit = (formValues: FormValues) => { createPost.mutate(formValues); }; useEffect(() => { navigation.setOptions({ headerRight: () => ( <CustomButton label="저장" size="medium" variant="standard" onPress={postForm.handleSubmit(onSubmit)} /> ), }); }, []); return ( <FormProvider {...postForm}> <KeyboardAwareScrollView contentContainerStyle={styles.container}> <TitleInput /> <DescriptionInput /> </KeyboardAwareScrollView> </FormProvider> ); } const styles = StyleSheet.create({ container: { margin: 16, gap: 16, }, }); import { colors } from "@/constants"; import { Feather } from "@expo/vector-icons"; import { Link, Stack } from "expo-router"; export default function PostLayout() { return ( <Stack screenOptions={{ headerTintColor: colors.BLACK, contentStyle: { backgroundColor: colors.WHITE, }, }} > <Stack.Screen name="write" options={{ title: "글쓰기", headerShown: true, headerLeft: () => ( <Link href={"/"} replace> <Feather name="arrow-left" size={28} color={"black"} /> </Link> ), }} /> </Stack> ); } +추가로 확인한 부분.app의 _layout.tsx에서 <Stack.Screen name="post" options={{ headerShown: false }} />이 친구를 주석하면 헤더가 두 개 나오게 되는데, 숨겨놨던 루트에 저장 버튼이 떠 있더라구요.이걸 어떻게 수정하면 되는건지.. 어렵네요
 - 
      
        
    해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
[30-01] 웹 에디터와 폼 라이브러리
안녕하세요해당수업중 강의 내용대로 했는데 실행시 아래와 같이 에러 뜨고 정상 실행이 안됩니다. TypeError: react_dom_1.default.findDOMNode is not a functionat ReactQuill.getEditingArea (http://localhost:3000/_next/static/chunks/node_modules_5754136c._.js:16760:43)at ReactQuill.instantiateEditor (http://localhost:3000/_next/static/chunks/node_modules_5754136c._.js:16631:50)at ReactQuill.componentDidMount (http://localhost:3000/_next/static/chunks/node_modules_5754136c._.js:16590:14)at LoadableComponent (http://localhost:3000/_next/static/chunks/_2df4111c._.js:296:57)at WebEditorPage (http://localhost:3000/_next/static/chunks/_2df4111c._.js:81:215)at ClientPageRoot (http://localhost:3000/_next/static/chunks/node_modules_next_dist_1a6ee436._.js:2053:50)
 - 
      
        
    해결됨한 입 크기로 잘라먹는 Next.js(v15)
api폴더 하위의 api.ts들은 언제사용하나요?
백엔드서버와 통신할 때, service폴더를 만들고 하위에 api 정리를 자주 하였는데요,(fetch, axios instance등) 현재 강의에서 언급하고있는 이 api폴더는 next로 풀스택 개발외에는 딱히 사용되지 않는편인가요?
 - 
      
        
    해결됨(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>
PC 접속 X, 모바일 접속만 가능
선생님 안녕하세요!3시간 전에 서비스를 배포했습니다. 근데 PC 접속이 안되어 cafe24에서 설정한 DNS가 아직 적용이 잘안되어서 서비스 접속이 PC로 안되는줄 알았습니다.하지만 모바일로 접속하니 접속이 잘만 되더라구요?...어떻게 이럴수가 있을까요? PC가 안되면 모바일도 안되어야하지 않나요?
 - 
      
        
    미해결아바타 커뮤니티앱 만들기 (React Native Expo)
fetchQuery와, invalidateQueries 사용 질문있습니다.
선생님께서는 로그인직후 내 정보불러오기위해서 fetchQuery를쓰셨는데 invalidateQueries 를 써도 되는거아닌가? 무슨차이때문에 그런걸까?를 생각해봤는데 fetchQuery는 즉시 가져오는거기때문에 이후 /이나 뭐 어디다른페이지를가도 로딩이안뜨고 바로 최신상태를 유지하는 반면 invalidateQueries 를 사용하면 기존 쿼리를 scale로 처리해줘서 캐싱무효화를해주고 그 해당 query key를 사용중인 페이지에 들어가면 그때 서버로부터 리페치를 한다? 그렇기때문에 로딩이뜬다. 그래서 여기선 fetchQuery를 사용하신거다로 이해했는데 맞을까요?
 - 
      
        
    미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
린캔버스 수정1 강의 매개변수에 대해 질문있습니다.
안녕하세요 강의 잘 보고 있습니다. 린캔버스 수정1 강의 부분을 보고 있는데 조금씩 점점 어려워 질수록 헷갈리는 부분이 많은데 handleNotesChange 함수의 section, updatedNotes 의 매개변수가 작성이 되었는데 아직 초보자인 제가 이처럼 함수를 작성할 때 매개변수가 필요한지 필요하지 않는지에 대해 잘 모르겠더라구요. 정말 간단한거 예를 들어 삭제기능을 할땐 삭제할 id가 필요하니 id를 매개변수로 받아오고 이러한 부분은 이해를 하지만 지금처럼 조금 복잡해질때 어떤 매개변수가 필요하고 왜 필요한지에 대해 아직 어려운데 이럴때 어떤식으로 공부를 하면 좋을까요?
 - 
      
        
    해결됨아바타 커뮤니티앱 만들기 (React Native Expo)
3-2 에서 안드로이드랑 아이폰 Header쪽 스타일 다르게 주신 이유가있으실까요?
import { Link, Stack } from 'expo-router'; import Foundation from '@expo/vector-icons/Foundation'; import { colors } from '@/constants'; export default function AuthLayout() { return ( <Stack screenOptions={{ headerTintColor: colors.BLACK, contentStyle: { backgroundColor: colors.WHITE, }, }} > <Stack.Screen name="index" options={{ title: '로그인', headerTitleAlign: 'center', headerShown: true, headerLeft: () => ( <Link href={'/'} replace> <Foundation name="home" size={28} color={'black'} /> </Link> ), }} /> </Stack> ); } 선생님은 Link 태그에 paddingLeft해서 안드로이드 Header에서 조정해주신반면 저는 좀 더 통일성을위해서 headerTitleAlign 을 center로 줬습니다.이 방법이 더 괜찮아보이는데 어떤지 궁금해요!
 - 
      
        
    해결됨한 입 크기로 잘라먹는 Next.js(v15)
Vercel 배포 후 revalidate
안녕하세요! 2.20 강의를 듣고 Vercel에 배포까지 한 뒤에 궁금한 점이 생겨 질문 드립니다! 이전 강의 실습에서는 인덱스 페이지의 추천 도서를 On-Demand ISR 방식으로 적용한 뒤 직접 주소를 입력해 페이지 요청을 보내서 바꾸었는데 Vercel에 배포한 뒤에는 어떻게 요청을 보내서 추천 도서 목록을 바꿀 수 있나요? 아니면 시간 단위로 업데이트하는 방식으로 다시 바꾸어서 작성한 뒤 재배포하나요?
 - 
      
        
    미해결아바타 커뮤니티앱 만들기 (React Native Expo)
다이나믹 라우트 동작이 먹히지 않습니다 ㅠ
안녕하세요!React Native도 Next.js와 같이 폴더 기반 라우트라 게시글 수정 페이지를 ~/app/post/update/[id].tsx에 만들었고,해당 [id] 부분에 동적으로 게시글 id 값을 넣어 라우팅할 수 있게 하였습니다.또 ~/app/post/_layout.tsx 레이아웃에 Stack.Screen에 등록도 하였구요! 그래서 엑스포 라우터를 import 하여import { router } from 'expo-router'; 바텀 시트의 수정 버튼 클릭 시, 다음을 호출하였는데요,router.push(`/post/update/${post.id}`); 다음 에러가 납니다... ㅠ Argument of type /post/update/${number} is not assignable to parameter of type 'RelativePathString | ExternalPathString | ... '/post/update/[id]'라는 경로는 인식하는 것으로 보아 엑스포 라우터가 다이나믹 경로를 못 찾는 것 같은데 왜 이런 현상이 발생하는지 모르겠습니다 ㅠ
 - 
      
        
    미해결실무 중심! FE 입문자를 위한 React
어려워요 뭔소리죠 대체
반복문 뭔 소린지 모르겠어요 뭔가 영상이 짤린 느낌
 - 
      
        
    미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
린캔버스 프로젝트 공부중에 z인덱스 값.
선생님 린캔버스 프로젝트를 따라서 공부하고 있는데요.해더부분에 햄버거 버튼을 클릭하면 나오는 aside 메뉴가 z-9999를 줬는데요홈에 있는 돋보기가 더 위에서 노출되서요. 홈에 있는 서치 아이콘은 z-0으로 줬거든요 제가 뭘 잘못하고 있을까요 ㅠ
 - 
      
        
    미해결Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
9분경 진행한, 태그 필터링 관련 서버사이드 변경에 대한 질문
안녕하세요!먼저 좋은 강의 감사합니다. 중간쯤, 전체 데이터를 조회해서 Client 측에서 필터링 해서 사용하는게 아닌, 서버로부터 이미 필터링 된 데이터를 받아오도록 검색 api 를 수정한 내용입니다. 이 부분이 클라이언트 사이드 -> 서버 사이드로 변경하였다, 라는 내용을 설명주셨는데, 랜더링과는 전혀 관계 없는 데이터 필터링 주체를 말씀 하시 내용이라고 생각되는데 맞게 이해했는지 궁금합니다.즉, Notion = 서버, Next.js=클라이언트 관점으로 애기 하신게 맞는지 궁금합니다.
 - 
      
        
    해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
초기 설정에 대한 질문
강의를 만들어주셔서 감사합니다.몇가지 질문이 있습니다.Frontend와 Backend폴더를 만든이유가 협업과 소스코드관리를 위한것이라고 생각합니다.그런데 node-modules를 Frontend와 Backend에 각각 설치하신 이유가 있으실까요?company-website에 설치해서 두곳다 이용하는방법도 있을것같은데 Frontend와 Backend를 따로 설치하신이유가 궁금합니다.깃허브에는 node-modules가 저장되게 하지 않았는데요그러면 현재 사용하는 노트북이 아닌 다른 노트북이나 데스크톱에서 현재 개발한것을 이어서하고싶을 경우 Ch0-3과Ch0-4의 설치를 다시 해주면되나요?본강의를 듣고 저만의 웹페이지를 만드는게 목표인데 react에 대해 찾아보다가 Create React App(CRA)로 만드는법과 Vite, Next.js로 만드는방법이 있었습니다. 이중 Vite를 고른 이유가 있을까요?빠르다는 장점으로 선택하신건가요? 선택이유가 궁금합니다.