inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

TodoItem 컴포넌트에서 todos를 props로 받았는데 렌더링이 되지 않습니다.

해결됨

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

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

  • javascript
  • react
  • node.js
박보경 댓글 2 좋아요 0 조회수 292

<img /> 요소 대신 <Image /> 컴포넌트를 사용해야 하는 이유 (성능 최적화)

미해결

Next.js 시작하기

섹션 11의 이미지 성능 최적화 강의에서 Next.js의 이미지 성능 최적화에 대해 설명하실 때의 강의 코드가 <Image /> 컴포넌트가 아닌 <img /> 요소인데도 이미지 성능 최적화가 잘 되는 것을 보았습니다. 그럼 굳이 <img /> 요소 대신 <Imgae /> 컴포넌트를 사용해야 하는 이유가 있나요?

  • javascript
  • react
  • next.js
  • imgae컴포넌트
  • 성능최적화
  • lazyloading
  • 지연로딩
play _Er 댓글 2 좋아요 0 조회수 283

Edit page onUpdate 질문

해결됨

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

onUpadate를 주석처리하면 home으로 잘 돌아오는데, onUpadate를 실행하면 위 사진 같은 상태가 됩니다. 매번 오탈자로 질문드려서 죄송하지만 코드를 계속 살펴보고 다시 작성해봐도 같아서 질문드립니다... import Header from "../components/Header"; import Button from "../components/Button"; import Editor from "../components/Editor"; import { useParams, useNavigate } from "react-router-dom"; import { useContext } from "react"; import { DiaryDispatchContext } from "../App"; import useDiary from "../hooks/useDiary"; const Edit = () => { const params = useParams(); const nav = useNavigate(); const { onDelete, onUpdate } = useContext(DiaryDispatchContext); const curDiaryItem = useDiary(params.id); const onClickDelete = () => { if (window.confirm("일기를 정말 삭제할까요? 다시 복구되지 않아요!")) { //일기 삭제 로직 //console.log(params.id); onDelete(params.id); nav("/", { replace: true }); } }; const onSubmit = (input) => { if (window.confirm("일기를 정말 수정할까요?")) { onUpdate( params.id, input.createdDate.getTime(), input.emotionId, input.content ); } nav("/", { replace: true }); }; return ( <div> <Header title={"일기 수정하기"} leftChild={<Button onClick={() => nav(-1)} text={"< 뒤로 가기"} />} rightChild={ <Button onClick={onClickDelete} text={"삭제하기"} type={"NEGATIVE"} /> } /> <Editor initData={curDiaryItem} onSubmit={onSubmit} /> </div> ); }; export default Edit;

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

컴포넌트가 렌더링되어 HTML이 생성되는 곳 (getServerSideProps VS useEffect)

미해결

Next.js 시작하기

안녕하세요 :) 섹션 9 부분을 다 듣고 나서 명확히 이해가 가지 않는 부분이 있어 질문드립니다. getServerSideProps를 이용하여 페이지를 로딩할 때 는 "컴포넌트가 렌더링되어 HTML이 생성되는 곳"이 프론트 서버(Next.js 서버) 이고, useEffect를 이용하여 페이지를 로딩할 때 는 "컴포넌트가 렌더링되어 HTML이 생성되는 곳"이 클라이언트(브라우저) 라고 이해하는게 맞을까요?

  • javascript
  • react
  • next.js
play _Er 댓글 1 좋아요 0 조회수 250

12.15강의 10분 Edit페이지에서 삭제하기(onDelete) 기능 질문

해결됨

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

TypeError: onDelte is not a function onDelete를 함수로 인식하지 못하고 있다고 합니다. 오탈자가 문제인건지 잘 모르겠습니다.... import "./App.css"; import { useReducer, useRef, createContext } from "react"; import { Route, Routes } from "react-router-dom"; import Home from "./pages/Home"; import Diary from "./pages/Diary"; import New from "./pages/New"; import Notfound from "./pages/Notfound"; import Edit from "./pages/Edit"; // 1. "/" : 모든 일기를 조회하는 Home 페이지 // 2. "/new" : 새로운 일기를 작성하는 New 페이지 // 3. "/diary" : 일기를 상세히 조회하는 Diary 페이지 const mockData = [ { id: 1, createdDate: new Date("2024-11-04").getTime(), emotionId: 1, content: "1번 일기 내용", }, { id: 2, createdDate: new Date("2024-11-03").getTime(), emotionId: 2, content: "2번 일기 내용", }, { id: 3, createdDate: new Date("2024-10-07").getTime(), emotionId: 3, content: "3번 일기 내용", }, ]; function reducer(state, action) { switch (action.type) { case "CREATE": return [action.data, ...state]; case "UPDATE": return state.map((item) => { String(item.id) === String(action.id) ? action.data : item; }); case "DELETE": return state.filter((item) => String(item.id) !== String(action.id)); default: return state; } } export const DiaryStateContext = createContext(); export const DiaryDispatchContext = createContext(); function App() { const [data, dispatch] = useReducer(reducer, mockData); const idRef = useRef(4); //기본 일기 추가 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", id, }); }; return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.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> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> </> ); } export default App; import Header from "../components/Header"; import Button from "../components/Button"; import Editor from "../components/Editor"; import { useParams, useNavigate } from "react-router-dom"; import { useContext } from "react"; import { DiaryDispatchContext } from "../App"; const Edit = () => { const params = useParams(); const nav = useNavigate(); const { onDelte } = useContext(DiaryDispatchContext); const onClickDelete = () => { if (window.confirm("일기를 정말 삭제할까요? 다시 복구되지 않아요!")) { //일기 삭제 로직 //console.log(params.id); onDelte(params.id); nav("/", { replace: true }); } }; return ( <div> <Header title={"일기 수정하기"} leftChild={<Button onClick={() => nav(-1)} text={"< 뒤로 가기"} />} rightChild={ <Button onClick={onClickDelete} text={"삭제하기"} type={"NEGATIVE"} /> } /> <Editor /> </div> ); }; export default Edit;

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

Azure 서버로 구축하고 작업하는 방법 알 수 있을까요?

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요! 제가 AWS가 아닌 Azure 서버를 이용하고 있는데, Azure는 어떻게 이용 가능한 지 알 수 있을까요? 프로젝트를 수행하고 있는 비전공자라 개념이 많이 부족합니다. 운이 좋게 Azure를 쓸 기회를 얻어서 Azure를 이용해서 작업하고 싶은데, 어떻게 사용할 있을 지 알 수 있나 싶어 질문 드립니다.

  • HTML/CSS
  • javascript
  • aws
  • git
  • mysql
  • rest-api
  • github
  • azure
  • microsoft
dpfqjf 댓글 2 좋아요 0 조회수 302

개발자 모드 질문입니다

해결됨

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

디버그 모드가 되는 것 같은데 이유를 모르겠습니다. 뭐라 검색해봐야할까요? 아님 제가 코드 오타가 난걸까요? 이전에 components탭에서 볼 수 있던 값들이 안 보여서 질문드립니다.

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

그랩선생님, 질문 답변 부탁 드립니다.vscode에서 npm install -g create-react-app 입력 후 에러 입니다.

해결됨

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

(* nodejs 설치를 https://nodejs.org/en/download/ 에 들어가서 Prebuilt Installer 메뉴에서 v22.11.0(LTS)를 설치하였습니다.) 안녕하세요, 수고가 많으십니다. 강의 잘 듣고 공부하다 모르는 부분이 있어 에러사항은 아래에 요약하여 적었습니다. 일단 react 시작하기 강의를 듣고 있던 중 처음 부분에서 vscode 터미널에서 명령어 npm install -g create-react-app 입력 후 아래 에러가 발생하여 어떻게 해야 해결 할 수 있는지 답을 알고 싶어서 글을 쓰게 되었습니다. 1.첫번째로 vscode 실행 후 npm install -g create-react-app 명령어 입력하니 에러 요약: 경로를 확인하라는 문제가 발생하였습니다. 첫번쨰 에러 발생 한 후 vscode를 종료하고 다시 시작하니 또 다시 이번엔 새로운 에러가 발생 하였습니다. 에러 요약: 자세한 내용은 마이크로소프트 링크 주소 참조하라는 메시지 에러가 발생하였습니다. 현재까지 2가지 에러가 순서대로 나타내고 있는데요, 어떻게 하면 해당 사항을 해결 할 수 있을까요? 상세하고 자세한 답변 부탁드립니다. 감사합니다.

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

스무스 스크롤바 모바일에서 뻑뻑한 느낌이 들어요!

해결됨

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

스무스 스크롤바 이용해서 포트폴리오 사이트 만들고 있어요! 그런데 폰으로 확인해보니 스크롤트리거 pin 고정부분은 엄청 부드럽게 작동하고, 나머지 부분에선 뻑뻑한데 이유가 뭔지 알 수 있을까요? 그리고 강의 너무너무 감사합니다!! 덕분에 빠르게 gsap 배우고 있어요!!

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

메일 확인 부탁드립니다.

미해결

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

이메일로 자료 요청을 했으나 계속 받지 못하고 있습니다. 메일 확인 부탁드립니다. (swh0107@gmail.com)

  • HTML/CSS
  • javascript
  • es6
우혁 댓글 1 좋아요 0 조회수 167

캐시를 기다리는 중. 질문드립니다

해결됨

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

공통 컴포넌트 만들기 과정에서 Header left right버튼을 넣어서 수정하고 랜더링하는 과정에서 무한 대기로 빠집니다. Header를 삭제하면 랜더링이 잘 되는데, 동일하게 코드를 따라했음에도 Header를 넣으면 "캐시를 기다리는 중"이라는 문구와 함께 대기 상태로 접어듭니다 원인을 잘 모르겠습니다

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

STORM(Synthesis of Topic Outlines through Retrieval and Multi-perspective Question Asking) 아키텍처 구현하기 강의에서 콜랩 url 이 안보입니다.

미해결

모두를 위한 대규모 언어 모델 LLM Part 5 - LangGraph로 나만의 AI 에이전트 만들기

안녕하세요, 제가 잘 몰라서 그런지 확인차 물어봅니다. 강의명 "STORM(Synthesis of Topic Outlines through Retrieval and Multi-perspective Question Asking) 아키텍처 구현하기 1" 나 "2" 강의를 보아도 관련 콜랩 url 이 안보이는거 같은데, 제가 잘 못본것일까요? 다른 강의의 콜랩 url 은 잘 보이는데, 이 강의에서만 해당 콜랩 url 이 안보여 문의드립니다. 이상입니다. 감사합니다.

  • llm
  • langchain
  • rag
  • openai-api
  • ai-agent
  • langgraph
createhappy 댓글 2 좋아요 0 조회수 196

클로저와 같은 함수형 프로그래밍 공부

미해결

함수형 프로그래밍과 JavaScript ES6+ 응용편

좋은 강의 감사합니다! 다음 단계를 어떻게 나아가야 할지 고민을 하고 있는데,, 클로저와 같은 함수형 프로그래밍 언어를 공부하면 좋을까요..?

  • javascript
  • 함수형-프로그래밍
정길수 댓글 2 좋아요 0 조회수 231

spread 연산자는 연산자가 맞을까요

해결됨

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

연산자는 계산을 한 후에 그 값을 알 수 있어야 한다고 알고 있었는데 spread 연산자는 결과값이라는게 존재하지 않는 것 같습니다. typeof 연산자를 통해서 데이터 타입을 확인하는것도 불가능하고 let arr1 = [1, 2, 3]; let obj1 = {a:1, b:2, c:3}; 라 했을 때 console.log(...arr1); 는 출력이 되지만 console.log(...obj1);는 에러가 뜨는 것을 봐서는 연산을 통한 결과값을 적용하는 것이 아니라 그냥 코드 내의 글자 자체가 ...arr1 이 1, 2, 3 또는 arr1[0], arr1[1], arr1[2] 로 치환되는것 같습니다. 코딩을 할 때 중요할 것 같진 않지만 작동 방식이 궁금해서 질문 드립니다.

  • javascript
  • react
  • node.js
bestoon 댓글 1 좋아요 1 조회수 168

깃허브 권한 요청 드립니다

미해결

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

인프런 아이디 : patagonia 인프런 이메일 : libra10042@gmail.com 깃헙 아이디 : libra10042@gmail.com 깃헙 username : libra10042

  • javascript
  • vue.js
댓글 1 좋아요 0 조회수 179

TodoList에서 checkBox 업데이트를 위한 onUpdate의 props전달?

미해결

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

TodoList에서 checkBox 업데이트를 위한 onUpdate의 props전달?에 대해서 질문이 있습니다 첫 번째, 부모 컴포넌트에서 자식 컴포넌트로 값(변수, 리스트, 함수 등)을 전달하는 것이 props인건지 햇갈립니다 두 번째, onUpdate의 구동방식은 이해되었습니다. 다만 app.jsx가 아니라 List.jsx에서 만들어도 되지 않나? 라는 의문점이 있습니다. 리렌더링 때문일까요? 아님 다른 이유가 있는건지 궁금합니다.

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

깃허브 권한 요청 드립니다

미해결

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

인프런 아이디 : cool3797@gmail.com 인프런 이메일 : cool3797 @gmail.com 깃헙 아이디 : cool3797 @gmail.com 깃헙 username : OtterCue

  • javascript
  • vue.js
OtterCue 댓글 1 좋아요 0 조회수 185

for loop 탈출은 return 문으로 해도 되지 않나요?

미해결

자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)

일곱난쟁이 문제에서, 가짜 난쟁이 둘을 발견 후에 for loop를 멈출 때 splice를 한 arr를 for loop에서 return arr 하면 전체 for loop에서 탈출하는데 그걸 사용해도 되지 않나요?

  • javascript
  • 코딩-테스트
wlsghtmeod 댓글 1 좋아요 0 조회수 147

안녕하세요 todos 에서 map 사용시 에러가 발생합니다.

해결됨

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

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

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

투포인트알고리즘으로 풀어봤습니다.

미해결

자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)

투포인트 알고리즘을 생각하고 풀어봤는데 슬라이딩 알고리즘과 투포인트중에 어떤걸 선택해도 상관 없는건가요 ? /** *@function 최대매출 *@description 최대매출 알고리즘 문제 풀이 */ function solution(m, arr) { let answer = 0; let sum = 0; let lt = 0; let n = arr.length; for (let i = 0; i < m; i++) { sum += arr[i]; } answer = sum; for (rt = m; rt < n; rt++) { sum += arr[rt] - arr[lt++]; if (answer < sum) { answer = sum; } } return answer; } let arr = [12, 15, 11, 20, 25, 10, 20, 19, 13, 15]; console.log(solution(3, arr));

  • javascript
  • 코딩-테스트
wyswhsl21 댓글 0 좋아요 0 조회수 154

인기 태그

인프런 TOP Writers

주간 인기글