48,400원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
일기 작성이 됐었는데 다시 안됩니다...
두 번 질문해서 답변대로 수정하였더니 일기가 작성이 되었다가..수정 기능을 강의를 보면서 구현을 하였고갑자기 또 일기 작성이 되지 않습니다..다시 여러 번 강의를 보면서 따라했으나 해결하지 못하였습니다..죄송합니다ㅠㅠ코드 샌드박스 링크입니다https://codesandbox.io/s/late-morning-d483sv?file=/src
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
sandbox에서 .js로 새 파일 작업시 즉시 반영 안됨
sandbox에서 default 파일(.mjs) 말고 .js 파일을 새로 만들어서 console.log를 실행했는데 .mjs 처럼 즉시 실행이 안됩니다. (이떄 instant preview도 on 했습니다.)
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
일기작성이 안돼요 ㅠㅠ
어제 질문 남겼는데 답변해주신대로 해봤는데 아직도 작성완료가 안됩니다... ㅠㅠ강의 돌려보면서 틀린거 없나 살폈는데도 모르겠어요.. 콘솔에도 아무것도 안찍히구요..무슨 일일까요? ㅠㅠ샌드박스 링크 남깁니다..https://codesandbox.io/s/late-morning-d483sv?file=/src
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
serve -s build 오류가 납니다.ㅠㅠㅠ
File sizes after gzip: 56.23 kB build\static\js\main.c2dd5a76.js 1.22 kB build\static\css\main.9a059f26.css The project was built assuming it is hosted at /. You can control this with the homepage field in your package.json. The build folder is ready to be deployed. You may serve it with a static server: serve -s build Find out more about deployment here: https://cra.link/deployment C:\Users\min seo hyun\Desktop\emotion-diary>npm install -g serve changed 89 packages in 5s 24 packages are looking for funding run npm fund for details C:\Users\min seo hyun\Desktop\emotion-diary>serve -s build 'serve'은(는) 내부 또는 외부 명령, File sizes after gzip: 56.23 kB build\static\js\main.c2dd5a76.js 1.22 kB build\static\css\main.9a059f26.css The project was built assuming it is hosted at /. You can control this with the homepage field in your package.json. The build folder is ready to be deployed. You may serve it with a static server: serve -s build Find out more about deployment here: https://cra.link/deployment C:\Users\min seo hyun\Desktop\emotion-diary>npm install -g serve changed 89 packages in 5s 24 packages are looking for funding run `npm fund` for details C:\Users\min seo hyun\Desktop\emotion-diary>serve -s build 'serve'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.cmd창에서 빌드 파일 생성하고 serve도install 하였습니다.그 다음 과정인 serve -s builde진행하는 과정에서 위와같은 오류가 나오는데 왜 그런지 도와주세요ㅠㅠㅠ
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
일기 작성이 안돼요
작성완료를 누르면 새로 추가가 되지 않습니다.뭐가 문제일까요?코드 샌드박스 주소는 여기 있습니다.https://codesandbox.io/s/late-morning-d483sv
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
새로고침 시 렌더링이 계속 2번 발생합니다
안녕하세요 6-12까지 수강한 상태입니다. 강의를 따라해서 다른 부분은 다 강의대로 똑같이 진행되는데 저는 사이트를 새로고침시 여전히 렌더링이 2번 진행됩니다. 전에 컴포넌트 id를 확인했을 때 0부터가 아닌 20부터 id가 시작되는 걸 확인했어서 그것과도 연관이 있는 것 같은데 정확한 원인을 도무지 못 찾겠어서 질문드립니다ㅠㅠ아래는 코드샌드박스 링크입니다. 감사합니다!https://codesandbox.io/s/ecstatic-firefly-87mcs4?file=/src/App.js
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
일기 쓰기 부분 26분 경 onClick
import React from 'react'; const EmotionItem = ({ emotion_id, emotion_img, emotion_descript, onClick, }) => { return ( <div onClick={() => onClick(emotion_id)} className="EmotionItem"> <img src={emotion_img} alt="감정 이미지" /> <span>{emotion_descript}</span> </div> ); }; export default EmotionItem; DiaryEditor에서 EmotionItem 부분에 onClick 프롭스를 전달해주고 있는데요. div 부분에 onClick을 받는 건 알겠는데 중괄호 안에 또 onClick을 받는 건 왜인가요? 코드 문법이 잘 이해가 되지 않아 질문 드립니다.
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
조건문 업그레이드 질문
조건문 업그레이드에서 6분 가량 10번째 줄에meal[mealType] || "굶기" 가 있습니다.여기에서 console.log(getMeal("한식"))의 결과가 "불고기"가 나오는것은 이해가 갑니다.만약 meal.mealType으로 코드를 수정했을 때도 "불고기"가 나와야할 것 같은데 "굶기"가 나옵니다.잘 이해가 가지 않아서 설명 가능하시다면 부탁드립니다.
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
React Error..
(사진)
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
crbug/1173575, non-JS module files deprecated.오류
serve를 실행하면 console에 다음과 같은 오류메세지만 나옵니다. 어떻게 해결해야할까요?추가로 Chart.js를 install 해서 사용하던중이었습니다.
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
DiaryItem 컴포넌트 props 질문이요!
리액트에서 배열 사용하기 1-리스트 렌더링 강의에서 질문있습니다. DiaryItem 컴포넌트에서 diaryList에있는 author, content.. 등 정보를 사용하려면 props 로 내려받아야 하는걸로 알고 있는데..DiaryList 컴포넌트에서는 key 값만 적혀있는데 따로 map을 사용하면 props가 DiaryItem까지 전달되는건가요? {diaryList.map((it) => ( <DiaryItem key={it.id}{...it} /> const DiaryItem = ({ author, content, created_data, emotion, id, }) => { return } import DiaryItem from "./DiaryItem"; const DiaryList = ({ diaryList }) => { console.log(diaryList); return ( <div className="DiaryList"> <h2> 일기 리스트</h2> <h4>{diaryList.length}개의 일기가 있습니다.</h4> <div> {diaryList.map((it) => ( <DiaryItem key={it.id}{...it} /> ))} </div> </div> ); }; export default DiaryList;
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
새 일기 추가가 안되요
onCreate시 localStorage에 데이터가 추가는 되는데, 화면에 작성한 글이 나오지 않아요 ㅠㅠ https://codesandbox.io/s/infallible-artem-sdzknh
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
onCreate와 JS비동기성
onCreate에서 data의 초기값이 빈배열인 이유가 JS의 비동기성과 관련이 있나요?로직을 순서대로 보면 getData에서 initData를 넣은 다음에 callBack 함수가 선언되어 초기값에 문제가 없을거 같은데비동기성 때문에 이런 문제가 발생하는지 궁금합니다.
- 미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useCallback 과 React.memo 의 사용 기준
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 초심자의 입장에서 사실 저러한 기능을 보면 그냥 처음에 만들때는 useCallback, React.memo 를 다 써보고 나중에 문제 생기면 그때 바꿔쓰면 되지 않나? 라는 생각이 듭니다.마치 평소에는 const 로 다 만들고, 해보다가 let 으로 변경이 필요하다 싶으면 let 으로 바꾸는 것처럼요.이걸 어떤 기준을 잡고 사용해야 할까요? 정확한 기준이 있는지도 궁금합니다. 렌더링 되는데 걸리는 시간이 몇 초 이상일시 변경한다거나 하는 기준이 있을까요?
- 미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useRef() 사용하고 console.log(state)를 찍어보니 빈객체가 콘솔에 찍힙니다..!
안녕하세요!강의 듣고 복습하면서 콘솔을 찍어 봤는데빈객체가 콘솔에 찍힙니다..이거 안넘어가게 하려는 방법이 있나요...?위와 같이 콘솔이 찍힙니다..ㅠ나머지는 강의 들은 내용과 같이 잘 작동합니다!감사합니다!
- 미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useCallback 적용 안되는 오류
안녕하세요, 수업 잘 듣고 있습니다:)다름이 아니라, useCallback을 onEdit 함수와 onRemove함수에 적용했는데 계속해서 모든 일기 리스트가 리렌더되는 현상이 발생하여 이유를 묻고 싶습니다 ㅠ 이 코드에 문제점이 있을까요? // 배열 삭제 const onRemove = useCallback((targetId) => { setData((data) => data.filter((it) => it.id !== targetId) ); }, []); // 배열 수정 const onEdit = useCallback((targetId, editContent) => { setData((data) => { return data.map((it) => { if (it.id === targetId) { it.content = editContent; } return it; }); }); }, []);
- 미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
중첩 Context
강사님 왜 중첩 Context를 사용하는지 이해가 되지 않아 https://www.inflearn.com/questions/800739/context%EC%97%90-%EA%B4%80%ED%95%B4%EC%84%9C-%EC%A7%88%EB%AC%B8%EB%93%9C%EB%A6%BD%EB%8B%88%EB%8B%A4질문에 답변하신 것을 보았습니다제가 이해한 바로는 상위 컴포넌트의 state가 변경되면 Context는 리렌더링 되고 리렌더링 되면서 하위 Context로 전달하려는 객체가 재생성되기 때문에 기존과 다른 prop이 왔다고 인식하여 React.memo를 활용하여 리렌더링을 방지하려 했던 것이 의미 없게 된다 따라서 객체에 useMemo를 활용하여 state가 변경되었을 때 재생성되지 않도록 방지하는 것으로 이해하였습니다. 제가 이해한게 맞나요? 그렇다면 중첩 Context가 아닌 useMemo를 활용하면 해결되는 문제 아닌가요? useMemo를 활용하여 state가 변경되어 컴포넌트가 리렌더링될때 재생성되는거만 방지해줄 수 있지 않나요?
- 미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
React Hook useMemo has a missing dependency
강사님 강사님의 강의를 들으며 진행하고 있는데 아래와 같은 경고 메시지가 계속 나와 경고 메시지를 받지 않으려면 어떻게 코드를 작성해야 하는지 궁금해서 질문 드립니다!아래는 제가 작성한 코드입니다https://codesandbox.io/s/youthful-glitter-6thymf?file=/src/App.js:0-2523Line 54:8: React Hook useMemo has a missing dependency: 'data'. Either include it or remove the dependency array react-hooks/exhaustive-deps Line 58:51: React Hook useMemo has missing dependencies: 'addDiary', 'deleteDiary', and 'editDiary'. Either include them or remove the dependency array react-hooks/exhaustive-deps
- 미해결한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useState() 데이터 추가 성능 질문
안녕하세요! React에서 useState()를 사용하여 배열과 같은 데이터 구조에서 자료를 추가하는 경우,다른 언어같은 경우 원소 하나만 추가하는 시간복잡도가 O(1)으로 수행하는 함수가 있는데(C++의 append 혹은 push) React에서는 항상 [newItem,...data] 이런 식으로 원소 하나 추가할 때마다, 배열의 값을 모두 새로 만드는데, 데이터가 많아질 경우 시간복잡도가 O(n)으로 비효율적일 것 같습니다. 그래서 React에는 push()같은 방식으로 데이터를 추가하는 방법이 있나요? 없다면 없는 이유가 무엇인가요??
- 해결됨한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리렌더링 동작에 따른 상태의 변화
안녕하세요? 질문 드립니다. state가 바뀔 때 마다 해당 컴포넌트에 대해 리렌더링이 발생한다고 하셨습니다. 리렌더링은 해당 컴포넌트를 반환하는 함수의 재호출로 인한 결과일텐데 어떻게 상태값이 다시 새로 초기화되지 않고 변화한 값을 들고 있는지 궁금합니다. 임의의 state에 대해 useState()로 인한 초기화가 매번 새롭게 호출될텐데 해당 state는 초기화값을 계속 할당받는 것이 아닌 변화한 값을 인식하고 있습니다. 내부의 원리가 궁금합니다.