안녕하세요. 컴포넌트 최적화 하는 부분에서 질문있습니다. 10.3강에서 대략 5분 40초쯤에 Header 컴포넌트에 memo 기능을 사용해서 최적화 한 뒤에, 체크박스를 클릭하면서 헤더 컴포넌트가 리렌더링이 일어났는지에 대해 확인하는 부분이 있습니다. 질문사항은 memo 기능을 통해 최적화를 하던 안하던 개발자 도구에서 Header 컴포넌트가 항상 리렌더링이 일어나는것 같은데 어떻게된걸까요? 헤더부분이 계속 노란색으로 뜨면 리렌더링이 일어났다는걸로 보이는데 강의 영상에서도 다른 컴포넌트와 동일하게 노란색으로 변경됩니다. 강의에서 TodoItem을 커스텀한 부분은 강의대로 적용됐습니다.(이부분은 리렌더링이 발생하지 않습니다.)
기존에 강의로 msw로 코드만들었던 수강생입니다. 여러개의 질문과 에러?라고할만한 사항이 있는데요. 기존강의에는 http.js 파일에서 express 기반으로 서버를 만들어서 9090포트를 사용했는데요. 새로 강의하신 내용에서는 express를 배제하고 코드가 간결하게 바꿨는데 이렇게 바꾼 내용의 대해서 조금 설명 부탁드립니다. 간략히 알기로는 기존 MSW는 클라이언트(브라우저)에서 동작하기 때문에 서버에서 html 요청이 발생하기 때문에 요청을 가로챌수 없기 때문에 express썻다고 알고있습니다. 이게 맞을까요? 그리고 바뀐코드는 이런문제가 해결이 된건가요? 1번의 문제가 해결되었다면, 기존의 9090 서버포트와 더불어 npm run mock를 실행하여 서버를 동작했던걸로 알고있는데 이기능은 필요한가요? msw 세팅과 .env 강의부분에서 환경변수를 api에 직접 넣도록 수정했는데, 이전꺼랑 차이가 뭔가요? 추가로 클라이언트컴포넌트에서는 환경변수가 콘솔로 읽히고있는데 handler에서는 읽히지 않고있습니다. 코드는 이전강의 코드(백엔드 db연결전까지)와 같고요. 추가로 nextjs나 react를 버전업을 하지는 않았습니다. 이유가뭔지 유추해주실수있을까요?
위와 같이 노드와 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 ) 두 방법 중 어느게 적절한지를 잘 모르겠어서.. 혹은 위 방법처럼 했을 때 어떤 문제가 생기는지도 아직 예상이 안되는데 혹시 강사님의 생각은 어떠신지 궁금합니다!
