inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

컴포넌트 리랜더

미해결

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

리액트를 이용하는 이유가 virtual dom으로 dom트리를 변경하였을 때의 성능 향상 이점이 있어서 사용한다고 하셨는데 여러 컴포넌트를 만들고 하나의 컴포넌트의 자식으로 넣고 리랜더하면 성능향상은 그렇게 없지 않나요?

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

nest g resource 명령어 에러

미해결

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

nest g resource 명령어 실행시 오류가 발생합니다. nest new 폴더명 nest new로 만든 폴더명으로 경로를 변경 후에 nest g resource로 하면 에러가 나고 상위 폴더에서는 명령어가 잘 됩니다. 문제는 상위에서 하면 src 폴더안에 생성되는게 아니라 외부폴더에 생성이 되서요. 에러코드 보면 D가 두개가 겹치는데 이유를 모르겠습니다.. gpt 물어봐서 4가지 방법 시도해봤는데 모두 실패했습니다.. nest 삭제 후 재설치 dev로 로컬설치 npx로 설치 c드라이브에서 작업 어떻게 해야할까요? 에러코드 첨부합니다. Error: Cannot find module 'D:\works\inflearn\nestcourse\apicourse\"D:\works\inflearn\nestcourse\apicourse\node_modules\@angular-devkit\schematics-cli\bin\schematics.js"' at Function._resolveFilename (node:internal/modules/cjs/loader:1401:15) at defaultResolveImpl (node:internal/modules/cjs/loader:1057:19) at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1062:22) at Function._load (node:internal/modules/cjs/loader:1211:37) at TracingChannel.traceSync (node:diagnostics_channel:322:14) at wrapModuleLoad (node:internal/modules/cjs/loader:235:24) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:171:5) at node:internal/main/run_main_module:36:49 { code: 'MODULE_NOT_FOUND', requireStack: [] }

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
seunghyun Kim 댓글 2 좋아요 0 조회수 127

JWT 발급을 Front에서 하는게 맞는건가요??

해결됨

인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트

안녕하세요. 강의를 듣던 중 궁금한 부분이 있어서 질문드립니다. 토큰 발급은 기본적으로 백엔드에서 처리하는 것으로 알고있는데, 본 강의에서는 frontend/auth.ts 에서 토큰을 발급하고 있습니다. 의도하신건지? 궁금해서 질문드립니다. 감사합니다.

  • aws
  • docker
  • next.js
  • nestjs
  • prisma
진우 댓글 3 좋아요 0 조회수 232

koreanjson 관련 사이트가 접속이 안되요

해결됨

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

koreanjson.com 접속이 계속 안되서 대체 사이트가 있을까요?

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

안녕하세요. 기본타입- 튜플, 객체, 진위값 부분의 영상의 화면이 나오질 않습니다.

미해결

타입스크립트 입문 - 기초부터 실전까지

제가 총 모니터가 3개입니다. 해당 영상 이전의 영상들의 화면은 모두 정상적으로 잘 나왔으나, 기본타입- 튜플, 객체, 진위값 섹션의 강의 영상 이후부터는 화면이 모두 나오질 않습니다. 모니터 3개 중 한개를 끄면 또 정상적으로 잘 나옵니다. 혹시, 원인을 알수 있을까요?

  • javascript
  • typescript
  • es6
noonssub1004 댓글 1 좋아요 0 조회수 99

사전 렌더링과 getServerSideProps

해결됨

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

안녕하세요, 강의 잘 듣고 있습니다. 강의를 들으며 이해하지 못한 부분들이 있습니다. NextJS는 페이지 요청을 받았을 때 기본적으로 사전 렌더링(서버에서 JS 렌더링)을 한다고 이해하고 있었는데, 그러면 getServerSideProps함수를 선언하지 않아도 사전 렌더링이 진행되는거 아닌가요? 그런데 본 강의에서는 SSR을 진행하기 위해서는 getServerSideProps를 선언한다고 나와있는데, 그러면 SSR=기본적 사전 렌더링이 아닌건가요? 사전 렌더링은 기본적으로 되는게 아니라 명시적으로 getServerSideProps를 선언해야 가능한건가요? 사전 렌더링은 초기 접속 요청 시에만 진행되는게 맞을까요? 페이지 이동 시에는 진행되지 않나요? 따라서 이 페이지 이동 시에 사전 렌더링을 진행하기 위해서 getServerSideProps를 명시적으로 선언하려는 것인가요? (그렇다면 1번질문 해결) 감사합니다.

  • react
  • typescript
  • next.js
학생 댓글 2 좋아요 0 조회수 109

cursorAI에 rule 생성 시 rule type이 안 나오는 현상 발생

미해결

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

안녕하세요, cursor에서 설정 > rules & memories 선택 > Project Rules에서 +Add Rule 선택 > project-structure.mdc 생성하면 강사님 화면처럼 rule type 선택할 수 있는 창이 안 뜹니다. 이유가 뭔지 잘 모르겠습니다 ㅜ

  • react
  • 블로그
  • next.js
  • cursor
  • cursorai
산독기 댓글 3 좋아요 0 조회수 222

useEffect 비동기 관련 질문

해결됨

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

비동기가 되기 때문에 콘솔로그를 쓰면 안된다에대한 질문입니다. 위(setCount 내부)에는 count + value를 했고 아래 콘솔로그는 count로 예시를 보여주셨습니다. 궁금한건 아래 콘솔로그에도 +value를 달면 렌더링 결과는 똑같이 나오는거 아닌가요? 물론 실질적인 값은 동일하지 않더라도 이렇게 되면 렌더링 되는 결과는 같은거 아닌가요?

  • javascript
  • react
  • node.js
최동혁 댓글 2 좋아요 0 조회수 105

클라이언트 컴포넌트 사전 렌더링

미해결

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

클라이언트 컴포넌트는 서버에서 사전렌더링이 된다고 했는데 이 의미가 하이드레이션 하는부분만 제외하고 html로 렌더링해준다는 말인가요? 서버는 <div data-nextjs-client-component="..."></div> 같은 placeholder 만 내려주고 서버에서 HTML로 렌더링되지 않는다는 말도 있어서 헷갈립니다ㅠㅠ!!

  • react
  • 블로그
  • next.js
  • cursor
  • cursorai
Subin Ryu 댓글 2 좋아요 0 조회수 70

폰트나 이미지사용 문의

미해결

UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오

안녕하세요 강의 듣고있는 학생입니다. 혹시 다운로드 파일에 있는 아이콘이나 폰트들 취업용 개인 포트폴리오 웹사이트 만들때 사용해도 될까요?

  • HTML/CSS
  • javascript
  • jquery
  • 반응형-웹
  • media-query
혜연 댓글 1 좋아요 0 조회수 101

4.6강 초기 로딩 속도 케이스 비교

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

4.6강 초기 로딩 속도 케이스 비교 세가지 케이스를 적어주셨는데 case1, case3이 같은 건가요? 제가 이해를 못한 건가 싶어서 세 번 돌려봤는데 같아 보여서요.

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwindcss
  • zustand
보노보노 댓글 2 좋아요 0 조회수 107

MODULE_NOT_FOUND 오류

해결됨

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

code: 'MODULE_NOT_FOUND', requireStack: [ 'C:\\Users\\CompanyWebsite\\backend\\index.js' ] } Node.js v22.17.0 [nodemon] app crashed - waiting for file changes before starting... app . use ( "/api/auth" , userRoute ); 라우트 구성 후 thunder client로 apt 테스트 시 발생하는 오류입니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • mongodb
yosemyti 댓글 3 좋아요 0 조회수 190

npx 명령어 사용 불가

미해결

만들면서 배우는 리액트 : 기초

안녕하세요. ls를 할 경우 소스파일들이 보이지 않습니다. 혹시 어떤 경로로 이동하면 될까요?

  • javascript
  • react
ziumks 댓글 1 좋아요 1 조회수 96

자바스크립트 이해도

해결됨

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

자바스크립트 부분이 끝났는데, 혹시 자바스크립트에 대한 이해도는 어느 정도로 되어야 하나요,테스트 해볼 수 있는 방법이 있을까요?(미션 퀴즈를 혼자 처음부터 못 풀면 다시 복습하고 혼자 할 수 있을때까지 하는게 답 안 보고 하는게 맞을까요?) 다음 챕터로 넘어가기전에 확인하고 싶어서 질문합니다 🙂 !

  • javascript
  • react
das mi 댓글 1 좋아요 0 조회수 152

그랩님, 해결되지 않은 에러 메시지 [꼭] 답변 부탁 드립니다.

해결됨

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

그랩 선생님, 좋은 강의 만들어 주셔서 잘 듣고 있습니다. 그런데 아무리 해도 에러가 나는 것을 해결하지 못하고 있어 2주 이상 진도를 나가지 못하고 있어 부득이하게 질문을 여러번 올리게 됩니다. 현재 [그랩마켓] React로 웹 개발하기 -2 듣고 있는데요 , 1. 그랩 선생님 소스 코드와 동일 하게 아래 작성한 index.js 소스 첨부 하는데요, 실행 하면 , 1초 동안 잠깐 판매되는 상품들 이미지 없이 전체 페이지 뜨다 바로 아래 첨부한 그림과 같이 에러가 발생 합니다. 이 에러는 어떻게 해결 할 수 있을까요? -------- 2. index.js 소스 아래에 작성 첨부 합니다. import './index.css'; import axios from "axios"; import React from 'react'; function MainPage(){ const [products, setProducts]=React.useState([]); React.useEffect( function(){ axios.get("이곳에는 제 mock 목 서버 주소를 넣었습니다/products") .then(function(result){ const products=result.data.products; setProducts(products); }).catch(function(error){ console.error("에러 발생:",error); }); },[]); return ( <div> <div id="header"> <div id="header-area"> <img src="../images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="../images/banners/banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"> { products.map(function(product, index){ return ( <div className="product-card"> <div> <img className="product-img" src={product.imageUrl} /> </div> <div className="product-contents"> <span className="product-name">{product.name} </span> <span className="product-price">{product.price}원 </span> <span className="product-seller"> <img className="product-avatar" src="../images/icons/avatar.png" /> <span>{product.seller}</span> </span> </div> </div> ); }) } </div> </div> <div id="footer"></div> </div> ); } export default MainPage; 그리고, 추가적으로 아래 그랩님 답변 본 뒤 다시 시도해 본 후 질문이 있어 추가적으로 글을 적습니다. 현재 postman을 실행하고요, 제 해당 목 mock 서버 주소를 입력 후 끝에 /products까지 하면요, 아래와 첨부한 사진과 같이 잘 데이터를 받아오는 것 같은데요, 위에 에러 화면이 그대로 표시되어 어떻게 해결해야 하는지 방법을 모르겠습니다. 조금 구체적으로 어떻게 해결해야 하는지 단계별로 친절한 설명 부탁 드립니다 위에는 mock 서버인 postman(포스트맨) 화면이고요, 아래는 크롬 브라우저 에러 메시지를 첨부합니다. 참고> app.js 소스 첨부합니다. import logo from './logo.svg'; import './App.css'; import MainPage from "./main/index.js" function App() { return ( <div> <MainPage /> </div> ); } export default App; 또한 만약 그랩님께서 제 소스를 보시고 수정하여 에러가 해결된 완성된 index.js 소스가 있다면요, 최종 완성 된 수십 줄의 소스 코드 를 아래 답변 댓글에 길더라도 다 첨부해주시면 완성된 소스 코드를 그대로 복사하여 vs code에 붙여 넣기 하고 싶은데요 , 아래 답변 글에 남겨주시면 감사하겠습니다. ------------------------------------------------------------------------------------------------- 그리고, 아래 글에 나와 있는 답변데로, TypeError: Cannot read properties of undefined (reading ‘map’) 해결 방법 서버 데이터 문제로 인한 map 함수 에러 고치기 React 데이터 바인딩과 undefined 에러 처리 위 해결책의 코멘트와 답변 대로 수정해 보아도 에러가 해결 되지 않았습니다. 어떻게 해결 해야 하는지요? 빠른 답변 부탁 드립니다.

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

context를 사용하니 Editor 컴포넌트 최적화가 풀리는 이유

해결됨

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

안녕하세요. 강의 잘 듣고 있습니다. context 를 사용하기 전 코드에서 export default memo(Editor); Editor 컴포넌트에도 memo 를 사용해서 TodoItem 의 수정/삭제로 인해 계속 리렌더링되는 것을 막는 최적화를 했었는데요. context를 사용하고 나니까 Editor 컴포넌트의 최적화가 풀리는 이유가 궁금합니다. useCallback 과 useMemo 를 사용해서 함수를 App 컴포넌트가 마운트 될 때 한번만 생성하고 3개의 함수를 묶은 객체도 다시 생성되지 않도록 만들었는데, Editor 컴포넌트는 컨텍스트에서 onCreate 함수만 받아서 사용하고 있는데, 왜 리렌더링이 발생하나요? 챗지피티에 질문을 했더니, " props 가 없는 상태에서 useContext 만 쓰고 있으면 memo 는 props 비교를 하지 못해서 무조건 리렌더링 발생한다" 라고 하는데 맞는 말인가요? 맞는 말이라면 설명 좀 부탁드립니다.ㅠㅠ

  • javascript
  • react
  • node.js
junghyun 댓글 3 좋아요 0 조회수 130

이미지 파일의 경로 설정에 대한 질문입니다.

해결됨

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

src 폴더 안에 pages폴더와 assets폴더가 있는데 왜 경로를 ../../assets 이렇게 잡아야 하는 거죠? .. 을 두 번 쓰면 두 번 위로 올라가는 거니까 src 폴더 밖에서 assets 폴더를 찾겠다는 거 아닌가요?

  • HTML/CSS
  • javascript
  • react
  • node.js
  • mongodb
yosemyti 댓글 2 좋아요 0 조회수 132

vite 리액트 설치에 대해 질문있습니다.

해결됨

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

안녕하세요 리액트 설치 에러에 대해 질문이 있습니다. 원래 vite로 리액트를 설치해서 잘 사용하고 있었는데 어제 새로운 프로젝트를 할려고 vite로 리액트를 설치했고 npm i 명령어로 node_modules를 받은 후 npm run dev로 실행을 하니 이미지처럼 오류가 계속 나더라구요. 그래서 저 에러에 대해 이것저것 찾아보니 node버전 문제라고 나오는데 현재 버전은 v20.11.1 인데 뭐가 문제인건지 모르겠습니다.

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

선생님 안녕하세요

해결됨

이거 하나로 종결 - 32시간 고품질 스프링 풀스택 웹 개발

선생님 안녕하세요 무료강의 들으면서 말도 안 되는 구성에 말도 안 되는 가격으로 또 처음 출시시 할인까지 해주셔서 너무 감사합니다. 이전 풀스텍 강의 바로 결제했고, 다른거 하면서 무료강의부터 듣고 학습중인데 이번에 나온 리액트 강의도 당연 구매해서 학습할 예정인데, 이 전에강의는 수강기간이 무제한으로 나와있던데 지금 리액트 포함 강의는 36개월만 들을수 있는건가요? 물론 몇회독을 할수있는 시간이긴한데, 전에 강의랑 비교해서 이 강의는 수강기간이 무제한이 아니라 문의글 남겨봅니다. 항상 감사합니다.

  • HTML/CSS
  • javascript
  • jsp
  • mysql
  • spring-boot
zoseonghun 댓글 2 좋아요 0 조회수 142

props 에 불이 안켜지죠...?

미해결

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

불이 왜 안켜지는거죠...?

  • javascript
  • react
  • node.js
이길이내길 댓글 2 좋아요 0 조회수 135

인기 태그

인프런 TOP Writers

주간 인기글