25%
36,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useCallback 의 Memoization 값 저장 방식은 참조가 아닌가요?
const onCreate = useCallback((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]); // initial state인 data = [] 로 인한 문제 }, []); 강의 중에서 useCallback 에서 data 값 갱신 문제에 질문이 있습니다. 우선, data 가 일반적인 값 참조처럼 일어나지 않는다는 점을 이해했습니다. 가장 마지막에 onCreate 가 업데이트되는 시점의 data 값을 기억해 두고 사용한다는 점도 이해했습니다. 그런데 왜 이렇게 동작하는지 궁금합니다. 구체적으로 말하면 Memoization이 어떻게 구현됐기에 이런 문제가 발생하는 건가요? 이전 값을 그대로 가지고 있으려면 단순히 참조 주소를 복사하는 식으로는 안 되고 Deep Copy가 일어나야 하지 않나요? 그리고 Deep Copy를 통해 Memo를 구현했다기에는 석연치 않은 부분들도 있습니다. 우선 매번 Deep Copy를 수행하는 식으로 Memo를 구현했다면 성능 문제가 발생하지 않을까요? 게다가 depth에서는 Shallow Compare 가 일어나니까 Deep Copy를 통해 구현하지는 않았을 것 같습니다. 이전 상태를 기억해 둔다는 방식은 이전 상태에 state 변수들을 내부에 따로 복사해서 저장해 둔다는 개념으로 이해되는데, 제가 예상하는 대로 Deep Copy를 통해 이전 값을 저장해 두는 건지 아니면 제가 놓친 부분이 있는지 궁금합니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
코드에서 궁금한게 있습니다.
<>{content}</> 로 쓰면 에러가 안나고{content} 로쓰면 에러가 나는 이유가 뭘까요 ??? 작성자 : {id} | 감정 : {emotion}<div className="content"> {isEdit ? ( <textarea value={localContent} onChange={(e) => setLocalContent(e.target.value)} /> ) : ( <>{content}</> )} </div>여기서 강의 보면 id,emotion는 <></>을 안쓰는데 content를 쓰는 이유가 뭔지 모르겠습니다. 어차피 const DiaryItem = ({ onEdit, onDelete, author, content, emotion, create_date, id, }) => {전부 List로 부터 받아오는데 누군 <>{content}</>이고 누군 그냥 {id} {emotion}인 이유가 먼지 궁금해요그리고 data.filter((it)=>(it.id!==targetId)); 을 data.filter((it)=>{it.id!==targetId}); 로 바꾸면 왜 에러가 나는걸까요 ?? ?언제 괄호를 쓰고 언제 중괄호를 써야하는지 정확히 알수있을까요 ??? 아래는 전체 코드입니다.import { useRef, useState } from "react"; const DiaryItem = ({ onEdit, onDelete, author, content, emotion, create_date, id, }) => { const [isEdit, setIsEdit] = useState(false); const toggleIsEdit = () => setIsEdit(!isEdit); const [localContent, setLocalContent] = useState(content); const handleDelete = () => { console.log(id); if (window.confirm(`${id}번쨰 일기를 삭제하겠습니까?`)) { onDelete(id); } }; const handleQuiteEdit = () => { setIsEdit(false); setLocalContent(content); }; const handleEdit = () => { onEdit(id, localContent); }; return ( <div className="DiaryItem"> <div className="info"> <span className="author_info"> 작성자 : <>{id}</> | 감정 : <>{emotion}</> </span> <br /> <span className="date">날짜: {create_date}</span> </div> <div className="content"> {isEdit ? ( <textarea value={localContent} onChange={(e) => setLocalContent(e.target.value)} /> ) : ( <>{content}</> )} </div> {isEdit ? ( <> <button onClick={handleQuiteEdit}>수정취소</button> <button onClick={handleEdit}>수정완료</button> </> ) : ( <> <button onClick={handleDelete}>삭제하기</button> <button onClick={toggleIsEdit}>수정하기</button> </> )} </div> ); }; export default DiaryItem;
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
코드 질문있습니다.
<DiaryItem key={it.id} {...it} />스프레드 연산자는 이해가 가는데 key={it.id} 옆에 바로 붙혀서 state객체를 넣을수 있는건가요 ?? 이건 어떤 문법일까요 <DiaryItem key={it.id} {...it} /><DiaryItem key={it.id} diary={it} />...을 써서 넣는거랑 안쓰고 앞에 diary = {it}으로 명시하고 넣는거랑 어떤차이가 있을까요 ? 전 이렇게 바꿨는데 ..이해가 안되서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} diary={it} /> ))} </div> </div> ); }; DiaryList.defaultProps = { diaryList : [], } export default DiaryList;
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
수정후 저장할때 자동으로 붙는 세미콜론 등은 어떤 플로그인에 의해 작동되는지?
수정후 저장할때 자동으로 붙는 세미콜론 등은 어떤 플로그인에 의해 작동되는지요? 프리티어라면 프리티어 설정 어디에서 무엇을 ON 시켜야 되나요?저는 안되서..^^
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
dummyList 변수 선언 위치 질문
안녕하세요 dummyList라는 변수 선언이 App함수 밖에 선언이 되어있는데App함수 안에 선언을 하는거랑 결과상으로는 같더라구요 jsx문법에서 보통 이런 변수선언은 함수 안에 하나요 밖에 하나요?혹시 차이가 있을까요? 이런 변수선언을 함수 밖에 선언하는 경우와 안에 선언하는 경우의 차이가 궁금합니다
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
serve -s build가 오류납니다ㅠㅠ
build 파일도 완성됐고 다른 것들도 다 오류없이 되었는데 serve -s build가 안됩니다..이렇게 오류가 뜹니다.. 커뮤니티에서 찾아봤는데 관리자 권한으로 실행하면 될 거라고 하셔서 해봤는데 안되고..get-executionpolicy를 입력하고set-executionpolicy -executionpolicy remotesigned입력하라고 하셔서 해봣는데 오류가 또 납니다..https://github.com/veryyounng/emotion_diary.git
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
local Storage을 이용하여 삭제하기 도중 오류납니다
강의를 들으면서 분명 삭제하기까지 정상 작동되는것을 보았는데 그 이후 diaryList에서 id값을 정렬할때 오류가 발생합니다 ㅠㅠapp.js에서 88번째 줄의 data가 정의되지 않았다고 뜹니다 ..아래는 코드 샌드박스 링크입니다.https://codesandbox.io/s/late-morning-d483sv?file=/src
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
DiaryItem에 있는 onRemove, onEdit, 는 바뀔 수밖에 없지 않나요?
20번째 다이어리를 삭제하는 경우 data 가 바뀌기에onRemove 함수가 재랜더링이 되기에 => DiaryItem 컴포넌트 내부에 있는 props 가 변경되는 원리로 이해가 되어요 ㅜㅜ onEdit 도 마친가지구요. onCreate 함수는 에디터와만 상관이 있어서 다이어리아이템과 상관이 없다는게 이해 갑니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
일기 작성이 됐었는데 다시 안됩니다...
두 번 질문해서 답변대로 수정하였더니 일기가 작성이 되었다가..수정 기능을 강의를 보면서 구현을 하였고갑자기 또 일기 작성이 되지 않습니다..다시 여러 번 강의를 보면서 따라했으나 해결하지 못하였습니다..죄송합니다ㅠㅠ코드 샌드박스 링크입니다https://codesandbox.io/s/late-morning-d483sv?file=/src
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
sandbox에서 .js로 새 파일 작업시 즉시 반영 안됨
sandbox에서 default 파일(.mjs) 말고 .js 파일을 새로 만들어서 console.log를 실행했는데 .mjs 처럼 즉시 실행이 안됩니다. (이떄 instant preview도 on 했습니다.)
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
일기작성이 안돼요 ㅠㅠ
어제 질문 남겼는데 답변해주신대로 해봤는데 아직도 작성완료가 안됩니다... ㅠㅠ강의 돌려보면서 틀린거 없나 살폈는데도 모르겠어요.. 콘솔에도 아무것도 안찍히구요..무슨 일일까요? ㅠㅠ샌드박스 링크 남깁니다..https://codesandbox.io/s/late-morning-d483sv?file=/src
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(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진행하는 과정에서 위와같은 오류가 나오는데 왜 그런지 도와주세요ㅠㅠㅠ
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
일기 작성이 안돼요
작성완료를 누르면 새로 추가가 되지 않습니다.뭐가 문제일까요?코드 샌드박스 주소는 여기 있습니다.https://codesandbox.io/s/late-morning-d483sv
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
새로고침 시 렌더링이 계속 2번 발생합니다
안녕하세요 6-12까지 수강한 상태입니다. 강의를 따라해서 다른 부분은 다 강의대로 똑같이 진행되는데 저는 사이트를 새로고침시 여전히 렌더링이 2번 진행됩니다. 전에 컴포넌트 id를 확인했을 때 0부터가 아닌 20부터 id가 시작되는 걸 확인했어서 그것과도 연관이 있는 것 같은데 정확한 원인을 도무지 못 찾겠어서 질문드립니다ㅠㅠ아래는 코드샌드박스 링크입니다. 감사합니다!https://codesandbox.io/s/ecstatic-firefly-87mcs4?file=/src/App.js
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(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을 받는 건 왜인가요? 코드 문법이 잘 이해가 되지 않아 질문 드립니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
조건문 업그레이드 질문
조건문 업그레이드에서 6분 가량 10번째 줄에meal[mealType] || "굶기" 가 있습니다.여기에서 console.log(getMeal("한식"))의 결과가 "불고기"가 나오는것은 이해가 갑니다.만약 meal.mealType으로 코드를 수정했을 때도 "불고기"가 나와야할 것 같은데 "굶기"가 나옵니다.잘 이해가 가지 않아서 설명 가능하시다면 부탁드립니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
React Error..
(사진)
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
crbug/1173575, non-JS module files deprecated.오류
serve를 실행하면 console에 다음과 같은 오류메세지만 나옵니다. 어떻게 해결해야할까요?추가로 Chart.js를 install 해서 사용하던중이었습니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(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;
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
새 일기 추가가 안되요
onCreate시 localStorage에 데이터가 추가는 되는데, 화면에 작성한 글이 나오지 않아요 ㅠㅠ https://codesandbox.io/s/infallible-artem-sdzknh