https://github.com/tolfromj/react-basic파이팅~!! (vite 사용해서 환경설정이 조금 다릅니다.강의 수강하면서 직접 타이핑해서 오타나 오류 있을 수 있습니다. )    

공식 사이트에 가니 npm tailwindcss init -p명령어가 사라졌는데 버전이 올라가서 그런건가요?

20.update-object받으니 컴포넌트의 기억저장서 부터이고 21조건부 랜터링부터 ~ 24이벤트전파까지의 소스  브랜치가 없네요

무한로딩 되면서 접속이 안되요 ㅠㅠ

인텔레리제이 세팅환경도 알려주세요

안녕하세요. 린캔버스 수정 수업 관련해서 질문이 있어서 문의 드립니다. const handleCanvasChange = async updatedCanvas => { try { await updateCanvas(id, updatedCanvas); setCanvas(updatedCanvas); } catch (err) { alert(err.message); } };addNote, deleteNote, updateNote 등의 이벤트가 발생할 경우 setCanvas를 통해 useState에 선언된 canvas 값을 바꾸는데 그렇게 되면 CanvasDetail과 그 하위에 선언된 자식 컴포넌트들이 전부 리랜더링되는 것 같은데 강의에서는 그렇게 보이지 않아서 문의 드립니다.const [canvas, setCanvas] = useState();canvas가 setCanvas 메서드를 통해서 상태가 변하면 리랜더링 되면서 하위 컴포넌트인 Note의 isEditing 값이 다시 false로 초기화되는데 강의에서는 여전히 true값이 남아있는 것 같습니다. 전체적인 코드를 동일하게 작성한 것 같은데 차이점이 발생하는 이유가 무엇일까요?

이미지 파일이라던지 json 파일이라던지.. 다운받아서 쓰라고 하셨는데 어디있는지 못찾겠어요...

안녕하세요 현재 고급- 데이터캐싱 부분의 강의를 보고 있는데 Fresh 상태에서는 데이터를 가져온 후 저장되어 있어 이 저장된 데이터를 사용하다 Stale상태가 되면 자동으로 다시 데이터가 요청되어 가져온다 라고 이해하고 있는데 맞는걸까요?

안녕하세요 강의 잘 보고 있습니다. 린캔버스 수정1 강의 부분을 보고 있는데 조금씩 점점 어려워 질수록 헷갈리는 부분이 많은데 handleNotesChange 함수의 section, updatedNotes 의 매개변수가 작성이 되었는데 아직 초보자인 제가 이처럼 함수를 작성할 때 매개변수가 필요한지 필요하지 않는지에 대해 잘 모르겠더라구요. 정말 간단한거 예를 들어 삭제기능을 할땐 삭제할 id가 필요하니 id를 매개변수로 받아오고 이러한 부분은 이해를 하지만 지금처럼 조금 복잡해질때 어떤 매개변수가 필요하고 왜 필요한지에 대해 아직 어려운데 이럴때 어떤식으로 공부를 하면 좋을까요?

선생님 린캔버스 프로젝트를 따라서 공부하고 있는데요.해더부분에 햄버거 버튼을 클릭하면 나오는 aside 메뉴가 z-9999를 줬는데요홈에 있는 돋보기가 더 위에서 노출되서요. 홈에 있는 서치 아이콘은 z-0으로 줬거든요 제가 뭘 잘못하고 있을까요 ㅠ

안녕하세요 삭제기능 구현 강의를 보다가 조금 어려운 부분이 있어 질문을 드립니다. canvas.js 파일에서 getCanvases함수와 createCanvas함수는 canvases.get, canvases.post앞에 return이 붙었고 이건 다른 곳에서 사용할 수 있다라고 알고 있습니다. 그럼 deleteCanvas는 왜 똑같이 return을 사용하지 않고 async await을 사용했는지 궁금하고 왜 위에 두 함수는 return을 사용했는지도 궁금합니다.

안녕하세요 현재 캔버스 프로젝트 부분을 공부중입니다. 공부를 하면서 파일에 대해 궁금한점이 생겼는데 컴포넌트에는 뒤에 .jsx를 작성했는데 api폴더에서 canvas와 http 파일에는 .js가 붙은 이유가 뭔지 궁금합니다.

안녕하세요! React로 프로젝트를 진행할 때 여러 함수들(이벤트 핸들러나 로직 처리 함수 등)을 구현하게 되는데,이런 함수들을 어느 위치에서 정의하고 관리하는 것이 좋은지 궁금합니다.예를 들어, B 컴포넌트 안에 A 컴포넌트가 있고, A에서 어떤 이벤트 함수가 필요하다면그 함수를 B에서 정의하고 props로 A에 전달하는 식으로 처리하는 것이 React에서 일반적인 방식인가요?그리고 만약 그 함수가 여러 컴포넌트에서 재사용되어야 한다면,이들 컴포넌트의 공통 상위 컴포넌트까지 올라가서 정의한 후 각 컴포넌트에 전달하는 방식이 맞는지도 궁금합니다. 혹시 더 좋은 구조나 패턴이 있다면 조언 주시면 감사하겠습니다!

 터미널에서 코드 입력해서 vs코드 열 수 있도록 하는 설정 강의보고 따라했는데"code" 쳐도 제 vs목록에 PATH에 'code'명령 설치 라는 항목이 없어요ㅠㅠ

안녕하세요. 얕은복사와 깊은복사에 대해 질문합니다.제가 알기론 지금 예시를 든let person1 = {firstName:'짐', lastName:'코딩'};let person2 = {...person1};person1.firstName = 'GYM'console.log('person1: ', person1);console.log('person2: ', person2);이거를 깊은 복사라고 하셨는데얕은 복사 아닌가여?? 값이 원시값이라서 참조 공유 문제가 안생기는거 아닌가요??깊은 복사는 모든 깊이까지 값 자체를 완전하게 복사해야되는걸로 알고 있어서 cloneDeep이나 JSON.parse(JSON.stringify(person1)) 이런식으로 써야되는걸로 알고 있거든여.const items = [...todos] 도 얕은 복사지만 새로운 배열 주소를 만들어서 리액트에서는 변화가 생겼다고 판단하고 리렌더링이 되는걸로 알고 있는데 아닌가요??

// MyClock.js import MyClockImage from "./MyClockImage"; import MyClockTime from "./MyClockTime"; import './MyClock.css'; function MyClock() { return( <div className="c1"> <MyClockImage/> <MyClockTime/> </div> ); } export default MyClock; MyClockImage.jsimport clock from './clock.png' function MyClockImage() { return( <div className="c2"> <img src={clock} alt='clock'/> </div> ); } export default MyClockImage; MyClockTime.js function MyClockTime() { return( <div className="c3"> 현재 시각 : {new Date().toLocaleTimeString() } </div> ); } export default MyClockTime;  MyClock.css// c1 클래스의 스타일 .c1 { width: 100% ; height: 100% ; display: flex; flex-direction:column; justify-content: center; align-items: center; background-color: #282c34; } .c2, .c3 { display:flex; justify-content:center; align-items:center; } // 이미지 .c2 { width: 100%; height: 60%; } // 글자 .c3 { width: 100%; height: 40%; color:white; }  App.jsimport logo from './logo.svg'; // svg image file import './App.css'; // 전역 css (모듈 css는 import styles ... module.css) import { FaMapMarked } from "react-icons/fa"; // icon import MapView from './MapView'; import Hello from './01_Hello_Component/Hello'; import MyClock from './02_MyClock/MyClock'; import { BiHomeHeart } from "react-icons/bi"; import MyDiv1 from './03_Probs/MyDiv1'; import MyList from './04_Probs_Advanced/MyList'; import Lotto from './05_Lottery_UseState_Hook/Lotto'; // flex-col : 수직 배치 // w-full : 화면 전체 너비 // h-screen : 화면 전체 높이 // mx-auto : 컴포넌트 내부 수평 중앙 정렬 // justify-between : flex 컨테이너 안 항목 양끝 정렬 + 사이 공간 자동 설정 // text-xl : 텍스트 크기 XL // p-10 : padding, bg: background color // grow : 헤더, 푸터 사용하고 남은 너비를 main이 사용하겠다. // overflow-y-auto: 수직으로 내용 많아지면, 자동 스크롤 생성된다. function App() { return ( <div className="flex flex-col w-full h-screen mx-auto"> <header className='flex justify-between items-center text-xl font-bold h-20 p-10 bg-slate-200'> <p>리액트 기초 : probs</p> <p><BiHomeHeart/></p> </header> <main className='grow w-full flex justify-center items-center overflow-y-auto'> <MyClock/> {/* <MyDiv1/> */} {/* <MyList/> */} {/* <Lotto/> */} </main> <footer className='flex justify-center items-center h-20 bg-black text-slate-100'> ⓒ Joo </footer> {/* <MapView/> */} </div> // <div className="App" style={{height: '100vh'}}><MapView/></div> ); } export default App; // 외부에서 import할 수 있도록, 무료 양질의 강의에 감사드립니다.

안녕하세요 강의 너무 잘 보고 있습니다. 공부를 하다가 궁금한점이 생겨서 질문을 드립니다.메모를 추가 삭제 기능에서 처음에는 추가같은 경우에는....const handleAddNote = () => { setNotes([...notes, {id: "", content: ""}]) }이런식으로 ...notes로 기존 값에다가 id, content로 새로운 메모를 추가하는 기능으로 알고 있는데 나중에는...// 새로운 캔버스 export function createCanvas() { const newCanvas = { title: uuid().substring(0, 4) + '새로운 린 캔버스', lastModified: dayjs().format('YYYY-MM-DD HH:mm:ss'), category: '신규', }; return canvases.post('/', newCanvas);이런식으로 추가기능을 만들고 삭제도 filter를 이용을 하는데 나중에는 export async function deleteCanvas() { await canvases.delete(`/${id}`); } 이런식으로 삭제 기능을 작성이 되었더라구요. 첫번째 코드들은 처음에는 추가, 삭제기능이 되지만 새로고침 후에는 다시 원래대로 나오고 두번째 코드들은 서버에서 추가, 삭제 기능을 만들어서 새로고침을 하면 실제로도 추가, 삭제 기능을 하게 되는 것인가요? 만약 그렇다면 첫번째 코드들은 새로고침을 하면 원대대로 되는데 왜 사용이 되는건지 궁금합니다.

안녕하세요 메모 추가 및 제거UI 강의를 듣다가 조금 헷갈리는 부분이 있어 질문을 드립니다.import { useEffect, useRef, useState } from 'react'; import { AiOutlineClose, AiOutlineCheck } from 'react-icons/ai'; const Note = ({ id, onRemoveNote }) => { const colorOptions = [ 'bg-yellow-300', 'bg-pink-300', 'bg-blue-300', 'bg-green-300', ]; const [isEditing, setIsEditing] = useState(false); const textareaRef = useRef(null); const [content, setContent] = useState(''); useEffect(() => { if (textareaRef.current) { textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px'; } }, [content]); return ( <div className={`p-4 bg-yellow-300 relative max-h-[32rem] overflow-hidden`} onClick={() => setIsEditing(true)} > <div className="absolute top-2 right-2"> {isEditing ? ( <button aria-label="Check Note" className="text-gray-700" onClick={e => { e.stopPropagation(); setIsEditing(false); }} > <AiOutlineCheck size={20} /> </button> ) : ( <button aria-label="Close Note" className="text-gray-700" onClick={() => onRemoveNote(id)} > <AiOutlineClose size={20} /> </button> )} </div> <textarea ref={textareaRef} value={content} onChange={e => setContent(e.target.value)} className={`w-full h-full bg-transparent resize-none border-none focus:outline-none text-gray-900 overflow-hidden`} aria-label="Edit Note" placeholder="메모를 작성하세요." style={{ height: 'auto', minHeight: '8rem' }} readOnly={!isEditing} /> {isEditing && ( <div className="flex space-x-2"> {colorOptions.map((option, index) => ( <button key={index} className={`w-6 h-6 rounded-full cursor-pointer outline outline-gray-50 ${option}`} aria-label={`Change color to ${option}`} /> ))} </div> )} </div> ); }; export default Note; 이 코드에서 useEffect(() => { if (textareaRef.current) { textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px'; } }, [content]);이렇게 useEffect를 사용했는데 useEffect는 컴포넌트가 마운트 될 때 먼저 실행이 되고 또 의존성배열이 빈배열이면 한번만 실행이 된다로 알고 있습니다. 그럼 여기서는 빈 배열이 아닌 content가 있으니 메모장에 작성할 때마다 메모장을 늘어나게 하기 위해서 useEffect를 사용했다라고 이해하면 될까요?

안녕하세요 현재 Tailwind CSS 강의 부분을 보고 있는데 강의에 나오는 테일윈드 사이트와 현재 테일윈드 사이트가 좀 다른거 같아 우선 강의에 나오는 설치 명령어로 하고 있는데 그 중에 npx tailwindcss init -p 이 명령어를 작성하니 아래 이미지처럼 에러가 계속 나더라구요. 어떤 부분이 잘못된건지 모르겠습니다.

안녕하세요, 강의 잘 보고 있습니다 😀FormControl 컴포넌트 사용시 htmlFor prop 값 넘길 때 문자열을 중괄호로 감싸서 넘기는데요, "label" prop의 값은 문자열을 그냥 전달하는데, htmlFor의 값은 문자열을 중괄호로 감싸서 전달하는 이유가 뭘까요 ? 그냥 문자열만 보내면 안되는건가요 ?