강의 마지막이 잘려있는 것 같습니다

안녕하세요복습하러 들어왔습니다.그나저나 코딩님.. 뭐하나 여쭤봐도..다른 어느 소스를 보니까.. component 1index.jscomponent2index.jscomponent3index.js.. 폴더마다..죄다 ...... index.js 가 있는데...짐코딩님께 여쭤 봐도 될련지요.. ?번거로우시겠지만.. 고견 , 첨언 부탁드립니다.(P.S: 또 ..AI가 답변할라나? .쩝) [ AI ]" 컴포넌트 폴더에 index.js를 두는 리팩토링 팁???? "리팩토링?... 엥? 저렇게 리팩토리 하라고?( 거 참..머 할라고 저렇게 한데??? .. ㅡㅡ;;) 코딩님..헬프용. ㅜㅜ;;;  

안녕하세요 강의를 너무 잘 보고 있습니다. 강의를 보다가 문득 궁금한점이 있는데 프론트엔드 취업을 위해서 어느정도로 알고 있어야 되는지 그리고 어디까지 공부를 하고 회사를 지원을 해야되는지 궁금하더라구요. 뭔가 완벽히 그리고 많이 알야된다는 걱정에 지원을 못하고 계속 공부만 하게 되는거 같은데 조언 부탁드립니다

갑자기 이해가.. .이게 왠.. ㅡㅡ;;;  const handleDeleteItem = id => { setDummyData(dummyData.filter(item => item.id !== id)); };에서 id 값을 어디서 가지고 오는지 알 수 있을까요?

Tailwind 버전 확인    tailwnd 버전차이 인지요 ? (AI 질문 발췌: text-5xl은 Tailwind v4에서도 정상적으로 지원되는 클래스입니다.)스타일이 적용 될 수 있는 설정 방법이 있을까요? 강의내용에 tailwindcss 는 v3.x 이면v3 버전으로 재 설치를 해야 빠를까요?

매번 강의를 보면서 따라 하는데매번 같은 강의를 복습을 해도..흐음..css 파일 아무리 드려다 봐도...  정렬이 conter로 가질 않고 있습니다교안을 보고 학습을 하는데... 채크 사항 답변 부탁드립니다.

vite 명령어로 프로젝트 생성끝 (확장 프로그램 미설치) -- App.jsx -- 위 화면 같이 붉은 라인이 생기는 이유가 무었인가요?(참고로 vscode 자동생성 기능을 off 로 설정해서 사용중)갑자기 위와 같은 화면이 나와전에 생성한 프로젝트를 열어 보왔는데요멀쩡히 (붉은 색 라인 없음) 잘 나오던 파일이위와 같은 증상이 똑같이 나오고 있습니다.코파일럿, 구글링이 알려준 데로 처리 했는데같은 증상이 나오고 있습니다.원인이 무엇인지 질문드립니다.(아~ "npm run dev" : 정상 동작합니다.)Plz....프로젝트 생성시 TypeSCript로 생성하지 않고일반 jsscript로 설정했습니다.ts파일 머시지 어쩌구 하는데.. 에공.. <div> 마우스 오버시 위 메지내 내용 화면> ※ vscode 에서 자동 생성을 막으려고 제가 무슨 짓을 했는지... (머 이것 저것 ctrl + shift + p로 ..내용을 찾아 뭔짓을 했는지... (json 파일) 그때 부터인듯 싶습니다.※ vscode 재설치 : 같은 증상질문 내용이 vscode에 관한 내용인듯 한데소스 내용이 아닌 질문이라..죄송합니다. !!! 아무래도 vscode typescript 버전인듯 싶습니다.근데 전 ctrl + , 를 눌러서 typescript 를 눌러서 검색해 보면  아 놔~~ 구글링에서 설명한 화면이랑 다르네요..하~~ 오전 부터 이게 왠 ... 우쒸~~ 

안녕하세요, 평소에 짐코딩님 강의 잘 듣고 있습니다.setForm에서 오브젝트로 title만 업데이트 해주더라도 기존의 description 값은 어떻게 그대로 유지가 되는 걸까요?

해당강의의 교안 내용과 강의를 보며 이해한 부분을 블로그에 정리해서 글을 써도 되는지 궁금합니다!

이미지 넣는 방법을 알려주신대로 적용했더니 출력 화면에 이미지가 나타나지 않습니다. F12 콘솔 화면에 이러한 오류가 뜨는데 어디가 잘못된건지 모르겠네요 각종 버전도 강의와 일치하고요,index.css 와 App.css는 비어있습니다.

좌측이 강의 코드, 우측이 강의 보며 10강까지 진행한 코드 결과입니다. 우측, 만들어진 코드를 보니 ReactDom, <React.~~> 등이 입력되어있지않아요. 무슨 문제인걸까요?

안녕하세요, 강의에서 훅(useState, useEffect) 사용 규칙과 내부 동작 원리를 공부하다가 궁금한 점이 있어 질문드립니다.React는 훅을 순서 기반으로 관리한다고 배웠습니다. 그래서 다음과 같은 규칙이 있는 걸로 알고 있습니다:훅은 컴포넌트 최상위에서만 호출해야 한다.조건문, 반복문, 중첩 함수 안에서 훅을 호출하면 안 된다.이와 관련해 궁금한 점은 다음과 같습니다:개발하다 보면 상태가 많아지고 상태마다 핸들러도 많아지게 되어 코드가 길어지게 됩니다. 그러다 보니 소스코드를 한눈에 파악하기 어려워지는 것 같습니다.실무에서는 상태별로 핸들러를 묶어서 작성하는 패턴을 많이 쓰나요? 예를 들어:const [count, setCount] = useState(0); const handleChangeCount = () => { ... };const [name, setName] = useState(''); const handleChangeName = () => { ... };이런 방식으로도 구현을 하시는지, 아니면 useState는 최상단에서 묶어 관리하고 handler는 handler끼리 useEffect는 useEffect 끼리 작성하는 것이 일반적인지 궁금합니다.

pushState로 경로를 바꿀 때는 렌더링이 다시 일어나지 않는데,popstate 이벤트에서는 왜 렌더링이 필요한 건가요

안녕하세요.CSS 라이브러리에 대한 비교 설명까지 너무 감사합니다.앞으로 AI Agent를 활용한 코딩을 고려하고 있습니다.이런 경우 더욱 적합한 CSS 라이브러리를 추천해 주실 수 있을까요?예를 들어 저는 현재 Cursor AI를 이용하고 있습니다. 좋은 강의 감사합니다.

왜 배포전에 기능 다 구현하고 했는데, 배포하면 이런 기능을 못 쓰고, 추가로 파이어베이스 등을 사용해야만 가능한가요....정 방법이 없나요?아니면 파이어 베이스 까지 활용해서 기능을 성공적으로 구현하는 걸 보고 싶은데 안될까요?? 추가 강의로든, 이 질문에 대한 답변으로든, 꼭 이번 프로젝트의 끝을 보고 싶습니다..!!

제가 본 바로는, 원래 notes 속성으로 db.json에 사전에 기입해둔 데이터가 있어서 실습하는 과정에서 해당 린캔버스는 오류가 없었는데, 다른 린캔버스 들어가면서 이런식으로 에러가 뜨네요. 전 짐코딩님 강좌 처음부터끝까지 다 스킵 안하고 보고 있는데, 저만 이런 오류가 뜨나 해서요.혹시, 강좌에서 코드에 이런 오류는 반영이 안된걸까요?

function create(baseURL, options) { const instance = axios.create( Object.assign({ // baseURL: baseURL, baseURL, // key 와 값이 같으면 생략 가능 }), options, ); return instance; }제가 사용한 코드입니다.(강의 내용 그대로 담았습니다. 주석 빼고 보면 강의 시 사용한 코드와 동일합니다.제가 궁금한 것은, 인터넷으로 관련 문법을 찾아 본 결과 Object.assign(A,B,C)같은 형식으로 하여, A,B,C 각각의 객체를 merge한다고 알고 있는데,강의에서는 Object.assign({baseURL}),options으로 options객체를 object.assign 함수 바깥에 위치하더라구요?이러면 아무 의미 없는 코드가 되어 버리는것 아닌가요?Object.assign({baseURL,},options)를 해야 되는거 같은데,제가 놓친 부분이 있는걸까요?(코딩이 전공이 아니라 제가 잘 모르는 걸수도 있습니다. 알려주시면 감사하겠습니다)

lean-canvas 프로젝트 생성부터 react-router-dom 설치하기까지 중간중간 보이는 package.json 을 보고 전부 버전을 맞췄는데,react-router 를 통해 home 에서 about, contact 가는 그게 전혀 작동하지 않습니다. 버전에 맞춰서 새로 영상을 찍어주시거나 가능할까요?버전을 맞춰도, 작동이 안돼서 어렵네요.. ㅠㅠ아래는 영상의 package.json 을 보고 버전을 맞춘 코드 입니다.{ "name": "lean-canvas-make-downversion", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "lint:fix": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0 --fix", "preview": "vite preview", "format": "prettier --write --cache ." }, "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.25.1", "styled-components": "^6.1.12" }, "devDependencies": { "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react-swc": "^3.5.0", "eslint": "^8.57.0", "eslint-config-prettier": "^10.1.8", "eslint-plugin-react": "^7.34.3", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.7", "prettier": "3.6.2", "vite": "^5.3.4" } }

제목과 같이 npm i react-router-dom@6.25.1로 해서 package.json 에도 "react-router-dom": "^6.25.1", 라고 뜨는데,레이아웃을 만들수가 없습니다 ㅠㅠ처음의 App 컴포넌트는 나오는데, home, about, contact 가 그 밑에 나와야 하는데 나오질 않습니다. ㅠㅠㅠ

react router 사이트에서 최신 스펙에 대한 튜토리얼을 보면, framework mode, data mode, declarative mode 3가지로 나뉘어 있습니다.여기서 이 3가지 방식은 각각의 tutorial 에서 보여주는 install하는 방법도 다르고, 그 안에서 route 생성하고 layout 만드는것도 코드 방식이 다 갈리는 것 같습니다. 제가 react router 강의를 거의 시작하지 못한 상태이고, 자세히 몰라서 확실하게 말을 할순 없지만,router 를 만드는 방식을 보면, 강좌의 버전과 지금 현재 버전은 달라도,data mode의 튜토리얼에서 설명하는 코드 방식이 강좌와 매우 비슷한것 같습니다.ex) import {createBrowserRouter, RouterProvider} from 'react-router-dom' 으로 시작하는 것이 똑같습니다. 이 3가지 모드는 뭐가 다른건가요? 강좌에서 나온 홈페이지에서도 이런 형식은 아니었던것 같은데 혼란스럽습니다.일단 저는 npm i react-router-dom 으로 설치했고, 강좌에 나온 코드를 일단 따라가고는 있는데, 최신스펙과 차이를 어떻게 받아들여야 할지 모르겠습니다. 예를 들어, 최신 스펙에서는 설치코드부터 'npm i react-router'로 뒤에 '-dom'이 붙지 않습니다.그럼에도 router생성 과정에서 import {createBrowserRouter, RouterProvider} from 'react-router-dom' 과 같이 코드가 거의 똑같은데 어떻게 받아들어야 하나요?혹시 강사님은 최신스펙의 react router를 사용하시나요? 그렇다면 강좌에 나온 코드 그대로 최신스펙에서 가져다 써도 문제가 없는지 알 수 있을까요?(경험이 있으시다면, 변경된점에 대해도 알고 계실것 같아서요)