48,400원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
일기 작성 업데이트
일기작성하기 /NEW 까지 들었고 새 일기쓰기를 했을 때 작성완료하면 홈으로만 가고 새 일기가 업데이트가 되지 않아요ㅜㅜ 수정하기에서 취소하기 버튼이 혼자 가운데에 있어요 https://github.com/ahnjongin/React_study/tree/main/emotion_diary
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
diaryList 길이 질문!
강사님 안녕하세요! 16분 50초경에 출력이 2번된다 말씀하시면서 diaryList 의길이가 0일때는 수행할 필요가 없다고 말씀하시면서 if(diaryList.length >= 1) 안에 넣어주셨는데.. 이부분이 잘 이해가 가지않습니다. 콘솔로 찍어보면 항상 length는 5가 나오구 if(diaryList.length >= 1) 를 넣어주지않아도 달력 다음버튼이나 이전 버튼을 누르면 똑같이 1번만 찍히는데 어째서 해주신걸까용..?
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
16분 경 console.log(randomColor()); 질문
randomColor는 메소드가 아니라 변수니까 console.log(randomColor);로 호출해야 되지 않나요? console.log(randomColor());처럼 ()가 달리면 메소드 호출인 거 같은데...
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
배포가 되지 않아요 ㅠㅠ
강의 끝까지 열심히 들었습니다. 좋은 강의 감사합니다. 그런데, 설명하신대로 firebase를 이용해서 배포를 했는데 화면에 아무것도 안뜨는것 왜 그런걸까요? 올리기전에 npm start 로 확인할때는 잘 떴구요, 물로 해당하는 경로에서 했구요
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
forEach를 하지 않고 map 쓰는 이유가 궁금합니다
안녕하세요 강의 수강하고 있는 학생입니다!! :) 다름이 아니라 6-3강의의 9분 쯤에서 map으로 diaryList의 하나하나를 뽑아내고 있는데, 왜 forEach가 아니라 map으로 사용하나요?? map은 배열의 요소를 바꿀 때 사용하고 forEach는 배열 하나하나 순회하며 조회하는 것으로 기억하고 있는데 이 코드에서 forEach를 사용하니 적용이 안되네요.. map으로 사용하는 이유와 왜 되는지, 그리고 forEach를 사용하지 않는 이유가 궁금합니다!
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
dataId 를 사용하기위해 useState가 아닌 useRef를 사용하는 이유가 궁금합니다
dataId를 useState를 사용하여 state값을 1씩 증가시키면서 사용하는것보다 useRef를 사용하는 이유가 있을까요??
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
map 메서드 관련 질문있습니다.
diaryLIst.map() 메서드 사용부분에서 JS 문법에서는 map 메서드에 콜백함수를 넣어줄때 map((it) => {} 이런식으로 중괄호를 사용하는것으로 알고있는데 JSX문법에서는 반드시 ()같이 소괄호를 사용해야하는것인가요? 그 이유는 무엇인지 알 수 있을까요??
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
handleChangeState 함수 관련 질문있습니다.
강의 25분쯤에 나오는 handleChangeState함수를 작성할 때 setState({...state, 이후 e.target.name을 대괄호로 감싸야하는 이유가 궁금합니다. 대괄호로 감싸지 않으면 에러가 발생하는데 대괄호로 감싸야하는 이유가 무엇인가요?
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useCallback
안녕하세요!!! 일기를 삭제할 때 다른 일기들이 리렌더 되지 않기 위해 useCallback을 사용한다. 라고 이해했습니다. 그러면 App.js에 onRemove에만 useCallback을 하면 되는 거 아닌가요? 왜 onEdit에도 useCallback을 해야할까요? onEdit은 일기 수정이니 onRemove만 useCallback한 후 일기 삭제하면 리렌더링이 안되야하는거아닌가요??? (둘 중 하나만 하면 전체 일기가 리렌더링 되었습니다...)
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
npm init
패키지를 생성중 나가고 싶으면 Press ^C 하라고 하는데 ^C 가 어떤 키 인가요??
- 미해결[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 도 기능이 있는 자바스크립트 명령인지요?