inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

학습 방향성

해결됨

제대로 배우는 Express.js: Part2 엔진 내부 동작 원리와 클론 프로젝트

안녕하세요 강의를 듣다가 전반적인 학습 방향성에 고민이 있어서 질문드립니다. 풀스택 개발자가 목표입니다 취업전 총 3번의 프로젝트를 진행 해보려고 합니다. (실서비스 프로젝트 1개 / 실서비스 프로젝트를 위한 연습 프로젝트 2개 ) 첫번째 프로젝트는 프레임워크를 사용하기 전 전반적인 기초체력을 기르기 위해서 fe - 바닐라 js로 spa방식 (csr) be express로 api구성 + 로우쿼리로 db 연동 두번째 프로젝트는 추후 next, nest 등 프레임워크 학습후 진행 해보려고 합니다. fe - next be - nest + prisma 등 인프라 - aws 운영 - • Sentry - 에러 추적 • CloudWatch - AWS 로그/모니터링 • Datadog - 통합 모니터링 • Winston / Pino - 로그 라이브러리 실서비스 프로젝트는 fe는 next / be는 nest를 사용해 개발할 예정이고 실제 사용자가 있는 b2b 쇼핑몰이라 배포/인프라(aws), 운영(모니터링/로깅) 까지 a~z까지 모두 경험 해볼 프로젝트입니다. 현재 첫번째 프로젝트를 위해 강의자분께서 제공한 express part1 수강은 끝난 상태입니다 프론트 및 db관련 강의들은 타 강의자분의 강의를 통해 준비를 마친 상태입니다. 혹시 part2 까지 수강후 전반적인 기능구현 실습들을 진행 해보는 타강의를 수강하고 프로젝트를 시작해야할까요 아님 프로젝트 경험 먼저 해본뒤 part2 강의수강, 기능구현 실습강의를 수강 하는게 더 효율적일까요.. 프로젝트 완성도를 위해 강의만 쭉 들으니 어디까지 공부를 해야하는것인가에 대한 기준도 안 잡히고 강의만 듣고 직접 강의 코드를 쳐보는것만으로는 구현력이 안 길러지는 것 같습니다.. 또한 강의 수강 기간이 길어지다보니 앞서 들었던 강의 내용들이 잘 기억이 안 나는 부분들에 대한 걱정 또한 있습니다. 반면에 실무적인 코드 경험 (강의를 통한 간접경험) 없이 프로젝트를 진행하면 실무에서 쓰지 않는 코드 / 리펙토링 하기 어려운 코드 / 보안에 대한 인식 부재로 인한 위험성 등 여러가지 잘못된 코드를 작성하고 학습하게될까봐 두려움이 있습니다. 어느 시점에 구현력을 기르기 위해서 프로젝트를 진행 해봐야하는지 도무지 감이 안 잡혀서 질문 드립니다.. 강의 외적인 성격이 짙은 질문인데 염치 불구하고 질문드립니다..

  • javascript
  • node.js
  • express
  • backend
  • 소프트웨어-설계
감코 댓글 1 좋아요 0 조회수 113

useCallback 적용한 onCreate, onUpdate, onDelete 함수..

해결됨

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

AI 답변으로 해결됐습니다! 강의 제목처럼 말 그대로 재생성 방지였군요..! 마운트 시 생성된 함수를 재사용하기 때문에 리렌더링 되더라도 props로 넘어간 함수는 참조 값이 똑같은 처음 생성된 함수이다. 이해했습니다! 안녕하세요, 강사님! 73강 useCallback과 함수 재생성 방지 강의의 4분 쯤의 내용에 대해 질문이 있습니다. 강의에서, useCallback 적용한 'onCreate, onUpdate, onDelete 함수가 두 번째 인수로 빈 배열을 할당했기 때문에 마운트 이후에는 다시는 생성되지 않는다.'라고 설명해주셨는데요! 그러면, 첫 마운트 이후 todo 아이템을 생성, 수정, 삭제 할 때는 해당 함수들이 어떻게 동작하는 것일까요? 동작은 하되, 생성하지 않는다.. 라고 이해를 해야 하는 걸까요..? 답변해주시면 감사하겠습니다.

  • javascript
  • react
  • node.js
onus 댓글 1 좋아요 0 조회수 88

vs code 자동완성관련 문의

해결됨

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

안녕하세요 module.exports 나 require 등의 node js 관련 기능을 작성하는데 자꾸 자동완성에 의해서 다른 글자로 바뀌네요 ex) module.exports 작성하는데 module 작성하고 '.' 누르거나 require 작성하고 '(' 누르면 다른 거로 바뀜 강사님 화면에서는 자동완성이 나오더라도 안 바뀌는데 혹시 어떻게 설정하셨는지 궁금합니다..!

  • javascript
  • react
  • node.js
망나뇽 댓글 2 좋아요 0 조회수 269

91강 useEffect내에서 상태변화함수 호출시 발생하는 에러

미해결

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

Error: Calling setState synchronously within an effect can trigger cascading renders Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following: * Update external systems with the latest state from React. * Subscribe for updates from some external system, calling setState in a callback function when external state changes. Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. ( https://react.dev/learn/you-might-not-need-an-effect ). 이런 에러가 나오는데요. 작동도 하고, 에러가 아니라 경고에 가까운것 같습니다. 그런데 똑같이 했는데 왜 강사님 화면에는 안뜨고 제 화면에만 뜨는건지 궁금하네요

  • javascript
  • react
  • node.js
김김 댓글 2 좋아요 1 조회수 226

전화영어 오류?

해결됨

AI Agent 영어 과외 선생님과 함께하는 요즘시대 영어 학습법! (2026년 7월 업데이트!!)

안녕하세요. Speaking+Listening에서 전화영어로 연습을 해보려고 하는데 이 화면에서 아무런 반응이 없어요. 빨간색으로 바뀌어서 말을 해도 인식이 안되고 새로고침을 하면 다시 로그인 화면으로 돌아가버려서 재접속을 해도 같은 문제가 발생합니다. 어떻게 해야하나요?

  • 영어
  • ai-활용-(ax)
  • ai-agent
띠용 댓글 2 좋아요 0 조회수 129

87강 필터 함수 질문

해결됨

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

getMonthlyData() 함수의 패턴이 가지는 장점이 있는지 궁금합니다. sql이라면 date 타입에 인덱스를 걸어둘수도 있기 때문에 크기 비교를 하는게 납득이 가는데 그런게 아니라면 아래 코드가 간단하고 가독성이 좋지 않나요? function filterByMonth(data, pivotDate) { return data.filter( (item) => item.date.getFullYear() === pivotDate.getFullYear() && item.date.getMonth() === pivotDate.getMonth(), ); }

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

useRef, useState count 비교

해결됨

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

안녕하세요 강사님! 강의에서 useRef는 값이 변경되었을 때 리렌더링을 발생시키지 않으므로 값이나 DOM 요소를 참고하고 싶을 때 사용한다고 하셨는데요. 1) 강의 예제 중, 수정이 일어난 횟수를 countRef에 담기도록 하셨는데, 이 때 값이 변경되어 ' onChange 함수에서 setInput 함수를 호출함으로써 리렌더링이 발생하는 것이고, countRef.current++는 리렌더링이 발생함과 동시에 값이 증가 되는 것 뿐이다 '라고 이해하면 되는 것일까요? 1번 코드 참고하시면 됩니다! 2) 위처럼 이해를 하다가 문득 궁금한 것이 생겼는데, 2번 코드 처럼.. useState의 input 객체에 count 프로퍼티를 추가하여 0으로 초기화 해주었습니다. 그리고 onChange 함수에서 setInput으로 count를 +1 시켜주었는데요. 1번 예제처럼 수정할 때 마다 count가 +1 되는 것을 의도하였는데, 이 때 textarea에서 ㄱ을 입력했다면, setInput 함수는 한 번 호출되며 textarea 수정과 count 증가가 동시에 발생하고 'textarea 수정 + count 증가' 이렇게 리렌더링이 한 번 발생하는 걸까요? 3) 만약 2번 질문의 답이 '결국 setInput 함수가 한 번 호출되며 작동하는 것이므로 리렌더링은 한 번이다.' 라면, 1번과 2번 코드는 '리렌더링이 발생할 때 마다 count 증가' 라는 점에서 같은 결과인 걸까요..? 질문이 좀 복잡하지만.. 답변해주시면 감사하겠습니다..! 1) useRef 사용하여 count import { useRef, useState } from "react"; export default function Test() { const [input, setInput] = useState({ name: "", bio: "", }); const countRef = useRef(0); console.log(input); console.log(countRef.current); const onChange = (e) => { countRef.current++; setInput({ ...input, [e.target.name]: e.target.value, }); }; return ( <div>...</div> ) } 2) useState로 count import { useState } from "react"; export default function Test() { const [input, setInput] = useState({ name: "", bio: "", count: 0, }); console.log(input); const onChange = (e) => { setInput({ ...input, [e.target.name]: e.target.value, count: input.count + 1, }); }; return ( <div>...</div> ) }

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

안된다고했던 이유가 무엇이었는지 모르겠습니다

해결됨

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

영상 8분 57초에 onClick 이벤트에 결과값을 넣으면 안된다고 배웠는데 그게 어디에서 그랬는지 기억이 안납니다 ㅠㅠ

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

파일 생성 방법이 다른건가요?

미해결

Vue 3 시작하기

안녕하세요 회사에서 vue를 사용해 퍼블을 해야돼서 인강을 구매했는데, 제가 생성한 파일이랑 형식이 달라서 어떻게 따라가야 할 지 문의드립니다. 제가 알고 있는 화면 구성은 아래 사진인데 Vue.create 이런건 어떻게 바꿔야 하는지 모르겠습니다ㅜ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>vue-project</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html>

  • javascript
  • vue.js
  • vue-3
희나 댓글 1 좋아요 0 조회수 79

오브젝트에의 이벤트 감지 vs 레이캐스팅

해결됨

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

안녕하세요. 경험이 더 쌓이거나 혹은 뒤에 진행될 프로젝트를 통해 해소될 수도 있지만 짚고 넘어가고 싶어서 여쭙습니다! 이벤트 객체를 통해서도 다양한 인터랙션을 만들어낼 수 있는데, raycaster를 반드시 써야 하는 상황의 예시가 어떤 것이 있는지 궁금합니다.

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

실전 반응형 웹사이트 이미지 다운

미해결

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)

안녕하세요 선생님! 매일매일 선생님의 강의를 수강하고 있는 제자입니다. 다름이 아니라 실전 반응형 웹사이트 제작 전 해당 웹사이트에 접속해서 크롬 확장 프로그램을 이용해 이미지 다운을 받으려고 합니다. 근데 현재 시점에서 넷플릭스, 크롬 사이트의 구성과 이미지 파일이 선생님의 강의와 많이 달라져서 수업을 잘 따라갈 수 있을지 걱정이 됩니다. 현재 각 웹사이트들의 이미지 소스들을 다운받아서 현 시점 웹사이트와 똑같이 혼자 만들려면 너무 어렵지 않을까 걱정되어서요ㅠㅠ 또 선생님 강의를 못따라 갈까봐 걱정도 되구요ㅠㅠ 현시점에서 어떤식으로 학습해야하는지 방향제시 부탁드립니다.ㅠㅠ

  • HTML/CSS
  • javascript
  • jquery
SOO 댓글 2 좋아요 1 조회수 96

자료 확인의 건

해결됨

AI 리터러시: 비전공자를 위한 생성형 AI 입문

자료 중 RAG가 Memory 자료로 확인됩니다.

  • chatgpt
  • 프롬프트엔지니어링
  • ai-활용-(ax)
  • ai-agent
mrdongwan 댓글 1 좋아요 0 조회수 86

6강의 워크플로우간 데이터가 에러가

해결됨

[인프런어워드 베스트셀러] 코딩 없이 AI 자동화 전문가가 되는 법, n8n 완벽 가이드

안녕 하세요 강의 잘 보고 있습니다. 6강 워크플로우간 데이터 처리에서 에러가 발생해서 문의 드립니다. 004-chatbot-naver-api 에서 call n8n workflow tool 추가 하고 004-1-search 워크 플로우에 연동 하면 에러가 발생 합니다. 워크 플로우 구성 화면 실행시 데이터 이런 상황이 있는것 같아 q&a를 확인 하여보니 n8n 2.x 대 버전사용으로 인한 문제 같아 버전을 확인 하였으나 1.1237 버전이 맞습니다. 버전 확인 캡쳐 이미지와 docker-compose.yaml 파일 캡쳐 합니다. 어떻게 해야 할까요?

  • n8n
  • 인공지능(ai)
  • rag
  • ai-활용-(ax)
  • ai-agent
붕붕 댓글 2 좋아요 0 조회수 113

안녕하세요 환불관련문의드립니다

미해결

AI와 함께 배우는 Next.js

안녕하세요. 전날 저녁에 구매했는데, 섹션2 첫번쨰까지 들었습니다. 거의 프로그램세팅하는 부분만 들은건데, 강의가 저와 잘 맞지않아서 환불하고싶습니다. 그런대 인프런자체에서는 전체의 14퍼센트를 들었다고 환불이 불가능하다고하는데요. 혹시 강사님 권한으로 환불이 가능한지 여부를 알고싶습니다.

  • javascript
  • react
  • next.js
  • cursor
  • 인공지능(ai)
배움이 댓글 1 좋아요 0 조회수 121

summary 를. 시스템메세지에 추가하는 부분에 관하여

미해결

LangGraph를 활용한 AI Agent 개발 (feat. MCP)

agent(state:AgentState) ->AgentState: messages =state['messages'] summary = state.get('summary',None) if summary: messages =[SystemMessage(content='Here is the summary of the earil er conversation : {summary}')]+messages response = llm_with_tools.invoke(messages) return {'messages':[response]} 안녕하세요 강사님, 강의 재밌게 듣고 있습니다. 수강중 궁금한 사항이 있어 질문 남깁니다. 위와 같이 코드를 알려주셨는데요, 이런 흐름이라면, messages 에 동일한 내용의 SystemMessage가 여러번 들어가게되는 걸까요? 예를 들어 사용자 질의 한개를 처리하는데, agent <-> tool 간의 반복 작업이 3번 있었다면 agent 가 3번 호출될 때마다 messages 리스트 앞에 동일한 SystemMessage 객체가 중복되어 붙을거 같아서요.

  • 프롬프트엔지니어링
  • llm
  • ai-agent
  • langgraph
  • mcp
댓글 3 좋아요 0 조회수 127

추천패턴

미해결

프론트엔드 마스터클래스

디자인 패턴을 공부중에 궁금한게 생겨서 질문 드립니다. 채팅 같은걸 구현할때 응답이 엄청 다양한 형태로 온다면 어느 패턴이 좋을까요?

  • javascript
  • react
  • 함수형-프로그래밍
  • 객체지향
  • next.js
swyoo753 댓글 1 좋아요 0 조회수 93

[12강] 현재 kome.ai에서 헤더값이 없어도 api 호출이 가능한 것 같습니다.

해결됨

[인프런어워드 베스트셀러] 코딩 없이 AI 자동화 전문가가 되는 법, n8n 완벽 가이드

kome의 api가 업데이트 된 건지 헤더를 입력하지 않아도 실행해보니 스크립트를 가져오네요. 여러 영상에서 테스트를 해도 되는 모습입니다.

  • n8n
  • 인공지능(ai)
  • rag
  • ai-활용-(ax)
  • ai-agent
화씨 댓글 2 좋아요 0 조회수 77

콜백 함수 메서드 등록

해결됨

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

export default function CityList({ $app, intialState, handleLoadMore }) { this.state = intialState; this.$target = document.createElement("div"); this.$target.className = "city-list"; this.handleLoadMore = handleLoadMore; $app.appendChild(this.$target); this.template = () => { let temp = `<div class="city-items-container">`; if (this.state) { this.state.cities.forEach((elm) => { temp += ` <div class="city-item" id=${elm.id}> <img src=${elm.image}></img> <div class="city-item-info">${elm.city},${elm.country}</div> <div class="city-item-score">❤️${elm.total}</div> </div> `; }); } temp += `</div>`; return temp; }; this.render = () => { this.$target.innerHTML = this.template(); if (!this.state.isEnd) { const $loadMoreBtn = document.createElement("button"); $loadMoreBtn.className = "add-items-btn"; $loadMoreBtn.textContent = "더보기"; this.$target.appendChild($loadMoreBtn); $loadMoreBtn.addEventListener("click", this.handleLoadMore); } }; this.setState = (newState) => { this.state = newState; this.render(); }; this.render(); } 이 코드에서 this . handleLoadMore = handleLoadMore ; 이부분이 왜 필요한지 이해가 되지 않아서 질문드립니다. 콜백 함수를 이벤트 리스너에 등록 해도 되지 않나요? this로 메서드 등록해서 사용하는 이유가 궁금합니다. 추가적으로 바닐라 js 로 spa 구현하는 개념들이 매우 어렵고 복잡하게 느껴지는데 바닐라 js로 spa를 구현해보는 프로젝트를 해보고 프레임워크로 넘어가야 하는것일까요..

  • javascript
  • rest-api
  • spa
  • dom
감코 댓글 2 좋아요 0 조회수 122

투두리스트 실습을 충실히 진행한 상태에서 감정일기장 실습을 따라할 필요가 있을까요?

해결됨

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

페이지 라우팅에 대해서 충분히 이해했고 84강 이후로는 투두리스트 실습의 답습이 될것 같아서 질문합니다. 추가된 내용이 있으면 실습을 따라하겠지만, 이미 했던 내용 그대로 따라하는거라면 배속으로 넘겨보려고요.

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

인기 태그

인프런 TOP Writers

주간 인기글