묻고 답해요
160만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
- 
      
        
    해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
챕터 17 배열 강의 듣는 중에 궁금한게 있습니다.
위처럼 콘솔찍었을때,22번째 콘솔에서 arrC 배열 요소를 보면 0번쨰 인덱스에 "hellooo?"가 출력됩니다. 그러나 그다음 콘솔에서는 0번째 인덱스가 1로 찍힙니다.29번째 줄에서 arrC 배열의 0번째 인덱스를 "hellooo?"로 수정한 것이 22번째줄 콘솔에서 보여지는 것 같은데, 실질적인 값은 무엇인지, 이런건 자바스크립트 자체 오류인건지 아니면 원리가 따로 있는지 궁금합니다.
 - 
      
        
    해결됨(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>
cloudflare gitgub private repository 가져올 수 있을까요?
cloudflare gitgub private repository 가져올 수 있을까요?제가 깃헙에 프로젝트를 private 으로 설정해둬서 page 선택할 때 뜨질 않습니다. 가능한 방법이 있을까요?
 - 
      
        
    해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
12.5 path 경로에 "/diary/:id" 입력시...
스크린샷에서 보는 것처럼 잘못된 페이지라고 나옵니다. "/diary"만 입력하면 문제없는데 id만 입력하면 경로를 찾지 못하는 것 같습니다.
 - 
      
        
    해결됨한 입 크기로 잘라먹는 Next.js(v15)
react 와 차이점 질문
react에서 데이터를 가져올 때페이지나 컴포넌트 내부에서 바로 가져와서사용했던 걸로 기억하는데AppRouter에서 사용하는 방식과 똑같은건가요?2. 그리고 pageRouter는 페이지에서만getStaticProps나 getServerSideProps를 사용해서 props형태로만 전달할 수 있기 때문에 이 단점을 보완하기 위해서 AppRouter에서는 지금처럼 사용하는건가요?3. 그리고 마지막으로 section02에서 search페이지를 만들때 getStaticProps를 사용하는 대신 페이지 함수에서 useEffect를 사용해서 바로 데이터를 가져오는 형식으로(react에서 사용하던 방식이랑 똑같은 방식으로) 사용하는 부분이 있는데 이렇게 하면 PageRouter의 단점인 props형태로만 전달할 수 있다도 보완되는거 아닌가요?pageRouter 배우고 appRouter배우면서 react쓰던 지식까지 겹치니까 많이 헷갈리네요..ㅠㅠㅠ질문이 좀 긴데 잘 부탁드립니다..
 - 
      
        
    해결됨한 입 크기로 잘라먹는 Next.js(v15)
prefetch 속성 질문
섹션 3. Page Router 핵심정리12.2.4)프리페칭안녕하세요 프리페칭 관련하여 실습을 진행하던 중 궁금한 사항이 있어서 질문드립니다 ! Next.js는 요청한 페이지의 js 번들과 현재 페이지 내에서 이동할 것 같은 페이지(Link 태그 및 router.prefetch로 설정한 페이지)를 프리페칭 한다고 배웠습니다. 근데 이때, Link 태그를 사용한 페이지 중 이동이 적을 것 같은 페이지는 <Link href="/" prefetch={false}>를 통해 프리페칭을 막을 수 있다고 배워 해당 내용을 실습했습니다. 근데 처음에 강력 새로고침을 진행하면 초기에는 프리페칭을 하지 않지만 약 5초 정도 지나면 추후에 제가 prefetch={false}로 설정한 Link 태그 js 번들 파일을 네트워크 탭에서 불러오는 것 같아 왜 그런지 궁금하여 질문드립니다.
 - 
      
        
    해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
이미지 수정시 CORS 에러 발생에 관하여
안녕하세요, 현재 이미지 업로드 및 수정 과제를 진행중에 발생한 CORS 에러에 대해 질문드립니다. 새로운 게시글의 이미지 input 데이터를 graphQL에 전송하는 것은 문제가 없습니다.수정하는 게시글에서 이미지를 onChange를 통해 updateFile에 업데이트하는 것도 문제가 없습니다.최종적으로 수정을 완료하는 graphQL에 통신을 하는 과정에서 다음과 같은 에러가 발생합니다.며칠전에 같은 작업을 했을 때에는 문제가 없었던 부분이라 질문드립니다.
 - 
      
        
    미해결React Native with Expo: 제로초에게 제대로 배우기
22강 딥링크, 유니버셜 링크 관련 질문(스토어 이동)
앱이 설치되지 않은 경우, 설치 안내 웹페이지가 아닌 스토어로 이동시키려면 어떻게 해야할지 알 수 있을까요?
 - 
      
        
    해결됨Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
notepad와 project rules 질문
안녕하세요~ 강의 잘 보고 있습니다! 현재 cursor 0.49.6 버전을 사용중입니다.영상에서 사용중인 버전은 Rule Type을 설정할 수 없는데 현재 제가 사용중인 버전에서는 아래와 같이 여러 옵션을 선택할 수 있습니다여기서 궁금한게 Notepad로 만들지 않고 Project Rules로 설정한 후 Manual로 설정하면 제가 원할때마다 직접 참고할 수 있도록 할 수 있는 것 같더라구요. 뭔가 notepad 기능들이 project rules로 흡수된 것 같은데 project rules로 등록해서 사용해도 문제 없을까요..??
 - 
      
        
    미해결React Native with Expo: 제로초에게 제대로 배우기
expo go에 threads-clone이 없어요
왜 expo go에 threads-clone 클론이 없을까요?그냥 아래 이미지처럼만 있습니다.
 - 
      
        
    해결됨한 입 크기로 잘라먹는 Next.js(v15)
generateStaticParams() 와 데이터 캐싱
5.3) 풀 라우트 캐시 3. 동적 경로에 적용하기 7:20generateStaticParams() 를 export하면 page component의 fetch() 메서드에서 명시적으로 데이터 캐싱 옵션을 설정하지 않아도 해당 페이지는 무조건 static page가 된다고 설명해주셨는데, 그럼 { cache: "force-cache" }로 되어있다고 생각하면 될까요? { cache: "force-cache" }를 안써도 되는지 궁금합니다.또, export const dynamicParams = true 또는 false의 설정에 따라 어떤 영향을 받는지도 함께 설명해 주시면 감사하겠습니다. 🙂 뭔가 저는 generateStaticParams() 를 export + export const dynamicParams = true + 데이터 캐싱 옵션 설정하지 않은 경우에도 새로운 id 경로로 접속 요청이 들어왔을 때, 내부적으로{ cache: "force-cache" } 로 적용되어 데이터 캐싱이 되는지 궁금한 것 같습니다. 🤔
 - 
      
        
    해결됨제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
seo 팁 생성기 1차 구현에 대해
안녕하세요~ 선생님~ ^^선생님 설명대로 잘 따라하니 정말 깔끔하고 정교한 SEO 팁 생성기가 되네요!OPENAI API를 사용하니 답변도 아주 정말 정교하고 치밀하게 잘 나오고요 ^^그런데 만약 이런 어플을 제작했다고 하면 매번 이렇게 터미널을 열고(커서를 열고) 수동으로 타이핑해서 프로그램을 실행 시키는게 여간 사용성이 안좋던데(제가 실제 적용하거나, 친구에게 주는것 등에서)이거 나중에 윈도우에서 아이콘 클릭해서 일반적인 프로그램 실행시키듯이 할수도 있는건가요?나중에 이번 강의에서 그거 배우는지 궁금해요~(차차 배워나가면 나중에 알게 되겠지만... 지금 너무 궁금해서요 ^^)
 - 
      
        
    미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
고민
안녕하세요 지금 4-4까지 들은 수강생입니다. 제가 데이터 사이언스 대학원 진학을 앞두고 있는데, 개인적으로 장고기반으로 한 웹페이지 + AI 프로젝트를 하고 싶어 장고를 배우고 하려고 하는데, 이게 솔직히 좀 많이 어렵고, 지금 코드를 따라치는 것만 하는 것 같아서 학습방향이 맞나해서 질문드립니다. 소스코드는 거의 주신 걸 이용해서 복붙하고, 이제 하신 코드를 따라서 치고 결과 확인을 하는 건데, 강의하면서 말씀하시는 DOM,,등등을 잘 알아듣기가 힘들어서요,,자바같은 경우에는 공부를 했어서 MVC 패턴같이 백에서 큰 그림을 그려가며 좀 자세하게 설명을 해주시는 줄 알았는데 그게 아니여서 조금 고민이 되는 것 같습니다. 저는 모델, 뷰 또는 urls가 서로 어떻게 작용을 해서 프론트로 뿌려주는 것인지에 대한 답답함, 그리고 각 코드가 어떠한 의미를 지녔는지 잘 모르겠는 부분에 대한 답답함을 지닌 것 같습니다. for문 또는 전체적으로 함수가 어떠한 역할을 하는지는 이해했으나 어떠한 방식으로 요청하고 받고 하는지에 대해 몰라서 조금 답답한 것 같습니다. 음 예를 들자면, songlist에 있는 거를 for문으로 해서 가져오는구나,,라는 건 이해를 했는데, view와 model은 어떠한 역할을 하기에 이걸 프론트로 뿌리는거지..?라는 질문도 생기고, html은 솔직히 거의 전부 이해가 안가기도 합니다. 혹시 다른 강의를 들어야할까요? 조언을 주시면 감사하겠습니다. 긴 글 읽어주셔서 감사합니다!
 - 
      
        
    해결됨한 입 크기로 잘라먹는 Next.js(v15)
카톡에서 썸네일이 안뜹니다
import SearchableLayout from "@/components/searchable-layout"; import style from "./index.module.css"; import { ReactNode } from "react"; import BookItem from "@/components/book-item"; import { InferGetStaticPropsType } from "next"; import fetchBooks from "@/lib/fetch-books"; import fetchRandomBooks from "@/lib/fetch-random-books"; import Head from "next/head"; // next에서는 이렇게 작성하면 서버사이드렌더링으로 페이지를 생성할 수 있다. export const getStaticProps = async () => { // 컴포넌트보다 먼저 실행 되어서, 컴포넌트에 필요한 데이터 불러오는 함수 // Promise.all을 사용하여 병력적으로 두 개의 비동기 작업을 병렬로 실행 const [allBooks, recoBooks] = await Promise.all([ fetchBooks(), fetchRandomBooks(), ]); return { props: { allBooks, recoBooks, }, }; }; export default function Home({ allBooks, recoBooks, }: InferGetStaticPropsType<typeof getStaticProps>) { return ( <> <Head> <title>한입북스</title> <meta property="og:image" content="/thumbnail.png" /> <meta property="og:title" content="한입북스" /> <meta property="og:description" content="한입북스에 등록된 도서들을 만나보세요" /> </Head> <div className={style.container}> <section> <h3>지금 추천하는 도서</h3> {recoBooks.map((book) => ( <BookItem key={book.id} {...book} /> ))} </section> <section> <h3>등록된 모든 도서</h3> {allBooks.map((book) => ( <BookItem key={book.id} {...book} /> ))} </section> </div> </> ); } Home.getLayout = (page: ReactNode) => { return <SearchableLayout>{page}</SearchableLayout>; }; 영상과 같이 public 폴더에 파비콘과 썸네일 파일을 올렸는데 파비콘은 되는데 썸네일과 디스크립션과 타이틀이 안나오고 그저 링크만 보이네요
 - 
      
        
    미해결실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
통합테스트와 단위테스트 파일 분리
통합 테스트와 단위 테스트를 작성할 때 따로 파일 구분 없이 작성하는게 일반적인가요?
 - 
      
        
    해결됨한 입 크기로 잘라먹는 Next.js(v15)
book/[id] 코드를 작성할 때 오류가 납니다
도서의 데이터를 불러오는 과정에서 Promise 객체에 id를 이미 사용해 book에 저장한 데이터들을 구조분해할당할 때 id가 이미 선언되었다고 오류가 발생합니다 ㅠㅠ 강의에서는 Promise 객체로 URL 파라미터를 받아오는 게 아니어서 어떻게 해결할 수 있는지 모르겠습니다...아래는 코드랑 오류 메시지입니다! 코드의 붉은 줄에 커서를 올리면 블록 범위 변수 'id'를 다시 선언할 수 없다고 나옵니다
 - 
      
        
    해결됨아바타 커뮤니티앱 만들기 (React Native Expo)
token 관련 질문
로그인 과정에서 refresh token은 강의 편의상 생략한 건가요?! 따로 사용하지 않은 이유가 있는지 궁금합니다.
 - 
      
        
    해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
수업 외 질문
수업 외 질문인데요. 시작은프리캠프 강의에서 사용된 캐릭터 움직이는 애니메이션?은 어떤 프로그램으로 만드신거에요?
 - 
      
        
    해결됨(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>
robots.txt 최신화 하는 방법을 아시나요?
제가 실수로 robots.txt를 robot.txt로 잘못 올렸고User-agent: * Disallow::내부 파일도 이렇게 잘못 작성했더니 lighthouse에서 잘못되었다고 지적하더라고요.근데 새로 수정하고 빌드해서 올렸고AWS s3내부에선 정상적인 파일이 올라간 것으로 확인되는데 아직도 그대로더라고요.어떻게 최신화가 가능할까요?
 - 
      
        
    미해결React Native with Expo: 제로초에게 제대로 배우기
punycode 에러
(node:49559) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead. (Use `node --trace-deprecation ...` to show where the warning was created)설치할 때 터미널에 이러한 오류가 발생해서 시키는대로 node --trace-deprecation 를 입력했더니 아래 처럼 뜹니다. 그냥 무시해도 되겠죠? ➜ threads git:(master) ✗ node --trace-deprecation Welcome to Node.js v22.9.0. Type ".help" for more information. > punycode { version: '2.1.0', ucs2: { decode: [Function: ucs2decode], encode: [Function: ucs2encode] }, decode: [Function: decode], encode: [Function: encode], toASCII: [Function: toASCII], toUnicode: [Function: toUnicode] } > (node:51239) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead. at node:punycode:3:9 at BuiltinModule.compileForInternalLoader (node:internal/bootstrap/realm:399:7) at BuiltinModule.compileForPublicLoader (node:internal/bootstrap/realm:338:10) at loadBuiltinModule (node:internal/modules/helpers:108:7) at Module._load (node:internal/modules/cjs/loader:1099:17) at TracingChannel.traceSync (node:diagnostics_channel:315:14) at wrapModuleLoad (node:internal/modules/cjs/loader:217:24) at Module.require (node:internal/modules/cjs/loader:1339:12) at get (node:internal/modules/helpers:223:33) at REPL1:1:1
 - 
      
        
    미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
.eslintrc.cjs 파일
실습 준비 환경 만들 때, ESLint 설치까지는 완료했는데 좌측에 .eslintrc.cjs 파일이 저에겐 뜨지 않습니다 ㅠㅠ 어디서 열어야하나요?