inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

Route Handler 에서 Post 코드 작성해봤는데 계속 에러가 납니다 ㅠㅠ

미해결

Next.js App router 기반 Chat GPT 만들기

제가 수업을 기반으로 작성한 코드는 다음과 같습니다. import { NextResponse } from "next/server"; export async function POST(request: Request, {params}: {params: {testId: string}}){ const userData = await request.json(); console.log("server user data", userData); console.log("server param", params.testId); return NextResponse.json({message: "사용자가 성공적으로 생성되었습니다."}); } "use client"; export default function Page({params} : {params: {id:string}}){ const handlerSubmit = async (e:React.FormEvent) => { const response = await fetch('/api/test/1234', { method: "POST", headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({name: 'test name', email: 'test email'}), }); console.log(e); const data = await response.json(); console.log("response data", data); } return (<>다이나믹 라우트 페이지: {params.id} <button type="submit" onClick={handlerSubmit}> 전송 </button> </>); } 에러 메시지는 다음과 같습니다. ✓ Compiled /dashboard/[id] in 1716ms (597 modules) Error: Route "/dashboard/[id]" used `params.id`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at id (c:\study\chatgpt-clone\next-tutorial\app\dashboard\[id]\page.tsx:21:36) 19 | 20 | > 21 | return (<>다이나믹 라우트 페이지: {params.id} | ^ 22 | <button 23 | type="submit" 24 | onClick={handlerSubmit}> GET /dashboard/12345 200 in 2989ms ✓ Compiled /favicon.ico in 406ms (331 modules) GET /favicon.ico 200 in 543ms ✓ Compiled /api/test/[testId] in 337ms (614 modules) server user data { name: 'test name', email: 'test email' } Error: Route "/api/test/[testId]" used `params.testId`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at testId (c:\study\chatgpt-clone\next-tutorial\app\api\test\[testId]\route.ts:6:39) 4 | const userData = await request.json(); 5 | console.log("server user data", userData); > 6 | console.log("server param", params.testId); | ^ 7 | 8 | return NextResponse.json({message: "사용자가 성공적으로 생성되었습니다."}); 9 | } server param 1234 POST /api/test/1234 200 in 1402ms 응답은 잘 되는데, 동기? 비동기? 이쪽부분에서 문제가 있는 것 같습니다.. ㅠㅠ 영상이랑 똑같이 따라한 것 같은데.. 뭐가 문제인건지 감이 안잡히네요 ㅠㅠ (혹시 추가로 필요한 코드가 있다면 말씀해주세요 ㅠㅠ )

  • react
  • typescript
  • next.js
  • tailwindcss
  • zustand
  • chatgpt
수하 댓글 2 좋아요 0 조회수 294

공부를 하면서 질문이 있습니다.

해결됨

입문자를 위한, ES6+ 최신 자바스크립트 입문

현재 짐코딩님의 자바스크립트와 리액트를 구입해 열심히 듣고 있습니다. 궁금한점이 강의를 듣고 나중에 혼자서도 코드를 작성할줄 알아야 실력이 느는데 자바스크립트 강의를 다 보고 자바스크립트로 혼자 만들어 보는게 좋을까요? 나중에 혼자서도 생각하는 것을 코드로 작성을 할만큼 실력을 키우려면 어떻게 공부를 해야좋을지 조언부탁드리겠습니다.

  • javascript
  • es6
부드러운 족제비 댓글 2 좋아요 0 조회수 157

마우스이벤트 형식이 제네릭이아닙니다 오류 해결 못하고 있습니다 어떤 거 인지 알 수 잇을까여?

해결됨

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

import { ChangeEvent, useState } from "react"; // 리팩토링 const Board = () => { const [writer, setWriter] = useState(""); const [title, setTitle] = useState(""); const [content, setContent] = useState(""); const [isActive, setIsActive] = useState(false); const onChangewriter = (event:ChangeEvent<HTMLInputElement>) => { setWriter(event.target.value); if (event.target.value !== "" && title && content) return setIsActive(true); setIsActive(false); }; const onChangeTitile = (event:ChangeEvent<HTMLInputElement>) => { setTitle(event.target.value); if (writer && event.target.value && content) return setIsActive(true); setIsActive(false); }; const onChangeContent = (event:ChangeEvent<HTMLInputElement>) => { setContent(event.target.value); if (writer && title && event.target.value) return setIsActive(true) setIsActive(false); }; const onClickSubmit = (event:MouseEvent<HTMLButtonElement>) => [ console.log(writer), console.log(title), console.log(content), alert("게시물 등록이 완료되었습니다"), ]; return ( <> 작성자 : <input type="text" onChange={onChangewriter} /> <br /> 제목 : <input type="text" onChange={onChangeTitile} /> <br /> 내용: <input type="text" onChange={onChangeContent} /> <br /> <button onClick={onClickSubmit} style={{ backgroundColor: isActive === true ? "yellow" : "none" }} > 등록 </button> </> ); }; export default Board;

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

마우스이벤트 형식이 제네릭이아닙니다 오류 해결 못하고 있습니다 어떤 거 인지 알 수 잇을까여?

해결됨

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

import { ChangeEvent, useState } from "react"; // 리팩토링 const Board = () => { const [writer, setWriter] = useState(""); const [title, setTitle] = useState(""); const [content, setContent] = useState(""); const [isActive, setIsActive] = useState(false); const onChangewriter = (event:ChangeEvent<HTMLInputElement>) => { setWriter(event.target.value); if (event.target.value !== "" && title && content) return setIsActive(true); setIsActive(false); }; const onChangeTitile = (event:ChangeEvent<HTMLInputElement>) => { setTitle(event.target.value); if (writer && event.target.value && content) return setIsActive(true); setIsActive(false); }; const onChangeContent = (event:ChangeEvent<HTMLInputElement>) => { setContent(event.target.value); if (writer && title && event.target.value) return setIsActive(true) setIsActive(false); }; const onClickSubmit = (event:MouseEvent<HTMLButtonElement>) => [ console.log(writer), console.log(title), console.log(content), alert("게시물 등록이 완료되었습니다"), ]; return ( <> 작성자 : <input type="text" onChange={onChangewriter} /> <br /> 제목 : <input type="text" onChange={onChangeTitile} /> <br /> 내용: <input type="text" onChange={onChangeContent} /> <br /> <button onClick={onClickSubmit} style={{ backgroundColor: isActive === true ? "yellow" : "none" }} > 등록 </button> </> ); }; export default Board;

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
이 규성 댓글 1 좋아요 0 조회수 77

linkedList prev와 tail 사용 후 o(1) 구현.

미해결

비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)

class LinkedList { length = 0; head = null; tail = null; add(value) { if (this.head) { this.tail.next = new Node(value); this.tail.next.prev = this.tail; this.tail = this.tail.next; } else { this.head = new Node(value); this.tail = this.head; } this.length++; return this.length; } search(index) { return this.#search(index)[1]?.value; } #search(index) { let count = 0; let prev; let current = this.head; while(count < index) { prev = current; current = current?.next; count++; } return [prev, current]; } remove(index) { const [prev, current] = this.#search(index); if (prev) { prev.next = current.next; this.length--; return this.length; } else if(current){ // index = 0 일 떄 current = current.next; this.length--; return this.length; } if (current.next === null) { // index = tail this.tail = current.prev; current.prev.next = null; this.length--; } // 삭제 대상 없을 때 아무것도 안함. } } class Node { next = null; prev = null; constructor(value) { this.value = value; } } const li = new LinkedList(); li.add(1); li.add(2); li.add(3); li.add(4); li.add(5); console.log(li.add(6)); console.log(li.remove(5)); console.log(li.remove(4)); console.log 찍었을때는 오류 없이 나온거 같은데 잘 구현 했나 궁금합니다!

  • javascript
  • 코딩-테스트
  • 알고리즘
samkookji12 댓글 1 좋아요 0 조회수 188

create-react-app my app 실행 시 에러

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

create-react-app my app 실행 시 아래와 같은 에러가 뜹니다. Installing template dependencies using npm... npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: my-app@0.1.0 npm error Found: react@19.0.0 npm error node_modules/react npm error react@"^19.0.0" from the root project npm error npm error Could not resolve dependency: npm error peer react@"^18.0.0" from @testing-library/react@13.4.0 npm error node_modules/@testing-library/react npm error @testing-library/react@"^13.0.0" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error npm error For a full report see: npm error C:\Users\phhyu\AppData\Local\npm-cache\_logs\2025-01-06T07_30_45_069Z-eresolve-report.txt npm error A complete log of this run can be found in: C:\Users\phhyu\AppData\Local\npm-cache\_logs\2025-01-06T07_30_45_069Z-debug-0.log npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0 failed

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
댓글 2 좋아요 0 조회수 385

CSR, SSR에 대해

해결됨

백엔드 개발자에 의한, 백엔드 개발자들을 위한 프론트엔드 강의 - 기본편

안녕하세요, Foo님! 좋은 강의 감사드립니다. 타임리프와 같이 SSR의 경우 AJAX 통신도 어려울 뿐더러 브라우저와 모바일 환경에서 필요한 API(엄밀히 말하면 Controller)를 각각 환경에 맞게끔 개발해야하는 단점이 있다. 반면에 CSR으로 FE를 설계하면 JSON만으로 통신하게 되어 하나의 API만 작성하면된다. 라고 이해하면 될까요? 스마트폰에서도 반응형 웹의 경우 기존 브라우저에서의 html과 동일하게 이뤄지니 같은 API로 처리할 수 있는게아닌가요? (모바일 앱과 모바일에서 보는 브라우저의 차이가 있는건가요?)

  • HTML/CSS
  • javascript
  • bootstrap
티티티 댓글 1 좋아요 1 조회수 179

새 강의 쿠폰 관련 문의드립니다!

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

아랫분들처럼 강의를 사두고 이제야 수강하다가 쿠폰 관련한 공지를 늦게 보게 되었는데요. 혹시 아직 쿠폰 발급이 가능할까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
은파랑 댓글 2 좋아요 0 조회수 314

줄바꿈 단축기 질문 _4분 20초

미해결

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

4분 20초에 input 태그에 줄바꿈되는 단축키가 뭔가요? 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

  • javascript
  • react
  • node.js
rumi du 댓글 1 좋아요 0 조회수 172

onClick 이벤트함수로 raycaster 방향이 자동으로 set되나요?

해결됨

React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발

const shoesClick = () => { const intersects = raycaster.intersectObjects( gltf.scene.children, true ); }; 강의에서는 위와 같이 raycaster.intersectObject 메서드 호출시에 scene에 children을 넘겨주시는데 클릭 이벤트의 eventObject 를 넘겨주지 않았는데도 raycaster에 마우스 방향을 set 가능한가요?

  • javascript
  • react
  • typescript
  • 인터랙티브-웹
  • three.js
  • webgl
  • react-three-fiber
grs0412 댓글 2 좋아요 0 조회수 219

감정다이어리 edit 컴포넌트 만들때

해결됨

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

12.8강) edit 컴포넌트 작성할때 저는 diary 컴포넌트처럼 edit 컴포넌트 안에 useParams 훅 호출해서 import { useParams } from "react-router-dom"; const Edit = () => { const params = useParams(); return <div>{params.id}Edit</div>; }; export default Edit; 이렇게 설정해줘야 route 설정할때도 id에 따른 페이지가 잘 보이던데 저만 그런가요 아니면 강의에선 스킵이 된건가여

  • javascript
  • node.js
  • react
삘쏘굿 댓글 1 좋아요 0 조회수 109

nock에서 에러가 발생합니다

해결됨

2시간으로 끝내는 프론트엔드 테스트 기본기

Test suite failed to run ReferenceError: TextEncoder is not defined 1 | 2 | import "@testing-library/jest-dom"; > 3 | import * as nock from "nock"; | ^ 4 | import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; 5 | import { 6 | fireEvent, at Object.<anonymous> (node_modules/@mswjs/interceptors/src/utils/bufferUtils.ts:1:17) at Object.<anonymous> (node_modules/@mswjs/interceptors/lib/browser/index.js:4:24) at Object.<anonymous> (node_modules/nock/lib/intercept.js:13:30) at Object.<anonymous> (node_modules/nock/lib/recorder.js:8:44) at Object.<anonymous> (node_modules/nock/lib/back.js:4:18) at Object.<anonymous> (node_modules/nock/index.js:3:14) at Object.<anonymous> (src/__test__/Login.spec.tsx:3:1) ReferenceError: TextEncoder is not defined 에러가 발생합니다. node -v => v18.18.2 노드 버전이랑, util 라이브러리를 사용해 문제를 해결하려 했지만, 잘 되지 않아 질문드립니다.

  • react
  • jest
  • 소프트웨어-테스트
  • Cypress
  • storybook
  • chatgpt
qjatjs123123 댓글 1 좋아요 0 조회수 144

수업 노트 링크 오류 제보

해결됨

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

링크는 chapter16으로 되어있는데 클릭하면 chapter14 입니다.

  • javascript
  • react
  • node.js
강프로그래머 댓글 2 좋아요 0 조회수 83

next auth 질문

미해결

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

1.next auth core를 설치하는 이유가 있을까요 ? prisma를 사용중인데 beta 버전을 설치하면 prisma adapter와 호환성이 안된다고 하는데 4버전을 사용해도 될까요? 4버전 사용시 export const {auth} 와 같은 코드가 호환될까요? 그리고 middleware 에서 session이 아닌 getToken 으로 토큰을 불러와도 상관 없을까요 ?

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

scroll Draw SVG에서 실선이 아닌 점선으로 그리고 싶어요

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.03

안녕하세요. 강의를 통해 gsap을 입문한 학생입니다. 현재 강의는 스크롤 시 실선이 나타나는데 점선으로 나타내고 싶습니다. 현재 강의에서의 설정부분인데 pathLength = document.querySelector(element).getTotalLength(); gsap.set(element,{ strokeDasharray:pathLength, strokeDashoffset:pathLength, }) strokeDasharray 설정 부분에 dashArray 간격이 16을 넣었더니 이미 실선이 그려진채로 나오더라구요. 드래그하면서 실선이 그려져야하는데... 실선이 아닌 점선으로도 구현할 수 있는지 궁금합니다

  • javascript
  • 애니메이션
  • 인터랙티브-웹
  • gsap
  • scrolltrigger
ssooya90 댓글 1 좋아요 1 조회수 206

1.8 연산자 2_null 병합 연산자 (강의 진행 2분 00초) 질문이 생겼습니다!

해결됨

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

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 선생님 강의 잘 듣고 있습니다! 1.8 연산자 2 에서 수업을 듣고 저 혼자 해보는 중에 선생님께서 작성하신 문법과 다르게 작성한 식에서 정답이 출력 되었습니다. 제가 적은 문법이 추후에 다른 문법이나 개발을 하는데 충돌이 나거나 에러가 날 수 있는 경우가 생길 지 여쭤보고 싶어서 문의 남깁니다! 제가 적은 식은 아래와 같습니다. console 에 찍힌 값 : 10 입니다. var1 = null; var2 = 10; var3 = 30; console.log((var4 = var1 ?? var2));

  • javascript
  • react
  • node.js
이윤주 댓글 1 좋아요 0 조회수 80

JSX.Element 컴포넌트 타입 정의 관련 재 질의

미해결

React와 Vue로 배우는 TypeScript 필수 개념 (feat. ChatGPT)

React와 Vue(2 기준) 두 뷰 라이브러리 | 프레임워크를 모두 사용해본 현직 실무 풀스택 (백엔드는 자바 스프링) 개발자 입니다. 아직 실무에서 타입스크립트 도입을 하지 않았고, 타입스크립트에 대한 관심도가 매우 높아 기대하는 마음에 해당 강의를 신청하고 듣게 되었습니다. 제가 질문하고싶은 JSX.Element 타입 관련해서 의문이 드는점은, 다른 사람들이 짜놓은 Typescript React 깃허브 프로젝트들을 찾아 보게되면 Props나 Children을 사용할때는 강의에서 알려주신 JSX.Element 타입 대신 React.FC 혹은 ReactNode, ReactElement 등 다른 타입을 제너릭과 함께 사용하여 작성하고 있는것을 본적이 있습니다. 구글링을 조금 해 봤더니 무조건 적으로 JSX.Element 타입만을 선언하는것은 아니더라구요. 왜 이런 필수개념이 빠져있는지... 저는 그런것들에 대한 궁금증도 많았기에, 이 강의를 결제했는데.... 뭔가 강의를 잘못 선택했고, 리액트에서 사용하는 타입스크립트 타입에 잘못 접근하고 있는 기분이 듭니다.. 회사에서 비즈니스 계정 입력해서 지원금 받아서 강의를 신청했는데, 이거 보고 내용 정리해서 보고서와 함께 실무자들 앞에서 발표해야 합니다........... 발표 할 때 그에 대한 리뷰 질문들이 들어오게 되면 출처 밝히고 해당 강의에서는 이런 식으로 가르쳐줬다. 라고 말하면 얼굴 공개하면서 까지 자부하시고 찍은 강사님 커리어와 프라이드에도 그렇게 좋은 영향은 가지 않을것이라 생각이 듭니다.. 분명 AI가 답변을 달텐데 강사님 다시한번 확인해주시고 답변 달아주시고 이 부분에 대해 부연 설명 대신 강의 영상 자체를 조금 더 디테일하게 수정해서 보안해주시길 바랍니다. 매우 실망스러워요....

  • vue.js
  • react
  • typescript
  • vue-3
  • chatgpt
유혁스쿨 댓글 2 좋아요 1 조회수 197

프로젝트 생성 관련 가이드 영상은 왜 없는건가요

미해결

React와 Vue로 배우는 TypeScript 필수 개념 (feat. ChatGPT)

리액트와 뷰 모두 포함해서 프로젝트를 생성하는 가이드영상이 아에 없는거같은데요. 그동안 타입스크립트를 접목하지 않은 react와 vue만 사용했고 경험이 있는 상태에서 typescript를 리액트와 뷰만의 생태계에서 어떻게 사용하는지 따라해보려고하는데, 백문이 불여일타 라고 프로젝트 초기 세팅 가이드 영상은 기본이라고 생각합니다...;;; 실망이 매우 크네요.... 혹시 pdf로라도 없는건가요???? 세팅조차 없이 그냥 바로 본론으로 들어가버리면... 이건 좀 아닌거같아요. 돈 날린 기분입니다... 이 부분에 대해서 추가 영상이나 교안 등 개선이 필요할거 같습니다. 강사님 직접 확인하시고 답변주세요;;

  • vue.js
  • react
  • typescript
  • vue-3
  • chatgpt
유혁스쿨 댓글 3 좋아요 1 조회수 225

인기 태그

인프런 TOP Writers

주간 인기글