안녕하세요 강의 잘 보고 있습니다. 린캔버스 수정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의 값은 문자열을 중괄호로 감싸서 전달하는 이유가 뭘까요 ? 그냥 문자열만 보내면 안되는건가요 ?

안녕하세요 강의를 너무 잘 보고 있습니다. 강의를 보다가 조금 헷갈리는 부분이 있는데 TodoContext.Provider로 value를 todos로 하고 그 밑에는 TodoDispatchContext.Provider로 value는 dispatch로 작성이 되었는데 이렇게 TodoContext와 TodoDispatchContext를 두개 작성된 이유가 궁금합니다.

안녕하세요 강의 너무 잘 듣고 있습니다 공부를 하다가 map메소드에 대해 궁금한점이 있습니다. 예를 들어 items.map((item) => ) 여기서 어떨때에는 items.map((item) => () ) 화살표 다음에 ()가 오고 또 어떤 상황에는 items.map((item) => {}) 이렇게 {} 가 작성되는데 어떤 차이점이 있는지 궁금합니다.

수강후기 남기는 창을 벗어나니 다시 수강후기를 남길수 있는 방법이 없는데요 수강후기 남길수 있는 링크좀 전달 해주시면 감사하겠습니다.

eslint.config.js (flat config): eslint.config.js 파일에서 eslint-config-prettier를 import한 후, 다른 설정을 재정의할 수 있도록 설정 배열의 마지막에 추가합니다.에서 어떻게 import해야하는가요? import eslint-config-prettier from 'eslint-config-prettier';로 하면 오류가 납니다.

.prettierrc를 적용했는데 저장하니 ;이 왜 안생길까요?

<Counter onTotal={handleTotal} /><hr/><Counter onTotal={handleTotal}/><hr/><Counter onTotal={handleTotal}/>여기서 Counter.jsx에서 console.log 를 추가했고버튼 세 개 중 하나만 눌러도 <Counter /> 세 개 전체가 리렌더링 됩니다. (log 가 세번찍힘)왜그런건가요 ?

뭔가 잘 모르겠는데.. 아래 확인 부탁드려도 될까요?설정한것도 없는것 같은데 기본 생성 명령어자체가 실행이 안된다니..ㅠㅠㅠㅠ manijang2@gimseonman-ui-MacBookAir VSProjects % npx create-react-app cra-react-app Creating a new React app in /Users/manijang2/VSProjects/cra-react-app. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template... added 1324 packages in 40s 268 packages are looking for funding run `npm fund` for details Initialized a git repository. Installing template dependencies using npm... npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: cra-react-app@0.1.0 npm error Found: react@19.0.0 npm error node_modules/react npm error react@"^19.0.0" from the root project npm error npm error Could not resolve dependency: npm error peer react@"^18.0.0" from @testing-library/react@13.4.0 npm error node_modules/@testing-library/react npm error @testing-library/react@"^13.0.0" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error npm error For a full report see: npm error /Users/manijang2/.npm/_logs/2025-02-03T13_23_36_276Z-eresolve-report.txt npm error A complete log of this run can be found in: /Users/manijang2/.npm/_logs/2025-02-03T13_23_36_276Z-debug-0.log `npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0` failed manijang2@gimseonman-ui-MacBookAir VSProjects %

안녕하세요 선생님 const nextState = formReducer(state, {type : "VALIDATE", validate })로 nextState를 정의하셨는데 애초에 SET_TOUCHED_ALL 디스패치가 실행되면 리렌더링VALIDATE 디스패치가 실행되면 또 리렌더링 되어 onSubmit 함수가 정상 동작해야 될거 같은데.. 그렇게 생각하면 안되는 이유가 궁금합니다.!