위와 같이 노드와 npm 이 을 설치하였습니다. 그리고 나서 PS C:\Users\Kim_Seung_Yeon> npx create-react-app my-app Creating a new React app in C:\Users\Kim_Seung_Yeon\my-app. Installing template dependencies using npm... npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: my-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 C:\Users\Kim_Seung_Yeon\AppData\Local\npm-cache\_logs\2024-12-10T07_05_37_613Z-eresolve-report.txt npm error A complete log of this run can be found in: C:\Users\Kim_Seung_Yeon\AppData\Local\npm-cache\_logs\2024-12-10T07_05_37_613Z-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 크리에이트 하게되면 위와같은 에러가 뜨네요 ... 어떻게 처리해야 할까요 ?
강의 설명에 따라 build.gradle에 implementation ' com.google .code.gson:gson:2.10.1' 입력 후 이 오류 때문에 강의를 더 이상 진행할 수가 없습니다. 오류로 인해 ./gradlew clean build --refresh-dependencies 터미널에도 실행해보고 configurations.all { resolutionStrategy { force ' com.google .code.gson:gson:2.10.1' } } 이 코드도 추가해서 해결해 보려 했으나, 오류가 해결되지 않았습니다. 도움 부탁드립니다.
강의 재밌게 잘 들었습니다! 다름아니오라 감정 일기장 실습 중 section12에서 궁금한 것이 생겼습니다 생성된 일기를 삭제하면 "일기를 정말 삭제할까요? 다시 복구되지 않아요!" 컨펌 다이얼로그가 나타나는 건 잘됩니다. 근데 ok 버튼을 클릭하면 바로 home 페이지로 이동하지 않고 "존재하지 않는 일기입니다."라는 얼럿 다이얼로그가 그 다음으로 뜨고나서 ok 버튼을 클릭해야 home 페이지로 이동하게 됩니다. 올려주신 정환님의 깃헙 소스 파일을 다운받아 실행시키면 이런 문제는 발생하지 않아서 어디를 고쳐야할지 막막합니다. 제 소스 코드는 링크 에 달아두었습니다. 답변해주셔서 감사합니다!
안녕하세요! 강의 잘 수강하고 있습니다. 강사님 코드를 따라하면서 하고 있는데, 사진처럼 eslint에서 context를 따로 파일로 분리하여 관리하는 것을 하는 경고 메시지가 떠서 질문 드립니다. 그래서 제가 context를 분리하려고 구글링을 해봤는데 잘 되지 않아서 혹시 분리는 어떻게 하면 될지 질문드립니다!
섹션5에서 상품 이미지가 없는 상태로 add나 modify 를 하면 uplaod 폴더에 uuid 값만 있는 파일이 하나 생성됩니다. 혹시나 하고 CustomFileUtil 파일의 saveFiles 메서드에서 로그를 찍어봤는데 이미지 없이 넘겨도 files.size() 가 1이 나오던데 어떻게 해야 할까요? 강사님 자료 받아서 돌려도 같은 결과가 나옵니다.. 아래 이미지는 등록 시 이미지 없이 시도한 결과입니다.
"섹션4 그런데 백엔드 개발자가 API를 아직 못 만들었다"의 " msw 세팅과 .env" 강좌가 8분 38초까지 영상이 검은 화면으로 나옵니다. 해당 영상에서 검은 화면 중간 중간 노란색 안내 문구는 나오는 것과 다른 영상에서는 해당 증상이 보이지 않은 것으로 보아서 제 환경에서 해결할 수 없는 문제로 보이는데, 확인 한번 부탁드립니다.
강의를 따라가서 modify 버튼을 누르니 http://localhost:3000/todo/modify/[object%20Object]?page=1&size=10 이렇게 나오더라구요 그래서 섹션2 맨 마지막 강의를 찾아보니 modifyPage.js가 아래와 같았습니다. import React from 'react'; function ModifyPage(props) { return ( <div className={'text-3xl font-extrabold'}> Todo Modify Page </div> ); } export default ModifyPage; 2장 pdf의 동적페이지 이동: 수정/삭제 처리 후 이동 에는 import { useNavigate } from "react-router-dom"; const ModifyPage = ({tno}) => { const navigate = useNavigate() const moveToRead = () => { navigate({pathname:`/todo/read/${tno}`}) } const moveToList = () => { navigate({pathname:`/todo/list`}) } return ( ); <div className="text-3xl font-extrabold"> Todo Modify Page </div> } export default ModifyPage; 이렇게 나와있구요 어떻게 수정해야될까요? 참고로 위에 코드로 수정하면 export 어쩌구 하면서 오류가 나네요.. 참고로 리스트 버튼을 누르면 http://localhost:3000/todo/list?page=1&size=10 잘 넘어갑니다.. 추가 위에 두번째 코드처럼 ModifyPage.js를 수정해도 결과는 동일하게 http://localhost:3000/todo/modify/[object%20Object]?page=1&size=10 이렇게 나오네요.. 어떤 부분을 봐야할까요? 쳇지피티에 물어보니 백틱 문제라고 하는데 백틱도 적용했지만 해결이 안되네요.. 해결했습니다.. onClick={() => moveToModify(todo.tno)} 이 부분이 문제였던 것 같습니다. !!!!!!!!!!!!!!!!!!! pdf와 강의가 다른 부분에 대한 답변만 부탁드리겠습니다!
안녕하세요. 7.7)리뷰 삭제 기능 구현하기를 하는 중인데, 혹시 바로 삭제하지 않고 중간에 alert 같은 걸로 정말 삭제할지 체크하고 그 다음에 삭제하는 식으로는 어떻게 하면 좋을까요? form 태그에 onsubmit을 달아서 중간에 끼어드는? 방식으로 해볼까 했는데, 뭔가 useActionState랑 호환을 어떻게 해야할지 잘 모르겠네요... 아래 코드를 작성해서 해결했습니다! const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { const confirmDelete = confirm(`댓글을 정말 삭제하시겠습니까?`); if (confirmDelete) { const form = e.currentTarget; form.requestSubmit(); // 폼을 강제로 제출 } };
안녕하세요 이정환 강사님. 인스타의 위치검색기능과 비슷한 기능을 구현하고 있습니다. 조회버튼을 클릭해서 serachParams를 서버컴포넌트로 전달하는 형식이 아니라 검색어가 입력되면 바로 검색해서 결과를 출력해야 하는 페이지인 경우에는 전부 클라이언트 컴포넌트로 구성해야 하나요? 어떤식으로 구성해야 Next의 장점을 최대한 살릴 수 있는지 궁금합니다.
안녕하세요 강사님. 현재 섹션5를 보고 있는데 프로젝트가 어떤 프로젝트인지 헷갈려서 질문 드립니다. 섹션 1,2,3 을 보면 투두리스트 인것 같은데 갑자기 섹션4부터는 product나 상품들도 나오고, 그 뒤 섹션들을 보면 장바구니도 나오고 하던데 최종적으로는 어떤게 만들어지는 건가요?
portal할 요소를 아래처럼 작성하고 있는데 <div id="popoverRoot" /> 저는 이거를 popover를 사용하는 개발자가 신경안쓸 수 있도록 하는 방법이 있지않을까 해서 두 가지 방법을 생각했는데 하나는 useLayoutEffect 내부에서 아래와 같은 로직으로 div요소를 만드는 방법하고, useLayoutEffect(() => { if (typeof window !== 'undefined') { const portalElement = document.getElementById(portalId) if (!portalElement) { const newPortalElement = document.createElement('div') newPortalElement.id = portalId document.body.appendChild(newPortalElement) } } }, []) 아니면 document.body로 보내는 방법을 생각했는데 return createPortal( ... , document.body ) 두 방법 중 어느게 적절한지를 잘 모르겠어서.. 혹은 위 방법처럼 했을 때 어떤 문제가 생기는지도 아직 예상이 안되는데 혹시 강사님의 생각은 어떠신지 궁금합니다!
npm install 설치한 뒤 개발 서버 키기 위해서 npm run dev 입력했는데 이런 에러가 뜹니다. 인터넷 찾아 본 결과 npm install watchman 이거 해줘야 에러 안 나는 거 알고 있지만, 번번이 프로젝트 생성할 때마다 이런 에러가 꼭 뜹니다. 혹시 해결 방법이 있을까요?
안녕하세요....강의를 한번 다 듣고 다시 복습을 해보려고 하는데 처음부터 막혀버리네요ㅠㅠ node 를 설치했고, 작업폴더를 만든후 VS CODE 에서 오픈폴더를 했습니다. 터미널창에서 npm init 을 실행해서 엔터를 쳐서 완료했구요, 간단하게 문장넣고 확인하는 부분에서부터 나오지를 않아서요 ㅠㅠ 아래 질문을 검색해보니 비슷한 질문이 있어서 찾아봤는데요, 작업폴더명이 혹시나 한글이면 안되나 싶어서 영문으로도 해봤는데 똑같이 안되구요 윈도우계정 이름도 한글이 아니고 영문입니다. 혹시 외장하드에서 하면 안되는걸까요? 외장하드에서 한글폴더면이 혹시 안되는건지요.... 예를들어 외장하드>리액트>1-node 이런식이어서 안되는걸까요?
안녕하세요, 강의 애청자(?) 입니다. React Server Component가 도입된 후에 interaction이 필요한 component(Client component)만 JS Bundle에 포함시켜서 Browser로 보냄으로써 JS Bundle의 불필요한 계산(용량)을 줄일 수 있다고 말씀하셨습니다. 그렇다면 여기서 궁금한것이 React Server Component를 설명해주시기 전에 Pre Fetching에서 JS Bundle에는 사실 현재 Page에 필요한 JS Bundle만 전달된다. 이유는 용량이 커지면 hydration이 지연되기 때문. 그 후에 Pre fetching으로 나머지 연결된 모든 Page의 JS Bundle을 불러온다고 설명해주신 개념은 여전히 유지가 되는건가요? 즉, 아래의 순서가 맞는지 궁금합니다. (Brower) 접속요청 (Server) JS 실행-Rendering (Server to Browser) Rendering 된 HTML (Browser to User) 화면에 Rendering (Server to Browser) JS Bundle ( 단, '현재 Page에 필요한', 'Client component') (Browser) Hydration (Browser to User) Interaction 가능 - TTI (Server to Browser) Pre Fetching/JS Bundle (단, '연결된 모든 Page의', 'Client component') 이 순서가 맞을까요? 아니라면.. Pre fetching 개념이 React Server Component 도입이후 없어진건가요?(이건 아닌거같긴한데 ㅎ) 어떻게 동작하는지 궁금합니다. 항상 잘 듣고있습니다. 감사합니다.
