inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

빌드 과정에서의 오류

미해결

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

Type error: Type '{ params: { id: string | string[]; }; }' does not satisfy the constraint 'PageProps'. Types of property 'params' are incompatible. Type '{ id: string | string[]; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag] 평소에는 잘 빌드되었는데 '라우트 세그먼트 옵션'을 학습하던 도중 빌드를 진행하니 해당 오류가 발생하였습니다. 원인을 찾아보려 시간을 사용하였는데도 해결하지 못해 질문 남깁니다. ㅠㅠ .next/type/app/book\[id]/page.ts 코드 import { notFound } from "next/navigation"; import style from "./page.module.css"; export default async function Page({ params, }: { params: { id: string | string[] }; }) { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${params.id}` ); if (!response.ok) { if (response.status === 404) { notFound(); } return <div>오류가 발생했습니다...</div>; } const book = await response.json(); const { id, title, subTitle, description, author, publisher, coverImgUrl, } = book; return ( <div className={style.container}> <div className={style.cover_img_container} style={{ backgroundImage: `url('${coverImgUrl}')` }} > <img src={coverImgUrl} /> </div> <div className={style.title}>{title}</div> <div className={style.subTitle}>{subTitle}</div> <div className={style.author}> {author} | {publisher} </div> <div className={style.description}>{description}</div> </div> ); }

  • react
  • typescript
  • next.js
리꼬 댓글 2 좋아요 1 조회수 194

css 선택자에 대해 질문있습니다.

해결됨

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

안녕하세요 css를 공부중인데 선택자에 대해 질문이 있습니다 * {color: white}, body {color: white} 이렇게 전체선택자와 body선택자 둘다 글자 색상을 흰색으로 했는데 전체선택자도 모든 태그의 글자색이 흰색이 되고 body도 모든 글자색이 흰색이 되는데 이 두개의 차이점이 헷갈립니다.

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
부드러운 족제비 댓글 2 좋아요 0 조회수 83

"사전 렌더링에서 해당 페이지의 HTML을 반환한다"의 의미

해결됨

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

다른 분들의 질문에 대한 답변에서 "사전 렌더링 방식에서 서버가 주는 것은 전체 HTML이 아닌 그 페이지의 HTML이다"와 같은 표현이 많이 보여서 질문 드립니다. 페이지 이동 시 시뮬레이션을 설명하면서 사용하신 컴포넌트 교체 , 컨텐츠 렌더링 과 같은 표현들을 미루어 보았을 때, 아래와 같은 작업이 이루어질 것이라고 생각했는데요, 접속 요청 -> 웹 서버가 HTML을 반환 페이지 이동 -> 해당 HTML의 돔 트리 수정 수화 과정 역시 HTML을 리액트가 핸들링할 수 있도록 하는 작업(리액트 문서 참고)이기 때문에 초기 렌더링 시에만 일어난다고 이해했습니다. 페이지 이동 시마다 HTML을 새로 생성하는 것인지, 또 수화의 정확한 의미는 무엇인지 공부할수록 헷갈리게 되어 질문 남기게 되었습니다. 제가 잘 이해한 것이 맞을까요?

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

Edit페이지 구현 강의 부분 질문있습니다.

해결됨

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

안녕하세요 Edit페이지 구현하기 강의 부분에서 16:52 부분에 아직 Edit 컴포넌트가 return하기 전인 상태이다. 그래서 마운트 되기 전이기 때문에 nav("/", {replace: true}) 동작할 수 가없다 라는 게 무슨 말인가요? 이 Edit 즉 이 수정페이지로 처음에 화면이 나타난다(마운트)는 이해가 가는데 왜 nav가 실행을 할 수 가없나요? 조금 쉽게 설명을 부탁드리겠습니다 ㅜㅜ

  • javascript
  • react
  • node.js
부드러운 족제비 댓글 2 좋아요 0 조회수 179

password authentication was removed

해결됨

빠르게 git - 핵심만 골라 배우는 Git/Github

안녕하세요, 강의 너무 잘 보고 있습니다 !!(책도 혼공 시리즈 너무 잘 보고 있어요 !!) 질문이 생겨 여쭤보려 합니다 !! 저는 맥os에서 터미널로 푸시를 하려고 합니다. 로컬에서 깃허브로 푸쉬를 하려고 시도하였는데 다음 오류가 떴습니다. ( git remote add origin https://github.com/nippyclouding/test.git git branch -M main git push -u origin main 저도 다른 질문자분들처럼 터미널에 두 줄이 아니라 세 줄을 복사 붙여넣기 하였습니다) 그랬더니 출력으로 아래처럼 되었습니다. remote: Support for password authentication was removed on August 13, 2021. remote: Please see https://docs.github.com/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication. fatal: Authentication failed for ' https://github.com/nippyclouding/test.git/ ' 해당 문제를 찾아보니 비밀번호 인증을 중단하였다고 하는데, 이렇게 되면 터미널에서 깃허브에 푸시하는 방법이 있을까요 ..?

  • git
  • github
  • 버전관리시스템
wonderwall09in 댓글 2 좋아요 0 조회수 260

강의에 대해 질문이 있습니다.

해결됨

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

안녕하세요 "부트캠프에서 만든 완벽한 프론트엔드 코스" 강의를 구매해서 열심히 듣고 있습니다. 강의소개에서 웹 프론트엔드 부트캠프 부분에 CRUD에 충실한 여행자 게시판 '트립토크'와 숙박상품을 구매할 수 있는 여행플렛폼이라고 나오는데 그렇다면 이 강의에 이 여행 플랫폼을 만드는 내용도 있나요?

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
댓글 2 좋아요 0 조회수 132

배포 후 localstorage 지속 저장 안됨

해결됨

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

안녕하세요! 완강하고 프로젝트 배포 끝내놓고 확인 도중 궁금한 점이 있어 질문 남깁니다. localstorage의 경우 사용자가 직접 삭제하지 않는 한 영구적으로 저장된다고 하였는데 PC(window)에서 새 일기 작성 후 노트북(mac)에서 도메인 접근 시 데이터가 다 삭제되어 있습니다. 또한, 도메인 접근 시 vercel 로그인 창이 현출되고 동일 계정으로 로그인 하면 데이터가 마찬가지로 매번 삭제되어있습니다. PC 브라우저에서 해당 도메인 북마크 후 불러올 경우엔 데이터가 그대로 남아있습니다.. 따라서 현재 PC에서 접근 시 저장된 데이터가 현출되고 노트북에서 접근 시 데이터가 안보이는 상황입니다. 질문 : localstorage에 저장된 데이터는 어디에서든 같은 도메인으로 접속하면 똑같은 데이터가 보여야하는거 아닌가요? 그리고 프로젝트 도메인에 접근하려면 꼭 vercel 로그인이 필요한걸까요? 구글링을 해봐도 정확한 정보를 찾을 수 없어 문의드립니다. 배포는 강의와 동일하게 진행하였습니다. 감사합니다.

  • localStorage
  • react
유정 댓글 2 좋아요 0 조회수 157

AWS 배포 시 CORS 에러

해결됨

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

"[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스강의" 를 수강하고 배포 부분을 이 강의를 수강하고 있는 수강생입니다. 고농축 강의에서 만든 포트폴리오를 aws에서 배포했을때에, CORS 에러가 다음과 같이 나는 문제가 있는데 어떻게 해결해야할까요? 찾아보니 백엔드에서 CORS 를 허용해야하거나 프론트에서 프록시를 사용하라고 되어있는데 어떻게 해결해야할지 모르겠네요

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
  • aws
  • cors
aa106206 댓글 2 좋아요 0 조회수 141

페이지 라우팅 동적 경로 질문

미해결

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

Home.jsx 에서 import { useSearchParams } from "react-router-dom"; const Home=()=>{ const [params, setParams]=useSearchParams(); console.log(params.get("value")); return <div>Home</div>; }; export default Home; 이렇게 작성했는데 사진과 같이 빨간색 글씨가 뜨는데 어디가 틀린걸까요?? 출력에는 문제가 없습니다

  • javascript
  • react
  • node.js
진성원 댓글 2 좋아요 0 조회수 157

react-rounter-dom v7 버전 업데이트

해결됨

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

안녕하세요! 해당 강의는 react-rounter-dom v6.22 이던데 혹시 v7로 강의 업데이트 예정이실까요? 정환님이 말아주시는 리라돔 v7 강의는 어떨지 하여 기대감에 여쭤봅니다!

  • javascript
  • react
  • node.js
  • react-router-dom
김떡보 댓글 1 좋아요 2 조회수 363

tailwindcss를 vite에서 이용하는 방식이 바뀐것 같습니다.

미해결

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

npx init ~~ 를 실행하면 에러가 자꾸 발생해서, 웹사이트를 가보니 다운받는 방식이 아예 바뀐 것 같습니다.

  • react
  • redux
  • node.js
  • 웹앱
  • mongodb
박준우 댓글 2 좋아요 0 조회수 1188

새로고침시 404에러가 뜹니다

해결됨

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

수정페이지, 새일기작성페이지, 등 새로고침하면 404 에러가 뜹니다 ㅠㅠ vercel : https://emotion-diary-ochre-six.vercel.app/ 확인 부탁드립니다 ㅠㅠ

  • javascript
  • react
  • node.js
댓글 2 좋아요 0 조회수 104

Django-Components의 0.128 세팅

미해결

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

최신 버전에선 강의의 설정을 적용할 수 없습니다. 아래의 것을 참고하세요. (강사님 이렇게 해도 되긋죠? 구조 제대로 이해 못한채 chatgpt에게 물으면서 했네요 ㅎㅎ; 강의 유지보수 하시기 힘드시겠어요. ) django_components 0.128 설정 1. 폴더명 및 트리구조 변경. myproj/ ├── core/ │ ├── init .py │ ├── apps.py │ ├── src_django_components/ * 폴더명 변경. 하이픈 인식 못함. │ │ ├── init .py │ │ ├── modal_ form.py * 상위로 이동 │ │ ├── modal_form/ │ │ │ ├── modal_form.html │ │ │ ├── modal_form.css │ │ │ ├── modal_form.js ├── mysite/ │ ├── settings.py │ ├── urls.py ├── manage.py 2. settings.py INSTALLED_APPS = [ ..., 'django_components', ] MIDDLEWARE = [ ..., "django_components.middleware.ComponentDependencyMiddleware", ] STATICFILES_FINDERS = [ "django.contrib.staticfiles.finders.FileSystemFinder", "django.contrib.staticfiles.finders.AppDirectoriesFinder", "django_components.finders.ComponentsFileSystemFinder", ] TEMPLATES = [ ..., "DIRS": [BASE_DIR / "core" / "src_django_components"], ], "OPTIONS": { "context_processors": [ "django.template.context_processors.debug", "django.template.context_processors.request", "django.contrib.auth.context_processors.auth", "django.contrib.messages.context_processors.messages", ], "builtins": [ "django_components.templatetags.component_tags", # 추가된 부분 ], ..., STATICFILES_DIRS = [BASE_DIR / "core" /"src_django_components"] COMPONENTS = ComponentsSettings( dirs=[ Path(BASE_DIR) / "core" / "src_django_components", ] ) 3. core/ apps.py -modal_form 등록 from django.apps import AppConfig from django_components import component class CoreConfig(AppConfig): default_auto_field = "django.db.models.BigAutoField" name = "core" def ready(self): from .src_django_components.modal_form import ModalForm component.registry.register("modal_form", ModalForm) # 설명: ModalForm 클래스를 modal_form 이름으로 등록합니다.

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

useRef inputRef.current값이 무조건 bio로만 나오는 현상이 있습니다.

해결됨

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

const inputRef = useRef() const onSubmit = () => { if(input.name === "" ){ console.log(inputRef.current) inputRef.current.focus() } } return ( <div> <div> <input ref={inputRef} name="name" value={input.name} onChange={onChange} type="text"/> </div> <div> <input ref={inputRef} name="birth" value={input.birth} onChange={onChange} type="date" /> </div> <div> </div> <div> <textarea ref={inputRef} name="bio" value={input.bio} onChange={onChange} > </textarea> </div> <button onClick={onSubmit}>제출</button> </div> ) 위와같은 코드에서 onSubmit함수내 console.log(inputRef.current)를 해보면 무조건 bio만 출력됩니다. 또한 포커스도 어떤 경우에서든 bio가 있는 textarea쪽으로만 포커싱이 됩니다. 어떤 이유에서 이러한 현상이 발생되는지 궁금합니다.

  • javascript
  • react
  • node.js
양진영 댓글 2 좋아요 0 조회수 135

displayName 에 대해 질문있습니다.

해결됨

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어

안녕하세요 강의를 너무 잘 보고 있습니다 강의를 보다가 궁금한 점이 파이어베이스 프로젝트 설정 강의 부분에서 displayName이라는 state를 작성했는데 이건 파이어베이스에 약속된 이름이라고 하셨는데 그럼 닉네임 할때만 이 이름으로 작성하면 되는 건가요?

  • react
  • firebase
부드러운 족제비 댓글 1 좋아요 0 조회수 146

cache 질문

미해결

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

이전 faker 를 사용했을 때 이미지가 바뀌는 문제때문에 getPostRecommend 함수 부분에 cache : "force-cache" 를 작성하셨었는데 실제 데이터를 받아오는 현시점에선 cache:"no-store" 를 작성하는게 맞을까요 ?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
심현석 댓글 2 좋아요 0 조회수 137

질문 아님.

미해결

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

리눅스로 하느라 힘들다.. 공식 문서 언제 다 읽고 어떻게 선별적으로 잘 읽는지 GPT 없던 시절 .. .대단하다.

  • react
  • python
  • django
  • web-api
  • htmx
주인국 댓글 1 좋아요 0 조회수 142

서버 액션과 api route의 차이가 어떤게 있을까요?

미해결

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

안녕하세요! 강의 도중 궁금한게 생겨 여쭤보기 위해 질문 드립니다! 다름이아니라, 서버 액션과 api route의 차이가 속도 말고 어떤 때에 서버 액션을 써야하고, api route를 사용해야하는지 여쭤보고싶습니다! 찾아본 바로는 서버 액션은 POST, PATCH 등 폼 제출 시에 사용하는 것이라는데, 폼 제출 시에는 무조건 서버액션을 사용하는 것이 맞는지, 아니라면 단지 개발자 판단 하에 사용하면 되는 것인지 여쭤보고싶습니다!

  • react
  • next.js
  • react-query
  • next-auth
  • msw
amh6281 댓글 2 좋아요 0 조회수 221

세션 만료로 인해 미들웨어에서 로그인 페이지로 redirect 되는 경우 발생하는 오류.(인터셉팅 라우트)

미해결

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

로그인하여 /home에 접속해 있는 도중, 세션이 만료된 상태에서 사용자 정보가 필요한 /message 또는 /explore 등으로 클라이언트 네비게이션을 통해 페이지를 이동하는 경우, 미들웨어의 세션 검사를 거쳐 로그인 페이지로 이동되지 않고 not-found 페이지가 뜨는 오류가 있습니다. / / middleware.ts import { NextResponse } from "next/server"; import { auth } from "./auth"; export { auth } from "./auth"; export async function middleware() { const session = await auth(); if (!session) { return NextResponse.redirect(`http://localhost:3000/i/flow/login`); } } export const config = { matcher: ["/compose/tweeet", "/home", "/explore", "/messages", "/search"], }; 로그인 이 후 쿠키를 삭제를 통해 세션을 없애고 클라이언트 네비게이션을 통해 페이지 이동을 하면 미들웨어의 세션 검사에 걸려 redirect가 진행됩니다. /i/flow/login 페이지로 url이 변경되긴 했지만 병렬 라우트 및 인터셉팅 라우트로 인한 간섭이 있어 제대로 된 page를 찾지 못하는 것으로 보이는데 정확한 원인을 알 수 없어 문의 드립니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
hkjo 댓글 2 좋아요 0 조회수 203

mydjango.py 실습 질문있습니다.

미해결

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

return HttpResponse(""" <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>Melon List</title> <style> body { width: 400px; margin: 0 auto; } table { width: 100%%; border-collapse: collapse; } table, th, td { border: 1px solid black; } </style> </head> <body> <h1>Melon List</h1> <table> <thead> <tr><th>팀명</th><th>순위</th></tr> </thead> <tbody> %s </tbody> </table> </body> </html> """ % (partial_html,)) 여기에서 굳이 % (partial_html)) 또 잘 실행 되는데 % (partial_html,)) 쉼표를 사용하는 이유는 정확하게 뭔지 알 수 있을까요? gpt는 튜플로 만든다고 설명 해주었는데 td안에 튜플로 넣는 이유를 알고 싶습니다.

  • react
  • python
  • django
  • web-api
  • htmx
lkh5040 댓글 2 좋아요 0 조회수 118

인기 태그

인프런 TOP Writers

주간 인기글