inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

고민

미해결

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

안녕하세요 지금 4-4까지 들은 수강생입니다. 제가 데이터 사이언스 대학원 진학을 앞두고 있는데, 개인적으로 장고기반으로 한 웹페이지 + AI 프로젝트를 하고 싶어 장고를 배우고 하려고 하는데, 이게 솔직히 좀 많이 어렵고, 지금 코드를 따라치는 것만 하는 것 같아서 학습방향이 맞나해서 질문드립니다. 소스코드는 거의 주신 걸 이용해서 복붙하고, 이제 하신 코드를 따라서 치고 결과 확인을 하는 건데, 강의하면서 말씀하시는 DOM,,등등을 잘 알아듣기가 힘들어서요,,자바같은 경우에는 공부를 했어서 MVC 패턴같이 백에서 큰 그림을 그려가며 좀 자세하게 설명을 해주시는 줄 알았는데 그게 아니여서 조금 고민이 되는 것 같습니다. 저는 모델, 뷰 또는 urls가 서로 어떻게 작용을 해서 프론트로 뿌려주는 것인지에 대한 답답함, 그리고 각 코드가 어떠한 의미를 지녔는지 잘 모르겠는 부분에 대한 답답함을 지닌 것 같습니다. for문 또는 전체적으로 함수가 어떠한 역할을 하는지는 이해했으나 어떠한 방식으로 요청하고 받고 하는지에 대해 몰라서 조금 답답한 것 같습니다. 음 예를 들자면, songlist에 있는 거를 for문으로 해서 가져오는구나,,라는 건 이해를 했는데, view와 model은 어떠한 역할을 하기에 이걸 프론트로 뿌리는거지..?라는 질문도 생기고, html은 솔직히 거의 전부 이해가 안가기도 합니다. 혹시 다른 강의를 들어야할까요? 조언을 주시면 감사하겠습니다. 긴 글 읽어주셔서 감사합니다!

  • react
  • python
  • django
  • web-api
  • htmx
ksungho9991 댓글 3 좋아요 0 조회수 259

카톡에서 썸네일이 안뜹니다

해결됨

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

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 폴더에 파비콘과 썸네일 파일을 올렸는데 파비콘은 되는데 썸네일과 디스크립션과 타이틀이 안나오고 그저 링크만 보이네요

  • react
  • typescript
  • next.js
hinpuo 댓글 2 좋아요 0 조회수 246

통합테스트와 단위테스트 파일 분리

미해결

실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트

통합 테스트와 단위 테스트를 작성할 때 따로 파일 구분 없이 작성하는게 일반적인가요?

  • javascript
  • react
  • 소프트웨어-테스트
  • vitest
김상민 댓글 1 좋아요 0 조회수 131

Postman 다운로드

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

지금 강의를 순서대로 듣고 있는데 20강에 들어가보니 postman이라는 걸 사용하더라구요 근데 20강 초입에 보면 이전에 다운을 했다고 하는데 혹시 몇 강에 있는지 알려주실 수 있으실까요..? 그냥 제가 해보려고 다운을 해보니 계속 문제가 생기더라구요

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
댓글 2 좋아요 1 조회수 109

book/[id] 코드를 작성할 때 오류가 납니다

해결됨

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

도서의 데이터를 불러오는 과정에서 Promise 객체에 id를 이미 사용해 book에 저장한 데이터들을 구조분해할당할 때 id가 이미 선언되었다고 오류가 발생합니다 ㅠㅠ 강의에서는 Promise 객체로 URL 파라미터를 받아오는 게 아니어서 어떻게 해결할 수 있는지 모르겠습니다... 아래는 코드랑 오류 메시지입니다! 코드의 붉은 줄에 커서를 올리면 블록 범위 변수 'id'를 다시 선언할 수 없다고 나옵니다

  • react
  • typescript
  • next.js
고은 댓글 1 좋아요 0 조회수 140

token 관련 질문

해결됨

아바타 커뮤니티앱 만들기 (React Native Expo)

로그인 과정에서 refresh token은 강의 편의상 생략한 건가요?! 따로 사용하지 않은 이유가 있는지 궁금합니다.

  • javascript
  • react
  • react-native
  • typescript
  • react-query
노력왕 댓글 2 좋아요 0 조회수 96

수업 외 질문

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

수업 외 질문인데요. 시작은프리캠프 강의에서 사용된 캐릭터 움직이는 애니메이션?은 어떤 프로그램으로 만드신거에요?

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
코드스타크 댓글 1 좋아요 0 조회수 69

robots.txt 최신화 하는 방법을 아시나요?

해결됨

(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>

제가 실수로 robots.txt를 robot.txt로 잘못 올렸고 User-agent: * Disallow:: 내부 파일도 이렇게 잘못 작성했더니 lighthouse에서 잘못되었다고 지적하더라고요. 근데 새로 수정하고 빌드해서 올렸고 AWS s3내부에선 정상적인 파일이 올라간 것으로 확인되는데 아직도 그대로더라고요. 어떻게 최신화가 가능할까요?

  • react
  • aws
  • Google-Analytics
  • cloudflare
  • adsense
  • 수익화
  • robots.txt
jaehyun jo 댓글 1 좋아요 0 조회수 159

punycode 에러

미해결

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

(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
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
방황하는물고기 댓글 1 좋아요 0 조회수 188

.eslintrc.cjs 파일

미해결

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

실습 준비 환경 만들 때, ESLint 설치까지는 완료했는데 좌측에 .eslintrc.cjs 파일이 저에겐 뜨지 않습니다 ㅠㅠ 어디서 열어야하나요?

  • javascript
  • react
  • node.js
최연서 댓글 2 좋아요 3 조회수 536

vsc 에서 npm init 설치시 오류

미해결

[리뉴얼] React로 NodeBird SNS 만들기

PS C:\Users\user\Documents\prepare\front> npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See npm help init for definitive documentation on these fields and exactly what they do. Use npm install <pkg> afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (front) PS C:\Users\user\Documents\prepare\front> 터미널을열고 저도 패키지 네임 다음 react-nodebird-front를 작성하고 싶은데 어떤방법이 있을까요?

  • react
  • redux
  • node.js
  • express
  • next.js
hEE the creator 댓글 2 좋아요 0 조회수 177

row update 후 find의 기본 정렬에 대해 궁금합니다.

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

안녕하세요. 수업 열심히 잘 듣고 있습니다 (__) 다름이 아니라, postman 실습 할 때마다 느끼는게, 특정 id 값에 해당하는 값을 update 하였을 때, 별도의 정렬 조건 없이 find 하여 나오는 get 요청의 결과값 리스트에 항상 update 된 row이 최하단으로 정렬되어 나오는 걸 볼 수 있었습니다. 그래서 개인적으로 추측해보기에 updateColumn()으로 지정된 updatedAt이 row가 업데이트 될 때마다 같이 갱신되므로, find에 아무런 정렬 조건을 기재하지 않았을 때, updatedAt 기준으로 알아서 맞춰서 정렬을 해주나보다 싶었는데, updatedAt 컬럼을 삭제하고 데이터베이스 초기화 후 다시 해봐도 똑같이 update 된 row가 마지막에 나오네요. 실제로 실무에서는 order를 거의 기재를 하면서 진행 하기에 문제는 없겠지만, 이렇게 동작하는 이유에 대해 궁금합니다. 감사합니다.

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
흔들거북이 댓글 2 좋아요 0 조회수 82

배포에 대해서 질문있습니다

해결됨

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

만든파일을 배포하는 과정에 대해 질문이 있습니다. 배운기술들로 다른것을 만들어서 ngrok에 배포하는것이 아닌 다른방법으로 배포하고 싶습니다. 상황은 이렇습니다. ・2대의 데스크톱이있습니다. ・한대의 데스크톱이 서버의 역할을합니다. ・또다른 데스크톱은 클라이언트 역할을합니다. vite와 node.js로 만든경우 vscode로 npm run dev하는것이 아닌 java에서 war파일을 만들어서 war파일만 교체하면되는것처럼 배포 가능한 하나의 번들형태로 만드는방법이 있나요? 아니면 vite와 node.js만의 배포하는방법이있나요? 제가 배포를 경험해본 방법이 java에서 Maven으로 war파일을 만들어서 tomcat에 넣어서 사용하는방법밖에 몰라서 node.js는 어떤방법으로 로컬데스크톱에서 실행하게 하는지 궁금합니다. frontend폴더와 backend폴더가 따로 있는데 하나로 로컬데스크톱에 배포하는 방법이 있나요?

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

Markdown MDX 관련 질문입니다.

해결됨

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

에러화면 /mdx-page 렌더링이 안됩니다... 작업 순서 패키지 설치 npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx next.config.ts import type { NextConfig } from 'next'; import createMDX from '@next/mdx'; const nextConfig: NextConfig = { /* config options here */ // experimental: { // typedRoutes: true, // }, images: { remotePatterns: [ { hostname: 'picsum.photos', }, { hostname: 'images.unsplash.com', }, { hostname: 'www.notion.so', }, { hostname: 'prod-files-secure.s3.us-west-2.amazonaws.com', }, ], }, pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'], }; const withMDX = createMDX({ // Add markdown plugins here, as desired }); // Merge MDX config with Next.js config export default withMDX(nextConfig); mdx-components.tsx import type { MDXComponents } from 'mdx/types'; export function useMDXComponents(components: MDXComponents): MDXComponents { return { ...components, }; } app/mdx-page/page.mdx # Welcome to my MDX page! This is some **bold** and _italics_ text. This is a list in markdown: - One - Two - Three Checkout my React component: package.json { "name": "notion-blog-nextjs", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev --turbopack", "build": "next build", "start": "next start", "lint": "next lint", "lint:fix": "next lint --fix", "format": "prettier --write ." }, "dependencies": { "@mdx-js/loader": "^3.1.0", "@mdx-js/react": "^3.1.0", "@next/mdx": "^15.3.2", "@notionhq/client": "^3.0.1", "@radix-ui/react-select": "^2.2.4", "@radix-ui/react-separator": "^1.1.6", "@radix-ui/react-slot": "^1.2.2", "@types/mdx": "^2.0.13", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "date-fns": "^4.1.0", "lucide-react": "^0.507.0", "next": "15.2.5", "postcss": "^8.5.3", "react": "^19.0.0", "react-dom": "^19.0.0", "react-icons": "^5.5.0", "tailwind-merge": "^3.2.0" }, "devDependencies": { "@eslint/eslintrc": "^3", "@eslint/js": "^9.26.0", "@tailwindcss/postcss": "^4.1.5", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "eslint": "^9", "eslint-config-next": "15.2.5", "eslint-config-prettier": "^10.1.2", "globals": "^16.0.0", "prettier": "^3.5.3", "prettier-plugin-tailwindcss": "^0.6.11", "tailwindcss": "^4.1.5", "tw-animate-css": "^1.2.9", "typescript": "^5" } }

  • react
  • 블로그
  • next.js
  • cursor
  • cursorai
포팃 댓글 2 좋아요 1 조회수 300

serverComponent=false일 때 쿠키 세팅을 하는 이유?

해결됨

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

안녕하세요! supabase.ts 파일에서 createServerSideClient 함수에서 serverComponent=false일 때 쿠키 세팅을 하는 이유가 무엇인가요? 이 쿠키는 수파베이스 로그인할 때 외에 어디서 사용되나요? 코드에서는 createServerSideClientRSC, createServerSideMiddleware 함수는 사용하지 않고 있는데, 그냥 정의만 해놓은 건가요? 서버컴포넌트에서 쿠키를 조작하면 어떤 오류가 발생하나요?

  • react
  • 클론코딩
  • next.js
  • supabase
웰시코기 댓글 2 좋아요 0 조회수 140

getUser 에 갑자기 serverComponent가 추가된 이유?

해결됨

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

9-1강의 수업노트 봤는데요, 코드에서 getUser 함수는 2군데서 사용되는데, 항상 인자가 serverComponent가 true로 전달되더라구요. 그러면 getUser를 사용할 때 인자를 넘기지 않고, getUser 함수는 아래와 같이 코드를 만들어도 되는 건가요? export const getUser = async () => { const supabase = await createServerSideClient(true); const user = await supabase.auth.getUser(); return user?.data?.user; };

  • react
  • 클론코딩
  • next.js
  • supabase
웰시코기 댓글 2 좋아요 0 조회수 108

Docker Compose 파일 작성해보기 강의 관련 질문입니다~

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다! [코드팩토리 디스코드] https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 도커 강의 해주시면서, "컨테이너"란, Dockerfile를 가지고서 생성하는 하나하나의 프로그램들을 컨테이너라고 설명해주셨는데, 그렇다면 도커의 이미지는 어떤 개념이라고 정의할 수 있을까요?

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
ajdsasld 댓글 2 좋아요 0 조회수 129

getUser 에 갑자기 serverComponent가 추가된 이유?

해결됨

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

9-1강의 수업노트 봤는데요, 코드에서 getUser 함수는 2군데서 사용되는데, 항상 인자가 serverComponent가 true로 전달되더라구요. 그러면 getUser를 사용할 때 인자를 넘기지 않고, getUser 함수는 아래와 같이 코드를 만들어도 되는 건가요? export const getUser = async () => { const supabase = await createServerSideClient(true); const user = await supabase.auth.getUser(); return user?.data?.user; };

  • react
  • 클론코딩
  • next.js
  • supabase
댓글 2 좋아요 0 조회수 114

useCallback의 디펜던시 배열에 supabase 넣는 이유?

해결됨

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

const getUserInfo = useCallback(async () => { const result = await supabase.auth.getUser(); if (result?.data?.user) setUser(result?.data?.user); }, [supabase]); 이 코드를 이해 못했어요. 왜 dependency 배열에 supabase가 들어가나요? userId 넣으면 왜 안되나요?

  • react
  • 클론코딩
  • next.js
  • supabase
웰시코기 댓글 2 좋아요 0 조회수 113

인기 태그

인프런 TOP Writers

주간 인기글