inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

개발자 모드 활성화 시 반응형 처리

미해결

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

문득 강의 수강 중에 강사님께서 개발자모드를 활성화하면 전체적인 화면이 반응형으로 되어있는데 쭉 수강하다가 제꺼에서는 지정이 안되있어 어느 챕터를 놓쳤는지 감이 안옵니다ㅜㅜ 혹여나 다른 분들도 비슷한 사례가 있을까싶어 여쭈어봅니다.

  • javascript
  • react
  • node.js
  • 카카오공채-개발
임스헝 댓글 1 좋아요 0 조회수 90

타입스크립트 버전 선택 안되시는분

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

7:33 초 타입스크립트 버전 선택 ctrl + shift + p 입력후 select type 로 하면 검색 결과가 안나오고 TypeScript: Select 검색해야 버전선택이 가능하니 안되시는분 참고하시길.. 처음 하는 분들은 안되고 한번 검색한 적이 있는경우 최근에 사용한 항목으로 검색이 되는듯하네요..

  • react
  • typescript
  • react-query
  • supabase
  • zustand
김주원 댓글 1 좋아요 1 조회수 98

isLoading 기능 추가했는데, 존재하지 않는 일기 입니다.

미해결

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

isLoading 기능을 추가했는데 수정하기, 다이어리 페이지에서 새로고침하면 존재하지 않는 일기입니다. 라고 나오네요. https://github.com/pdh9311/onebite-react 작성했던 코드 입니다. import { Route, Routes } from "react-router-dom"; import "./App.css"; import { createContext, useEffect, useReducer, useRef, useState } from "react"; import Diary from "./pages/Diary"; import Edit from "./pages/Edit"; import Home from "./pages/Home"; import New from "./pages/New"; import Notfound from "./pages/Notfound"; function reducer(state, action) { let nextState; switch (action.type) { case "INIT": return action.data; case "CREATE": nextState = [action.data, ...state]; break; case "UPDATE": nextState = state.map((item) => String(item.id) === String(action.data.id) ? action.data : item ); break; case "DELETE": nextState = state.filter( (item) => String(item.id) !== String(action.data.id) ); break; default: nextState = state; } localStorage.setItem("diary", JSON.stringify(nextState)); return nextState; } export const DiaryStateContext = createContext(); export const DiaryDispathContext = createContext(); function App() { const [isLoading, setIsLoading] = useState(true); const [data, dispatch] = useReducer(reducer, []); const idRef = useRef(0); useEffect(() => { const storedData = localStorage.getItem("diary"); if (!storedData) { setIsLoading(false); return; } const parsedData = JSON.parse(storedData); if (!Array.isArray(parsedData)) { setIsLoading(false); return; } let maxId = 0; parsedData.forEach((item) => { if (Number(item.id) > maxId) { maxId = Number(item.id); } }); idRef.current = maxId + 1; console.log(parsedData); dispatch({ type: "INIT", data: parsedData, }); setIsLoading(false); }, []); const onCreate = (createdDate, emotionId, content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, createdDate, emotionId, content, }, }); }; const onUpdate = (id, createdDate, emotionId, content) => { dispatch({ type: "UPDATE", data: { id, createdDate, emotionId, content, }, }); }; const onDelete = (id) => { dispatch({ type: "DELETE", data: { id, }, }); }; if (isLoading) { <div>데이터 로딩중입니다....</div>; } return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispathContext.Provider value={{ onCreate, onUpdate, onDelete }}> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/diary/:id" element={<Diary />} /> <Route path="/edit/:id" element={<Edit />} /> <Route path="*" element={<Notfound />} /> </Routes> </DiaryDispathContext.Provider> </DiaryStateContext.Provider> </> ); } export default App; import { useContext, useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import { DiaryStateContext } from "../App"; //커스텀 훅 const useDiary = (id) => { const data = useContext(DiaryStateContext); const [currDiaryItem, setCurrDiaryItem] = useState(); const nav = useNavigate(); useEffect(() => { console.log("useDiary"); const currentDiaryItem = data.find( (item) => String(item.id) === String(id) ); if (!currentDiaryItem) { window.alert("존재하지 않는 일기입니다."); nav("/", { replace: true }); } setCurrDiaryItem(currentDiaryItem); }, [id]); return currDiaryItem; }; export default useDiary;

  • javascript
  • react
  • node.js
  • 카카오공채-개발
padohy 댓글 3 좋아요 0 조회수 99

강의자료 다운로드시 발생하는 오류

해결됨

[Live 챌린지] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

강의자료 다운로드시 위의 메시지로 다운이 되질 않습니다.

  • react
  • next.js
  • cursor
  • 프롬프트엔지니어링
  • 바이브코딩
임형석 댓글 2 좋아요 0 조회수 133

portainer 클릭하면 up에서 down으로 되는 현상

해결됨

수익형 AI Agent n8n 전문가 강의, 블로그·쇼츠 자동화

잘 듣고 많은 도움이 되고 있습니다. portainer에 접속하면 local이 up으로 정상으로 되어있다가 local를 클릭하면 down으로 되는 데 해결방밥을 알려주세요 GPT통해서 재설치도 하고 했는데 아무리 해도 계속 반복이 됩니다

  • docker
  • n8n
  • 인공지능(ai)
  • 프롬프트엔지니어링
  • ai-활용-(ax)
  • 카카오공채-개발
채경기 댓글 2 좋아요 0 조회수 127

tsconfig.app.json에서 에러발생

해결됨

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

안녕하세요 선생님이 shadcn을 설치하고 있는데요 tsconfig.app.json에서 위와 같은 에러가 발생합니다. 혹시 몰라서 선생님이 올려두신 자료로 해봤지만 똑같네요... 그냥 "ignoreDeprecations": "6.0" 이걸 추가할까요?

  • react
  • typescript
  • react-query
  • supabase
  • zustand
박 태영 댓글 3 좋아요 0 조회수 378

커밋메시지 인코딩 깨지는 현상

미해결

[Live 챌린지] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

윈도우환경에서 커서를 이용하여 강의를 따라가는중인데 cursor에서 커밋메시지를 작성하고 커밋을하면 한글 인코딩이 깨지는 현상이 발생합니다. ctrl-shift-p 로 select default profile을 통해 기본 터미널을cmd로 변경해도 적용이되지않는것같습니다 커서가 기본 cmd 또는 git bash를 터미널로 사용하도록 설정할수있을까요 ??

  • react
  • next.js
  • cursor
  • 프롬프트엔지니어링
  • 바이브코딩
콜라중독 댓글 1 좋아요 0 조회수 200

67강 상태업데이트 강의 중 궁금한 점

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

import FirstCount from "./firstCount"; import SecondCount from "./secondCount"; import { useState } from "react"; export default function Main() { const [count, setCount] = useState(0); const handleSetCount = () => { setCount((prev: number) => prev + 1); }; return ( <> <h1>Main Component</h1> <FirstCount count={count} setCount={handleSetCount} /> <SecondCount count={count} setCount={handleSetCount} /> </> ); } import type { MouseEventHandler } from "react"; interface FirstCountProps { count: number; setCount: MouseEventHandler<HTMLButtonElement>; } export default function FirstCount({ count, setCount }: FirstCountProps) { return ( <> <h1>firstCount Component</h1> {count} <button onClick={setCount}>increase</button> </> ); } import type React from "react"; interface SecondCountProps { count: number; setCount: React.MouseEventHandler<HTMLButtonElement>; } export default function SecondCount({ count, setCount }: SecondCountProps) { return ( <> <h1>secondCount Component</h1> {count} <button onClick={setCount}>increase</button> </> ); } 맨 위에 코드가 부모컴포넌트인데 부모컴포넌트에서 증가 함수를 정의하고 그 아래에 props로 내려주는 패턴은 잘 쓰이지 않는 패턴인가요? 강의에서는 각 자식 컴포넌트에서 카운트 증가 로직이 있어서 중복되는거 같아요 그래서 부모에 하나로 정의하고 props로 내려주었는데 어느게 맞는 패턴인가요?

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
모카 댓글 3 좋아요 0 조회수 93

클래스 vs 인라인 스타일 성능 질문

해결됨

구조 탐색과 조작의 모든 것 - [DOM 완전 정복 Part 1]

안녕하세요. 좋은 강의 감사합니다! 26. 클래스와 스타일을 다루는 가장 강력한 방법 – classList, style, 그리고 리플로우까지 에서 인라인 스타일로 스타일을 바꾸면 리플로우/리페인트가 자주 발생할 수 있어 성능에도 안 좋을 수 있다고 설명하셨는데요. 예시로 들어주신 코드에서는 어차피 자바스크립트 엔진이 싱글 스레드라 클래스든 인라인 스타일이든 모두 반영된 후에, 리플로우/리페인트가 발생하기 때문에 성능적으로는 유의미한 차이가 없을 것 같은데요. 좀 더 구체적인 설명을 해주실 수 있을까요? ChatGPT 답변도 같이 첨부합니다. https://chatgpt.com/share/69181628-34d0-8007-8e81-02401c649370

  • HTML/CSS
  • javascript
  • react
  • dom
  • frontend
hans 댓글 2 좋아요 0 조회수 109

[재질문][그랩님 답변 부탁드립니다]101강

미해결

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

그랩님, 강의 잘 듣고 있습니다. 다름이 아니라 궁금한 사항( =에러 해결방법 ) 이 필요해서 글을 남기게 되었습니다. 101강 에서 Axios 에러(400) 가 안드로이드 스튜디오 에뮬레이터에서 발생 하고 이어 아래의 추가 사진2 에서 보시다시피 502 Bad Gateway가 발생 하여 어떻게 해결 할 수 있는지 에 대해 알고 싶어서 질문 드립니다. 일단 101강 처음부터 ~ 4분 52초까지 그랩님께서 작성하신 소스코드를 똑같이 작성 후 결과 를 보려하는데, 농구공 그림 (세부사항:판매자:그랩,가격,상품명등등) 이 나오지 않아 서 이것을 어떻게 하면 그랩님과 같은 결과를 볼 수 있을지에 대해 여쭈어봅니다. 사진 1 첨부 : 판매되는 상품들 밑에 100강만 들었을 시에 농구공 화면이 잘 나왔으나 101강 4분 52초까지 의 내용의 소스코드를 입력 후 결과값 보면 400 에러도 발생하고 농구공도 안나오게 됩니다. 어떻게 해야 하나요? 사진 2 첨부 : ngrok http 8080후 진행 하면, 아래와 같이 502 Bad Gateway라고 뜨는데, 이 에러 의미와 무엇이 잘못된건지 그리고 어떻게 해결 해야 하는지 답변 주시면 좋겠습니다. 이어서 중간에 아래 사진 과 같은 절차 를 겪었었는데요, 필요할 것 같아 참고 로 스샷을 첨부합니다. axios 설치 후 grab-market-mobile에서 npm start하니 다른 프로세스에의해 포트 8081이 사용 되고 있는데 8082 포트를 대신 쓸거냐는 질문 에서 y or n 하라는데 y하게 되었는데요 , 이 다음에 어떻게 해야 그랩님 강의와 똑같이 잘 작동할 수 있을까요? 더불어서 또 다른 에러가 발생하는데요, 또 다른 에러는 cmd에서 ngrok http 8080 입력 후 포워딩 주소 를 크롬브라우저에 복사 후 붙여넣으면 , 이전 밑에 질문에서는 정상 작동되었으나 지금 은 아래와 같이 바뀐 에러 가 발생 하였습니다. 해결법을 모르기에 아래에 사진을 첨부합니다. 꼭 답변 부탁 드립니다. 그랩님의 답변 부탁 드립니다.

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

[ typoooo ] 1장. 작전3: Spring Batch Listener

미해결

죽음의 Spring Batch: 새벽 3시의 처절한 공포는 이제 끝이다.

JobListener 를 구현하면서 동적으로 executionContext 를 밀어 넣을때 설명이 내가 이해한게 맞다면 오타가 발생한 듯 하다. 이렇게 InfiltrationPlanListener를 JobBuilder 의 listener() 메서드로 등록해주면 beforeStep() 메서드에서 동적으로 생성한 데이터를 각 Step에서 참조할 준비가 완료된다. 해당 문구의 작업은 JobExecutionListener 로 동작한 부분으로 beforeStep 이 아닌 beforeJob 에 의해서 동적으로 생성되는게 맞지 아니한가?!

  • java
  • spring
  • spring-boot
  • spring-batch
  • backend
이상민 댓글 2 좋아요 1 조회수 66

클릭할 때 화면 울렁거리는게 집중에 방해가 돼요

미해결

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

✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 강의화면에서 코드를 읽는데 클릭하실 때 화면이 울렁거려 심히 신경쓰이고 더구나 클릭하면 주변 크기가 늘어나는게 아니라 오히려 줄어드니까 글 읽기가 더 힘드네요...반드시 개선해주셨으면 합니다.

  • aws
  • docker
  • next.js
  • nestjs
  • prisma
isghtp 댓글 1 좋아요 0 조회수 122

make category 에서요!

해결됨

수익형 AI Agent n8n 전문가 강의, 블로그·쇼츠 자동화

make category에서 TitleAI 제목을 끌어오는 게 오류가 계속 나서 앞단계인 category2.json 문제인가 싶어서 그거랑 함께 AI에게 물어보는 과정에서도 해결이 안되어서요 ㅠ 1) TitleAI 블로그 제목 부분 끌어왔을때 인식안되어서 Execute 누르면 처음부터 끝까지 계속 돌려야 하고... 토큰 아낄겸 pin 해놓았더니, pin 되어서 안된다고 하는데요 ㅠㅠ 2) TItleAI 부분은 왜 인식이 안되는걸까요? 3) 이렇게 단계별로만 확인하고 싶은데 왜 이건 개별단계로 안되고 매번 처음부터 테스트 해야할까요? ㅠㅠ --- 에러 메시지입니다 Paired item data for item from node 'Category2.Json' is unavailable. Ensure 'Category2.Json' is providing the required output. An expression here won't work because it uses .item and n8n can't figure out the matching item. You can either: Add the missing information to the node 'Category2.Json' Or use .first(), .last() or .all()[index] instead of .item Error details Other info Item Index 0 In or underneath Parameter Messages > Values Node type @n8n/n8n-nodes-langchain.openAi Node version 2 (Latest) n8n version 1.119.1 (Self Hosted) Time 2025. 11. 14. 오후 6:15:07 Cause detailed Missing pairedItem data (node 'Category2.Json' probably didn't supply it) Stack trace NodeOperationError: Paired item data for item from node 'Category2.Json' is unavailable. Ensure 'Category2.Json' is providing the required output. at ExecuteContext.router (/usr/local/lib/node_modules/n8n/node_modules/.pnpm/@n8n+n8n-nodes-langchain@file+packages+@n8n+nodes-langchain_ec7fbe0da3d2dc5c86e61be805f9ba74/node_modules/@n8n/n8n-nodes-langchain/nodes/vendors/OpenAi/v2/actions/router.ts:84:10) at processTicksAndRejections (node:internal/process/task_queues:105:5) at ExecuteContext.execute (/usr/local/lib/node_modules/n8n/node_modules/.pnpm/@n8n+n8n-nodes-langchain@file+packages+@n8n+nodes-langchain_ec7fbe0da3d2dc5c86e61be805f9ba74/node_modules/@n8n/n8n-nodes-langchain/nodes/vendors/OpenAi/v2/OpenAiV2.node.ts:89:10) at WorkflowExecute.executeNode (/usr/local/lib/node_modules/n8n/node_modules/.pnpm/n8n-core@file+packages+core_@opentelemetry+api@1.9.0_@opentelemetry+sdk-trace-base@1.30_08b575bec2313d5d8a4cc75358971443/node_modules/n8n-core/src/execution-engine/workflow-execute.ts:1093:8) at WorkflowExecute.runNode (/usr/local/lib/node_modules/n8n/node_modules/.pnpm/n8n-core@file+packages+core_@opentelemetry+api@1.9.0_@opentelemetry+sdk-trace-base@1.30_08b575bec2313d5d8a4cc75358971443/node_modules/n8n-core/src/execution-engine/workflow-execute.ts:1274:11) at /usr/local/lib/node_modules/n8n/node_modules/.pnpm/n8n-core@file+packages+core_@opentelemetry+api@1.9.0_@opentelemetry+sdk-trace-base@1.30_08b575bec2313d5d8a4cc75358971443/node_modules/n8n-core/src/execution-engine/workflow-execute.ts:1708:27 at /usr/local/lib/node_modules/n8n/node_modules/.pnpm/n8n-core@file+packages+core_@opentelemetry+api@1.9.0_@opentelemetry+sdk-trace-base@1.30_08b575bec2313d5d8a4cc75358971443/node_modules/n8n-core/src/execution-engine/workflow-execute.ts:2324:11

  • docker
  • n8n
  • 인공지능(ai)
  • 프롬프트엔지니어링
  • ai-활용-(ax)
  • 카카오공채-개발
마크북 댓글 2 좋아요 0 조회수 114

워드프레스 docker-compose.yml 파일

해결됨

수익형 AI Agent n8n 전문가 강의, 블로그·쇼츠 자동화

워드프레스 접속이 안되는 사유가 제가 워드프레스 파일 내 docker-compose.yml 파일에 특수문자를 넣어서 그런것 같아서 변경 후 저장하고 모바엑스텀가서 docker compose up -d 하고 나서도 똑같은 사유로 계속 에러가 나고 있습니다! 1) docker-compose.yml 내의 정보 변경 이후에 어떻게 해야 잘 반영이 될까요? 그리고 2) docker-compose.yml 내의 어떤 정보만을 건드려야 될까요? WORDPRESS_DB_USER < 아이디작성 (=MYSQL_USER = PMA_USER) WORDPRESS_DB_PASSWORD < 패스워드 (=MYSQL_ROOT_PASSWORD= PMA_PASSWORD) WORDPRESS_DB_NAME: wordpress < 그대로 두기 (=MYSQL_DATABASE) PMA_HOST: db < 그대로 두기 VIRTUAL_HOST: pma.도메인 # phpMyAdmin 접속용 도메인 (예: pma.example.com ) LETSENCRYPT_HOST: pma.도메인 LETSENCRYPT_EMAIL: 내메일

  • docker
  • n8n
  • 인공지능(ai)
  • 프롬프트엔지니어링
  • ai-활용-(ax)
  • 카카오공채-개발
마크북 댓글 2 좋아요 0 조회수 88

useSignInWithPassword에 넘기는 콜백 VS mutate의 두번째 인자 사용

해결됨

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

안녕하세요, 선생님. 강의 잘 듣고 있습니다:) 먼저 클린코드 작성 방법까지 알려주시면서 생각없이 따라 치지 않게 해주셔서 감사합니다. 이번 챕터에서 useSignInWithPassword 에 넘기는 콜백을 통해 성공, 에러 등의 처리를 진행하셨습니다. 이걸 보고 이전에 진행했던 프로젝트 리팩토링 부분이 생각나서 잠시 보고왔는데, 당시에는 mutate 함수에서 자체적으로 제공하는 두번째 인자로 콜백을 넘겨주는 기능을 활용했더라구요. mutate: (variables: TVariables, { onSuccess, onSettled, onError }) => void 선생님이 알려주신 방식과 이 방식의 차이점을 알고 싶습니다. 그리고 차이가 없다면 어떤 방식이 조금 더 효율적일지 선생님 의견이 궁금합니다. 이 방식을 사용했을 때 콜백 타입 정의는 제대로 이루어집니다. 다만, 이렇게 하면 협업 시 코드 스타일 통일이 안될 것 같다는 생각이 들긴 합니다. 읽어주셔서 감사합니다.

  • react
  • typescript
  • react-query
  • supabase
  • zustand
wonza4372 댓글 2 좋아요 0 조회수 103

워드프레스 연동 중 ngnix 오류 ㅠ-ㅠ

해결됨

수익형 AI Agent n8n 전문가 강의, 블로그·쇼츠 자동화

워드프레스 연동하기 위해 proxy host 설정하다가 아마 제가 띄어쓰기 하나를 더 넣었는지 바로 안되서, 설정창에 바로 들어가서 수정하려고 하는데 네트워크가 끊겨서 제 도메인으로 안들어가져요 ㅠ-ㅠ-ㅠ 제 도메인으로 된 ngnix가 접속이 안되는 상황인데 방법이 없을까요? ㅠㅠ

  • docker
  • n8n
  • 인공지능(ai)
  • 프롬프트엔지니어링
  • ai-활용-(ax)
  • 카카오공채-개발
마크북 댓글 2 좋아요 0 조회수 76

모바엑스텀 사용시

해결됨

수익형 AI Agent n8n 전문가 강의, 블로그·쇼츠 자동화

궁금한게 있는데 집에서는 모바엑스텀이 잘로그인되는데, 회사에서는 모바엑스텀이 패스워드입력하라고 나와서 입력하면 계속 안되네요 원래그런건가요?

  • docker
  • n8n
  • 인공지능(ai)
  • 프롬프트엔지니어링
  • ai-활용-(ax)
  • 카카오공채-개발
jimin6060 댓글 2 좋아요 0 조회수 75

loop 에서 done 이 안나와요

해결됨

수익형 AI Agent n8n 전문가 강의, 블로그·쇼츠 자동화

Blog_Content_writer 에서 Split out 되어 6 item 이 나왔고 Loop over Items 로 loop로는 1개 설정하여 잘 나오는데 done 에는 아무것도 안나오는데 어떻게 해야될까요? ㅠ 그래서 이후 단계인 모아서 워드프레스 적용하는 단계를 못하고 있습니다.

  • docker
  • n8n
  • 인공지능(ai)
  • 프롬프트엔지니어링
  • ai-활용-(ax)
  • 카카오공채-개발
마크북 댓글 2 좋아요 0 조회수 44

get reserved 오류

해결됨

수익형 AI Agent n8n 전문가 강의, 블로그·쇼츠 자동화

Get reserved data 잘되다가 또 이렇게 되네요 ㄷㄷ 뭐한개를 고치면 저래되고, 자료다운받아도 오류나고; 너무답답하네요 계속 gpt한테 묻고 뭐가다른건지

  • docker
  • n8n
  • 인공지능(ai)
  • 프롬프트엔지니어링
  • ai-활용-(ax)
  • 카카오공채-개발
jimin6060 댓글 3 좋아요 0 조회수 62

인기 태그

인프런 TOP Writers

주간 인기글