48,400원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useMemo와 useEffect 차이
useMemo 강의 잘 듣고 있습니다. 그런데, useMemo(() => { //생략 }, [data.length]); 한 것과 useEffect(() => { //생략 }, [data.length]); 한 것과 차이가 있을까요? 제가 생각했을때는 둘이 같이 작동할 것 같은데.. 어떻나요?
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
dataId = useRef(0) 질문입니다.
const dataId = useRef(0) 질문입니다. 강의 들을 때는 그냥 음~ 하면서 들었는데 나중에 생각해보니.. 왜 useRef를 쓰는 건지 잘 모르겠습니다. 그냥 const [dataId, setDataId] = useState(0); 해도 문제 없을 것 같은데.. 어떨까요??
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
객체가 존재하는지 확인하는 방법에서요!!
안녕하세요!객체 확인 방법에서 "key" in 객체명 이렇게 확인하라고 하셨는데..객체 삭제에서 delete활용, null 활용에서 스택에 저장되는 메모리까지 날리기 위해서는 null을 활용하라고 하셨잖아요??null을 활용해서 프로퍼티를 지우면 객체 확인 할때는 true로 나오는데 그러면 null보다는 delete를 활용해야하는건가요??
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
객체 접근 방법 질문이요!!
안녕하세요!!10분30초 쯤에서 객체 접근할떄 아직 정해지지 않은 key에 접근할때는 괄호 표기법을 사용하라고 하셨는데 제가 만든 함수처럼 만들어도 결국 console.log(person.key1)으로 같은데 왜 오류가 나는지 이해가 가지 않습니다!답변 주시면 감사하겠습니다. let person = { key : "value", //property (객체 프로퍼티) key1 : "value2", key2 : "value3", }; function getPropertyValue(key){ console.log(person.key) }getPropertyValue(key1);
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 잘듣고있어요!
쌤 재밌는 강의 듣고 있는 학생입니다..ㅎㅎ 다름이 아니라 다른 강의보면 redux라는 걸 사용하는데 이 강의에서도 사용하나요? 아니면 따로 강의를 수강해야하나요??
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
<DiaryItem key={it.id} {...it} /> 이렇게 key를 전달했지만 또 콘솔창에 key에러 문구가 나옵니다
(사진)
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
React.js 기초 -> JSX 쪽 질문있습니다.🙋♂️
안녕하세요 🙋♂️ 영상 3분 쯤 에러가 나서 MyHeart 함수 내에 return을 써야 된다고 하셨는데, 음.. 제 경우 콘솔에 에러가 안났고, return을 따로 쓰지 않아도 화면이 잘 나오는데.. 제가 만든 프로젝트에 무슨 문제가 있는 걸까요?? 끄고 다시 npm start 했는데도 잘 동작합니다.
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
데이터추가하기에서 못넘어가고 있어요....ㅡㅡ
강사님 강의를 열심히 듣고 있습니다. 근데, 잘 따라가다가 데이터 추가하기에서 정말 몇번씩 다시 써보고 확인했는데 전혀 동작을 하지 않습니다. 그전까지는 잘 되었구요, 어떻게 해결을 해야할지....ㅠㅠ 강사님 소스를 다 복사해서 붙여봐도 안되어요.... 일기저장하기 버튼을 클릭하면 아무것도 동작하지 않습니다. alert 창도 뜨지 않구요 App.js 파일 import {useRef, useState} from "react"; import './App.css'; import DiaryEditor from './DiaryEditor'; import DiaryList from './DiaryList'; import { getActiveElement } from '@testing-library/user-event/dist/utils'; // const dummyList = [ // { // id:1, // author:"홍길동", // content:"하이 1", // emotion:5, // created_date : new Date().getTime() // }, // { // id:2, // author:"김경숙", // content:"하이 2", // emotion:2, // created_date : new Date().getTime() // }, // { // id:3, // author:"아무개", // content:"하이 3", // emotion:1, // created_date : new Date().getTime() // } // ] function App () { const [data, setData] = useState([]); const dataId = useRef(0); const onCreate =(author, content, emotion) =>{ const created_date = new Date().getTime(); const newItem = { author, content, emotion, created_date, id : dataId.current } dataId.current += 1; setData([newItem, ...data]); }; return ( <div className="App"> <DiaryEditor onCreate={onCreate} /> <DiaryList diaryList={data} /> </div> ); } export default App; DiaryEditor.js 파일 import {useRef, useState} from "react"; const DiaryEditor =({onCreate}) =>{ const authorInput = useRef(); const contentInput = useRef(); const [state, setState] = useState({ author: "", content: "", emotion: 1 }); const handleChangeState = (e) =>{ setState({ ...state, [e.target.name]:e.target.value, }); }; const handleSubmit = () =>{ if(state.author.length < 1){ authorInput.current.focus(); return; } if(state.content.length < 5){ contentInput.current.focus(); return; } onCreate(state.author, state.content, state.emotion); alert("저장성공"); // setState({ // author: "", // content: "", // emotion: 1, // }); }; return ( <div className="DiaryEditor"> <h2>오늘의 일기</h2> <div> <input ref={authorInput} name="author" value={state.author} onChange={handleChangeState} /> </div> <div> <textarea ref={contentInput} name="content" value={state.content} onChange={handleChangeState} /> </div> <div> <select name="emotion" value={state.emotion} onChange={handleChangeState} > <option value={1}>1</option> <option value={2}>2</option> <option value={3}>3</option> <option value={4}>4</option> <option value={5}>5</option> </select> </div> <div> <button onClick={handleSubmit}>일기 저장하기</button> </div> </div> ); }; export default DiaryEditor;
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
npm error
8분에 npm start를 하면 index.js가 실행되어야 하는데 npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. npm ERR! code EJSONPARSE npm ERR! path D:\22_javascript_training/package.json npm ERR! JSON.parse Unexpected string in JSON at position 199 while parsing '{ npm ERR! JSON.parse "name": "package-example1", npm ERR! JSON.parse "versi' npm ERR! JSON.parse Failed to parse JSON data. npm ERR! JSON.parse Note: package.json must be actual JSON, not just JavaScript. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\82108\AppData\Local\npm-cache\_logs\2022-06-20T17_04_20_353Z-debug-0.log 이런식으로 에러가 떠서 해결방법이 궁금합니다
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
api 호출하기 질문드려요
API 호출하기 강의에서 질문드립니다. async function getData(){ //fetch 자바스크립트에서 이런식으로 api호출을 할수 있도록 도와주는 내장함수 let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts"); let jsonResponse = await rawResponse.json(); console.log(jsonResponse); } 여기에서 async 라는것은 별도의 자바스크립트 명령인지요? fetch 앞에 붙은 await 도 기능이 있는 자바스크립트 명령인지요?
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 내용 의외에도 리엑트를 깊이있게 공부하기전에 공부해야할 자바스크립트 내용들은 어떤것들이 있을까요?
너무 막연한 질문일수도 있는데요! 리엑트 공부하면서 이후 리엑트 네이티브까지 공부하려고 합니다. 물론 자바스크립트는 다 공부해야겠지만... 시간이 많지 않습니다. 혹시 강의 내용 의외에도 앞으로 리엑트를 좀 더 깊게 공부하려면 이런 내용까진 추가로 자바스크립트를 공부하고 리엑트를 진행해야한다면 자바스크립트에서 어떤것들을 추가로 공부를 하고 리엑트 공부를 해야할까요?
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
데모사이트 에러뜹니다.
데모사이트 접속이안되는데 확인부탁드려요
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
ppt공유
강의에서쓰이는 ppt공유가능한가요? 개인적으로 정말좋은거같아서 ppt자료 얻고싶습니다
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
newItem부분에서 질문있습니다.
React에서 배열 사용하기2 - 데이터 추가하기 강의에서 아래와 같은 코드를 작성하시는데 id는 왜 그냥 dateId.current를 하지 않고 id : dateId.current로 수행되는지 궁금합니다. const dateId = useRef(0); const onCreate = (author, content, emotion) => { const create_date = new Date().getTime(); const newItem = { author, content, emotion, create_date, id: dateId.current, }; dateId.current += 1; setDate([newItem, ...date]); // 새로작성한 item이 가장 먼저 들어가도록 };
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
defaultProps 설정과 Optional_chaining
# 의문 - 리액트에서 배열 사용하기 1 - 리스트 렌더링 (조회) 강의 중 12분 쯤 - 리액트에서 props를 내려줄 때 undefined 값일 수도 있는데 그 때 defaultProps 문법을 사용해도 되지만 ? 문법을 사용해도 코드가 동작합니다. 두 개 중 선택할 때 뭘 기준으로 선택하는지 궁금합니다. - 참고: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining ```javascript= {<h4>{diaryList ? diaryList.length : 0}개의 일기가 있습니다.</h4>} DiaryList.defaultProps = { diaryList: [], } ```
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리액트 이름길이오류?
안녕하세요 선생님 혹시 리액트를 npx로 생성할때 뒤에 이름을 정하는데 4글자이상적으면 계속오류가 뜨는데 이건 어떤 경우 일까요 3글자 까지는 정상적으로 생성됩니다,,
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
만약 일기가 엄청 많다면.,..?
궁금한게 하나 생겻습니다. 06:55 부분의 내용인데요 만약에 정말 많은 데이터가 존재한다고 생각하면 그런 경우에는 어떻게 하는지 궁금합니다. 많은 데이터가 있는데 그중에 무조건 filter로만 건지게 되면 어찌되었든 filter 연산이 발생하는 거잖아요? 글을 조회시에 단순히 그 글의 key값만 가지고 db에서 조회를 해와서 상세 내용을 보여주는것을 일반적으로 생각하고 있는데 react같은 경우에는 그렇게 하지는 않고 useEffect를 이용해서 filter로만 걸러야 하는지가 궁금합니다. 만약에 이 방법이 그냥 우리가 backend서버가 현재 없어서 연습용으로 그렇게 하는 것이라면 실제로 별도의 backend 서버와 연동시에는 어떤 식으로 조회를 하는건가요? 제가 위에서 아는 방식으로 동일하게 진행하나요?
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
페이지 구현 - 일기 쓰기
안녕하세요! 강의 잘 듣고 있었는데요 저도 윗 분들 처럼 일기 작성 후에 네비게이트로 페이지 이동까지는 되는데 작성한게 업데이트가 안됩니다 ㅠㅠ https://codesandbox.io/s/blazing-sun-kyl8yt?file=/src/components/EmotionItem.js
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
onCreate 및 dispatch 함수 내에서 data값 확인은 어떻게 할 수 있을까요?
안녕하세요! 해당 강의를 다 마치고, 사진과 같이 onCreate 함수 내부에서 data를 콘솔로 출력해보니 data 값을 읽어오지 못하는데 그 이유가 뭘까요?? data.length와 같은 작업을 진행하고 싶은데 어떻게 접근해야 할지 모르겠어서 질문 남깁니다 !
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useMemo와 동일한것 같은데 차이점이 뭔가요??
https://ko.reactjs.org/docs/hooks-faq.html#how-to-memoize-calculations 위 공식문서에서 조금 아래로 내려가면 useMemo로 컴포넌트를 다시 렌더링하는 경우도 나옵니다. function Parent({ a, b }) { // 'a'가 변경된 경우에만 다시 렌더링 됩니다: const child1 = useMemo(() => <Child1 a={a} />, [a]); // 'b'가 변경된 경우에만 다시 렌더링 됩니다: const child2 = useMemo(() => <Child2 b={b} />, [b]); return ( <> {child1} {child2} </> ) } 이런식으로 나오는데 둘의 동작은 동일하다고 봐도 되나요? React.memo는 useMemo와 다르게 바로 컴포넌트로 쓰니까 코드량과 가독성이 좋다는 차이점 밖에 안보여서 질문드립니다~!